YoVDO

User Experience Design - Adobe XD Mega Course

Offered By: Skillshare

Tags

User Experience Courses Adobe XD Courses Prototyping Courses User Experience Design Courses Responsive Design Courses Website Design Courses 3D Transforms Courses

Course Description

Overview

UI Design, User Interface, User Experience design, UX design & Web Design

Hi everyone welcome to Adobe XD mega course.

Before I jump into the details of the course I want to quickly tell what adobe xd is used for.

Adobe XD is a simple easy to use application dedicated to UI UX design we can call it user interface or user? basically, we use adobe xd to design mobile apps and websites 



Just like our other mega courses this course is designed to take you from absolute beginner to advanced level in UI design. 

This course is divided into 4 main parts, basics of design mode, basics of prototype mode, advanced technique and finally working with real projects. 




In the design mode basics. We will start with downloading Adobe XD and installing then we will open it for the first time. 

I will show you how to work with artboards, shape tools line tools, I will teach you how to use text tools, how to use images easily and effectively. After that, we will cover alignment tools and boolean operations. Then I will show you how to work with components and assets inside XD. later, we will cover a very exciting feature in XD which is a repeat grid. After that, we will cover responsive resize I will show how to use it and how to get  advantage from it for your designs. The last thing we will cover some free Plugins, we will cover the most useful ones. When you finish this part you will have a complete understanding of Adobe XD design tools, you will be ready to use what you have learnt to create some professional design. Together we are going to design two screens of a finance app, we will use all that we learnt in the design mode basics part. 

After we covered and practised everything about design mode we will move to the prototype model. We will start with the basics and then we will cover all of the tools and settings in the prototype mode. We will cover time transition, component states, scrolling groups, overly animation, drag animation, sound, voice and keyboard triggers and much more. At the end we will cover an exciting prototype feature which is auto animate, we are going to animate the design we made in the design part with auto animate. 

After we covered both design and prototype mode we will cover some advanced techniques. Like 3D transform and animation, Glassmorphisms, input prototype, scroll number scroll colours. 

At the end of the course, we are going to create two projects together, the first one is a website homepage for a financial company, we will create it from scratch, we will start with the brainstorming and written form then we will design and prototype it. 

The second project will be an e-commerce app, we will start this one from the brainstorming to the design and then to prototyping. 

After you finish this course you will have a full understanding of Ui design and Adobe XD. You will be ready to use Adobe XD effectively and professionally. You will be ready to start your carrier with UI design.


Syllabus

  • Adobe XD Mega Course Introduction
  • Difference between UI and UX designer
  • Basics Design Mode
  • #1 Download Adobe XD, First time opening it
  • #2 Working with Artboards
  • #3 Working with Shapes and Lines
  • #4 Working With Text
  • #5 Working With Images
  • #6 Alignment Tools & Boolean Operations
  • #7 Assets & Components
  • # 8 Repeat Grid
  • #9 Responsive Resize
  • #10 Plugins
  • Finance App Homework
  • #1 Background and Credit Card Design 4K
  • #2 Buttons And The Rest Of The Screen Design 4K 2
  • #3 Second Screen Design 4K
  • Everything About Prototyping
  • #1 Basics and Time Transition
  • #2 Component States
  • #3 Overlay, Scroll and Drag Prototype
  • #4 Voice, Sound, Gamepad Key Prototype
  • #5 Auto Animate
  • Prototype Homework
  • Some Advanced Techniques
  • #1 Color & Number Scroll Effect
  • #2 Character Input Prototype
  • #3 Glassmorphism
  • #4 3D Transform and Prototype
  • Advanced Section Homework
  • Wallet X Website UI
  • #1 Menu Bar and BG
  • #2 Landing Page P1
  • #3 Landing Page P2
  • #4 Benefits
  • #5 Credit Card And More
  • #6 Prototype
  • E Commerce App
  • #1 Onboarding screen design
  • #2 Login and Signup Screen Design
  • #3 Nike Home Screen Design P1
  • #4 Nike Home Screen Design P2
  • #5 Puma & Adidas Home Screen Design
  • #6 Single Product Preview Design
  • #7 Favourite Screen Design
  • #8 Profile Screen Design
  • #9 My Cart Screen Design
  • #10 Search Screen Design
  • #11 Prototype Onboarding, Sign in & Sign up
  • #12 Prototype Scrolling Effect
  • #13 Prototype Between Nike, Adidas and Puma Screens
  • #14 Prototype Single Product Preview
  • #15 Prototype Favorites Screen
  • #16 Prototype Profile Screen
  • #17 Prototype My Cart Screen
  • #18 Prototype Search And Finalize
  • #19 Prototype Running your App on Mobile
  • End

Taught by

Alan Ayoubi

Related Courses

بناء موقع بسيط عن الكتب باستخدام html و css
Coursera Project Network via Coursera
Building a Website in CMS Hub Starter
HubSpot via HubSpot Academy
Learn Navigation Design
Codecademy
Compare Inline, Internal, and External CSS
Coursera Project Network via Coursera
Create a no-code one page SMB website with Carrd
Coursera Project Network via Coursera