Wireframes, mockups and prototypes
18 Oct · 4 min read
A lot goes into creating a website or an app. Even before writing a single line of code, designing the wireframes, mockups and prototypes play an integral role. Hence, to create a good and viable design, it is crucial to understand these elements.
Wireframes
A wireframe is a blueprint of your website or app. It consists of the basic elements involved and the logic and structure between them. A wireframe is mainly composed of simple shapes like rectangles and circles to depict the elements. It is ideal for use during the brainstorming stage.
Low-fidelity vs high-fidelity wireframes
Low-fidelity wireframes are extremely basic, static designs made on paper or a simple design tool. In comparison, high-fidelity wireframes are built using professional wireframing tools and usually include some simple interactive simulations.
How to create wireframes
- Sketching: Sketching your wireframes can be handy during brainstorming sessions when you want to visualize your idea. But due to the lack of details, they aren’t as useful in presentations and discussions.
- Professional software: These have a lot of features to better visualize your design. Software like Adobe XD, Balsamiq, Pencil and Wireframe CC are some of the leading wireframing tools used today. Here’s what a wireframing tool might look like:
Benefits of wireframes
- Wireframes can be built very quickly
- Creating a wireframe is cost-effective too. While sketching might not cost anything, even most of the professional tools are quite affordable.
Mockups
Mockups have a slightly more visual appeal than wireframes. They provide a better and more realistic view of the final product by incorporating elements like buttons, colours, graphics, etc.
How to create mockups
- Design tools: A lot of design tools like Photoshop for Windows or Sketch for Mac have the capabilities of creating wonderful mockups.
- Mockup tools: Softwares like MockFlow are specially created for building mockups.
Benefits of mockups
- The design can give a more realistic view of the final product.
- They give better clarity for discussions regarding specific elements.
- They are easy to create and test, as they don’t take as long to make as prototypes.
- They give a more detailed look that is easier to understand.
Prototypes
A prototype provides a more interactive representation of the final product. The look and interactions are simulated to provide a better understanding of the end product. These can also be then shown to potential users or clients for testing or feedback.
Low-fidelity vs high-fidelity prototypes
Low-fidelity prototypes are ones made on paper. Unlike low-fidelity wireframes, these incorporate screens, colours, elements, etc. to make it more interactive.
High-fidelity prototypes are usually digitally created and have high-quality visuals, content and interactions that can be used for user testing.
How to create prototypes
- Paper prototyping: Paper prototypes might involve multiple pages to denote individual screens. Interactions can be simulated and screens can be changed based on the user’s choices. This might require a lot of imagination to understand and execute.
- Presentation software: Programs like PowerPoint for Windows and Keynote for Mac can be used with multiple slides to simulate UIs. Slides can be linked to each other and animations also can be used.
- Design software: Design tools like InVision and JustInMind are ideal prototyping software. Here’s what a prototype built in JustInMind looks like:
- Native prototype: Technologies like Java for Android, SwiftUI for iOS and HTML/CSS/Javascript for a web application can be used to create native prototypes. These require strong technical proficiency but result in highly realistic prototypes that can be used to get user feedback.
Benefits of prototypes
- Prototypes are a great tool for validation. They can be used for user testing as well as for getting realistic feedback at an early stage.
- Designers can use prototypes to find design preferences from target users before launching the product.
- Prototypes can be used to demonstrate the product to clients, investors and stakeholders.
Wireframes, mockups and prototypes are three ways of building preliminary versions of your software product. Each of these has its pros and cons so selecting the right one lies solely on your requirements, timeframe and budget.
Author: Fátima De León
written by
SHARE
Comment as
Login or comment as
0 comments