How to Work Wireframing into Your Design Process

Posted on May 5, 2015 | Updated on March 1, 2021

How to Work Wireframing into Your Design Process

Wireframing is the process of laying out the user interface (UI) for your app before you actually start designing or programming. The idea behind wireframing is to have a visual understanding of what your app will look like to people who use it, so you can code accordingly.

There are several ways you can practice wireframing. You can literally sketch out the UI on paper, for which exist specially-made pads of paper and stencils. Or you may choose to use Photoshop to digitally sketch out the wireframe. You can also use one or more wireframe apps to help you craft the perfect look and feel for your app.

Since this is the 21st century, it’s best to use apps designed specifically to facilitate wireframe construction. This way, you can leverage modern technology to produce your own app that will make an additional contribution to the portfolio of available software that simplifies people’s lives.

Here are some tips for getting the most out of wireframe tools:

Get Inspiration from Other Interfaces

There’s nothing new under the sun, so it’s pointless to sit down and try to “think” of a new UI that will be perfect for your design. All you have to do is look around to gain some inspiration.

Browse some other websites or apps and ask yourself the following questions:

  • What do you like about the UI?
  • What do you not like about the UI?
  • How would the arrangement of labels, fields, and buttons work (or not work) for your own app?

Look at many different sources to get an idea of the best overall design layout for your own, and don’t be afraid to explore outside of your industry or niche. You never know what insight a streaming music platform’s UI might bring to your project in the finance industry.

Leverage the Technology

The odds are pretty good that your wireframe tool of choice offers some really cool features that simplify the process of crafting wireframes. It may have premade templates for certain types of pages, or offer a set of stand-in page elements like graphics, icons, and navigation bars. Save yourself some trouble and take advantage of those features. Otherwise, you might waste a lot of time, and time is one commodity you can never get back once lost.

Know the App

The temptation for most people with a new toy – or in this case, an app – is to dive right in and start playing around. Resist that urge and learn how to properly use it first.

This builds on the previous point. It’s likely that your wireframe app has some great features. However, you won’t know about those features if you don’t take the time to learn them.

Lay the proper foundation for your own app or website creation venture by first thoroughly understanding every feature available to you in your wireframe app. Use the features that will enable you to quickly create a robust UI.

Think Like a User

It’s possible that, as a front-end developer, you understand certain shortcuts available to you in the Android or iOS operating systems. It’s also possible that you’ve played with so many apps that you’re aware of certain design patterns in UI development.

However, not everyone is as knowledgeable about those operating systems as you are. Remember, you want to create a UI that is “UI.” That is to say, you want a “user interface” that is “user intuitive.” Design doesn’t sell itself; you need an end product that is functional.

It should be easy for people to navigate around your app. There should be multiple ways to accomplish the same task, so if one way of doing it isn’t immediately obvious to the user, then perhaps he or she will find your alternate method.

Design your wireframe with this in mind. Keep it simple and easy to navigate for people who aren’t particularly tech savvy.

Your wireframe will eventually become the way users interact with your website or app. Be certain that you design it with that in mind.

Related Posts

About The Author

Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.

You can find more of Eleanor's work at www.eleanorhecks.com.

Leave a Comment