Login
Copyright

How to Wireframe in Mobile: Tools & Examples

Instructor: David Gloag
With the proliferation of mobile, and mobile applications, designers are seeing an opportunity like never before. Learning the proper use of wireframes in a mobile environment is an important key to success.

Our Mobile Centric World

It seems like everybody has a cell phone. And some even have a tablet or iPad as well. Think about it. How often do you hear a phone ring while riding public transit? How many times has a phone gone off while you are watching a movie at the theater? And how frequently do you see people sipping coffee while reading the morning newspaper on their iPad? Mobile is becoming a significant part of our social fabric. As such, it makes sense that designers will look for ways to improve the applications they design for mobile. There are many routes to this end, and one of the most useful is the wireframe.

What is a Mobile Wireframe?

A wireframe is a pattern or template. It describes what a mobile application should look like from a visual perspective, and the basic operations it will provide. Its purpose is to facilitate discussion and focus development efforts. Several disciplines make use of the concept. Seamstresses use patterns to layout and cut the clothes they are making. 3D graphic artists use wireframes to create preliminary characters and objects before they are finalized. And architects use floor plans and models to convey basic structure for their efforts. Regardless of the discipline, each is looking to foster creative discussion, and move the design to finality as quickly as they possibly can.

Some Rules for Wireframe Creation

Here are some rules to keep in mind when creating wireframes:

  • Focus on transitions and content placement - wireframes are templates, and meant to act as placeholders for details and detail discussions.
  • Keep the design simple - the idea is to promote discussion, and to allow any topic to be discussed. You don't want to restrict things by making choices in the wireframe.
  • Don't use color - related to the point above, color is a topic for discussion.
  • Don't use images - images cloud the issue and often force discussions in the wrong direction.
  • Use a generic font - again don't force decisions on the team.

It is important to note that current software packages meant for this purpose break some, if not all, of these rules, particularly in environments that go through many iterations. The process starts out as described, and adds colors, fonts, and images with each iteration. The final results often look more like a finished product, than a wireframe.

A Mobile Wireframe Example

Okay, let's look at an example. Say we have a simple mobile application. The application's main screen shows a button that when pushed clears the screen, and then displays the words 'HELLO THERE'. A wireframe for this application might look like the following:

Mobile Wireframe Example
Mobile-Wireframe

The two large boxes represent the screen, in this case for a cell phone. The left screen contains a smaller box, representing a button, and is labeled as such. This is the main screen of the application. The right box represents the result of an action performed by the application. In this case, a button press, which is indicated by the arrow. As mentioned, very simple. But it isn't hard to imagine what a real-world cell phone application would look like. Just add more screens, arrows, and buttons.

To unlock this lesson you must be a Study.com Member.
Create your account

Register for a free trial

Are you a student or a teacher?
I am a teacher

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back

Earning College Credit

Did you know… We have over 95 college courses that prepare you to earn credit by exam that is accepted by over 2,000 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it free for 5 days!
Create An Account
Support