Interaction Design

Here is a link to my live site.

Evaporation and Condensation

It was more difficult then I thought coming up with typographical solutions for a website.

Designing typography was a new challenge and very daunting. I will keep to sans serif fonts and use veranda as the body copy. I will expand my font by using scala as the header. The typography is still a hard point for me, I can’t seem to make up my mind on anything, no matter how many sketches I make.

Not being an illustrator at all made designing images a challenge.

My illustrations will keep to simple shapes such as circles, squares etc. I am not the best illustrator in the least but I can make shapes in illustrator, which was the main reason I wanted to keep a simplistic design with the images. The second reason was because I did not want anything too flashy to distract anyone from the information being taught. A 5th graders attention span is very limited and can be distracted very easily so I tried to create images that were just interesting enough to attract their attention, but not so much that they only pay attention to the images.

Creating a design helped me visualize my website.

Well creating the grey box for my website I could really visualize how the text blocks would effect the titles. With just the wire frame I never noticed how important it was to make sure the heading and content flowed together. Designing on the web is almost nothing like designing for print. Because of the limitations of the web it can make it very difficult to make all the spaces flow seamlessly. I learned that without text and hierarchy, your wire frame will not always make sense, and you may need to rethink your wire frame in the end.

Creating a photoshop comp of my website design, proved to be more difficult that I initially thought.

While making the Photoshop comp I realized just how much more work I will need to put into this site. Though frustrating at times in the end I had a good example of what my website would look like and made me see flaws in my design I could not see before. If I had just went straight to the web with this design I never would have caught these small mistakes and challenges before I put a lot of time into this site. It helped me solve color issues now and I am very grateful for this step.

Photoshop Comp For Home Page

Photoshop Comp Of Secondary Page

Sketching thumbnails based on the wire frame I previously designed

Thumbnails

While sketching it helped me improve upon the wire frame I had already designed. While I liked what I had already made, the process of sketching almost always seems to prove that your first idea is not always your best. As I kept sketching I saw my design improving. Most of my sketches are heavily picture based with a small amount of text.

I will upload the thumbnail images in the morning.

Laying out the structure of the web by diving up information into categories used to easily find and navigate the site. And giving a rough idea of the layout of the website.

Site Map

While deciding the categories I was reminded of our previous project on pygmy goats. Divining up the content seemed easily the second time around and I am very appreciative of the previous experience sorting content.

I divided up the content into 5 pages. I will try to limit the amount of body copy so I don’t scare away the kids with too much text, so I kept that minimal. Designing the basic wire frame really helped me visualize the website in a way I had not before. Rather then dicing head first into the webpage the simplest version of the website lets me see some of the problems before I get to far into the website.

This was a very crucial part of preparing to make a website, the information I complied really helped me understand and comprehend just what needed to go into the website, and helped to begin the next planning stage confidently.

Competition 1

Competition 2

Competition 3

Though at first this may have seemed like a pointless step it is very important and cannot be skipped. With filling out this small list you can understand the basics of your site and try to avoid mis-communication later on. I decided that 5th grade science teachers and Elementary schools are my clients and my target audience is 10-11 year olds.

In the competitors websites I found they either were too busy or did not have enough information, the navigation was hard to understand, and the information seemed very unorganized.I am focusing on California’s 5th grade standard and focusing on the water cycle and how water moves between the land and clouds.

At the beginning of this project, I did not understand how organizing information had much to do with web design. However, by the end of the assignment the realization that organization and emphasis dictates how one reads an article became very clear.

At first, I was intimidated about trying to organize such a vast amount of information. We were given a stack of information we most likely knew nothing about and were asked to organize it into categories and sub-categories. As we kept working, it was getting easier and easier to find similarities in the articles. Working in a group can sometimes be difficult and it was fairly challenging to take five different designs and make one understandable, cohesive design. It was very helpful to do this assignment in a group; all the information seemed a lot less daunting and more manageable then if I were to work alone.

Even though this was not the first time I had used character and paragraph styles, I learned a lot more about organization this time around. How important it was for accessibility to keep everything you write organized just incase your styles disappear, or if your information changes. When you keep everything organized it is so much easier to merge or change files. I don’t know how I ever did anything without them.