What is it?
What is wireframing?
Wireframing is an important step in any screen design process. It
allows you to define the information hierarchy of your design,
making it easier for you to plan the layout according to how you
want your user to process the information
Why its important?
It's like an architectural blueprint; you need to see it in two-
dimensional black and white diagrams before understanding
how to build your app.
Know where information is going to go before building pixel
layers in photoshop, or writing code. Wireframes are useful in
determining how the user interacts with the interface.
Wireframes can contain various states of button or menu
Observe what other designers or apps are doing for their
wireframes, you will slowly get a picture in your mind of how a
wireframe helps to organize information for the screen.
Design is an organic process and thus different designers
approach wireframing and its translation to visuals or code in
Find the process that brings out your own strengths and you
are most comfortable with.
Balsamiq (http://balsamiq.com) is a paid product that allows you
to rapidly make wireframes that look like sketches. It’s obvious
that the wireframe is not a finished product but a work in
There is a huge library of reusable components which you can
drag and drop very easily to design your wireframes.
JustinMind (http://justinmind.com) enables you to create
wireframes and interactive prototypes with rich interactions.
FluidUI (http://fluidui.com) for rapid prototyping and team
collaboration on large projects.
Start by drawing boxes on the
grid. Think about the order of
information you would like to
present to your visitors, top to
bottom is the easiest, followed
by left to right.
After you are satisfied with how the boxes are laid out, start
dropping in bits and pieces of your content to get a feel of whether
the information is being well-structured.
The rule of thumb is the same: the information you want to deliver
to your audience has to be clear, even in a black and white
Making a wireframe high definition means
simply adding more details, as much as
possible, without going too granular into
the visual details.
It may mean filling in the actual copy into
the wireframe and trying to determine the
As wireframe design concludes you will move towards designing
the graphical user interface (GUI).
Using Illustrator or Photoshop you’ll create the graphical elements
that will be placed on top of the wireframe screens and eventually
laid into the app development environment.
• Wireframes should be done prior to coding or UIdesign
• Wireframes are your app’s architectural blueprint
• Research other apps and findinspiration
• Mobile wireframe tools enable rapid iterations
• Layout elements on screen and tie the app screens together
• Start simple before goinghigh-def