All language subtitles for 2-03 hierarchy

Is a system or an organization in which people or groups or in our case interface elements

Are rings one above the other according to their status or authority

So the echo the importance of typographical hierarchy check out this tweet from Matthew Sanders 12 lead designer

There's on the YouVersion team he says if you truly want to improve your worth as a graphic web or Apple

Location designer cover your Basics first typographical Mastery is crucial

We should have to correct work on such a fundamental level

And then no 11 who is currently the design director at figma

He says totally agree type and hierarchy are the two biggest issues I notice InDesign portfolios

And it matters so much for comprehension and usability

So why is hierarchy so important

Well it's important because it it elevates the significance of 1ui element over another

In the context of a general layout and hierarchy is typically created first and foremost with your tie

Typography size and style

Now this doesn't mean that all title should be necessarily larger and more important the body copy just because it's the title

And it doesn't mean that all interactive elements should be

Colorful and more pronounced in and way over the top

More prominent and higher of a hierarchy than all the other elements

Just because they are interactive it just means that

Hierarchy is important to consider while creating Your Design there's not going to be a single right or wrong answer

Until you have the full context of the design

So here are some things to think about when considering hierarchy for your screen design

Number one what do you think the user is planning to do on a particular screen

Number to are they planning to explore and browse or do they come for something extremely specific

Number 3 what are you hoping these are dies or can do on a particular screen

This will be slightly different than what you think they will do

Number for what is the most important piece of information on the screen

What is the second most

Important

Thing on the screen and what's the third most important on the screen

That is basically hierarchy in a nutshell

Just wanking things one above the other and sometimes not always

The most important thing should be the most prominent thing

The largest

The the most visually heavy thing

Examples

On this apple.com homepage they just announced the airpods pro

And it's very likely that this will be changed by the time you're watching the video so bear with me here

Now airpods Pro

You know that is

The biggest

Piece of information on this screen airpods pro magic like you've never heard learn more by

So their ranking this

Number one the Giant image

Number to the name of the image

Number three the tagline

And then fourth is going to be learned more and buy

That's

This hierarchy

On this particular section

Clinica scroll down

Basically the same kind of thing but things are getting a little bit more crowded now we have

Number one is the image number two is the title

Three is going to be here

And then the four thing is going to be learned more and bye and then they have this little

Pricing information on here that they do not have on this main screen and you can see

The main image has more

Power and has more gravitas associated with it because there's not that extra line of texts and also

If you look closely there is more negative space

Around the top of that so that's like

Maybe 100 pixels

Call of negative space

And then if you look at this one there is only about

60

Controls of negative space

Now to get these Crosshair than just hitting Comanche for

Which takes a small screenshot I'm just hitting escape and not taking screenshot

But you can see just between these two this the hierarchy

Is different because there is less information even though it's the same size

This is obviously kind of like the main most important thing plus it's on top so you can't argue with

The hierarchy if you're just using a single column layout

And then on the third section they have

The same exact

Typographic styling

But it's on a white background with black text

And it doesn't have as much weight

When when it's reversed out

So

As simple as this seems there's actually a lot going on here there's more negative space

This is still reversed out

But then when you get down here it's exact same size but the colors are slightly different

And the white background kind of takes the power out of that title

I'm energy you scroll down here you have slightly smaller

Secondary

Headings for each one

Alright take a look at a simple text message app just the the messages app on the iPhone

So if you look here

You have a giant messages title lots of negative space

Then as you scroll you get the messages title is much smaller in the top

See how it goes to like 17.5 goes from like the really big to the smaller

And actually the

The message title and the name of the people that you're texting with is the exact same size

And then you have the smaller more subdued

Text to kind of show you a preview of what that message was about

Then if you go into the detail

Every piece of text is the exact same

Size except for the name because you already know okay in this case and chatting with Sam

But every other every other piece of tags is a large

Body copy tax except for the smaller

You know the timestamp on each one

And so

As simple of an example this is it's it's

Kind of powerful to understand okay I'm on the screen I can see the messages I have

Now that's kind of number one these are these are my messages that's kind of like the most important

Thing on the screen in terms of typographical hierarchy

And then secondarily there are the names and avatars

With everyone that you texted with

And then I was the third thing

You have the preview that showing

And you know the timestamp 41A happened

Whereas when you go to the details screen it's all kind of completely flat because you're just reading messages back and forth

But you'll notice that the Emojis are actually larger

Because

You know what you think about conveying emotion in an interaction with someone sometimes that's a little bit more important than the app

Actual tax are there if you just do one emoji it's actually larger

And that's kind of a design decision is based on hierarchy and what's more important in that context because they're they're putting

In an emotion into this conversation

So if we're just we're just doing one emotion

Sometimes emotion is more powerful than just simply like riding

Hahaha a crying laughing emoji

Is all that more powerful than saying hahaha or LOL so in that case

They're choosing hierarchy and that particular case based on that emotion

Okay so let's take a look at another example going to pull up

Go squared.com here this is what I use for analytics for a lot of my websites

So we're looking at the traffic on

Use Flo kit.com and

Immediately

Typical you get put into this now category So currently

If you kind of zoom out and look at everything

Really this circle here in this this number is one of the largest things on the screen

And so in their minds they're saying I bet that user wants to know

How many visitors are online right now

And that is the largest thing and then you have all these other headings

That are similar in terms of Engagement time visitor number

Devices a lot of these numbers are flat

And not larger than the other because it's more of a kind of a browsing

Overview type of situation here

So if you got a trans it's the same thing you got a big number right here

You got your graph and then

These

Little view switchers here

Are affecting the entire page so these are actually treated

A little bit larger font than the individual smaller

Animals here where you're just

Kind of only controlling what's inside of that particular module

Now they did kind of

Keep their larger numbers

4

Switching between here but I think that's a little bit more consistent with the larger numbers that they're using already and some of the other modules

But these these modules all have title sources content devices engagement

And technically you could

You can technically call these

H2S

Or secondary headers

Going to say yeah they have him put his H2S in here

But they there

They're much more reduced than the rest of the content because they're just

They're just

Titling a small module so it's just because something is a secondary header doesn't mean that it needs to be the

The secondary priority on the entire screen

A lot of these

A lot of the information here is more priority you know just knowing

The information inside of here

Is a higher priority than seeing a giant title on top of everything

That's not to say that the design couldn't work

If they used bigger titles but it's just a design decision that they made

When they lay this out and I've been using this for a long time I think it works well it's got a nice design to it

And I'm happy with it okay lastly I want to pull up a project that I worked on for a client base

Toronto

Called fibrestream now I did their marketing site and this was a project that we did

A s

A secondary project after a few months have passed

So I've got

Everything kind of broken up into features here

But what I really want to focus on is this dashboard section

We design all this

Mobile-first

And

And you can see some of the larger screens here

We're really just an expanded version of the Mobile screen we wanted it to be super clean and

Just not a lot going on we wanted it to feel very simple very easy

Just to know what your services were

What your billing was like

You know even even paying your bills

An end that is

A lot of this is made possible with just

Heavy use of negative space

A big typeface

And just a really clean layout

It's it's there's not a lot going on so it's easy to kind of accentuate

And make the hierarchy very apparent so it's like title

Anaconda

Title and then content and I was kind of the simplistic

Hierarchy that we wanted to go with

But if you look over here on the

The mobile dashboard

One thing that we did was

We decided to use

Let's see I think this is 16.8 here

Font is avant-garde

And

This is kind of like the main title size 16 point

But we wanted to have these larger titles

That mimics some of these interior pages

This is like a 32-point size

A mimicking not here

We wanted these modules.

We're kind of more of a call to action bass module we wanted them to be larger so

This is something now

The client really wanted

To accentuate you know set up your auto-pay this would allow people to

Set up an automatic payment so there wouldn't be as many you no credit card

Misfires and things like that things that cause them like a lot of support headaches

Were using typography here

To call out this to be a little bit larger

Even though that might not be as important as

Your balance is due look you got this much left on your May 7th invoice and you have this much left on your April 7th

Invoice so

The biggest priority here is this giant orange button we want you to pay your bill

But beyond that

We got

Set up auto-pay

Hey why don't you upgrade your router

So you can see just glancing at 16 16

And then we got 32 and 32 and then

Some of these smaller type sizes are 14-point

Inside of here

Enter once you've got your auto-pay setup then we reduce

The title size to be similar to the rest of the modules

Got service status and and we're kind of getting enough space over here to make room for these icons

So lots of negative space

Kind of big and blocky

And then also for your service repair that you have upcoming we're bringing that back in so we're using

You know a double size of the typeface to give certain modules more hierarchy

Models that are slightly more important are getting

Larger titles it's based on hierarchy we want these to be ranking higher than the rest they have a large

So it's less about

Header 1 header 203 it's more about the context

.

A business or a user would find okay that would what's important on the screen

Both important for the business for

It's important for the business and for the customer to pay

This pill

And it's important for the business to be able to set up auto-pay and upgrade a router

And everything else is still there

And the portal is is really primarily for just setting up your internet service so it's not like

There needs to be that much more going on

So that's just another simple example of using type size

To create specific hierarchy

Based on the user's needs and based on the business needs

Hyper homework I want you to design

Leaderboard module I can be like

Dribble size shot or a mobile shot or a website

You know like a larger-screen website

But I want you to design a leaderboard that's going to have

People with a little Avatar their name and their rank

1234567 all the way down

And some kind of arbitrary score like

Number one person earn 1500 points or or whatever some kind of maybe at the time whatever

Kind of theme that you want to put on that make it fun for yourself

And I want you to

I want you to give the model some filters at the top like

All-time leaderboard last 7 Days Later board and last 30 days leaderboards but as a little bit of an Interactive

Witcher

And I want the list of people or the or the module itself to have a title

You come up with a title like top

You know race finishers whatever you want to call it it's fine and it can be a large title or a small title it's up to you

You decide on whether to go above or below the filters

And maybe the first-place person's name is the largest on the screen maybe the title is the largest you decide what works best

For your particular leaderboard

And

The biggest thing that I want you to think about here is just using a lens of hierarchy

You know is it is this going to be where somebody really needs to come see the first

Person and

That's the biggest goal or is this just a scannable list of

10 people

And for this particular piece of homework I want to show you a couple of

Tricks tips and tricks inside of sketch and figma that will help you go a little bit faster so let's take a quick look

Alright so I've gotten started here with a couple of avatars and some names some very

Long names that I don't know if I can pronounce

But basically the way that I created these was

Inside us cats just draw a circle

And

All I'm going to do is come up here to data

And then go to faces

And then it's going to automatically generate a face for you

And I'm going to create a text field

And it doesn't matter what I type

Or even if I messed up

The case

Who's going to make it black for now

And choose a name and imma come up here and do sketch that again I do names

So it's going to give me a name

You know you're going to have to play around with

You know the Avatar size I'm just going to start off with

48 to see how that works

We've got one person here now you can go in here and just

Auction drag and then duplicate this by hidden kamandi

And you can actually feel like all of this and hit refresh data

And then it's going to give you you know all of these different

Names and images

So that Circle was put on by default but

I'm just going to make a little border here with maybe

A 10% fill

That way for

Images like this

There's a little bit more of a border

And with an image like this you don't even really see the Border because images so dark

So that's one way to do it

You can also you know copy this

Copy these names

Auction drag

And then you could type in one

23 so on and so forth

Not going to do all of them

And you know you move it around you decide what needs to go where you decide the typeface

You're welcome to stay, San Francisco Pro

You know and then also you want to give them like a score

Over here on the right so you might

So like these

And a right-aligned

Allina my beer to the right

And you'll have to you'll have to decide to you know like if you're going to use this type

Size

You know test it out with okay if we're going to do 10,000 points

And this person has a really long name

Are we going to truncate their name

You know and that would be like a rule against you no like a development rule okay if it's more than 25 characters we need a truncated and I have

Monica...

Or you know maybe the rule

Maybe the rule is you break your name into

A double line and you have to have a special special

Component in that instant or you're just kind of a slightly different version

And you might decide that these need to be smaller so no big deal

And you can always

So like this again and hit refresh data if you want

To change those

And another thing that you might consider doing

Once you have one design that you really like

I'm trying to pull this down here

Maybe give it a backgrounds

And send that to the back

And make sure you have some good

Spacing

Here and there

MercyMe that 16 all the way around just for now

Or maybe we'll go down at 12

Are the top and bottom

Cuz once we start stacking these up

We don't want a ton of negative space in between everything

Alright sounds good enough for now I'm going to make this

Just going to make this why I just wanted to have a background so we would be able to

Create a symbol here

And I'm just going to call this

Person

And then if we look on our symbols page we have this person here

And now we could just duplicate the symbol

Kamandi kamandi kamandi

And now we can grab everything again and

Refresh data again

It's only

Just trying to put names

All of the

Numbers and everything as well

What we could do is temporarily take these out I'm just going to hit command axe

And then go in and do refresh data

And then we could go back in

To this master component

And pay stop I can

And then we'll have all these numbers

And then you can change these as you wanted

You can double click on this child element or you can go

Over here and change it there might be a little easier to change it over here

Okay so let's take a look at what this would how this would work inside a figma as well

Inside a figma

There are some plugins that you can use go to plugins

And go browse all plug-ins and type in avatars

And grab this one by Dylan Feltes

And then also you just click installed and then do

Names

And will do random name generator and install that one and then once we have that installed

Then we can just

Draw our Circle

Will do 32 by 32

And I'm going to make a few circles

Let's just kind of give ourselves a grid

And now I'm going to go to plugins

Avatars and she's going to populate everything

Using the user

The URI faces.com API

And then once you have them you could just choose

You know 5 or 10 however many you wanted

So let's just grab I don't know let's grab this guy

Drag him down here

I've got some text here

I've got Music San Francisco using 16.5 you can use whatever you want

And this is where the Align tools that we worked on in the first Module come in handy so I'm just going to sit like these two

Two items and control command

And that's going to align them how I want

And then same thing here we could just

Draw a little bit of a background

Send us all the way to the back

And I'll leave it gray for now

Okay

Maybe I'll make these

20 from The Edge and like even the top and bottom

See how that goes

Make that Wyatt

Now I'm going to hit

Command option K to make it a component

You can sit here that under object cray component is command option k

Can't remember if that is default or if I actually set that up as a custom quickie

Then I can do the same thing to duplicate this

Just get rid of all these

And again I can grab these

Don't know if I can do Avatar

Yeah I need to like all the individual avatars

And then it avatars again

Does repopulate

Then I can select the names

And go to random name generator

Now we can make an assumption to do female names

And male names

So now we have a component this is the master component because as this little filled-in icon here

And the rest are instances of the main component

So you can see if I move this

It's going to move all the rest

And that's the same thing that we out here and sketch if I go here and change the component

All of them are going to move but that's the big difference between scotch and figma

These components

You can't edit them in place

The same way you can inside of figma

So if you want to edit a simple as going to have to be on the symbol page when using sketch

But you don't necessarily have to use symbols this can be something that you just design and you don't worry too much about components of

Just wanted to show you a little quick way that might help you out so please

Sure what you design in the 5-channel and if you're feeling good about it as always posted on dribble happy to be back there as well

So let's get started designing and I can't wait to see what you come up with