Pine
Designer desk with website wireframe sketches

Sketch vs Wireframe vs Mockup vs Prototype: A Complete Guide

Sketches, wireframes, mockups and prototypes are essential deliverables; however, outside the UX space, few understand precisely what each one is, the processes that go into their creation, and their role in the design process. To clarify common misconceptions and get you up to speed, in this article, we’ll answer the what, why, how, and when of each.

Sketch

Sketches are rough, hand-drawn illustrations representing a product’s design concept in its most raw and basic form. Usually drawn on paper, they allow designers to visualise and effectively communicate ideas with team members in a fast, cost and time-efficient way. Sharing sketches early on fosters a collaborative environment from the get-go, enabling team members to provide vital feedback, help iterate and refine early ideas for the next stages of the design process. 

Tips & Tricks

  • Suppress your inner Picasso – You’re communicating an idea, not creating a masterpiece for an art gallery. All you need is a pen and paper, leave aesthetics and details to the later stages.
  • Set time constraints – Try the crazy 8’s technique, in which you have eight minutes to sketch eight different ideas to tackle a problem. This will help you focus on the essential aspects of what you’re trying to communicate and keep things concise.
  • Document Your Sketches – Take photos of your designs. These can be valuable when presenting work and act as an artefact for inspiration later on. 
  • Don’t spend ages refining every little detail – Things like features, location and copy of buttons don’t matter at this stage. The goal is to create quick concepts that effectively communicate your idea and provide a focal point for collaborative brainstorming. 

Useful Tools & Resources

Tutorials – Sketching Techniques Video Tutorial

Tools – Sketching Templates | Digital Sketching – Procreate


Wireframe

Wireframes are design artefacts that show the basic U.I., functionality, information architecture, layout and organisation of content on a website or app interface. They’re a cheap and efficient way to get crucial feedback from team members and potential users.

Depending on your business or clients requirements, you can either create low or high fidelity wireframes. Both serve the same purpose, the difference is that low fidelity wireframes are static, display the basic layout and information architecture of a website. In comparison, High fidelity prototypes provide more detail on aesthetics and sometimes include clickable elements.

Tips & Tricks

  • Create and share them early – Creating and sharing them in the early stages of the design process will give you time process critical feedback and make improvements. Helping you make more informed design-related decisions, saving time and money down the line. 
  • Get the team involved – Working closely with team members when wire-framing can help you get all stakeholders in the loop and also allow them to provide vital feedback to help shape the overall design direction. 
  • Be comprehensive – Create wireframes for all the possible screens and scenarios your users will encounter. E.G., What if they lose a password or the system can’t load a page or an error. Thinking about edge cases will help you see the whole picture more holistically. 
  • Don’t spend too long or rush –  The time it takes you to create wireframes depends on your project’s complexity and individual situation. If you are wire-framing as part of a design sprint, it should only take you a few hours. However, if you are dealing with a complex product that requires you to deliver high-quality wireframes for 200 screens, then it will take you much longer. 
  • Add Annotations – Adding snippets of information on specific elements can clarify and make your wireframes easier to understand for others involved in the design process.  

Useful Tools & Resources

TutorialsWire-framing on Adobe XD | A Beginners Guide on Wire-framing

ToolsAdobe XD | Figma (Free) | Just in Mind (Free)

a visual graphic displaying the wireframes for all of the screens on a website
Here is an example of the final wireframe file on AdobeXD that we created for a client a few months ago. 

Mockup

Typically created in the design process’s visual design phase, mockups are static, mid to high-fidelity visual representation that provides a more realistic picture of the final product. They’re excellent tools for presenting, evaluating and getting feedback on detailed design elements such as information architecture, typography, sizing, coloring, and iconography. 

Tips and Tricks

  • Cover all bases – Keep in mind this is a mid to high-fidelity version of your product. Be sure to include all of the elements and details you want to see interact visually. Adding and getting feedback on the smallest details now will save you the time and inconvenience of having to make substantial iterations down the line. 
  • Ditch the dummy text – Filling text containers with lorem ipsum saves time initially, but when you replace it with the actual text, it can cause issues in the organisation and layout of elements—leading to an unclear and messy aesthetic. So always try and finalise some text.
  • Show it Off – By sharing mockups, you give key stakeholders an oppurtunity to critically evaluate and provide feedback on the work you’ve done. Helping you identify and fix any issues early.
  • Experimentation is Key – Like with most things, you won’t create a final mockup in your first attempt. By exploring and trying out various ideas, you’ll likely create something better than focusing on one. 

Useful Tools & Resources 

Tutorials – How to Design a Mockup in Photoshop 

Tools –  Photoshop | Sketch | Figma | Free Mockup Tools 

Get inspiration – Dribble | Behance 


Prototype

The indicative blue lines describe the relationship between the visual element and the screens

Prototypes are elaborate mockups with interactive elements that most closely resemble the final product. They allow teams to get useful feedback, assess their designs’ functionality, and highlight usability issues that need fixing before going into the development phase. Like wireframes, you can choose to create either high or low-fidelity prototypes depending on your clients’ requirements or business circumstances. 

Tips & Tricks 

  • Low or High Fidelity? – If you have time or budget constraints and a product that doesn’t have many critical interactive elements, go low fidelity. However, if animations and complex interactive features are an essential part of the user experience, then go high fidelity. Remember, your prototypes goal is to provide an experience closely resembling that of the final product and to get accurate feedback, so choose accordingly. 
  • Go Coded – A lack of clarity on designs’ technical feasibility often causes a slowdown in the implementation and delivery of products. However, creating coded prototypes can reduce this risk of problems and help speed things up. 
  • Make sure to Debug – Prototyping is a time-consuming process, so before you begin testing, be sure to spend some time find and fixing any bugs that might affect the interaction flow and hinder the feedback you receive. 
  • Don’t spend too long – Remember, after making a prototype, you’ll be testing it with users, so be efficient with your time. Depending on the fidelity, a prototype should ideally take you 2-6 weeks to build. Anything more than 90 days indicates that your idea is too big and may need refinement and focus. In some cases, you might only need to test a specific part of your product, so don’t waste time prototyping the entire thing. 
  • Teamwork is dreamwork – If you have the resources, getting several team members involved in this process can help get everyone on the same page, create feedback opportunities, and minimise errors to help you deliver high-quality prototypes. On the other hand, you could slow down the process and be putting more people on a task unnecessarily. 
  • Create a Design System – Working with high-fidelity prototypes will require you to create and manage a massive amount of visual components and elements. Organising them in a system for re-use with clear standards will make the design processes more efficient and ensure that your future designs maintain visual and conceptual consistency. Find Out More

Useful Tools & Resources 

Tutorials – Beginners Guide Prototyping in Sketch Prototyping in Adobe XD Prototyping in Figma 

Tools – Adobe XD | Sketch | Figma | Just in Mind

Get inspiration – Dribble | Behance 


Final Word

Hopefully, after reading this article, you have a much better understanding of these deliverables. Although the diagram above shows their order in the design process, it’s important to know that you don’t have to do every single one. Choose wisely based on the stage you’re at, budget, and project goals. If you have any specific questions that we could help you out with drop us email – INFO@PINE.DESIGN.

Laura Brazay

Laura Brazay

Digital branding specialist with experience in social media strategy, and a background in Business Administration, who sees life in the full spectrum of colours. I spend my free time taking long walks exploring the city with my pup.

Add comment