What is a wireframe? Part 2: Wireframes vs Mockups
Wireframing is a crucial phase of the web development process. Designing a website without a wireframe is like building a house without a floorplan. We know what are wireframes and why they are important in web design, but how do they differ from mockups?
Often people will use the terms wireframes and mockups interchangeably, but this is incorrect. In this article – part two in our three-part blog series on wireframes – we explore this important distinction.
What is the difference between Wireframes and Mockups?
A website wireframe is about layout and functionality. It can be anything from a simple sketch of your home page to a more precise, grid-based layout using a prototyping tool like Pidoco, Balsamiq or Axure.
Importantly, a wireframe is presented without colour, images, typography or logo so that you can focus solely on usability through the size and placement of page elements, site features and navigation.
In contrast, a mockup is a realistic representation of what the website will look like. While wireframes provide the layout and function of the website or app, mockups provide the appearance of the final product. They include imagery, colour and typography.
Typically, mockups are static design representations that encourage people to review the visual side of the project. Wireframes lay the foundation while mockups add visual richness. Both are used to generate constructive feedback prior to the site being built.
What about prototypes?
Sometimes, you need something realistic to try out your ideas before making significant investment. Prototyping software lets you discover which ideas are good and which are not, and if users can figure out the process and components easily. Prototyping isn’t always necessary in the design phase, but can provide huge benefits in complex apps.
Looking for the right wireframing tool?
In part three of our blog series on What is a wireframe? we provide a list of popular wireframing tools. So, stay tuned to the iFactory blog or our Facebook page or LinkedIn profile.At iFactory, our team uses wireframes as the foundation of all our web designs. To find out more about our web design process or to find out how a stylish and intuitive website could drive your business further, contact our team today on 07 3844 0877.
