Upon approval of the site map, we move on to design. The design phase consists of two major parts:

Wireframing

A wireframe is a rough sketch of how the pages of a site will be laid out. At this point we consider what's on a page, such as headlines, paragraphs, lists, calls to action, images, and where they go, but not necessarily how they will look or what they'll say yet. A completed wireframe provides the general structure and elements of a page. Since the wireframe consists of only boxes and placeholder content, revisions can be made very easily and rapidly. Generally only the unique templates are sketched out, such as the homepage, product page, blog entry page, and general content page, to avoid unnecessary repetition of very similar layouts. For example, your site may have 20 articles, but each article will follow the same general layout, so it's unnecessary to sketch all 20 pages.

Wireframe Example 1
Wireframe Example 2

Graphic Mockup

After the wireframes are approved, the more time intensive task of the graphic design gets underway. This is where we select fonts, colors, backgrounds, images, and anything else that will be on the page. These are usually laid out down to the pixel and delivered as an image file, so you'll get a very good idea of what the completed site will look like and how the elements on the page will work together. Content is not yet finalized since we're more concerned about how things look rather than what they say. The goal is to produce a set of mockups for the developers to produce the website from.

Website mockup example