Wireframes are the first step in the requirements and layout processes. They ensure all required features are accounted for and the best arrangement of information on the page before the design process begins. By doing this first, a large amount of time can be saved.
Wireframes help strategize how the site is structured without the use of colors to distract its purpose. Sometimes a grey scale or one color gradient can be used to block out elements. All that is needed is shapes to represent the elements and labels as to what each shape represents. This will help get all elements needed for the site on the page and arranged in the best way. Every page of the website needs to have a wireframe. It is important to include all levels of the website; most designs only design two or three levels deep. An example is shown below.
Along with wireframes, moodboards are also presented. Moodboards show the typography, colors, and other design elements to show the client there will be more design elements incorporated.
Mockups combine all the previous stages of the build process and show what the actual site will look like —as close to pixel perfection as possible. Mockups are given to the front-end developers to code the page exactly as it appears. Mockups help to visualize the design and allow final changes or adjustments before the build of the site takes place.
Once the grid is chosen all the graphics and content are placed onto the page and arranged as the previous wireframe process specified. All the colors, typography, and design elements from the moodboard are incorporated. Elements are arranged as close to pixel perfection as possible on the grid. More information about grids. Examples of mockups are shown below.