Our Web Services
The ABC's of Design
Construction vs. Design
Developing a Plan
Writing Web Content
Graphics Tips
Site Maintenance

ARTICLE:
Key Ingredients to Site Design
©OUT THERE PRODUCTIONS. All Rights Reserved.

OUT THERE PRODUCTIONS has prepared the following guidelines for use in designing your web site. We're ready to help you develop your plan, lay out your design, write the contents and construct the site you need to get the most out of conducting business on the web. For more information, contact us.

Distinguish your Design

Avoid using a web page wizard or out-of-the-box template at all costs. You're bound to find scores of other sites that will have the same look and feel as you, and you'll lose your distinctiveness.

If you feel overwhelmed by designing your site or lack the resources, consider hiring someone to prepare the design, with two or three versions on a centralized theme: one for the home page, others for subsequent pages (lower levels). Then hand this design to your development team to serve as a template for construction of the site. Contact us for more information on site layout design.

Be Consistent!

We can't stress enough the importance of consistency. When pages on the same site are laid out differently, it signals the visitor that they may have left the site. Lay out the site by blocking off areas for the following items, and adhere to this layout for all pages:

  • Corporate Logo
  • Page Headers and Titles
  • Menu Bars
  • Navigational Controls
  • Content
  • Graphics

Consider your Corporate Image

Thoroughly review your corporate identity and carefully embed it into your design. Properly use all fonts, logos, colors and brand/product names. Colors used throughout the web site should coincide with corporate colors, if they provide adequate contrast and appeal. These factors remind the reader of who you are and lends consistency to the look and feel of your site.

Use your Company Name

Make sure that your company logo appears in the same place on every page in your site. The first paragraph of each page should also mention the company name, and it should regularly appear throughout the text; this relates you with the products and services described (refer to our page on Developing Web Site Content for more information on preparing text). This also increases brand identity, which is important to marketing and sales activities.

Backgrounds

There are lots of background types... Borders, patterns and images. When used as borders, backgrounds can help delineate navigational areas and menu bars. Other backgrounds can lend visual appeal when used correctly and consistently throughout the site. Be careful, though — there are a several factors to consider before using them:

  • Make sure that the background doesn't compete with the foreground for attention. Avoid busy backgrounds; they make it difficult to concentrate on the page. Keep the contrast between the foreground and background high to increase readability.
  • If you shoose to use one large-size file or image for the background, format it specifically for this use: waiting for a large background file to load is annoying, and you risk losing repeat visitors.
  • Consider a light-colored (or white) background. If you choose to use dark backgrounds, select a text color that provides high contrast. Studies consistently indicate that lengthy text is always more readable when dark text is placed on a white background; keep this in mind when laying out your site.
  • OUT THERE PRODUCTIONS strongly recommends solid backgrounds. They're quicker to load, allow for full impact for your graphics and text, and are the best for reading (numerous readability studies overwhelmingly reveal this fact).
  • Make sure your background is consistent on all pages. This ties them together and reminds the visitor that they're still within the same site.

Colors

Take great care when designating colors for your site's layout. Gradients should be used sparingly, since they sometimes tax the limits of your visitor's monitor. Use basic colors, and consider providing depth by adding a shadow or bevel for visual appeal. Don't overdo your use of colors: as in the case of fonts, too many aresometimes worse than not enough. It's best to assign two or three that work well with each other, and consistently stick to that palette.

Use colors to distinguish between areas of your web pages. Larger sites that contain areas for customer service, technical information or shareholder documents can be differentiated by using a series of colors designated for each section. When you choose this method, it's best to limit these color designators to the header and menu areas. Be sure to use them consistently.

Headers

When you're formatting text for a web page, you are limited in both font and style (see Developing Content for your Web Site). If you choose a specific font outside the standard for headers or emphasized text, prepare these as images. Use an imaging application (such as Adobe's PhotoShop) and save the file in GIF format. However, if portions of your headers, navigational controls or menu bars will change frequently, it's sometimes best to live within web font limitations; this will allow you to change these items without needing to re-create graphic images each time the site requires updating.

Whichever method you choose, OUT THERE PRODUCTIONS strongly recommends that you limit yourself to no more than two font families throughout the site. Use these fonts to designate the type of information (one for headers, another for graphics, subheaders, etc.), and use them consistently to enhance your user interface.

Page Titles

Page titles are what you see at the top bar of your browser (take a look at ours now). They are also added to a browser's list of bookmarks when the visitor delegates one. Always assign page titles... if you don't, your html filename will be used instead. Make sure that your page title isn't cryptic or confusing, and is simple yet concise. When creating a title for your main (home) page, use your company name: this ensures that you'll be easily identified in bookmarks (or favorites) list.

You needn't use separate page titles for every page of your site; instead; consider using one single title for all pages, to make things easier.

Page titles needn't be your company name, however. If your service or product is more identifiable, you might consider using this instead. Also bear in mind that bookmark lists are typically presented alphabetically, so prepare for this fact. Finally, each separate page of your site need not contain a distinct page title; smaller sites benefit from using one title for all pages, while larger sites may only need a few page titles to designate between major areas of the site.

Menu Bars and Navigational Controls

Menu bars direct the visitor to primary pages on your web site. Make sure they are intuitive, visually appealing and easy to locate. Monitor the size of these items carefully: they needn't be very large, but shouldn't be so small that they appear unreadable.

Never place your menu bar on the bottom your pages, as visitors may not scroll down far enough to locate it.

Make sure your site can be easily navigated, with no dead ends or loops. Design the site so that the browser's BACK and FORWARD buttons needn't be used. Keep your menu bars and navigational controls in the same place on each page, thereby making your interface an intuitive one. Minimize the number of mouse-clicks between your home page and the topmost areas of your site.

If you're planning to separate your menu bar into two areas, make sure that the division is logical and intuitive. Our site uses a top header for important information, and a left-menu area for details of each service area. Using button-like graphics can lend visual impact, but aren't necessary... text can be just as effective and very beneficial when your menu offerings change frequently.

Home Pages

Your home page should entice the reader to stick around your site for a while. It's the first page they'll see, so provide them with the information they need to consider whether they want to explore further.

Home pages needn't be the same design as all other pages of your site, but should contain a specific theme that will be carried throughout the remaining pages. Therefore, use major elements (headers, navigation controls, menu bars, etc.) in the same areas as other pages, but deviate from the design to match the criteria you planned for in your opening page.

OUT THERE PRODUCTIONS recommends the following guidelines for the design of your home page:

  • Allow for one area where information can be frequently changed to detail news, events, new products and services, etc. Consider changing this area frequently; it will allow your regular visitors to see immediate changes and stay long enough to explore these new areas.
  • Identify what information will be needed right away for target audiences and plan for it. For example, registered users of your product will want access to a specified area reserved exclusively for them, and you'll need a button for this purpose.
  • Identify the major products or services you provide and emphasize them.
  • When developing a maintenance plan for you site, place links for all time-critical information on the home page. Contests and other sales incentives are perfect for this area, as well as monthly features that change periodically (articles, links, product updates, etc.). See our information on site maintenance for more information.
  • Make use of graphics for this page, and take care in their layout. Scrolling should not be required to view high-impact information.

Graphics

When integrating graphics into your design, remember that too many is worse than too few. Select one for each page to provide the highest impact. Carefully consider the value of each graphic prior to its use — if it's not related, relevant or won't add impact, get rid of it.

Keep the types of images consistent: a site that uses both clip art and photos may not provide coherence between your pages. Stick with your selected colors and fonts. Bottom line: consistency, consistency, consistency!!!

Format graphics properly and aim for the lowest possible resolution to lessen the size of the file. Review the guidelines we've presented on our page on Formatting Graphics for your Web Site for more information.

Frames

These days frames are acceptable, although not universally encouraged for a variety of reasons. Older versions of browsers may not support them, more complex coding is needed ensure that visitors won't 'land' on a page outside of the frame, and - believe it or not - some search engines still have a hard time with them. Also, web accessibility guidelines (for the visually impaired) strongly discourage their use in web designs.

There are obvious benefits to frame sites. Frames make the design effort easier, since you can designate static (not moving) areas for menus and logos, and concentrate on variable areas that will display content or more frequently updated information. Frames also save time during construction, since links needn't be assigned on each page for menu bars and navigational controls.

If you choose to use frames for your site, OUT THERE PRODUCTIONS strongly urges you to ensure that your development team is entirely knowledgeable in their construction, and that javascript coding is created to keep search engine landings within the frame structure.

To learn more about the exciting possibilities of doing business on the web or how OUT THERE PRODUCTIONS can help with your Internet presence, click HERE to read about our web services, or contact us.