
Unformatted text preview: Beginning
Adobe Experience
Design
Quickly Design and Prototype
Websites and Mobile Apps
—
Rob Huddleston Beginning Adobe
Experience Design
Quickly Design and Prototype
Websites and Mobile Apps Rob Huddleston Beginning Adobe Experience Design: Quickly Design and Prototype Websites and
Mobile Apps
Rob Huddleston Rocklin, California, USA ISBN-13 (pbk): 978-1-4842-2963-7 DOI 10.1007/978-1-4842-2964-4 ISBN-13 (electronic): 978-1-4842-2964-4 Library of Congress Control Number: 2017955206
Copyright © 2017 by Rob Huddleston
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole
or part of the material is concerned, specifically the rights of translation, reprinting, reuse of
illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical
way, and transmission or information storage and retrieval, electronic adaptation, computer
software, or by similar or dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos,
and images only in an editorial fashion and to the benefit of the trademark owner, with no
intention of infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even
if they are not identified as such, is not to be taken as an expression of opinion as to whether or
not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the
date of publication, neither the authors nor the editors nor the publisher can accept any legal
responsibility for any errors or omissions that may be made. The publisher makes no warranty,
express or implied, with respect to the material contained herein.
Cover image designed by Freepik
Managing Director: Welmoed Spahr
Editorial Director: Todd Green
Acquisitions Editor: Natalie Pao
Development Editor: James Markham
Technical Reviewer: Jim Babbage
Coordinating Editor: Jessica Vakili
Copy Editor: Bill McManus
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505,
e-mail [email protected], or visit . Apress Media, LLC is
a California LLC and the sole member (owner) is Springer Science + Business Media Finance
Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected]ress.com, or visit
rights-permissions.
Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our
Print and eBook Bulk Sales web page at .
Any source code or other supplementary material referenced by the author in this book is available
to readers on GitHub via the book’s product page, located at .
For more detailed information, please visit .
Printed on acid-free paper To Kelley, Jessica, and Xander with all my love Contents at a Glance
About the Author���������������������������������������������������������������������������� xiii
About the Technical Reviewer��������������������������������������������������������� xv
Acknowledgments������������������������������������������������������������������������� xvii
■Chapter
■
1: Overview of the Web and Mobile Design Process��������� 1
■Chapter
■
2: Introduction to Adobe Experience Design��������������������� 7
■Chapter
■
3: Using XD’s Drawing Tools�������������������������������������������� 23
■Chapter
■
4: Working with Text������������������������������������������������������� 51
■Chapter
■
5: Working with Images�������������������������������������������������� 69
■Chapter
■
6: Creating New Pages with Artboards��������������������������� 95
■Chapter
■
7: Organizing Content Using Content Grids������������������� 105
■Chapter
■
8: Designing for Mobile������������������������������������������������� 143
■Chapter
■
9: Creating Interactive Prototypes�������������������������������� 153
■Chapter
■
10: Next Steps��������������������������������������������������������������� 167
Index���������������������������������������������������������������������������������������������� 175 v Contents
About the Author���������������������������������������������������������������������������� xiii
About the Technical Reviewer��������������������������������������������������������� xv
Acknowledgments������������������������������������������������������������������������� xvii
■Chapter
■
1: Overview of the Web and Mobile Design Process��������� 1
The Challenges of Designing for the Web����������������������������������������������� 1
The Web Wasn’t Designed for Design����������������������������������������������������������������������� 1
Designing for Screens���������������������������������������������������������������������������������������������� 2
Designing for Interaction������������������������������������������������������������������������������������������ 3
Mobile App Design���������������������������������������������������������������������������������������������������� 3
Using Comps and Prototypes to Design Live Sites and Apps����������������������������������� 4 Summary������������������������������������������������������������������������������������������������� 5
■Chapter
■
2: Introduction to Adobe Experience Design��������������������� 7
Adobe XD in the Workflow����������������������������������������������������������������������� 7
Downloading and Installing Adobe XD����������������������������������������������������� 8
New Document Setup��������������������������������������������������������������������������� 14
The Design Workspace in Adobe XD������������������������������������������������������ 15
The Prototype Workspace���������������������������������������������������������������������� 19
Using the Keyboard������������������������������������������������������������������������������� 19
Basic Keyboard Shortcuts�������������������������������������������������������������������������������������� 19
Selecting Tools�������������������������������������������������������������������������������������������������������� 20 vii ■ Contents Switching Workspaces������������������������������������������������������������������������������������������� 20
Zooming With the Keyboard������������������������������������������������������������������������������������ 21
Other Useful Keyboard Commands������������������������������������������������������������������������� 21 Summary����������������������������������������������������������������������������������������������� 21
■Chapter
■
3: Using XD’s Drawing Tools�������������������������������������������� 23
Adding Shapes������������������������������������������������������������������������������������� 23
Rectangles�������������������������������������������������������������������������������������������������������������� 23
Ellipses and Lines��������������������������������������������������������������������������������������������������� 26 Shapes and the Properties Panel���������������������������������������������������������� 27
Alignment��������������������������������������������������������������������������������������������������������������� 27
Smart Guides���������������������������������������������������������������������������������������������������������� 28
Combining Objects������������������������������������������������������������������������������������������������� 28
Size and Position���������������������������������������������������������������������������������������������������� 28
Appearance������������������������������������������������������������������������������������������������������������ 29 Stacking Order�������������������������������������������������������������������������������������� 32
Using the Context Menu����������������������������������������������������������������������������������������� 32
Mac Menus������������������������������������������������������������������������������������������������������������� 33 Changing Opacity���������������������������������������������������������������������������������� 34
Working with Layers������������������������������������������������������������������������������ 34
Changing Stacking Order with Layers�������������������������������������������������������������������� 35
Selecting and Grouping Objects����������������������������������������������������������������������������� 35
Renaming Objects�������������������������������������������������������������������������������������������������� 36
Locking and Hiding Layers������������������������������������������������������������������������������������� 36 Combining Objects into Symbols����������������������������������������������������������� 37
Using Symbols�������������������������������������������������������������������������������������������������������� 38
Editing Symbols������������������������������������������������������������������������������������������������������ 39
Deleting Symbols���������������������������������������������������������������������������������������������������� 39 viii ■ Contents Drawing Objects with the Pen Tool�������������������������������������������������������� 39
Straight Lines��������������������������������������������������������������������������������������������������������� 39
Curves�������������������������������������������������������������������������������������������������������������������� 41
Modifying Paths������������������������������������������������������������������������������������������������������ 42 Putting It Together��������������������������������������������������������������������������������� 44
Drawing the Header and Footer������������������������������������������������������������������������������ 45
Creating the Navigation Bar������������������������������������������������������������������������������������ 46 Summary����������������������������������������������������������������������������������������������� 49
■Chapter
■
4: Working with Text������������������������������������������������������� 51
Beginning a Logo����������������������������������������������������������������������������������� 51
Understanding Fonts on the Web���������������������������������������������������������� 52
Downloading a Web Font from Google�������������������������������������������������� 53
Installing Fonts on Windows����������������������������������������������������������������������������������� 56
Installing Fonts on a Mac��������������������������������������������������������������������������������������� 56
Using New Fonts in XD������������������������������������������������������������������������������������������� 57 Formatting Text������������������������������������������������������������������������������������� 57
Font Size����������������������������������������������������������������������������������������������������������������� 57
Font Styles�������������������������������������������������������������������������������������������������������������� 58
Alignment��������������������������������������������������������������������������������������������������������������� 58
Character and Line Spacing����������������������������������������������������������������������������������� 58
Appearance����������������������������������������������������������������������������������������������������������� 58 Text Best Practices�������������������������������������������������������������������������������� 59
Adding More Text to the Design������������������������������������������������������������� 59
Finalizing the Logo������������������������������������������������������������������������������������������������� 60
Adding Navigation Text������������������������������������������������������������������������������������������� 62
Add a Copyright Notice to the Footer���������������������������������������������������������������������� 66 Summary����������������������������������������������������������������������������������������������� 67 ix ■ Contents ■Chapter
■
5: Working with Images�������������������������������������������������� 69
Image File Types������������������������������������������������������������������������������������ 69
Importing Images���������������������������������������������������������������������������������� 70
Importing on Windows�������������������������������������������������������������������������������������������� 70
Importing on a Mac������������������������������������������������������������������������������������������������� 70
Importing with Drag and Drop�������������������������������������������������������������������������������� 70
Importing with Copy and Paste������������������������������������������������������������������������������� 70
Importing the Main Images to the Design�������������������������������������������������������������� 70 Scaling and Rotating Images��������������������������������������������������������������� 74
Scaling the Main Images���������������������������������������������������������������������������������������� 75 Working with SVG���������������������������������������������������������������������������������� 78
Finishing the Navigation Bar���������������������������������������������������������������������������������� 85
Creating Calls to Action������������������������������������������������������������������������������������������ 88 Summary����������������������������������������������������������������������������������������������� 94
■Chapter
■
6: Creating New Pages with Artboards��������������������������� 95
Artboard Basics������������������������������������������������������������������������������������� 95
Renaming Artboards����������������������������������������������������������������������������������������������� 95
Creating a New Artboard���������������������������������������������������������������������������������������� 96
Selecting, Resizing, and Moving Artboards������������������������������������������������������������� 98
Duplicating Artboards��������������������������������������������������������������������������������������������� 99 Using Artboards to Set Up Designs for Mobile Devices����������������������� 101
Summary��������������������������������������������������������������������������������������������� 103
■Chapter
■
7: Organizing Content Using Content Grids������������������� 105
Creating Placeholders for a Grid��������������������������������������������������������� 105
Creating a Repeat Grid������������������������������������������������������������������������ 111
Adding Padding to a Grid�������������������������������������������������������������������� 113 x ■ Contents Adding Content to a Grid��������������������������������������������������������������������� 116
Manually Updating Placeholders�������������������������������������������������������������������������� 116
Automatically Updating Placeholders������������������������������������������������������������������� 116 Formatting Placeholders That Contain Data���������������������������������������� 125
Fixing Incorrect Placeholder Replacement����������������������������������������������������������� 136 Creating a Second Page with a Repeat Grid���������������������������������������� 136
Deleting Extra Placeholders���������������������������������������������������������������� 140
Summary��������������������������������������������������������������������������������������������� 142
■Chapter
■
8: Designing for Mobile������������������������������������������������� 143
Responsive Web Design Overview������������������������������������������������������ 143
Creating App Designs�������������������������������������������������������������������������� 144
Creating Mobile Web Designs�������������������������������������������������������������� 145
Virtual Keyboards������������������������������������������������������������������������������������������������� 147
The Hamburger Menu������������������������������������������������������������������������������������������� 147 Using a UI Kit��������������������������������������������������������������������������������������� 148
Summary��������������������������������������������������������������������������������������������� 151
■Chapter
■
9: Creating Interactive Prototypes������������������������������� 153
Switching to the Prototype Workspace����������������������������������������������� 153
Creating Links������������������������������������������������������������������������������������� 154
Interaction Limitations������������������������������������������������������������������������������������������ 156 Previewing Prototypes������������������������������������������������������������������������ 158
Desktop Preview��������������������������������������������������������������������������������������������������� 158
Mobile Preview����������������������������������������������������������������������������������������������������� 161 Share Online���������������������������������������������������������������������������������������� 163
Using Prototypes for Usability Tests���������������������������������������������������� 166
Summary��������������������������������������������������������������������������������������������� 166 xi ■ Contents ■Chapter
■
10: Next Steps��������������������������������������������������������������� 167
Exporting Assets���������������������������������������������������������������������������������� 167
Exporting All Artboards������������������������������������������������������������������������ 172
Working with Developers�������������������������������������������������������������������� 172
Summary��������������������������������������������������������������������������������������������� 173
Index���������������������������������������������������������������������������������������������� 175 xii About the Author
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 design. 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. xiii About the Technical
Reviewer
Jim Babbage’s two passions—teaching and photography—led him to a career in
commercial photography. With the release of Photoshop 2.5, Jim became involved in the
world of digital imaging, and he soon began designing for the web in addition to taking
photographs. Jim is a regular contributor to Community MX, where he has written articles
and tutorials on Fireworks, Dreamweaver, Photoshop, and general web and photography
topics. He has authored several books including Adobe Fireworks Classroom in a Book for
CS4 and CS5 (Adobe Press), and Adobe Fireworks CS4 How-Tos: 100 Essential Techniques
(Adobe Press). Jim also has several Fireworks videos available on Lynda.com. He teaches
imaging, web design, and photography at Centennial College, and web design at Humber
College. He is a partner at Newmedia Services, and has been a guest speaker at TODCon
and a presenter at Adobe MAX. xv Acknowledgments
I want t...
View
Full Document