Interaction Design

Here are my charts ::

Here is my imagery for my pages. I wanted to keep it simple yet catchy to a young mind. When I first started with my imagery, I was trying to fit to much into one space. I had a challenge with the type and being legible on the web. When saving for the web, it would pixilate my type and make it hard to read. I had to make sure I made it large enough to read. What is legible in print is not always legible on screen.

Here is a revision of my photoshop comps. Any help or advise is GREATLY appreciated!!

Here is my vision of my site. Hopefully I can pull it off with the coding!

While designing, I found myself holding back because of my lack of knowledge about coding a website. That was a big struggle for me when it came to designing. I just had to forget the coding and design what I wanted it to look like.

Are you smarter that a 5th grader? Who knows…my website might show if I really am or not.

When it come to the 5th grade mind, I can’t help but think simplicity. The last thing they want to do is more school. Oh the joys of being young. On my website, I do not want to over crowd it with text. I want it to have correct and accurate information but concise and to the point. With typography, I can arrange information on my page to make it look like not a lot of text. This can be achieved with correct font choice, leading, letter spacing and so forth. It is amazing what can be done with a lot of text to make it look pleasing to the reader.

In class it was said that a designer does not like to read. I can agree with that. I never have liked to read. Basically, if I want to read my site, so will a 5th grader.

This lab was very helpful. It helped me see the way others go about setting up their sites.

While sketching existing sites, I realized the little things that others do as far as spacing, navigation, images and much more. Some are filled with information that must be organized for the viewer, while others are very simple with not much content. I noticed a lot of separations of “states” and “counties” to to organize the information. Also putting extra padding between the “states and counties” also helped the viewer navigate to information they need.

I found it very interesting what sites put above and below the fold. We were to sketch above the fold, but I liked to scroll down and see what the information was that didn’t make the cut to be put above the fold. A lot of what was above the fold was dependent on the the audience.

12 Site Sketches

Call me crazy, but I like this way better than a wireframe. Just adding shades of gray really helps you block it out and start to see the site!

The grey box method really helped me in figuring out what and where I was going to put my content. I had ideas where I wanted it, but this nailed it down all in one visual. I referred to my sketches and site map a lot in this step. One step closer to the finished product!

In my grey box, I incorporated the North, East, South, West idea. In the Southeast/East side, I will have an diagram of the Rock Cycle. From the diagram, there will be links from the different types of rocks that will open in the informational txt window. This will help move the eyes in a circular motion so that they see the entire site and all the helpful information that is available to them.

Grey Box

Sketching is not one of my favorite things to do. However, sketching is a way to clear your brain of all the idea floating around in there. Often times, a sketch of one idea leads to a completely different idea.

While sketching out basic ideas of this site, I found it helpful to keep in mind the audience, 5th graders. The easier it is to understand and navigate, the more helpful it will be to them.

In my sketches, I took into account what we learned in class about the research Google did of where the eye looks first on a page. Most often the eye will look in the North, Northwest, and West side of the page. In contrast, very little activity is found on the East and South side of the page, especially the Southeast. I kept this idea in mind while sketching but tried to include big pictures on East and Southeast to draw the eye to everywhere on the page.

Site Sketches

In this step of the process, I really learned the importance of knowing your material. Not only do you need to know your material, you need to organize it in a presenting manner.

In the state of Idaho, the standards are: how sedimentary, igneous, and metamorphic rocks form AND explain the rock cylce and idnetify the three classifications of rocks.

In my site, I plan to have the formation of the rocks on the home page in an interactive rock cycle diagram. On the home page there will be links to the different formations that give characteristics and properties of the rocks fro classification. From the classification and properties page, there will be pictures of specific rocks to help them with identification.

This is the plan for now! Who knows if things will change…

Site Map

Wire Frame

In my research, I have noticed many important things that can help in making a successful website. I have chosen to do my website on the Rock Cycle.

First I noticed many diagrams and charts. Diagrams and charts are very helpful but can be overbearing. The target audience is 5th graders. I see it, the simpler the better.

Site 1

Site 2

Site 3

The client would be parents and teachers. They will be the ones that primarily do the searching for the website. The site needs to appeal to parents and teachers but the primary user will be the 5th grade students. Within the website, the students will expect to see the entire rock cycle and also a break down characteristics of Igneous, Metamorphic, and Sedimentary.

Idaho’s State Objectives:

• Explain the rock cycle and identify the three classifications of rocks
• How sedimentary, igneous, and metamorphic rocks are formed

Site’s Objectives:

• Show an interesting and simple Rock Cycle diagram
• Break down the rock cycle into three parts: sedimentary, igneous, and metamorphic
• Explain how each rock type is formed
• Show picture and example of each type of rock for future identification

When designing a website, organization is key. The web is a very informative tool that many use. If the information is not organized properly, then one may not know where to find your information.

In this assignment, I learn the importance being organized when organizing. If you are not an organized person yourself, it becomes very hard to have an organized design. Once a designer is organized, they can then produce organized work.

When organizing the pigmy goat articles, there was a lot of information that we needed to consolidate into 5 categories. Because there was such a range in topics of articles, we had to find general categories that the articles could relate to. Having a general topic with more detailed subheads was very helpful. The design of hierarchy in type was very helpful in distinguishing between all the articles and their categories. I also learned how important it was to keep everything assigned to a paragraph style. Keeping the information in certain paragraph styles helps with the organization and flow. There are certain things that can only be a heading; therefore assign it <h>.  There are only certain things that can be a subhead; so assign the correct paragraph style for subheads. Paragraph styles not only style the type but also helps you as a designer stay organized and produce and organized design.

In conclusion, a designer not only organizes the given information but also must stay organized in their design throughout the entire process. Being organized really helps a team when it comes time to combine documents. The final piece not only reflects the organized information, but the organization of the designer.