Wireframing Made Easy

Margarida da Marça
Oct 29, 2017 · 15 min read

Part of our training program for internal staff and OutSystems partners, we are putting together a series of workshops, webinars and articles that have been quite successful and fun.

With “Wireframing Made Easy” we would like to encourage you to start your projects from simply sketching on a piece of paper, to laying out more refined structures — wireframes — and all the way up to creating interactive prototypes enabled with InVision.

Wireframes are really easy and can be very impactful when you are sharing your ideas with the project stakeholders or team members.

Here are the topics that we will be covering, we’ll detail the toolset a good wireframer needs. You’ll be surprised how simple, yet powerful it is. Most of the things you already have with you, and the rest is all free, trust me!

After that, we’ll get to understand the wireframing process basics. These are all about the phases that we go through in order to create something cool and useful.

And then, we’ll encourage you start sketching! I’ll give you a few pointers here, but here’s the thing: everyone can do it.

We’ll dig a little deeper into what wireframes are, their uses and elements. Right at the end, we’ll make something really cool available for all of you to play with, so read the article (or just scroll it to the end if you are a millennial), it will be worth it.

Here’s everything you need to be a UX Expert:

Fig 1 -Everyday working tools used by OutSystems UX Team

Sticky notes are a good and rapid tool to, explore things like scenarios and user flows facilitate card sorts, design high-level information architecture layouts, trigger debate they are ideal for agile group working to stick your ideas and move them around a wall and start the debate. Sticky notes lends itself brilliantly to quick, focussed collaborative brainstorms and idea generation sessions. Group, change, discuss, rearrange until you find that perfect set up.

You can use a Blank or Graph Sketch Pad with a subtle dotted grid to sketch with pixel precision or be free flowing and creative. Sketching ideas on paper allows us to quickly visualise and play with different approaches to content structures, interface layout ideas and interactions.

Balsamiq Mockups is a rapid wireframing tool that helps you work faster & smarter. It reproduces the experience of sketching on a whiteboard, but using a computer. Making mockups is fast. You’ll generate more ideas, so you can throw out the bad ones and discover the best solutions.

Fig 2 -How Projects Really Work cartoon by Project Cartoon

Engagement Managers and Delivery Managers alike struggle with the wireframing process mostly due to lack of knowledge on the subject. They don’t understand the process and its methodology, mainly because they don’t have time or even know where to start. You’ve already heard an image is worth a thousand words, right?

We need an effective way to go from a compilation of words to images. That’s the main challenge.

How do we do it?

We need to understand what the clients really need. By clients we mean project stakeholders and end-users. When you wireframe specific project features on a website, you establish a way of communicating clearly with clients. You show how those features will function, where they will live on a specific page and how useful they might actually be.

Every project has its challenges. The message I got from our developers from the previous workshops was that there is one thing they find really challenging: breaking through the initial stage of fear and uncertainty when they receive a briefing.

When you have a customer asking you to build something and briefing you about it, I would like to encourage you all to get your Sharpies out, immediately. If possible, try to look online for similar apps that you can draw inspiration from. That way you’ll know what’s new and get a sense of where the market is heading to.

It’s never too early to start sketching ideas quickly on paper, to enable and facilitate the discussion about the client’s requirements.

Time to get the process down, shall we?

Fig 4 — Prototyping cycle over time

We consider three phases:

  • Sketching — where you come up with the CONCEPT IDEATION and explore the possibilities to pursue.
  • Wireframing — where you do your CONCEPT VALIDATION, by defining structure and an app’s overall flow.
  • Prototyping — where you REFINE and go down to the details of the structure and flow you came up with before. A prototype is a more detailed and interactive representation of the final product. It consists of building a model of the application to show off and test before you build the actual application.

What prototyping does is allowing you to test the final product before wasting time or spending money implementing it.

It’s critical that you define what the future app will be, and how you can build it. As you’re through with the wireframing process, the interface concept should be more clear and refined.

Sketch

Sketching is a great starting point, as it’s the most basic part of the whole design process.

You can start sketching as soon as you start your research. Do it while you’re looking for examples, solutions, and collecting initial requirements. Sketching can happen right from start, at your initial meetings with clients or users. They’re a rapid expression of ideas, so that you can later recall some concepts.

Don’t be shy about your sketching ability. “The grass is always greener on the other side of the fence”, right? We always think other people’s sketches will look better than ours.

But you have to let go, because everyone can sketch. If you can do any of those shapes, you can sketch. It’s as simple as that.

Well, I hope most people know what Pictionary is. At least you’ve heard about it… It’s the Game of Quick Draw: you have to sketch a word that another player in your team needs to guess, in under a minute!

Fig 5 -Get an afternoon of sponsored training to play Pictionary with your team

Everyone can play this, and it’s incredible how fast you can create these cool little sketches.

I challenge you to pitch your bosses to get an afternoon of sponsored training! It’s easy, it’s fun and it promotes team building. All of a sudden, everyone realizes that they can actually draw!

Once we’re done with the sketching, it’s time to move to wireframing.

Wireframes

How do you go from sketches to wireframes? And what are wireframes?

Wireframes are your app’s blueprints. They’re critical to visually define what the future app will become. The main purpose here is to show the client — as well as everyone else involved — how the interface is structured, before you move to implementation.

Remember: clients are usually busy running their business. They want something clean and readable to quickly get up to speed on what they’ve missed without wireframes.

Wireframes are low fidelity representations of web pages that show their basic elements. They are not interactive, and don’t show much detail. They just create a simple design that guides the project.

The key to wireframing is speed and simplicity. They need to be distraction-free: hence the black and white colours. We will ultimately throw wireframes out, so in most cases they don’t need to be highly polished or pixel perfect.

This is pretty much the same thing as your house plan. When you commission building a new house, you expect the architect to show you his plans. These initial plans tell you how big each room is going to be, how you get from one room to the other, etc. Foregoing this step can lead some real issues. Let’s say you go ahead and build the house, anyway, without any real plans…

Calling it a challenge is an understatement! Imagine you’re in the kitchen and you can’t find the door to your living room. You just know it’s… somewhere around.

Same thing applies to your apps.

What’s the difference between wireframes and prototypes?

Prototypes are mid to high-fidelity representations of the final user interface.

The goal of a prototype is very straightforward: it simulates the interaction between the user and the interface.

Whenever a button is clicked, the appropriate action must occur — mimicking the experience of a final, full product.

What are the uses for Wireframes? Why are wireframes good?

They make it easy to communicate, promote and validate your ideas among everyone that is involved in the project — whether they are clients, stakeholders, designers, developers or users.

Product and Project Managers, as well as Executives are what we call Internal Business Stakeholders. They review wireframes to ensure that requirements and objectives are met throughout the design process.

This fits into their overall product strategy and scope regarding a specific project or set of projects.

Wireframes give managers an early, close-up

view of the site design (or redesign).

A wireframe that conveys the requirements and objectives of the product is really important to product and project management.

Wireframes are also very important to establish an effective communication with designers. They’re the base on which the User Interface development is set.

Wireframes help designers understand how elements are going to be displayed, so they help guide their creative process.

Sharing wireframes with end-users is extremely important because if you conduct informal tests and iterate from the early stages of the process, you will be able to gather feedback and reflect it in the next iteration, validate expectations, and identify issues earlier.

We’ve recently published an article about Thinking Aloud, User Testing that you can have a read to become a pro.

Reducing guesswork is one of the most important aspects for the teams of developers to start implementing their solution confidently, even before the visual design is ready. It’s quicker and easier to identify implementation changes, as well as tracking goals and defining project scope.

You use wireframes to get a more tangible grasp of the site’s functionality. This way you can offer developers a clearer picture of the elements they will need to code.

Back-end development focuses on structure, functionality and behaviour, so you give them low fidelity mockups.

Front-end developers care about content and information hierarchy as much as they care about structure, functionality and behaviour. Therefore, you’ll give them high-fidelity wireframes.

Skipping wireframes delays feedback and increases the costs of making changes, because full design mockups must be reworked, instead of having those changes done on simplified wireframes.

If you look at the big picture of an app’s lifecycle, wireframing should start and be defined right within the initiation phase.

  • They are fast to create and iterate on. So, if you fail, it’s still OK. Fail fast, fail cheap!
  • They allow you to gather feedback.
  • They reduce waste and uncertainty
  • And, in the end, you can get a clickable prototype to design interactions and a user flow. They’re the way to go in order to create very early usability testing.

What happens if you do not do Wireframes?

  • You can damage your project critically if you skip doing wireframes.
  • You risk failing to address end-user needs.
  • You risk not meeting the client’s goals.
  • You end up not having any visual specifications.
  • You risk not testing and picking the best alternatives.
  • You make it hard to make future changes.
  • You make it hard to fix issues in production.

Think hard about this. Ponder the impacts on time, costs and overall quality if you don’t do this. Wireframes reduce costs and uncertainty, while allowing faster and easier changes.

“The amount of time that programmers spend on reworking something that is actually avoidable is around 50 percent of their time.”

Out of the top 12 reasons projects fail, three of them are directly related to what we would call user experience, or user-centered design work. And they all come from badly defined requirements; from poor communication among clients, developers and users; and from stakeholder politics.

So, UX professionals focus on interviewing stakeholders, doing user research and testing, creating user-centered design. All these things together can fix at least 3 of those 12 reasons why software projects fail.

Elements that compose a wireframe

We need to keep four elements in the back of our minds, at all times: Content, Structure, Hierarchy and Functionality.

Content is all about exactly which elements are going to be displayed on screen. When you receive a briefing and start understanding the business requirements, it’s really helpful to think about which elements you will use to respond to those requirements.

For example, if you’re thinking about events within a timeframe, you might go for a timeline. If you’re thinking about big lists of data, you may choose a grid instead of cards.

Structure consists of how elements are put together on a screen. Here’s where you define the structure of your navigation and information architecture.

The structure principle: design should organize the user interface with purpose — in meaningful and useful ways, based on clear, consistent models that are apparent and recognizable. You need to have related things together and separate unrelated things. You need to differentiate things which are not similar, while making similar things resemble one another.

The structure principle is concerned with the overall user interface architecture.

As an example: the most important information on a given screen should be placed under the title, in the top left corner. The element to proceed to the next page or screen is often located on the right side of a card or page.

Hierarchy: how will these elements be displayed in terms of positioning, labelling and size?

Hierarchy defines how the elements will be displayed in terms of positioning, labelling and size. It’s about putting elements in relation to each other; what needs to be shown first and what’s most relevant for the user. Remember that when you are designing an app, other people are going to be using it — not you.

A key question here is: how can we make this task simple? Is it obvious for the people to perform what they need to do? Quick hallway testing can solve any questions we may have and validate if what we are preparing for them to use is simple and intuitive. 80% of the times the best solution is the most simple one. But it’s also 90% harder to get to that simple solution.

Few tips on hierarchy for mobile devices.

  • Have One Primary Action Per Screen: Every screen we design should support a single action of real value to the person that is going to use it. This makes it easier to learn, easier to use and easier to add or build on when necessary. Screens that support two or more primary actions become confusing quickly. Like a written article should have a single, strong subject, every screen we design should support a single, strong action that is its raison d´être.
  • Keep Secondary Actions secondary: Screens with a single primary action can still have multiple secondary actions. But they need to be kept… secondary! Keep them secondary by making them lighter visually or shown after the primary action has been achieved. Strong visual hierarchies tend to work better.

You achieve strong visual hierarchies when you get a clear view order of the visual elements on a screen. That is, when users view the same items in the same order, every time. Weak visual hierarchies give little clue about where to rest one’s gaze and end up feeling cluttered and confusing.

In environments that change constantly, it’s hard to maintain a strong visual hierarchy, because visual weight is relative: when everything is bold, nothing is bold.

If a single, visually-heavy element is added to a screen, the designer may need to reset the weight of all elements to achieve a strong hierarchy again. Most people don’t take visual hierarchy into consideration, but it’s one of the easiest ways to strengthen (or weaken) a design.

Visual Hierarchy

Content on a page isn’t something to be taken lightly. I often fall back to Newspapers as a classic example of how a content hierarchy should appear online. Well constructed pages use clear headings to organize content, and subheadings to make that content easier to parse. The visual appearance of content may not be as important as the content itself, but without some sort of hierarchy a user can get lost inside of a page.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

Functionality. What’s it all about then?

Functionality is about how elements work together and how they interact with people using them.

There are two main subjects when you’re talking about interaction: the interactivity of elements and the way users interact with them.

Both should be captured within the wireframes, by adding annotations and adding flows.

In our wireframing workshops we always try to solve one exercise. I would like you guys to try this out after you read this article.

Your scenario for this exercise is… Christmas Vacation.

You have presents to buy, you have to make time for your family gatherings, so you start thinking about requesting your manager some time for your Christmas holidays.

Some of you are probably managers dealing with your employees’ requests. We would like you to come up with the idea of a mobile app that easily allows you to approve or reject those holiday requests.

Think about it in terms of content, structure, hierarchy and functionality.

Our tool of choice for wireframing is Balsamiq. But if you don’t have it installed yet, you can just use pen and paper, which will do nicely.

How would you tackle this briefing?

Let’s start with Content, then. Which elements should be on displayed on screen?

Content is all about what is essential, what really needs to be on screen. What does the manager need to know in order to make his decision? Mobile apps should… (should what, Margarida??)

Think about Structure: how will elements be put together on screen.

First of all, you need to consider the device. Is it a smartphone, a tablet or a desktop? If it’s a phone, will it work on Android or iOS?

What does the manager need to know to make his decision?

How many approval request will he be dealing with on average? Are they more than 5 or less than 5? Are you approving in a badge (what does this mean? Remember: all audiences.)

Answering these questions… (what? It’s incomplete: Margs, allow you to establish structure?)

Moving on to Hierarchy: how will these elements be displayed in terms of positioning, labelling and size?

Focus on having One Primary Action Per Screen: Every screen we design should support a single action of real value to the person that is going to use it. For example, in our application this should be the approve or reject interaction.

This makes it easier to learn, easier to use and easier to add or build on when necessary.

Make them lighter visually or show them after the primary action has been achieved.

Strong visual hierarchies tend to work better. You achieve them when you get a clear view order of the visual elements on a screen.

Last, but never least: Functionality. How will these elements work together and interact with people using them?

Functionality is about how elements work together and how they interact with the people using them.

You’re almost done with this read, we’re going to give you a few tips to are going to take your UX Expertise to a whole new level.

  • Keep wireframes simple!
  • The key to wireframing is speed and simplicity.
  • We will ultimately just throw them out so, in most cases, they don’t need to be extremely polished or pixel perfect.
  • Keep it black and white, so it’s less distracting.
  • Make sure you add some key annotations.

Annotating your wireframes is super important. That way, anyone can read and understand what they’re all about and understand the interactions you’re trying to detail.

  • Keep them brief and to the point.
  • Encourage your team to give feedback. Just push them against the wall, yank it out of them
  • Sharing your wireframes is a good way of improving them.

Keep this in mind: don’t be afraid of anything at this stage. You cannot fail, there is no wrong here.

Everyone’s at the same stage — you’re still trying to figure things out, what to build, etc.

We know it’s a big challenge to get everyone to agree to your solution. Getting most of your team to buy into your ideas will give you all the confidence you need to kickstart the project.

At the same time, this is the easiest and cheapest way of getting everyone up to speed and involved.

Visit our Dribbble account to get some inspiration as well some materials that could help you continue improving your wireframing skills.

This is our global vision for a project at OutSystems, you can see where we fit the Wireframing.

As we promised we are giving away some extra inspirational material produced here at OutSystems by my team and colleagues. And we’ll also make the Balsamiq files with our practical exercise available, so make sure you check out our amazing Community and Forums.

Happy Wireframing

Clap if you like it!

About me:

I’m Margarida da Marça, a Senior User Experience Designer at OutSystems and a Service Innovation and Design MBA student at Laurea. I live between Helsinki and Lisbon and work with a bunch of amazing clients and partners worldwide.

Margarida da Marça

Written by

Design Practise and Team Lead at OutSystems Finland

More From Medium

Also tagged UX

Top on Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade