Lessons:19Length:1.5 hours
3.7 Create a Max-Width Artboard
We’ve just about covered all the key functionality of XD for responsiveness, and in the next section we’re going to go through some practical demonstrations. To prepare for that, in this lesson we’ll get an artboard ready that perfectly wraps the site at its max-width so we can use this as a base for the other artboards we’re about to create.
1.Introduction
1.1Responsive Design in Adobe XD00:49
1.1
Responsive Design in Adobe XD
00:49
2.Responsive Refresher
2.1Responsive Design Is Just Two Things05:52
2.1
Responsive Design Is Just Two Things
05:52
2.2Workflow, Breakpoints, and Do We Still Do “Mobile First”?09:36
2.2
Workflow, Breakpoints, and Do We Still Do “Mobile First”?
09:36
3.Responsive Design in Adobe XD
3.1Quick Overview of What You Can Do in XD04:56
3.1
Quick Overview of What You Can Do in XD
04:56
3.2The “Responsive Resize” Function09:05
3.2
The “Responsive Resize” Function
09:05
3.3Artboards and Responsiveness04:06
3.3
Artboards and Responsiveness
04:06
3.4Emulating Flexible Width Columns09:17
3.4
Emulating Flexible Width Columns
09:17
3.5“Repeat Grid” and Responsiveness08:30
3.5
“Repeat Grid” and Responsiveness
08:30
3.6Handling Text05:05
3.6
Handling Text
05:05
3.7Create a Max-Width Artboard02:14
3.7
Create a Max-Width Artboard
02:14
4.Breakpoint Artboards
4.1Creating Breakpoint Artboards03:32
4.1
Creating Breakpoint Artboards
03:32
4.21000px Breakpoint03:21
4.2
1000px Breakpoint
03:21
4.3900px Breakpoint03:53
4.3
900px Breakpoint
03:53
4.4700px Breakpoint04:29
4.4
700px Breakpoint
04:29
4.5500px Breakpoint02:56
4.5
500px Breakpoint
02:56
4.6400px Breakpoint02:59
4.6
400px Breakpoint
02:59
4.7Smallest Breakpoint03:55
4.7
Smallest Breakpoint
03:55
5.Conclusion
5.1Device-Specific Artboards03:36
5.1
Device-Specific Artboards
03:36
5.2Wrapping Up04:29
5.2
Wrapping Up
04:29
