Sunday, August 30, 2009

Web Research Pt. 1: Research

3 Successful Websites

1. www.webleeddesign.com

This is the portfolio of designer Bryan Katzel. The site is comprised of one long scrolling page and with the exception of the link to his blog. Everything is self evident, therefore you don't need to take the time to figure anything out other than 'Where do I start?'.
Immediately you will see the navigation at the very top of the page, which is also color coded to correspond with the different sections of the website. There are exactly 5 navigation buttons, which keeps the site within the Rule of 5.

I would not say that the 3 click Rule really applies to this site, simply because everything is one click away. Not too much confusion there!

One features that I really like about it is the fact that the site is highly interactive. There are little hidden goodies in the site that reveal themselves after a 'link' is clicked. This is constantly giving the user feedback, almost like an "ah ha" effect.

The site doesn't strictly adhere to the golden-ratio, or the rule of thirds with the exception of the vertical set-up. Although I would consider this to be something that adds to the creativity of the site, simply because the white space surrounding the content brings your eye to the middle of the page, where all the "action" is happening.

Mainly, for me, the site is highly effective because the more I wander through it the more I want to explore. Although there's not much to explore once you have read and clicked through all the sections, I still find myself clicking on the 'up' buttons and watching the scrolling function on the site.


2. www.flylyf.com

This is a design blog, much like notcot.org, but with a different set-up. Although I'm a huge fan of notcot.org, I find this site much more visually appealing. (I think I'm seeing a trend of liking dark sites that use bright colors!!)

Anyways, as before the navigation is clear and easy to spot. It's is also within the Rule of 5 and color coded specifically for the ease of finding content related posts that you are interested in, or just browsing by category.

The grid sets up a clear hierarchy in the layout. Where my eyes first go to the flylyf logo and navigation bar and then immediately to the posts below.

There's not as much white space in this site's layout, but everything still has a place and has enough room to breathe.

The site also does a good job distinguishing what is it's own content and what is ad related.


3. www.target.com

I'm sure we all know what this site is! I picked it because I wanted to show a website that doesn't necessarily follow all the rules, but also is able to do a good job of not being super overbearing.

As you can clearly see the site does not follow the rule of 5, mostly because it has so much to showcase, and the easiest way, in this case, would be to break it down into the categories shown in black near the top.

There are several other sub-navigational links which are more task oriented than the main goal oriented nav bar. They are in a different color and size which setup a hierarchy among the main navigation and the secondary navigations.

Even though there is a lot of information on the main page, you get of sense of what is where with the use of the grid. Sales and deals are the first thing that catch your eye followed by the categories that have been semi-highlighted to the left of the screen. Then towards the bottom there are more ways to shop according to deals.

Overall the site has an asymmetrical symmetry that is shown by the content blocks on either side of the page.

I would also say that the site follows the 3 click rule simply because I can find everything quickly and easily throught the drop down menus in the nav. Normally I only need about two clicks to find anything when I'm not browsing.

Web Research Pt. 1: Reading

After completing both reading assignments my questions from the readings are as follows:

1. After completing the reading, what, in your opinion, is the most important component of a good website?

2.a)What two types of symmetry are more likely to be found on a splash page than in an actual page layout?
b)What two types of symmetry are more likely to be found in the page layout?

3. What principle of web design is similar to, if not the same thing as, the Gestalt theory?






Answers:
1. Good communication. You want to be able to get the point of your website across without bombarding the user with unnecessary information. Like the reading states, you want your site to be self evident and not self explanatory.

2. a) bilateral and radial b) symmetrical and horizontal

3. Proximity