Identify a Color Scheme
A color scheme is a set combination of colors used to tie your entire site design together. When first working on designing you should identify a color scheme of 3-4 colors. Generally I reserve one color from my scheme to identify hyperlinks.
The three ways I generally come up with a color scheme for a new design project are listed below:
- Use colors from existing marketing materials: If a logo or other print materials are already defined this is a logical place to select your colors.
- Use color theory techniques: Often based upon color locations on a color wheel, there are many utilities and samples of color schemes that can easily be identified.
- Use colors from a photo: Using a photo that will be part of your template design; you can use a color picker tool in most image editors to identify colors that naturally work well together.
The number of fonts used in piece of design should be kept to a minimum. 2 to 3 fonts is usually the maximum you should use. Since the selection of fonts in web varies from print, I usually don't spend much time on fonts in the design phase.
Designing a flexible template design for web has several unique limitation/considerations that should be assessed as you work through the design process.
- Websites designs are separated out in rectangles. (Slicing)
- Since websites are not static, content sections should be able to grow or shrink depending upon changes made in content.
- Screen sizes and resolutions vary.
To simplify to template designing process, using the width of 960px for your site will allow the site to be viewable on most devices. This Basic Adobe Fireworks Template is scaled for a Full HD (1920x1080) screen with guides for the 960px area, the "above the fold" section of an XGA (1024x768) screen and a few suggested divisions based on the Golden Ratio.