What is the view port (aka blue dotted line) for?

Course contents

SECTION: 1

Getting Started 32:18

1. Introduction to Adobe XD Essentials training course FREE

2:15

2. Getting started with your Adobe XD project FREE

2:26

3. How to earn your certificate FREE

2:28

4. What is Adobe XD for & does it do the coding

5:32

5. What's the difference between UI and UX in Adobe XD

3:33

6. What we are making in this Adobe XD course

1:12

7. What is a persona & task flow in UX design

11:27

8. Class Project 01 - Create your own brief FREE

3:25

SECTION: 2

Wireframing Low Fidelity 12:34

1. What is Lo Fi Wireframe vs High Fidelity in Adobe XD

2:56

2. Artboards & how wide should my website or app be in Adobe XD

9:38

3. Quiz question 1

SECTION: 3

Type, Color & Icon Introduction 1:18:29

1. Working with Type in Adobe XD wireframes

11:25

2. Rectangles, Circles, Buttons and Rounded corners in Adobe XD

8:26

3. Quiz question 2

4. How to use color in Adobe XD FREE

6:16

5. Strokes & copy & paste appearance in Adobe XD

11:56

6. Quiz question 3

7. Quiz question 4

8. Class Project 02 - Wireframe

4:10

9. Free icons for your Adobe XD & UX UI projects FREE

7:59

10. Quiz question 5

11. How to find and use existing UI kits in Adobe XD

7:15

12. Groups & issues editing icons in Adobe XD

15:49

13. Class Project 03 - Icons

5:13

SECTION: 4

Prototyping - Level 1 29:13

1. How to add interaction to your prototype in Adobe XD

7:29

2. Quiz question 6

3. Quiz question 7

4. Prototype animation & easing in Adobe XD

6:10

5. Quiz question 8

6. How see your design on XD App on iPhone & Android

10:22

7. Class Project 04 - Testing on your phone

5:12

SECTION: 5

Animation 26:12

1. Getting started with auto-animations in Adobe XD FREE

11:18

2. Quiz question 9

3. Understanding more about animation in Adobe XD

9:55

4. Quiz question 10

5. Class Project 05 - My first animation

4:59

SECTION: 6

Feedback & Commenting 7:10

1. Sharing Wireframes for comments in Adobe XD

7:10

2. Quiz question 11

SECTION: 7

Moodboard - High Fidelity UI Design 17:50

1. Mood Boards & resources for Hi fidelity UI design in Adobe XD

8:20

2. How to create a mood board in Adobe XD

7:48

3. Class project 06 - Mood Board

1:42

SECTION: 8

Columns & Grids 23:51

1. How to work with Columns & Grids in Adobe XD FREE

15:19

2. Quiz question 12

3. Quiz question 13

4. View port aka dotted line on the page in Adobe XD

4:06

5. Quiz question 14

6. How to add & delete guides to Adobe XD

4:26

7. Quiz question 15

SECTION: 9

Colors 29:52

1. Color Inspiration & the eyedropper in XD

7:10

2. How to create a color palette in Adobe XD

10:43

3. How to create gradients in Adobe XD

5:10

4. Quiz question 16

5. How to save and reused color swatches in Adobe XD

3:17

6. Class Project 07 - Colors & Columns

3:32

SECTION: 10

Text & Fonts - Level 2 48:38

1. What fonts can I use in my web or app design in Adobe XD

12:18

2. Check what other font’s people have used FREE

3:29

3. What common font sizes should I choose in web design

6:12

4. How to make Character Styles in Adobe XD

16:18

5. Quiz question 17

6. Plugin - Adding our first Plugin Lorem Ipsum to Adobe XD

5:19

7. Class project 08 - Text

5:02

SECTION: 11

Drawing 33:10

1. Drawing & editing shapes in Adobe XD

5:51

2. Strangeness with shapes in Adobe XD

5:13

3. Learn to draw with the pen tool in Adobe XD

8:41

4. Quiz question 18

5. Quiz question 19

6. Working with strokes & lines in Adobe XD

6:03

7. Class Project 09 - Icons & Buttons

7:22

SECTION: 12

Working with Illustrator 10:07

1. Do I need to know Illustrator with Adobe XD

10:07

SECTION: 13

Images 16:41

1. Masking & cropping images in Adobe XD FREE

4:36

2. Quiz question 20

3. Free images to use in your XD mockups - Unsplash Pexels Freeimage

2:54

4. Darkening background images with opacity in XD

3:41

5. Quiz question 21

6. Blurring backgrounds and objects in Adobe XD FREE

5:30

SECTION: 14

Working with Photoshop 18:23

1. Do I need to know Photoshop with Adobe XD

10:29

2. Snack bar Toast banners using masked image in Adobe XD

5:56

3. Class Project 10 - Add images

1:58

SECTION: 15

Components & Instances 32:21

1. How to make & use components in Adobe XD

6:35

2. Quiz question 22

3. Quiz question 23

4. Difference between Main & Instance Components in Adobe XD

12:49

5. Quiz question 24

6. How to create component hover states in XD

7:48

7. Quiz question 25

8. Class Project 11 - Buttons

5:09

SECTION: 16

Repeat Grids 17:13

1. How to use the repeat grid in Adobe XD

6:58

2. Class Project 12 - Repeat Grid

7:12

3. Updating & issues with repeat grids of the edge FREE

3:03

4. Quiz question 26

SECTION: 17

Stacks 13:04

1. How to use stacks in XD to make a form

11:24

2. Quiz question 27

3. Class Project 13 - Stacks & Checkout Page

1:40

SECTION: 18

Micro Interactions & Animations 41:29

1. The difference between animation & micro interactions

6:20

2. Dan drawing stuff in Adobe XD

6:55

3. More animation in Adobe XD

10:43

4. Quiz question 28

5. Class Project 14 - My Second Animation

1:45

6. Micro interaction toggle switch in Adobe XD

10:28

7. Quiz question 29

8. Micro interaction burger menu turned into a cross in XD FREE

3:03

9. Class Project 15 - Micro interaction

2:15

SECTION: 19

Prototyping Level 2 33:08

1. How to pin navigation to the top in Adobe XD

7:19

2. Quiz question 30

3. How to create a Popup Modal or popup box in Adobe XD FREE

8:27

4. Quiz question 31

5. Quiz question 32

6. Slide in mobile nav menu overlay in Adobe XD

10:42

7. Class Project 16 - Popup & Navigation

3:22

8. What are Flows in Adobe XD

3:18

SECTION: 20

Exporting 1:01:42

1. How to share your document with clients & stakeholders & user testers

12:35

2. Talking to your developer early in the XD design process

4:54

3. Export the right image file formats from Adobe XD

17:09

4. Batch export images at once using Mark for Export in XD

5:23

5. How to export code in XD for engineers using Design Specs

6:43

6. What is a style guide in Adobe XD

11:44

7. Class Project 17 - Final Design

3:14

SECTION: 21

What Next 6:30

1. Whats next after Adobe XD Essentials FREE

5:30

2. How to request your certificate FREE

1:00