Unit 4: Build Your App|Build Your App

For an individual, personality is the combination of qualities that form a distinctive character. Can an app have a personality too? Absolutely. Your app's distinctive character can contribute to its success. This simple focus satisfies many of the design elements discussed previously in the Introduction to App Design lesson. Before you create an app, think about how you can use personality features to set it apart from similar apps.

In this lesson, you'll learn about Apple iOS Human Interface Guidelines and how you can use them to give your app its own special character—a personality that also fits in with the iOS environment. iOS users love how everything on their device works in familiar ways, so they can easily switch between apps. To continue the user's flawless iOS experience, follow Apple guidelines as much as possible.

What You'll Learn

How to use the best design principles for an app icon
How to create an efficient launch screen
How to brand and stylize an app
How to understand the Human Interface Guidelines

Vocabulary

Related Resources

Guide

As an app developer, you’re challenged with building a user experience that stands out among similar apps in the App Store. How can you implement features creatively? You can include animations to create some unexpected excitement. You can follow a pleasant color scheme that keeps the user focused on the app’s functions. You can also use typography to indicate the importance of different sections of text, so the user can follow along more intuitively.

But before the user even opens your app, you have an opportunity to influence the experience. It all starts with the app's name and icon. By creating an access point that's simple yet distinguishable, you can attract the user to your app and deliver a great first impression. Your next challenge is to design the launch screen correctly so that you create a seamless flow from the Home screen to your app.

After the user has experienced your app and its features, they'll have a sense of its personality. Was it memorable? Will they come back for more? In this lesson, you'll learn about Apple guidelines and how to best implement them in your app design.

App Icons

Every time a user wants to download or open your app, they'll see its icon. Along with your app's name, the app icon is one of the most powerful means of convincing a user to get your app. And it continues to influence the user's experience at every launch. In this section, you'll learn correct design practices for creating a meaningful and memorable app icon.

Best Practices for App Icon Design


Keep it simple Think of a single element that captures the essence of your app, then express it in a simple, unique shape. Add details cautiously. If an icon’s content or shape is too complex, its essence is hard to discern, especially at smaller sizes. A simple icon should have a single, centered focus point that immediately captures attention. The Mail app icon is a great example of simplicity: It lets you know the app's purpose and functionality with one clear, crisp symbol.
Make it recognizable Users shouldn’t have to examine the icon to figure out what it represents and what your app does. They should get the gist immediately. Don't impede recognition by using transparency or a busy background. Test your icon against varying backgrounds—light and dark, simple colors, patterns, and photos—so you can be sure that it stands out in all contexts. The Maps app has a more visually complex icon that's still easy to recognize. The faster users can recognize your app's icon, the sooner they’ll know what it's for and why they want it.
Avoid typography and imagery On the iOS Home screen, an app’s name appears below its icon. You shouldn't need to waste precious space repeating the name or telling users what to do with your app. And because it's difficult to read words in a small space, avoid text altogether. Photos are hard to recognize at small sizes, and other imagery such as screenshots or UI elements can be confusing. Check out how the Books app icon conveys meaning without text. The open pages draw users in, subtly suggesting that there's something to read.
Use it in your app sparingly An app icon functions primarily as the access point to the app. Beyond that, use the icon sparingly (if at all). After the user has launched the app, they may be confused if they see the icon among other features inside the app.

Five Uses of the App Icon

iOS users see app icons in five places: in the App Store, on the device Home screen, in a Spotlight search, in the Settings app, and in notifications. For each location, the icon is a different size. The icon is also a different size on different devices. That means you need to create many versions of your app icon.

Here are all the icon sizes you need for iOS 13, in pixels:

Device	Home Screen	Spotlight	Settings	Notifications
iPhone	180 x 180 120 x 120	120 x 120 80 x 80	87 x 87 58 x 58	60 x 60 40 x 40
iPad Pro	167 x 167	80 x 80	58 x 58	40 x 40
iPad, iPad mini	152 x 152	80 x 80	58 x 58	40 x 40
App Store	1024 x 1024	NA	NA	NA

When you put your app on the App Store, add a separate file that contains its icon in all the sizes above. Xcode makes this easy. In the Assets.xcassets folder for your project, you'll find an AppIcon file. If the file isn't there, you can add it by choosing File > New > File, then scroll down to select Asset Catalog. To add the AppIcon file, click the Add (+) button in the bottom left. A new options sheet appears. Select App Icons and choose Launch Images > New iOS App Icon. You can now drag all your icons into this file. (Note that the following image shows sizes for older versions of iOS, not included in the chart above.)

Icon Sizes

Launch Screens

When an iOS app loads, it briefly displays a launch screen as it prepares itself for the main landing screen. After the app is open and running in the background, the user doesn’t see the launch screen again—unless they force quit and reopen the app. Because its time on the screen is minimal (and variable), the best practice is to create an efficient launch screen that contributes to a good user experience.

When you create a new iOS app project, you get a LaunchScreen.storyboard file for free. Use it to set up your launch screen according to the following guidelines.

Best Practices for Launch Screen Design

Avoid putting words on the launch screen. The user doesn’t have time to read text before the launch screen yields to the landing screen.
Make the launch screen a blank version of the initial view controller, allowing for a seamless transition to the app itself with minimal jarring visual effects.
Downplay launch. The goal of iOS is to make it seem as though your app is always running. Your design should contribute to that effect, not detract from it.
Don't advertise. Don’t include logos, promotional offerings, or any "about" information.
Use Auto Layout so that the launch screen works on all device sizes and orientations.

Color

Subtle, consistent use of color is an excellent way to communicate your brand and personality. You can use many online tools to help you find a color palette for your app. Here are a few principles to follow when choosing colors to use.

Best Practices for Color Design

Complementary colors

Use complementary colors throughout your app. Every color has an opposite color that is its complement. For example, blue's complement is orange. Different shades of a color have different shades as their complements—so the complement of a navy blue is burnt orange. Complementary colors help you maintain a coordinated feel while highlighting your app's interface features.

User interactivity

When the user taps a button in your app, they expect something to happen. But they don't expect anything to happen if they tap a label. To help them distinguish, use different colors for the interactive and noninteractive elements of your app. Interface Builder makes this easy for you. A UIButton defaults to a blue color, while a UISwitch defaults to green when switched on. The colors inform the user that something is interactive about those interface elements. In addition, objects can have a tintColor property, so you can easily communicate that the object is tappable.

Simplicity

Too many colors in your app distract the user from the app's purpose. Keep the color palette simple, so users can easily focus. In general, choose a limited color scheme that coordinates with the colors in your app icon.

Empty space

Somtimes, the best choice is no color at all. When you leave empty space on the screen, you're helping your user focus on the app's important content. Just because you see empty space doesn't mean you need to fill it.

Dark Mode

Dark Mode—introduced with iOS 13—allows a user to choose a dark, system-wide appearance. This mode uses a darker color palette and more vibrant colors for foreground content to help it stand out. Your app should work with Dark Mode for a consistent user experience. The following are some best practices for Dark Mode.

Comply with system appearance

If you don’t adopt Dark Mode or add an app-specific appearance mode option, you users might think your app is broken because it doesn't adhere to their system-wide settings. In addition, an app-specific appearance mode creates more work for users because they need to adjust multiple settings.

Test in both light and dark appearance

Designs that work well in one appearance mode may not work well in the other. Make sure that your app works and looks good in both light and dark appearance. For example, it's a bad user experience if your text is white and you switch from dark to light appearance and the background changes to white too.

Maintain legibility and contrast

For many of your app users, your color choices can make interaction difficult if your text becomes illegible when the colors change. Maintain appropriate contrast between your background and foreground colors. For users with visual impairments, this is especially important. Test your app in Dark Mode with Increase Contrast and Reduce Transparency turned on, both individually and in combination. Enabling Increase Contrast in Dark Mode can sometimes result in reduced visual contrast between dark text and a dark background.

Use appropriate colors

Dark Mode uses two sets of background colors—named base and elevated—to enhance the perception of depth and layers. Use the system background colors whenever appropriate. The system provides a set of Dynamic System Colors that adapt automatically to the current appearance and provide the proper contrast ratio between foreground and background elements.

For a custom color, add a Color Set to your app's asset catalog and specify both light and dark color variants. Avoid using hard-coded color values or colors that don't adapt. If you must use a white background in Dark Mode, consider a near-white or light gray color to prevent the background from overwhelming the dark content.

For icons or glyphs, use SF Symbols whenever possible. These are already designed with dynamic appearance modes and vibrancy in mind. If you need to use custom icons or glyphs, make sure that they look good in both light and dark appearance. Sometimes a hollow outline that looks good in light appearance looks better with a solid fill in Dark Mode.

For full color assets, use the same asset if it looks good in both modes. If it only looks good in one mode, modify it or choose another that works better. You can also use a different asset in each mode, but combine them into a single named image asset in your asset catalog.

Setting the App Colors

The storyboard is your single best place for changing the color of the views in your Xcode project. Using the Attributes inspector, you can set colors for different parts of a screen. For example, you can select the main view of a view controller and add a background color to the whole view. On a label, you can change the colors of the text and the background independently. If you want to create a unique flavor, try changing the color of your app's navigation bar.

For fine-grained control of color selections, click the Color pop-up menu in the Attributes inspector, then choose Other. You'll see several options for choosing a color: with its RGB values, with Hex values, or using a color wheel. Xcode remembers what colors you've recently used, so you can easily maintain a color scheme across all your views.

The tintColor property defines the color of button titles, sliders, tab bar icons, and more. To set this color once, rather than update every element, you can adjust the tintColor of your application's window property. All controls inherit the tintColor value from the window when they’re initialized. Most app developers adjust this property just after the application launches.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    window?.tintColor = .red
    return true
}

Named colors

Your asset catalog allows you to create colors you can refer to by name. These have the advantage of working correctly with Dark Mode, but they also mean you can refer to them by name in your code and in Interface Builder. So, although you can select any color you want, it's best to define them up front and refer to them by name. Think of it as akin to setting a variable to a value rather than typing the same value over and over.

To create a Color Set in your asset catalog, open Assets.xcassets, click the plus (+) icon at the bottom left of the inner pane, and select New Color Set. Next, click the new Color Set (aptly named Color) and then the white square in the middle that's labeled Universal. In the Attributes inspector, you can now see all the properties of the color. Alter them as needed. You have multiple methods to input color, so choose the one you're most comfortable with or that your designer provided if applicable.

Attributes for a named color

To use the colors you've added to your asset catalog, you can choose them from the Named Colors section in Interface Builder or access them by name in code.

view.backgroundColor = UIColor(named: "Awesome Red")

Pro Tip: You can extend UIColor with static members to represent your named colors and avoid having to refer to the name by String everywhere:

extension UIColor {
    static let awesomeRed = UIColor(named: "Awesome Red")
}

// later in your code

view.backgroundColor = .awesomeRed

Images and Icons

Good use of custom images and icons adds clarity, visual appeal, and uniqueness to any application. An app without these can feel boring, and an over-abundance of them makes your app confusing to use. As you test your app with your users, ask for feedback about your image use. Do your icon choices clarify intent, or would text suffice in their place? Many images lose their value when used in small thumbnails, so test your images alongside testing your app's workflow.

Best Practices for Images and Icons

Metaphor

Your image choices should reflect your app's personality. They should be easily identifiable and reflect their intended purpose.

Simplicity

Keep your choices simple and clear and avoid cluttering them with too much detail or text. They should be quick and easy to read and understand.

Connection

Especially important for more prominent icons, you want to create a connection with your users. Keep it fun and engaging.

Lineage

Make changes to your icons meaningfully and deliberately. Change them only when needed to express changes in functionality, a need for increased clarity, or to update design language. Too many changes made too quickly can be unsettling.

Adapting to Screen Sizes

iOS works with a variety of screen sizes and resolutions, so it's important that your assets look great across all devices. For your .png and .jpg assets, include 1x, 2x, and 3x versions. The 1x images are for nonretina screens, 2x are for most retina devices, and 3x are for larger or higher density iPhone displays such as the iPhone 11 Pro and iPhone 11 Pro Max.

Why not simply include the 3x version? Apps downloaded from the App Store are thinned and sliced to create versions specific to different device hardware, so that they don't include versions of images that are never displayed on a particular device. This helps to lower the download size for users by removing unnecessary assets.

Vector icons

Use vector-based (.pdf) icons whenever possible to help simplify your asset catalog. A vector image isn’t like a traditional bitmap. Instead, it’s a combination of mathematical statements that produce an image. Unlike a bitmap, a vector image looks great at any resolution, because the underlying math can scale to almost any size. If you include a PDF image in your asset catalog, Xcode generates 1x, 2x, and 3x versions of the image at build time. When you create your own vector images, draw the image in its smallest size, and remove the alpha channel anywhere that color isn’t needed. Export the image to a PDF file.

Find the vector-based checkmark icon in the student resources folder. (You can also use the tab bar icons in the RainbowTabs project from Unit 3.) Highlight one of the icons after it's added into an asset folder, then open the Attributes inspector and set the Scales property to Single Scale. The main asset window will no longer include placeholders icon sizes, and will display an All tag for the single vector image.

Single vector image asset

SF Symbols

For iOS 13, Apple introduced SF Symbols, a set of over 1500 consistent, highly configurable symbols you can use in your apps running on iOS, watchOS, and tvOS.

Using SF Symbols is simple. In Interface Builder, you can enter the symbol name in any field expecting an image name. In code, you can refer to it by name directly, much like a named color.

let image = UIImage(named: "paperplane")

Download the SF Symbols app for macOS to see all the available options.

Icon Colors

If you need an icon in multiple colors, you don't have to create separate assets for each unique color. You can create images using only black, and then replace the black with any color you want. This is known as a template image. Select the checkmark icon in your asset folder, then set the Render As property in the Attributes inspector to Template Image. When you use the image in your application, the icon's color is set to the image view's tintColor property. You can adjust this property in Interface Builder or at runtime in code.

cell.imageView?.tintColor = .red

Template image with tint color

You can use images from SF Symbols as template images without any additional work.

Animation

Animations are a powerful way to connect users to your content—and to create a unique personality. Animation can not only help you communicate the relationships between your app's features but also add an element of fun.

Best Practices for Adding Animation

Judicious use

Don’t use animation for the sake of using animation. Excessive or gratuitous animation and visual effects can distract users—or maybe even annoy them—especially in apps where users aren't expecting an immersive experience. Be careful of animations that run too long.

Credibility and realism

iOS users are willing to accept artistic license, but they can feel frustrated when movement doesn’t make sense or appears to defy physical laws. If the user slides a view down from the top of the screen, for example, they should be able dismiss it by sliding it back up.

Consistency

A familiar experience keeps users engaged. iOS users are accustomed to subtle animations, such as smooth transitions, fluid changes in device orientation, and physics-based scrolling. Unless you’re creating an immersive experience, as in a game, it's best to build custom animations that resemble the animations built into iOS.

Typography

Typography is one more design component that can give your app a unique personality. You can choose from hundreds of useful fonts and styles that can make your app stand out. But it's not easy to create a legible and intuitive approach to typography. To find out if your approach makes sense, test your typography with potential users.

Best Practices for Typography

Legibility

The first rule in typography is to make your text readable. Whenever possible, use built-in text styles that let you express content in ways that are visually distinct, while retaining optimal legibility. iOS supports custom fonts, but they can be tough to read. Unless your app has a compelling need for a custom font—such as for branding purposes or to create an immersive gaming experience—use the system fonts. If you decide to use a custom font, make sure that it’s legible.

Simplicity

Why does simplicity keep showing up in this lesson? It's the best way to design an app that's familiar, easy to understand, and nice to look at. A simple approach to typography is no exception. Use a single font in just a few styles and sizes throughout your app. Mixing multiple fonts can make your app feel fragmented and sloppy. If you want or need to use multiple fonts, numerous online sites can help you find complementary types and styles. Additionally, the system fonts San Francisco and New York are designed as complements and are on all devices already.

Accessibility

Apple products are well-known for their accessibility. For example, iOS system fonts react automatically to built-in accessibility features, such as Dynamic Type. The user can choose to increase or decrease the average font size within the Accessibility menu, and apps using text styles auto-adjust the fonts where necessary.

Dynamic Type setting in Accessibility

If you choose to use custom fonts, make sure that they support accessibility features. In addition, register for the UIContentSizeCategoryDidChangeNotification notification. This notification is broadcast whenever the user changes their Dynamic Type settings, so your app doesn’t have to be restarted to see the size change.

To make your label respect the user's accessibility settings, set the appropriate font descriptor. In Interface Builder, select a label, then open the Attributes inspector. In the list where you typically set Font, set the appropriate text style.

List of text styles

If you don't register your app for accessibility notifications, you need to rerun the app to see the text size increase/decrease after making the change under Accessibility. Before you submit your app for App Store approval, strongly consider registering for those notifications.

Priority content

What's the most important information in your app? Use font weight, size, and color to highlight the content you want your users to notice. You can also prioritize content when responding to user changes to text size. The user may choose to make some content in the app easier to read, but that doesn't mean they want every word on the screen to be larger.

Branding and Stylizing

Your app is an extension of your brand—or maybe it is your brand. In either case, use your logo or your app icon only when it makes good sense. A title on an app screen provides far more information than a logo. Don't try to force a logo where it doesn't fit or doesn't add to the user experience.

As an iOS developer, you want to make your app feel at home on iOS—even if you're building much the same app on another platform. iOS users feel comfortable with the native controls and views that iOS provides. When designing your app, find the right balance between establishing a unique personality and maintaining a native iOS feel.

Wrap-Up

The best thing you can do for your app's personality is to create a great user experience. If you build an app that's easy to use and understand, your users are more likely to stay with you. Want to read more about Apple guidelines? Visit the iOS Human Interface Guidelines.

Lab: Favorite Apps

Objective

The objective of this lab is to help you understand what makes your favorite apps stand apart from other apps. You'll analyze the apps you use the most, and be able to determine what the developer did to makes that app great.

Create a new Pages document named My Favorite Apps, and save it to your project folder. (If you don’t have Pages or access to Pages, you can use any text editor.)

Step 1: Examine Your Favorite Apps

Looking at your phone, think about the apps you use the most. Identify three of your favorite apps.
Before opening the apps, think about what makes them different from other apps.
For each app, write down two of its most noteworthy features.

Step 2: Identify What Makes Them Special

Open your first favorite app. Note how it uses the characteristics covered in this lesson to provide a good user experience.
Write down three things the developer did to give the app a unique personality.
Open your two other favorite apps, and do the same thing.

Great work! You've analyzed three apps, and you probably have a good idea what makes them distinct from other apps that you use. Can you think of how you might implement some of those distinct features in the apps you'll create? For future reference, save your Pages document to your project folder.