کتاب الکترونیکی JUMPSTART ADOBE XD

کتابی که مشاهده می کنید از انتشارات SitePoint است که به زبان انگلیسی منتشر شده است.

کتاب الکترونیکی JUMPSTART ADOBE XD شامل 168 صفحه است که پس از ثبت نام رایگان، می توانید آن را در دو فرمت PDF و EPUB دانلود نمایید.

سرفصل های کتاب

Preface …………………………………………………………………… xii
Why Adobe XD Exists ………………………………………………………………………xii
Photoshop vs. Sketch vs. Adobe XD………………………………………………..xiii
So Who Should Read Jump Start Adobe XD? …………………………………xiii
Conventions Used …………………………………………………………………………..xiv
Tips, Notes, and Warnings…………………………………………………….xiv
Supplementary Materials………………………………………………………………..xiv
Chapter 1 Getting Familiar with the UI…………1
Before We Begin………………………………………………………………………………..2
Workspace …………………………………………………………………………………………2
Welcome Screen………………………………………………………………………3
Why Mobile-First…………………………………………………………………….3
Canvas……………………………………………………………………………………..5
Artboards…………………………………………………………………………………5
Prototype Workspace ………………………………………………………………8
Toolbar ………………………………………………………………………………………………9
Layer List………………………………………………………………………………………….10
iv Jump Start Adobe XDProperty Inspector …………………………………………………………………………..11
Application Toolbar …………………………………………………………………………12
Next: Learning the Basics with Low-Fidelity Prototyping ……………….13
Chapter 2 Learning the Basics with LowFidelity Prototyping ……………………………………………14
Welcome Screen………………………………………………………………………………14
UI Kits ……………………………………………………………………………………15
Choosing an Artboard……………………………………………………………15
Returning to an Existing Project……………………………………………16
Low-Fidelity Prototyping…………………………………………………………………17
Getting Started with Shape Layers………………………………………………….18
Snapping Layers to Specific Points………………………………………..19
Designing With the Inspector………………………………………………..19
Text Layers……………………………………………………………………………………….21
Why You Should Specify Font Sizes Early ……………………………..21
Creating Text Layers………………………………………………………………22
Duplicating Layers……………………………………………………………………………24
Grouping Layers……………………………………………………………………………….24
Smart Guides …………………………………………………………………………………..25
Manual Alignments……………………………………………………………….26
Table of Contents vSmart Guides When Moving Layers……………………………………….26
Smart Guides With Option/Alt-Hold……………………………………..27
Renaming Layers……………………………………………………………………31
Fast-Forward……………………………………………………………………………………33
Repeat Grids…………………………………………………………………………………….34
Next: Prototyping User Flows and Receiving Feedback …………………..37
Chapter 3 Prototyping User Flows and
Receiving Feedback…………………………………………….38
Prototyping Interactions………………………………………………………………….41
Designing Transitions…………………………………………………………….43
Previewing Prototypes …………………………………………………………………….49
Desktop Preview…………………………………………………………………….49
Creating Scrollable Prototypes………………………………………………51
Device Preview ………………………………………………………………………54
Recording Your Tests ……………………………………………………………………….58
Sharing Prototypes and Gathering Feedback ………………………………….59
Next: Getting Visual with the Property Inspector……………………………64
vi Jump Start Adobe XDChapter 4 Getting Visual with the Property
Inspector…………………………………………………………………66
Styling Layers with the Property Inspector……………………………………..66
Dimensions and Offsets…………………………………………………………67
Opacity…………………………………………………………………………………..69
Corner Radius………………………………………………………………………..69
Fill………………………………………………………………………………………….71
Color Format………………………………………………………………………….72
Color Palette ………………………………………………………………………….73
Document Colors …………………………………………………………………..74
Gradients……………………………………………………………………………….75
Eyedropper Tool …………………………………………………………………….78
Border ……………………………………………………………………………………79
Shadow………………………………………………………………………………….80
Background Blur ……………………………………………………………………81
Object Blur…………………………………………………………………………….82
Hiding Styles………………………………………………………………………….83
Font Styles (for text layers only) …………………………………………..84
Quick Exercise: Styling Layers………………………………………………………….85
Styling the Welcome Text ……………………………………………………..85
Table of Contents viiStyling the Form Button………………………………………………………..88
Styling the Background…………………………………………………………90
Styling the Input Field …………………………………………………………..92
Styling the Logo…………………………………………………………………….94
Styling the Menu…………………………………………………………………..95
Next: Hi-Fi Prototyping with Symbols and Repeat Grids ………………..99
Chapter 5 Hi-Fi Prototyping With Symbols
and Repeat Grids……………………………………………….100
Maintaining Visual Consistency With Symbols…………………………….. 101
What Are Symbols? ……………………………………………………………. 101
Creating Symbols……………………………………………………………….. 102
Inserting Symbols………………………………………………………………. 104
Editing Instances………………………………………………………………… 105
Unlinking An Instance From a Symbol……………………………….. 109
Automating Content With Repeat Grids ……………………………………… 109
Drag and Drop Image Import ………………………………………………110
Drag and Drop Text Import………………………………………………….112
Styling the Search Result Grid …………………………………………….112
Importing the Text Content Into the Grid …………………………..115
Fast Forward ………………………………………………………………………..117
viii Jump Start Adobe XDNext: Designing Icons and Exporting…………………………………………….117
Chapter 6 Designing Icons and Exporting …118
Designing a Search Icon ………………………………………………………………..119
Creating an Artboard For The Search Icon…………………………..119
Activating Grids to Make Designing Easier…………………………120
Designing the Search Icon ………………………………………………….122
Boolean Operations ………………………………………………………………………126
Add Operation…………………………………………………………………….126
Subtract Operation……………………………………………………………..128
Intersect Operation……………………………………………………………..129
Exclude Operation ………………………………………………………………130
Editing Vector Paths…………………………………………………………………….. 131
Designing a Location Pin Icon ……………………………………………………… 131
Anchor and Control Points………………………………………………….133
Converting Mirrored Points to Straight Points……………………135
Completing the Icon with a Boolean Operation …………………136
Drawing Vectors with Keyboard Shortcuts …………………………138
Pen Tool ………………………………………………………………………………138
Copying Icons into the Design Itself …………………………………………….139
Exporting Image Assets…………………………………………………………………140
Table of Contents ixImage Formats…………………………………………………………………….140
Resolution and Platform ……………………………………………………. 141
It’s a Wrap …………………………………………………………………………………….143
Appendix A Accelerating Workflows with
Keyboard Shortcuts…………………………………………..144
Keyboard Shortcut Workflows………………………………………………………144
Quickly Reorganise Your Workspace …………………………………..144
Masking Layers……………………………………………………………………144
Option/Alt …………………………………………………………………………..145
Shift ……………………………………………………………………………………145
Keyboard Shortcuts for macOS …………………………………………………….145
General Shortcuts……………………………………………………………….145
Basic Commands…………………………………………………………………146
Workspace and Canvas Commands…………………………………….146
Switch Between Tools…………………………………………………………146
Export, Share and Preview Commands……………………………….147
Object Commands……………………………………………………………….147
Rearrange Layer Hierarchy………………………………………………….147
Align Layers…………………………………………………………………………147
Distribute Layers …………………………………………………………………148
x Jump Start Adobe XDChange Font Styles……………………………………………………………..148
Boolean Operation Commands……………………………………………148
Drawing Commands……………………………………………………………148
Miscellaneous Operations …………………………………………………..148
Keyboard Shortcuts for Windows…………………………………………………149
General Shortcuts……………………………………………………………….149
Basic Commands…………………………………………………………………149
Workspace and Canvas Commands…………………………………….149
Switch Between Tools…………………………………………………………149
Export, Share and Preview Commands……………………………….150
Object Commands……………………………………………………………….150
Rearrange Layer Hierarchy………………………………………………….150
Align Layers…………………………………………………………………………150
Distribute Layers ………………………………………………………………… 151
Change Font Styles…………………………………………………………….. 151
Boolean Operation Commands…………………………………………… 151
Drawing Commands…………………………………………………………… 151
Miscellaneous Operations ………………………………………………….. 151