Intro to iOS 18

Car Control App Design

You will be excited to create two iOS 18 designs: a Car Control app and an AI app, each with its unique style. In the first part, we will design a Car Control app inspired by Apple's CarPlay, Tesla, and other car apps. This design will be more complex and will help improve your skills and teach you how to use Figma effectively. You'll use custom shapes, create progress rings with the arc tool, learn how to use gradients to achieve the desired effect, and use blurs to make your design stand out.

Artificial Intelligence App Design

In the second part of the design episode, we will design an AI app inspired by Apple's intelligence. This app will have a simple, clean design focusing on how information is organized and displayed. We'll also add special touches like gradients and blurs in certain areas.

What You'll Learn

The course is divided into three main parts: design, prototype, and implementation. Each section covers a key aspect of iOS design. We'll start with the basics and move to advanced topics, ensuring a strong foundation. You'll find practical examples, hands-on exercises, and tips to help you apply what you learn to your projects.

• UI Kits: Understand and use UI kits, and learn how to customize them to speed up your design process and ensure consistency.
• Create Wireframes: Develop wireframes that serve as the blueprint for your app, focusing on structure and functionality.
• Typography: Learn the basics of typography and apply Apple's typography guidelines to enhance readability and accessibility in your design.
• Integrate SF Symbols 6: Integrate SF Symbols into your design to create cohesive and attractive icons, making navigation easier for users.
• Implement Auto Layout: Leverage Figma's Auto Layout to build responsive designs that adapt to various screen sizes.
• Choose and Apply Colors: Understand color theory and Apple’s color guidelines, and create dynamic color styles and gradients.

Advanced Topics

The first part of the course is completely free! To learn about prototyping and implementation, just subscribe to DesignCode. You'll get access to all our past and future courses, including early access to upcoming ones. In the second part, we will design an AI app, inspired by Apple's intelligence. This app will have a simple, clean design focusing on how information is organized and displayed. We'll also add some special touches like gradients and blurs in certain areas. We will dive into more advanced topics to enhance your design skills and prepare you for real-world applications. Here's what you'll learn:

• Adaptive Layouts: Master the art of creating responsive designs that adapt seamlessly to different screen sizes and orientations.
• Layout Grids and Spacing: Understand how to use layout grids and manage spacing to create clean, organized, and visually appealing designs.
• Components and Variants: Learn how to build reusable components and create variants to streamline your design process and maintain consistency.
• Figma Variables: Discover how to use variables in Figma to simplify your design workflow and ensure consistency across your project.
• Advanced Prototyping: Take your prototyping skills to the next level by creating interactive and dynamic prototypes that closely mimic the final product.
• Preparing Design for Handoff: Learn best practices for preparing your design files for handoff to developers, ensuring a smooth transition from design to development.
• Exporting Your Design to Code: Explore how to export your design assets and turn them into code, bridging the gap between design and development.
• Customizing Code: Gain insights into customizing the exported code to fit specific project requirements and enhance functionality.
• React Native Animation: Get started with adding animations in React Native to create engaging and visually appealing user experiences.
• Getting Started with Reanimated: Learn the basics of Reanimated, a powerful library for building smooth and performant animations in React Native.

Figma File

To follow the course, you will need my Figma file. This file includes local color styles, color variables, assets, images, and components, including the original design and more.

iOS 18

Apple's iOS 18 introduces a host of new features and improvements designed to enhance the user experience on iPhone and iPad. The update includes advanced color variables for all system colors with light, dark, and dark elevated values, allowing for more dynamic and adaptive app designs. The updated app icon artwork and the new mode for switching between light, dark, and tinted app icons provide more customization options for users. Enhanced components like the new Control Center and Lock Screen, along with a new iPadOS floating tab bar, offer greater functionality and user-friendly interactions. With improved organization of instance properties and a comprehensive examples page, iOS 18 makes it easier for designers to create highly realistic and efficient app designs, fully aligned with Apple's design principles.

macOS Sequoia

macOS Sequoia introduces a range of new features and improvements for Mac devices. This update brings a refreshed user interface with smoother animations and a more cohesive design. Performance optimizations ensure faster multitasking, and new privacy features give users greater control over their data. Enhanced machine learning capabilities make applications smarter and more intuitive. Additionally, macOS Sequoia includes new productivity tools, better compatibility with iOS and iPadOS, and expanded support for developers with updated APIs and frameworks. This update offers a glimpse into the future of macOS, combining powerful features with a seamless user experience.

Apple Intelligence

Apple Intelligence uses advanced machine learning and AI to create smarter, more intuitive experiences across all Apple devices. It powers features like Siri, which offers personalized assistance, and the Photos app, which organizes and curates your photos. Apple prioritizes user privacy by processing as much data as possible on the device. Intelligent recommendations in the App Store, Apple Music, and News apps enhance user engagement by learning from your preferences. Apple Intelligence aims to make technology interactions more natural, efficient, and personalized.

Designing for iOS

Designing for iOS means creating clean, intuitive, and visually appealing user interfaces that follow Apple's interface guidelines . This includes using clear typography, consistent icons, and balanced layouts for a smooth user experience. The focus is on clarity and simplicity, with careful attention to spacing, alignment, and color schemes for a cohesive look. Using tools like Figma, designers can create detailed prototypes to visualize the app's flow and functionality. The goal is to craft designs that are both aesthetically pleasing and easy to navigate and use.

iOS 18 and iPadOS 18 UI Kit

We’re going to use Apple’s iOS 18 and iPadOS 18 UI Kit to help you quickly create accurate iPhone and iPad designs. It includes components for common controls, design templates, text styles, color styles, materials, and layout guides. New features include:

• Color variables for system colors
• Modes for switching between app icon styles
• Updated app icon artwork
• Examples page
• New iPadOS floating tab bar
• Improved instance properties for customization
• New Control Center and Lock Screen components with customizable controls

Large Titles

Bold fonts have become more common, with titles appearing large and bold. This change is due to taller screens and the need for accessibility. In iOS, users can set very large fonts for apps that support accessibility, including all of Apple's built-in apps. This feature has become an expected standard for users.

Cards

With larger screens, there's more room to showcase content. Using cards can help organize different sections more effectively. Rounded corners on these cards give them a tactile and friendly feel. To add depth and context to your design, you can incorporate blurred backgrounds and drop shadows.

Colors

Use noticeable colors to show that an element can be tapped or highlighted. For buttons and states, blue is a dependable and safe option. It's also a good idea to start with a light background and black text, or a dark background with white text for dark mode, creating strong contrast for readability.

iOS Palette

Apple employs specific colors in their native apps. Blue is the most commonly used color across the system, representing buttons, icons, and actionable elements. Other colors establish brand identity, such as yellow for Notes, pink for Apple Music, and green for Messages. Red typically indicates destructive actions, while green signifies successful actions.

System Colors

System colors are predefined colors provided by Apple to ensure consistency and accessibility across different apps and interfaces. These colors automatically adapt to various system settings, such as light and dark modes, providing a seamless user experience.

Gradients

A color gradient is a gradual change from one color to another, and it can include multiple shades. Gradients are also called color transitions. They can smoothly blend similar colors or create a contrast between very different ones. Different types of gradients can be chosen: linear , radial , angular, and diamond . Each type provides distinct ways to add gradient effects to your design.

Layout Design

Layout is the arrangement of visual and textual elements on a screen. It organizes these elements to create a clear, visually appealing interface. Effective layout design ensures content is easy to read and navigate, using principles like alignment, visual hierarchy, and spacing to guide the user's attention and create a logical flow. In iOS 18 design, a well-structured layout enhances usability and provides a seamless user experience.

8 pt layout grid system

The 8 pt grid system is a common UI design method that uses 8-pixel increments for spacing and sizing elements. It ensures consistency, alignment, and easy scalability across different devices. By using this system, designers can create clean, organized, and visually appealing layouts that work well on any screen size. This approach simplifies the design process and improves collaboration with developers, making it easier to maintain a uniform look and feel throughout the app.

Spacing and Padding

Spacing and padding are crucial for creating a clean and organized interface in iOS 18. Consistent spacing between elements ensures a clutter-free layout, making it easy for users to navigate. Padding within elements, like buttons and text fields, keeps content legible and touch-friendly. Apple recommends using margins and padding between 16 and 20 points to maintain a cohesive look. Proper use of negative space helps separate sections and prevents visual overload. By following these guidelines, designers can create balanced and user-friendly interfaces.

Margin and Safe Area

Use negative space to draw attention to content, creating breathing room and preventing visual clutter. Apple typically uses margins between 16 and 20 pt. The safe area defines the area within a view that isn’t covered by a navigation bar, tab bar, toolbar, or other views.

Navigation

Navigation directly impacts user experience and usability. Well-designed navigation ensures users can easily find their way around the app, reducing confusion and frustration.

Navigation bars

The navigation bar, located at the top of the screen, often contains a title or logo and navigation buttons. It helps users navigate back to previous screens or access additional options. visionOS uses a variable blur in the bar background, anchoring the bar above scrolling content.

Tab Bar

A tab bar is a row of tabs typically placed at the bottom of the screen, allowing users to switch between different sections or views with a single tap. It’s recommended to use up to five tabs in iOS and up to six tabs in visionOS, iPadOS, and tvOS.

Sidebar

A sidebar is a panel next to the main content area, offering extra navigation, options, or additional information. It usually shows a list of sections, categories, or menu items for easy access.

Buttons

Buttons should be easy to tap and range from 30 to 60 points wide, with sufficient space around them for visibility and distinction from other screen elements. Standard iOS interfaces recommend buttons be at least 44x44 points . iOS and iPadOS have four button styles, each available in three sizes, with different levels of visual prominence.

Icons

Icons should be clear and easy to understand. Use text whenever possible to make their meaning clearer. Avoid using different versions of the same icon in different places to prevent user confusion.

SF Symbols 6

SF Symbols is Apple’s extensive icon library, offering over 6,000 symbols designed for consistency and accessibility. SF Symbols 6 adds enhanced animations, improved annotation tools, and over 800 new symbols. Download and install the SF Symbols App from the Apple Developer website.

What’s New in SF Symbols?

This year, Apple has introduced exciting updates to SF Symbols. Three new animation presets—Wiggle, Rotate, and Breathe—make icons more dynamic and engaging. Existing presets like Replace and Variable Color have also been enhanced for smoother transitions and animations. The SF Symbols app has been updated with better tools for creating and customizing animated symbols. Additionally, over 800 new symbols have been added, bringing the total to over 6,000 unique icons, giving designers a wide range of options to enhance their designs.

Typography

Typography is essential for clear and visually pleasing communication. With a simple interface and focus on content, typography will occupy a large part of the screen. The default San Francisco font is recommended for its legibility and consistent use in Apple apps.

Line Height

It's also important to consider the line height, or the spacing between lines of text. A good line height can improve readability and reduce eye strain. A general guideline is to use a line height of 1.5 times the font size, but this can also vary depending on the font and layout.

Line Length

Line length is crucial in typography, affecting how easily text is read. It refers to the width of the text block or characters per line. If too short, the text becomes disjointed and difficult to follow. If too long, readers may lose their place and experience eye fatigue. Optimal line length depends on typeface, font size, and leading. Generally, 45-75 characters per line are best for most typefaces and sizes. Larger fonts or display types may need shorter lines for readability.

Legibility

The text should be easy to read at any size. Use font sizes and weights that ensure readability for most people. For iOS, use a minimum font size of 11 pt. Avoid using light font weights; choose Regular, Medium, Semibold, or Bold weights instead.

Hierarchy

Use different font sizes, weights, and styles to create a clear visual hierarchy. This helps users understand the content structure and navigate it easily. Typography hierarchy arranges and organizes text visually to guide the reader's attention and show the importance of different elements.

Contrast

To make text easy to read, it's important to have enough contrast between the font and the background. Using black or white colors is usually a safe option as they create strong contrast with most color schemes.

Font Weights and Widths

These are all the new available Widths in SF, which, when combined with the existing Weights, unlock an abundance of possibilities. This expansion introduces a diverse range of voices and functionalities, catering to a wide range of applications.

Dynamic Type

Dynamic Type is an essential feature that allows users to adjust the text size across the system to suit their reading preferences. When designing for iOS 18, ensure that your app supports Dynamic Type by using the built-in text styles provided by Apple. This ensures that your text remains readable and accessible, regardless of the user's preferred text size.

Accessibility is a prominent theme in iOS design. Apple provides dynamic font presets that automatically adjust the text size based on the user's preferences. For example, if you set your text to Body and enable Dynamic Type, the system will increase the size based on the user's settings.