close
Imran
Imran
Junior

Wireframing, Prototyping, Mockuping – What’s the Difference?

Are you wondering what this magical spell is? These are the stages of creating awesome designs. We’re here to tell you how to get the most of them!
 

from wireframe to website design

#1 - Wireframing

A wireframe is a draft of your UX/UI design or, as we call it, a low-fidelity (lo-fi) deliverable, that answers the questions:

 

  • What content will be there?
  • Where will it be located?
  • How will your users interact with it?

 

Bear in Mind Before Wireframing:

  • These drafts should be based on user research, not on the designer’s intuition :)
  • Their creation should take you a minimum of time
  • Everything should be simple and clear, with no details
  • Better use black and white colors for creating wireframes, use color arrows and links to show where your CTAs will be and to represent users’ actions

When Do You Need It

  • Wireframes are a good way to start developing a design idea with the team
  • They give your client a quick glance at how everything works
  • Wireframes can be used for further team work together with your client. So, you better use collaborative software, where all the participants can leave comments

Top Tools for Wireframing

​Surprisingly, we recommend using FlowMapp for wireframing! However, we do it not because we are the authors of this blog. :) First of all, we are designers too and know what people in this industry need. We're developing a flexible tool that we use with ease ourselves.

 

FlowMapp is a powerful solution that allows you to combine the creation of a sitemap, development of user flows and wireframing tasks into one system. It helps to see the website structure with the finished frames from a bird's-eye view, which ensures a neat information architecture of your project.

 

Now you can create wireframes using the Custom Page Covers tool by FlowMapp:

 

  • This feature has ready-made templates that can be customized
  • Wireframe Kit has 70+ screens you can use, 150+ basic symbols, and plenty of color schemes
  • All the shapes are vectors, so you can resize them as you need
  • It is compatible with Sketch and Figma if you need to develop prototypes based on created wireframes

 

Also, we have a fascinating announcement for all FlowMapp users! We are working on a big update that will make possible the A-Z wireframing process directly in FlowMapp. Stay tuned for more updates!

#2 - Mockuping

A mockup is a detailed static design representation. It may be a close-to-final draft or even your actual design. It shows:

 

  • The informational structure
  • The basic functionality (only in words, as this thing is still static)
  • Color schemes, fonts, and other details that were not shown in wireframes

 

what is mockup

Bear in Mind Before Mockuping:

  • Think twice about the navigation. Will your users intuitively know where to look for what they need?
  • Design a highly detailed interface with the whole brand identity package.
  • Some designers create black-and-white mockups, however, adding colors makes sense, as you will do this anyway during the next step.

When Do You Need It

  • If you need a demo version of your interface, but the clickable design is not ready yet.
  • You may use them as design layouts before customers send you dozens of amendments.
  • Finally, this is the stage for making final edits before showing a pre-release prototype.

Top Tools for Mockuping

  1. Mockplus is a tool for creating mockups on all popular platforms, even on mobile devices. It has a library of components and icons that you can use without any coding experience. Drag-and-drop design makes it fast to reach the final goal.
    The only drawback is that you can’t export the file created in the app, however, there are other sharing options to choose from!
  2. Moqups is a web-based platform tailored specifically to the needs of mockup creators who need real-time collaboration. It also offers free and paid versions, all with a simple drag-and-drop interface and access to icons libraries.
    This tool offers both import and export of your designs.
  3. Template Toaster needs to be downloaded to your desktop. However, it allows even newbie designers to easily create mockups of your future interfaces with pre-designed templates. The only thing to keep in mind is that this tool is suitable only for web designers, as there is no possibility to design an app interface.

#3 - Prototyping

A prototype is an interface simulator, a clickable medium-fidelity representation of your future design. In simple words, it is an interactive draft. It allows you to:

 

  • See how everything works in real life if everything is properly planned
  • Test if your ideas find reflection in users’ minds

 

prototype rules

Bear in Mind Before Prototyping:

  • Prototypes should represent the future design only with slight discrepancies (for example, buttons may not lead anywhere yet)
  • They must be colored, even if you made black-and-white mockups before
  • You may address developers for them to help you with the backend. Alternatively, there are apps that allow designers to create prototypes without coding

When Do You Need It?

  • Use prototypes after approving draft interfaces to test them with real users
  • Prototypes can show various user cases (behavior scenarios)
  • You can also keep them as the project documentation
  • You may discover whether there are issues that can be fixed before delivering the final design

Top Tools for Prototyping

  1. Figma is available for macOS, Windows and as a web editor. This well-known software allows creating prototypes that look like a real UI of a website or app. All you need is to set interactions between elements. The good news is that they offer a free version for one team, though it has certain limits. However, three editors are included.
  2. InVision is a web-based platform for creating prototypes of sites and mobile apps. It allows creating clickable UI representations from static images of any fidelity level. The studio allows layer styling, vector editing and animation. Also, the tool is free for personal use. If you want to collaborate with the team to exchange instant feedback, then a paid option will be needed.
  3. Sketch offers almost the same functionality in the web editor and its apps for macOS and iOS. Artboards with animated interactions show how everything will look in real life. Collaborative work and import/export of designs are available as well.

Bottom Line

So, you see that as the process goes on, you create sketchy drafts (wireframes), then static visualization (mockups), and finally, interactive pieces of design (prototypes). Next comes the real UX/UI, which is used for communicating the business values to people out there.

People also Like