Adobe XD Masterclass Learn Web Design UI UX Design

Adobe XD Masterclass Learn Web Design UI UX Design

What you’ll learn

Use Adobe XD like a professional
Advanced design techniques for modern projects
Make your designs interactive by creating prototypes
Everything you need to know about Adobe XD
How to create awesome UI work and how to design for great UX

Requirements

Adobe XD (which is free)
Windows 10 – Adobe XD doesn’t work on Windows 7 or 8

Description

Adobe XD is the next big thing in the design industry! Learn how to use it to create better designs, impress your work colleagues or your boss, start a new business, or charge more for your freelancing projects.Note: Adobe XD doesn’t work on Windows 7 or 8!This training is perfect for people of all levels. It doesn’t matter if you’re a long-time Photoshop user, an Illustrator enthusiast or you’re just getting started. Adobe XD will make you a better UI & UX designer. Here’s what you’ll learn:The fundamentals of Adobe XD – how to get up and running with it;How to use Adobe XD’s advanced features;Design beautiful UI (user interface) projects: websites, mobile apps, presentations of all sorts;Learn how to apply UX (user experience) principles without getting overwhelmed by loads of theory;Create interactive prototypes that will impress clients;Help your clients make more money by making key design changes to their websites;Who is this training program for?Anybody that wants to learn about the next big thing in the design world;People who are not happy with Photoshop’s performance – it’s so slow sometimes!Web designers who want to make more money from their projects;People who need to create sleek and professional presentations (forget PowerPoint!);App designers who want to quickly create iOS or Android apps;Developers who want a better handover process from designers;Project managers that need interactive prototypes done fast;If you don’t have a lot of time to learn about various design programs, then this is the best course for you! Adobe XD is easy to learn and you’ll see how through fun exercises and activities, you’ll become proficient in no time at all!”Get great results as fast as possible!” – that’s how I’ve created this course. We don’t waste time with boring theory. We start with the absolute basics and we work our way up, gradually, step by step. This is beginner friendly, but in the later sections advanced users will have a lot to learn too!Important Features Included:Course workbooks (cheat sheets): use them to get up and running fast. They contain answers to most questions, detailed explanations about certain techniques shown in the videos, and much more;Live chat: my students frequently find me on our Discord group chat. This is a free program where you can chat with my fantastic community of students, ask questions, and get help fast. I’m regularly on there!All the sources files are included (.xd files): this means you can easily work along and pick things up at any pointFacebook group: get access to a private group of over 7000 people who regularly share their designs, insights, and comments.

Overview

Section 1: Getting Started

Lecture 1 Introduction

Lecture 2 How to get the most out of this training

Lecture 3 Download all the resources from the course

Lecture 4 Get started with Adobe XD

Lecture 5 Create your first design in Adobe XD

Lecture 6 Adobe XD vs Photoshop

Lecture 7 How to get around Adobe XD

Lecture 8 Best way to select layers in XD

Lecture 9 Exercise: Practice your selecting

Lecture 10 From Photoshop or Illustrator to Adobe XD!

Lecture 11 Cloud documents and saving your work

Lecture 12 Adobe XD quirks

Lecture 13 Section conclusions

Section 2: Adobe XD’s tools and features

Lecture 14 Introduction

Lecture 15 How to work with rectangles like a pro

Lecture 16 Best way to work with images

Lecture 17 How to design a modern presentation

Lecture 18 Use the ellipse, polygon and line tools

Lecture 19 How to edit shapes in Adobe XD

Lecture 20 Discover the Pen tool in XD

Lecture 21 Create geometric shapes

Lecture 22 Add text to our presentation

Lecture 23 Work with colors and gradients

Lecture 24 Grids, guides, smart guides – pixel perfect designs

Lecture 25 The alignment tools – Overview

Lecture 26 How to use the alignment tools

Lecture 27 Create a collage

Lecture 28 Let’s have fun – use all the tools

Lecture 29 Section conclusions

Section 3: Saving and exporting your work

Lecture 30 Export our work as PNGs

Lecture 31 Share your work to get feedback

Lecture 32 Optional – Save presentations as PDFs

Lecture 33 Share your work with developers

Lecture 34 Shrink your PNGs and JPEGs without losing quality

Section 4: Adobe XD advanced features

Lecture 35 Introduction

Lecture 36 Fast designing with repeat grid

Lecture 37 Quickly replace content

Lecture 38 Components – a revolutionary feature

Lecture 39 Practice working with components

Lecture 40 Why we need to talk about style guides

Lecture 41 How to supercharge your color use

Lecture 42 How to work with character styles

Lecture 43 Here’s how you actually set up your assets panel

Lecture 44 A smarter way to work with linked assets

Lecture 45 Undecided? Keep multiple versions!

Lecture 46 Working with several designers AT ONCE

Lecture 47 Section conclusion

Section 5: First web design project

Lecture 48 Introduction to our first web design project

Lecture 49 Create the website’s header

Lecture 50 My advice for perfect social media icons

Lecture 51 Setting our typography

Lecture 52 Adding the search bar

Lecture 53 The website’s categories

Lecture 54 Build the content area with repeat grid

Lecture 55 Pagination through XD components

Lecture 56 Create the footer

Lecture 57 Overview of the homepage

Lecture 58 Create the product details page

Lecture 59 Finishing touches on the product details page

Section 6: Responsive design

Lecture 60 What is responsive design?

Lecture 61 Designing without coding: why and how?

Lecture 62 Making the mobile version of the homepage

Lecture 63 Adjusting the design for the mobile version

Lecture 64 Editing the footer for the mobile version

Lecture 65 Create the mobile version for the product details page

Lecture 66 Design variation #1 – color

Lecture 67 Design variation #2 – typography

Lecture 68 Design variation #3 – the layout

Lecture 69 Key things about our design

Section 7: Make the design interactive (prototyping)

Lecture 70 Introduction to prototyping

Lecture 71 The fundamentals of wiring a prototype

Lecture 72 Trigger types in Adobe XD

Lecture 73 Transition Animations and Easing

Lecture 74 Auto-animate – the incredible game changer

Lecture 75 Auto-animate and drag

Lecture 76 Previous artboard – a must in any large project

Lecture 77 How to make menus and pop ups seem real

Lecture 78 Jump to a part of your design with “Scroll To”

Lecture 79 Here’s why your animations don’t matter

Section 8: Advanced Prototyping

Lecture 80 Here’s why we should animate our design

Lecture 81 What you should and shouldn’t animate

Lecture 82 Create hover states for social media & main menu

Lecture 83 Prototyping the search box – hover and down state + drop-down

Lecture 84 Create a hover state for the repeat grid

Lecture 85 Setting up the pagination and footer

Lecture 86 How to quickly change your layout with stacks

Lecture 87 Extras: Make the navigation work

Section 9: The First Key to Becoming a Great Web Designer

Lecture 88 The first pillar of web design

Lecture 89 Best settings for a web design project

Lecture 90 Case study: Non-standard layouts

Lecture 91 Exercise: Create a standard website layout

Lecture 92 How to size your web elements correctly

Lecture 93 My formula for perfect text

Lecture 94 Case study: text layers

Lecture 95 Color Contrast

Lecture 96 Case study: Colors – Part 1

Lecture 97 Case study: Colors – Part 2

Lecture 98 How to align elements in the hero area

Lecture 99 3 rules for web design icons

Lecture 100 Case Study: Visual Balance

Lecture 101 Thoughts on the first pillar of web design

Section 10: The Second Key to Becoming a Great Web Designer

Lecture 102 Introduction

Lecture 103 What’s the point of the website?

Lecture 104 The user versus the business owner

Lecture 105 Analytics in Web Design

Lecture 106 Templates & Website Builders – The web designer’s death?

Lecture 107 Case Study: 4 versions of the same website

Lecture 108 E-commerce homepage layout

Lecture 109 E-commerce product details

Lecture 110 E-commerce checkout

Lecture 111 Why aren’t websites pixel perfect?

Lecture 112 Landing page vs a website

Lecture 113 Case studies: the client’s needs

Lecture 114 Lead generation in landing pages

Lecture 115 Why landing pages have a bad reputation

Lecture 116 Digital product landing page

Lecture 117 A/B testing landing pages

Lecture 118 Case Study: Landing page analysis

Lecture 119 Final thoughts about the client’s needs

Section 11: The Third Key to Becoming A Great Web Designer

Lecture 120 Introduction

Lecture 121 What’s UX?

Lecture 122 Improve the checkout process to double sales

Lecture 123 Improve the mobile version to double sales

Lecture 124 7 website tweaks that show attention to detail

Lecture 125 Upgrading the mobile product page

Lecture 126 Doing 1-on-1 sessions with a coder

Lecture 127 Bad UX is very expensive

Lecture 128 The best example of good UX and attention to detail

Lecture 129 UX case study – forms

Lecture 130 UX case study – icons

Lecture 131 UX case study – vague actions

Lecture 132 UX case study – hierarchy

Lecture 133 UX case study – fake content

Lecture 134 UX case study – buttons

Section 12: Complete Responsive Website Design Project

Lecture 135 Download all the resources here

Lecture 136 The most important question when starting a new project

Lecture 137 How to research/find inspiration for your project

Lecture 138 Set up the most important part of the layout

Lecture 139 Create the top bar

Lecture 140 How to choose fonts for your project

Lecture 141 How to choose beautiful colors

Lecture 142 Organize the top bar

Lecture 143 Create the structure for the header

Lecture 144 Set a style for the header

Lecture 145 Attention to detail in the header

Lecture 146 Building a great hero area

Lecture 147 Redesign the categories menu

Lecture 148 How to display all the product details in a grid

Lecture 149 Here’s how you find the best layout for the grid of products

Lecture 150 Create the first version of the product card

Lecture 151 The second version of the product card

Lecture 152 The third version of the product card

Lecture 153 How to design a clean and modern FAQ section

Lecture 154 Create a newsletter sign up form

Lecture 155 How to design a beautiful footer

Lecture 156 Final variation and thoughts about the homepage

Lecture 157 DOWNLOAD THE FINAL PROJECT HERE

Section 13: How To Create Interior Pages

Lecture 158 Analysing how we can improve the product page

Lecture 159 Setting up the layout for the top part of the product page

Lecture 160 How to organize lots of information in the product’s page

Lecture 161 How to add small details that make a difference

Lecture 162 How to handle large quantities of text

Lecture 163 Creating the sidebar

Section 14: How to Create A Responsive Design

Lecture 164 Introduction to the mobile version

Lecture 165 How to start the mobile version for the homepage

Lecture 166 How to adjust the top bar for the mobile version

Lecture 167 Here’s how you create the header for the mobile version

Lecture 168 Modify the hero area & categories for the mobile version

Lecture 169 Improve the navigation for the mobile experience

Lecture 170 Create a grid of products suited for the mobile version

Lecture 171 Finishing the grid of products – mobile version

Lecture 172 Make the text easy to read in the FAQ section

Lecture 173 How to make the newsletter form fit the mobile version

Lecture 174 Make a new layout for the footer

Lecture 175 Conclusions: e-commerce mobile version

Section 15: Responsive Design for Interior Pages

Lecture 176 The mobile version for the product’s page

Lecture 177 Create the mobile structure for the product’s page

Lecture 178 How to style items in terms of their importance

Lecture 179 Create a variation to improve sales

Lecture 180 10% more work for 50% better results

Lecture 181 Create another layout for the product’s page

Lecture 182 Make a smarter structure for the mobile version

Lecture 183 Create the reviews and nutritional tabs

Lecture 184 Adding small details that matter

Lecture 185 Checking the design on a real phone

Lecture 186 Incredible variations in no time at all

Section 16: Prepare the Design for Coding

Lecture 187 Preparing the design for coding

Lecture 188 How to give the coder what he needs from Adobe XD

Lecture 189 How to prepare graphics for coding

Lecture 190 Server-side content and multi-layer graphics

Lecture 191 Getting up and running with Zeplin

Lecture 192 Best way to handle assets for the coders

Lecture 193 Here’s why it’s essential you deliver what’s needed

Lecture 194 How the coder sees the projects

Section 17: What’s next?

Lecture 195 Do this before you start freelancing

Lecture 196 Here’s what I suggest you do next

This course is great for web designers, app designers, and people who rely on visual presentations,Designers who want to stay current with the latest design tools,Designers who are interested in making their work interactive,People who are interested in learning about UI & UX

Course Information:

Udemy | English | 16h 55m | 11.49 GB
Created by: Cristian Doru Barin

You Can See More Courses in the Design >> Greetings from CourseDown.com