Skip to main content

What is UI vs UX

Lesson 2 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

What is UI vs UX

Lesson 2 from: Adobe XD: UX/UI Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

2. What is UI vs UX

Lessons

Class Trailer

Getting Started

1

Getting Started with XD

02:21
2

What is UI vs UX

06:19
3

The UX Brief & Persona

11:22

Wireframing Low Fidelity, Type, Color & Icon

4

Wireframing (Low Fidelity)

01:58
5

How Wide for my Website

13:06
6

Existing UI Kits

07:49
7

Working with Type

09:09
8

Basic Colors & Buttons

14:14
9

Free UI Icons

11:45
10

Footers & Lorem Ipsum

05:27
11

New Pages & Artboards

04:20
12

Class Project 01 - Wireframe

11:11

Prototyping a Website

13

Prototyping & Interactivity

08:53
14

Create a Popup Modal

07:57
15

Prototype

02:54
16

Groups & Isolation Mode

02:30
17

How to Use Components (Previously Components)

17:19
18

Production Video - Left Nav

03:52
19

Repeat Grid

05:27
20

Updating Components & Repeat Grids

08:54
21

Prototype Tricks

06:03
22

Navigation Tricks & Tips

04:48
23

Class Project 03 - Components

04:07

Prototyping an App

24

Mocking Up an App

09:40
25

XD App on Your Phone

08:04
26

Fixing the Position

01:01
27

iPhone & Android Status Icons

03:10
28

Production Video - Login

06:45
29

Sharing Wireframes

13:32
30

Recording Your Interactions

03:13
31

Class Project - Wireframe Feedback

01:21
32

Mood Boards

07:43
33

Class Project - Mood Board

00:59
34

12 Column or Grids

04:57
35

Working with Colors

09:02
36

Tricks for Using Colors

06:34
37

Gradients

03:50
38

Class Project 06 - Colors

02:14

Text & Drawing

39

Use Web Safe Fonts

18:00
40

Character Styles

06:59
41

Font & Text Tips Tricks

05:43
42

Plugin Lorem Ipsum

05:39
43

Paste Properties

13:15
44

Class Project 07 - Text & Buttons

02:21
45

Draw Custom Icons

04:13
46

Strokes & Lines

14:28
47

Pen Tool

14:34
48

Drawing Practice

07:15
49

Production Video with Tips

12:27

Working with Illustrator, InDesign & Photoshop

50

Illustrator in XD

09:34
51

Class Project 08 - Custom Icons

01:49
52

InDesign in XD

11:38
53

Pros & Cons for Images

03:58
54

CC Library Connection

11:01
55

Adobe Stock

05:20
56

Free Images

01:48
57

Masking

06:44
58

Photoshop in XD

08:41
59

Infographic

12:12
60

Class Project 09 - Hi-Def Mockup

05:38

APP Design

61

Mobile Phone Mockup

18:08
62

Class Project 10 - Mobile Website

01:24

Placeholder content & Plugins

63

Hidden Features for Repeat Grid

05:17
64

Plugin - Content Generator

04:29
65

Plugin - UI Faces

03:15
66

Plugin - PhotoSplash

04:31
67

Plugin - Copy Cat

03:19
68

Advanced Asset Panel

04:37
69

Advanced Symbols

07:52

Micro Interactions

70

What are Micro Interactions

07:21
71

Button Grow

06:13
72

Animated Image Gallery

06:39
73

Full Vector Change

08:19
74

Class Project 11 - Micro Interactions

05:12

Prototyping Advanced, Voice Interactions & User Testing

75

Time Delay Transitions

04:42
76

Popup Menu or Modal

12:16
77

Animated Mobile Side Nav

03:26
78

Drop Down Menus

03:24
79

Drag Transitions

07:19
80

Number Ticker Scroll

06:51
81

Alexa Voice Commands

09:37
82

What is User Testing

16:53
83

Unmoderated UX Test

12:07
84

Class Project 12 - User Testing

02:23

Pitching to clients & customers

85

Mocking up in Photoshop

09:21
86

ProtoPie

02:40
87

Add Animation Using After Effects

09:39
88

Export Images & Assets

12:56
89

Export Code Using Design Specs

10:49

What Next

90

Class Project 13 - Roar Cycles

10:29
91

Conclusion

05:32

Final Quiz

92

Final Quiz

Lesson Info

What is UI vs UX

All right, A couple of things we need to discuss before we move on and some of the terminology that gets used in both this course and in the industry just so that you you know what I'm talking about when I'm going through the course. Um The main ones are if you've ever seen like job applications online where they say you need to be a UX Ui designer or a product designer. So we'll cover kind of what those are and what the different responsibilities are now before we go on. If you, for me, I act as all of them. Okay. I work as a freelancer, so I take on small projects and I have to do it all. So I'll discuss what they all are individually and basically, if you're in a small man agency or design shop, you are going to be it, you're going to be the UI designer. UX designer and product designer. And if you're working at larger companies, larger organizations or big bigger agencies, you might be split off and be one of these things individually. So what is it you are a designer, is the pers...

on responsible for making things. Okay. So you'll be looking at kind of say it's a website design, you'll be the looking through, you know, consistent icons, you'll be building, you'll be looking at fonts and colors, kind of visual themes throughout the app or web design, Siri. Ui Designer user interface. Looking at the page, furniture or the things that are on the page. So you can be just that okay, a UX designer often is all of the UI stuff plus you are looking at both the brief and the users that are gonna be using it. So maybe the personas that you've built. Okay. And building for that and then testing that. Okay. So working through the actual testing and then coming back and adjusting. So your your designer often won't have that other part. Okay. So yeah, that's a UX designer, You do the UI but there's there's kind of some other parts around it, which we'll discuss in that course. So that's the UX designer. Alright. The last time we'll cover is a product designer. So what is the product designer versus a UX designer? Now? Often, um if I'm a product designer, what I'll be is I'll be a UX designer as well as a product designer, but I'll have more responsibility in a team and you can't really be a product designer in a small agency or by myself. Like I am, you need to be in a bigger company because often the product designer has a lot of managerial roles. Okay, So you'll be in charge of not only the UI and the kind of user testing, but you'll be working with the stakeholders, the clients and getting direction from them. You'll be working with the engineering team who's actually building this thing and potentially the UI designers, multiple UX designers and you'll be making sure everyone's kind of hitting in the right direction, pulling in the right way, that's not the word, but you know what I mean? So, a product designer has kind of a global kind of uh sense of the product from lots of different teams and we'll deal with them all individually and kind of make sure everyone's going the same way. Okay, So you'll be you'll be in charge of kind of making sure budgets are hit, timelines are hit, meetings are held, you'll be doing all the meetings and the stand ups. So, product designer, I guess here is a is a bigger role. If you're kind of from maybe traditional design, think of it like a studio manager. Okay. There's a bit more kind of organizational things involved. So, to recap, product designer K will look after the entire project with lots of people, make sure it's all going well and is working perfectly on budget and it's working for the users and is all on the right timeline. Okay. I'm not sure. I'm waving my hands out here, but feels lofty, that role. Okay, then there's a UX designer whose sole focus is on the user. Okay. They want to make sure within the budgets that they've been given by the product designer. Okay. And the timeline, budgets, they want it within those boundaries. They want to make sure that the user experience is amazing. They, whatever the goals are, they're getting hit and you will test them and design and get it ready and if you're a UI designer and often you're, you're kind of lacking the testing phase, okay? You are looking at the more kind of traditional way of working when we're building websites, where it's just kind of like getting it up, getting it out. And the other thing to look at is that if you're at a small place or doing your own stuff like me, you are all of these, okay, so you're just trying to make it all happen. But those are the kind of key terms you need to understand when somebody's advertising for a product designer. You know, if you're brand new, you might not be ready for that because you've never dealt with, you never run a stand up, which is kind of a meeting where everyone stands up quick meetings in the mornings, but you enjoy the, you know, the user, you know, the user experience design side of it, but maybe not the product designer side. The other thing to note is that most people, the term gets used real loosely, all of them. And so you'll see all students lima and say, is this a job that I can do, and then somebody said, I want a graphic designer, Web designer, uX designer, videographer, product designer and they're just kind of throwing it all in there because it's either going through an HR company that's not too sure about the roles or they're just looking for somebody who could be the best the junior role And it's got product designer in there. So often you need to really clarify with whoever is don't don't say I'm not going to do it okay. You need to find out what the role involves because they just kind of often jobs can be too vague and what they really need is somebody who's, you know, a really good print designer, but they're just thrown in other things that really kind of find out from who is advertising the job, what the key kind of what, what the high percentage of that job work is going to be, what field, because nobody can be amazing at all of them. So, check that out. Now, lastly, in this course, we're looking at being a UX designer. Okay, So we're gonna look at briefs, we're going to look at the personas, take those into account, make a beautiful product, test it, come back, make it amazing. And yeah, that's gonna be our job in this course. And we're gonna use adobe XD to do it. All right, That's it. Let's get into the next video, we'll quickly look at our brief and the personas that we're going to use to build our product in this course. Alright, let's jump in there. Now

Class Materials

Bonus Materials with Purchase

Six Completed Files
Exercise Files

Ratings and Reviews

Haseebullah Johar
 

Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.

Student Work

RELATED ARTICLES

RELATED ARTICLES