Designing apps: Top 3 things to consider
Can you imagine building a house without an architect? Or designing a car without a drawing board?
The same applies to web design, mobile application design or any interface design. The smallest things in the world need design too.
Creating wireframes is essential in making a quality product which meets certain expectations.
Designing apps is about achieving goals. Here is how I try to achieve my daily challenges at EL Passion.
Information Architecture when designing apps
Before your team proceeds to drawing, remember that the first step is discussing about IA.
Why do you need it? Imagine that you are at the airport for the first time. There are a lot of different signs, sectors, objects around you organized in a logical order. Now imagine this place without all the signs, and without any order. It will be hard to buy a ticket and board your plane, right?
A good information architecture helps the users of your product to find exactly what they need. The more complex the site, the more important is the role of the designer.
The most important elements when designing information architecture are:
- gathering information about the objectives
- collecting information about the target group
- planning the content
- designing the navigation
- designing the search module
Designing wireframes
Wireframes allow us to explore, improve and optimize different design solutions. They are ideal for studying user behavior. Wireframes serve as a testing tool which provides feedback — you will know what works and what is failing.
Revising a wireframe is much less expensive than changing the final product. Keep this in mind!
Where to begin?
With this type of task it’s best to ask yourself the following questions:
1. What is the audience of this product? — Think about the people in the target group. Are they representatives of an industry (pharmacists), or a more general group (women over 40).
2. What are the business goals of the product? — What do you want to achieve by launching your product? We divide business goals into direct ones (increasing sales) and indirect (optimizing service costs).
3. What is the context of using this product? — Will people use your product in the office, sitting at a computer or maybe in constant motion (on the street)?
If you’ve answered these questions, it’s time to start drawing!
The process of drawing your wireframes
- Create your wireframe based on actual sizes (e.g. 960px). For best results use the grid system.
- Use simple shapes such as rectangles and circles. Fill or outline them in a reasonable and consistent manner.
- Do not use color, only shades of gray
- For navigation and headers use real content (not Lorem Ipsum)
- No Lorem Ipsum for tables and graphs too
- Show a hierarchy of content (the first row headers, lead, body, etc)
Such wireframes can now undergo testing. It sure does not look like the final product, because there are no colors, images or animation. That leaves the testers to focus on checking the functionality without distractions.
Prototyping your wireframes
If you want to be sure that your product will be profitable, you should submit the wireframes to prototyping. This will bring your drawings to life.
When to create prototypes?
For dynamic interfaces, complex projects and navigation it seems to be a necessity.
In practice, you assign specific actions to specific elements. When people interact with your elements, you will get the much needed feedback.
How to create prototypes?
There are two types of prototypes: paper and digital.
Paper prototypes are wireframes prepared earlier. During their testing you turn into the narrator and moderator. This technique does not entail extra costs, although you will need to spend more time.
Digital prototyping is much more efficient and not so difficult to prepare. Currently, there are several interesting apps on the market. I suggest you check out InVision, UX Pin or Axure.
*****
As you can see, graphic design is one of the last stages of preparing a working product. Don’t let the amount of work discourage you. Remember that with good wireframing, the graphic design will take less time. At the end, you will save a lot of working hours and expenses, which sometimes can stretch into months.
