The UI Professional's Design Manual

100+ High-quality app screens included iOS Theory | Fintech Ul Kit | Auto-layout ready | UX/UI Design Templates | Style Sheet | Design System | Figma Practice Files Nice to meet you, friend! Why did we write this ebook? You might be thinking, why am I going through the basic principles of iOS if this e-book is all about designing an app? A quick encouragement for my designer newbies 4 Who is this ebook for? Why use this ebook format? Resources list 2. A brief history of UX Ulis not UX, UX Is notui The UX without the U User experience User The unknown Ul designers - what do they do? A user interface is like a joke. If you have to explain it, it’s not that good. Where do Ul and UX fit in all of this? Ul Designer X Product Designer Motion designer Interaction Designer (IXD) *i Scrum Master Product owner iB UX Researcher Д Web designer if UX Copywriter 1 4. Good vs bad designer What do you need to be a good designer? It’s because good design is invisible. What defines a good designer? Innovative approach Problem-solving capabilities A good sense of aesthethics Attention to detail Meticulously organised Empathetic How to understand design Know the basic principles of Ul design Know the system you’re designing for Know your design tools What makes design good? So how can you tell if a design is good or bad? Choose a balance to open 5. How to get better at design fast Why copying work is so effective? Where to find apps to replicate? Case study websites Behance & design agencies websites The truth about Dribbble My top pick to find real inspiration Practice makes progress. Each drawing one makes, each study one paints, is a step forward. 6. Intro to iOS Design Let’s talk about colors How to pair colors iOS Color palette Dynamic System Colors Neutral tones Contrast Handy color tools iOS Typography The phrase 'The quick brown fox jumps over the lazy dog.' shown in San Francisco Pro. The phrase 'The quick brown fox jumps over the lazy dog.' shown in New York. iPhone Typography Guidelines Body Font Font Weight Adaptivity and Layout Auto layout basics Why should you use auto-layout? Screen Size Pixels vs Points Layout guides and safe areas status bar margin What’s your email? Touch targets Thumb zone Navigation elements placement iOS Materials Background blur’s do’s and don’ts Bring in the focus System defined materials Vibrance 7. iOS 15 native elements iOS status bar iOS home indicator iPhone 6,7,8, SE Navigation bar titles Search bar Activity views 8. Let’s talk about Figma What exactly is Figma? Download Figma or fire it up! The Interface Frame R for rectangle, L for line, О for the eclipse. Pen tool Hand tool Comment tool Project names and hierarchy Assets 9. Auto layout 4.0 What exactly is auto layout? Practice auto layout with Figma Resizing text layers We’ll need to access your camera before continuing Resizing auto layout containers Fixed width and height Hug content Fill container 10. What are constraints in Figma? Practical use of constraints Types of constraints 11. Fintech Ul Kit 12. Intro to the project 13. Project brief Our MVP Objectives are as follows: Our core user stories: 14. Our UX approach Lean UX Why Lean UX and not Design Thinking approach? What are the differences and similarities between the Design Thinking and Lean UX approaches? How is Lean UX different from traditional UX 15. Our design framework overview 16. Market research The market expectations 17. The overview of our UX process User persona User journeys Information Architecture User flows Why should we use user flows? How it Is different from Information Architecture? Competitor’s UX Audit Supposing is good, but finding out is better. What exactly can we achieve by a competitive analysis? Paper sketches Should you use paper prototyping? Wireframes Low fidelity wireframes Mid fidelity wireframe 18. Inspiration vs. mood boards Inspiration board Where to find inspiration for your project? Mood board How to create a mood board? Mood board no. 1 - Dark Pastels Light / Gray + Green accents looking good! 19. Let’s create our style guide Color palette Primary color Logo System colors (iOS) SmartBank Layout grid Imagery and visuals Avatars Icon pack Brand identity guidelines (simplified) Brand colors Mono color logo 20. The mobile grid How to create grids? 60px 24px 21. A few words before we start designing 22. Your practice files setup iOS 15 Ul Kit UX and Ul design templates Auto layout training file Fintech Ul Kit Fintech practice files 22. A few words before we start designing Image Resolution Images and illustrations Buttons "Shift" + "A" Launch Screens - the theory SmartBank The launch screen essentials Make it short and concise Take it up a notch Use a skeleton Launch Screen - the structure Design checklist you should follow Chapter recap Onboarding - the theory Guided Tours Personalization wizard Walkthrough screens Our onboarding experience - Walkthroughs Illustrations Spend smarter every day, all from one app. Onboarding - structure The structure of an onboarding screen 1. Text Container Spend smarter every day, all from one app. 2. Images and illustrations 48 px 64px 3. Buttons 4. Home indicator Chapter recap Sign up - the theory The building blocks of a sign-up screen Back button Continue button Error state and messages Login page Confirm email flow Confirmation successful Sign up - structure 1. Text Container 2. Input Field 343 px 4. Acceptance text + Buttons Confirm your email 1. Image 2. Text Container Confirm your email Confirm your email 40px 48px Chapter recap THE INTRO Account setup - the theory The building blocks of a welcome screen Choose account The building blocks of the choose your account screen Country of primary residence Account setup - the structure Choose account 1. Text Container 2. Cards Container How to really understand auto layout Text Country Input Field Chapter recap THE INTRO Phone Verification - the theory The building blocks of a phone verification screen Verify your phone number Create a passcode Why passcode and not Face ID? Phone Verification - the structure Phone number input field Constraints “Left and Right” and “Top.” For the completed screen, let’s change our button style to "Primary” and our input field type to “Number + Cancel.” We’ve verified your phone number splash Passcode screens Feeling lost? Chapter recap Personal details - the theory The building blocks of a phone verification splash Skip the verification reminder Personal details Address Information 1. Anchor button Enable notifications screen Enable notifications Get instant payment notifications! Push notifications Tell us about yoursel THE STRUCTURE Input field component variants 1. Text Container 2. Input Field 3. Continue button + IOS Keyboard Tell us about yourself 16 px Enable notifications screen Chapter recap Verify identity - the theory Verify your identity methods Alert messages - what text to use "SmartBank" would like to Access the Camera Verify your identity - confirm picture Uploading screen Adrian, we’ll need to I verify your identity THE STRUCTURE Personal details - the structure 24 px 16 px 48 px 48 px 8px Verify your identity 8px Verify your identity 1. Title Container 2. Cards Container Passport 3. Checklist container Allow camera access Verify your identity 1. Centered title container 2. Camera preview 3. Camera button 40 px Verify your identity - Confirm screen Chapter recap Selfie verification - the theory How can we avoid this situation? Take a selfie! Video selfie Uploading - confirmation screen Verification in progress Sweet! We’r( ver'fying you Selfie - the structure Business account We’re verifying your identity now Verification states Chapter recap Cards - the theory The building blocks of a wizard screen Create your virtual or physical card splash 1. Type of card 9:41 .■Il '9' Virtual card is ready Why Apple Wallet? Apple Pay integration Personal details - the structure Create your own card iOS Segmented Picker Your virtual credit card Auto-layout shortcuts A few words about the UX behind this project Chapter recap Top up account - the theory Top up the account 1. Debit or credit card Debit or credit card c50 £OUI 2. Open banking transfers What's open banking anyway? Share details Personal details - the structure Top up the account Passport Debit or credit card Debit or credit card Card in your name Error states Get account details Chapter recap THE INTRO Home screen - the theory The evolution of Revolut 1. Top Navigation bar 2. Account balance(s) 5. Scheduled Deposits - Insights Cards Insights iOS Transparency and blur TME STRUCTURE Account balance card You have $0.00 in scheduled deposits every month Chapter recap Open a balance - first login First login - limited functionality Choose a balance to open X New account added Slider navigation Additional account buttons THE STRUCTURE Open Balance - the structure Open a balance card Choose a balance Meatballs menu popup Chapter recap THE INTRO Money transfers 1. Title 2. Segmented controls 3. Active account card 1. Account name 2. Account balance 3. Account number 4. Action button 4. Recipient 5. Transfer details 6. Transfer amount 7. Transfer date How to access transfers? Who are you sending to? THE STRUCTURE 56px 16px Transfer money - structure Label container and segmented picker Transfer from Recipient information Chapter recap THE INTRO App settings - intro What design practices should be ensured for better UX? Group Categories Visual Hierarchy Naming conventions Define default settings Personalization Important settings Profile Account details My Accounts Languages THE STRUCTU RE Profile settings - structure 8px 36px 36px iOS Blur Settings Account details Languages Chapter recap Profile avatar Uploading an avatar iOS Alert message Photo library access iOS Bottom Sheet Camera access Part 2 of the Pratical Design Manual is coming soon! 22. The design hand-off 23. What’s next for you? Now it’s time for you to put this knowledge into practice. Design, design a lot Start building your portfolio How to get noticed? What about Instagram? Is LinkedIn really that good? Behance I’ve got a little bonus for you! 24. This is it! H Don’t forget about the rating on Gumroad! More is coming soon!