Creating a Website Design Language

Posted by Donna Rouviere Anderson October 12, 2015

Once you have gone through Parts 1 and 2 of Designing and Building a Website, as outlined in our previous two website workflow blogs, it’s time to establish a design language for the website. This includes the colors, media, typefaces and other visual language components that will convey the right information and experience for your website users.

This is visual design for meaning. You need to ensure that all of the visual components of the site come together to tell a coherent and compelling story that covers the website’s most critical needs. Consider the aesthetic and emotional aspects of the design language in addition to the website’s function. Consider how the website should look, feel and behave.

Your design language needs to be purposeful, so you should have a good reason for every decision you make about colors, shapes, textures and graphics. Don’t stick in boxes, borders or other visual elements that serve no purpose because they will distract from communicating the website’s purpose.

Make sure the design language is unified across all services and elements of the website and employs the shortest effective path to communicate.

Visual language + content = meaning. Use the visual design elements to set users' expectations about their experience with the brand and website, to communicate what various parts of the website will do.

Make sure you design for both the client and the client’s audience.

The design language should include a color palette, typefaces, textures and shapes based on the experience attributes that you have previously decided on for the site. It should reflect the type of content the website will have - photos, graphs, tables and infographics of various kinds. It should include common interface controls such as buttons, tabs and navigation bars and a representative icon or two if you are using icons.

Often, you want to create more than one potential design language for a website, each of which focuses on one primary experience attribute that you want the website to have. Then consult with the client and eliminate the less effective ones. This helps stakeholders to choose the best ones and eliminate the ones they don’t like. These small design languages are an inexpensive way to help stakeholders agree on a website’s strategy before applying expensive detailed visual design to multiple screen states.

Assess your various design languages when you have finished them to decide if they clearly emphasize one experience attribute without losing the others. If one seems to be missing, vary one or two visual properties such as shape, texture or line style to introduce the missing attribute.

A design language should include:

Hierarchy

A clear hierarchy that draws attention to the most important items and creates an aesthetic impression. If the controls and text are large, they will be friendly, playful and simple. This works well for children’s websites and consumer products. Smaller controls and text work for sophisticated and professional sites. Make sure all text in the hierarchy is large enough to be seen well on an iPad and iPhone. Size everything according to what you are trying to communicate. Larger elements are more important.

Design for the device that is most important to the product, so if the phone is the most important, design for it first and then work up to larger devices in their order of importance. Use grid templates in the right sizes for your design languages. Make the text and images scale, buttons shrink and columns change as needed. Work with ratios to resize your images and fonts.

Color

Choose a color palette for the user interface, background and text that is appropriate to your client's needs. Consider the industry, business, target audience, medium, the site's mood, its history, current trends and competitors. Create a color palette with 2-4 colors - a main color, a secondary one and 2-3 accents.

Use color to draw attention to important information or controls, show relationships, evoke emotions and reinforce brand identity. Set it up so it has meaning - shows location, page titles, headers and links and highlights actions and interactive elements. Use it to unify the overall navigation system. Try colors on different displays to see how they look. A little color goes a long way. Use warm, bright, saturated colors for emphasis and desaturated ones for less important information. Any color contrast, especially red, yellow and orange, draws attention. Don't use one saturated color on top of another - it causes eye strain.

Don't necessarily use dominant brand colors as dominant interface colors. Use bold colors only for accents, and more subdued ones for backgrounds and large areas.

Use pops of color for headings.

Color choices

Tints of nearly any color are seen as softer. A shiny, metallic version of any hue is richer, colder and more high-tech. Sharp contrasts are more bold and decisive. Using closely related colors makes less of a statement but is more mellow.

Various industries use different colors, so take a look at many websites in your website’s industry so you get a feel for what colors are associated with the industry.

Contrast can draw attention to the main focal point. Create specific areas of interest with contrast that draw visitors in and keep them engaged. 

Gradients and drop shadows can give an illusion of depth. Don’t use them unless you have a reason for doing so.              

Background

Keep it subtle and decide whether the site will expand to fill the width of the window or stay the same with the background expanding behind it when the window is enlarged.

Decide how you want to do scrolling and navigation from the home page.

Decide whether the background will move with the content or stay fixed and the content goes over it when it is scrolled.

Elements

Include the following elements in your design language.

  •             Branding and logo
  •             Main navigation
  •             Tag line
  •             Section header
  •             Images
  •             Body text with clear headers
  •             Footer with icons, etc.

Shapes

Rounded corners are soft, human, friendly and simple. Sharp ones appear clean, modern, precise and professional. Complex shapes are not easy to recognize. You should have a clear reason for using them.  

Line weight and style

Thin, sharp lines look precise and sophisticated, while thick, bold ones are simple, friendly and less mature.

Consider curved lines or ones in different styles to communicate your message.

Use borders where they communicate well.

Type

Use it to create navigation hierarchy, hierarchy of importance, reinforce the brand and identify the type of site.

Pair fonts harmoniously, contrasting serif and san serifs and avoiding two very similar fonts together.

Match the fonts with the tone of the site and its scale. Use an infographic approach.

All sections need to be clearly labeled with headers, sub headers, etc. Images can be used to draw attention to the important text. Keep typefaces for headers and sub headers to one or two.

Sans serif is generally more legible than serif, especially at small sizes. Use mixed case type. Don't use anything smaller than 14-16 point if you are displaying it on mobile devices. Left justified is easier to read.

Corporate identity is usually the best place to start in choosing typefaces. However, identity fonts are often best applied to headers and other large elements rather than the majority of a screen's content.

Use script and creative fonts sparingly and with good reason.

If a linked text is accompanied by an icon or a photo, make both clickable. You can make icons bigger when you roll over them.

Rollover effects are important. Changing the color or underlining text provide simple feedback. Create a good hypertext style guide to achieve unity that includes inline text links, featured items, buttons, icons and footers. For buttons, scale them in 10-20% increments and use the most important in a larger size.

 Build CSS styles to easily make changes.

Creative options - overlap fonts, add shadows or texture, play with letter case and spacing. Make sure the fonts convey meaning.

Texture

Texture can work well as a background, or on header, footers, navigation bars, buttons and dividers if used sparingly. Combined with photos, it can convey a weathered or grunge look.

Textures and three dimensionality indicate that items are moveable or clickable and can add some aesthetic richness if not overused.  

Bright highlights  convey high tech.

Subtle mottling conveys a softness to the touch.

Subtle ridges indicate something can be moved.

Visual textures can help to create a mood, but they aren’t a good choice to convey important information. 

Patterns, rhythm and shapes used repeatedly can unify a design. 

Images

Photography is often the best choice for images. Image style should be consistent with the website brand and the experience you want users to have and the style should be unified throughout. It gives a polish that's difficult to achieve with illustration.

White Space

Show only what is essential in the design, with plenty of space to keep it uncluttered.

Movement

            Make sure design languages move logically and smoothly from one area to the next. Consider ways to lead the visitor through the design and anticipate their habits as you choose visual elements. 

Overall

            When you've finished a design language, step back and look at it as a whole and make sure the elements relate to each other and look like they are meant to go together.  


« Previous | Next »