Your app will live and die by its design.
Believe it or not, app design plays a big part in keeping your users around. It doesn’t necessarily matter if it's hard to use or just plain ugly, people will decide that it’s not worth their time or effort. So how do you create an app design that is appealing to your users? Let’s dig in.
If you’re looking for something in particular, feel free to jump ahead:
Understanding app design
Good app design takes a variety of factors into account, but it should always be done with a “user-first” approach – and it definitely can't be your last thought when making an app. It’s also important to keep the general principles of design in mind and how they will translate to the digital space.
User interface app design is the look and feel of your app, including its presentation and interactivity.
User experience app design is the nuts and bolts of your app, or the technical usability and functionality.
Think of your app like a construction project. A UX designer is like the architect who is responsible for the structure and its blueprints, which are similar to wireframes. A UI designer is the interior designer of the house, choosing wallpaper and furniture like colors and fonts.
(Image courtesy of Medium)
UI/UX is similar to the difference between front-end and back-end development. These two app design components have to work together to create something that looks nice and functions well. If the user experience doesn’t match the design, it makes it harder for users to navigate your app. In short, you don’t want the road less traveled to be the road you intended your users to take.
TIP: Wireframing is an essential step in the app design process. Get started with these easy-to-use wireframe templates.
There are two main design systems: Human Interface Guidelines on iOS and Material on Android. These are design guidelines specific to each operating system that contain principles and patterns for commonly used elements like headers, bottom sheets, cards, etc. Utilizing a design system can make the process of updating your app go a little smoother.
While app design systems ensure performance, they can also be flexible. They are typically slightly tweaked, or in some cases fully customized, by the designer. These guidelines allow teams to work smarter, even across departments.
(Image courtesy of Airbnb)
Airbnb uses a design language system to better communicate cross-functionally, using a shared vocabulary across design, engineering, and other departments. It’s essentially your app’s design dictionary, plus pictures.
|RELATED: While there are other operating systems out there, learn why it’s really only Android vs. iOS in 2019.|
In order to make your app more user-friendly, your UI and UX designs have to work together seamlessly.
1. Don’t drain the battery
If your app eats up a ton of battery life, your users are less likely to open it. Screen brightness and screen color are the biggest factors in mobile battery consumption, along with background services like location.
Google actually admits to being wrong. Say that again? Google’s Material Design initiative encourages designers to use white as their primary color for apps.
(Image courtesy of Google)
Apps that require heavy screentime like YouTube have started to roll out “dark mode” to cut down on battery usage. According to Google, when used at full brightness on their Pixel smartphone, YouTube in dark mode used 43 percent less power than normal.
2. Simple navigation wins every time
You shouldn’t try to reinvent the wheel. Try to use standard sequences for your navigation menu, like the iOS tab bar or Android nav drawer. Users are familiar with these common patterns, so your app will be more intuitive to them.
It’s important that your app’s navigation menu is always visible, and doesn’t jump around as the user moves through the app. If you choose to use icons in your navigation bar, make sure their purpose is clear to the user. You should prioritize certain features over others in your navigation. If necessary, create a primary, secondary, and even tertiary menu.
This concept uses a scaled down navigation menu, just an arrow to represent a “back” command and a magnifying glass that signifies “search”. These two symbols never move as you move around the app.
(Image courtesy of A. Salomon)
This app navigation pattern also takes advantage of some common gestures, like swiping left to right to sort through the various news topics.
3. Choose colors and fonts wisely
Colors are important for both UX and UI design. Should you sacrifice your clean white look in order to save battery? How many colors is too many? Think about your brand identity when you’re making these tough design decisions.
For example, high-contrast colors can make your user interface “pop” more than if you used like colors. But there is more to color choice than just the way it looks. Think about the readability of both fonts and colors.
Did you know that nearly 5% percent of the global population experiences color-blindness? You have to think about the function of colors when designing your app.
(Image courtesy of Smashing Magazine)
Obviously, green means go. But without these symbols next to the form fields, a color-blind user wouldn’t know which input is creating the error.
4. Visual weight makes a difference
It’s necessary that you anticipate your users’ needs without anticipating their actions. Quickly give your users the information they are seeking using varying weights for different sections. Think about headlines and body copy–the weight of these two elements should reflect their level of importance.
The Watering Tracker app’s main goal is to tell users when it’s time to water their plants. The most vital information has the highest visual weight.
(Image courtesy of Tubik)
What catches your eye? While the app gives users a ton of other information about the health of the plant, the user can quickly see that it needs to be watered tomorrow.
5. Consistency is key
Your app design should be consistent throughout the entire property, visually and functionally. It should look and act the same way on every page. Note that your Android and iOS app design will be different and that’s okay. Just be consistent on each platform, and keep the design’s core look and feel. Plus, your app developer is also likely to use at least one software development kit (SDK), like the Facebook profile login, so try to design your app with this in mind as well.
The design of your app should also carry over to your website, and all other branded materials. External consistency will help build credibility and avoid confusion with your users.
Uber’s branding is easy to spot from a mile away. From the rider-focused mobile app to the driver-focused website, Uber is consistent with colors, fonts, and the overall modern feel.
(Image courtesy of Uber)
Does this form look familiar to you? That’s because it’s very similar to the fields you would fill out if you were requesting a ride within the app.
A make it work moment
Great app design requires exceptional UI and UX design–think fashion meets function. It’s the only way to really stand out in today’s crowded market and give your users the best overall experience with your app.
OK, we know that app design definitely affects the overall development budget. But how much does it cost to make an app?