Interaction Design

Client: Fifth grade students, teachers, and parents

Audience: Fifth grade student in the State of Virginia.

Expectation of Site: Information presented in a simple understandable way, while give the viewer a interesting story line while teaching scientific principles of the site.

Outcomes:

Students will have the ability to comprehend, and retain information on scientific principles.

Site materials (scientific principles):

Oceanography: Continental Shelf/Slope/Rise

Marine environments

Physical properties of the Ocean, in this case, Depth.

In researching this topic not only went to fifth grade sites teaching the subject matter, but also to national sites designed for an older audience. This gave me the depth I needed to understand the subject and how it could be properly presented.  No I have not use all of the research information, but what I have chosen to use is the most pertinent to the subject matter.

My thumbnails sketches for my personal portfolio website.

I took a long time to come up with this first idea, and I think I like it the best right now. It was inspired by the Pandora website.

my favorite idea

The top navigation would get me to the home page, my portfolio, and my contact information/stuff about me. Then the sidebar would navigate my portfolio once you get there. It will have the sub categories of my portfolio (posters, logos, magazine spreads, etc). I want the pictures to be able to slide to the left and right, and have mini pics along the bottom so you can click on one to go straight to that pic instead of using the arrows if you want to. Then along the bottom of the viewing screen is another small navigation bar where you can click to learn more about the artwork (the process, sketches, explanations, etc).

This next idea was just me thinking on paper.

thumbnail sketches group 2

And this was my last idea…

thumbnail sketches group 3

This was a very intimidating step.  Having very little background in HTML, CSS, and Dreamweaver, it was hard for me to leave my Photoshop/Illustrator comfort zone. Once I got some advice and massive help from classmates and tutorial websites I was able to stop hyperventilating and accomplish something. Well, for the most part.

I started this step by working with what I knew. From class I knew how to create the wrapper and sidebar, a navigation bar and links. I figured out how to implement the background image. Because my page layout wasn’t quite the same as the example we did in class some creative solutions were sought. I troubleshooted a lot; I got to understand a lot about divs and working with the files. I had trouble linking my pages in the beginning, but I looked hard at the files and figured out why they weren’t working; ALL ON MY OWN!(!!!!!!!) Now I know how to organize all my files from the beginning so that I wont have that problem ever again.

I obviously couldn’t figure out other things. I tried over and over to figure out how to get the hover over the navigation bar to change the color of the whole box; but it doesn’t. There were other things that don’t work how the mock-ups show they should because of lack of experience. I thought I’d be able to highlight the pictures on the “Observe” page and the corresponding simple machine would also highlight. I think I bit off a little more I could chew with the “extras” of the site.

There are a lot of, “should’ haves” and “wishes” for this step but I believe I did more than my best with my skill set and time. I know that I have a TON to learn, but I think I held my own for being dropped in the deep end.

Research for this started with the basic idea of what a 5th grader would want to see.  It also need to to be balanced with what my skill level would allow. I think looking for information from from college sources to start, and then using those as a basis of understanding for being able to use sites that are targeted toward the 5th grade age group.

I have tried to search for experts in the Oceanography field of study, and other sources that explain the topics.  I do think that more information would be needed at the beginning, but at the time of this post I have all the information I need.

It was more difficult then I thought coming up with typographical solutions for a website.

Designing typography was a new challenge and very daunting. I will keep to sans serif fonts and use veranda as the body copy. I will expand my font by using scala as the header. The typography is still a hard point for me, I can’t seem to make up my mind on anything, no matter how many sketches I make.

My website is still in progress but this is what I have so far.

I spent too much time being overwhelmed by coding. When I dove into it, some things seemed easier than others but it confused me still. I watched the tutorials while doing it and, while they helped, I still struggled. I am able to have what I do for my site so far because of the help I’ve gotten from classmates and my instructor (thank you!). I got a lot of ideas during the class presentation today and am forming plans for better navigation and more pages for less content per page. I would rather not have my audience have to really search for what they are looking for.

The style guide is your best friend.

I guess I didn’t really create a full-fledged style guide, but I did keep to my pre-determined styles:

Fonts: Trebuchet & Gill Sans

Colors: Grey, green, yellow, orange

Spacing between elements: 4 px

Imagery: simple and to the point

heading, subheads, styles, etc: all were consistent on each page

Just keeping to these general guides really helped me pull my site together without having to worry about designing it while I was focusing on coding it. It was a really good experience to learn how to create a style and mockup and stick to it!

Typography on the web is very limited. At least that’s what everyone says.

I really enjoyed the challenge of making the most of the typefaces that are available to me by using hierarchy. I really like how my type turned out, even though there are some obvious kinks to work out. I feel like some of my sizing for my site is a little bit off and may need to be adjusted. I’m also not so sure that all caps was the best choice for some elements of my site.

Overall, I learned a lot about how to use what you have available to you. It’s also nice to be a little limited because it really challenges your design sense, rather than trying to fix everything by hiding it behind a great font. Does that make sense? Hmm.

Here is the link for my erosion web site:

http://www.bryantjensen.com/

So after going through this assignemt, I have have a new found respect for even the crapiest of web sites. I have learned that there is alot more information and orginization than I thought there would be. Even though I have never built any web site, ever, I feel good with how the little thing turned out. I know this was a first step and I feel I can only get better.

One of the things I would like to address about this assignement is the coding. I’m  sorry it is one thing to watch a bunch of little videos and think you get what’s going on, but it’s another beast when it comes to actually doing it yourself. It seems to me that when it comes html and all that stuff, you either have to know it or you don’t. I have never felt so clueless doing anything. I will say that once I actually put some code down and the connections in my brain started hooking up, it seemed to make more sense.

I know that we were told to just design and don’t worry about whether it would work or not, but I found it really hard to design knowing that it was ME that was going to put in the code and make it all work. It’s one thing to design, but it’s another when you have to gather the content, make your own images, and do coding. In the end, I was able to get alot of what I originally wanted up on to the live site, though not as polished as I would have liked.