So far this week, I have really learned a lot. I am such a huge fan of our book, “The Principles of Beautiful Web Design” by Jason Beaird. It makes such a huge difference to learn about something in words of your own generation (or close to it). He’s mentioned a few really good looking sites that I am going to check out. The one downside is I will be looking them up, hoping they still look the same. The book was published three years ago, which doesn’t make a huge difference as far as the XHTML goes, since it’s been pretty much the same, but design is changing all the time. His guidelines, however, seem timeless and very wonderful. I think this week has been the most informative so far. I have come up with quite a few notes for this week.
A good website must be usable, accessible, functional and beautiful. Users should be drawn to the content, and able to easily navigate throughout the site.The Bus Full of Hippies template is a great example of a page that is both beautiful and useful, with simple navigation.
The navigation should be as close to the top of the page as possible, and clearly visible. Navigation that changes on hover or indicates the current page can help users see where they are and where they want to go. Secondary navigation (including search fields) should not be dominant. The Icon Factory‘s Halloween 2006 webpage was a perfect example of intuitive navigation with search fields being less dominant.
Pages should be consistent. Keep the same theme or style, even if the layout isn’t the same.Ordered List is a perfect example of this. Even though the layout of the main page is completely different than the rest of the site, the consistent color palette keeps the site looking as though it belongs together.
Beaird went into detail about the design process, laying out all of the specific steps a designer has to go through when designing a site for a client. He talked about the discovery process, which includes Googling the company and scheduling a meeting with them. Your first meeting should always be in person when possible. At the meeting, you should take notes with a pen and paper, since computers can not only be intimidating to some, but also because computers discourage eye contact. Also, avoid technical jargon and design-specific questions. Asking specific questions about the design can lead to misguided suggestions.
Some good questions to ask a client during the discovery process:
- What does the company do?
- What is your role in the company?
- Does the company have an existing logo or brand?
- What is your goal in developing a website?
- What information do you wish to provide online?
- Who comprises your target audience?
- Do its members share any common demographics, like age, sex, or physical location?
- Who are your competitors, and do they have websites?
When you are designing a new site, the elements that you need to include are:
A container can be either the body tag, a div tag, or a table, and can be fixed or liquid.
Include the logo and colors that exist across company media to make up their identity.
Main navigation must be easy to find and use, be close to the top of the page, and must be above the fold.
The user must be able to find what they need in a few seconds, so keep the main content block as the focal point.
The footer usually contains copyright, contact and legal info, as well as links to the main section of the site.
Having empty space is important to the look and feel of a website. It helps a design “breathe” and moves users’ eyes through the page. A site without whitespace can look overcrowded.
When drawing sketches of the new, site, use a grid based on the Golden Ratio. An easy way to do this is to use the rule of thirds.
As in any form of design, balance, unity and emphasis are a big part of web design. Hicks Design is a good example of using brighter colors to provide unity, and both large and small shapes to create balance. Left Justified is a good example of creating unity through repetition. The red wood throughout the page ties everything together. Woot is a good example of emphasis through contrast. The site uses green, but for the I Want One button, they used a bright yellow.
Left column navigation
Think Geek(now 3 column nav)
Audi(no longer right- column nav)
Design Showcase and Gallery Sites
CSS Zen Garden
Design Interact Site of the Week
Trends from ’06
Expansive Footer Navigation
3 Columns with Content First
My links for this week: