In episode four of my YouTube series, I aim to clarify the design phase of the web design process for anyone looking to build or redesign a website. In the video, I share how I go about creating high-fidelity mockups, what this step entails and why it is a vital part of the process.
The high-fidelity web design mockups (also known as prototypes) serve a couple of essential roles and ultimately help us to save time (and money) for the website project.
If you neglect to complete this step, extensive revisions will likely be required after the website is built
The first role they serve is helping to unite key stakeholders in the company around the final design of the website. This includes text content, imagery, video, typography, visual hierarchy and other visual elements that contribute to the user experience (UX) of the website.
Unlike sketches and low-fidelity mockups that are part of the initial content design phase, the high-fidelity mockups provide a very clear picture of what the final website will look like. These mockups provide a much more tangible and relatable presentation of the final product which will help stakeholders to give feedback and final sign-off approval.
If you neglect to complete this step, extensive revisions will likely be required after the website is built, which is much more labour intensive than revising during the design phase.
These mockups also act as blueprints for when I'm building out the website in the final development phase of a web design project. That means they should be as close to fully finalised and signed-off as possible. This will help ensure I don't have to make content or design decisions on the fly while building the website.
If I'm handing over the build to a developer, I would also include a handover wireframe that outlines essential aspects of the website's UX. In this document, I would note what needs to be developed for elements like input controls, navigation, user actions & system responses, and rules that need to be integrated into the back end.
By getting the high-fidelity mockups (and wireframes) finalised and signed off before launching into the build phase, we're ensuring that the road to building out the website will be obstacle-free.
Whether it's your first time working on a website build or you're a seasoned pro, my five-part video series outlines the most important steps in any web design project, taking you from start to finish in a way that is easy to follow. Make sure you check out the first, second and third videos before you watch the fourth video below:
