What’s a mobile app wireframe?

A simple on paper on paper Mobile App Wireframe

Why do you need a mobile app wireframe?

  • They help establish the information hierarchy of your app.
  • To present the content and functionality of your app before further designs.
  • Wireframes, especially paper wireframes, enable collaboration among designers and even the client thus enabling sharing of ideas.
  • Since they are just sketches, designers are not likely to get attached to them and can handle feedback positively and make corrections accordingly.
  • They are faster and cheaper to design.
  • They also exclude too many details and the whole ‘look and feel’ aspect of your app. As a result, a designer is able to focus on structure and functionality.
  • Since a wireframe is a lo-fi design deliverable, it relieves the pressure among designers, users and other concerned parties. Since nobody expects the wireframe to be perfect, stakeholders can contribute freely and the wireframe can be changed rapidly.

The step-by-step guide on how to create a mobile app wireframe

#1. Understand what you are creating

  • Chat features and the layout structure
  • Information hierarchy.
  • Graphical elements and images
  • Placement of headlines and subheadings
  • The layout structure and spacing
  • Calls-to-Action (CTA)
  • Text blocks and logo placement

#2. Search for inspiration

  • Looking at design templates and going through them to see what may work for you. Narrow down your search by choosing a template that is similar to your app.
  • Visiting websites such as Dribbble, pttrns, cssdesign, Global Sources, Edx, and siteinspire.com among others. These sites will expose you to a variety of wireframes boosting your creativity.
  • It’s also advisable to be actively involved with design-related social media platforms and interact with other similar great minds.

#3. Define your user experience (UX) goals

#4. Begin your wireframe creation process

Wire-framing on Software
  • Paper wireframe is temporary and less precious. People will thus be able to give feedback freely without the fear that they may be criticizing a ‘finished’ design.
  • The designer is also less likely to get attached to the paper wireframes and can handle criticisms politely and make necessary changes. On the other hand, one risks getting attached to the fancy and attractive wireframes when using a program. One may thus end up spending too much time coming up with a wireframe that may not even survive the final draft.
  • Paper wireframes also have the advantage of being easy to alter and make changes. This makes them a logical pick, especially for first drafts.
Wireframing an iOS app on computer

#5. Prototyping phase

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ruhani Rabin

Ruhani Rabin

Ruhani Rabin being a tech and product evangelist for almost 20 years. He was VP, CPO for various digital companies. Plays with Drones in his free time.