Interaction Design

Sketching thumbnails for my educational website really helped me think of different ideas and not just go with the first thing that came to me.

These are a few of the sketches I have done. They indicate generally where content, navigation, sub-navigation, and visuals could go on my website.

Sketches for my Genetics site

What I found as I sketched was that hierarchy plays a big role in web design. It was a little bit difficult to visualize what the end product could be with each sketch. But it also helped me to organize my ideas. I was really glad I did the lab 10 before doing this because it helped me, I feel, to put the right amount of detail into my sketches. In the end, I found that I like some parts of a few sketches and I think I can combine them to create the layout I want.

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.

Working on Sketches for Layout of site

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.

The daunting task for my subject matter is to not go the cheesy route. There are plenty of examples below of what not to do. No child left behind? Looks like people creating websites for children aren’t giving the poor kids a fair chance. Hierarchy, clear copywriting, and imagery are all key elements to hold a 10 year old’s attention. My job is to harness A.D.D. in a good way.

The idea is to make a site for a 5th grader to use and learn from; not to make it look like a 5th grader created the website.

-You can quote me on that…

My discovery phase has been eye-opening to say the least. Lets look at what I am competing with:

NASA's basic info site

Can you say web standards?

The best design by far...

Basic text with basic img

This one is all over the place

repeating cloud background- so 1996

Not bad for the plane

How stuff works

Structure

Since my site document will determine my grade. I decided to weed out stuff that was redundant and also items that would be too difficult to represent electronically. I drew a chart so I would get it:

drawing this helps

The digital version of what I drew

My next phase is sketching. I look forward to figuring out what works or not. Goodnight till next time.

Thumbnails of my concept(s)

It took me about 9-10 sketches before they became more meaningful and thought out. Thinking through the eyes of a 5th grader is hard, but helps me get at the root of the problem. Once I understand that problem I know I can solve it with intuitive design. Intuition vs. arbitrary arrangement. Process vs. regurgitated information. I figured out a couple of concepts that will let the student know where they are in relation to the rest of the content. Hopefully the end user won’t be asking themselves when this hell of a web learning experience will end. If I indicate where they are and where they are headed there are no surprises and maybe, just maybe someone will appreciate it.

Here they are please excuse the blurry webcam…

Site concept thumbnails. The better ones are towards the bottom

thumbnail sketches

Here are my initial thumbnail sketches. There are several differnt web layouts that I like. One of my favorite ideas was to have the main navigation from planet to planet to be a magnification rollover. I want it to work something like the dock on mac computers. I think that would be a really cool way to have the students learn planets. I don’t know if that would be too complicated though. The rest of my sketches include just some other ideas and layouts that i think look good. I’m trying really hard to keep it simple and easy to use as well as entertaining. Let me know if anyone has suggestions. As for me, i’m going to bed:)

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.

The thumbnails I have on paper have been racing through my head during the entire research process. The sites are very pictorial based with minimal text.

While sketching I was able to use the wire frame I had already made to easily map out elements on the different types of pages. I was also able to see what information in my content was missing and needed to adjust my wire frame to accommodate. There are many variations based around the same style because of this; I would draw and forget elements needed on that page and needed to figure out how to best incorporate it.

I also drew upon popular websites for ideas on how they put things together.

At the moment I have a lot of ideas going through my head but I really don’t know what all the possibilities are. In my sketches I have some ideas that I think would be really interesting but I have no idea how I would pull it off and make it into an actual site. 

I know that it will be important to have a design that pulls in the 5th graders attention. Bright inviting illustrations, with simple blocks of text will be most important. I will post a image of my thumbnail sketches tomorrow.

Now that all the organization is primarily completed, it is to take the leap of faith into sketching for my first website. I found it to be rather difficult in the beginning, but it got easier and easier with each sketch.

Thumbnails

Even though I have probably seen thousands of websites in my life-time, it was hard to think of a creative design. I just kept on coming up with very similar sketches. However, I was able to build off of each previous sketch and eventually started to branch out.

Right now I am not really sure what my possibilities are, or more specifically, what possibilities are actually going to look good. I also feel rather limited with my current lack of experience, but I am sure that will come. I am very excited to see what the veteran web designers in our class have to offer and hopefully that will give me a better idea.