Solution Manual for Adobe XD Classroom in a Book (2020 release)

Page 1 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 1 preview image

CLASSROOMINABOOK®Instructor NotesBrian WoodXDAdobe2020 release

Page 2 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 2 preview image

Page 3 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 3 preview image

6INSTRUCTOR NOTESLESSON 1:AN INTRODUCTIONTO ADOBE XDThis lesson provides an overview of the work area and basic functionality of XD. Bythe end of the lesson, students should understand how all the basic XD elementswork together to create designs and the overall workflow for app and web design.They should also understand the overall interface of XD, including how to accesspanels, where tools are located, and get an idea of prototyping, previewing andsharing as well.Introducing Adobe XDPage 8: It’s important for students to understand that XD does NOT create code.When they create a design and/or prototype in XD, they are creating a proof ofconcept. At the end of the design process in XD, students can export production-ready assets, design specs, design system, and a working prototype. The app orwebsite is developed in another tool, outside of Adobe XD.We also wanted to point out that XD does not have to be used solely for app orweb design. We know of classrooms that use XD to create working presentationsor even student portfolios, maybe for a review. When you design something in XD,you can share it out to the world using several methods. A link is created to theproject that is hosted on Creative Cloud.The UX design workflowPages 8–9: This introductory section is meant to give an overview today’s UXworkflow which includes all of the stages of design. You can skip this if studentsalready grasp UX design and generally understand what prototyping andwireframing are. Once again, this is a general workflow for an app design and maynot accurately reflect steps taken for another type of project like a presentation.The Home screenPage 10: The Home screen is the first thing students will see when they open XD.It is a place where they can create a project, open a previous project, check out atutorial, access UI Kits and other resources. When XD is first launched, the Homescreen will look a bit different than after students have saved and closed theirfirst project.

Page 4 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 4 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)7On Page 10, step 2, We ask them to close the Assets panel if it opens on the leftside of the workspace because of missing fonts on the document. If the font is anAdobe font (formerly Typekit), then it is automatically synced. If it is a local font,then the missing font will show in the Assets panel, where the student could right-click the name to highlight where it is used on canvas or replace it.Exploring the workspace (macOS)Page 11: We split out the macOS and Windows workspaces since Windows doesnot have a menu bar with commands. If students are used to working in otherAdobe apps, they will find that the workspace in XD is very streamlined. Panels arepermanently docked and cannot be moved.They can think of the Property inspector on the right as the Properties panel inIllustrator or InDesign, for instance.Exploring the workspace (Windows)Page 12: On Windows, the XD workspace is minimal with no menus showing.Instead, there is a “hamburger” menu in the upper-left part of the applicationwindow that, when opened, will reveal some of the options available in the menuson macOS. On Windows, you will find that all of the same commands are availableas on macOS, but on Windows, they are accessed either by right-clicking oncontent or through keyboard commands.Adobe XD is a native macOS and native Windows application. That means that ittakes advantage of some of the typical OS features available on each.Working in Design modePages 13–15: This section introduces modes in Adobe XD and gives studentsan overview of Design mode. Students will most likely stay in Design modeinitially and later switch between the three modes (Design, Prototype, and Share),depending on what they want to achieve.Getting to know the toolsPage 13: The toolbar in XD is one of the smallest in any Adobe app. That’s mostly dueto efficiencies in creating and editing, found in XD. For instance, in Illustrator andInDesign, you’ll find Selection and Direct Selection tools. In XD, you only have oneSelect tool which doubles as the Selection and Direct Selection tools, as you’ll see.The figures for the lessons in this book were taken using macOS. Make sure thatstudents read the notes available in each lesson, since they can lead to informationon finding options in their workspace, especially on Windows.

Page 5 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 5 preview image

8INSTRUCTOR NOTESWorking with the Property inspectorPages 13–14: The Property inspector offers access to all of the formatting optionsand features. It is permanently docked on the right side of the screen and will betransformed in Prototype mode to show interactions. At the top of the Propertyinspector, you’ll find some options that are always there: alignment, repeat grid,pathfinder operations, and transform options. The panel is contextual and thecontent within changes depending on what is selected.Working with panelsPages 14–15: The other panels available in XD, aside from the Property inspector,are on the left side of the workspace. They are the Assets panel, the Layers panel,and the Plugins panel. To show or hide each panel, students can click the icons inthe lower-left corner.It would help speed up work in XD if students learn the keyboard commandsfor them. To toggle the visibility of the Layers panel, press Cmd+Y (macOS)or Ctrl+Y (Windows). To toggle the visibility of the Assets panel, pressCmd+Option+Y (macOS) or Ctrl+Alt+Y (Windows), Cmd+Shift+P (macOS) orCtrl+Shift+P (Windows).Prototype modePages 15–16: Initially students will not have much need to go into Prototypemode when they start their own projects since a file needs to at least havemultiple artboards to do anything in Prototype mode. Prototyping is not requiredin your XD project, but it is necessary when wanting to show the interactionsbetween artboards.A good shortcut to remember is to press Control+Tab (macOS) or Ctrl+Tab(Windows) to toggle between the three modes: Design, Prototype, and Share.To learn more about prototyping, see Lesson 8, “Creating a Prototype.”Changing the view of artworkPage 17–23: Adobe XD was built for speed. While the Zoom tool works well, I’vepersonally rarely used it in XD. You can utilize the native zooming features onWindows and mac OS. To understand them better, check out the sidebar on page19 titled, “Using macOS or Windows native zooming.”

Page 6 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 6 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)9Using view commandsPages 17–18: You can work more efficiently in XD by holding down the modifierkeys to temporarily activate the Zoom tools. Press Command+spacebar (macOS)or Ctrl+spacebar (Windows) to temporarily activate the Zoom tool, which allowsyou to quickly increase your magnification without having to switch tools.Page 17, step 4: The Zoom menu on Windows has more viewing options thanmacOS. You may need to either give two sets of instructions for zooming toselection, and other commands, or have students use the keyboard commands forZoom To Fit All (Cmd+0/Ctrl+0) and other menu commands.Using the Zoom toolPages 19–21: The Zoom tool is something that we rarely touch in Adobe XD. Thereare so many other methods for zooming, including pinch-zoom on the trackpad orOption/Alt scroll-wheel zooming.Page 20, after step 4 figure: The shortcuts to access the Zoom tool are relativelypicky about the order of keys pressed. For instance, pressing Command and thenspacebar sometimes won’t work on my machine. We have to press spacebar andthen Command.Scrolling through a documentPage 21: Since XD has the ability to create multiple artboards, navigating andscrolling are important. The Hand tool does not appear in the toolbar in XD, it isonly accessed via keyboard commands. You can use the spacebar to temporarilyactivate the Hand tool to scroll through a document. When entering text, use theAlt (Windows) or Option key (macOS) to temporarily access this tool.Page 21, step 2: Windows users need to pay attention to the note after the figure forstep 2. In order to use the Hand tool, Windows users may need to press and holdthe spacebar and while pressing, press and let go of another key (like the Alt key).Then, while still pressing the spacebar, pan in the document window.Navigating ArtboardsPages 22–23: The Layers panel can be (but doesn’t have to be) used for navigating,editing, naming, and more. In order to navigate to another artboard, make surethat students are not double-clicking the name of the artboard in the Layerspanel, but rather, double-clicking the thumbnail to the left or to the right of theartboard name.

Page 7 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 7 preview image

10INSTRUCTOR NOTESPreviewing your designsPage 24: Previewing the prototype is essential in order to test the connections youmake. Not only can you test connections in the Preview window in XD, but youcan also test on device using the Adobe XD mobile app.A great shortcut for the Preview window is Command+Return (macOS) orCtrl+Enter (Windows). That keyboard command only works to open the window,not close it.To learn more about previewing designs, see Lesson 8, “Creating a Prototype.”Sharing your designsPage 25: When you are ready to share your design with others, you can do so easilyin a few ways—one is using the Share workspace. Sharing a prototype is meant togather feedback in the form of comments and sharing design specs is meant toshare the specifications such as fonts, colors, and more with developers at the endof the process.To learn more about sharing your designs, see Lesson 10, “Sharing Your Designs.”Switching between documentsPage 26: Switching between documents is different between macOS and Windows.On macOS, you can choose an open document from the Window menu or pressCommand+~ to toggle between open documents. On Windows, the Windowmenu is not available, so you will use the OS document switching (Alt+Tab).

Page 8 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 8 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)11Review questions1What is a wireframe?2What do artboards represent in XD?3What are the three modes found in XD?4What shows in the Layers panel with no content selected?5What are the options for sharing?Review answers1A low-fidelity wireframe is one way to determine the functional elements of apage or screen without diving into design specifics like colors and fonts. Theyare a quick method of exploring the basic structure and the relationshipsbetween information of an app or website..2Artboards in XD represent the screens in an app or web design, typically.3The three modes found in Adobe XD are: Design, Prototype, and Share. When youselect a mode, certain features and tools specific to that mode become available inthe application window. These modes represent a stage in the design process. Asyou design, you will most likely be switching back and forth between them.4When all content in the document is deselected (except for an artboard), a listing ofartboards and any content on the pasteboard appears in the Layers panel.5The options for sharing a design or prototype in XD are Invite to Edit, Share ForReview, and Share For Development.Exploring on your ownYou will open a sample file from Adobe XD to investigate and use some of thenavigational and organization features learned in this lesson.1Open the file named L1_explore.xd.This file is included in the instructor notes Zip file you downloaded from here:www.adobepress.com/XDCIB20202Perform the following on this document:•Practice zooming in and out.•Navigate between artboards using the Layers panel and using keyboardcommands.•Open another document and practice navigating between open documents.3Choose File > Close without saving.

Page 9 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 9 preview image

12INSTRUCTOR NOTESLESSON 2:SETTING UPA PROJECTThis lesson provides an overview of creation and setup up of students’ first projectin Adobe XD. By the end of the lesson, students should have a better understandingof creating a new document, creating and editing artboards, adding grids toartboard, working with multiple artboards, and managing artboards with theLayers panel.Starting the lessonPage 30: At the start of each lesson, you will find an initial step that offers severalalternatives for opening a file on both macOS and Windows. Unfortunately onWindows, if you close all open files, there are no menus to choose from, so you willclick Your Computer in the Home screen to open a file.Creating and saving a new documentPages 31–33: Pay close attention to the sidebar “Adobe XD and Retina (HiDPI)”on page 32. When creating new documents from a default artboard size, you arecreating the design at 1x or non-Retina (non-HiDPI). That is fine and a perfectlysuitable way to design apps or web sites. If you decide that designing at 2x oranother sizing is necessary, then you will need to double or triple the size of theartboards. This is very important when exporting assets in the last lesson. AdobeXD will generate as many raster assets (PNG, JPEG, etc.) as necessary for thedevice chosen. As students proceed, they will need to ensure that, if they careabout generating production-ready assets, they will need to import images withenough pixel data. That will be covered more in later lessons.On page 32, students are introduced to cloud documents. It’s important for you tounderstand cloud documents so you can explain them to students. When you firstcreate a document it’s a cloud document. This is a temporary file, and you need tosave it at least once to start with. Any files saved as a cloud document are saved inand counted towards their personal storage limit.Saving an XD file locally gives the students an XD file on their machine that theycan do what they want with. Know that auto-save, which is a great feature, will notwork unless the file is saved as a cloud document.I encourage you to watch the video, “Working with cloud documents,” found in theweb edition of the book.

Page 10 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 10 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)13Creating artboards with the Artboard toolPages 34–36: When attempting to select artboards in the Document window,students need to be aware of what tool is selected. With the Artboard tool selected,you can select an artboard by clicking the artboard name above the artboard. Ifthey attempt to click within an artboard with the Artboard tool selected, theywill create a new artboard. With the Select tool selected, they can click the name,drag across, or click (if empty)/double-click on an empty spot if it has content, toselect it.Page 34, step 4: Students may only see default artboard sizes in the Propertyinspector if nothing is selected. They may need to scroll in the Property Inspectorto see them.Make sure that students name the artboards the same as they see in the book. Wewill reference those artboards all throughout the lessons.Changing artboard appearancePages 44–45: Changing the appearance of artboards can be a useful feature whendesigning. For instance, if you are designing an app and want to set a screenbackground color, you can draw an object behind all other content and assign acolor, or you could assign a color to the artboard. A color set in the background ofan artboard is also discoverable when it comes to design specs.Working with multiple artboardsPage 41: Since there are currently no templates in XD, being able to select andapply formatting and add content to multiple artboard at once will be very helpful.Used in combination with components (what used to be called Components ),selecting multiple can be very powerful for maintaining design consistency.Adding grids and guides to artboardsPages 43–50: There are two types of grids that can be applied to artboards: layoutand square. Layout grids are great for setting margins and columns in your designs.A square grid can be useful for creating icons or other artwork that requires avisible grid to snap to. We should also mention that XD has an invisible 1 pixel gridin the background that all content snaps to by default.Working with square gridsPages 43–46: Square grids are very useful for mobile app design and not used asoften with web design. As students make their way through the lessons, they willbe asked to zoom in and out, drag content to align to the square grids, and more.Content will snap to a square grid when dragged, but it may also snap to the pixel

Page 11 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 11 preview image

14INSTRUCTOR NOTESgrid if zoomed in far enough. If students find that they can’t snap to the square gridor can’t achieve the same width or height values when dragging, ask them to eitherzoom in or out and what the content they are dragging snaps to and the valuesachieved will be different.Units in Adobe XDPage 45, sidebar: This sidebar carries some important information. Throughout thelessons, We try not to reference any kind of unit when referring to measurements,sizes, and more. The reason why is because XD is unit-less. That means, you cantreat the sizings in whatever unit you need. For instance, if you design a website inXD, you would assume pixels. If designing for iOS, pt, and so on. When you exportdesign specs, the dev that views them can set the correct unit when they copymeasurements, sizes, etc.Applying a layout gridPages 47–48: Layout grids are what most of us design to when deigning responsiveweb sites. They make it easy to align content to columns by snapping so that later,when a CSS grid (or other) is used, the content is set to a similar grid.Page 48, step 9: We found that in later versions of XD, setting margins for eachside was not adding up properly (how we expected it to anyway). You may findthat students need to adjust the values of the Gutter Width and Column Width toachieve the 0, 32, 0, 32 values we suggest in the book.Students can always change the layout grid settings later, but to affect the grids onthe artboards in the document, the artboards need to be selected.Creating artboard guidesPages 49–50: Artboard guides are newer (May 2019) and can be a very useful toolfor alignment. I find that students accidentally create guides when attempting todrag across artboard content for selection—so watch for that. Also note that guidescurrently cannot be set on an artboard by typing in values.Managing artboards with the Layers panelPages 51–52 At times, managing artboards via the Layers panel will be easier thanattempting to do so in the Document window. When it comes to dragging theartboards to change the ordering (step 4, page 51), that’s up to the user as to howto order them. Some of us want to keep all of the app artboards in close proximityin the Layers panel listing or all of the website artboards. It really depends. Remindstudents that dragging and reordering the artboards has no effect in the document,unless artboards overlap.

Page 12 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 12 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)15Review questions1Why might you rename artboards?2Describe the process for adding an artboard to an open document using adefault artboard size.3What are the two types of grids that can be applied to artboards?4Name several methods for selecting multiple artboards.5Name two methods for duplicating an artboard.Review answers1You will most likely rename artboards to keep track of them when designing.Another reason for renaming will show later when you prototype. In order tocreate connections between artboards, you will select an artboard by name.2In order to add a new artboard using a default size, you can click or drag inthe document window with the Artboard tool, then adjust the size of theartboard to match a default size in the Property inspector. You can also selectthe Artboard tool and click a default artboard size that appears in the Propertyinspector to create a new artboard at that size.3The two types of grids that you can apply to artboards in XD are squareand layout.4In order to select multiple artboards, you can Shift-click or Command/Ctrl-click artboards in the Layers panel, drag across multiple artboards with theSelect tool, or Shift-click artboard names in the Document window.5To duplicate an artboard, you can select an artboard in the Document windowand press Command+D (macOS) or Ctrl+D (Windows), Option-drag/Alt-drag an artboard in the Document window or Layers panel, copy and paste anartboard, or right-click an artboard in the Layers panel and choose Duplicate.

Page 13 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 13 preview image

16INSTRUCTOR NOTESExploring on your ownNow you’ll experiment with a few of the tools you learned in this lesson.1If the Home screen isn’t already showing, choose File > New (macOS) or onWindows, click the menu icon () and choose New. The Home screen appears.2Create a new web design document based on the 1366x768 screen size.3Perform the following on this new document:•Add more artboards of the same size.•Add several artboards for an app design.•Add layout grids to all of the artboards and adjust the grid settings.•Change the background color of one of the app artboards.4Close the file without saving.

Page 14 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 14 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)17LESSON 3:ADDINGIMAGES AND TEXTThis lesson starts out by teaching students about the different types of assets, thenhas students import and work with all different types of assets. The lesson finisheswith adding and styling text.I wanted to draw your attention to the sidebar “Sizing raster images for AdobeXD” on page 58. If you want to be able to export production-ready assets whenfinished with your design, you will need to ensure that there is enough pixel datain each placed asset. For vector content (SVG, AI) you won’t need to worry aboutany of this since that content is made of vector and is infinitely scalable. It’s theimage assets you place. This really makes more sense when you choose File >Export > Export Selection with something selected, to see the different number ofassets generated for each file type. For instance, choosing PNG, and exporting foriOS, you get 3 PNG files at different sizes for every selected image in the design.When you place raster assets, the ruler of thumb is for web assets, make sure theyare twice the size they are used in the design. For iOS, 3 times the size, and forAndroid, 4 times the size.Starting the lessonPage 56: Since this section in each lesson is meant to show the completed lessonfile (for that lesson), you can skip this section if time is at a premium.Assets and Adobe XDPage 57–64: In the case of XD, assets are both vector and raster. You can bring inassets from a lot of different sources including Illustrator, Photoshop, Sketch, andother apps, in a variety of ways.Importing an imagePages 57–58: The reason the image is so large is because it is meant to be exportedas an iOS PNG later. That means it should be 3 times the size used in XD. BecauseJPEG files are placed at half-size, it will be scaled to half size for the final sizing.Page 58, step 6: By default, raster images are scaled proportionally when a handle isdragged. That is assuming that the Lock Aspect option is selected in the Propertyinspector, which it is, by default.

Page 15 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 15 preview image

18INSTRUCTOR NOTESImporting multiple assetsPages 59–60: I find that importing via drag and drop from a folder into XD is theeasiest since you can control where the images are placed in the document. Byplacing multiple images using the File > Import command, they are placed in arow in the middle of the document window and may sometimes seem to disappearsince they are placed on an artboard and may be hidden. If students find itchallenging to find/select placed images, they can open the Layers panel and clickon an artboard to see what is there.Importing assets via drag and dropPage 61: Setting up to drag and drop may be tricky if the student doesn’t know thekeyboard commands for switching between open apps in their OS. Also, if studentsdrag and drop images onto an artboard, the images may seem to disappear. Thatmay be due to the fact that they have been associated with an artboard and imagecontent outside of the bounds of the artboard will be hidden.Replacing an imagePage 62: You’ll find that replacing raster images is one thing. Trying to replacevector graphics, such as an imported SVG file or other is another. For instance, ifyou import a vector logo composed of multiple vector objects, dragging anotherlogo on top of the existing logo will most likely only replace a part of it.Transforming imagesPage 63: Copy and paste between artboards is currently one of the best methodsfor adding the same content, in the same position, to each artboard. You can easilyselect a range of artboards and paste content on them.Resizing an image in its framePage 64: In step 4, students may accidentally deselect the image if they don’t pressand drag right on the anchor point. Have them double-click the image and tryagain, if that’s the case.Remind students that if they care about the resolution (quality) of the images forexporting, they need to be careful about scaling images too much (larger) since thelarger they make raster images in XD, the lower the resolution when it’s exported.Copying and pasting from Photoshop to XDPages 65–66: If students don’t have the latest version of Adobe Photoshop installedon your machine, in Adobe XD you can choose File > Import (macOS) or click themenu icon () in the upper-left corner of the application window and choose

Page 16 of 16

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 16 preview image

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE)19Import (Windows). Navigate to the Lessons > Lesson03 > images folder and importthe screen_header.png file.Page 66, step 6: Students need to Command-click (macOS) or Ctrl-click (Windows)the layer thumbnail, NOT the name of the layer to make a selection from the layercontent. Know that there are a bunch of ways to copy and export content fromPhotoshop—this is not the only way.Opening a Photoshop file in Adobe XDPages 67–69: Opening a Photoshop file (.PSD) directly in XD is a great way toconvert a PSD to an XD document. Almost all content from the PSD will beconverted and editable in XD. Students do not have to have Photoshop installed toopen a PSD file in XD.Editing an image in PhotoshopPages 69–70: Obviously for this to work, Photoshop needs to be installed on thestudents machine. The file associations are not important in this case. In otherwords, if a student machine has .JPG files set to open in Preview, rather thanPhotoshop, that shouldn’t matter.Bringing in content from Adobe IllustratorPages 71–72: As was stated in the chapter text, you can bring Illustrator contentinto XD a bunch of ways—depending on your needs. Sometimes I’m working inIllustrator and need to bring a simple icon to XD, so I’ll copy and paste to embed itin the XD document. Know that students can also copy content from XD and pasteit into Illustrator and it’s still editable!Note:In order to open an Illustrator document (.AI) in XD, you don’t need to haveIllustrator installed.Masking contentPages 73—78: There are two main ways to mask and the correct masking methodfor the situation should be used. You cannot easily convert from one mask type toanother. Also, know that masked content that you export is cropped.

Preview Mode

This document has 62 pages. Sign in to access the full document!

Report

Learning Tools

Writing Tools

Browse Resources

Solution Manual for Adobe XD Classroom in a Book (2020 release) - Page 1

Study Now!

Document Details

Related Documents

Lecture Notes for Adobe XD Classroom in a Book (2020 release)

DevOps and Its Importance Study Notes

Veeam Certified Engineer VMCE-V12

Modules 1 - 3 Basic Network Connectivity and Commu

Notes CCNA

CCNA 200-301 Portable Command Guide 5th Edition 20

CCNA 200-301 Portable Command Guide 5th Edition 22

CCNA 200-301 Portable Command Guide 5th Edition 36

Foundations of Novell Networking Section 26

Modulo 7 DHCPv4

Company

Explore

Study Tools