Making a Website Look Good
Creative Design, Usability, Accessibility and the Browsers Explained
Designing a web site? Usability, accessibility and some basic browser design guidelines should be the considered to make a visually appealing site.
Creative web design is all about making a website visually appealing. A visually appealing website is a site that is easy to read, easy to navigate. To create a site that visitors will not click away from immediately, follow some basic design standards, and think about the usability and accessibility of the design.
The Basics:
- Colors: the true cross-platform color palette is 216 colors
- Fonts: The fonts used must be on the users’ computer. The most commonly used fonts are: Times New Roman, Arial, and Helvetica. These fonts are easy to read on a computer screen.
- Screen Resolutions: Most users are viewing the web with a resolution of 1024x768. The second most common is 800x600. Which resolution used should be carefully considered. Think about designing a resolution independent site (discussed below).
- Brower Compatibility: There is more than one browser used on the web. Don’t design for just one. Test them all. The most popular are Internet Explorer (5-7), Firefox, Mozilla, Netscape 7/8.
- Images: Almost every website uses images. It is important to have images on a website for selling products, and for displaying company branding. But don’t go overboard and show images that don’t really have a purpose. Also, make use of the ALT tag with images for accessibility.
Usability: In his book “Designing Web Usability: The Practice of Simplicity” (New Riders Publishing - 2000), Jakob Nielsen, a usability guru tells us to “Put usability first. Practice simplicity”. Design a website with the user in mind and keep it simple. What is the purpose for the site, what is the audience and what are they trying to do? Practicing usability is paramount when completing the information architecture for a site, but it is equally important with the creative design. Design a site that helps the user complete their task without working to hard.
Things to consider:
- All pages on the site should have the same basic style.
- The Home Page should have a different design from the rest of the site while still having the same basic style.
- The brand (logo) and/or company name should generally be in the upper left-hand corner (sometimes it is located elsewhere for the Home Page and is larger).
- Navigation should not take up more than 20% of a page. With the Homepage this may be slightly different.
- The two most common locations for navigation is the top of the page horizontally and the left-hand of the page vertically.
- Never display the same links in the footer as you do in the main level navigation. Footers usually contain links such as Help, Contact Us, Privacy Policy, Feedback, etc…
- Have printer friendly options if the content displayed is suitable for printing.
- If there is a lot of content on the site, consider creating ‘sub sites’. Simply break the site down into sections (similar to chapters in a book) with each section having its own landing page. Following the same basic style, create slightly different designs for each sub site.
Resolution Independent Design: Consider developing using percentages (%) instead of pixels to define widths on table definitions and backgrounds/borders. Using % enables the browser to render the display according to the users screen resolution. This can be a lot work and requires testing the site in different screen resolutions, but may pay off in the long run.
Accessibility: Design a site with accessibility in mind. There are many web users who have disabilities and use different technologies to browse the web (such as screen readers). Colors, fonts, use of certain development technologies, images; all these things need to be carefully selected for a web site to be accessible. The W3C has defined Web Content Accessibility Guidelines. Don’t expect to be able to follow them all, but review them and decide what can be done to make the site accessible.
Users come to a web site for information, to buy things; they do not come to look at the pretty pages. However, a site that is not visually appealing can drive a user away before they complete their task. Following basic guidelines on selecting fonts, colors, screen resolutions and images and thinking carefully about usability and accessibility will lead to a website that is easy to read and navigate.
