Learn to create responsive design mockups efficiently using Adobe XD's toolsets in this comprehensive 1-hour 33-minute video tutorial. Explore the fundamentals of responsive design, including workflow, breakpoints, and mobile-first approaches. Master XD's features like Responsive Resize, artboards, flexible width columns, and Repeat Grid. Discover techniques for handling text and creating max-width artboards. Practice creating breakpoint artboards for various screen sizes, from 1000px down to the smallest breakpoint. Conclude with insights on device-specific artboards and practical tips for implementing responsive design in your projects.
Overview
Syllabus
1. 1Responsive Design in Adobe XD
2.1 Responsive Design Is Just Two Things
2.2 Workflow, Breakpoints, and Do We Still Do “Mobile First”?
3.1Quick Overview of What You Can Do in XD
3.2 The “Responsive Resize” Function
3.3 Artboards and Responsiveness
3.4 Emulating Flexible Width Columns
3.5 “Repeat Grid” and Responsiveness
3.6 Handling Text
3.7 Create a Max-Width Artboard
4.1 Creating Breakpoint Artboards
4.2 1000px Breakpoint
4.3 900px Breakpoint
4.4 700px Breakpoint
4.5 500px Breakpoint
4.6 400px Breakpoint
4.7 Smallest Breakpoint
5.1 Device-Specific Artboards
5.2 Wrapping Up
Taught by
Envato Tuts+
Related Courses
-
Responsive Website Design In Adobe Xd
-
Introduction to Adobe XD
-
Responsive UX/UI Design in Figma: Auto Layout, Constraints and Breakpoints (2023 latest release)
-
Responsive Layouts Course (How To)
-
Adobe Xd Masterclass: Design a Mobile App & Website Wireframe
-
Adobe Xd Masterclass - UI / UX Design From Scratch
