Interaction Design

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.

I redesigned my mock-up to look a little more kid friendly.

It’s got a pattern for the background (or wrap around), and a happy, smiling raindrop. I also implemented some waves to emphasize the fact that this is a website about water. I made everything different shades of blue. Please let me know if you guys think that’s too much and I should try a different color, or if it works nicely.

I think I like the brighter blue better for the subhead…

This is my first shot at a mock-up.

Still have plenty of work to do…

Making a gray box is useful to the overall design. It solves problems before you get to the details of designing.

After I had the basic structure I wanted, I started putting more detail into it, and changing it around until I got my “gray box”. Even though it still doesn’t have many details, like the pictures I want to use, the typography isn’t exactly what I want to use, and there aren’t any colors, it gives me a much better idea of how to design my site. It shows me what’s working and what’s not, and helps me put more things into place, like the tabs and links i want to try to use.

Designing a gray box first I think will help me with the overall design, because it’s already mostly laid out. I’ve already worked out the kinks, so even though there’s still lots of work to do, this will be nice to look at to help me make my design choices.

Creating structure by using wire frames…

From the sketches I made earlier, I used those to create a wire frame that I can use later on as a basis for my design. By looking at how I want the basic structure to be, I can go on to make a gray box and so on.

I will probably continue to work on more wire frame ideas, but so far this one is the one I like the best out of all of them. I think having a wire frame is a good idea, because it helps to know what the layout should be, and can be used as a sort of map while designing later on.

Sketching with structure, accessibility, and design in mind.

My sketches started off pretty rough, because like I said before – I didn’t know anything about how I wanted the site to be organized. I knew nothing of the structure, I was just placing things where I thought maybe they should go. But after I had the basic structure in place, sketching out thumbnails for the Water Cycle site became much easier.

Now that I had my structure figured out, it was easier to decide how to design the site. I had a much better idea of how to organize the information, and therefore could make better decisions on how to make creative design decisions. My next thumbnails not only went faster, but I think they make a lot more sense, are more orderly, and make more sense to the viewer.

I learned that sketching out several ideas, creating thumbnails, is a good way to experiment with placement and organization of the structure. It lets you see what works and doesn’t work right away, without spending a whole lot of time figuring it out.

Keeping it simple, organized, and relevant to the material that will be presented within the structure.

I started by sketching out a few ideas of how I wanted to present the material, then went with what I thought looked would be the best for the site I’m designing. The sketch on top of the picture seen below is the several different categories possible for my site on the Water Cycle. Underneath it I condensed those categories into five smaller categories and sub categories.

This is what I designed in InDesign, to better illustrate my idea for the structure in nice clean lines.

I learned that I need to have this structure in place before I start sketching, so I know what needs to go where. It’s also helpful to know how many categories there will be, and how to set up the way to get to there. I tried a few sketches before setting up the structure, but it proved useless. I needed the structure set up first.

Organization for this project is key. I found a lot of information, so it’s important to keep it all organized so it will make sense later.

I did two kinds of research. The first was to find out what I wanted to do for the site. I needed to find fifth grade science requirements, figure out what the objectives were, and decide if it had enough or too much information for me to work with. Then other kind of research was to study up on that objective. I chose the water cycle. I not only researched what the fifth graders are learning about it, but what I should know about it as well. By better understanding it myself, I think will help in the long run.

Through my research I discovered that some of the web sites I visited for fifth grade science had a lot of charts and illustrations. Something else they did to help the kids learn about the water cycle, was a quiz. They asked simple questions, just to verify that the child is learning the things they need to know. I thought this was a smart idea, and if I can I’d like to incorporate a quiz or two into my design.

To make my site more interactive I was thinking about making the chart the directional map as well. An illustration of a cloud could have the word “condensation” underneath it. You could click on it, and it leads you to an explanation of how clouds are formed, and the process that takes place.

After sketching out some thumbnails though, I’m not sure I like that idea as much anymore. It seems like it would be far too busy and confusing. Especially to a fifth grader. So I think I might keep it a lot more simple.

I learned the importance of organization, team work, and hierarchy of typography.

We had so much information, all about the most random of subjects – pygmy goats. As a group we needed to sort through each of the articles and find a way to categorize them into five sensible topics. The best way we found to do that, was to take the articles and find the key things they mentioned, and give it a category first. We found things like health, biology, care, goats as pets, goat milk, as well as other random bits of information and interesting stories about pygmy goats. After that we narrowed them down to fit into the five categories that we felt were the most relevant. By sorting out all that information, I learned the importance of organizing before designing. You need your design to make sense, and the best way to do that is to organize first.

Group projects can be very stressful sometimes, but this project didn’t seem to be all that bad. I think it was because we spent so much time organizing our information first, that it made it easier to work as a group. We were better able to distribute the work load, and communicate our ideas, which made it fun to work together as a team. Even though it came down to one person being able to load all the articles together into one book, we managed to find something for everyone to do.

The hierarchy of the typography used was very important. We made every effort to make sure that what we wanted to be read first, second, and third was read first, second, and third. Although our choices were not always a conscious decision, it was definitely a factor that we kept in mind the whole time we were designing our pages. Not only did the hierarchy need to make sense, but it also needed to flow, have balance and rhythm.