Thursday, April 19, 2007
- Crull Chambless
This
article contains our recommendations for quality design and
cut-up based on our years of experience. Every website is a unique
design solution but there are some general guidelines that will make
your design more practical, easy to code, and better for your site's
visitors. Please consider these suggestions as you build your
masterpiece:
- Color. Use web color palettes. Stick within
the RGB gamut right from the start to avoid color shifts. It may be
helpful to load the web swatch palettes in your favorite design
application.
- Color 2. Avoid very subtle
contrast and hue changes. The biggest difference between designing for
the printed page and for the web is the variable nature of the way
users experience the web. Monitor size is one thing (more later), but
so is color. Your website has the potential to be viewed on perhaps
thousands of different display devices from tiny PDA screens to
cinema-sized LCD projectors – each with its own unique color
calibration (or more likely lack thereof), brightness, contrast,
refresh rate, color depth and age. You can't ever be sure just how your
site will be viewed so make sure your design doesn't rely on a
perfectly calibrated display to see your precise color transitions and
effects. Give it just the smallest bit of contrast to make sure all
visitors can experience your design as it was intended — more or less.
- Size.
Design for everyone. While most of us designers use large, high
resolution displays, most of the web is still surfing along using
displays at 1024 x 768 pixel resolution. In fact, there are still
plenty of users out there using 800 x 600 resolution. While that may be
hard to believe just look at a handful of the top websites on the web
and you'll see designs that take no chances and make sure their content
is fully visible to users even at 800 x 600; Adobe (http://www.adobe.com/), Apple (http://www.apple.com/ ), Microsoft (
http://www.microsoft.com/ ), and Yahoo (http://www.yahoo.com/
) are examples, just to name a few. The biggest issue is horizontal
scrolling – which can be difficult for users to understand and is a big
no-no in the web world. Keep your site design narrow enough so that the
width of your content fits comfortably inside an 800 x 600 browser
window. There is some variance, but generally 750 to 775 pixels is
pretty reliable. Vertical scrolling is ok when you have a lot of
content but keep in mind that content in the first 450 pixels from the
top is what we'd call "above the fold" – put your most important
content and especially navigation up there. Our free downloadable
design templates are setup with guides to make this part a breeze.
- Fonts.
There are a couple of things to remember when it comes to fonts.
Anything that is going to be actual text has to be in a web safe font.
Just like when you send a job to press and have to include the fonts
you used, so goes the web. The only problem is you can't just send your
visitors fonts so you have to use what they have on their system. The
so-called web-safe fonts are: Verdana, Arial, Helvetica, Georgia, Times
New Roman, Comic Sans, Courier New, Impact, Arial Black, and Trebuchet.
Not exactly a stunning list, but these fonts are optimized to be read
on screen and are great for your body text. Feel free to use more
exotic fonts as images in headers and spot graphics. And don't forget
you're designing pages for a dynamically driven CMS site – make sure
your menus are set using web fonts as they'll be generated in real time
by the server. Check out this handy tool for previewing web safe fonts
at various settings — http://typetester.maratz.com/
- Layout.
Simple, clean layouts are often best on the web. Try to choose colors
and graphics carefully and avoid unnecessary gradients, drop shadows,
rounded, irregular, or organic shapes, and transparent layered effects.
Some effects can be difficult to reproduce using HTML without resorting
to complex mark-up using large graphics. When in doubt, go simple. Flat
color, images that tile (repeat indefinitely in either or both
directions), rectangular formats, and subtle rules that can be
reproduced using CSS are easiest for the browser to render and will
make your site load faster and more reliably. This, in turn, makes
your visitors' experience even better.
- Navigation.
Keep your navigation clear, consistent and easy to find. Clever,
complex navigation might win you a design award, but simple clear
navigation that even my mom can figure out wins you traffic. If
visitors can't find what they are looking for on your website, they'll
probably go somewhere else. Put the navigation high on the page and
present it in a clear and organized manner. Try to keep it consistent
from page to page and, when possible, organize links into logical
sections. Four or five interesting categorical groups of pages is much
easier to navigate than endless lists of links.