Lessons

Lesson Info

Visual Design

In this segment, we'll be talking about Visual Design. So this is what most laypeople associate with design, right? It's the part where things look good. One thing to clarify really quickly from the start is that you might hear the term User Interface Design, UI, and Visual Design and User Interface Design are the same thing. There's another one of those examples where people are using because the field is so new, there is no unified vocabulary yet, right? So a lot of times, you'll have people using different words to describe the same thing, and that's how a lot of confusion arises, too. I like using Visual Design because User Interface next to User Experience is so confusing, right? Yeah so, I could go on and on about that, but we don't have a lot of time. Next, let's clear us some common misconceptions about Visual Design, alright? This is what most people think. I still remember when I was first starting out and I was creating some designs for clients, I would show them the work. A...

nd I swear to God, two of them were standing in front of my laptop folding up their arms and looking at it as if they're like looking at The Louvre or somewhere, right? "Hmm, I don't know, I think it needs more of this." So, we still have this. And you can't really fault them for that because once you introduce form and color and those things, it activates emotions, right? Like the rational part just flies out the window when they see that. And so, that's another reason why you need to do all those steps. Like the good designers, they push Visual Design out as long as possible, right? And get agreement on everything else before they focus on this. Okay, so these are the main conceptions that it's just beauty, it's subjective and only artist can do it. And I want to tell you that this is completely wrong. All of the really good Visual Designers, they understand that they are using colors, shapes, topography to convey a message, right? And it's not subjective because our brains are wired to respond to certain things, right? There's certain ratios, like our eyes respond more to certain colors because of how our brains have been wired throughout millions of years of evolution. So, this is not subjective stuff and it's not just pretty stuff. Although it does look good at the end, that's not what it's really about. And also, I sucked at Visual Design for so long. Trust me, if I can learn it, anyone can learn it, right? It took me like three years of really, really, really focusing on Visual Design before I got somewhat good at it. I'm still not the best at it. Better than most, but definitely, there's better Visual Designers out there. But the point is even if you have no aptitude, even if you can't draw, you can't tell colors apart, you can learn this, right? This is something you shouldn't be intimidated by. Okay, we know that this is part of the core disciplines of UX, but each one of these, you can drill down further into them, right? And for Visual Design in particular, there are people with PhD's in Typography. There are people that spend years studying color, right? So each one of these, you can put almost an entire career on. So, we can't cover everything here, but I didn't want to just leave you with nothing, right? So what I decided was to give you three basic concepts of Visual Design that anyone can implement immediately to make your PowerPoint's look better, to make your wedding invitations look better, to make whatever you're making at work instantly better received, and also help communicate the message better, right? And those three concepts are use as few elements are possible in your composition. Remember, composition is one of the main one of the things. Align your elements properly, and reuse things as much as possible. So this chart, I mean, it's a nice, clear chart, everybody. The content doesn't matter, what matters is the clarity of it, right? So this, on the other hand, right? It takes away from the message that you're actually trying to convey, even though it might look pretty. So, the guy that wrote the Cooper book from a couple of slides ago, no matter how good your interface is, try to take away as much as you can, right? People will love you for it because in this world, there's just so much noise now that every time you see something that is simple, people are like, (exhales) alright, they're like relieved that they're not being overwhelmed for a minute of their lives. Some strategies for taking things away. You can remove, you can organize and you can hide. You wanna offer only the most essential features, right? But those things that you do, do them really well. One of my favorite examples of this is the Cash App. This is an app, it's called Cash. Can you take a guess what it does? It let's people send cash, and that's all it does, right? It's so to the point, it does one thing. There is no social feed of who sent who cash that you don't care about, right? No, you open this app, it's like, "How much do you want to send? "To who, okay, done," right? Yeah so that's a great example of just getting down to the basics. Another principle is to organize, right? So a group of similar features. People may mentally group things differently. That's something for Information Architecture that we're talking about next. But, an example of this is how in Apple Music, they figured out that they need five different sections to discreetly group the content inside of them, right? So rather than having everything in one section, you break it down into multiple sections. You can hide things. One of my favorite examples of this, this is Twitter pre-redesign. They've launched a new version like last week or something. Before the redesign, at the bottom, they have these sections for Moments and Me, and the search was up here in the top right corner. And I guess they found out in their research that Moments and Me aren't that popular, but that people send each other a lot of messages because in the redesign, Moments and Me gone. Messages, down here where people are more likely to interact with it. You can't even really, it's hard to even get to Moments and Me now, right? You have to tap the image. You have to first figure out that this is something you can tap, and then you tap that image, and then you have Moments here. And getting to Me requires you to tap the text here, figure out that you can do that. And then, you get to your profile. Some people could say, "Un, this isn't really that usable, "blah, blah, blah," and they're not wrong. But if you've figured out in your data that people aren't using it much anyway, but it's still something that you need, yeah, there's nothing wrong with hiding it behind multiple layers, right? That's just like how supermarkets, they put bread in the most inconvenient locations, right? Because they know that you're gonna get bread, right? You're gonna hunt for that bread. So, it's like off here at the bottom in some section way back in the supermarket. The next one is Alignment, right? Very simple, very powerful. Here's an example of something that's not aligned, right? Looks kind of all over the place. And here's what you can do by just-- Look at the difference here, right, when you just change the alignment. Because what happens is once you align things, it literally creates lines, invisible lines. And those make it easier for you to catch your beaRings on a page, right? And this is very easy to implement. If you're just starting out, there's different ways that you can do alignment, but if you're just starting out, align it all left and you're good, right? Make sure that there are those lines, you're good. And finally, you want to reuse elements as often as possible. And what I mean by that is-- Okay, you'll notice that the header styles are all the same, right? The link styles are all the same. The spacing between the headers and the paragraphs are all the same, right? So this consistency, it's a lot easier for you to do and it's better for people because it creates this rhythm that makes it easier for them to glide their eyes along the page. Or here, you'll notice this is an example of both Grouping and of Repetition, right? So you'll have your up-next videos groups in a section, and they all have the same style, right? How weird it be if one looked different than the other even though they are all in the same section, right? So, you're repeating these elements over and over, it reduces the load, right? It makes it easier for people don't have to think as much when they're going to your site. They call it Cognitive Load, right? And you want to reduce that as much as possible. Yeah here too, like on this search results page. The links are all the same. All of this sort of looks the same. These are discreet elements that repeat over and over, so then, you can just focus on what it says instead to having to parse the style of it over and over again, right? Another thing is the Repetition, the styling of the header and footer. A lot of times when you'll be designing things, you'll get to the end of a page, and you're like, "Well, what do I put here," right? Easiest thing you can do is just drag this down, and then, you have your basis for your footer, right? And you have consistency. This example, I love this one, it really drives this point home of how powerful it is to remove things, and it talks about everything we just said. Take out the border, take out the bold. Align it, right? Oh there, aligning the numbers, that can go either way, but they know what they're doing. Align it with the data, resize the columns. Add some spacing. Simplify the numbers. And then, take out the repetition. Eh, no, whatever, Calibri is a fine font, but then you add back the emphasis, and look at how powerful that is, right? If you do this, everybody's gonna be like, "Oh, I really like how clean this is." Oh, you'll hear the word Clean a lot here in the Bay, "I like how clean it is, how minimalist." And really, all you did was take stuff away, it's actually easier to do. The thing to really take away from this is that you want to take, and this is what they taught us in college, too. Every line that you put on that page, every color decision that you make, everything that you put anywhere, those are elements that you can change or remove, right? And if you don't know what you're doing, and actually, it's a lot of times if you do know what you're doing, you want to use as few elements as possible, right?