How do you start a wireframe for beginners?


Wireframes are a fantastic tool. They sit inbetween yourself, the developer, your investors / stakeholders and your customers.

You create a wireframe for your mobile app or website by just getting started. Pull out a sheet of paper, draw yourself a border, and start the design process. You’ll know you have it right when visually, you can see how your mobile app / website works, how a customer interacts and any bugs or errors are quickly identified.

What is the purpose of a wireframe?

Wireframe serves multiple purposes as they help: ‘Connect the site architecture to its visual appearance by sharing links between pages. Clarify the way in which specific data types are displayed on the user interface. Determine purpose and functionality of interface.

What is a wireframe?

A wireframe is a set of images that look & behave exactly as you’d expect your mobile app or website to perform. Its show the basic structure. This can be as simple as a series of boxes with buttons, or as complicated as a real mockup, with navigations, images and a visual style. If a building has a blueprint or the house or building they are constructing, a software developer has wireframes that describe what you require.

Different types of wireframes

Low fidelity wireframes

Low fiedlity is by far my most prefered. These are as simple as a pen and paper, with boxes & arrows describing the look and feel. You can crank them out fast, and adjust where necessary. It allows you to quickly visualize what you’re trying to do.

Low fidelity wireframes – as simple as pen & paper

Benefits of low fidelity

When time is short, nothing beats pen and paper. Its a great way to brainstorm new ideas and to see the bigger picture.

Where low fidelity representation is not so good

The biggest problem with low fidelity wireframes is that its easy to forget the proportions. For example, your handwriting can be smaller than the phone or website can show. A good rule is that if its smaller than your thumb, its too small!

As a work around, Dribble has plenty of free pdf templates to download. Here’s three examples of wireframe templates you can download and print of to begin your design process.

High fidelity wireframes

High fidelity wireframes are using on screen elements that are much closer to the real, end result. They include real content, typography choices and meta data such as correct images and image dimensions. Depending on how crazy you’d like to go, high fidelity wireframes can include colors & shows how the users interact with the application.

High fidelity wireframes – closer to the end result

There’s plenty of wireframing tools available. On one end is Balsamiq – simple to use, great for showing user flow. The other extreme is Adobe XD. Or there free versions available, such as iphonemockup.lkmc.ch, pidoco.com (requires registration, has a free tier), or mockflow.com (again, has a free version. Requires registration).

Benefits of high fidelity wireframes

High fidelity looks amazing and is much closer to the actual user interface design you may eventually end up using. Depending on the software used, you can view the wireframe on the mobile device and act as if you’re actually using the mobile app.

All wireframe products provide various libraries containing icons, widgets and themes. If you want any specific types of Templates or libraries where could I find them? This makes making wireframes much easier. These make developing wireframes easier in such cases with wireframes which can provide basic annotated user flows and interactive functionality. Visit [link].

Limitations of a high fidelity version

For a beginner, the biggest drawback is understanding how the tools work. You can spend a lot of time customizing and tweaking the results where perhaps your time is better spent actually doing the work.

How do I pick the best wireframe software?

The best wireframeing software is the one that gets the job done – today! If you’re starting off, remember KISS – Keep It Simple Silly. While software tools are awesome and fun and “look good” they do take effort.

Where to begin – understanding your audience

First step on your user research is – who will be using your mobile app? Make it real, give the person a name, age, occupation, device (iPhone, Android, Tablet etc.)

For my user scenarios, I almost always have in mind three people – myself, my wife and my mother.

Funny enough, I would describe my mum as being reasonably technical. If she bought a new pc, she’d have the smarts on how to put it together, plug it in and get up and running. She’s process driven and understands concepts.

My wife on the other hand is less technical. Her day job is in the arts, and I’d describe her as being a little less patient. It’s not that she gets angry or frustrated, its more that if it isn’t straight forward, then she’ll loose interest quite quick. She’ll read an instruction manual or tutorial if available.

Myself – I just jump in and try and figure it out.

It doesn’t really matter how you refer to the 3 people I’ve described. Are they stakeholders? Users? Customers? It won’t make much of a difference. They are all real users, all describe the user experience, but they all give a different user perspective.

Website wireframes vs. mobile wireframes

Based on your audience, what is their primary device? Are they sitting at a desk or tablet, at the office, browsing away? Or are they on the train / bus going to work? Are they watching tv or Netflix, while using your application?

There’s a few difference between website wireframes and mobile:

  • Screen size – sometimes referred to as real estate. Obviously your mobile device is smaller
  • Actions – on a mobile device, you’re limited to some of the design restrictions. For example, iPhones buttons have a minimum width & height (140pt x 30pt).
  • Network connection – mobile devices can gain / loose a network connection relatively quickly. If the network connection disappears, do you want your users to continue? Or should they wait? How will they know what to do?
Flow Management App by Akiuka

What about the visual design?

The line between wireframe and mock up is subtle and they can overlap. I like to think of it as the wireframe describes the actions and behaviour (I have a login screen, when I enter the wrong password, a red box appears with “wrong password”).

A mockup is much closer to the end result. Significant changes to a mockup can take time and costly. Changes to a wireframe are minimal.

What should be included in a website wireframe?

You want a complete end-to-end process. Its pointless to have an awesome first page, but the remaining pages are incomplete.

perfect is the enemy of good
Keep in mind the Voltaire quote – Perfect is the enemy of good.

Where possible, break down the function into smaller elements where possible. For example, this could be:

  • User logs in
  • User registration
  • Reset / validate password
  • etc.

What is a good wireframe format?

There’s no common format for wireframes. Each tool (Balsamiq, Adobe etc.) has their own. They all export to PDF and this is generally what is used to share your UX Design.

What is a UX wireframe?

The term UX (User eXperience) is thrown around a lot. From experience, people use these terms to sound fancy and complicated.

Saying a “UX wireframe” is redundant. A wireframe describes the user experience. A “non-UX wireframe”? Doesn’t make sense.

You’ll often see terms like “ux design” or “ux design process”. That is the process of creating the wireframes. Creating the user experience.

Why do people skip wireframes?

9 women won’t make a baby in a month

Mark Suster – 2001

Too hard / takes too much time / no one uses them / no one reads them.

I’ve heard all the excuses and I don’t buy into any of it. They’re trying to take short cuts, where short cuts aren’t possible.

The real reason people skip wireframes is that they are affraid of the user feedback / user perspective.

The real value of wireframes is the intention. Wireframes are the way the author describes what they want and how it should work.

Further reading

Christian

Christian Payne is a technologist and entrepreneur with a passion for innovation. He has over 20 years of experience in engineering and product development across enterprise and consumer sectors. He has experience at both small start-ups and enterprise level generating +$2M per month. When he's not hard at work on his latest project, he spends his time involved in Men’s Support Groups, Leadership training and Mentoring.

Recent Posts