The professional look

Posted in Knowledge Base and ~News 5 years, 4 months ago at 3:45 pm

Whether you are a graphic design, engineering, or business student (alias web author), getting a site to have that professional, refined look takes experience (refine, refine, refine). You may feel constrained by what your client wants, by your skill level, or lack of artistic talent.

Fear not, there are some techniques that can help you design the right look. But don’t expect perfection the first time. After building many web sites, you’ll begin to develop a style that works.

Checklist

1. Know your key players.
   • Ask them for examples of what they like and don’t like.
   • Don’t assume you know what they mean when they show you something. Ask detailed questions about their sample. “What is it you like about the:
     • layout
     • color
     • navigation
     • fonts
     • images
2. Document what the competitors are doing.
   • What do their sites look like?
   • What colors and images are they using?
   • How are they remarkable?
     • How can you be remarkable?
3. Know what browsers you are to support.
   • Your Site Plan will tell you what browsers your clients are expecting to support. This will help you decide if you use a liquid layout or a static layout. Both have browser compatibility considerations.
4. Get a copy of the corporate identity guidelines.
   • What’s the logo look like?
     • Don’t start the project without it; everything you do must compliment the existing identity.
   • What color schemes are acceptable? Which aren’t?
     • Can you introduce an accent color?
   • What layout style are they currently using?
     • Do they have plans to stray from this style in the near future?
     • In general, a company’s web site correlates with their marketing efforts in other media. But ask what visual/thematic focus each channel of the company uses.
   • What fonts are they using?
     • Can you introduce a new one.
5. Build a prototype
   • Use standards-compliant code.
     • The liquid block method is the latest standard which incorporates xhtml and external style sheets. Read Page Layout with Stylesheets.
     • Check the site’s pages against the World Wide Web Consortium‘s html, css, and link validators and make corrections. Removing tagging and style errors will improve the performance of your site.
   • Use accessibility standards.
     • Read Designing for Accessibility.
   • Define a color schemefor the prototype based on their corporate identity and/or this visual imagery. This tutorial provides a few methods:
     • Choosing a Color Scheme.
   • Use an example of the accepted visual imagery in your prototype.
     • Create visual harmony by keeping the style of images consistent.
       • If using photos, use the same photographer with similar lighting conditions.
       • If using illustration, use images from the same series.
   • Eliminate redundancy.
     • Use the masterpages method of building pages with includes files.
   • Test the prototype with your client and members of their audience groups.
     • Listen well to their feedback and incorporate what makes sense.
6. Build a Style Guide that shows acceptable uses of the following and keep it updated as decisions about the items change:
   • Logos
   • Banners
   • Typography
     • What font set is most appropriate for headlines, paragraphs, lists
     • Show a visual of the .CSS files
     • Review most common fonts list from Chuck Upsdell of Browser News.
   • Menu styles
     • Global navigation
     • Section/Topic/Channel navigation
     • Footers
     • Login areas
   • Table styles
   • Photographic and illustrative styles
     • Color
     • Sizes
     • Effects
     • Placement
     • Alternative descriptions
     • Mode of Expression
       • Is it realism, grunge, historical, etc.
   • Interaction and multimedia styles
     • Always popup?
     • Always confirm?
     • How to support the installation of plugins