Balsamiq wireframe example

What is mockup software for?

Mockup software is a handy tool that you have to count in your toolbox when embarking on a website creation project. It is this type of software that will allow you to design the functional models or wireframes of the pages of your site.

Functional models do you say to me ?? In two words, the functional models or wireframes are used to visually represent all the elements which must appear on a page (titles, texts, images, buttons, …), as well as their size and their location on the page.

Of the interest of modeling

Functional mockup is an essential step because it forces us to ask many questions to refine the structure of your future website, the internal organization of the pages and their mesh. The fruit of your work will then be sent to the web designer, who will use it as a working basis to create graphic models of your pages.

Providing wireframes specific to your web designer will simplify their work and allow them to focus on graphic design where their greatest added value is supposed to be. This will also save you some unpleasant surprises when discovering your first graphic models.

Wireframe mockup

Making your wireframes becomes child’s play

Most mockup software is very simple to use and easy to learn. You have a set of basic components to place, size and dress to gradually compose your page. The interfaces are purified and intuitive and sometimes offer drag and drop to make your task easier.

This software can be presented in installable version as well as in SaaS version, executable online. Many of these softwares are free or offer at least a free trial version (often online) to get your own idea.

Website creation – Personalized price estimation

Websites Are Us has developed a recommendation engine which allows you to obtain a free detailed price estimate as well as a selection of software and providers adapted to your website creation needs.

Why use mockup software for my models?

You can certainly make your functional models on paper or make a roundabout use of software like power point, but mockup software has many advantages:

  • They allow you to work at scale and to have a real visual representation of the final appearance of the pages of the site.
  • They offer standard components that are easy to customize and save considerable time.
  • They allow you to duplicate the structure of a wireframe to save time when two models are quite similar.
  • The rendering of the wireframes being very close to a drawing, the mockup software forces us to focus on the functional aspects of the model without wasting time on its graphics.
  • A wireframe created with mockup software is very simple to develop.

From simple wireframe to site prototyping

Mockup software can actually be more or less rich in functional terms. Some mockup software only allow very simple wireframes, close to the drawing. Others offer a much wider range of services, allowing you to design everything, from the most stripped-down model to a real prototype site allowing you to navigate from one page to another!

Personally, at Websites Are Us, we mainly use Balsamiq, a SaaS modeling software. Getting started is fast and it is ideal software for making simple and complete models. Another plus is the wealth of documentation on Balsamiq for users.

Find the mockup software you need

Our favorite software:

  • Balsamiq: A very simple software to take in hand, whose elegant rendered pencil allows to detach completely from aesthetic considerations while offering a certain degree of customization.
  • Cacoo: High performance online software particularly suited to collaborative modeling projects. Cacco was also designed to facilitate the creation of diagrams of all kinds.
  • Axure: Software that covers the entire spectrum of modeling: from the most refined wireframes to the most advanced prototypes. It is one of the most complete tools on the market, the price of which, however, is more intended for professional users.

Small selection of other free mockup software or free trial version:

A more exhaustive monitoring of mockup software is offered on the SocialCompare website.

Are you looking for a simple / free solution to create a website?

Discover Wix, the reference software to easily create a website.
One of the best solutions on the market.

A glossary of concepts in modeling and prototyping

Zoning

When we work on the zoning of content elements of a web page, we will roughly schematize all of the content elements that we want to appear on the final page. This is a decisive step since we will try to determine the definitive place of certain elements, such as the location of the logo, or the arrangement of the blocks (Ex: The News block on a blog home page). Zoning can possibly be the subject of AB Tests, in order to test several layouts and decide which will be the most suitable for the user journey.

The wireframe

This is the step that comes right after the zoning. We will determine the content that will appear in the blocks. This will help structure the interface. At this stage, we play more on the functional aspect than on the design aspect.

The model

Once the content elements are arranged, you have to think about linking them. The model will integrate the interactive dimension into the web page. There are many possibilities: linking pages together to simulate navigation on the site, inserting external links, image carousels to represent the page’s animations, etc. We gradually integrate the design. During this step, we will realize the potential inconsistencies in the user journey.

The prototype

The prototype aims to test different solutions or technologies allowing the final realization of the website. We are going to talk about a disposable prototype when we test a certain number of different technologies, or else an evolving prototype when it constitutes the start of the final application.

Your personalized price estimate in 2 minutes

Websites Are Us has developed a recommendation engine which allows you to obtain a free detailed price estimate as well as a selection of software and providers adapted to your website creation needs.



100% free