Lessons
What is UX?
05:33 2What is Persona?
12:05 3How to Create a Persona
39:59 4What is the Point of Storytelling in UX?
08:25 5Using Storyboards & Scenarios
14:34 6Importance of User Stories & Use Cases
34:16 7Developing Wireframes
12:46 8Exercise: Nordstrom Case Study
28:20Lesson Info
Developing Wireframes
So in the previous segment, we talked about breaking down, um, breaking down a bigger picture of what a product can be. Too little tiny stories that make up the product. And in this segment, we are going to cover house. Okay, so we have all these stories already. We have all these actions I need to be taken within the product or on the website. Now, how do we translate those stories into visual the law? Robles. So visual assets, right? And then by that, I can It can be sketches. It can be wire brains. It can be, um, layouts and compositions. So I want to talk about is never a one hit wonder is never building a website is not like you You just build something right And then you hit a summit button and it launches to the outer space and you never hear from it. Back again. Right is not like that because there's a digital product is dynamic. It's ever changing and it is okay to make a mistake. And it's OK if you gracefully recovers from it great and then iso and then what's great about bui...
lding website is if you push something out to production today. And then you saw you see that you have a typo. Just make some quick changes and that you can push, push it again, too, and update the website they like. I think digital product is very forgiving. Um, what's not forgiving, though, is the audience that we have. Um, digital product requires only a little bit off effort to acquire. It's like 99 cents free download. So if you make a mistake and you don't let your user understand, then the user gets confused and they once they leave, they would never come back. So try to keep that in mind. So, like, yes, we can gracefully save everything. But when something does go wrong, provide enough information, provide air messages. Two ledger user No, that is not their fault. There is something wrong with our website, and we will fix it as soon as possible. So with that said, I want to go into how do how do we create sustainable wire phrase? And by sustainable, I am talking about reusable, flexible and fluid. Um, a lot of us washing this are, um we all Some of us have graphic design background. Previously So I want to talk about what do you know already? And here are some of the skills that you can definitely a transition into user experience design as well. So the first thing is hierarchy. So what do you want the user to read first? I think that's very similar to what You're designing a poster or designing a, um, CD cover or like a packaging label Raise like, what do you want the user to see first, um, for a website, It might be, um, the name of the website. It might be the tagline or the mission statement of the product. So the user immediate knows what what type of thing you're trying to sell on the website. Um, so you can also start thinking about your layout and composition so you can think about, um, symmetry, right? You can also think about work where the things are on the page so people can read it. Um, you should also think about okay if I have. If this is a 20 page website and and there are 10 pages, they are doing similar things. Maybe I have a more consistent layout for those ton rate, but then if I have three pages as talking about like another product, maybe those three have a similar layout. So you got to start thinking about the visual organization. But also keep in mind that they shouldn't be too far off from each other. So the user doesn't feel like Wait, I'm I still on the same website, or did you take me to another website Way I'm confused rate. So it's always, um, it's always good to just start out being straightforward. Um, and then you can also apply these two user interface. If you are a interface designer, Um, and what I'm talking about here we can We can just apply to the wire frames at this level and then without, without going too much into the visual design contrast. So what are the sizes of feta image versus the text, I think is really good. If you can start thinking about, um, your text relationship with one another, even on the wire frame level, I think this is very important, especially when you are designing mobile app for mobile app wire frames because you should be conscious about what is the smallest text size that you can use on mobile app. And then I think 14 point is pushing it a little bit like 16 is a good size for, um, for a general audience from like from 10 to 65. Like That's a good But then if if we're trying to push for 14 were even smaller than maybe we need to skill the audience back to only, like, just adults ondas instead of the senior audience, um, structure. So thinking about that integrity of your website. So if if you were designing something that cannot be expanded again, websites are ever changing. Maybe tomorrow your product team have the meeting and said, Oh, we're gonna add three more pages, right? How do you maintain the structure of the website So it doesn't break or you run into a potential blocker and say, Oh, actually, you know, that's great idea, joy, but we can't build it because we have no way of expanding the website and you're like, Wait, what? Why? Why we we do something like that, right? Like that's not flexible at all. And maybe our computer launches a similar website that just that just took over our campaign, and then we've lost that opportunity, and we've lost that chunk of market place. Um, now Michael Owen is focused. So by using contrast by using hierarchy, we can create a focus on a mobile screen or on a website. And and using focus is a great way to grab users attention, because that's probably the place where you want to put your, um, instructional message right? So, like click here to submit your email, or that's the call to action. But it's right. And then is it also depends on what? What do you want the user to do? Um, that becomes your focus. So what are you showcasing on the on this page? Um, if you're selling a physical product, do you have the images like center and score on the page and then telling people Exactly. Yeah, this is the product I'm selling. It's gorgeous. It's high. Vidal et You can see all the detail of the product shot. Um, and now, now you want to buy it, right? And then that also goes into, um, crafting the story, crafting the hype and really telling the user. Yeah. I want you to buy this. Okay, So besides, these, um, probably I would say he's basic design elements in mind. Um, there's more. There's more we can do because this is a digital product. Our layout can be fluid. Um, we can also do responsive layout, right. So responsive. Meaning, um, the layout will change depending on your browser size. Um, it's funny because I feel like a lot of what designers do this a lot. So when they come to a website, they would just start dragging the browser back and forth just to see how a page animate. So if you catch someone do that, it's always a big possibility that they work in the Web industry, because I know I do that a lot. Um, I've seen other designer friends do it as well, but I feel like the regular user won't They won't just scaled it browser back and forth. And then once something regular, like I broke it. Yes. Um, quick, fun facts. So I actually started a blawg a while ago. Right now, I don't have It's not running anymore, but it is called bug thug dot Io is basically whenever I come into, whenever I come across a bug on a website just screen shot and just posted onto my blawg. Um, yeah, I just I think it just something like whenever you are voting like there comes a time when you build enough website that you know that something is a mistake or you just catch it instantly. And, um, if you get to that point good for you. I don't know if it's a good or a bad thing, because now I just noticed a lot of the bugs and stuff, just enjoying the experience anyway. Other things that we can do is dynamic content, right? So if we are designing, if we are designing a magazine and this magazine lives on IPad, we can put videos in there Now is not like it's a static magazine that's gonna be sold on store shelves. Who are we can't put music. We can't put videos in there like right now. It can be dynamic. And if there is something people want to purchased in the magazine, right in the article that endorses a circum product, we can put a Lincoln there and they can click on the link and then actually purchase the product so content can come alive. We can even swap out content If this thing is not working as as effectively, we can swap it out and test other types of content. Um, there is also sequential design. Time becomes an element on a digital product, right? The longer you use it, maybe it will change. It will evolve. Um, we can have We can add motion in there. We can put video in there. Right? There is a certain, um, time sequence involved in a website. We can if you let's say, if this is a scroll Herbal one pager. Great. And then maybe like the the further down you scrawl, maybe an icon changes or the color of the background changes. So there's a lot of fun things that you can dio. There's also on feedback, right. You. The website can be interactive. You can have a lot of back and forth. Um, you can if you are designing a mobile app. You can also call on vibration, different types of vibration. Um, you can make sound. Um, you can have the container bounce around right, or like shake. Um, I think what's fun is on ipad. If you type in your pin wrong when you first actual or like on the phone. It gives you a low shape, right? It's like no wrong rope ins. So, like, these are this type of stuff that you can add compared to traditional design.
Class Materials
bonus material with purchase
Ratings and Reviews
ZuZu
With all due respect... We're 2 hours in and I simply can't watch this any longer. I would NEVER pay money for this course as it is. Joy seems to have a great grasp of the material and I have no doubt that working with small start-ups is a good fit for her. That doesn't mean that she's well-qualified to actually teach this course. Joy will serve both herself and her audience by getting some coaching/guidance in becoming a better speaker. The constant ums, nervous hard swallows, monotonous tone, rambling, frequent pauses while she tries to think of the next thing to say, etc is not only painfully distracting but REALLY detracts from her credibility. And the casual, cutesy way that one interacts with family and friends is not necessarily the appropriate way to speak in front of students. The initial segment was a smart way to provide an experience for the students but it went on WAAAAAY too long to make a fairly simple point. I honestly can't follow her now, she's going on and on describing users doing this and maybe they'll do that and it just doesn't make any sense anymore. I shouldn't have to work so hard to follow an instructor! On the upside, her slides are excellent. I would strongly suggest that Joy joins Toastmasters (at the very least) to improve her speaking skills, but ideally she would get some professional assistance in her entire teaching presentation: organization and delivery of material (pedagogy) and her basic speaking skills. And I don't appreciate the host "spinning" this deficiency by saying "it's a lot to follow and that's why you should buy the course"... That's just shabby! Perhaps Joy could study other extremely polished and effective CreativeLive presenters like Chris Gilbert (as a woman role model) or others like John Lee Dumas or James Wedmore all of whom are also delivering complex technical material but do it with clarity, confidence and style.
user-7a3da3
Excellent class, especially for someone new to ux design, story boarding, etc. Very good examples showing wireframes too! thank you Joy Liu. PS - remember to floss, very important for your health!!
Student Work
Related Classes
Web Design