You are previewing Designing for iOS with Sketch.
O'Reilly logo
Designing for iOS with Sketch

Book Description

Designing for iOS with Sketch takes you through the process of designing your iOS app using Bohemian Code’s Sketch. Sketch is a powerful new design program that is quickly replacing Adobe PhotoShop for many designers designing for mobile apps and the mobile web. This book will introduce you to the program and then take you through the steps of designing your very own app. It includes examples and shortcuts as well as a helpful list of plugins and 3rd party resources that will greatly improve your workflow.

Table of Contents

  1. Cover
  2. Title
  3. Copyright
  4. Dedication
  5. Contents at a Glance
  6. Contents
  7. About the Author
  8. About the Technical Reviewers
  9. Acknowledgments
  10. Chapter 1: Why Sketch?
    1. A Bit of History
    2. Enter Sketch 2
      1. Sketch Mirror
      2. Bye, Bye Fontcase . . .
    3. Apple Design Award
    4. Sketch 3
      1. The Sketch 3 Interface
      2. Raster vs. Vector
      3. Community
    5. iOS9
      1. App Switcher
      2. New Navigation for Photos
      3. New Back Button
      4. New System Font: San Francisco
    6. The Apple Watch
    7. Summary
  11. Chapter 2: Getting Started with Sketch
    1. Installation
    2. Opening Sketch
    3. The Canvas
    4. Toolbar
      1. Customizing the Toolbar
    5. Layers
      1. Selecting and Moving Layers
      2. Duplicating a Layer
      3. Hiding and Locking Layers
      4. Groups
      5. Inspector
      6. Styles
      7. Smart Guides
    6. Artboards
    7. Rulers and Guides
      1. Show Pixels
      2. Show Rulers and Guides
      3. Show Grid
      4. Show Layout
      5. Shortcuts
      6. Custom Shortcuts
    8. Summary
  12. Chapter 3: Styling Shapes
    1. Special Shapes
    2. Editing Points on Shapes
      1. Straight Mode
      2. Mirrored Mode
      3. Disconnected Mode
      4. Asymmetric Mode
    3. Combined Shapes
    4. Custom Shapes
    5. Boolean Operations
      1. Union
      2. Subtract
      3. Intersect
      4. Difference
    6. Masks
      1. Outline Mask
      2. Alpha Mask
    7. Flattening
    8. Scaling
    9. Styles
      1. Fills
      2. Gradients
    10. Blending
      1. Opacity
      2. Shadows
    11. Blurs
      1. Gaussian Blur
      2. Motion Blur
      3. Zoom Blur
      4. Background Blur
    12. Sharing Styles
    13. Images
    14. Color Adjust
    15. Summary
  13. Chapter 4: Symbols and Text
    1. iOS Template Symbols
    2. Text and Fonts
    3. The Text Inspector
      1. Text Alignment
      2. Text on a Path
    4. Text Outlines
    5. Anti-Aliasing and Text
    6. Text Styles
    7. Summary
  14. Chapter 5: Prepping for App Design
    1. The Human Interface Guidelines
    2. Deference
    3. Clarity
    4. Depth
    5. Devices and Resolutions
    6. Using Standard iOS Dimensions
    7. Summary
  15. Chapter 6: Optimizing Your Workflow
    1. Customizing Your Workspace
      1. Preferences
      2. Organizing Your Document
      3. Naming Layers and Symbols
      4. Creating a Custom Grid
      5. Presentation Mode
      6. Setting a Default Style
      7. Defining Your Color Palette
    2. The Rotation Tool
    3. Sketch Mirror
    4. Other Workflow Tools
      1. Flinto
      2. Flinto for Mac
      3. Marvel
      4. Dropbox
      5. InVision
    5. Summary
  16. Chapter 7: Wireframing Your App with Sketch
    1. The App
      1. The Splash Screen
      2. Onboarding
      3. Authentication
      4. E-mail Registration
      5. Home Page
      6. Preferences Page
      7. Profile Page
      8. Permissions
      9. Camera Capture
    2. Summary
  17. Chapter 8: Designing Your App
    1. Color
    2. Setting the Stage
    3. Splash Screen
    4. Onboarding
    5. Authentication
    6. E-mail Registration
    7. Home Page
    8. Settings
    9. Profile Page
    10. Permissions
    11. Camera Capture
    12. Summary
  18. Chapter 9: Designing Your App’s Icon
    1. What Makes a Great App?
      1. Avoid Words
      2. Use Colors Wisely
      3. Keep It Simple
      4. Be Inspired by Others
      5. Other Changes for Consistency
  19. Chapter 10: Exporting Your Assets for Development
    1. What to Export and What Not to Export
    2. The Knife
      1. Slicing from the Insert Menu
    3. Exporting Artboards
    4. Exporting Individual Assets
    5. Creating a Folder for Your Assets
      1. Trimming Backgrounds
    6. Summary
  20. Chapter 11: Sketch Resources
    1. Plug-ins
      1. Installing Plug-ins
      2. Sketch Toolbox
      3. GitHub
      4. My Favorite Plug-ins
      5. Other Resources
    2. Summary
  21. Index