Lessons: 19Length: 1.5 hours
- Overview
- Transcript
4.1 Creating Breakpoint Artboards
We’re about to run through some practical examples of using XD to show how a layout should respond at various sizes, indicating where breakpoints should be used to keep the site legible. Before we jump in, we’ll have a quick overview of the types of things we’ll be looking for when deciding where to put breakpoints, and what will need to be adjusted in the layout for each.
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
