Process:
The graphic design part of the project is usually the client’s favorite. Due of the emotional impact of visual design, it generates the most excitement.

The overall process usually breaks down in the following manner:

• Initial design sketch/exploration – Taking what the lead designer has learned in the Strategy phase, they explore themes and motifs using tools like Mood Boards, which define high-level design impressions. This helps keep the design team on the same path when asked to develop their own unique design directions.
• Design Directions - Three or four wireframes, chosen for their ability to display the greatest range of unique content, are given to the lead designer and the assisting designers to come up with two to three design directions. All the direction are based on the same wireframes, but they all should create very different emotional reactions in the audience through a unique usage of color, typography, imagery and texture.
• Refinement – A single direction is chosen and refined by extending the system through designing additional web pages.
• Style Guide – Once the design system has been appropriately defined, it is documented in a style guide. The style guide, which contains information about color choices, layout templates, font usage, style sheets, and other design elements, is used by the front-end developer to build out the complete launch-version of the website. The style guide is then kept as a guide for future content developers when additions to the website are needed.
  

Paper is Cheaper than Code
For the most part, it’s critical that the design system be finalized before going into Front-End coding. As a rule, it is much easier for the graphic designer to change their mock-ups in Photoshop than it is to change the design system after it has been coded into actual webpages. To continue to go through rounds of visual design tweaking when it is in the coding stage can be very expensive in time and resources.

Note: There are arguements that technology can make rapid refinements to visual design with the widespread adoption of CSS and other technology that allows a developer to make a change in a single location that affects all web pages in a site. While in some cases this is true, a team must be extremely selective when allowing design revsions to occurr after developement has started.

Graphic Designer: Traditionally there is a lead designer on a project who directs the overall design initiative. Secondary designers will assist with the design directions and flesh out a final style guide. Art and creative direction may also be included to offer vision and guidance

Strategy Brief which includes business goals and audience profiles - If the design is supposed to make an emotional connection with the audience, the designer needs to understand who that audiences is made up of.
Sample Strategy Brief 4.1mb
Persona Example 82kb

Client brand, marketing and design guidelines – Traditionally, most clients have existing brand standards that should be closely adhered to when designing the look-and-feel of a new website. This ensures the website maintains proper brand messaging and fits within the larger design system of all the client's collateral and communication assets.

Wireframes from the information architecture - This gives the designer an understanding of what elements they need to accommodate in their design, the visual hierarchy of the elements and the UI functionality that requires visual treatments.
Wireframe Example 678kb

Editorial strategy – A good design often tells a story. The story of the visual design and the editorial strategy should be in sync.

Mood Boards: Mood boards, sometimes called “Inspiration Boards”, are usually free form collages of images, colors, and typography. They are meant to evoke a mood or impression rather than represent a refined design direction. They are used to narrow the design options to a specific “neighborhood” of colors and concepts. Mood boards can usually be quickly generated and gives the project team something to discuss and come to consensus around before jumping into the full design effort.

Mood Board Example 401kb

Design Directions: The initial design presentation of a website project is usually made up of multiple design directions. The design direction effort starts by taking two (2) to four (4) wireframes that have been determined to best represent the breadth of website experience. This single set of wireframes are given to a two (2) to three (3) designers who then generated their own individual design direction based on the mood boards (if available) and the elements represented in the wireframe documents. These directions are presented to the client who then chooses one direction as the look-and-feel of the new website.

Design Direction Example 386kb

Style Guide: The style guide is a document that contains the rules and guidelines of the new design’s visual language. The use of font, color, functionality, alignment, photography, iconography, etc, all combine to make a design system that must be executed consistently throughout all pages of the website. The style guide will assist the front-end developer with the initial build of the website and it will guide the client when future pages are created after the initial launch.

Style Guide Example 7.1mb