Adobe Xd Design Prototype Collaborate With Developers

Learn Adobe XD Step by Step and craft Sleek Designs, Style guides and Interactive + Paper Prototypes

Last updated 2022-01-10 | 4.7

- Design real world App in Adobe XD and create Interactive Prototypes
- From Block Level Design to Style Guides to Prototypes. Do all that step by step
- Learn UX of Paper & Interactive Prototypes and add it to your UX portfolio

What you'll learn

Design real world App in Adobe XD and create Interactive Prototypes

From Block Level Design to Style Guides to Prototypes. Do all that step by step

Learn UX of Paper & Interactive Prototypes and add it to your UX portfolio

Developer hand off tools like Avocode and Zeplin to easily hand off your designs to Dev teams

Detailed Specs for Desining an iPhone (IOS) App Step by Step

Get full command on all the tools and features in Adobe XD and become an Expert

* Requirements

* Nothing is required
* this course is for everyone

Description

Adobe XD is becoming a Popular tool in User Experience Design due to its simple Design tools and powerful Prototyping capabilities

This course is for Beginners to learn step by step how to efficiently use Adobe XD to create sleek iPhone Apps along with learning all about Prototypes like Paper Prototypes and Interactive Prototypes

Every Design is a solution to a problem and Designs are useless if you can't convert them into coded Apps. So In this Adobe XD course, you will learn from scratch that how you can Design using Adobe XD. Then how you can create and share your prototypes with your users instantly and the most important part how you can Collaborate and hand-off your designs to your developers so they kiss your hands

Even if you are a novice or beginner, you will have no difficulty learning Adobe XD tool as it covers all the basics step by step

This course major key topics are

All the basics and keyboard shortcuts of Adobe XD (from scratch)
Designing iPhone App in XD
Creating Style Guides for your iPhone App
Paper Prototyping (Types and how to draw them on paper) UX of Prototyping
Interactive Prototyping using Adobe XD
Exporting all your assets and art-boards in 1X 2X and 3X
Collaborating with developers using Zeplin & Avocode
Open Sketch, Photoshop and Illustrator files with Adobe XD
All the latest updates and features in Adobe XD
Install and use Plugins for UI Design in Adobe XD
Learn Apple IOS Design Specification/ Guidelines

So if you are Graphic Designer, a developer or you are a UI or User Experience Designer who uses Photoshop and wants to learn how to quickly design and prototype with Adobe XD, this course is for you. Its the most easiest and lightest tool among all design tools where you can get expert in no time. Believe me

The best thing about Adobe XD is that it is available both for Windows and MAC operating systems and I will be showing both of them in this course so don't hesitate and join now to learn all about Prototyping and Adobe XD now

Even if you have never used any Design tool, still you can learn Adobe XD

Who this course is for:

UI Designer
UX Designer
Developers
Project Managers
Graphic Designers
Beginners

Course content

8 sections • 87 lectures

Introduction to Adobe XD 7 lectures

Download and Install Adobe XD Preview 02:08

In this lesson, I will talk about the Installation requirements of Adobe XD for both Windows and MAC operating systems

Welcome Screen - Adobe XD Interface 2020 Preview 02:56

You will learn what different areas on Adobe XD Welcome screen does and what are the different art board templates present on the welcome screen

Introduction to Adobe XD Interface Preview 06:13

Introduction to Adobe XD User interface, different panels, zoom and major settings

Properties Panel - Adobe XD Interface Preview 02:53

How Properties panel work in Adobe XD and how to control properties of different design tool in XD

Exercise → Create simple Design about yourself Preview 06:47

Create a simple design about yourself. Write your favorite quote and use your image as an avatar to design an iPhone screen

Updates and Upcoming features in XD Preview 02:33

How to stay with every month updates of Adobe XD and how to learn which features Adobe has already started working on for Adobe XD

Design Introduction Mobile Screen about yourself

Use your image along with your name and your favourite things to do along with a button saying HIRE ME and submit it

Basics of Adobe XD in detail 24 lectures

Artboards and Grids in Adobe XD Preview 07:48

Learn all about using Artboards and Layout Grids in Adobe XD

8 tools in Xd Preview 04:44

Learn about the simple 8 tools to create stunning designs in Adobe XD

Using Rectangle Tool Preview 05:46

How to use rectangle tools and its Properties to create awesome looking buttons in Adobe XD

Ellipse Tool and how to use it for quick clipping Preview 01:49

How to use ellipse tool to instantly clip different images inside them

Background Blur and Object Blur Preview 03:20

You will learn how to use background blur which is one of the great features of Adobe XD along with the latest Object blur feature of Adobe Experience Design

Basics of Pen Tool Preview 02:43

Learn all the basics of using Pen tool in Adobe XD

Creating Icons with Pen Tool Preview 05:34

You will create few simple icons in Adobe XD to get more command on Pen tool

Line Tool Preview 01:16

Learn how to use the Line Tool in Adobe XD

Polygon Tool - UDPATE Preview 01:54

Learn how to use Polygon tool in Adobe XD new May 2019 Update

Text Tool Preview 03:25

Use text tool to create paragraph and point text using Adobe Xd

Using Colors and generating Palettes Preview 03:50

How to use Colors in Adobe XD and how to generate Palettes to save colors

Creating Gradients in XD Preview 05:58

Create linear and radial gradients in Adobe XD

Generating Color Schemes using Coolors.io Preview 03:44

Learn how to generate great color schemes using Cooler.io online tool by using just one color

Custom Masks in Adobe XD Preview 05:41

How to draw and use custom shaped masks in Adobe XD

Guides in Adobe XD Preview 02:54

Learn how to use and duplicate Guides in latest May 2019 release of Adobe XD

Character Styles in XD Preview 04:48

How to save your text styles and sizes into Character Styles in Adobe XD so you can re-use them in your style guide

Repeat Grid in XD Preview 08:47

Learn one of the unique features of Adobe XD which is Repeat Grid which can generate any content instantly whether its blog post or a small information card design

Common Keyboard shortcuts in Adobe XD Preview 05:47

Learn common keyboard shortcuts of Adobe XD to speed up your design workflow

More Keyboard Shorcuts Preview 08:25

Few more extra keyboard shortcuts in XD which can be really helpful

Re-useable Components in Adobe XD - UPDATE Preview 05:28

Instantly update, change components in Adobe XD. Learn how to create and re-use Components in Adobe XD

Using Linked Assets and Design System -UPDATE Preview 09:35

Learn to create a Design System in Adobe XD via Linked Assets and see how powerful it can be

Using Horizontal and Vertical Stack in Adobe XD - UPDATE Preview 04:37

Latest new feature of Stacking different groups in Adobe XD and replacing them with other groups using horizontal and vertical stacking

Plugins and App Integrations in Adobe XD (NEW UPDATE) Preview 00:04

How to install and use third party plugins in Adobe XD

Download Resources for Adobe XD Course Preview 00:06

All about Paper and Interactive Prototyping 10 lectures

What is Block-Level Design? Preview 12:15

You will learn a great technique to quickly layout different Design ideas in Adobe XD which is called Block level design. You can also use this in the User Experience process or generating your design solution

Sketching your first Design Idea using Block design technique Preview 08:14

You will learn and see me sketching the block level layouts on paper and I will discuss what tools you need for ideation

Adding details to your drawn Block Sketch Preview 04:06

Creating your first screen of paper prototype. You will learn how to add details to your block layout design on paper and start building your first paper prototype

What are Vertical, Horizontal, T and Local prototypes? Preview 08:58

You will learn different types of Prototypes like

Horizontal Prototypes
Vertical Prototypes
T Prototypes
Local Prototypes

Static and Interactive Prototypes → What is low, medium and high fidelity design Preview 04:19

More on the types of prototypes based on their interactivity level. Also you will learn what is low, medium and hi-fidelity Design?

Pop Quiz about Prototyping

You learned a lot about Prototyping so why not test your knowledge

Adding Details to block design using Adobe XD Preview 07:36

Now we will use Adobe XD to add details to our first block level design idea and you will learn how to create a 1 color wireframe from it

Using UI Kits and Pattern libraries to speedup your design workflow Preview 06:04

In rapid design and prototyping speed is a major factor. You will learn one of the best methods to quickly generate prototypes in Adobe XD by using ui kits and pattern libraries

Exericse → Design Signup Screen using IOS UI Kit Preview 14:04

Your first exercise where you will design a Signup screen in Adobe XD with me (Step by Step)

Create Login Signup Prototype using Adobe XD

Create Login and Signup Screens minimum 2 screens and link them using Prototype Tab of Adobe XD and use slide transitions between them

Designing real world Medical iPhone App Screens in Adobe XD 16 lectures

Preparing for Design → Downloading Assets and Recources Preview 05:11

In this lesson, you will download all the resources needed for this design exercise e.g fonts and graphics etc...

Getting Color Scheme Ideas and Inspirations Preview 05:27

Every project is an inspiration of another design or few other designs. So in this lesson you will see how I use inspiration to create colors schemes for my Medical iPhone App Design

Solving UX (User Experience) problems of old medical App Preview 04:10

You will learn what were the User Experience or UX problems in the old App. Also you will learn how we solved the Visual Design problems in the old App

Design Welcome Screen of Medical App Preview 09:42

You will Design the welcome screen of our Medical iPhone App

Designing the Login Screen Preview 14:28

You will Design the login screen of our Medical iPhone App

Designing the active Login Screens Preview 11:39

You will Design the active Login state screen of our Medical iPhone App

Desining the Signup Screen Preview 07:04

You will Design the Signup screen of our Medical iPhone App with Adobe XD

Designing the Dashboard Screen Part 1 Preview 12:24

You will Design the Dashboard screen of our Medical iPhone App

Designing the Dashboard Screen Part 2 Preview 11:08

You will Design the Dashboard screen of our Medical iPhone App

Designing the Hamburger Sidebar menu screen Preview 09:03

You will Design the Hamburger Sidebar Navigation screen of our Medical iPhone App

Designing Activities Screen Preview 10:35

You will Design the Activities screen of our Medical iPhone App

Designing Sync to Cloud Screen Preview 08:13

You will Design the Sync to Cloud Screen using Adobe XD

Designing Sync Status Screen Preview 04:25

You will Design the Sync Status update screen of our Medical iPhone App. Also we will use standard IOS UI kit from Apple to borrow few design elements

Using Grids to fine-tune your App Screens Preview 05:11

You will learn how you can introduce the use of Grids to improve your designs further in Adobe XD

Refining your Style Guide in XD Preview 08:22

In this lesson, we will refine the symbols, character styles and our colors in our Assets section or simple improve the style guide of our App

IOS Design Guidelines, Specs and Measurements you must learn Preview 08:58

I will discuss the major IOS Design guidelines and you can also download this Design guidelines XD template

Prototyping in Adobe XD - Creating, sharing and using Design Inspect 10 lectures

Fixing Tap Targets and tap boundary area in your designs Preview 06:14

You will learn how to solve the biggest issue in the Interactive Prototype which is fixing the tap target area or boundary using Adobe XD

Prototyping Login and Signup Screens Preview 10:11

You will learn how to link different screens and transition between them so this is the first lesson to start prototyping your designed App in Adobe Xd

Prototyping Dashboard, Activities and Sync Screens Preview 11:14

We will prototype the rest of the screens like Dashboard and activities screens along with the slide in effect of Hamburger menu

Sharing your Prototype with others in Adobe XD Preview 03:51

You will learn how you can instantly share your prototype with your team members or anyone using Adobe XD

Recording Video of your Prototype on MAC Preview 02:15

I will show you how you can record the video of your Prototype using MAC's version of Adobe Experience Design and save that video file

Using Design Inspect in Adobe XD with me Preview 03:57

Now you can share the Design specs with a Free tool from Adobe which is Design Inspect

Auto Animate in Prototyping (New Feature) Preview 09:35

How to use auto animate in prototyping of Adobe XD with simple examples

Creating Animated Loaders using Auto Animate Preview 00:03

How to use auto animate creatively to design and animate loading bars using Adobe XD

Drag in Prototypes (NEW FEATURE) Preview 06:59

How to use New Drag trigger in Adobe XD with an example

Voice controlled Prototype in Adobe XD (NEW FEATURE) Preview 06:08

Learn to build voice controlled or voice commanded prototypes in Adobe XD

Export your Artboards and Assets in 1X, 2X and 3X sizes 6 lectures

Why we need to export in 1X, 2X and 3X sizes? Preview 09:10

You will learn why do we need IOS App or iPhone's App assets or graphics in 3 different resolutions(sizes)

Perfect Example to understand 1X 2X 3X concept Preview 02:45

A great example to understand what is 1x 2x and 3x resolutions on Apple Devices

Export Artobards and create Device Mockups in Adobe Photoshop Preview 07:31

You will learn how to export Single and Multiple artboards in Adobe Experience Design and how you can create a great looking Device Mockup using Adobe Photoshop

Batch export all your designs assets from your App Preview 06:23

You will learn how you can tag your buttons and assets in Adobe XD files and extract all the graphics instantly with one click in all the 1x 2x and 3x res

Using Photoshop Mockup Files with XD (Student's Request Lecture) Preview 04:57

How to use Photoshop Mockups with Adobe XD to show your IOS App Designs to your clients

Final Concept App Design Challenge

Design any Concept App (minimum 4 screens) and show me the mockup and the share its Prototype link with me

Developer Handoff using Zepling and Avocode and a lot more XD Integrations 4 lectures

Live preview of your App prototype on your iPhone Preview 02:11

You will learn how you can connect your iPhone with your MAC and use the Live Preview feature of Adobe XD to view the live prototype on your iPhone and test it before sending it to the client

Collaborate with Developers using Zeplin tool Preview 12:57

Collaborate with your developers using Zeplin online tool which is very popular collaboration and Style guide generation tool among designers and developers. Learn to generate coded styleguides using Zeplin and generate SWIFT code using Zeplin and your Adobe Experience Design files

Using Avocode to handoff your designs to Developers Preview 13:47

Collaborate and Handoff your design to your developers using Avocode which can generate code for almost all layers of your Adobe XD files

Opening Sketch, Photoshop and Illustrator files in XD Preview 07:38

Learn how you can open Sketch and Photoshop files in Adobe XD. Also how you can copy and paste from Adobe Illustrator to XD. What about using CC libraries with Adobe Experience Design