What is the purpose of Wireframes?

Designing with Wireframes at DXY

Luca Murgia
4 min readJan 10, 2018

_DXY Does was a service design agency from Cleveland, OH. I have been designing at the Berlin office for almost 3 years. This article has been written and published on DXY Does website. As the agency shut down in 2017, I’m posting it here._

Wireframes have been largely included into software design process for a series of powerful outcomes they bring on board. Here’s a series of principles that DXY team takes in account during the design process, and a bit of guidance on how to keep on track during the hectic ideation phase.

#1 Wireframes makes you start slow

Wireframes are visual lists of what your software will be capable of doing. Just like a shopping list for your birthday dinner, Wireframes can be fairly different from what you’re gonna get served on plate. Yet reading it we can imagine how it is going to taste and we’re able start a fertile conversation about it.

Just as ingredients will be cooked and mixed in different amounts to generate what’s gonna be delicious, the information about the project will be acknowledged by the team till the point we feel there is a solid ground to start cooking.

Helpful questions during the meetings:

- What information are we dealing with?
- How many screens do we want to design?

From Wireframes to Visual Design, Copyright Parker Indego 2016

#2 Wireframes help address your core business

When designing the draft of your software, we want to focus on your main aim. Wireframes are a powerful tool to highlight what in the screen will be hired to serve the purpose of your business.

Although the team already shared many documents about the scope of work, placing ideas in the space of a screen helps different professionals to call up important topics of discussion and start narrowing down features.

Helpful questions during the meetings:
- What is the general goal of the software?
- What copy should I use to reinforce my business message?

Defining the core business through Wireframes — Copyright Bendix 2015

#3 Wireframes helps you define hierarchy

We thought we could fit all in one screen, but we really can’t? Great! That’s the opportunity to rearrange information in multiple screens now that we’re at the very beginning of the design chain. Such structural changes can be challenging to address later on, when visual design and code join in the game.

More: the available space of a screen sets up a very healthy limit for the project, as it forces the team to prioritize information, reaching a higher definition level of the app. This is the front door for a great user journey.

Helpful questions during the meetings:
- What is the most important element of this screen?
- What information do I want to maximize vs. what can I hide?

Wireframes allow to maximize the most important information

#4 Wireframes makes you start small and grow bigger

Being drafts, Wireframes enclose a big potential in terms of brainstormed ideas. Whatever the choice of the team will be for the final product, Wireframes are a back up of multiple solutions that remain impressed in both the team knowledge and the prototype.

At DXY, we drive teams to use the Wireframe phase for drafting and selecting great ideas over less convincing features. Those will be useful when the product needs to expand in later phases.

Helpful questions during the meetings:
- Is this feature crucial?
- What are cons and pros of each feature?

Wireframing gets along with the concept of starting with a simple idea and growing bigger phase by phase

How to Wrap Up Wireframes

During the Wireframe phase the team is focused on UX applied to pure features. When will we be able to say it’s done then? When it’s the time for colors?

At DXY we constantly refer to main business goals and good design practices. A good match of the two together with the acquired team knowledge will manifest as the right push to next phase.

--

--

Luca Murgia

Designer involved in music. Currently Freelancing. Prev Klarna, Hopin.