Design+Code logo

Quick links

Suggested search

illustration

Intro to iOS Design

icon

Add to favorites

Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications

play icon

Play video

cancel

Intro to iOS Design image 1

Figma File

https://www.figma.com/community/file/1220022786856032423

Midjourney

What's amazing about AI is that we can take inspiration from Midjourney and transform the generated image into a beautiful UI design. I will teach you how to use Midjourney, an AI-based platform that assists artists and designers in creating high-quality digital content quickly and easily, to generate images.

Intro to iOS Design image 2

What are we designing?

We will be designing a music maker app. As we progress through the design process, we will explore deeper levels of design to create an immersive and visually stunning 3D keyboard piano, layouts, and buttons in a neumorphism style. By incorporating elements such as soft shadows and gradients, we can create a sense of depth and realism that will elevate the user experience to new heights.

Intro to iOS Design image 3

Primary Goal

The primary goal of app UI design is to provide users with a seamless and enjoyable experience. This is achieved through a deep understanding of user behavior, preferences, and the app's purpose, features, and functionalities. On the other hand, a poorly designed UI can cause frustration and dissatisfaction among users. Therefore, it is crucial for designers to understand UI design principles and best practices.

Intro to iOS Design image 4

UI/UX Design

Designing an application involves more than just creating a visually appealing interface. It also requires crafting a seamless user experience that encompasses both UI and UX design. UI design focuses on the visual elements that users interact with, while UX design is concerned with the overall experience of the user. By combining these two elements, app designers can create application that not only looks great but also provides an intuitive and satisfying user journey.

Intro to iOS Design image 5

UI Design Tools

UI design tools are software applications used to create digital designs, prototypes, and design systems for websites, mobile apps, and other digital products. Popular UI design tools include Figma, Sketch, and Adobe XD. These tools offer a range of features for creating vector graphics, wireframes, interactive prototypes, and design systems. Today, we will use Figma to design the UI of our app.

Intro to iOS Design image 6

iOS/Android Guidelines

When designing mobile apps, it's important to consider the platform. Both iOS and Android have their own guidelines for building app UI design, so following them is essential for creating an app that looks great and provides an intuitive user experience. Today, we'll focus on designing for iOS. If you're interested in designing for Android, we encourage you to read the Android design guidelines to better understand the platform and its design principles.

Intro to iOS Design image 7

iOS 16 UI Kit

The iOS 16 UI kit for Figma by Joey Banks offers pre-made design elements like icons, buttons, and UI components for creating iOS app designs. This kit speeds up design, ensures consistency across designs, and meets iOS requirements. We'll use it for the status bar, home indicator, and tab bar.

Intro to iOS Design image 8

Figma Community

The Figma Community is a great resource for design inspiration and materials. It's a platform where designers can discover and share design resources such as templates, UI kits, and icons. Additionally, it offers design systems, wireframes, and illustrations. Users can collaborate on projects and receive feedback from others.

Intro to iOS Design image 9

Icons

Icons provide visual clarity and convey messages or ideas quickly without requiring written text. They occupy less space than text, making them ideal for compact interfaces like mobile devices. Icons can make interfaces more user-friendly by reducing the need for written instructions and adding visual interest to designs.

Intro to iOS Design image 10

Typography

Good typography is essential for clear and visually appealing language. It determines how viewers interpret visual content and plays a significant role in engagement. Typography selection goes beyond just fonts to include size, style, spacing, and alignment. The right choices clarify the information hierarchy, highlight essential content, and convey brand identity.

Intro to iOS Design image 11

Colors

Color plays a critical role in app design, as it can impact everything from the user's mood and emotions to the accessibility of the app. Choosing the right colors is key. We will also cover color styles.

Intro to iOS Design image 12

Components

Components allow you to create and reuse design elements, speeding up the design process and maintaining consistency. When building interfaces, we frequently use instances of components for objects such as icons, buttons, and cards. The Instance menu enables you to quickly search, preview, and replace one component with another.

Intro to iOS Design image 13

Figma File

To follow this course, you must begin with my Figma file. Create a new page from the left menu and design it on this page. All color styles, gradients, text styles, icons, wireframes, and components have already been created, making them useful for the rest of the course.

Intro to iOS Design image 14

READ NEXT

Inspirations and Wireframing

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Videos

Subtitles

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Sourasith Phomhome

UI Designer

Designer at Design+Code

icon

19 courses - 74 hours

course logo

Design Multiple Apps with Figma and AI

In this course, you’ll learn to design multiple apps using Figma and AI-powered tools, tackling a variety of real-world UI challenges. Each week, a new episode will guide you through a different design, helping you master essential UI/UX principles and workflows

4 hrs

course logo

SwiftUI Fundamentals Handbook

A comprehensive guide to mastering Swift programming fundamentals, designed for aspiring iOS developers. This handbook provides a structured approach to learning Swift's core concepts, from basic syntax to advanced programming patterns. Through carefully sequenced chapters, readers will progress from essential programming concepts to object-oriented principles, building a solid foundation for SwiftUI development. Each topic includes practical examples and clear explanations, ensuring a thorough understanding of Swift's capabilities. This handbook serves as both a learning resource and a reference guide, covering fundamental concepts required for modern iOS development. Topics are presented in a logical progression, allowing readers to build their knowledge systematically while gaining practical programming skills.

1 hrs

course logo

Design and Code User Interfaces with Galileo and Claude AI

In this course, you’ll learn how to use AI tools to make UI/UX design faster and more efficient. We’ll start with Galileo AI to create basic designs, providing a solid foundation for your ideas. Next, we’ll refine these designs in Figma to match your personal style, and finally, we’ll use Claude AI to turn them into working code—eliminating the need for traditional prototyping.

4 hrs

course logo

Build a React Native app with Claude AI

This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity.

13 hrs

course logo

Design and Prototype for iOS 18

Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant.

3 hrs

course logo

Master Responsive Layouts in Figma

Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma.

2 hrs

course logo

UI UX Design with Mobbin and Figma

Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts.

2 hrs

course logo

3D UI Interactive Web Design with Spline

Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites

3 hrs

course logo

Design and Prototype for iOS 17 in Figma

Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.

6 hrs

course logo

Design and Prototype Apps with Midjourney

A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools

8 hrs

course logo

iOS Design with Midjourney and Figma

Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications

1 hrs

course logo

UI Design for iOS, Android and Web in Sketch

Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app

1 hrs

course logo

UI Design a Camera App in Figma

Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons.

1 hrs

course logo

UI Design for iOS 16 in Sketch

A complete guide to designing for iOS 16 with videos, examples and design files

3 hrs

course logo

Prototyping in Figma

Learn the basics of prototyping in Figma by creating interactive flows from custom designs

1 hrs

course logo

UI Design Quick Websites in Figma

Learn how to design a portfolio web UI from scratch in Figma

1 hrs

course logo

UI Design Android Apps in Figma

Design Android application UIs from scratch using various tricks and techniques in Figma

2 hrs

course logo

UI Design Quick Apps in Figma

Design application UIs from scratch using various tricks and techniques in Figma

12 hrs

course logo

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs

Test your knowledge of iOS Design with Midjourney and Figma. Complete the course and get perfect results for this test to get your certificate.