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.
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.
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.
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.