Design Principle: Hierarchy & Proximity
Lesson 9 from: FAST CLASS: Think Like a Visual DesignerSarah Doody
Design Principle: Hierarchy & Proximity
Lesson 9 from: FAST CLASS: Think Like a Visual DesignerSarah Doody
Lessons
Why Design Matters
05:50 2Design Vs. Aesthetic
06:27 3Impact Of Design
07:01 4The Design Process: Understand Your Audience
09:17 5The Design Process: Understand Your Content
05:21 6Design Principle: Alignment, Grids, And Spacing
05:47 7Design Principles: Contrast
02:55 8Design Principles: Repetition
03:20Design Principle: Hierarchy & Proximity
05:37 10Principle Scale And Balance
02:48 11Design Principles: Typography
04:29 12Design Principles: White Space
01:11 13Design Principles: Color
06:09 14Design Principles: Graphics, Icons, And Photos
02:51 15Design Principles: Layouts And Focal Points
01:53 16Design Principles: Color-Blind Accessibility In Design
01:41Lesson Info
Design Principle: Hierarchy & Proximity
What is proximity and hierarchy? Proximity is really the grouping of objects in a design to create connections and associations. So when things are closer, generally means that they must be related. If things are further away, must mean that maybe they are not related. It seems like a reasonable assumption for us to make. So proximity creates these relationships and brings organization and hierarchy to information. And maybe you've heard this word hierarchy thrown around in meetings you've been in, or designers have used it. Now we're gonna see it in action. So to achieve that hierarchy, we need to make sure things are grouped together because when information is grouped together and when we create hierarchy, it's going to influence the order of how we see information on a page. And we're gonna see this play out in an example, but hierarchy can really help us understand, for example, okay, what is the title? What is the subtitle? Does this little kind of box of text, is it describing t...
his image on the page here? If you imagine a news article or a brochure, sometimes there's photos in a brochure with a little subtitle or call-out describing that image. Well, if you don't group that descriptive caption close to it, no one knows that that caption is related to that thing. So when we do design with really strong hierarchy in mind, we are able to not force the person to think. The person doesn't have to guess, well, what's the title, or does this little text relate to this image? Are these icons related to this thing? Or even on a webpage, if I click this dropdown and choose to sort, is it sorting the information over here? Is it sorting the information on here? So it's important that we create the hierarchy so that people aren't guessing. So we're gonna establish order and importance in some examples we're going to look at. We're gonna use proximity and hierarchy to give people a starting point, show how it can guide your eye through documents, add structure, and just create general organization to whatever you are doing. But I wanna move into another example here. So, business cards, you probably have a stack of business cards. Sometimes I wonder why we still have business cards in the world today, but we do. So we are going to talk about that bakery. And this is a business card. Again, it's not terrible, but what are some things that my designer eye notices as I'm critiquing this, as I do with all the business cards I get? So, one of the things that stands out to me is that my eye obviously goes to the center here, but also there's a lot going on. The information is off in all the four corners. And, again, it's not terrible. All the information is there. If I received this business card from Amanda, and I had to email her, I could do that. I could find the phone number and things like that, but there just isn't much hierarchy, especially when it comes to all this information because it's splattered out in all the corners. So let's think about if I were to redesign that, what would I do? Well, I would want to create a little bit more hierarchy specifically around the information related to whose card this is. So, before, it was very hard for me to kind of see, okay, where's the address, this, that. But now we see, okay, hi, I'm Amanda. I'm the baker-in-chief. I'm from Scout Bakery, contact information and address. And this is a little subjective, but I would personally order it this way because I think probably contact information is more important. Maybe she's not giving this business card to maybe customers as much. I'm probably a business associate. Therefore I want to contact her. I don't necessarily need to be going to the bakery as my first kind of action. So I would kind of organize it like that, and you can see the difference. Again, the one on the left is not horrible. The one on the right is so much better, and hopefully you're starting to see how these little tweaks in design can help us at a glance. Remember it's at a glance. Yes, you could find the phone number. Yes, you could find the email, but to me, this one on the right, much more balanced, much better hierarchy. We know it's about Amanda. Amanda's at Scout Bakery. And when you group these things, what I like to do sometimes is think of the information in zones, and the more zones that you have for all the information, I think the more complicated it is. So if we look at this and kind of overlay these boxes just for the purposes of kind of illustrating this, on the one at the right, we just have two real zones here, simple, two zones. Over here, there's actually five. (chuckles) So there's five zones. So the more zones, the more confusing it's going to be. And if you can just group things, easier on the eye, for sure.
Class Materials
Bonus Materials with Purchase