Interaction Design

A bit of catch up on my 5th grade site. That was a disaster/nightmare but for what it is worth I did spend a lot of time coming up with some of the graphics.

Here are a few pieces of work.

[caption id="attachment_4455" align="aligncenter" width="300" caption="How jet propulsion works"][/caption]
[caption id="attachment_4452" align="aligncenter" width="220" caption="site ID"][/caption]

I hope that settles it.

This is one of thise things that I have changed over and over and over again.

 

I found that doing the standard chart graphic on the homepage just was not working out and did not work all that well. So I changed the theme and this the graphics completely.  I decided to go with submarines. I know that sounds odd, but I like it. The imagery will hopefully give the feel of being a member of a sub crew and that will carry through as the theme.  I kind of did this backwards in the sense that I set up the photoshop comp before I finished collecting my images.

When doing images for my web site, I had to think about what I was trying to accomplish. I mean you have a site about science, so you want your images to be accurate and to be able to explain the information that you have, but you dont want it to be flat and boring, remember your audience is a bunch of 5th graders and you don’t want to turn them away.

So for images, I did them in Illustrator and then I would paint them in Photoshop. The images were simple, so I tried to give them a little personalty by making them look hand-drawn and almost something that a 5th grader themselves would actually draw.

I know that I get shut down when I’m learning something and they give me a chart that’s supposed to help me, but them I can’t get over the fact that it’s complicated and ugly to look at. So not only did I want kids to look at my images, but I wanted them to get the point of what they are learning. I mean erosion is kind of hard to show because it doesn’t happen over night, but I think that anyone looking at the images would be able to see what’s going on without having to have every part of it explained to them.

Imagery for Assignment 2.

For the website that I designed, I choose to go with images from Nasa’s website and also wikipedia’s website. I like the consistency of the photographs and also the detail in the planets.

To make the images for my website, I used Illustrator to make vector images. I mainly used the same colors to keep the site unified in a theme. I also tried to keep the images simple and clean looking. I also used photoshop to create the backgrounds and drop shadows in the website.

As I was working on my images for this assignment, the main goal was to make them simple to analyze by a 5th grader. I created my own images through the process of illustrator and Photoshop displaying each of the topics regarding the water cycle, including condensation and evaporation.

Thinking of images for this site took be back to when I was in elementary school learning about the same topic. I tried to focus on those things that every kid would know about including rain, snow, fog and so forth. I think these images work well for my structure of my site.

I tried to keep my imagery blue and “water-like”.

I started with a background, and found an interesting pattern in photoshop that I thought would work well for my design.

Then I wanted something more to say “this is a website about water.” So I made a wave to put up by the header.

Next, I wanted something that was kid friendly and made the site look like it would be fun. So I made a rain drop character as a sort of logo.

The last piece of imagery I used, and would like to use for each page is a photo of water, or the subject talked about.

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 imagery consistent with the feel of the website I wanted proved harder than I expected.

I really love old illustrious logos and type, and since this website is about the creation of a constitution I thought the imagery should reflect the time period of our country. A little dated and ornamented, but also a touch of today with the type. This logo didn’t go through the typical brainstorm, sketch, refine process. I took the first Idea I had and so it’s looking pretty amateurish at the moment and unrefined, so it’s something I’ll have to revisit when the assignment is over.

To try to spice up the page, and give it a little more playful feel I thought I could balance out the info heavy left with an illustration. There aren’t many meaningful pictures I was planning on using for the site so it all came down to something that could help communicate. As you go through the process of choosing how strict or liberal your constitution would be the header up top will go through the different images of Uncle Sam writing your constitution. On the last page the background will change to an illustration of the world your constitution would have created (oppressive, anarchistic, happy medium) and comparable countries. Hopefully it illustrates the weight of the decisions that were made when making our country’s constitution. I haven’t made the outcomes yet, so we’ll see how that turns out.

I used Uncle Sam because he is a familiar and already a powerful symbol for what the country stands for. The idea is to impress to the audience that everything our country stands for is contained in the constitution, again showing the weight of their decisions as they go through the website & respect for the decisions made when our country was founded.