Beginning_Adobe_Experience_Design_Quickly_Design_and_Prototype_Websites.pdf

This preview shows page 1 out of 186 pages.

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

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture