Website Design Suggestions

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.