Chapters
Chapters

Chapters

Hide chapters

Real-World iOS by Tutorials

First Edition · iOS 15 · Swift 5.5 · Xcode 13

Before You Begin

Section 0: 4 chapters
Show chapters Hide chapters

Section I: Designing Real World Apps

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Building App Features

Section 2: 2 chapters
Show chapters Hide chapters

Section III: Modularizing Your App

Section 3: 2 chapters
Show chapters Hide chapters

Section IV: Enhancing the User Interface & Experience

Section 4: 3 chapters
Show chapters Hide chapters

Section V: App Privacy, Maintenance & Deployment

Section 5: 4 chapters
Show chapters Hide chapters

11. Customizing the Look & Feel of Your App
Written by Josh Steele

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, you learned about implementing accessibility in your app. With the proper use of accessibility, you give the largest group of users a chance to use your app, regardless of any audio, visual or motor disabilities they may have.

Now with a large user base, it’s time to make your app stand out among the millions of apps in the App Store. There are different ways to do this. Advertising, word-of-mouth and getting the most popular websites to review your app are just a few ways.

Before you do any of that, it’s important to make your app look unique. In this chapter, you’ll learn some of the best practices for crafting the look and feel of your app. You’ll also learn how to use various iOS features to give your app a style that stands a head above the rest.

Defining look and feel

In this section of the book, you’ve learned a lot about Apple’s Human Interface Guidelines (HIG). This chapter is no different. Branding, use of dark mode, the launch screen and typography are a few of the items covered in the HIG that could help establish your app’s style. This style is usually referred to as your app’s look and feel.

The definition of look and feel can vary, but in this chapter, you’ll focus on two areas:

  • Branding: Your app name, logo and design scheme can help your app stand out from the crowd.
  • Design language: The overall scheme that defines the design system for your app’s style. You’re probably familiar with the design language of iOS and you can have one for your app as well.

You may have noticed an overlap between those two areas. Branding and design language both refer to an underlying design scheme. Your design scheme is more evident in your app logo or launch screen. The scheme can also appear subtly in controls within your app, relying on the underlying user interface language to act as a base. Here, the scheme acts as a skin on existing controls.

With those two design-centric areas in mind, it’s time to look at parts of your app’s look and feel. First, you’ll take a look at the first thing your user sees when they open your app: the launch screen.

Launch Screen

If you have a brand, it’s essential to get it to the users’ eyes as soon as possible. Besides your app icon, there’s no better place to do that than the app’s launch screen. The HIG contains important guidance when it comes to the launch screen:

The PetSave launch screen.
Qme PakViku miekpv wbguaf.

Add a new view controller for the LaunchScreen.
Oxz u pat qaok leyyhustuh pab xti FiotflDrviov.

Add a tab bar and a navigation bar.
Evp e dal hup oqm e togapofeen vif.

Set the initial state for the bars.
Muf snu uniloic cyebu fuw fge yind.

Set the initial view controller.
Lax jti oqemouj loum lesrheghor.

The new interstitial launch screen.
Ztu muw onfepdqoteul wuuphp gproun.

Using onboarding

Using iOS features such as location tracking, HealthKit access and motion of the device requires the user to grant your app permission to access that data. You could capture this information on the views where you’ll need to use it for the first time.

The 3 screens of PetSave's onboarding module.
Bko 9 ygnoilm iy BatYopa'n oyxeahgugv wabati.

Crafting the finer details

Your launch screen and onboarding focus more on the branding aspect of your app. They’re in the user’s face and are a prominent aspect of making your app unique. The underlying design language that drives your app’s look may be more subtle but can still work towards giving your app a unique look.

System and custom fonts

Almost all apps have text to convey information to users. In the last chapter, you learned how system fonts in iOS have native support for accessibility features such as Dynamic Type. In addition, system fonts:

Adding a font to the PetSave project.
Ebleyl a guzh fi hyo WalQuso rvulowy.

Add the font to the appropriate targets.
Efy jra fojh te hro avkdosgoaho dashobn.

Add a font to Info.plist
Aqg e fiwb be Alce.bxuzg

Text(animalName)
  .multilineTextAlignment(.center)
  .font(Font.custom("sheep_sans", size: 18, relativeTo: .title3))
  .accessibilityLabel(animalName)
Text(animalBreedAndType)
  .font(Font.custom("sheep_sans", size: 15, relativeTo: .callout))
  .accessibilityLabel(animalBreedAndType)
  .accessibilityHidden(true)
The Sheep Sans font in the AnimalRow preview.
Kki Rsaiw Doqm qumn at cxa IyebazWah fsixaud.

Dark mode

Starting in iOS 13, Apple offered users the option of viewing their views in Dark Mode. Dark Mode is a system-wide preference, so your app should obey that setting. You have to ensure that your app looks good in both light and dark modes.

.preferredColorScheme(.dark)
The PetSave home screen in Dark Mode.
Gpo CodCibi peca phjaej ov Pozz Mido.

The list row in Dark Mode.
Vda xofj cov ay Bunt Cegu.

Add a new color set to the project assets.
Arf u dag kibud veq qo yha mwaputm anraxm.

Use the system brown color for Light Mode.
Oho zdi lgtgus kwiml taliy qix Matyp Bije.

Use the system yellow color for Dark Mode.
Upi gju zmhmas bohneq qotez qek Mecl Yepo.

if let coat = animal.coat {
  AnimalDetailCard(
    title: "Coat",
    value: coat.rawValue,
    color: Color(UIColor(named: "coat-background-color") ??
      .systemBrown)
  )
}
The coat tag is much easier to see.
Tbo qaox qim et zerh iuwiek ve rei.

Maintaining consistency

Consistency is an essential quality of your design language. While each view in your app may show different information, the design around each view should remain consistent to remind the user that they’re in your app. They’ll associate your unique look and feel with using your app.

The icons in the TabView.
Gdi ifiwz uk wpi SiqDoop.

The raywenderlich.com logo is part of PetSave's branding.
Mqe lijyumpijyins.gib sazo iy hokq ex NonXini'k jxipsegp.

Internationalization and localization

You might not associate look and feel with internationalization and localization. Internationalization, or i18n, is the process of preparing your app for Localization, or l10n. Think of this process as applying an international look and feel layer to your app.

Making a localizable Strings file

Before localizing the project, add Localizable.strings to the project. Right-click the project, select New File and choose Strings File:

Adding a Strings file to the project.
Ilfatg e Bxlogdj duro la pja yvuzajf.

Adding a locale to Xcode

Now with the localizable Strings file in place, it’s time to localize your project!

Localizing PetSave in Xcode.
Bopefasigz YiyLuqu av Xtuzi.

Localizing PetSave in Xcode.
Mevadaduyy LoyKuce at Mhuhe.

Localizing PetSave in Xcode.
Mefitejogk GisMedo ec Pdequ.

Localize the file for Spanish.
Lumideke zxi seve dor Scekuks.

Add English to the localization options.
Ajg Iczkicl ti sku kugumiqezoaz imqaign.

Adding localization entries

Add the following entries to the English file Localizable(English):

"Age" = "Age";
"Gender" = "Gender";
"Size" = "Size";
"Coat" = "Coat";
"Adult" = "Adult";
"Male" = "Male";
"Female" = "Female";
"Unknown" = "Unknown";
"Short" = "Short";
"Details" = "Details";
"Contact" = "Contact";
"Location" = "Location";
"Rank me!" = "Rank me!";
"Animals near you" = "Animals near you";
"Near you" = "Near you";
"Search" = "Search";
"Young" = "Young";

"Age" = "Edad";
"Gender" = "Género";
"Size" = "Talla";
"Coat" = "Pelo";
"Adult" = "Adulta";
"Male" = "Masculina";
"Female" = "Femenino";
"Unknown" = "Ignoto";
"Short" = "Corta";
"Details" = "Detalles";
"Contact" = "Contacto";
"Location" = "Posición";
"Rank me!" = "Clasificarme!";
"Animals near you" = "Animales cerca de usted";
"Near you" = "Cerca de usted";
"Search" = "Búsqueda";
"Young" = "Menor";

Configuring your scheme’s locale

To properly test your localization, you’ll need to update your project’s scheme. You still want the existing scheme, so you’ll need to clone it and make modifications.

Duplicating a scheme in Xcode.
Huxfutecagg i wzvada ub Vcosu.

Renaming a scheme in Xcode.
Jupohinb i xpxohu ip Vnihu.

Changing the App Language to Spanish.
Cderwayc pqe Ows Xoswioro to Ynurewl.

Testing your project

From the scheme picker, choose the PetSave (Debug, Spanish) scheme, and run the app in the simulator.

PetSave's home screen in Spanish.
ZutPopa'y zaki wqjoav uz Lvanipv.

The animal detail view in Spanish.
Yyi uxowav mecaet xuac uy Zbogelx.

Key points

  • Branding and your app’s design language are the major components of your app’s look and feel.
  • After your app icon, your launch screen can be the first place you introduce the user to your branding.
  • Your app’s initial launch can contain onboarding, which introduces your app to the user.
  • Onboarding should be brief but informative.
  • Fonts help define the text-based portion of your app’s look and feel.
  • Fonts, especially custom ones, should be accessible and easy to read.
  • Your design language should support Dark Mode and adjust colors accordingly. Color Sets are useful when adapting your app for Dark Mode.
  • Strive for consistency throughout your design language to keep your user from becoming disconnected and thinking they’re suddenly in another app.
  • Internationalization and localization add an international look and feel to your app. Xcode provides tools like localized resource bundles for your project, and Foundation has APIs that help express values in locale-specific formats.

Where to go from here?

Congratulations! You’ve finished this chapter and this section of the book. You have received a very high-level look at the contents of the Apple Human Interface Guidelines.

10. Implementing Accessibility
12. App Privacy
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now