What are the suggested custom design specifications and guidelines?
Planning Your Design
For more information on planning your design using our design framework, see Using the Design Framework (requires Adobe PDF Reader).
After completing the design process, please follow the below instructions:
1. E-mail a JPG of the flattened home page and any secondary page designs for technical evaluation and price quotation.
2. After the technical evaluation is complete, attach and E-mail a 72-dpi, RGB, Photoshop file that contains clearly labeled layers for each of the following: one layer for each repeating element, one layer for static elements and one layer for sample content. Sample content should include descriptions and examples of colors and font families for at least: the menu, sub-menu or dynamic menu, body copy, headings one through 6, links and site name (if applicable).
3. Please include any special instructions to the template programmer being sure to include: preferred font-faces, sizes, leading, and hexadecimal or rgb color values from Photoshop for the style sheet.
Note: Please plan to allow 10 business days from the time your design is approved for us to complete implementation.
File Specifications
Designs should be rendered as 72-dpi, RGB, Photoshop files and should contain clearly labeled layers for each of the following: one layer for each repeating element, one layer for static elements and one layer for sample content. Sample content should include descriptions and examples of colors and font families for at least: the menu, submenu or dynamic menu, body copy, headings one through 6, links and site name (if applicable).
Recommended Element Dimensions
Now that more than 90% of visitors are using at least a 1024x768 screen resolution, you should take advantage of the additional screen real estate to minimize vertical scrolling. However, you should avoid forcing visitors to scroll horizontally by limiting the total content width to 960 pixels or less.
- Masthead Width - 960 pixels
- Masthead Height - 200 pixels or less
- Left and/or Right Column Width - 170 pixels at minimum
Guideline Overview
Unlike print design, Web design is not limited by the number of inks, quality of paper or cost of distribution. However, every design project has its own set of challenges and designing for the Web is no different. Special consideration must be made to limit file overhead, maximize on-screen readability, present a clear means of navigation and create a robust layout capable of properly containing dynamic content.
Limit File Overhead
File overhead is the sum of the file sizes and request overhead for all of the files used on a given page. Because slow load times drive users away faster than anything else on the web (Nielsen net ratings), limiting the number and size of files is an important consideration when designing a site.
Although broadband adoption among active Internet users in the US now exceeds 90% (websiteoptimization.com), there are still many people who simply cannot get broadband or experience significantly slower speeds than advertised because of technical limitations or network congestion (speedreport.org). Even worse, the average amount of time visitors are willing to wait for a page to load shrank from 8 seconds in 2003 to 4 seconds in 2006 (Jupiter research). Worst of all, regardless of download speed, there is additional overhead incurred for each file requested from the server.
Using a real-world speed of around 650kbps for entry-level broadband results in a per second download rate of about 80Kb. Adding websiteoptimization.com's estimated .2 second latency per file requested and an average of 20 objects per page, results in a download time of about 5 seconds per 80Kb page. After deducting 20Kb for style sheets, html, user images and content, leaves designers with an optimum design file size of about 60Kb.
Obviously, the numbers presented here are estimates; there is no one-size-fits-all standard on the Web. Like print design, there are different requirements based on project objectives. The amount of time visitors are willing to wait is influenced by their reasons for visiting a site. For example, visitor expectations for sites primarily devoted to visual media like entertainment or the arts are different than they are for information driven sites. Statistics show that content is still king and that visitors are more likely to visit a site if the content is good and they are able to find what they are looking for as fast as possible. Content driven sites are wise to keep file overhead as low as possible to avoid losing visitors.
Although broadband adoption among active Internet users in the US now exceeds 90% (websiteoptimization.com), there are still many people who simply cannot get broadband or experience significantly slower speeds than advertised because of technical limitations or network congestion (speedreport.org). Even worse, the average amount of time visitors are willing to wait for a page to load shrank from 8 seconds in 2003 to 4 seconds in 2006 (Jupiter research). Worst of all, regardless of download speed, there is additional overhead incurred for each file requested from the server.
Using a real-world speed of around 650kbps for entry-level broadband results in a per second download rate of about 80Kb. Adding websiteoptimization.com's estimated .2 second latency per file requested and an average of 20 objects per page, results in a download time of about 5 seconds per 80Kb page. After deducting 20Kb for style sheets, html, user images and content, leaves designers with an optimum design file size of about 60Kb.
Obviously, the numbers presented here are estimates; there is no one-size-fits-all standard on the Web. Like print design, there are different requirements based on project objectives. The amount of time visitors are willing to wait is influenced by their reasons for visiting a site. For example, visitor expectations for sites primarily devoted to visual media like entertainment or the arts are different than they are for information driven sites. Statistics show that content is still king and that visitors are more likely to visit a site if the content is good and they are able to find what they are looking for as fast as possible. Content driven sites are wise to keep file overhead as low as possible to avoid losing visitors.
- Determine if the site is primarily intended to entertain or inform and plan file overhead requirements accordingly.
- Lower your standards. Print designers often have difficulty keeping file size in check because they are used to keeping image quality as high as possible. When saving for the Web, remember: the Web is a lower resolution medium than print; viewing the original while saving files for the Web is deceiving--visitors won't see the difference between the original and compressed images; and your standards for image quality are significantly higher than those of the general population. In other words, consider your audience when saving files for the Web and don't be afraid to reduce image quality further (often much further) than you normally would. We rarely set the quality above 55 when saving JPEGs from Photoshop and often find that images can be reduced to 30 or 35 without any adverse effects. Since they aren't the focal point, don't be afraid to compress to background images even more than foreground elements; in certain circumstances we've actually been able to go as low as 15.
- Consider using black and white, monotone or duotone images in place of color photographs. Reducing the number of colors in an image allows you to apply a much higher compression ratio (resulting in a smaller file) before image quality becomes unacceptable.
- Consider reducing image contrast. Screened and overlaid images compress better than high-contrast images.
- Consider using texture, color and illustration in place of photography. Employ large areas of flat color, tiled background images or relatively flat color illustrations to visually stimulate visitors while keeping file size small.
- Select file formats based on image content. Generally, use JPEGs for continuous toned images (like photography) where colors and gradations change frequently. Use GIFs for images containing large areas of flat color (like logos and tiled background images). Since PNG file sizes tend to be larger and IE6 (which still represents more than 30% of the browser market) doesn't support PNG transparency, plan the use of PNGs carefully.
- Consider grouping smaller images into a single larger image. Because each image requires a request by the client and a response by the server, download times increase with each additional request regardless of the file's size.
- Limit the use of animation. Animation is the nemesis of lean web design because even small animations quickly multiply into files many times the size of a comparable image. In addition to larger file sizes, continually moving animations also make it more difficult for website visitors to concentrate while trying to read.
- Reduce the number of frames in animations. When utilizing animation, reduce the number of frames by using cuts instead of fades or wipes or reducing the number of intermediate frames by using a motion or gaussian blur.
Maximize On-Screen Readability
Although Web-specific fonts like Verdana and Georgia have been created to increase readability, due to their lower resolution and differences in reflectivity, reading on screen is still more difficult than reading the same material in print.
- Don't make body copy smaller than 10 points. Due to the differences in browsers and screen resolution settings, what looks "right" on your screen in your favorite browser may be unreadable for others.
- Consider using sans-serif fonts. Verdana, Arial and Tahoma are typically easier to read on screen than serifed fonts like Times New Roman, Trebuchet and Georgia.
- Don't reverse body copy out of a dark background. In print, reversed color can work in small amounts. However, reading reversed body copy on the web quickly leads to fatigue.
- Maintain a high level of contrast between the background color and body copy. Unless your customer demands it, consider black on white or near-black (80%) on off-white (5%) your first color choice. On screen, 80% black is roughly equivalent to setting the R, G and B values to 51 (or a combination of RGB values that add up to 153); 5% black is roughly equivalent to setting the R, G and B values to 242 (or a combination of RGB values that add up to 726).
- Don't use images for display text. Using images for display text hurts search engine optimization, reduces searchability, makes maintenance more difficult and unnecessarily increases download size.
- Leave generous white space between body content and advertisements or supporting columns to aid visitors in following the main story.
- Allow at least 160 pixels for supporting (left and right) columns. Less space may require a smaller font size resulting in diminished readability.
Make Navigation Obvious
Poor navigation is another reason visitors cite for becoming frustrated and leaving sites. In most cases, regardless of how creative it may be, visitors won't waste their time trying to figure out how to interact with a site. Navigation must be both easy to find and easy to follow.
- Place navigation across the top of the page (above or immediately below the masthead) or down the left-hand side. Because the top of the screen is the first thing visitors see when visiting a page and because the vast majority of languages are read from left to right, the top and left are typically considered the positions of greatest prominence on the Web. Because most visitors have become accustomed to seeing navigation in these areas, in most cases, it is wise to avoid breaking this convention unless the customer demands it.
- Maintain a high level of contrast between navigation elements and their backgrounds.
- Emphasize navigation elements by setting them apart from their surrounding elements.
- Consider using separate colors or styles for the inactive, active and selected states of navigation elements. Differentiating between states gives visitors visual cues that help them maintain a sense of place within the site.
Create a Robust Layout
Most print designers are used to working with static workspace dimensions. However, because web content is dynamic, Web designers must learn to create flexible spaces capable of containing varying amounts of content.
- Consider using a grid when planning your design. Grid-based design doesn't have to be boring or require a high degree of visual structure, but if your design cannot be broken into a reasonably logical set of rectangular containers, it will be difficult, if not impossible, to reproduce on the Web.
- Minimize points of intersection. Because of differences in browser rendering, screen size and amount of content, designs with too many connecting structures (especially designs where multiple sides or the background and foreground layers are dependent on one another) break easily and in some cases, may be impossible to implement. For example, overlaying a background glow or shadow on a background pattern creates a dependency on the content remaining the exact same height from page to page.
- Be sure background images for areas that need to stretch horizontally or vertically properly repeat in the direction (or directions) in which the container needs to stretch. For example, while content background images often only need to stretch vertically, background patterns often need to repeat both horizontally and vertically. Care also has to be taken to ensure that background patterns (especially on centered sites) match up with any elements extending outside the main content area.
| Designs: | Creating/Editing |