Published on <a href="http://ift.tt/2nRZ1n5">| Prototyping: From UX to Front End &mdash; Medium</a> Proto.io <img alt="" src="http://ift.tt/2oDFpD4">
You’ve got it: the perfect idea for the next big mobile app. You’ve been developing it in your head and on paper for a full year. You know exactly what you want to do. You can’t wait to get started, right? For many entrepreneurs, this is where the trouble begins. You’ve got the idea. You’ve even drawn up the sketches, but you have no idea how to take those sketches and turn them into a successful mobile app design.
Don’t worry — you’re not alone. Many first time mobile app designers have been exactly where you are. There’s a certain element of enormity paralysis here, but if others can do it, so can you. In fact, we’re so confident you can do it, we put together a list of five phases we think are crucial in the mobile app design process. All you need are some goals, a lot of determination, and a good team surrounding you.
<img alt="" src="http://ift.tt/2n6yAgf">
<h3>1. Set Goals</h3>
Before you start working on your mobile app design, you need to figure out what your goals are. These goals will be the building blocks of your design and should guide decision making throughout the life of your app. This is a good opportunity to build <a href="http://ift.tt/1OuRb78">SMART goals</a>, which are specific, measurable, attainable, realistic, and time-based.
As you might guess from the description, SMART goals are not generic. “To build an app that helps people find information” might be a goal, but it’s not a SMART goal. If we choose to incorporate a method of measurement and a time limit, we’re getting closer. If we say our goal is “to build a mobile app within the next six months that allows customers to find information on our retail business locations in 30 seconds or less,” we have specified the purpose of the app, how long it should take us, and a measurement to tell us how we are doing in a challenging (but still realistic) way.
Once your SMART goals are set, you can dive into each, determining mini-goals along the way and setting milestones that will help keep you on track. If you’re working with a group of people, this practice will provide a blueprint for the project and allow everyone to stay on the same page. If you’re working alone, your SMART goals will hold you accountable.
<h3>2. Focus on Mobile App Design</h3>
More than anything else, your mobile app design needs to be optimized for usability. You should always be thinking about how your customers will use your app. The way people use mobile apps is very different from the way people use websites, so designers need to consider the unique factors. If someone is visiting a website, they might be sitting down and using a computer. They might be at home, in a coffee shop, at school, or at work. They might be doing research or working on a project, which could take a considerable amount of time.
But when someone opens your mobile app, they’re probably on-the-go. They could be in the car, on a bus, walking to work, or running errands. They’re not sitting down to do anything. They’re in the middle of something and they need information from your app this minute through a minimal amount of swipes and taps.
<img alt="" src="http://ift.tt/2oDFYwJ">
Since mobile users are likely to be moving (walking, running, hopefully not driving), make sure your buttons are a little bit bigger than you’d perhaps make them on a website. A person moving around won’t have the same dexterity as someone sitting down, meaning that a tough to reach button will cause them to lose patience fast. For the same reasons, text should be clean and readable, but not so large that formatting becomes an issue on smaller smartphone screens. As a general rule, size 11 works well.
Take extra care when choosing colors for your mobile app design, as they can <a href="http://ift.tt/2ijHSi8">affect user behavior</a>. For this reason, marketers have been studying the effects of color for decades. Color can change perceptions or even encourage customers to take action. For example, bright colors tend to draw attention to areas of importance, so placing a red or orange background on your “order” button could lead to higher conversion rates.
Before you do anything, go back to your SMART goals and use them to kickstart your design. If the purpose of your app is to help your customers find a retail location within 30 seconds, the home screen should say “find a location near you” front and center. Making your customers hunt for locations is completely counter to your goal, so don’t hide that information in a menu. Offer to use the customer’s location (if location services are on) or allow them to type a zip code, if they prefer.
Our current society is all about immediacy. People expect to get what they need or want in a matter of minutes — seconds even, so make sure that your mobile app design follows suit. Make it easy to navigate, simple to use, and above all, make it fast. If you’re struggling to find inspiration, we have an <a href="http://ift.tt/2nW9QpH">extensive design section</a> that you’re sure to find helpful.
<h3>3. Make a Prototype</h3>
Once you’ve solidified your mobile app design, it’s time to start prototyping. Many designers skip this step, unfortunately. Maybe design took longer than expected and you want to get the project moving. Perhaps you’ve spent more money than you intended and you need to rush to the revenue phase.
We get it. It’s hard to make the train stop when you’re going full speed ahead. The misconception here is that prototyping slows the train down — but it doesn’t. <a href="http://ift.tt/29EMTlf">Prototyping</a> greases the wheels.
<img alt="" src="http://ift.tt/2n68BFM">
When you get to the next phase, your functional prototype will help ease the transition from design to development. The developer will be able to clearly see what you’re looking for with your mobile app design, which means that he can get to work immediately, instead of asking you a million questions. Your prototype will answer most of them right off the bat.
<h3>4. Hire a Developer</h3>
Speaking of developers, hiring one is your next step — unless you’re secretly a master programmer. Most of us, though, need a little help in that area, so you’ll need to find someone reliable who can take your mobile app design and turn it into something real. If you don’t know anyone, ask friends or family. Thanks to the mobile app boom, there are plenty of developers to go around.
Asking IT professionals in your social circle is a good place to start. If they don’t work in development themselves, they are bound to know someone who does. If you’re having trouble, you could try contacting local colleges to ask for student help (or recent grads). You could help a student build his resume — and save some money in the process.
<img alt="" src="http://ift.tt/2oDK9ZB">
If this is the first time you’ve had to hire a developer, you might be wondering <a href="http://ift.tt/2bd6pGm">how to choose one</a>. Good programmers are detail-oriented, deadline-driven, and calm under pressure. They must also have strong debugging skills, as the mobile app design process is a constant one. You may discover coding issues during the next phase, but you will not stop discovering them at launch.
Users will undoubtedly report problems and as any person working in technology knows, sometimes it’s just glitchy. A good developer will be able to get to the root of the problem and solve it relatively quickly — and if they don’t know how to fix it, they’ll do the research and figure it out.
<h3>5. Test, Test, Test</h3>
Your final step before launch (barring large-scale issues that require reworking your mobile app design) is the testing phase. One could argue that this is the most important step because it’s when you find out where your problems lie. In many ways, you want to break your mobile app. Better you than your customers, right?
Open your app and use it in a million different ways. Give it to your friends and family. Have the rest of your team and your developer do the same. The more hands that touch, swipe, tap, refresh, and push your app to its limits, the better. You will undoubtedly discover bugs — and that’s okay! This is why you test.
If you’re seeing a lot of problems, it might mean you need to go back to your original goals and check in with yourself. Is your mobile app design really working toward those goals? If not, what is hindering your progress? If it’s bugs, have your developer fix them, but if you didn’t hit your target with the prototype, you might need to go back a little further.
<h3>Mobile App Design: It’s an Art and a Science</h3>
Mobile app design is a unique blend of creativity and science. While you might be reading research on color and design, at its heart, mobile app design is still creating something out of nothing — and that provides you quite a bit of creative license.
<img alt="" src="http://ift.tt/2n6dn69">
Dive into some of your favorite apps and make lists of what you like and what you don’t like. Borrow the aspects you do like and fix the ones that annoy you. If your favorite app’s navigation system is top notch, by all means, model yours after theirs. If it’s not broken, there’s no need to fix it. Remember that there’s nothing wrong with <a href="http://ift.tt/2nWdm3w">gleaning inspiration</a> from others, but be careful to not copy someone else’s mobile app design directly.
Above all, have fun with your mobile app design! This project is your baby for the foreseeable future. It will get a huge chunk of your time and energy, so it’s important to enjoy the work. It will be difficult at times, but remember those SMART goals. Getting back to basics will always ground you — and many times, renew your sense of purpose for the project.
Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! <a href="http://proto.io/">Sign up for a free 15-day trial of Proto.io</a> today and get started on your next mobile app design.
Originally published at <a href="http://ift.tt/2nOwH4z">blog.proto.io</a> on March 21, 2017.
<img src="http://ift.tt/2oDINOn" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2nEiczI">Mobile App Design 101</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Mobile App Design 101

Top Stories