Basic Understanding of Wireframes

May 3, 2016| deployapps
Basic Understanding of Wireframes

Wireframes is a term that we use a lot, but do we actually know what it is? Basically, a wireframe is a ‘skeleton’ of your intended web/app product. That means, the mobile app idea you have your mind is materialized in it’s simplest form of pen and paper or nowadays – .png screens.

The Process of Wireframing

Have a pen and paper? There you have a paper and pen wireframe! You don’t have to be qualified to create wireframes. Although, what you are achieving with this quality is called a ‘low-fidelity’ wireframe. But by drawing out, you get a chance to refine your user journey, and this is crucial for user experience.

Take time to test and get some feedback, you never know what you have missed or needed to include in your sketch. With pen and paper, you’ll save a lot before heading towards design and development.

Crafting Perfect Wireframes

The next step is to get your sketches into mid-fidelity level. This means your sketches are designed by a UX Designer (preferably experienced) in iOS or Android guidelines. The wireframes will be represented in Black & White (or other neutral colors) for you to know how your mobile app will appear.

You can always try creating mobile app wireframes yourself. There are prototyping tools such as Balsamiq, Sketch and Omingraffle that will provide easy drag-and-drop functionality to your mobile app design.

From Wireframes To Prototype

So what can you do with Wireframes? Don’t let the appearance of wireframes fool you, because you can create a full app prototype with it. Let’s say you have 30 screens of your app idea already prepared in wireframes. Take them to InVision and you can create links to each of these screens for you and your users to test.

This is crucial because you can now gather information from people about your mobile app – it’s design, functionality and procedure. Maybe you need to present it to a potential investor? A prototype is very cost-effective and can be easily presented on your mobile phone.

Mistakes Most People Make

There are many mistakes regarding the concept of Wireframes that most people make. One of the worst is, thinking they do not need one. Yes, a majority of people fall in this category simply because they feel UI Design is more important to their app. I have to say, even if you have the best mobile app UI, users will not care about your app if it doesn’t have smooth user experience. Get that right first, and you can take time building the world’s best UI.

Mistake number two is ignoring User Testing with wireframes. Want to know more about your user? Best way is to collect data through a survey form about what they think of your app. Let them write about their thoughts as they click on to your app. Lastly, prompt them on what they will like more from it.


Many people just skip this phase of designing wireframes, but if you took note and follow the process mentioned, you’ll likely to achieve more success than most people. I have worked with many and I realize, it’s all about the mindset. If you truly want success, take time to work out the wireframes and let it be the foundation of your future mobile app.

Categories: Wireframe

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe and Get 25% OFF!

Join our mailing list for cool freebies and updates. Promise, no spam :)

%d bloggers like this: