User Experience Design with Adobe XD- Learn UI and UXD

Here we’ll explore XD’s interface and core components. You’ll be introduced to themes that we will be putting into practice throughout the course.

In the Activity...
This is an introduction to the tools of XD. We'll demonstrate each then go through what they'll learn by the end of the course.

Everything in XD revolves around wireframes. We’ll be using a project brief, UX persona, and UI kits to provide a base for design.

In the Activity...
Odin will provide a project brief and persona to show who the design is for. He'll then show where to find pre-made UI Kits to jumpstart the wireframing process and build a basic wireframe using a UI Kit

Here we cover the elements we need to stylize our design. We’ll explore type, swatch a color palette, and build buttons

In the Activity...
We'll review each element, building on each as we go to make the basic elements for the wireframes.

Linked assets are key to avoiding repetitive tasks and staying organized. Easily make changes across artboards and speed up your workflow.

In the Activity...
An overview of components and demonstrate their use by creating elements and assigning them as components. We'll copy a component to another artboard and show how changes are linked. We'll take a component and create duplicates using repeat grids

Using the skills we’ve learned so far, we’ll wireframe the rest of the homepage and contact us page to include the features outlined in the brief.

In the Activity...
You will wireframe the rest of the two pages with Odin, using the elements we made and skills you've learned so far

Now we begin connecting our artboards through interactions. We’ll cover the basics of creating transitions, and previewing your prototype

In the Activity...
We connect the two pages using basic transitions in the prototype tab. I'll then show how to preview the prototype on the desktop

Here we build main navigation screens for a mobile app to go with our website. We’ll add interactions and preview the prototype.

In the Activity...
I'll walk you through making the main screens for the mobile version of the project. We'll add basic transitions and preview the prototype.

Sharing low fidelity wireframes with others allows you to get feedback on the key elements of the user interface before adding hi fidelity features. Here you learn to publish your wireframes, receive feedback, and record interactions.

In The Activity...
I'll show how to publish a prototype by creating a shareable link and opening it in a browser. You'll go through how comments are added, and how to record yourself demonstrating the prototype in preview mode.

Now that we’ve built and tested our wireframes, it’s time to stylize with design elements. We’ll find inspiration, finalize our color palette and fonts, and use character styles to save us time later on.

In the Activity...
We'll examine websites you can use to find inspiration. We'll create a basic moodboard and create a color palette from it. We'' review how to find fonts and choose ones that work together, then turn then into character styles by adding them to the components panel.

Not all icons are created equal. We’ll use lines, shapes, and the pen tool to make custom icons and details to elevate your UI design.

In the Activity...
You'll learn how to create and integrate basic icons and draw elements to further develop our high fidelity wireframes.

Eliminate repetitive tasks and auto-import assets to speed up your workflow. You’ll also learn tricks to make the most out of repeat grids and generate placeholder content.

In the Activity...
We'll walk through how to find, install, and use plugins. We'll have files with images and text ready for the autofill plugins for them to download and follow along

Animate UI elements with microinteractions to bring your design to life. We’ll learn what they are and apply them to buttons and images.

In the Activity...
You'll learn what Microinteractions are, websites where to find microinteraction examples, and create our own in Adobe XD.

Presentation is an essential part of any UI project. We’ll incorporate final imagery and text into our design, find mockups, and learn to use them. You’ll learn how to create a high res mockup for your design with and without using Photoshop.

In the Activity...
We'll look at free and paid asset sites. We'll take an image and manipulate it in multiple ways within XD such as masking and opacity. We'll download a free mockup graphic template and show how to use it and why you should.

We’ll go beyond the basics so you can prototype like a pro. It’s not as scary as it sounds. We’ll walk you through simple techniques to build impactful transitions.

In the Activity...
Odin will walk you through how to use drag transitions to prototype a carousel. We'll also make a time-delayed number ticker.

It’s time to put your finished prototype to the test, the user test, that is. We’ll walk through how to go about it. Congrats! Your prototype is ready for export to developers, we’ll show you how to format it properly for an easy handoff

In the Activity...
We'll discuss free and paid, moderated and unmoderated testing. We'll then go through the exporting process.

I really hope you enjoyed this course! Don't forget to leave a review here on Udemy!

I hope you take advantage of these learning opportunities from Mark and Framework:

⭐️ Become a pro-level web/mobile developer or designer for just $9.95 a month: https://frameworktv.com

⭐️ Free courses, workshops, and projects for developers and designers: https://www.frameworktv.com/free-training

Please follow us:

Mark's Twitter: http://www.twitter.com/mlassoff

Subscribe to Framework on YouTube: https://www.youtube.com/c/frameworktechmedia

Thanks again!

-Mark