Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:19Length:1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Device-Specific Artboards

Our breakpoint artboards are all finished, so now the coder will know exactly how to handle the layout at each width. However, when showing a design to a client, it will probably still be more useful to show previews for specific artboards.

Thankfully, the way our breakpoint artboards are set up means it’s just a couple of steps to create an artboard for any device size you need. We’ll see how in this lesson.

5.1 Device-Specific Artboards

Hey, welcome back to Responsive Design in Adobe XD. We just finished producing a whole range of break point based art boards. So that we have our layout fully controlled whatever width it needs to be in. However, sometimes you're still gonna wanna be able to create previews for clients or whoever else to show how this design is gonna look on specific devices. So I've got the Apple tool selected here and really I can pick any one of these presets. So let's say, for example, we might start with the Surface Pro 3. Now, I'm just gonna grab that and move that around here. So as you can see, this layout is already wider than our widest, so there's no really any challenge to make that fit. So I'm just gonna turn this into portrait mode. We can see here that the width is 960 pixels, so what we wanna do is choose the bright point layout up here that is just a little bit bigger than the device that we wanna preview. So in that case, this would be the 1000 pixel layout. So we wanna get into that layout, select the wrap element and copy. And go into our device specific preview. And paste that content into the art board. Then we can just shrink it down to fit and because we've made everything to be flexible and adaptable, that's all we need to do to get that to fit into this art board. And the only remaining thing is to make sure that the art board itself shows all the content that we have in here. So for that we just need to drag out the up board to the right height. And now, if we hit this Play button. We have a preview of how this is going to look on Surface Pro. So this is actually, little bit too large, so I'll just shrink this down to show you. So that's giving us a preview of our whole site at this size. And we can do that for any size of device that we wanna show our preview for. So let's pick another one, let's go with say the iPhone 6, 7, 8, and we're gonna flip that one around as well. This one is 667 pixels wide, so let's see which of our layouts would fit best into it. The 700 pixels layout out would go pretty well, just a little bit bigger. So, we're just going to go in the layout, select the wrapper, copy the content and then just paste it straight into the iPhone. Shrink it that tiny bit to make it fit. And then just expand the art board so that it contains the whole design. And now, We have a preview of how this would look on an iPhone. So that is all you're gonna need to do whenever there's any requests to see how it's gonna look in any device at all, you're ready to go. You haven't just designed for a couple of devices, you've designed for everything. So now, you're really adaptable, and whatever anybody wants to see you can put together a demo at a moment's notice. And that wraps up our course on Responsive Design in Adobe XD. There is one more video I'm gonna quickly summarize everything you've learned so you can come back and watch the final video anytime you need a refresher on how to do responsive design in Adobe XD. So I will see you in the final video.

Back to the top