Interaction Design

So for my typography, I wanted to keep my font choices to about a few so I could tie everything in even if there was no images to be seen.

For my headings and sub-heading I went for a san-sarif font, so that it would be easy to read and see. I used Futura, because it is a bold type and I think draws attention fairly quickly. I also used a san-sarif for my side bar navigation, I pick Myriad because I wanted the same feel as Futura but without it being the same.

For my body copy, I wanted to use a sarif fonts because it flows better and is much easier to read. I picked Baskerville because I thought it was a classy type that made you feel like you were reading off paper instead of a screen. I think when it comes to kids, you think they need some “fun” font with all sorts of different colors. I don’t think you have to dumb down type for them, I think they are smarter than we think and that they know what looks good.

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.

I wanted the first image they see to be iniviting and playful.

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.

I wanted them simple, but also to tell you what's going on.

I tried to use vibrant color to make it more interesting.

Some navigation buttons.

Main Page

So for my web site, I wanted to have all the information all right there in the same window without having to scroll through a bunch of pages. I want to be treated like any other lesson that you would get out of a textbook, even though it’s a website, I want to treat it like book almost.

I went very simple when it when it comes to the sidebar and header. After looking at all of those bad sites, I noticed that they were very crowded and the colors and fonts they used were really distracting and obnoxious. So I wanted kids to go to a place that was calming and not too crazy, so they’ll actually want to look through the information.

I wanted my site to be very simple so that it didn’t take away from the stuff that the kids needed to learn. I have found it very helpful that I can design my pages all in one file. I’ve really liked how you’re able turn off different layers for different pages. I’ve spent a lot of time on these and I hope that I will be able to put it all online.

Lesson Page

Key Term Section

A grey box is an important first step when it come to building your web site. You want to have some general idea where everything goes regardless of how much it changes in the end.

I’m still not sure how I’m going to organize all the navigation tabs and what all the images and stuff are going to be, but I feel this is pretty close to how I want want everything placed. I’m really glad we started doing all of the sketches of other sites, because it really made doing this part of the assignment  a lot easier. I was able to get some general ideas about how a good site should look, and it has really helped with the layout of my own

I know this wont be the final product, but I feel it's a solid base to start

After reading the article and actually build the grey box version of my site, I feel like it’s getting closer to the end result. Even though it’s very simple, I feel like I have something to finally something to build off of.

I thought this assignment was very helpful with the construction of a site. I never really thought about the different parts of a web site until I started doing this assignment. I noticed that the well designed sites all had their parts clearly identifiable and easy to locate. I was also able to find a lot of bad sites, which to no surprise, didn’t seem to follow even the most basic layout, they were very random and that made it hard to look at.

Sites I thought had good layouts.

As I went through the different sites I began notice a pattern in the websites. Sites that had a lot of information, showed it. They had every possible link you could think of, and even though it seems kind of cluttered, you could still find your way around. The other pattern I saw were these bare bone sites that maybe had a few links and a search bar. These site were all above the fold and were a little more plaesing to the eye.

So I ended up with two very important conclusions when I had finished this lab. I noticed that the simpler more visually appearing sites made it hard for people new to the site or those that weren’t sure what they were looking for. These sites are clearly more geared to regulars and know what they are doing. On the other hand, the busier sites that were at times cluttered and visually uninteresting, were for people that just wanted to browse and were looking at random bits they wanted. So for my site I hope to fnd some sort of middle ground, make it quick and to the point for people who have been there, but to have enough information for those that are still learning their way around.

After looking at the other sites, I decided that a very simple clean look was the direction that I needed to go for this.

This is a basic idea of how I want my site to look.

I decided that I wanted everything above the fold, because I feel like when you are just constantly scrolling, you feel like you’re really not accomplishing too much. so I put everything you need to see in few, and buttons at the bottom of your information so you can go back and forth between pages of information.

From the look of the site map you would think that everything would have it’s own page, but it wont. I will the information going along the left side and you will see graphics or pictures in the right half. Now each key term will be high-lighted and when you put your cursor over it, it will change all the information on both sides based on the hight-lighted word. It’s still early but my goal is to be able to easily go through all the information without being overwhelmed.

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.

Sitemap

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.

So before I can do a web site to help kids learn about erosion, I first had to look around and see what a 5th grader would find if they searched for this topic. I couldn’t help but notice that the sites very cluttered and lacked what I thought were some essential steps missing that would hinder a child’s ability to comprehend.

So being from Utah, I thought I would take a look at what I would be learning if I were in 5th grade right now. I was shocked, but not really, on how poorly made this site was. It had this clip-artish looking stock background on each page that I thought was very distracting. The photos, while were somewhat relevent to the topic, seemed liked they were dropped just where ever and they didn’t seem to have any captions or anything to really tie it all together. It would also have interesting names for each section, but unless you had gone through it, you wouldn’t know what any of them were talking about. I’ll admit the information was fairly decent and It had atleast made an a attempt at easy navigation. But in the end, there was just too much wrong with this site.

I decided look at other sites that weren’t affiliated with any school and see how they would stack up. Turns out they weren’t completely awful. They had some good information and pictures, but they lacked easy navigation that is essential to a good site. Another I noticed was that they were good at showing the after effects of erosion, but there was nothing that really showed the actual process. I think that if you are going to be teaching this you should show it, not just some pictures that dont really show anything.

Geography4kids.com

The first thing I’ve noticed about this assignment and about this class, is that it’s not just about how “pretty” something looks. You can have the best looking site in the world, but if the information is all over the place and doesn’t make any sense, then it’s a failure. I learned that organization and hierarchy are important keys to design.

The impression I got from the start of this assignment was we just organize a bunch information and make it look good, but as the assignment went on I found there was much more to it. Not only did we need to organize information, we also had to work with the fact that we were working with a bunch of people with different levels of experience and that each had their own vision of how the information should put together. We even had differences on how things should be categorized, such simple things like whether H1 is supposed to be h1. It’s just so easy look past the organizational part and go right for the coding and design parrts.

At the start of this assignment all I saw was a bunch of random information on an obscure topic such as pygmy goats. But by the end, I saw this book of easy to read information that looked good, and that I would actually want to pick up and read if had no idea about pygmy goats. It showed that no matter how good your designs look, people won’t want to look at it if it’s all just a random pile of information. I also found out that that it’s one thing to have a group project, but it’s quite another when you have a short amount of time, everyone is basically working on their own, and that you need to make the end result look like it was done by only one person. I thought this was a real world situation that we will all be in one day, and I’m glad that I will be somewhat prepared for it.