Interaction Design

I was asked to sketch thumbnails of a wide range of websites, indicating the design and layout elements. I watched for similarities and differences between each.

As I did this exercise it occurred to me how much the target audience does dictate the content and tone of the sites. I couldn’t help being a bit frustrated with large corporate sites where there is a large overlord company that owns a company that owns the website that you are visiting. I found that these large corporate sites had layers and layers of navigation and didn’t do anything to simplify. It was like the third layer of nav bars was the applicable one to that page. Sometimes I really don’t think there is much thought that goes into some of these sites.

While I was unpleasantly distracted with complicated sites, I did find some very pleasing designs that made me smile. One of note is the Anthropologie home page.

Now I am not looking to buy a woman’s frock or home decor anytime soon- but the zen of their homepage did make me think about it.

I really appreciated the simple grid and subtle manipulation of elements like the nav tabs having a torn paper look. I really liked their distilled line of thinking on this landing page. Seriously guys I would recommend it.

Other things that stood out were search bars galore. You would think it would be way easy to install and implement a search bar on a site. I am guessing it is more difficult than a one click install.

I sketched 12 thumbnail representations of website homepages using black ink. I took my visual findings and scanned them into Photoshop. Next I placed them here for the whole world (at least our class) to see.

This project takes the complexities of a web page and helped me break down the grids and lies to find truth and meaning in design and function elements. I will do this again to gain more insights and also recommend that anyone wanting to learn about web design do the same. A strong lesson indeed.

I drew several thumbnails and selected a few that were in the vision i was thinking for this site. I found a simple way to display the information but interesting enough to keep the views attention. It will include several images on each page and the navigation will remain on one side so that the viewer will know where they are.

After gathering the information for my site, I thought of several ideas that would be easily nagagated but interesting visually for the 5th graders.

For the topic of the process of evaporation and condensation it would be nice to see images that were explaining the information and allowing examples to show.

a wire frame of the site was also thought of that allowed me to see the general layout. This included a header and a navigation that would remain on the left side throughtout the site.

Work on the online training and make progress on Assignment No. 02 | Basic Site

Prepare

training | Dreamweaver Essentials
blog | create a blog post for each process step
due | one process post minimum
comments | make at least two comments

Teach one Another

comments | make at least two comments on the process posts from class members. Treat it as a critique pointing out successes and areas that could use improvement. Keep the focus on how the visual and structural design is supporting the objectives.

Ponder and Prove

look for options | keep notes on possibilities for your site as you are going through the training

Sketching always helps me to improve upon my ideas. I usually know what I want but am not exactly sure what it will look like.

I want to keep it clean while still allowing fun elements and interactivity for my client to best learn the needed information. The more I sketch, the better my ideas get. I want to incorporate images but I felt like some websites were too much image based and there wasn’t enough information so I want to have a balance of text and image.

I would like my website to look like an environment; a static image in the background of the splash page anyway. The header and navigation floating about a third-way down the page. I would keep the imagery simple and consistant with the text. I don’t want this to be too much of nothing important.

Broken down based on content, the more informative parts (environment and energy). Further break down to meet the goals for student learning.

Boston Public Schools require students to give examples of how to apply these principles so I am going to have a section giving examples of how all of these principles can be applied so the student can start thinking of applications on their own as well.

Thinking about how this site map got me excited to move forward with the project, I keep getting ahead of myself. Now that I have a site map, it is easier for me to plan it out.

I enjoyed doing my wireframe because it helped me to divide up the space on my main page for my site and better decide where to put the elements on my site. I would like my image to take up most of the background and have the header/navigation floating about a third of the way down the page and have my content just be one column that will take up about a third of the left of the page.

This assignment allowed me to find a way to assess the websites out there which would help me to see which ones could be used to better help a 5th grader adequately understand information. Specifically information about topics in science.

I feel that the client for this project are those parents and teachers that are looking for a simple and easy way to teach their 5th grade children or students the subjects in science. Now, the target audience would be the 5th graders themselves, from the ages of 10 and 11 years old that  allowing them to navigate this site on their own to learn and gain information about this topic. This site will guide them successfully through the site and expect to learn the objectives of the topic that would be taught in class in a California public school science classroom.

OBJECTIVES:
Water on Earth moves between the oceans and land through the processes of evaporation and condensation. As a basis for understanding this concept:

CONCEPTS:

• Students know most of Earth’s water is present as salt water in the oceans, which cover most of Earth’s surface. When liquid water evaporates, it turns into water vapor in the air and can reappear as a liquid when cooled or as a solid if cooled below the freezing point of water.

• Students know water vapor in the air moves from one place to another and can form fog or clouds, which are tiny droplets of water or ice, and can fall to Earth as rain, hail, sleet, or snow.

• Students know that the amount of fresh water located in rivers, lakes, underground sources, and glaciers is limited and that its availability can be extended by recycling and decreasing the use of water in our everyday lives.
• Students know the origin of the water used by their local communities.

I looked through many sites that created some competition for my site, but the topic of the water cycle and the process of evaporation and condensation were set up in a very interactive way and others used several images to helpfully show the cycle.

In conclusion, the objective are simple on this assignment. I must find a way to help the student successfully navigate through this site and allow them to stay interested and active throughout the site.

The goal for this project is to create an informative site that will teach 5th graders one topic from their core science curriculum. I chose to do mine on traits.

Main Objective:
Students will understand that traits are passed from the parent organisms to their offspring, and that sometimes the offspring may possess variations of these traits that may help or hinder survival in a given environment.

Objective 1
Using supporting evidence, show that traits are transferred from a parent organism to its offspring.

1. Make a chart and collect data identifying various traits among a given population.
2. Identify similar physical traits of a parent organism and its offspring.
3. Compare various examples of offspring that do not initially resemble the parent organism but mature to become similar to the parent organism.
4. Contrast inherited traits with traits and behaviors that are not inherited but may be learned or induced by environmental factors.
5. Investigate variations and similarities in plants grown from seeds of a parent plant.

Objective 2
Describe how some characteristics could give a species a survival advantage in a particular environment.

1. Compare the traits of similar species for physical abilities, instinctual behaviors, and specialized body structures that increase the survival of one species in a specific environment over another species.
2. Identify that some environments give one species a survival advantage over another.
3. Describe how a particular physical attribute may provide an advantage for survival in one environment but not in another.
4. Research a specific plant or animal and report how specific physical attributes provide an advantage for survival in a specific environment.

---

Competitive Research:
Doing research on competitive sites was very helpful. Some of the sites I looked at seemed to focus more on the visual elements that would catch a 5th grader’s attention, rather than readability. It doesn’t matter what age you are or how exciting a little cartoon button is, if you can’t read or navigate, then it doesn’t work. This also helped me get some ideas on how to organize links and categories.

When I first got this assignment, I had a hard time seeing the correlation between pygmy goats and interaction design. But then I realized almost immediately how perfect this assignment was in teaching two things:

1. The strong relationship between InDesign paragraph/character styles and CSS Style sheets, and
2. The simple fact that interaction design is all about communication to the viewer.

This assignment cemented in my mind even more the importance of organization, and I don’t mean just of categories of goat articles. Going through each article and identifying h1, h2, h3, p, etc. is one of the most key things I can think of when designing for the web. Even if we as designers are not hand coding it, we need to create a clear hierarchy for each page we design.

Because we were asked to import style sheets into various different articles that had the sames tags (h1, h2…) applied to them, we had to be meticulous in identifying those tags and making sure everything matched up, or else the style sheet wouldn’t work properly. By doing this, we really did create a book that looked as if it was created by on designer. This helped me to understand even more how styling for the web works. I learned that designing for the web isn’t all that different from designing for print, in the fact that there needs to be a clearly defined styles and hierarchy; you can’t just change the size or style of your main headline from page to page.

This assignment also taught me the importance of organization of the information itself. I think that doing the table of contents helped me a lot to realize that a reader needs to be able to look at it and know how to find what they want. It doesn’t matter how pretty it looks if they can’t find what they’re looking for. Knowing this is a web design class, I couldn’t help but thinking about how the main navigation, sub navigation, sub-sub navigation and so on would look. It made it a little easier to organize the information by visualizing myself as the reader, then choosing a random article and then deciding where I would logically go first in order to find that information. I hope that made sense.

Anyway, all in all, I learned a lot from this assignment. I really appreciated your critique in class about how to present to business-minded people. They don’t care what font you used. You need to have a real reason for design choices that corresponds to their objectives. This was a very informative project.

So I was thinking that this was just going to be a small smiple little site that wouldn’t take too long to organize. But once I started doing the site map and all that, I started to have a little more appreciation for even the worst sites I had seen. They may look simple but you really have to put everything together in a way that actually makes sense and that I’m finding out is going to take some time.

They way I thought I would do this was that that I would just seperate all key terms for each little section that I was doing. As you can see it’s not the most complex site map in the world.

After looking at the other websites, I decided that the key for me was to keeep it as simple and as east to navigate as possible. I have been debating whether I would even have them scroll down at all, or should I just make all the info I need just stay at the top and then they just need to keep flipping the page. I think I will rethink my wireframe before I post it.