Wireframing: What, Why, & How?

3 comments Permalink


Welcome to the Earthlandia Technology Blog – this is our first post! So, let’s get down to business.

Wireframing: for a non-technical person, a term like ‘wireframing’ is enough to send them into a tizzy, or more likely to flee the scene! But in truth, it’s a very simple concept.

So what exactly is wireframing?

You could say wireframing is the basic step in any screen designing process, it is a basic layout plan for an app or website design. It will provide information to the designers and programmers as to how the screen will ultimately look. As with all screen design processes, wireframing is an indispensable step in creating a Mobile App.

Wireframes can vary from being highly detailed to having a very basic, minimal design as long as it represents what the creator plans to do. The main elements shown are placement of features, formatting, content, names of elements, and instructions for how the site or app will be navigated. It shows how a user will ultimately be interacting with the site or app. The more detailed a wireframe is, the better and more effective the final design will be.

Wireframing has three main purposes:

  • Clarify: This is perhaps the most important purpose of a wireframe. Since the process of wireframing is not an expensive process, it can be changed as many times as possible to clear doubts, make changes, or further additions.
  • Specify: Wireframing allows for a very streamlined process in the design of the app or site, as specifications have already been outlined in the wireframes. The process of design is then better organized and ensures that the final product keeps close to its initial purpose.
  • Save Money: Creating a wireframe means that all possible ideas are taken into consideration before settling on a final design. This prevents extra reworking of the site, and the design process can ensue without interruptions, thereby saving time and money.

If you choose not to create wireframes, you are risking:

  • Miscommunication: Without an initial structure, you wont have anything to refer back to in the design stages. This creates a “Yes, but” problem – “Yes, I said this, but I meant that.”
  • More hours spent designing: Trying to create high-level designs with proper colors, typefaces, and graphics, while simultaneously planning structure and navigation, results in more hours spent reworking and designing the site.
  • Multiple Revisions: Without a wireframe structure in place, potential changes will require that both structure and design be redone, increasing time and money spent.

Wireframing segregates the functional elements from the design elements. Therefore, once a structure is in place, any potential problems in the design can be spotted and corrected without altering the structure.

So, how do you go about wireframing?

You can begin wireframing with just a pencil and a paper. Start with a basic idea and as you modify your design, you can always refer back to the initial wireframe.

There are many websites that provide online help for starting a project, such as moqup.com. You can use their tools absolutely free of cost for a limited number of projects. They provide a wide range of ready-to-use graphical interface elements (such as input controls, list boxes, drop down lists, buttons), navigational components (such as sliders, icons, tags), or informational components (such as notifications, progress bars or message boxes).

Wireframing is simply laying your ideas out on paper in rough draft fashion. So, before you plunge into creating your first mobile app, make sure you do the wireframe right!

We have also turned this blog post into a video! Check it out on YouTube now https://www.youtube.com/watch?v=C_l7TarREVQ


Thanks for reading!

The Earthlandia Team


About Earthlandia


  1. international movers · June 17, 2015 international

    What’s up, its nice paragraph about media print, we all understand media is a wonderful source of information.|
    international movers http://www.cartractorul.ro/?option=com_k2&view=itemlist&task=user&id=1085

  2. removals sydney · June 18, 2015 removals

    I’m not sure why but this website is loading very slow for me. Is anyone else having this issue or is it a issue on my end? I’ll check back later and see if the problem still exists.|
    removals sydney http://cbamexico.com/component/k2/itemlist/user/2158.html

    • Earthlandia · June 22, 2015 Earthlandia

      Sorry to hear about the slow-loading! We haven’t noticed any issues on our end, but we’ll keep a look out for any problems.

Leave a comment