Adding Images5:10 with Nick Pettit
Usually in a wireframe, you want to avoid adding color or too much detail early on so that you can stay focused on things like the layout or the flow of interactions from one screen to the next. However, sometimes you may want to add images if they will impact design decisions.
- Zoom to Selection: Z + Drag
Get Adobe XD
Adobe XD Plans - Adobe XD is available as part of Adobe Creative Cloud in both free and paid memberships. Any edition of Adobe XD (including the free plan) will work with this course. Follow this link to review plans, create an Adobe Creative Cloud account, and download Adobe XD.
Image Files - These are the image files we'll use throughout this course. Download this file, unzip it, and look for the photos folder.
So far the wire frame we've made is pretty standard stuff. 0:00 Usually in wire frame, you want to avoid adding color or 0:04 too much details early on so that you can stay focused on things like the layout or 0:07 the flow of interactions from one screen to the next. 0:12 However, this app is about travel and speaking personally, 0:16 I think we would be disingenuous to avoid adding photography of the places 0:20 people might visit especially in a design where it's featured so prominently. 0:25 I think in this particular design, 0:31 it would be better to get the photos in sooner rather than later. 0:33 Because it actually affects the placement of texts and 0:37 buttons since we are trying to emphasize the places people can visit. 0:40 With that disclaimer out of the way, let's dig in. 0:45 In the notes associated with this video, 0:49 there's a link to a zip file that contains the images that I'm using. 0:51 You're also welcome to use your own images and customize this however you'd like. 0:55 Once you have your images ready in a file browser window, 1:01 simply drag them over to Adobe XD and drop them in the places that you'd like. 1:04 This first one, of Boulder, Colorado, I'll drag to the first box. 1:10 We'll add the other locations later. 1:18 Finally, I'll drag the photo of me into the little circle for the profile image. 1:20 Again, you're welcome to use this photo but 1:28 you should also feel free to use a photo of yourself or anyone else you would like. 1:30 Adding images in Adobe XD is that easy. 1:35 You can just drag and drop them into a shape and 1:39 the image will fill the background. 1:42 This is going to stray just a bit from UX focus but 1:44 since we have decided to add this photos, let's make some visual design adjustments. 1:47 Select this first image and then in the property inspector, 1:53 let's get rid of the border by unchecking the box next to the word Border. 1:58 Then click the checkbox next to Shadow because we're going to 2:04 add a small shadow to make these photos jump off the page just a little bit. 2:09 When we do that, some additional options will appear. 2:15 The x and y values are offsets. 2:19 So a negative x-value will push the shadow to the left and 2:23 a positive value will push it to the right. 2:27 Similarly, a negative y-value will make the shadow go up and 2:29 a positive y-value will make the shadow go down. 2:34 Finally, the b-value is foreshadowed blur, 2:37 and higher values will blur the shadow more, 2:43 adjusting these three values together can create different illusions and effects. 2:47 We want these photos to be just a little bit off the page, 2:52 almost like a printed photograph sitting on a surface. 2:57 First, let's adjust the shadow color so that we can actually see it. 3:01 We'll keep this color black, but let's set the opacity something like 40%. 3:07 Next leave the x-value at the default and 3:13 set the y-value to 1 so it's just below the image. 3:18 And then set the blur value to 3, so that it's a bit more crisp. 3:24 Finally, let's round off the corners of this image just a bit. 3:31 Just above Fill, Border, and Shadow areas, 3:35 there's a little rounded corner button with a number right next to it. 3:38 The number is the corner radius, and it determines 3:45 the roundness of the corners, and right now, at 0, they're perfectly square. 3:49 Let's change this to a value of 4. 3:55 Now, deselect the image by clicking anywhere in the blank area of the Canvas. 3:59 And the result is probably difficult to see on video, 4:05 so I'll zoom in to one of these corners. 4:09 And what I did there is I hit the Z key to select the Zoom Tool. 4:15 And I dragged the box around the corner so that we can zoom into that specific area. 4:19 And as you can see, we now have this nice subtle shadow and rounded corners. 4:26 And remember to zoom to fit, you can hit Ctrl+0 on Windows or Cmd+0 on Mac. 4:33 I'm going to go back to the selection tool. 4:41 And just to finish things off, let's select the profile image and 4:44 remove the border from it. 4:48 And as always, remember to save your work when you're done. 4:51 Putting images in place changes the design a lot and that's a good thing. 4:55 They're a prominent part of the design, so we want them to be there 5:01 when we're placing text and buttons which is exactly what we're working on next. 5:05
You need to sign up for Treehouse in order to download course files.Sign up