Interaction Design

When asked what classes I’m in and I explain a beginning web design class, the common response, “Cool, so you are going to learn how to do flash and stuff?” My response, a quick “no”, usually results in a sudden loss of interest.

The purpose of graphic design is to solve problems, get the point across and communicate in the simplest visual form, not just to look pretty or “cool”. When applied to the web, design should improve functionality, gain site credibility and trustworthiness through an aesthetic approach.

The web, originally created as a form of communication, continues to explore different communicating methods. In theory, web design has existed as long as the internet itself (early 90′s) even if it was just created straight through a developer. The first considered web designer was Tim Berners-Lee who developed the first website in 1991 with hyperlinks, allowing easy navigation (Web Design). Even though just a simple site with header, footers and navigation, websites greatly improved communication. Basic HTML markup was used at first then, when cascading style sheets (CSS) began to be applied to websites, it allowed greater flexibility for web design, allowing images, graphs and charts. Designing for the web really didn’t take off until then.

Since the internet has continued to grow in popularity, web design has become more and more competitive. In order to stand out and be recognized, most people instantly think big, loud, flashy. However, eye tracking studies conclude that large graphic elements attract few “gaze fixations” (Visual Decision Making). Most important in good design, whether it be web, print, motion, etc. is functionality. How do you navigate through the site? Tim Berners-Lee, allowing web navigation through hyperlinks, even though just through basic HTML, greatly improved the functionality of the internet itself. It became interactive, it became an interactive aesthetic experience.

“There have always been designers who have not mainly been interested in making beautiful images, but solving problems following a more analytical approach. Often, however, the analytically derived solutions have lacked in finesse — they simply weren’t attractive. This schism still exists when it comes to web design: business consultants may define the problem well, but don’t care what the visual solution looks like. Engineers as well as programmers tend to use the constraints of the backend implementation to deny designers the freedom to explore more exciting graphics, interesting interfaces or surprising visuals. Who, then, is equipped to formulate good information design for the web?”

Designers and developers need to work hand in hand to create an optimal website. Developers tend to think more logistically and designers more creatively. The marrying of these two disciplines is optimal in the birth of a website. It is important for non designers to understand that design (web or other) is necessary. It isn’t just fluff, a good designer will undoubtedly create a credibility and trustworthiness.

WORKS CITED

http://en.wikipedia.org/wiki/Web_design#Historyhttp://www.innervisions.com.au/webhistory/first.html

http://www.library.cornell.edu/olinuris/ref/research/webeval.htmlhttp://www.aiga.org
/content.cfm/information-design-on-the-web?searchtext=web%20design

http://www.innervisions.com.au/webhistory/first.html

http://www.library.cornell.edu/olinuris/ref/research/webeval.html

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.

Here is a link to my live site.

Evaporation and Condensation

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!

Imagery was/is going to be really fun to make! I think.

I was really excited about my imagery for this site. I wanted it to be really simply, but clearly illustrate the information. I sort of ran into a problem that I am going to fix soon. Meaning, I just didn’t get it all done. I really want to go in and fix my images so they are more simple lines and shapes.

Making images for my site was eye-opening: even simple images need adequate time to think about and prepare. For me, simplicity was key for fast communication of the image and its message. It was kind of hard to not try and illustrate every little thing, but instead to focus on the main idea.

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.