Beginning Adobe Experience Design (eBook)

Rob Huddleston has been designing and developing web pages for almost 25 years, and has been teaching on those topics for over 15 years. He is currently on the Design Faculty at the Art Institute of California, where he teaches web and graphic deisgn. He is the author of nine previous books, and currently also writes as a Core Contributor for GeekDad.com. He lives in Northern California with his wife and two children.

Contents at a Glance 5
Contents 6
About the Author 12
About the Technical Reviewer 13
Acknowledgments 14
Chapter 1: Overview of the Web and Mobile Design Process 15
The Challenges of Designing for the Web 15
The Web Wasn’t Designed for Design 15
Designing for Screens 16
Designing for Interaction 17
Mobile App Design 17
Using Comps and Prototypes to Design Live Sites and Apps 18
Summary 19
Chapter 2: Introduction to Adobe Experience Design 20
Adobe XD in the Workflow 20
Downloading and Installing Adobe XD 21
New Document Setup 27
The Design Workspace in Adobe XD 28
The Prototype Workspace 32
Using the Keyboard 32
Basic Keyboard Shortcuts 32
Selecting Tools 33
Switching Workspaces 33
Zooming With the Keyboard 34
Other Useful Keyboard Commands 34
Summary 34
Chapter 3: Using XD’s Drawing Tools 35
Adding Shapes 35
Rectangles 35
Ellipses and Lines 38
Shapes and the Properties Panel 39
Alignment 39
Smart Guides 40
Combining Objects 40
Size and Position 40
Appearance 41
Stacking Order 44
Using the Context Menu 44
Mac Menus 45
Changing Opacity 46
Working with Layers 46
Changing Stacking Order with Layers 47
Selecting and Grouping Objects 47
Renaming Objects 48
Locking and Hiding Layers 48
Combining Objects into Symbols 49
Using Symbols 50
Editing Symbols 51
Deleting Symbols 51
Drawing Objects with the Pen Tool 51
Straight Lines 51
Curves 53
Modifying Paths 54
Putting It Together 56
Drawing the Header and Footer 57
Creating the Navigation Bar 58
Summary 61
Chapter 4: Working with Text 62
Beginning a Logo 62
Understanding Fonts on the Web 63
Downloading a Web Font from Google 64
Installing Fonts on Windows 67
Installing Fonts on a Mac 67
Using New Fonts in XD 68
Formatting Text 68
Font Size 68
Font Styles 69
Alignment 69
Character and Line Spacing 69
Appearance 69
Text Best Practices 70
Adding More Text to the Design 70
Finalizing the Logo 71
Adding Navigation Text 73
Add a Copyright Notice to the Footer 77
Summary 78
Chapter 5: Working with Images 79
Image File Types 79
Importing Images 80
Importing on Windows 80
Importing on a Mac 80
Importing with Drag and Drop 80
Importing with Copy and Paste 80
Importing the Main Images to the Design 80
Scaling and Rotating Images 84
Scaling the Main Images 85
Working with SVG 88
Finishing the Navigation Bar 95
Creating Calls to Action 98
Summary 104
Chapter 6: Creating New Pages with Artboards 105
Artboard Basics 105
Renaming Artboards 105
Creating a New Artboard 106
Selecting, Resizing, and Moving Artboards 108
Duplicating Artboards 109
Using Artboards to Set Up Designs for Mobile Devices 111
Summary 113
Chapter 7: Organizing Content Using Content Grids 114
Creating Placeholders for a Grid 114
Creating a Repeat Grid 120
Adding Padding to a Grid 122
Adding Content to a Grid 125
Manually Updating Placeholders 125
Automatically Updating Placeholders 125
Creating a Text File in Windows 125
Creating a Text File on a Mac 127
Adding Text to Replace Placeholders 128
Populating Repeat Grids with Text Files 129
Adding Images to Placeholders 131
Formatting Placeholders That Contain Data 134
Fixing Incorrect Placeholder Replacement 145
Creating a Second Page with a Repeat Grid 145
Deleting Extra Placeholders 149
Summary 151
Chapter 8: Designing for Mobile 152
Responsive Web Design Overview 152
Creating App Designs 153
Creating Mobile Web Designs 154
Virtual Keyboards 156
The Hamburger Menu 156
Using a UI Kit 157
Summary 160
Chapter 9: Creating Interactive Prototypes 161
Switching to the Prototype Workspace 161
Creating Links 162
Interaction Limitations 164
Previewing Prototypes 166
Desktop Preview 166
Mobile Preview 169
Share Online 171
Using Prototypes for Usability Tests 174
Summary 174
Chapter 10: Next Steps 175
Exporting Assets 175
Exporting All Artboards 180
Working with Developers 180
Summary 181
Index 182