Autoplay
Autocomplete
Previous Video
Complete and Continue
Learn how to Design Websites with Adobe XD while having a great workflow
Introduction
Welcome to the course! What to expect (1:34)
Here are your downloads (don’t forget to install fonts) (1:59)
Adobe Interface Basics (8:15)
Understanding Layers in Xd (3:21)
Selecting, moving and duplicating (4:01)
Alignment fundamentals (7:12)
The very useful Assets panel (4:32)
Artboards. All you need to know. (3:47)
Getting the right tools
Where to get the latest pre-made templates (3:52)
Getting free fonts & icons & images & color pallets & filler text (6:53)
Preparing our design file
Preparing our first Artboard (8:32)
Preparing our colours (5:24)
Preparing our fonts (10:54)
Create our first Home page
The big header image & menu (9:41)
The wave shape divider (9:29)
Floating images with shadows (6:46)
Client Logo section with the Repeat Grid tool (7:22)
Statistics section with empty boxes (4:17)
Testimonial section with the pen tool (5:35)
Call to action section with gradients (7:39)
Footer as a reusable symbol (3:36)
Creating the other pages quickly
The portfolio page (7:01)
About page part 1: A Quick Start (7:03)
About page part 2: Tabs + Gallery (6:25)
About page part 3: FAQ section (4:15)
Contact page with vector icons (6:27)
A travel website with background blur (7:34)
A book store website with masks (8:51)
Responsive design
Responsive mobile design - Part 1 (7:58)
Responsive mobile design - Part 2 (4:24)
Exporting & sharing
Artboard and Element exporting (8:11)
The Sticky Menu on top (4:58)
Creating a prototype for web & mobile (4:29)
Making a video and shareable link (2:56)
The end
Congratulations + Do you want more? (1:33)
Artboards. All you need to know.
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock