Web Design: How to Establish a Design Style
After the design for a website is approved, it’s a good idea to establish a visual style guide that governs the color palette, font usage, and graphical treatments. Developing a style guide first — or starting one and refining it as you go — will help you stay consistent throughout the development of your comps. In addition, the graphical and text styles you define now will ultimately be translated into CSS (Cascading Style Sheets) styles by the developers during the build-out phase.
Graphic style guides for websites
There are so many elements that you can visually define just with simple CSS code alone. Visual elements such as borders, fill colors, rollover colors, link colors, background colors, and rule lines should all be defined by the designer. Questions such as these should be documented: How thick are rule lines? When you roll over a content area, does its background color change, and if so, to what color?
For other common elements on the page — such as custom textured backgrounds, fancy buttons, and border treatments that do need graphic support — you can create a library of such items. This library, created in a program such as Adobe Fireworks or Adobe Photoshop, would be in addition to the page comps you have already created. All production files and comps should be saved as layered files in the software’s native format (PNG and PSD, respectively). The layers and layer sets should be clearly organized and named so any designer can pick up where you left off.
Button styles in web design
One thing often overlooked in web-design planning is a hierarchy of styles for buttons and links. You should have a plan for different grades of buttons and links: an important button, a less-important button; an important text link and a less-important text link (or a link found in line with other body copy). Often a page’s links and buttons are placed on backgrounds of different colors. If the same style doesn’t work on both backgrounds, have a separate style for each background.
In the example, the two top-tier buttons work well on both a light- and a dark-colored background. The green and the orange accent colors for the Tier 3 and Tier 4 links, however, do not work well on both backgrounds. In this case, both the green and the orange were “cheated” to be lighter and brighter for use on dark background and darker to work on light backgrounds.
Type styles in web design
Nowadays it’s rare to utilize graphical text — text that is simply a graphical image — in web and mobile sites. There are several reasons for avoiding the use of graphical text. First, graphical text is hard to maintain: It’s much easier to retype or translate words in HTML or in a database and have CSS apply the appropriate styling than to redo an image. Second, graphical text is not searchable unless you apply alt tags with keywords.
In the past, designers used graphical text because fonts were an issue on the web: Only a limited number of (rather boring) fonts were available on every user’s system. Now it’s possible to embed fonts — have your website link to font files — through various services and technologies.
As with buttons, you have to define design styles for all types of fonts and the situations in which you use them — from body copy to headlines, subheads, and captions. These font styles will ultimately become a series of CSS styles applied to dynamic text. As a designer, you don’t need to write the CSS classes; you can simply create a style sheet that shows all your font styles in Photoshop. The developers can glean what they need from the layered Photoshop file. CSS is surprisingly accommodating — you can get a lot of cool effects.