The art of wireframing: A guide to getting started

Wireframing, one of the initial stages in the design of a software project, is a crucial phase in ensuring the success of a software or web project.

It's the art of converting an idea into a visual diagram that can be easily shared with others. More concretely, wireframes (also known as wireframes, wireframes, sketches or sketches) serve as preliminary representations of the possible appearance of a software project.

Particularly useful in the start-up phase of a software project, this practice offers a privileged method for efficiently defining the functional design of a user interface.

The benefits of wireframing

Unlike perfectly realistic mock-ups, wireframes encourage simplicity. They do away with branding, graphic design and other non-functional details. The focus is on the essential, the functional, without concern for aesthetics. This approach has two main advantages:

The exercise is accessible to all, including non-designers and non-technical people.

The exercise encourages speed, which favors rapid iterations.

Objectives of wireframing

In summary, the main objectives of wireframing are to

Facilitate communication of concepts via visual aids.

Simplify the breakdown of a system into screens and their interconnections.

Encourage reflection on functionalities adapted to specific screens.

Represent functionality in a way that avoids design distractions and superfluous details.

The essence of wireframing lies in mastering its approach. While there are no immutable guidelines for wireframing, our experience in creating wireframes for software projects at Witify has enabled us to identify a series of recommendations based on our best practices.

Low-fidelity and high-fidelity wireframes

Low-fidelity (lo-fi) wireframes

Low-fidelity wireframes are a quick and efficient way of visually sketching a user interface. As their name suggests, these sketches do not require great precision in detail. They are often recommended for those new to web design, aiming for simplicity. They can be created traditionally with pencil and paper, or via online wireframing applications.

Here are the main features of low-fidelity wireframes:

A sketch illustrating the basic idea.

The ability to share concrete concepts quickly.

An invitation to discuss the project's potential, bearing in mind that it's not yet the finished product.

High adaptability of components (for example, choosing between a button and a link).

Reduced level of detail; text and images are often represented by placeholders, i.e. reserved empty spaces (e.g. simple lines or squiggles).

The use of fictitious texts such as Lorem Ipsum for placeholders, emphasizing that the aim is to conceptualize rather than finalize content.

Visual documentation of ideas - at this stage, there's no room for error.

High-fidelity wireframes

High-fidelity wireframes offer greater precision and are more closely aligned with the envisaged final design.

These wireframes are typically the work of experienced UI/UX designers or skilled front-end developers. They usually succeed low-fidelity sketches, enriching the latter with more detail and specific elements.

Characteristic attributes of :

Although they do not constitute the finished product, they provide a very close representation of it.

They offer an anticipated vision of the possible rendering of the finished product.

They are often highly interactive (e.g., navigation between screens).

They integrate real text, authentic components and realistic (or near-realistic) images/photos.

They require less interpretive effort to understand (which has its advantages and disadvantages).

Depending on the specific needs of your project, opting for high-fidelity wireframes may be a wise choice. For example, for a customer with precise visual expectations who has already shared his aesthetic preferences, it may make sense to opt directly for this more detailed approach.

However, it's important to remember that the main objective remains to highlight functionality. In many cases, more summary wireframes can effectively fulfill this mission, with considerable time savings and fewer decision-making prerequisites.

Guide to creating wireframes

Step 1: Define essential screens and functionalities

Just as when you sketch the plans of a house, first identifying its various rooms, the first step in creating wireframes is to think about the various screens required for your application or software.

It's sometimes advisable simply to pick up a pencil and start sketching straight away (and for those comfortable with this approach, this step can be omitted). Nevertheless, drawing up a preliminary plan can be beneficial.

Let's take the example of designing a wireframe for a basic software project, such as a bidding and ordering system. We might identify an initial list of screens and functionalities as follows:

Don't worry if the exact location of items escapes you at the moment. For example, should the "View transactions" functionality be integrated into the "Customer account" or in the "View order" section? The important thing is to record all the concepts that cross your mind, as well as your thoughts on their potential organization, whether on paper or digitally.

Step 2: Choose a layout

When you're working on wireframing, whether for custom software, a web application or a mobile app, it's a good idea to start with a basic structure or common canvas for all screens.

In the case of cloud-based custom software, choosing the layout means determining the location of the main navigation bar (either at the top or on the left-hand side, for example). For a mobile application, this may mean opting for a tab bar at the bottom for navigation, or a drop-down menu on the left-hand side.

By exploring other software and applications, you can find inspiration for the layout that suits your needs. There are a few typical structures, such as those mentioned above.

Like the previous steps, nothing is definitive, and wireframing is intended to be a creative and visual process. It's always possible to modify your approach.

Tip: Although it's possible to revise your choices, we've found that it's beneficial not to get too lost in the details at the outset. Try to finalize a draft wireframe before considering any adjustments. Remember, the important thing is functionality, not just aesthetics.

Below are a few examples of different interface layouts.

Step 3: Screen by screen (most important first)

While it's intuitive to start with the home interface as the main page, it's not always the most representative of the rest of your software. Ask yourself what interface is absolutely necessary for the application or software to function. It's a good idea to start with this interface and work your way up to the 2nd most important interface and so on - using an iterative approach.

When working on paper for your wireframing, use one page per screen/interface, and don't hesitate to enlarge your drawings as much as necessary. You don't have to reduce your drawings to the actual screen size of a mobile device.

Here are a few tips for your sketch:

Start with the outline of the container (representing the space of the navigation or mobile screen).

Leave a margin around the outside (for annotations).

Limit the use of a single color to avoid unnecessarily complicating the wireframe.

Represent visual elements such as paragraphs of text with simple lines or squiggles.

You can add actual text if you wish, but don't spend too much time thinking about it.

Represent images as simple boxes containing crosses.

Leave plenty of white space around the elements.

Step 4: Annotate

Once the basic pages are complete, there are usually interactions that can't be represented visually. Annotations are useful for communicating the different functions of wireframes.

That's why it's a good idea to leave a margin around your wireframe, so you can easily draw arrows and annotate any additional features whose function you feel you need to communicate.

Here are some examples of annotations:

"[This link] refers to the user's profile page"

"This form only appears if the manager is assigned to the project"

"This button sends an automated e-mail with the PDF attached".

Step 5: Iterate

As with writing, it's often easier to produce a wireframe by writing a first draft, then refining it through several iterations later.

Instead of spending an hour meticulously choosing the location of a button, draw it somewhere and know that you can always come back to it.

Recommended wireframing tools

Pencil and paper

Everyone has access to pencil and paper - it's easy and flexible. Pencil is preferable to pen because you can erase it, otherwise you risk using a lot of paper.

Figma

There are lots of online tools, but we recommend Figma because it's free and very easy to learn.
We recommend keeping it simple at first. However, if you want to speed up your sketches, we recommend this library from the Figma Community: https: //www.figma.com/file/GBC... With its 50+ components and reusable elements, it's a good starting point for iterating quality wireframes quickly.