If you have been part of a web development project, you will be familiar with the phases of a website build including wireframes and mockups. After the website content is sorted into an architecture designed to map the way that site users will interact with the site, the next steps will give you a sense of how the flow of information comes together.
Step 1: Website Wireframes
The purpose of a website wireframe is to demonstrate a site’s layout and function. The wireframe is an intentional framework graphic showing the placement of images with placeholder boxes and the ideal amount of text depicted in Greek copy. The reason for inserting this step into the creative process is that without image choices or actual photos, you can see the way the site works without distraction.
Getting approval for the navigation stage before adding in look and feel removes the potential for larger structural revisions, which can save a lot of unnecessary production overages (⏱ = 💵 ). Wireframe schematics are part of any large web build, sites that have complex navigation, and are recommended for tight timelines.
Step 2: Visual Mockups
The visual mockup is the production step that shows look and feel of the website. Mocks are the visual tool to show font choices and typography recommendations, image suggestions, and the use of space within the website. Typically, a web designer will mock the home page and a few interior pages to provide the range of graphic looks.
Our team builds mockups in Adobe software or Sketch, because it’s easier for these graphics to be imported into prototyping software. This is the final step to provide the client with a complete picture of the intended user interface and user experience. Once mockups are approved the web developer can begin applying code to the graphics to complete the production process.
Step 3: Interactive Prototypes
Interactive prototypes mimic basic functionality of a real website by using the high-fidelity visual mockups to add animation, gestures and transitions to a static mockup graphic in minutes.
This step is the hybrid of what the website wireframes and visual mockups are intended to show: how the visuals look and how the site performs (to an extent). Interactive prototypes allow a web designer to upload graphics and provide a link, so the client can click around the connected graphics. This step is so vivid that it is common to have clients give feedback because they are under the impression that the site is fully coded.
Implementing these production steps shares the vision and heightens communication, creating a smoother process between all project stakeholders.