App Design Apprentice

The best book to guide you through designing modern mobile-app UI and UX using fundamental design principles. By Prateek Prasad.

Read for Free with the Personal Plan* * Includes this and all other books in our online library See all benefits

Buy Individually $59.99* *Includes access to all of our online reading features.

Leave a rating/review

Download materials

Buy paperback—Amazon Comments

Save for later

Who is this 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 with attractive and effective UI and UX.

Covered concepts

Figma
App Teardowns
Wireframes
Reusable Components
Typography
Color
Transitions & Animations
Design Systems

Learn Modern App Design with Figma!

This book guides you through designing modern mobile apps using fundamental design principles.

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 with attractive and effective...

Before You Begin

This section tells you a few things you need to know before you get started, such as what you’ll need for hardware and software, where to find the project files for this book, and more.

What You Need

Book Source Code & Forums

iii

Dedications

About the Team

Acknowledgements

Section I: Design & Tool Fundamentals

Start your journey through designing modern mobile-app UI and UX using fundamental design principles!

Book Overview & App Preview

Get an overview of the book including a brief look at what’s coming up in each chapter. Set up your Figma design workspace and learn how to access the project files. Jump in and get started right away with a quick project.

Workspace Tour & Figma Fundamentals

Get an introduction to key tools in Figma like shapes, frames, sizing, alignment, colors and layers and apply your learnings to design a screen from scratch.

App Teardowns

Trace over provided screenshots for two popular apps to study their layout and identify patterns and structures used to build them.

Section II: Components & Design Systems

Decompose screens into small reusable components. Learn how to build a flexible and extensible design system while picking up the nuances of typography & color theory.

Wireframing & Screen Layout

Learn about the importance of wireframing and how to incorporate it into your design process. Create wireframes of a few screens and their components and build a scaffold of the app flow by defining the navigation between screens.

Reusable Elements & Data

Learn to build reusable components for common UI elements like buttons, toolbars and content cards. Incorporate sample text and image data for more realism. Leverage reusable components for faster iterations and to build more flexible designs.

Typography

Learn typography basics for communicating hierarchy, order and emphasis. Use Figma's text style feature to build a typographic scale from scratch.

Colors

Learn the basics of color theory and the importance of colors in building accessible and inclusive products. Use Figma's color style feature to build reusable color styles from scratch.

Design Systems

Learn about design systems and how they help introduce structure, coherence and flexibility into your projects.

Section III: Interactive prototypes & Developer Handoff

Build an interactive prototype that gives a feel of the product. Share your designs to gain feedback and promote collaboration. Explore built-in tools for developer handoff

Transitions & Animations

Explore the prototyping tools to create a full app walkthrough. Create different transitions between screens to communicate the relationship among elements.

Feedback & Testing

Explore the collaboration tools to test designs and solicit feedback about the app's goals and overall user experience.

Insights & Next Steps

A recap of what you learned the previous chapters and suggestions about where to go from here to improve your design skills.

Conclusion