A few weeks ago, we talked about how to build a screen flow for your app. Once you've mapped out the screens your app will need, you're ready for the fun part - diving into app design.
Here's a few tips before you start diving into designing your app, and an overview of the workflow I've used to create more than 30 mobile apps.
Use Your Map
Every successful app design project should start with a screenflow to map out the required screens, and help you understand what you need to design. A screen flow is a map for the screens you need to build, and it will help guide you throughout the entire design experience.
It's fine if you start designing your app and realize you need to add a new screen or two. Just make sure you update your screen flow to include all new screens.
Establish a Comfortable Work Flow
There are so many design tools out there - which one is best for designing your app? A better question to ask is "What tool do you feel most comfortable using?"
Having built more than 30 apps, I've found that my ideal workflow starts on paper and ends with a functioning prototype. Here's a quick rundown of my app design workflow:
• Do some initial sketches of what the screens might look like and when in doubt, use popular apps for UI inspiration. I don't typically sketch every screen, but instead focus on designs that can be used in many places so the design stays consistent.
• Using the sketches from the previous step, and the screen flow I've built for the app, I begin to build screens at the top of the user experience. This usually means starting with a login or intro screen and working down from there.
Each designer has their personal favorite software. Sometimes I'll use Illustrator to build custom icon sets, or Photoshop to edit and add effects to photos, but at the end of the day I add all of my designs to Sketch.
I love using Sketch because of the “symbols” feature that allows me to quickly create elements that can be used throughout the design. With Sketch, I can group different screens into different pages which helps me to stay organized.
• Create an art board for each screen and clearly label what it is. It often helps to name the art same thing as in your screen flow.
Make It Interactive
Once you're satisfied with the UI, consider the UX as you create a prototype. There are plenty of prototyping tools out there that will allow you to interact with the design in a realistic way.
Tools like App Press, Invision, and Proto.io allow you to share your prototypes with others.
Identify a Reliable Test Group
Design isn't just about making something that looks pretty, it's about solving a problem in a creative way. It's important to test your designs with sample users to ensure that your design is well understood.
Find a group of people to test your designs and provide feedback. Give them enough context to understand the purpose of the app, let them know what you would like feedback on, and give them access to your prototype.
Use Feedback to Refine Your Design
Listen to your test users' suggestions to improve the design and user experience. Disagree with a suggestion? Follow up and work with your test users as you create alternative versions of the designs until you arrive to the final version.
Once you've finished your app design (with input from your test users) you're ready to start thinking about launching the first version of your app.
