Wireframes

Even the best designers produce successful products only if their designs solve the right problems. A wonderful interface to the wrong features will fail.

Jacob Nielsen

It would seem that the designs of websites or mobile applications at every stage look as if they were ready to be coded by developers. However, designers first create two-dimensional drafts of pages that allow planning the layout of the page and its functionalities. Designers call these drafts wireframes - they are simple sketches whose execution and modifications are quick, cheap, and allow avoiding high costs at later stages of work on a website or mobile application.

What is a wireframe?

Wireframes are a draft of a website or mobile application that allows you to design a visual mockup and then a prototype, i.e., the most complex project. Wireframes are simplified and illustrative page designs that should contain only:

· Layout

· Key functionalities

· Site navigation

· Information Architecture

Wireframes are often made in grayscale and use simple, geometric shapes. Depending on how the design team works, sketches are made using sheets of paper and markers (the fastest method) or in prototyping programs. The initial design is supposed to present only the page's most important elements, allowing one to understand the operation of the website or mobile application.

At this stage of work, all visual effects, i.e., fonts, colors, photos, and graphics that could distract attention from the architecture and functionality of the project, are abandoned.

There are two types of wireframes:

• Low-fidelity wireframes - they contain the simplest visuals and content.
• High-fidelity wireframes - they capture how the product looks and feels. Check the example of high-fidelity wireframes for our customers.

Good and bad practices for wireframing

Although wireframes are very simple sketches of pages, there are good practices in preparing initial designs. In this paragraph, I will only describe the case of low-fidelity wireframes, which are the initial drafts of the project. In more advanced wireframes (high-fidelity wireframes), all pages of a mobile application or website are placed, making it a more detailed sketch.

Good practices:

1. Focus on functionality, accessibility, layout, and navigation – wireframes should be transparent At this stage of work on the project, detailed accessibility issues, such as the contrast or font size, are omitted.

2. Structure wireframes in terms of Information Architecture – at this stage, the logic, structure of the page, and relations between the pages should already be defined, so at the next steps structuring the website or mobile application is easier.

3. Use short descriptions – they make it easier to understand and imagine what a given sketch is about. Wireframes have a very simple structure so it's worth adding a short description so that everyone who explores the sketch can understand it.

4. Creating a grid system – during the creation of wireframes, a layout is created using simple geometric shapes (squares, rectangles, and straight lines). Determining the location of graphics, photos, buttons, and text allows you to initially create a grid system, which, at the next stages of work, greatly facilitates the placement of elements on mockups and prototypes.

5. Sketching all pages and subpages – as already mentioned, wireframing is about quickly visualizing ideas. However, sometimes it's good to sketch out a design that includes all pages of a mobile app or website. This is to show the user flow, which is the most important part of the wireframing stage.

Bad practices:

1. Using colors, graphics, and fonts – wireframes design should be very simple and should focus on design functionality. Squares and rectangles replace and symbolize graphics, straight lines indicate the use of text, and the use of gray scale across all the layout suggest employment of different colors at the next stages of work on the project. Using targeted graphics, colors or fonts can distract attention from the essence of wireframes and create chaos. Design elements are introduced only at the stage of creating mockups and then prototypes.

2. Focusing on details – this is a reference to the previous point.Nevertheless, it is crucial to avoid adding everything that belongs to the final design of a website or mobile application. In some cases, logos, footers, or social media icons are added, but this is not necessary.

3. Perfection – wireframes are sketches, "skeletons" of the page. They don't have to be pixel-perfect and drawn from a ruler. The essence of creating sketches is their speed of execution, modification, and sometimes throwing the entire sketch into the trash.

How to create wireframes?

There are two ways to create wireframes:

1. Sketching – the simplest and fastest method, because it involves drawing a preliminary page design on a piece of paper. It is especially useful when discussing a specific issue and while brainstorming. In addition to blank sheets of paper, one can use them as ready-made templates for wireframing, on which the screen of your phone, tablet, or desktop is printed.

2. UX design software – there are many programs on the market for creating wireframes, mockups, and prototypes, like Axure, UXPin, Balsamiq, Figma, Sketch, or Adobe XD. The advantage of using such programs is the smooth transition from wireframing to prototyping.

The first method is strongly recommended when discussing a project or pressing specific issues. The second method, i.e., digital wireframes, is also used to document the project team’s work.

Examples of wireframes for websites in Figma >>

Examples of app wireframes in Figma >>

Advantages and disadvantages of wireframes

Like any working method, creating wireframes has advantages and disadvantages.

Pros for wireframing:

1. Simplicity of communication - wireframes are a tip for all designers working on the project. They show in a simple way how the application or website will be structured.

2. Focusing on primary elements – the main idea of wireframes is to present layout and Information Architecture. These two elements mean that the initial design is designed to consider all users' use cases of a mobile application or website.

3. Reference point - wireframes are the first drafts of the project and can be a reference point for all people working on it, not necessarily only for designers. In this way, you can estimate the time of work and its cost.

4. Correction of the first errors and missing points - wireframes have a simple structure, which allows one to notice conceptual errors at an early stage of design or missing elements, which can be crucial for good user flow. It can help avoid significant financial losses in the later phases of web or app design.

5. Wireframes are suitable for testing - this is debatable because it should be kept in mind that the appearance of wireframes may not be fully understood in user testing. However, if one uses them for guerrilla testing or other usability testing, users should know that it is only a draft of the project with its structure, so they can complete the final view with their imagination.

6. Wireframes can be suitable for presenting ideas to stakeholders - as with tests, delivering wireframes to clients can cause complications. The biggest challenge can be that stakeholders have to imagine what the final product would look like - a black-and-white sketch can raise objections. Secondly, wireframes are static, so customers would not be able to see how the final product will work unless we would use them to create prototypes. On the other hand, presenting wireframes to stakeholders may exclude major changes at subsequent stages of project development.

Cons for wireframing:

1. Wireframes are static - they are meant to show the information architecture, key pages, and navigation. Still, they don't show what's going on between the pages, the responses to actions, or how the navigation is going. To show the dynamics of the project, mockups or prototypes that are more refined in terms of visuals and dynamics are used.

Main differences between low-fidelity wireframes, mockups, and prototypes

These three elements are the basic steps in creating a project. Each of them plays a significant role. Although wireframes have been described in the previous sections, it is impossible to ignore the next stages when designing a website or mobile application.

1. Wireframe is a design sketch, often made with simple, geometric shapes imitating elements such as space for graphics, text, and navigation. Wireframing focuses only on the structure, the most important pages of the project, and user flow -  originally, they don’t have a dynamic view.

2. Mockup - this is the stage in which the project is expanded with visual elements like colors, patterns, imagery, and fonts but stays in static mode. Designers create the final appearance of the application in mockups without considering the very complex dynamics. At this stage, the project usually is shown again to the client to verify the assumptions and vision of the product.

3. Prototype – the final stage of design. Prototypes show the final appearance of the application or website, considering all their functionalities, dynamics, and data. The prototype allows us to improve it through user tests and further develop the project by verifying the assumptions. Testing on a prototype is extremely important. After this phase, it is difficult to implement fundamental changes, and they can be associated with higher costs.

Wireframes in the context of Information Architecture

In the context of wireframing, it is worth mentioning Information Architecture, which is the most critical element in preparing the first project’s drafts. Information Architecture is the organization of information on a website or application so that navigation for the user is clear and logical. The point is that users can easily find all the information they need on the website. Information architecture design results in creating a sitemap of an application or website.

The following experts should work on the Information Architecture:

• UX architects – they deal with structure and user flow based on user and market research. To achieve this, UX architects often work closely with research teams (UX researchers) or conduct such research themselves.
• Technical architects – are specialists in the logistics of systems they create and maintain. They implement IT systems for a growing company or IT company.

Information architecture can be achieved on your own by working on wireframes, which are designed to organize elements on the page. However, one should remember that wireframes are the result of the work of technical and UX architects. Working on software architecture requires specialized experience, studies, and training. Wireframe and prototyping tools are helpful in documenting ideas and working through the next stages of a project. They allow us to verify initial assumptions, and according to results, they enable wireframe modification by all people who work on a website or application.

Conclusion

The main reason for creating wireframes is the desire to separate UX and UI - wireframes focus mainly on product functionality, user flow, and Information Architecture. Separating UX and UI is a very good practice because customers will focus on the website's appearance and its basic functions.

By creating wireframes, one can outline design assumptions developed earlier in the Discovery and Research phase by UX Researchers and then UX Architects and Technical Architects. Based on these assumptions and developed sitemap, UX Designers make wireframes. They allow you to create the first drafts of an application or website, as they contain simplified Information Architecture, navigation, and layout. This stage of work is intended to recognize and highlight potential page, app layout, and navigation issues that can be easily and quickly improved.

The undoubted advantage of making wireframes is their speed and lack of high implementation costs. Thanks to such simple sketches, you can protect yourself from changes in the later stages of the project, which could be very complicated and expensive. More importantly, such modifications made to the final design could involve designers and developers, which could significantly slow the release date of the ready product to the market.