What's the Big Deal About Tiny Houses?

Home page

For our final in Web Design, we were supposed to combine our skills from previous projects into making a web page about something we are interested in or passionate about. I am very interested in anything having to do with tiny houses, so that is what I decided to dedicate the topic of my website to.

All of my docs

 We were required to include information about our topic in our own words, so this project required a lot of research. Because I am very interested and passionate about tiny houses, I had no problem with spending a lot of my time, both in school and out of school, researching my topic. After all of my information had accumulated, I realized that I had far too much information to make just one sub-category of. I ended up having information on the benefits, designs, and mindset of tiny houses (each with multiple sub categories).

My banner

My graphic

Once I had all of my information on tiny houses, I was ready to design my web page. Luckily, we didn't have to make one from scratch; we had previously made out Real Or Hoax? page that we were able to simply transfer our information to. At first, I had no idea how to design my website, but after making a web banner, I based my color scheme off of it. This brought my website together. The light and dark burgundy, cream, and green colors really evoked a comforting feeling that I wanted to portray through my website. In addition, I made a simple graphic to place beneath my side bar. I made the "H" in houses into a house my adding a roof.

Links page

Next, I had to do all of the technical work. I  linked all of my pages together (which took a very long time considering hoe many pages I have), put pictures on all of the pages, and found links for each page. It was a little bit frustrating having to use the "label for reuse" button when searching for copyright free images because I knew that there were really good tiny house pictures that were copyrighted. Eventually, I accumulated a good selection of pictures. After that, I found multiple links to strengthen my page and to let viewers learn more about tint houses.







Overall, I enjoyed this project (mainly because I enjoy tiny houses), and I think that it turned out very well. See my website here.

Semester Reflection

The first half of Graphic Design has been filled with different projects and experiences. I have learned many new concepts and made many new things. 

Photoshop

collage

challenge

We started of the year by watching step by step tutorials over how to do an assortment of different tasks in PhotoShop. I learned many new techniques, skills, and tools, such as how to use the content aware fill tool, the spot healing brush, the clone healing brush, the clone patch tool, and the patch tool. After mastering these skills, we were challenged to make a collage and were told to be creative in making a picture with the a few given pictures. Although I did successfully complete these tasks, PhotoShop is not a favorite of mine because I find it very challenging and confusing. However, it is very useful to use for editing photos.

Raccoon 

Fortunately, after completing our PhotoShop unit, we were on to Adobe Illustrator. We were allotted several weeks to first create an adorable raccoon by following the instructions from a tutorial. The raccoon was not very difficult to make, but it did require many steps because of adding shadows and highlights. We then transferred out raccoon over to a postcard. We had to think of a topic that we wanted our post card to portray. Summer was just ending, so I decided to make mine Summer-themed. I created a lemonade stand, some trees, some butterflies, a big sun, and a friend for my raccoon. I learned many new techniques through this project which I utilized in future projects. In addition, this project really made me love Adobe Illustrator because I was able to really use my creativity to make a colorful, fun project. This project was also the first project was also professionally printed off to be a real post card which is very exciting. In addition, this was also our first project that we uploaded to Behance, a platform to discover and showcase work. I like Behance but not as much as I like Blogger. Find me on Behance here.

Self Vector

To continue on our Illustrator journey, we created a self portrait. We were not given any instructions to this except to use the pen tool. We first uploaded an image of ourself and then traced it using the pen tool. I started this project with no experience with the pen tool, and through a lot of mistakes, I ended with a really good grasp on it. I worked really hard and long on this project, and I am very happy with the results. I was aiming for a cartoon-ish representation of myself, yet I still including some shading and other minute details. Others made theirs look very realistic, but that wasnt what I wanted. 

Infographic

The Infographic project was by far my favorite project that we assigned with through first semester. We first learned about what makes a good infographic and found design inspiration. We then had to brain storm what topic we wanted to make ours about. I chose happiness. This project was the first project that required additional research, so we spent longer on this project than other projects. I had to spend a lot of time researching differnet facts and statistics about happinesss. We also had to cite our sources. For this project, I looked into color theory and fonts to portray happiness. I chose bright colors and a swirly font. I also had to look at my information and think of a way to portray this information. This project also forced me to design it symmetrically. Because my infographic contained so many little pieces, it was challenging to keep everything well puttogether, and it took a while to complete. I combined all of my previous skills that I has acquired from previous projects, and I also learned a lot about visual appeal. I am very happy with how it turned out. This was also the first project that we got peer evaluations on. My peers suggested that I change a few things, such as the background color. I changed this, and it made my infographic much better.

Research Paper and Powerpoint

For our very last project of first semester, we were told to choose a movement or person from a list to research. I chose Milton Glaser, an impactful Graphic Designer. Is dedicated a large portion of my time in class to researching my topic and wrote an essay about him. I had to put my essay in APA format which was new to me. Next, after completing my essay, I transferred all of my information over to a powerpoint. Our powerpoint was supposed to reflect our topic's artistic flare. I included many bright shapes and colors because those were apparent in Glaser's work. I think that my powerpoint could have been more official and clean. This project was a lot of work because I had to spend a lot of time researching and constructing an essay. 

This semester was very fun and educational. 

Happiness Infographic

Infographics depict information in an appealing and balanced way. There are many steps to creating an infographic:

1.) Establish your topic: I chose to do my infographic over happiness because happiness is important, and I would like there to be more happiness in the world. 

2.) Research your topic: I found statistics and fun facts about happiness through many different websites. Notice how they are all cited at the bottom of my infographic.  

3.) Create your layout (wireframe): Next, I created a rough draft on paper of my infographic. A good divider between each fact/ statistic is important to have in order for it to be organized. I decided to repeat smiley faces to create lines as my divider. For my title, I chose 'choose happiness'. I made the O's in choose eyes and happiness into a smile.. To depict my facts, I created the picture as it was described. For example, I made a happy old man for my "Happiness makes you live longer" fact. For my 20% statistic, I made it very large and put healthy things in it. In addition to my facts and statistics, I also included the steps to happiness at the bottom to show how to achieve happiness. I thought it was a good way to tie the whole infographic together.

4.) Put it all together on the computer: Once I was content with my rough draft, I transferred it onto adobe illustrator. I chose a color scheme that portrayed happiness I thought that bright reds and yellows did that nicely. In addition to color, I also found a happy, swirly font that reminded me of happiness. I made the word happiness yellow and bigger to make it stand out.

5.) Receive feedback: After completing my infographic, I had the opportunity to share it with my classmates. I described the details of it and why I chose to do the things that I did. They gave me feedback which I then used to better my finished project. The biggest adjustment that I needed to make was my background color because it was too dark to read the text on top of it. This made my infographic more appealing.

 

In the end, I think that my infographic fulfilled its job at depicting happiness. It has been my favorite project so far.

Halloween page

Because it was Halloween, we made a Halloween web page to celebrate this fun time of year. This website included many new elements- many of which being photoshop embellishments.

To spice up our Halloween page, we typed it is Halloween in a spooky font and made it transition from black to purple and purple to black again and again. This is the title of our web page. I think it looks very cool and spooky.

In addition, we made a jack o'lantern . It looks like the candle on the inside is flickering in the wind to make it appear more realistic and cool. This is a nice touch to the web page.

Lastly, we made a gradient to set as the background image. You might not have noticed it, but it looks better than just having a plain orange background. Although we are not in animation, it is still important to expand upon areas that we will benefit from to make out websites more appealing. Other than creating multiple animations, we learned a new thing in Dreamweaver called an iframe. This is a big picture that shows up on the webpage after you click on it to see a new webpage. Because our theme was Halloween, we found links to websites over Halloween topics

I really liked the way this webpage turned out. It did require a lot of effort and steps, but it is cool to see the final project. 

Raccoon project

After the Photoshop tutorials, came our long awaited Adobe Illustrator project. For our first project we were given a written tutorial of how to make an adorable raccoon.

 We first made the raccoon. The raccoon was not very hard, but the process did have a lot of steps. We added shadows and other little details that aren't very apparent but enhance the overall picture. Next, we were to choose from a plethora of different leaves and berries. Each choice came with a step by step tutorial of how to make it just like the raccoon tutorial did. I chose to make a branch with leaves. After this, we envisioned what we saw our raccoon as. I saw my raccoon as a boy, so I added a baseball cap and overalls.



After adding an identity to our raccoons,  we were told that the project was going to become a postcard. I thought that because my raccoon was wearing summer clothing, I should make my postcard have a summer theme. Then I got to brainstorming about what would depict summer. I came up with the idea that a fresh cold glass of lemonade was the best way. After making my lemonade stand, I thought that my raccoon was a bit lonely, so I added a girl raccoon. I gave her a bow and a dress (even thought the dress is not visible). My picture was cute, but it was boring, so I spiced it up with trees, butterflies, clouds, and a sun. Of course our postcards needed some words on it, so we  brainstormed what we wanted ours to say. We got to first write out our phrase on a piece of paper (I chose "Have a Sweet Summer" to go along with the sweet lemonade theme), next we scanned it into the computer, edited it a bit by adjusting the color and things like that, and placed it onto our image. Because the postcard is going to be printed off like an actual postcard, we had to include the back side. The format was already available in the server files, so all we had to do was add a little creativity to it. I wanted to keep it sweet and simple, so I just added a little pink oval along with a lemonade pitcher and a lemon.


This project is the first that was ever uploaded to our personal Behance accounts. Behance is a platform for people to share their artistic creations. It is a very slick and clear website that is also very professional. To upload our raccoon projects we made a long art board on Illustrator and laid out our pictures. I added a nice color theme to mine to make it more attractive. This is what is posted to Behance. I like Behance because it allows anyone to easily explore new ideas and inspires creativity. Find me on Behance here.

Raven VS Crow from Adobe DreamWeaver

Ravens and crows may look similar, but they are actually different. Because the raven is our mascot at Olathe Northwest, we created a webpage describing the distinction between the commonly confused birds. Unlike the previous web pages, when creating them with TextMate, we were introduced to Dreamweaver. Dreamweaver is very different than text mate. One reason being that text mate requires you to type out everything manually, while Dreamweaver is mainly done through the CSS menus. The menus are very simple to use. It is a lot easier to just press a button in the CSS menu rather than having to recall the html code for it and type it out. Dreamweaver enables you to be very creative and Persue your creativeness simply. 

Hexadecimal Color Coding and Fonts

Hexadecimal Color 

Hexadecimal color coding is a way to display color in HTML. It is represented by #RRGGBB; the R representing red, the G representing green, and the B representing blue. Hexadecimal has a base of 16 digits, which range from 0-9 and A-F. The letters are higher than the numbers, so F is like a 16. The higher the number/ letter, the lighter the color will appear and vice versa.

 We incorporated our web design knowledge with our knowledge of the hexadecimal color coding to create a webpage. Looking at the HTML coding, you can see that the body has a lot of similar looking coding. But you can see that each is a different color with a different hexadecimal color code. We started off by doing the rainbow. For example, to create red you make the RR part the highest, which is FF, and leave the rest as zeros. Then we made a lighter color/pastel section. To create the lighter colors, we made the colors less vibrant. To do this, for example, the color red: You keep the RR turned up all of the way but make the other spaces in between dark and light by making them eights. Lastly, we made a section of "colorless colors." Black is the lowest number (#000000) and white is the highest (#FFFFFF), so to create gray, you meet half way. Gray would be #888888.The hexadecimal color coding does not always have six digits. If there is a color that has the same digit in each place, it can be shortened to just three digits. For example, #FF0000 can be shortened to #F00.

 This is what the Hexadecimal webpage looks like.

In addition to creating the hexadecimal page, we made a font page as well. We first learned the eight core web fonts. Some of which are serif fonts which means they have little 'lines' or feet at the end of them, while some are sanserif which means they do not. The serif fonts include:

• Times New Roman
• Georgia
• Courier

The sanserif fonts include:

• Arial
• Verdana
• Tahoma
• Trebuchet

• Comic Sans, which is a very controversial font. Many people hate it because it is commonly misused, disproportionate, and is overused.

After being educated on these fonts, we used created a webpage for it. We included the eight core web fonts by doing the same thing as creating the color page instead with fonts. We created a div style and set the font family to whatever the font was. We then typed: The quick brown fox jumps over the lazy dog. We typed this to display the letters of the alphabet because this simple sentence includes all of the letters in the alphabet.

This is what the font webpage looks like

Photoshop Reflection

In Graphic design we started working with Photoshop. Photoshop is used for editing pictures, so that is what we did. We edited a wide array of pictures, after watching tutorials instructing how to do it. When Photoshopping an image, it is important to be as precise as possible, or it will be easy to tell that the picture has been altered. I learned this the hard way through editing the pictures.

Content Aware Fill Tool

We started off simple by editing out unwanted marks and scratches that were on the wall behind the man. This was done by selecting the marks with the content aware fill tool, and then pressed delete. It is a very handy tool because it gets the job done easily, fast, and well. This is my favorite tool that we learned this week because it is very useful and easy to use.

We then got the opportunity to better our skills by using the content aware fill tool once more. First we selected the logo on the man's surfboard, and then we moved it up higher on the surfboard. Because the bottom of the the surfboard is slightly a darker color than where the logo was moved to, we also had to adjust the background color to match. 

                                         Spot Healing Brush

Secondly, we used the spot healing brush tool. The boy had dirt splotches all over his face, so we had to remove them. To do this we used the spot healing brush. The spot healing brush requires a sample background color selection to accurately conceal the blemish. You just select the background color, and color over the dirt, and it is gone. I really like this tool because, like the content aware fill tool, it is very simple to use, does a great job, and is very fast. 

Clone Healing Brush

Next, the clone healing brush tool was used to remove a tag from the girl's coat. Unlike the spot healing brush, the clone healing brush selects the around colors automatically. All that needs to be done is draw over the tag to erase it. After this, we added some texture back into where the tag used to be. I could have done better with this step. My 'texture" turned out being very sloppy and unnatural looking, although it is not very noticeable if it is not zoomed in. 

                                Clone Patch Tool

There was a pole perturding through the man's head in this picture, so we edited it out. We used the clone patch tool to remove the pole and then go over it with the background sky color. If you look closely, the sky is a slightly different shade to the far left because I could have done a better job using the tool. This is a useful tool, but I'm not very good at using it. 

Patch Tool

The man had a political shirt stating that "everyone poops," so we removed it from the picture. This was done using the patch tool. First we drew around the graphic, then moved it to a space that was the color of his shirt. The tool recognized the color of the shirt automatically and changed the graphic to the color.

                                           The Collage

The most challenging of the Photoshop tutorials was the collage. It involved everything that we learned from previous videos and even threw in some new things as well. Too many tools and steps were used in the making of the collage to list. We started off with three pictures of which we arranged to look like it does to the left. This sounds simple but it was quite the process. We had to get another picture to continue her sleeve because it was cut off, expand the background/ scenery, and color in the sky. I did not do so well on expanding the background as you can tell by the obvious vertical line on the left hand side of the picture. This was a very frustrating project but was educational.

Challenge

Lastly, the class got to use our creativity and newly learned skills. We were given a photograph of a man, along with multiple scenery pictures. We were then told to let our imagination soar. I had no idea what to do, so I just winged it. I probably did everything wrong, and I couldn't even recall what  did, but in the end it actually turned out looking pretty decent.

Internet Archive "Wayback Machine"

The moment a website is "born" to the present, the evolution of it is being tracked. Some websites change drastically, while some stay pretty much the same. From the content to the design, it is always interesting to see the progression of a website. Luckily, there is a website called Internet Archive "Wayback Machine"(https://archive.org/web/), that allows you to go back in time to the very beginning of a website, and anywhere in between. In web design we looked up popular websites to go back in time to. I chose Amazon, YouTube, and Blogger.

Amazon.com

Amazon 8/25/16

Amazon 8/25/16 HTML

Today Amazon.com looks clean and appealing. It gives the online shopper much to want to click on. There is a lot going on, yet it is simple and organized. There are also many pictures and icons. To the right is Amazon's present HTML (Hyper Text Markup Language, which is the language used for content on the web). There is a lot going on in its HTML.

Amazon 10/13/99

Amazon 10/13/99 HTML

Amazon has not always looked so good. On October 13th, 1999 the website could use some work. It had a painfully dull design with little to no appeal. It was all words, with no pictures and few icons. The HTML in very simple which is shown through its design. Luckily Amazon has changed since the twentieth century.

                                                              Youtube.com

Youtube HTML 8/24/16

Youtube home page 8/24/16

Youtube has a very organized layout, and it needs to be that way because of the millions of videos it hosts. The popular video sharing platform is easily accessible, with its search bar placed at the top, and recommended videos placed in plain view. The layout is simple and works well for its intended use. The HTML is quite complex with many different sections, which correlates to its visual design.

Youtube home page in 4/28/05

Youtube HTML in 4/28/05

Everyone knows Youtube as a site to find and post videos, whether it be for entertainment or a tutorial; but Youtube has not always been this way. Back in 2005, at the "birth" of Youtube, it was actually used as a dating website. Not only was the old Youtube's intended use cringe-worthy, so was its design. The Youtube logo has stayed pretty much the same to the present day's, but the wys it was placed on the original website is very bad. It would be much better if the logo was made transparent. Overall the original design is not interesting. Its HTML is very simple. On each new line there is hardly anything.

Blogger.com

Blogger home page 8/24/16

Blogger HTML 8/24/16

What this blog post looks like as you are reading it now was quite different than what it would have been back then. Blogger's home page is very artsy, clean, organized, colorful, and simplistic. It has a sign up button, a few pictures, and a changing background. The HTML is very complex because the home page has a lot going on, but it is displayed in an organized way.

Blogger 6/1/04 HTML

Blogger 6/1/04

Blogger was still a blogging platform at its beginning, but it was not as aesthetically pleasing as today's is. Blogger's design was extremely boring and bland, with its lack of color. Unsurprisingly, its HTML was incredibly simple.

e-Magine

At e-Magine we had the chance to see what all of the upperclassmen from Olathe NorthWest, and other Kansas schools were doing. It ranged from website designs to short films, but they were all equally impressive. Everyone did a wonderful job creating their creative project, and I hope to become as good as they are.

E.O.Y. reflection

e-9 is drawing to a close. Not only was I able to be a part of something very fun, I also learned a lot to do with what makes an appealing design through color psychology, CARP, text, and much more. Besides learning design tips, I learned the basics of the four rotations. 

I learned how to make an animation in animation. Animation was probably the hardest of the stands, but it was also the first strand, so I might have just not been prepared. Animation had many different steps in making something and was very complex; but in the end, it was worth it when you can look at the awesome final product. The bouncy smiley face was my favorite project that I made in animation.

After animation was video. Video was very exciting because you're able to let your personality shine through in videos. You can do the same in the other strands through voice and design, but in video you can act out funny, sad, or scary scenes. Video was not very difficult and it was very fun. My favorite video that I put together was the e-9 promotional video.

We were introduced to website design during second quarter. Web design is very good for letting your creativity loose. At least for me, it was very fun to put all of the colors that compliment each other together, and incorporating different fonts to make the website look appealing and clean. My favorite website that I designed was for my quarter four project, Pocket Cosmetics. I was designated the job of Website designer. I loved how the website turned out with its girly colors and fonts.



The last of the rotations was graphic design. Graphic design was very fun. It allows you to put your imagination down into a beautiful creation. Graphic design is a little challenging because it has so many different tools and shortcuts, but it's very fun. My favorite graphic design creation that I made was the AVAcado logo.

I also learned how to communicate, collaborate, and how to lead a group and keep it in check. This has been achieved mainly through the last quarter rotation where we invented a product. I would say that my greatest strengths are coming up with an idea, while my greatest weakness would have to be exhibiting the idea. It is easy for me to imagine what I will do, but it is hard to do the technical aspects of making it happen. I have improved, however, on learning how to do things so that I do not need as much help. With what I have learned throughout the year, I plan to create more creative and appealing things. If I am making a card or a power point I can use what I've learned to make it look really good. To make the e-Comm experience better and simpler for beginners, I would suggest a paper that has all of the keyboard shortcuts and how to do things, and buttons to press. Overall, my first year of e-Comm has been very fun, and I am excited for next year.