Web Design: Color, Type and Graphic Elements
To create an effective website, you have to follow basic design principles for blending color, type, and graphics. You must also use your webpage space efficiently to achieve a layout that’s not too crowded, is feasible and practical from an engineering standpoint, is flexible enough to display a variety of media, and keeps all the important elements above the fold — within the initial viewable space. Whew! That’s a lot.
Here are some guidelines for color, type, and graphics to consider for applying tried and true design principals in the context of designing digital sites.
Choose a brand-appropriate color palette for your website
Most businesses creating sites already have an established brand color palette and guidelines that give you a head start for these types of projects. For new products or initiatives, events, and so on, however, there may not be an established look. In these scenarios, it’s helpful to ask your client for a list of adjectives that describe the mood of the site they are looking for. Or ask them if they have a palette preference or aversion. From there, you can establish a color palette and a set of styles that will work for the entire site. Here are some thoughts:
Lights and darks. Your site will always need a range of color values in order to create contrast. By establishing a standard color palette to draw from, you can help ensure a consistent and harmonious feel across the site.
Background color. There are really just two choices for the background that goes behind content: a light or a dark background. A mid-range color background will not provide enough contrast to make text and other content legible. For information-rich and utilitarian sites, it’s best to choose a light background for content unless the brand requires otherwise. A lot of light-colored text on a dark background is simply hard to read. This does not mean that your web page must be all dark or all light.
Text color. The color choices of website body copy and headlines say a lot of the site’s professionalism. Unless the design otherwise calls for it, avoid using pure black or pure white for body copy, or colors that have too much saturation. These colors are very strong and can buzz on the page while the user tries to read a paragraph of text. Instead, use a deep gray, perhaps hinted toward a warmer or cooler tone. Otherwise use a similarly hinted off-white. This strategy allows you to choose stronger or brighter colors for headlines, bullets, and subheads.A sample palette: Muted light and dark colors are on the top row. Brand colors are in the middle row. Accent colors are on the bottom row.Credit: © Peachy GreenThis cleanly designed site uses a nice mix of darks and lights to present content.
Use fonts to set the mood of your site
You have to be careful with fonts because they can project a lot of personality. Depending on the font you choose, your website can express edginess, professionalism, and everything in between. Just as you choose an appropriate color scheme, you must also choose appropriate fonts for your website.
Generally, serif fonts (fonts that have little ledges on the tips of each letter) convey feelings of stability, professionalism, and class. Sans-serif fonts (no ledges on the tips) convey feelings of modernism and cleanliness. On the web, sans-serif fonts are often used for blocks of body text and subheads, as they tend to read better on the screen. Serif fonts, on the other hand, are often used for short phrases and headlines, because they are typically shown in larger font sizes, and so are legible on the screen. (Of course, this is just a baseline. Many sites use serif and san-serif fonts in the opposite way.)
Use graphic elements efficiently in web design
In print design, you can use graphic elements rather freely, but in web design, large photographs or complex graphics that take up the whole page can be like lumbering elephants. Big photos mean big file sizes that download slowly. When designing web pages, use large graphics sparingly, and try to reuse graphic elements (such as button styles and background tiles) wherever possible. That way, you can define a standard set of graphic styles that the developers can turn into CSS styles that can be applied throughout the site. Additionally, you can simply use CSS code to assign color and shape to HTML elements, removing the need to use graphics at all, and making it a simple process to update an entire site just by changing a few lines of code. Such a combined use of CSS styles and images can create a visually rich site that is efficient to build and maintain, and that loads fast.