Huddleston Beginning Adobe Experience Design

Quickly Design and Prototype Websites and Mobile Apps
1. ed
ISBN: 978-1-4842-2964-4
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 186 Seiten

Render high quality designs and interactive prototypes of web sites and mobile apps using Adobe XD's powerful drawing and layout tools. This book provides an in-depth look at XD and shows you how to quickly get up-to-speed to simplify these processes with intuitive design tools and a powerful prototyping function. 

Since the advent of the web, designers have struggled with the need to create functioning demo prototypes of their layouts and designs without an extensive amount of code for their clients. The dawn of mobile apps, which are exponentially more difficult to mock-up and demonstrate, has only intensified this problem. Beginning Adobe Experience Design resolves this for you with it's easy-to-use approach to leveraging XD. 

What You'll LearnCreate links and interactivity to see just how your site or app will function
Preview your site or prototype live in a web browser or your mobile device
Use Adobe XD on both Mac and Windows
Who This Book Is For
Web front-end designers and user experience professionals and educators interested in teaching the tool

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.

Autoren/Hrsg.

Huddleston, Rob

Inhaltsverzeichnis

1;Contents at a Glance;5
2;Contents;6
3;About the Author;12
4;About the Technical Reviewer;13
5;Acknowledgments;14
6;Chapter 1: Overview of the Web and Mobile Design Process;15
6.1;The Challenges of Designing for the Web;15
6.1.1;The Web Wasn’t Designed for Design;15
6.1.2;Designing for Screens;16
6.1.3;Designing for Interaction;17
6.1.4;Mobile App Design;17
6.1.5;Using Comps and Prototypes to Design Live Sites and Apps;18
6.2;Summary;19
7;Chapter 2: Introduction to Adobe Experience Design;20
7.1;Adobe XD in the Workflow;20
7.2;Downloading and Installing Adobe XD;21
7.3;New Document Setup;27
7.4;The Design Workspace in Adobe XD;28
7.5;The Prototype Workspace;32
7.6;Using the Keyboard;32
7.6.1;Basic Keyboard Shortcuts;32
7.6.2;Selecting Tools;33
7.6.3;Switching Workspaces;33
7.6.4;Zooming With the Keyboard;34
7.6.5;Other Useful Keyboard Commands;34
7.7;Summary;34
8;Chapter 3: Using XD’s Drawing Tools;35
8.1;Adding Shapes;35
8.1.1;Rectangles;35
8.1.2;Ellipses and Lines;38
8.2;Shapes and the Properties Panel;39
8.2.1;Alignment;39
8.2.2;Smart Guides;40
8.2.3;Combining Objects;40
8.2.4;Size and Position;40
8.2.5;Appearance;41
8.3;Stacking Order;44
8.3.1;Using the Context Menu;44
8.3.2;Mac Menus;45
8.4;Changing Opacity;46
8.5;Working with Layers;46
8.5.1;Changing Stacking Order with Layers;47
8.5.2;Selecting and Grouping Objects;47
8.5.3;Renaming Objects;48
8.5.4;Locking and Hiding Layers;48
8.6;Combining Objects into Symbols;49
8.6.1;Using Symbols;50
8.6.2;Editing Symbols;51
8.6.3;Deleting Symbols;51
8.7;Drawing Objects with the Pen Tool;51
8.7.1;Straight Lines;51
8.7.2;Curves;53
8.7.3;Modifying Paths;54
8.8;Putting It Together;56
8.8.1;Drawing the Header and Footer;57
8.8.2;Creating the Navigation Bar;58
8.9;Summary;61
9;Chapter 4: Working with Text;62
9.1;Beginning a Logo;62
9.2;Understanding Fonts on the Web;63
9.3;Downloading a Web Font from Google;64
9.3.1;Installing Fonts on Windows;67
9.3.2;Installing Fonts on a Mac;67
9.3.3;Using New Fonts in XD;68
9.4;Formatting Text;68
9.4.1;Font Size;68
9.4.2;Font Styles;69
9.4.3;Alignment;69
9.4.4;Character and Line Spacing;69
9.4.5;Appearance;69
9.5;Text Best Practices;70
9.6;Adding More Text to the Design;70
9.6.1;Finalizing the Logo;71
9.6.2;Adding Navigation Text;73
9.6.3;Add a Copyright Notice to the Footer;77
9.7;Summary;78
10;Chapter 5: Working with Images;79
10.1;Image File Types;79
10.2;Importing Images;80
10.2.1;Importing on Windows;80
10.2.2;Importing on a Mac;80
10.2.3;Importing with Drag and Drop;80
10.2.4;Importing with Copy and Paste;80
10.2.5;Importing the Main Images to the Design;80
10.3;Scaling and Rotating Images;84
10.3.1;Scaling the Main Images;85
10.4;Working with SVG;88
10.4.1;Finishing the Navigation Bar;95
10.4.2;Creating Calls to Action;98
10.5;Summary;104
11;Chapter 6: Creating New Pages with Artboards;105
11.1;Artboard Basics;105
11.1.1;Renaming Artboards;105
11.1.2;Creating a New Artboard;106
11.1.3;Selecting, Resizing, and Moving Artboards;108
11.1.4;Duplicating Artboards;109
11.2;Using Artboards to Set Up Designs for Mobile Devices;111
11.3;Summary;113
12;Chapter 7: Organizing Content Using Content Grids;114
12.1;Creating Placeholders for a Grid;114
12.2;Creating a Repeat Grid;120
12.3;Adding Padding to a Grid;122
12.4;Adding Content to a Grid;125
12.4.1;Manually Updating Placeholders;125
12.4.2;Automatically Updating Placeholders;125
12.4.2.1;Creating a Text File in Windows;125
12.4.2.2;Creating a Text File on a Mac;127
12.4.2.3;Adding Text to Replace Placeholders;128
12.4.2.4;Populating Repeat Grids with Text Files;129
12.4.2.5;Adding Images to Placeholders;131
12.5;Formatting Placeholders That Contain Data;134
12.5.1;Fixing Incorrect Placeholder Replacement;145
12.6;Creating a Second Page with a Repeat Grid;145
12.7;Deleting Extra Placeholders;149
12.8;Summary;151
13;Chapter 8: Designing for Mobile;152
13.1;Responsive Web Design Overview;152
13.2;Creating App Designs;153
13.3;Creating Mobile Web Designs;154
13.3.1;Virtual Keyboards;156
13.3.2;The Hamburger Menu;156
13.4;Using a UI Kit;157
13.5;Summary;160
14;Chapter 9: Creating Interactive Prototypes;161
14.1;Switching to the Prototype Workspace;161
14.2;Creating Links;162
14.2.1;Interaction Limitations;164
14.3;Previewing Prototypes;166
14.3.1;Desktop Preview;166
14.3.2;Mobile Preview;169
14.4;Share Online;171
14.5;Using Prototypes for Usability Tests;174
14.6;Summary;174
15;Chapter 10: Next Steps;175
15.1;Exporting Assets;175
15.2;Exporting All Artboards;180
15.3;Working with Developers;180
15.4;Summary;181
16;Index;182