What is UI vs UX
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final 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
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 Classes
Web Design