Design your way

Tuesday, November 15, 2016

Native mobile apps are quickly becoming the norm for all startups and tech entrepreneurs. The booming mobile industry offers designers more project work and more opportunities to create incredible mobile applications from scratch.

But the mobile world is a different beast than the web world. How do you know where to get started?

In this post I’ll outline a typical mobile app design cycle starting from idea conception through the UI work and to the production stage. There is no single best workflow but there are certain milestones you should follow to create a workable app from scratch.

Plan The User Experience

Your first step should always be to visualize the application in your mind. What does it do? What problem does it solve or what convenience does it offer users?

Consider who your app serves and why it’s useful. This will help you plan the user experience because you can organize which features are most important and how users might interact with your application.

Plan The User Experience
Image source: Eddie Lobanovskiy

I recommend starting with ideas and writing them down. You can even do some preliminary sketches if you work better with visuals.

The idea is to list what the app does and how it actually benefits the userbase. Without any direction your design will flounder because it won’t really focus on what users get from the application.

For example, Instagram users mostly want to check their feed and post new photos. That’s why Instagram’s UI places so much focus on these actions.

UX
Image source: Andrei Korytsev

To give users what they want you’ll first need to actually learn what they want. This can be tricky but you could some some basic user research to get started.

You’ll also need to choose a mobile OS for the project. Are you designing for Android, iOS, or possibly both? Try to make a decision early before you jump into the design phase because different mobile OS’ have their own proprietary design styles.

Once you have a good idea of all the major features of the app you should move into the creative phase.

Find Design Inspiration

Find Design Inspiration
Image source: Rifayet Uday

One of the most difficult tasks when designing is actually creating an interface. It’s fairly simple to come up with the app’s main features. And once you have a general overview of the design you can always add polish.

But staring at a blank page can be brutal. There are endless possibilities and you need to zero-in onto the best possible solution for the application.

To get started I always recommend browsing the Internet for inspiration. My favorite blog is the Mobile Inspiration Tumblr updated frequently with mobile UI/UX animations and mockups.

Mobile Design Inspiration
Image source: Mobile Design Inspiration

Mobile app designers need to consider microinteractions and user experience along with design aesthetics. That’s why I love this Tumblr account because it focuses on so much more than just pretty designs.

You can also find ideas in online designer portfolios. The best place to find new designs is Dribbble because it’s constantly updated and it’s an invite-only community.

This keeps the quality high and creates an atmosphere where awesome designs make it to the front page.

If you have the time you should also study real examples too. Download a bunch of free apps and toy around for a couple hours. Study how other apps react to swipes, taps, and other touch motions.

As you look through inspiring designs and play with apps you should take notes of your favorite features. Any specific feature, icon, color scheme, animation style, or microinteraction that you like should be added to your list.

This creative list can also become a folder of images and screenshots taken from your favorite apps. Think of this like your visual design library that you can flick through when working on a project.

Crafting Your Mockup (With Resources)

With some creative ideas in mind it’s time to jump into Photoshop or Sketch and start designing.

First try creating a batch of wireframes to flesh out the ideas for each screen. These wireframes can be done on paper, but sometimes it’s easier to build digital wireframes so you can pre-plan different interfaces.

Crafting Your Mockup (With Resources)
Image source: Cuberto

Try using a free wireframing kit or even using a detailed GUI kit.

For iPhone apps I personally recommend this massive iOS 10 kit created by Great Simple. It has all the default elements for any modern iPhone app. Plus it works for all major design programs including Photoshop, Illustrator, Sketch, and even Adobe Experience Design.

Find Design Inspiration 2
Image source: Yaroslav Zaytsev

Android users need to search around a bit to find something of that quality. But check out different galleries to see if any GUI kits stand out.

I recommend using GUI kits for your initial design because they can save a lot of time. Plus they follow proprietary design guidelines so you’re not reinventing the wheel trying to mimic the phone’s native UI.

Once you have a finished mockup you’ll probably want to display it for a client, other team members, or even for random strangers on the Internet.

You can do this with free PSD mockups that come in all device sizes for Apple and Android apps.

I would absolutely recommend framing your finished mockup in one of these device PSDs. You’ll get a clearer view of how the app might look on a real phone and you can use the mockup as marketing fodder for sharing your idea.

Testing & Adjustments

Testing
Image source: Nimasha Perera

Lastly you’ll want to gather as much feedback as possible on your design and take notes along the way. Not everyone’s feedback will be valuable so you should feel OK to throw out some notes.

But don’t expect to create the perfect interface in your first draft. The flat static workflow of Photoshop(or Sketch) doesn’t lend itself well to the interactive experience of a touchscreen phone.

Be willing to make adjustments ranging from simple color choices to more dramatic interface overhauls. You might even create a few different options and see which designs feel best.

Also if you have the skills to add UX animations then you definitely should. These can be incredibly powerful when demoing an application.

Testing and adjustments
Image source: Ramotion

Tools like Principle and Adobe After Effects can handle Sketch/PSD files with animations. So you just import your mockup and work with the vector elements to create animations on a timeline.

If you have no idea how to create UX animations you should start with this intro video by TutsPlus. It can teach you the basics of a simple app UI animation workflow.

But even if you don’t create animations you should still go back and make adjustments.

There’s no such thing as a perfect interface. Yet you should aspire to be as close to perfect as possible, and through feedback you’ll learn which adjustments will help you get there.

Rinse & Repeat

This is a pretty simple workflow but it’s easier said than done. The early creative phase is the most challenging because once you’re in motion it’s a lot harder to go back to the drawing board.

Spend as much time as needed looking for inspiration and picking out the right features for each project. No app was made in a day or without some struggle. But with consistent effort you can learn to design impeccable apps from scratch, and the more you practice the better you’ll get.



Source: http://ift.tt/2g6VDEC

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading