Saturday, January 31, 2009

Week 4: Website example

I didn't have a page in mind for this week, so I spent some time looking through showcased sites on coolhomepages.com. (A word of warning: this site is way addictive). After driving myself crazy with choices, I finally settled on www.ricardoguerreiro.com as a model for the navigation and site organization (but thinking-clear.com for the graphic design). 

While I found the Ricardo Guerreiro site less visually appealing than some of the others I saw, its structure and presentation of information works well for what I hope to accomplish with my own homepage. I have decided to create a site that houses examples of the various training projects I have worked on in the last several years. The nature of these projects lends itself to the sort of categorization found on this page. 

One thing I especially liked about the front page here is the behavior of the rollovers/popups. We've all become accustomed to images that "do"something when you mouse over them -- e.g., mouse over a "photography" icon on an artist's site, and a sample photograph appears. On this site, though, a different image is revealed each time you mouse over an icon -- you can keep mousing over the same icon and get a different result each time (up to a point, obviously). For me, this was engaging; it make me play about on the home page for much longer than I typically would have. 

The home page also includes a brief message from the artist, speaking directly to the visitor. Additionally, there is a bio link, which leads to a brief blurb written presumably by the artist himself. I like the fact that the bio reads more like an introductory letter than ad copy. I think that approach makes sense for my site as well. 

The internal pages are very well laid out, with a grid of thumbnails at left and a blowup of the selected image at right. The cursor turns into a magnifying glass when you hover it over the blown-up image; clicking blows it up still further. My training pieces would work well like this -- although rather than just having them enlarged, I will probably endeavor to show more detail in some other way (perhaps a case study).

It is very easy to track where you within the site, and the navigation is extremely obvious and minimal--which is important to me. 

A couple of things about this site that I am on the fence about: 

1) The use of motion is perhaps overdone. Every time you go back to the home page, you have to wait for the icons to fly in. Also, there is some sort of rippling, sunlight-on-water effect on the right-hand side of the page that never stops; I find it distracting and unnecessary. 

2) The links page is mysterious to me. Is he linking to competing designers? Designers he is inspired by?  A bit of explanation would go a long way here. 

3) Some of the font is too small to comfortably read. Easy enough to fix that. 

And now, because it was so unbelievably hard for me to pick one URL, I have to offer this list of also-rans. I am limiting myself to five. 

burkedesign.ca -- a really charming and well-designed (albeit too long) introduction and nice presentation of information
thinking-clear.com -- gorgeous, gorgeous design but a bit abstract, navigationally speaking
holihandesign.net -- great use of color, movement and sound
mushroommultimedia.com -- good use of imagery to support the company name/identity, but way too fancy for me to think about imitating!
crowleywebb.com--very unique (but not totally effective) navigation, good design, snappy copy




7 comments:

  1. I have never been to coolhomepages.com before until now, and I have to agree that it is addictive. That is a great place to go for design inspiration!

    I agree with you about rollovers and tooltips. I love those features. It does make me more interested, and it actually makes me more likely to click an image and go to that page. I do think those are very helpful to readers too. If the reader is new to the site, those features are excellent to directed the reader where they need to go, and I think it help retains the reader's interest and would make the reader more likely to venture further into the site.

    - Ashley O.

    ReplyDelete
  2. Interesting sites - I, too, couldn't settle on just one. I really like the site you profiled in detail. The thing that jumped out at me was his treatment of thumbnails on various pages. I like that it remained consistent in layout from page to page and also allowed him to expand his examples in his portfolio. Some pages didn't have as many examples as others and so the small thumbnail shapes were simply non-linking objects. Thanks for the example. There's a lot worth emulating in this site.

    ReplyDelete
  3. Thank you for sharing the examples! I really enjoyed the Burke&Burke example, even though the introduction was long. That website illustrated what McCloud says in "Pause and Effect" (p 130) about comic strips (even though this website is not a comic strip!): "Comic's form of interactivity is uniquely rhythmic. The author provides that visual input...the reader to provide that imaginative input between the panels. It's a constant call and response...." While I did not physically interact in the Burke&Burke page, I did mentally interact, which was an interesting experience of what we are discussing. :-)

    ReplyDelete
  4. Shawna,

    Thanks a tone for referring us to this page! I had great fun browsing through all those really cool web pages. I ended up spending more time than I had originally intended. Really, good design can get so addictive. Your examples (at the end of the blog) were great picks! I wish I had some expertise with flash. But, alas it will be some time before I can even start thinking about emulating some of these wonderful designs.

    Sharba

    ReplyDelete
  5. I enjoyed your in-depth commentary on the page. The changing mouse-over images are really interesting and entertaining. I don't think that my content would lend itself to that kind of thing, but perhaps it could be used on the artist page with the mouseovers showing different parts of a collection.

    ReplyDelete
  6. Excellent in-depth analysis of a site. This close attention will serve you well as you work through your site creation.

    ReplyDelete
  7. thinking-clear.com is a beautiful site. I want to call it monochromatic even though it doesn't fit the classic definition. That is the level of professionalism I'd like to achieve but I lack the skills.

    On too much motion, I agree. My philosphy is just b/c you can doesn't mean you SHOULD. There is a point of overkill though none of the site we reviewed went to far. I've seen others though.

    For me, the danger is bandwidth. While I have hi-speed internet cable, many people in rural Texas don't. They are either running dial-up with a hamster in charge of generating electricity or they are relying on an iffy satellite connection. So, for me, a site that is quick to load is important.

    Thanks for sharing some spectacular sites.

    ReplyDelete