A Designer's POV: 5 Things to Consider When Creating a Mobile App
I have one of the coolest jobs in the world - I am a UI/UX Designer. Everyday, I come to work and create a story, a voice, and an identity for clients by designing their app. The perfect app for my clients is not an easy task. With all jobs comes a process or a list of things needed to be accomplished in order to create success. Here are 5 things I consider when creating the perfect app.
#1—Research
After being handed the project, I research. I research the company, I research the competitors and other applications that exist in that same field.
Why?
I research a company, beacause I want to know who they are, what they do and most importantly, why they want this app. Without this information, how do you really know what to design, how can you provide a voice until you know what it sounds like and what it needs to say?
It's important to research other companies in the same field to see what they are building, to understand how they have positioned themselves and to evaluate the good and the bad in their apps.
It's useful to research other applications in adjacent industries to see what new and innovative techniques, gestures and graphics are being implemented. When looking at applications on all platforms, it's easy to get caught downloading the application for just an iphone or just an android phone because it’s the one we use on a daily basis. Something important to keep in mind here is to download the same app on at least two different platforms and do a comparison to see how each of their UI's differ.
#2— UX Design=User Experience
Once I have researched, I start to draw the wireframe. This is where I create the story, the voice of the application. This is where the flow of the application needs to make sense. Take the time needed here to test all user cases and general flows of the application. If it looks pretty or cool but it doesn’t function, where does that get you? Hence, it's important to remember to place an emphasis on functionality before you worry too much about aesthetics.
Computer Tools for UX-
After drawing, I then go to the computer to create the wireframe that I've designed. There are lots of tools out there that are used for wireframing. If I am designing the application and there has been no UX provided, I primarily use illustrator. It is a commonly used design tool made by Adobe. This enables me to create boxes and quickly scale other visual elements to the size of the screen I am working with. I am also able to create multiple artboards for me to see on one screen so I can see the flow as I work. Some may use photoshop directly, which is fine too. You can create vector layers and turn them on and off as you go through the screens.
There are many tools out there that let you create and communicate rather quickly and easily for both designer and non-designers.
• Gliffy is one that I have used here at the office. It’s a great way for teams to put the flow up on a site that is accessible for team members to then comment and change in a quick and organized manner. Most companies have this tool built into their wikis or other various team management systems.
• HotGloo makes wireframing fun and easy. The dashboard-like interface is friendly and easy to use because it has preset buttons and squares, text fields, and search bars- all the assets needed to complete an app flow. Whats even better is you can store multiple projects at a time and share with the rest of the team working on the project which makes for a quick turn around.
For more wireframing tools, check out SmashingHub's article on the top 10 wireframe tools .
#3—UI Design=User Interface
My third step is filling in the wireframe with the actual design of the interface, including the look and feel. This is where the wireframe comes to life!
The first step to this process is to make sure I have my screen set up properly in photoshop. iOS devices come in 2 different sizes for its 2 mobile devices (iphone & ipad). Android has a wide range of screen sizes. I normally build for the largest size phone and tablet screens. For all android screen sizes, refer to the Android Guidleines and for iOS, refer to the iOS Human Interface Guidelines.
The second step is to start adding color, images, buttons, nav bar, etc. These are some items that have specific size regulations and I often refer to the downloads from tapptics as a guide to make sure everything is the right size. I also use an application called liveview which allows me to place a frame around my screen that connects to my device and projects what I see on my screen. This is a great tool to see what you are designing on the device for which it's intended.
#4—Review, Refine & Repeat
This is one of my most favorite steps- review, refine & repeat. It allows me to present my design to a client or a colleague. Don’t design in a box. Presenting validates whats working and what needs to change, hence the steps, review, refine & repeat. This is a process that takes time and yes, can be tedious. Take this time and make sure you refine as much as possible. With that being said, it's important to know whether it's time to hand it off to your developer or it needs another round of changes.
#5—Deliver & Test
Delivering assets, meanings, backgrounds, buttons, icons, etc., to a developer is the last step in the design. Some developers will slice your screens. In that case, I make sure that all screens are labeled so there is no confusion. In addition to the psd (photoshop file) I hand off, I also print/send a PDF of all the screens, including a flow chart (condensed wireframe) so they have a reference should any questions come up. If I am delivering assets sliced for an iOS project, I make sure to label the larger screens with a @2x at the end of the name. Naming needs to remain consistent. Incosistent file names are a nightmare for developers—since they will have to spend extra time renaming all your files. I separate the files into folders based on screens. Its important to have even-numbered sized images, especially at the larger (iPhone 4 and iPad 3) size, since those files will need to be half the size to cross over to the smaller screens. For Android, I create four different sized images to reach across—small, medium, large and extra large sets of images. This allows for the design to remain seamless when deploying to multiple screen sizes. Below is a chart that explains the 4 sizes and what screen sizes fall within what category.
Test and test again.
I work closely with developers to ensure that everything I have intended in the design is presented exactly how I envisioned it. This step should not be overlooked. Make sure you take time to review the builds to ensure your design is pixel perfect for application submission.
Test and test again.
I work closely with developers to ensure that everything I have intended in the design is presented exactly how I envisioned it. This step should not be overlooked. Make sure you take time to review the builds to ensure your design is pixel perfect for application submission.
For tips on publishing your application, read recent blog post by architect evangelist, Rick Blalock, Considerations Before Publishing Applications.
--
Elizabeth Hummert is a UX and UI Designer at Appcelerator. She likes to cook and is passionate about design, creation and simplicity. You can follow her on Twitter @bhummert
