UI UX Design & Prototyping using Adobe XD

This video will give you an overview of what this course includes and what you will learn by completing this course.

In this video we will download and install the latest version of Adobe XD.

This video discusses what User Interface (UI) design and User Experience (UX) design is and what each disciplines roles are.

This video will showcase a great icons set by Google called Google Material Icons.

This video will showcase a great icons set called Box Icons.

In this video we will cover all of the main UI Kits you will need for Adobe XD.

This video will showcase a great store with free and paid design files and assets.

This video will showcase unDraw a great website for free illustrations both in personal and commercial projects.

This video will showcase unsplash a great stock image website. Free for both personal and commercial use.

This video will cover two great font websites for your projects. Adobe Fonts (previously known as Typekit) and Google Fonts.

In this video we will dive into Adobe XD and take a look at the programs interface and tools.

Here is every shortcut for Adobe XD for both Windows and Mac.

This video will cover the Adobe XD toolbar and each tools functions and examples of its uses.

This video will cover Adobe XD's property inspector.

This video will cover repeat grid, one of the most time saving tools in XD. This tool lets you repeat elements in your design in seconds.

This video will cover responsive resize. This feature lest you resize your artboards to scale a design for a new device size.

In this video we will look at how masking works in Adobe XD.

This video will cover two features to save you time and improve your workflow, Assets Panel and Creative Cloud Libraries. Creative Cloud Libraries lets you sync your design assets between other Adobe programs like Photoshop and Illustrator. The Assets Panel on the other hand lets you store your colors, character style and symbols inside of your Adobe XD project.

This video will showcase some simple shortcuts to help you navigate layers in Adobe XD quicker.

This video will showcase how symbols work and behave in Adobe XD.

In this video we will start to create some icons inside of Adobe XD. Similar to Illustrator, Adobe XD is a vector based program which allows us to make some easy icons right inside of XD. I will also share some tips to help you use icons in your designs.

In this video we will cover the first project we will be doing within Adobe XD. Also attached to this lesson are the design files.

In this video we will create are low-fidelity wireframes and high-fidelity wireframes for our first Adobe XD project.

In this video we will take our project designs and prototype it inside of Adobe XD. The prototype tab is an amazing part of Adobe XD that lets you test your apps by linking together your design artboards.

Since we now have some experience with Adobe XD's prototype tab in this video we will cover all you can do with it in detail.

This video will showcase Adobe XD's share for review, share for developers and record. Share for review lets you publish a link that you can send to anyone like a client for them to preview the design and test the prototype. Share for developers lets you publish a link for developers that gives them details about your design so they can seamlessly turn it into code. Finally record lets you record your prototype and save it as a video to add to portfolios and projects.

This video will showcase how you can export your assets and design files.

Adobe XD is update monthly. This video will cover changes to the course when the updates are released.

In this video we will learn how alignment is used in User Interface (UI) design and User Experience (UX) design.

In this video we will learn how size and contrast is used in User Interface (UI) design and User Experience (UX) design.

In this video we will learn how space and negative space is used in User Interface (UI) design and User Experience (UX) design.

In this video we will learn how color theory is used in User Interface (UI) design and User Experience (UX) design.

In this video I will showcase a great tool for selecting better colors for your designs.

In this video we will learn how typography is used in User Interface (UI) design and User Experience (UX) design.

In this video we will discuss what the design process looks like so you can implement it yourself.

This video will showcase a tool called Milanote that will help with creative planning and organization. We will look at how to use Milanote in several steps in the design process.

This video will showcase a tool called Freehand by InVision and we will also look at sketching and creating wireframes.

In this video we will cover the second course project we will be doing within Adobe XD. Also attached to this lesson are the design files.

In this video we will learn about style guides and how to use them. Also setting up a style guide for our project.

In this video we will design our home screen wireframe.

In this video we will finish our home screen for our app project.

In this video we will design our profile screen wireframe.

In this video we will finish our profile screen for our app project.

In this video we will design our contact screen wireframe.

In this video we will finish our contact screen for our app project.

In this video we will design our client profile screen wireframe.

In this video we will finish our client profile screen for our app project.

In this video we will design our sign up screen wireframe.

In this video we will finish our sign up screen for our app project.

In this video we will continue to work on our style guide.

This video will outline why we should prototype our designs before we send them to the developer.

In this video we will start to prototype our project.

In part two we will continue adding more interactions to our prototype.

In part three we will continue adding more interactions to our prototype.

In part four we will finish adding our interactions to our prototype giving us our finished course project.