Skip to main content

Sketch, Wireframe, Flowchart, Prototype, Mockup – What is the difference?

    Build your next product with a team of experts

    Upload file

    Our Happy Clients

    I have worked with Itera Research for many years on numerous projects. During this time, the team always exceeds my expectations, producing amazing tools for our customers.

    Founder, eDoctrina
    Founder, eDoctrina

    To find out more, see our Expertise and Services

    Engagement Models

    Staff Augmentation

    Avoid the overhead costs of internal hires by adding Itera Research experts to your existing team


    Software Outsoursing

    Focus on your core business while we handle the development and delivery of your software product


    IT Consulting

    Leverage our CTO-as-a-service to strategize and solve your biggest technical challenges

    Sketch, Wireframe, Flowchart, Prototype, Mockup – What is the difference?

    We discovered that the majority of outsourcing software development providers, as well as non-designer customers, use certain terms interchangeably to describe design deliverables. Mockup is confused with wireframe, prototype with MVP, and sketch with wireframe.

    The problem is that a misunderstanding in communication may lead to suspension of a business partnership, wasted time and lost money, damaged reputations and other unwanted consequences for both clients and service companies.

    Let’s discuss design terminology to clear up the differences.

    Sketch

    A sketch is a simple drawing made by hand on paper. This type of design representation has the lowest fidelity (lo-fi).

    Wireframe

    A wireframe is also a lo-fi representation of a design made using a special computer program or online editors. According to a CreativeBLOQ review published in January 2016, the three best wireframe tools are Balsamiq Mockups, Axure and Pidoco.

    A website wireframe is a visual guide that represents the framework, or skeleton, of a website – usually in black/gray/white tones.

    Wireframes are typically used as the documentation of the project and are aimed at answering the following questions:
    What? – Main blocks of content
    Where? – Placement of the content blocks
    How? – Description and basic visualization of the user–interface interaction

    Wireframes allow the team to focus solely on the “big picture” before diving into the details. A well-created wireframe communicates design in a crystal clear way and sets a path for the whole team.

    Flowchart (Use flow)

    A flowchart, or use flow, is a visual representation of the sequence of user steps needed to perform a process and reach a website goal. For example, the aim of an ecommerce website is to sell a product, so the flowchart for that website should show the ways in which a visitor can buy the product. Moreover, a flowchart demonstrates connections between pages. Creation of a flowchart is a very useful practice in UX projecting and the cost of doing so is affordable.

    Prototype

    A page prototype is often confused with a wireframe, underestimating its abilities and with MVP overestimating them. A prototype is a middle fidelity, black/gray/white representation of the final product aimed at testing the main interactions in a way similar to the final product.

    Be aware that prototyping is a rather expensive and time-consuming form of design communication.

    Mockup

    Mockups are often confused with wireframes, due to how some software companies are named, especially in the CIS market. A mockup is a high fidelity, static, full color design representation. It demonstrates, in a static form, the visual side of the project according to the structure of information and the basic functionalities.

    Summary

     

    A sketch is the roughest representation of a design, typically done by hand. Wireframes, flowcharts, prototypes and mockups require special software and the relevant knowledge and skills. When talking about costs and time required to complete, these aspects increase as you go from a sketch to a full mockup.
    Think which deliverable will be most appropriate for you. What will work best for you at this stage? Formal documentation? Or quick informal sketches and face-to-face discussions?

     

    Sincerely,

    Itera Research team

    Next Post
    Optimize your online presence to attract, convert and retain customers
    Next Post
    4 Tactics for Overcoming Job Burnout