Adobe XD Mobile & Web UX/UI for Dummies: Quick Crash Course!

Learn everything to get started with stunning prototypes and UX/UI Design in Adobe XD in few hours!

  • (5.0) 0 students enrolled

Course Overview

In the first session, we will see how we can download and install Adobe XD into your computer.

Then in the next session, we will have a quick overview of the Adobe XD application's user interface.

Then we will proceed with managing the artboards in XD which is where we are creating our screen designs. Just like other Design Softwares, XD also will be using a concept of layers while prototyping.

We will deal with layers in the next session.  Then as the next step, we will proceed with basic things like creating basic shapes and manipulating the properties of them.

Then we will try with different text editing options.  And then we will play with colours and gradient colour combinations.

Then to make designs more attractive and natural, we can use the various blurring and shadow options available. We can easily duplicate elements, rotate, resize, align and do other translations using Adobe XD.

Also, it features boolean operators like Adding, subtracting etc.

Then we will see how we can import assets like images and how we can apply masks to the images or elements. And also we will try shape editing and pen tool to create custom shapes other than the ones that are predefined in the application.

Repetition is a big problem while dealing with screen designs. Adobe XD solves this by using a feature called repeat grids. Also, we will see the different export options available.

Prototyping is the step in Adobe XD by using which we can link the different screens by creating hot spots in screens by which the customer can interact with the prototype.

We will also see how we can include plugins in the Adobe XD application to increase its capability and add additional functionality Adobe XD.

We will then try to design a quick and easy mobile chat application. We are making use of the sample Adobe XD Documents, called as UI Kits available from the Adobe Website and reusing components to create our app quickly and effectively.

Our app will be having a splash screen which transitions automatically to a login or register screen. We will design these screens by using most of the UI Kit elements.

Then later we will design a chat listing screen where all chats will be listed and a conversations screen for individual chats. We will also create an overlay menu just like the mobile apps are having nowadays.

Also, we will link together these screens using the prototyping options available.

After that, we will go ahead with simple website design. We will be designing a university website. We will first design a Home Screen. Here also we can create it quickly as we are reusing the elements from the web design UI Kit.

Then we will create an About us screen to have the contents and a Contact us screen. Later we will link the screen together so that the user can interact with it.

Overall this is a quick and easy crash course which enables you to learn Adobe XD in only a few hours. There will also be a course completion certificate provided at the end of this course to include in your portfolio. So be ready to create stunning prototypes and impress your clients. See you soon in the classroom.

 

What are the requirements?

  • A standard configuration computer is the only requirement.

What am I going to get from this course?

  • UX/UI Design in Adobe XD and prototyping within just 3 hours!

What is the target audience?

  • Beginner who wants to start with Adobe XD UI/UX design and prototyping.

About the Author

I  am a pioneering, talented and security-oriented Android/iOS Mobile and PHP/Python Web Developer Application Developer offering more than eight years’ overall IT experience which involves designing, implementing, integrating, testing and supporting impact-full web and mobile applications. I am a Post Graduate Masters Degree holder in Computer Science and Engineering. My experience with PHP/Python Programming is an added advantage for server based Android and iOS Client Applications. I am currently serving full time as a Senior Solution Architect managing my client's projects from start to finish to ensure high quality, innovative and functional design.

Course Curriculum

Course Introduction and Table of Contents
1 Video Lectures | 00:06:53

  • Course Introduction and Table of Contents
    06:53
     

Downloading and Installing Adobe XD
1 Video Lectures | 00:03:48

  • Downloading and Installing Adobe XD
    03:48
     

Getting Familiar with the Adobe Interface
1 Video Lectures | 00:09:31

  • Getting Familiar with the Adobe Xd Interface
    09:31
     

Managing Artboards
1 Video Lectures | 00:12:42

  • Managing Artboards
    12:42
     

Layer based Design- Groups and Components
1 Video Lectures | 00:12:44

  • Layer, Groups and Components
    12:44
     

Dealing with basic Shapes
1 Video Lectures | 00:07:30

  • Basic Shapes
    07:30
     

Text Editing Features
1 Video Lectures | 00:06:56

  • Text Editing Features
    06:56
     

Gradients and Colors
1 Video Lectures | 00:05:38

  • Gradients and Colors
    05:38
     

Blur and Shadow
1 Video Lectures | 00:04:24

  • Blur and Shadow
    04:24
     

Duplicate, Align, Rotate and Resize
1 Video Lectures | 00:09:13

  • Duplicate, Align, Rotate and Resize
    09:13
     

Boolean Operator Tools
1 Video Lectures | 00:03:33

  • Boolean Operator Tools
    03:33
     

Importing and Masking
1 Video Lectures | 00:04:10

  • Importing and Masking
    04:10
     

Repeat Grid and Exporting Assets
1 Video Lectures | 00:08:59

  • Repeat Grid and Exporting Assets
    08:59
     

Pen Tool Shape Editing and Drawing
1 Video Lectures | 00:08:31

  • Pen Tool Shape Editing and Drawing
    08:31
     

Assets and Components
1 Video Lectures | 00:06:43

  • Assets and Components
    06:43
     

Prototyping and Linking Screens
1 Video Lectures | 00:06:45

  • Prototyping and Linking Screens
    06:45
     

Quick Session: Plugins
1 Video Lectures | 00:02:45

  • Quick Session: Extending Functionality with Plugins
    02:45
     

Quick Mobile Chat App - Downloading UI Kits and Resources
1 Video Lectures | 00:10:51

  • Mobile Chat App - Downloading UI Kits and Resources
    10:51
     

Mobile Chat App - Splash, Register, Login Screens
1 Video Lectures | 00:08:23

  • Mobile Chat App - Splash, Register, Login Screens
    08:23
     

Mobile Chat App - Chat List and Conversation Screens
1 Video Lectures | 00:05:58

  • Mobile Chat App - Chat List and Conversation Screens
    05:58
     

Mobile Chat App - Prototyping and Linking Screens
1 Video Lectures | 00:05:39

  • Mobile Chat App - Prototyping and Linking Screens
    05:39
     

Mobile Chat App - Left Side Menu Overlay
1 Video Lectures | 00:09:31

  • Mobile Chat App - Left Side Menu Overlay
    09:31
     

Sharing Options
1 Video Lectures | 00:03:36

  • Sharing Options
    03:36
     

Real Android Device Preview
1 Video Lectures | 00:09:09

  • Real Android Device Preview
    09:09
     

Real iOS Device Preview
1 Video Lectures | 00:06:25

  • Real iOS Device Preview
    06:25
     

Quick Website Design using UI Kits - Downloading UI Kits
1 Video Lectures | 00:11:15

  • Quick Website Design using UI Kits - Downloading UI Kits
    11:15
     

Quick Website Design - Home Page
1 Video Lectures | 00:08:55

  • Quick Website Design - Home Page
    08:55
     

Quick Website Design - About Page
1 Video Lectures | 00:05:56

  • Quick Website Design - About Page
    05:56
     

Quick Website Design - Contact Us Page
1 Video Lectures | 00:05:19

  • Quick Website Design - Contact Us Page
    05:19
     

Quick Website Design - Prototyping and Linking
1 Video Lectures | 00:07:47

  • Quick Website Design - Prototyping and Linking
    07:47
     

reviews

  • No reviews found