Sam Diamond Design logo

Sam Diamond Design

Samples Design Process

Initial sketch of a website

Sketch

The first step in the design process is to create sketches of possible layouts and styles. These visual aids assist in communicating design ideas with the client. Done with a pencil and paper, the sketches are quick, easy to change, and inexpensive to produce. Major design features should be decided at this stage.

Wireframe layout of a website

Wireframe

Next, a wireframe is produced from the sketch. The wireframe is concerned solely with the layout and functionality of the design. Using a graphics program such as Illustrator allows elements to be easily rearranged. Other decisions such as color scheme and typography are left out of the wireframe in order to stay focused on the placement of design elements.

Mockup of a website's design

Mockup

Using the wireframe as a layout guide, a mockup is created to simulate the basic functioning of the site and try out color schemes, typography, and other design decisions. Depending on the site requirements the mockup may be static or contain limited functioning elements such as a search bar that returns a preset list of results. The appearance can range from something akin to the wireframe up to a nearly completed site.

Image of HTML code

Coded Site

Once the design decisions have been finalized with the mockup, the final site must be coded. Depending on the level of fidelity of the mockup and the complexity of the site, there may be very little or quite a lot left to do. Behind the scenes code such as SEO and analytics can now be added and any back-end functionality hooked-up or created.