Interaction Design

Oops, I forgot to post this. For this lab I created a horizontal, tabbed navigation and a vertical navigation with customized bullets.

The objectives for these labs were to learn how to use simple CSS and HTML to create beautiful navigation.

View my navigation here.

This isn't an icon. Hmmm.

I learned a little bit from this lab. It really helped refresh my memory. I had to go back and look at an old site I had made to remember how I did the bullets. I used a background image instead of a custom bullet. I tried doing list-style-image: but I’m not sure how it is supposed to work, but using a:hover {background-image:} worked just fine. So that’s what I learned.

My tabbed navigation live on my site in FIrefox

I was asked to create a simple horizontal tabbed navigation with link, visited, active, and hover states. This navigation is supposed to be created from an unordered list. The challenge was to get this working and to post it live on my site.

visit my live site | here

The most difficult part was getting the different states to behave correctly. I had a hard time indicating the current page until I went back and watched that section on Lynda.com. It took a multiple class selector and a new class applied to each “a” link element. I wanted to see it in action so I actually made a page for each hypothetical tab to make it real.

By sticking with it, and actually wanting to know how to make it work, I think I learned the steps much better than I would otherwise.

The practical application of this exercise has allowed me to be one step closer to where I need to be for my site in 10 days. The pressure starts to seem less when I have more knowledge to back up my ideas. By creating a navigation with a list and messing with the settings in CSS and then previewing in Firefox, I was able to accomplish the goal of having a usable designed navigation bar.

Locating well designed websites was a good practice.

I looked for sites with clear communication, different navigation styles, and that were purposefully designed.

Something I found that they all had in common was branding in the top left corner. They executed their sidebars differently, and some had more than one sidebar. The imagery was purposeful and in most instances there was not a lot of reading on the first page. The home page was utilized as a decision location or a menu if you will for what can be found at that site.

The goal here is to observe good design on the web, and develop the ability to capture their essence in a quick sketch.

12 good sites

I really appreciate the many well designed web sites I came across. Sketching them also brings aspects of the design to my attention that I may have overlooked if not attempting to put them on paper.

It’s challenging to detail what a page looks like…having it actually look like the site! Images with reverse type were hard to convey. Also, depicting general value of a page is difficult. It seems like shading a background, etc., makes the rest of the sketch hard to read. Sketching appropriate proportions and straight lines is tricky for me.

There are similarities among pages I am attracted to.

Lots of clear space as margins of each page element made a site a lot more comprehensible, because the elements were cleanly compartmentalized and simplified into a few, easily distinguished categories.

I like the idea of displaying a large image area to set the theme of the page and introduce you to what it’s all about, in conjunction with a few blocked columns just below or near that image space.
For example: gugafit.com, secondandpark.com, and gositewave.com.

I found too many columns in a page make it cluttered and confusing. Particularly if there is not some horizontally aligning element. I also found that there are a lot of good and pleasant solutions to web design, because even though there were many similarities in these sites, there were also a lot of sites with unique layouts I did not observe in other sites I came across.
For example: bubblessoc.net.

I sketched twelve sites I like, though there are so many more! Here are links I found VERY useful in seeing all the many options of good design out there.

Resources

• www.souldeepdesigns.com
• www.thebestdesigns.com
• www.smashingapps.com/2008/10/20/27-best-places-you-should-visit-to-get-incredible-web-design-inspiration.html
• www.webdesignerwall.com/trends/best-of-css-design-2007/
• www.cssbased.com

For this lab I looked through various websites and sketched ones I thought were well designed.

To do this I looked at websites I use, or visit regularly . I would choose the website and start sketching. I come from a drawing background, and while sketching was concerned that the inaccurate proportions would allude to a badly designed webpage. Departing from the sketches and coming back to them, I believe they portray the layout of each page accurately. They could, however, have been drawn larger and incorporated more detail.

The use of value is something that I believe help websites. Even clean white pages like ooyala.com uses faint value changes to help the user navigate the site.

I am personally more attracted to sites that do not overload their sidebars and even backgrounds with Ads. I believe that ReadyMade.com had a good balance of ads and information for their site. Even though there was a banner ad at the top, it was easily skipped, and my eyes went strait to the title and content.

When I went to saddle-creek.com, a record company’s website, I noticed that the type was very small, but still very affective. There is a lot of room to play in designing websites, but all decisions must pertain to the intended audience. I can’t imagine a site with extremely small type working for a site about Medicare.

I looked at a couple of sites that had video on the main page or banners made of flash. Some of them worked, and I sketched them, and others didn’t. I decided that the reason some worked was because they were incorporated into the whole design, not a distraction from it. For example, the design firm, Sandstrom’s site www.sandstrompartners.com; is really creative and pertains to its intended audience, but it is still hard to navigate. The design is based on the user’s use of the back button. Invisableman.com, a blog for artists to collaborate, has a flash banner at the top, and while it makes the site interesting, it does not interfere with the user’s experience.

A well designed website is not achieved with flash or interactive gimmicks, but with the use of traditional design elements, always keeping in mind the audience.

Finding a to see websites in a new light by seeking out those sites which are well designed and allow the visitor to easily understand how the site works. In order to truly learn how to do this I went out to search for those websites I thought would easily portray the direction of the site and draw them in thumbnail form. This helped me to see how the construction a several sites work, and find some ideas that will help me to organize information into different quadrants.

My favorite sites and their construction sketches

There were several things I learned as I sketched different sites. It took me several hours to even find sites that I felt were even worth sketching their construction for. Such things as quadrants in which the site separated information was shown in several different ways, but in many cases I felt that they basically said the same thing.

Some sites were very busy, but they had a simple structure will I don’t think i would have seen if i didn’t do this assignment. I feel that the assignments objectives gave me enough information to accomplish the task at hand. I found that there were many site that were very similar and a pattern started to develop.

In conclusion, I feel that there is an eye in every step of this assignment. Looking for well designed websites can be very difficult when so many people can just get a simple template and not put any thought on the direction in which the want their visitors to go. Some sites gave me a headache because of its lack of design. Drawing the thumbnails helped me to truly gain a better understand of the simple structure of the site and not all the colors and business.

The objective of this lab was to sketch thumbnails of well-designed websites in order to gain a better understanding of website layout and design.

The goal was to look to other sites as a way to learn and also make decisions about what kind of layout I like the most and what I think is the most functional. I admit, I kind of forgot that these were to be really well-designed sites. Some of the ones I sketched out aren’t the best – but I feel that I learned a lot from sketching them because they were so difficult to sketch compared to the others.

12 Website Thumbnails

I learned a lot from this exercise. One, is how to really sketch for my own website. Seeing the example we were given, and then applying that to these thumbnails, really helped me get a feel for the right amount of information and detail to show an idea for a site. I also learned, from looking at websites and focusing on their design and layout rather than just content, what types of layout I like and felt were easy to use and navigate.

I really feel like I can create sketches that aren’t too basic and don’t really tell me enough, but sketches that are visually telling me where different elements go. I also gained a better idea of what kind of designs work, and what kind don’t.

I actually found this assignment to be very helpful, in fact, I wish that I could have done this before I started sketching thumbnails for my website. I will probably even redo my thumbnails now that I have a greater knowledge of what goes into a website.

I tried to sketch a variety of websites. From google, which has maybe a few links and a single search bar, to websites with about 30 or more links to other pages just on the homepage. Of course my website will be more in the middle, it was nice to see a variety. It was also helpful to see how navigation was different from website to website and to see what information was included and how it was presented.

Thumbnails

I found that every website was different, yet the same. They were all organized diffrerently and all had unique information, but they all shared the same purpose. That was to keep the reader interested and entertained. My website will contain very different information than any of the websites that I sketched, but I learned that the reader must be interested and entertained by it none the less.

I was asked to sketch thumbnails of a wide range of websites, indicating the design and layout elements. I watched for similarities and differences between each.

As I did this exercise it occurred to me how much the target audience does dictate the content and tone of the sites. I couldn’t help being a bit frustrated with large corporate sites where there is a large overlord company that owns a company that owns the website that you are visiting. I found that these large corporate sites had layers and layers of navigation and didn’t do anything to simplify. It was like the third layer of nav bars was the applicable one to that page. Sometimes I really don’t think there is much thought that goes into some of these sites.

While I was unpleasantly distracted with complicated sites, I did find some very pleasing designs that made me smile. One of note is the Anthropologie home page.

Now I am not looking to buy a woman’s frock or home decor anytime soon- but the zen of their homepage did make me think about it.

I really appreciated the simple grid and subtle manipulation of elements like the nav tabs having a torn paper look. I really liked their distilled line of thinking on this landing page. Seriously guys I would recommend it.

Other things that stood out were search bars galore. You would think it would be way easy to install and implement a search bar on a site. I am guessing it is more difficult than a one click install.

I sketched 12 thumbnail representations of website homepages using black ink. I took my visual findings and scanned them into Photoshop. Next I placed them here for the whole world (at least our class) to see.

12 thumbnails of web maddness

This project takes the complexities of a web page and helped me break down the grids and lies to find truth and meaning in design and function elements. I will do this again to gain more insights and also recommend that anyone wanting to learn about web design do the same. A strong lesson indeed.

This is my experience of lab no. 4.

During this lab we added CSS styles to a given HTML code. I thought that this was a really good practice of skills that I already have but I also learned a lot during this process. In my other experience, I just wrote the code for both html and css from scratch so to have the css window show me all the options i had and how i could easily edit them was a HUGE help! It actually made me upset that I didn’t know about it earlier. Oh well, here are some images of what i changed.

This is what the actual file looked like.

This image includes the CSS styles I added to the given HTML code.