App Design Apprentice : A Non-Designer's Guide to Making Better Mobile UI & UX

✍ Scribed by raywenderlich Tutorial Team, Prateek Prasad

• Publisher: Razeware LLC
• Year: 2022
• Tongue: English
• Leaves: 291
• Edition: Second
• Category: Library

✦ Synopsis

Learn modern app design with Figma!

App Design Apprentice guides you through designing modern mobile apps using fundamental design principles. If designing better UI and UX for mobile apps sounds difficult and time-consuming, don't worry, we've got you covered.

Who This Book Is For

This book is for intermediate iOS and Android developers who already know the basics of mobile app development but want to also learn how to design apps that look good.

Topics Covered in App Design Apprentice

• Figma: Learn the basics of a modern design tool.

• App Teardowns: Analyze and pick out the best parts of other well-designed apps.

• Wireframes: Explore what makes good app user flows.

• Reusable Components: Learn to create and use reusable components such as buttons and toolbars.

• Typography: Basics for communicating hierarchy, order, and emphasis.

• Color: How to create visual styles and palettes.

• Transitions and Animations: Create different transitions between screens to communicate relationships.

• Design Systems: Best practices for creating good app experience in each ecosystem.

One thing you can count on: After reading this book, you'll have the knowledge needed to design modern mobile apps that are functional and look good.

✦ Table of Contents

Book License
What You Need
Book Source Code & Forums
About the Authors
About the Editors
Acknowledgements
Content Development
Image Credit
Chapter 1: Book Overview & App Preview
Why Design Matters
About This Book
Chapter Summaries
Setting up Figma
Taking Figma for a Spin
Key Points
Chapter 2: Workspace Tour & Figma Fundamentals
Exploring the Figma Interface
Starting With a Frame
Adding Shapes
Aligning Layers
Creating Cinematic’s Login Screen
Constraining the Layers
Key Points
Chapter 3: App Teardowns
Loading the Starter File
Key Points
Chapter 4: Wireframing & Screen Layout
The Importance of Wireframing
Defining the App’s Concept
Designing the Movies List
Components
Reviewing the Current List Implementation
Filtering the List
Designing the Movie Detail Screen
Implementing the “Add to Watchlist” Feature
Key Points
Chapter 5: Reusable Elements & Data
Visualizing When to Use Components
Getting Started
Organizing With Pages
Reusing and Restyling Components
Creating the Rating Component
Exploring UI Kits & Plugins
Designing the Movie Details Screen
Adding the Cast Section
Adding the User Ratings
Adding Movie Recommendations to the Details
Challenge
Key Points
Chapter 6: Typography
Understanding Typography
Mastering Typographical Jargon
Building a Typographic Scale
Getting Started
Defining the Base Text Style
Text Styles
Creating Text Styles
Handling the Bottom Navigation
Key Points
Chapter 7: Colors
Basics of Color Theory
Color Schemes
Building Your Palette
Applying the Color Styles
Advantages of Color Styles
Key Points
Chapter 8: Design Systems
Understanding Design Systems
Organizing the Colors
Improving the Typography Page
Cleaning up the Icons
Handling Code Generation and Asset Exports
Where to Go From Here?
Key Points
Chapter 9: Transitions & Animations
Previewing the Finished Version
Breaking Down the Transitions
Setting up the First Navigation
Handling the Add to Watchlist Button
Making the Bottom Navigation Interactive
Animations & Animation Interpolators
Implementing the Navigation Animations
Using Animations Thoughtfully
Key Points
Chapter 10: Feedback & Testing
Soliciting Feedback
Preparing the Prototype for Testing
Leaving Feedback on Design Files
Designing the Filter Feature
Creating the Movie List Iteration
Key Points
Chapter 11: Insights & Next Steps
Recapping the Book
Where to Go From Here?
Conclusion