No account? Sign up

Get Breaking News, Trending News, Informative news weekly

How To Wireframe Your App Design in 20 Minutes
close

Were adding new stuff like this all day long

Like us on Facebook to stay on top of new trending and useful updates just like this one.

I'm already eProfits fan! Please
close

Were adding new stuff like this all day long

Follow us on Twitter to stay on top of new trending and useful updates just like this one.

I'm already eProfits follower! Please
close

Were adding new stuff like this all day long

Like us on Google to stay on top of new trending and useful updates just like this one.

I'm already eProfits fan! Please
close

Were adding new stuff like this all day long

Follow us on LinkedIn to stay on top of new trending and useful updates just like this one.

I'm already eProfits follower! Please
close

Were adding new stuff like this all day long

Follow us on Pinterest to stay on top of new trending and useful updates just like this one.

I'm already eProfits follower! Please
Use your keyboard keys ( ) to browse more stories.
More stories

How To Wireframe Your App Design in 20 Minutes

Wireframing is the initial usability mockup for your application. It should be straightforward, intuitive, and exha...

How To Wireframe Your App Design in 20 Minutes

Wireframing is the initial usability mockup for your application. It should be straightforward, intuitive, and exhaustively detailed. Though you’ll need to perform multiple wireframes for your application as you move further into development, each time you undergo the process should be quick and easy.

 

In under 20 minutes you can determine everything that your application needs to optimally function.

 

Prep. work

You can’t go into designing a mobile app halfcocked. You need to do a little research ahead of time. Take a look at either Apple’s or Android’s design guidelines for some ideas on how your app should look and flow.

 

Next you’ll need the proper tool for wireframing. Balsamiq, Proto, and Mockingbird are all fast and easy tools that can help you on your way, use these programs or others like them to get your wireframing done in a hurry.

 

Initially though, you’ll be sketching your ideas out on paper, so don’t worry about learning a new program just yet.

 

Where to begin?

You have two options.

 

1. Epicenter design - in which you build the core function/content of a page first and then build navigation and branding around it.

 

2. Linear design - where you begin at the home screen and move through the application’s user flow.

The latter is more prevalent, and it is what we will be focusing on in this article.

 

Begin by drawing your home screen on a sheet of paper:

  • Determine where your logo, navigation controls/buttons, and the core functionality will be placed.

  • Lay them out.

  • You need two sets of navigation controls, one to your application features and the other to the user’s personalized settings.

  • Repeat these steps for each  additional screen in your user flow, according to your application’s functional complexity.

 

Estimated time: 10:00

 

Build Wireframe on a Desktop

Now you’ll take your ideas and translate them into digital reality using one of the previously-listed tools. Each program has its own interface, but all are simple, easy, and swift to apply. 

 

 

Use this time to revise any issues with buttons or flow that may not translate as cleanly as you’d imagined. Once you’re done, you’ll have the scaffolding for a fully functional mobile app!

 

Estimated time: 9:59

Total estimated time: 19:59

 

Share your favourite wireframing tools and techniques in the comment section.  

 

Use your keyboard keys ( ) to browse more stories.
© 2017 eProfits.com All rights reserved.