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.

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.

UI vs. UX

User interface (UI) and user experience (UX) design are commonly confused for the same thing. While they do go hand-in-hand, they are different conceptually and in execution.

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.

App design systems

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 software ensures 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.

5 app design tips

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.

Related: App design skills are crucial if you're looking at pursuing software engineering as a full-time career. Learn what else it takes to be an app developer from the experts.

Incorporating app design in marketing

We're all about sourcing expert opinions here at G2, which is why we asked five design experts to weigh in on how they incorporate an app’s UI design into a marketing strategy, and even beyond.

1. When in doubt, screenshot it out

“When you market for an app, you're giving the user a taste of the UX/UI and you want to mimic that very clearly in your ad. I find that ads with screenshots and very clean backgrounds (as to not distract from the app's unique feature offering) have the most success.

Keep the text light and straight to the point. If you can create a polished gif or small video that can do a quick demo of the app's best features, that's even better. You have about 3-5 seconds to hook your audience before the scroll - do not overlook the design of your ad, no matter how small it is! Test tons of ad images - different colors, different size fonts, different screenshots, different size assets.”

– Ciara Hautau, Lead Digital Marketing Strategist at Fueled

2. Create a united front (end)

“One way to make sure the look and feel of your app UI is expressed in your marketing materials, is to take certain elements of the app design and use them as accent pieces. For example, if your app has sections with illustrations, transfer them over into your proposal, with the exact same style.

One other tip is to pay attention to the style of buttons and boxes on the app. If your app uses rectangles as buttons, without any rounded corners; your marketing material should follow this style, and never use rounded edges on anything. This also goes for drop shadows, font sizes, transparency, etc.”

– Jenna Erickson, Marketing Manager at Codal

3. Be consistent with color

“Think about consistent branding. I recommend using a very limited color palette when you are designing the UI for an app. If you take this across all of your marketing it's very easy to achieve consistency and more importantly recognition for the brand.

I am currently creating a UI for an app. I have taken the original brand color red and used it as a color wash background for all of the marketing materials. The end result is a bold, very recognizable brand that people remember.”

– Jean H. Paldan, Founder & CEO of Rare Form New Media

4. Speak the same language

“We directly incorporate elements of our UI into our marketing campaigns to give our audience a better understanding of how our app functions and what benefits they could get out of the product. Our app is a keyword-searchable platform for finding like-minded people nearby through common interests. We are using the keyword tags, exactly as they look in the app, in our campaigns on Instagram and Facebook introduce the different interests you could connect through. This gives our audience a taste of our product before download.

Isolate the key elements of your product. What makes it unique? What makes it appealing? Then try, in a not-too-obvious way, to include this element throughout. It's important to think of something that is engaging and possibly even participatory, like a hashtag campaign.”

– Melanie Aronson, Founder of Panion

5. Get your point across

“Throughout all of our marketing collateral–our website pages, in our brochures, within our emails, throughout our videos, etc.–we make sure to visually highlight our sleek UX/UI and truly demonstrate the ease-of-use and accessibility our single-click app interface provides.

It’s important to engage the audience by describing how the app’s design improves the user experience. You have to find a way to convey how the UI benefits your customers and how it appeals to potential leads. Your messaging should focus on how the user interface creates an even simpler, smoother and easily accessible experience for all users.”

– Sagi Gidali, Co-Founder & CPO of Perimeter 81

A make it work moment

OK, we know that app design definitely affects the overall development budget. But there's more. Discover how to make the best use of your app prototype and answer the question: how much does it cost to make an app?