All language subtitles for 2-07 definitions

When you read a legal document pertaining to an agreement between two parties typically you'll find language like this

This statement number one sow is today's date

Awesome client LLC

To the terms and conditions of the parties

Today's date Master Services agreement in essay agreement

To have additional descriptions like this

But

This isn't the clearest way to describe certain words that are used in the contract so that

It's extremely clear that everyone reading it

Knows the exact words of the language that used

That's used in the entire document

Purpose of definitions an illegal document

We have to we have to mutually agree on the definition of a word

Before we can agree on any concept that word might be used to describe there for

It is also imperative that we Define our texts

Styles

Choice size treatment

All of those things need their own definitions

So as designers we have the power to assign and Define any textile

Or treatment however we like

One of the worst things that we can do for our typography and our designs is just a mindlessly throw throw around styles in

In sizes and treatments without regard

For their systematic impact

So let's definitions in action

So first of all we're going to take a look at a very

Meta example here where I have screenshotted

Screenshot screenshot screenshot

Screenshot of Sigmar the dashboard

And the properties panel

And I've just kind of put it in here

We're looking at the particular instances

For when these particular textiles will be used for example

This

Title right here is the biggest on the screen and it looks like that is particularly reserved for the

Title so by change to any of these others

Oh wait that's not

Actually figma

If I go back

Goship nudge

And these others

You can see that is kind of the biggest title now there is this as well

But it

You know they want to show a list of contributors which I don't have a lot of contributors on these

You can see Sam and I on here you can add a description

So it's kind of like

Your Homebase description area said this particular

Title

Is is the biggest one they use on the entire app

And it's reserved for titling

This sidebar

Even this one it's

Slightly bigger but this is more like referring to all of

The documents inside of it where's this is the actual project name

This is kind of more referring

To all of these individual things

So back on our actual

Document here

You can see it

There's not a lot going on if I extract

The sizes and the definitions that are being used here

You end up with these five different use cases

Now this does start to violate the rule of four but only buy one and I think it's it's okay

Avocado

You know there's a very specific

This one is

1413

And that one's 12 right there so they're they're all kind of serving a slightly different purpose

And they're tiling different sections so I'm going to let him slide with it there okay

And the Really the way that I did that was just

Adding

These

Text layers

Right on top

So if I actually hide this image

You can see

I just

Type type in

All the individual pieces

And I'm sorry okay that's 11

Regular that's 11 semi bold

So just a very simple

Assemble definition right here would be okay if there's a section

For a team

For example this is my team MGs

It's going to be 11 points in my bowl

And this is going to be 11-point regular

So that is the definition for that section and it in it it might be for a team but I actually might be for the

Component because if you look over here

On the property panel if I hide that

You can see the exact same

Section

Kind of definitions venues we've got eleven point semi bold

11 Point regular

So all of these

Every one of these

Text

Fields text

Pass or whatever you want to call it

Every one of these are 11 points

And the ones that are titling a section or semi Bold and the ones that are

You know interactive they are regular

So this is very very very minimal there's not a lot going on here and it isn't it is a design app

Quotation after all it's a desktop application and applications are going to tend to be a little bit more restrained

Weather

Text

Style usage

So if you look back

You know that is enough

To get away with what they need to get away with enough you look at sigma.com the marketing site if you're not logged in you're going to have a lot more

More variety

Now if you look at their marketing website

You're going to see a lot more

Styles and sizes and

You know there's a lot more variety that you can put into a marketing site

And I forget reason you know they've got these big call-outs

They've got

You know the little kind of combined call-out features here with the avatars

Lots of different colors but you're not going to find that inside of an actual application it would just be too overwhelming to use

So there's there's

You know they are defining their textiles on their website

It's just slightly different so they're using a much larger type sizes

But it is very consistent

Just like every every second every header

Are h2 tag or whatever that ends up being

Is going to be that style

That wit

And

And then all their paragraphs and their calls to action or going to be

A certain style a certain size

Do you have a lot more flexibility on websites and marketing material than you do on

Actual

Interface design for an application

Again I just want to point out it's very very simple

If you're designing apps that are intended for some type of utility

You can scale down

Your

Variety and you can get away with using very simple very restrained

Headings you know the the subtle changes between semi

And regular like a

Just enough

To separate it

So now we're going to take a look at a design system component that I designed in conjunction with super friendly

A couple years ago

This is called Unity the design system for the internal ExxonMobil team and just kind of zooming in here

This large Title Here that is going to be reserved for

Headings that are the main heading H ones

And then our navigation item they're going to be this certain size

And then the global header it's going to be kind of scale down a little bit

And it's not to say that

You can't use these

These particular sizes anywhere else but it is

I am defining this navigation item as

Yeah 14.5 and these are going to be 12.5 in this is going to be

32.5

You know

That the navigation item

Even though it might have that particular style in that definition

It's okay to use it somewhere else we're just not putting it on red background

And white

Copy was just supposed to be paragraph copy

But it is very specifically

Define haphazard usage of

Navigation item all can be 15 or 16 whatever you want to do it just

Yeah once you design something and you explore some possibilities then you kind of say okay now I can make some

Clear

Decisions about what they should actually be

Another example here is

Diesel, gray background headers

We came up with this style for they had tons of tables and tons of data that they're dealing with

And we wanted a style that

Was defined as this is the

Kind of table header

Editable table header

So we're kind of defying this gray background

As the control panel for the header

There's not many other places that were using

Dark gray background

Unless it's kind of like a rollover

Element here

And some of these more generic kind of Styles have gray backgrounds

But you can see even here this gray background here

It's kind of like the toolbar for that editing

And adding section

Channel scrolling through here

We are using the gray background in this

For example

Just because you define it in one area doesn't mean that it's completely off-limits everywhere else

But this particular instance

It wouldn't make sense to have

These table headings and other items

You know this like a big

Parent group name where the exact same style so we've got this

We got this gray background and anytime you can add or edit or filter or sort it's going to have that background until

Define as a style and I know that's not necessarily

Typography

In itself but the background is supporting the typography on top of it

The same way that the light gray button shape and those

Hard-edged

Darker gray

Borders on that button kind of supports the typography inside of it

And we're also saying okay any any action button is going to have this

ExxonMobil blue

And that defines you know it's the same exact size for the label but

We're defining it to be an interactive button by the color change

Versus the label only which is going to be dark so just that simple

Two color

Can indicate action

And we could have done something other than color we could have used font-weight and we could have had

Maybe option one could have been dark gray as well and maybe the store by was bold or maybe you try the other Bold and the other

The regular end as long as you have some type of definition to to differentiate interactive elements

From the non-interactive elements

You're going to you know just started thinking about okay I am

I'm saying here that blue

Is an active color

So where else

On the components am I going to use that exact same blue

Four links

And

Other other

Suggested kind of interactive elements like this big call to action for the search bar

And then four more of a primary action we have the full blue background

Where the White River Scout text we're defining eye color

Blue eyes interactive so we wouldn't want to have a big blue headline somewhere

Cuz we're saying

Blue means Interactive

Now on the flip side we do have a big blue header here but it's not the typeface itself

Were using the color

In a slightly different way

You know it's

A lot of things but it doesn't mean

Blue gradient

It's also okay to use that as a background on the head of interactive elements

On this entire big thing so it's not

Like we're completely doing the reverse it's just a slightly different use cases like the cousin

Of the original definition

Another example here and this stepper if there's like a long wizard kind of stepping form

There's the default style for these buttons

There is the active state that you were actually on and then there are the

Inactive kind of to-be-determined steps that you haven't gotten to yet

So this shows the past

This shows the present and the shows the future

And you'll notice like

This is all the same type size 123456

You know you could technically go you could change at more but you don't often need to because you can just

Change the color or just change changing one element oven times of plenty of change

For example step for here is bolted

And the four-year is bolted even those reverse out

Not to say that you have to do exactly this for everything but it's just

Pointing out that these subtle changes have in inheritance

Value and meaning

When you put it on there and so

In the back of your mind while you're designing these things

It's helpful to to think to yourself okay black

Background means active

So where else might I use black background as active

This

12-point font is more of a label

And

Where else might I use that exact same

Style

As a label

And you don't have to Define these right as you begin designing but it is helpful just to start taking mental amatory once

Then you can abstract out those choices that you made

And then you can kind of use out of the lens to view your future designs to see if there's any holes in the definitions

Are there opportunities to apply that or extend it for other designs

Four screens

Before you get a picture of all of the definitions in the style for how you want to use it it's not something that you have to lock in right

Right away

You'll see a lot of people will try to Define four or five textiles

And colors and then use them to design I find that to be quite restrictive I like to design

And move things around

And get this

Kind of get let let the definitions kind of expose themselves as I'm moving the ground then

Take it back out abstracted a bit

And then I can apply that to new objects in the future and the future screens

Okay so the next example I want to show you a textile definition

Is an app that I worked on for GoDaddy SmartLine

And if you look here I've got

Just a bird's-eye view of all these greens actually design most

All of this and framer

But I made it kind of overview

Section inside of fig Missoula

On animation that I made

Inside of Invision Studio

I'm not covering a lot of Invision Studio cuz I did make an entire course on that called switch studio.com

That is free to go check out if you want to really check it out

But

I just thought this was fun they provided these elements

For the

The brand but I was able to chop them up and use them kind of in an intro animation

We're using the good old rule of four on r-type sizes here we've got our

Kind of bold fonts

In a large size

We got our

Secondary size here for the subtitle

And we've got our third size as he's called actions and then we got our

Fourth size which is like this helpertech

So these are like 16 points

This is right at 14 this helper tax

And then the

The kind of subtitle

I believe that is sad 20

20 points and then this one's probably at like 32 or something like that

At the

I want to point out here that

I am using

The same subtitle tax

As a description for all of the onboarding screens

So this is a business call voicemail

But there's quiet

A rigorous onboarding process all of these are the onboarding screens

And so it's pretty important that we have

Helper tax to kind of help the user along

And I tried a lot of different variations here but

That I had the initial helper tax was just a small

14.5

But it just felt like it needed more impact

I wanted to take that subtitle text

And use it as the kind of larger helper text

Kind of an unfamiliar process for a lot of people and it did kind of warranted a little bit larger of a voice

Where is the smaller like

Try it free for one month

You know that's kind of that's more of a quiet voice

And oftentimes like the larger text means

Louder visually speaking

I'm carrying that over certain u.s. area code

And

It's not

Quite the same size as the the titles here

Just want to point that out

Introducing some controls

But now we're getting to okay a small helper tags like by the way this is the number that you chose but let's take your Les

And then you got this this huge kind of input field that would kind of dynamically size based on their input

But it's

It's just

I'm just pointing out the fact that

I have defined

Placement and Centerline mint and size

As the helper text until I'm

I did try lots and lots of variations and there were lots of Explorations that are not showing here

At the end of the day I did choose that and it it felt like it made the most sense when we ran this through some user tests and things

Even want you have everything set up

You have your information to review and then

You have

You know kind of your dropped off

On the last screen before you have to commit to starting your pre-trial or not

And even after you started your free trial

This kind of post

We still need you to do a few more things like set up your contacts out of your voicemail things like that

So we're just I'm just reusing the style over and over nobody very very

To use

Different size tags for this one definition same with the helper tax

On the top and the bottom and these called actions

I'm going to exploit them over and over and over and it's not because

You're lazy and you don't want to design extra things because when you're designing an application you want things to be consistent

And not just for consistency said you wanted to be consistent because you wanted to be predictable

For the person who's using it so if you see the same text over and over

That's going to be like okay this tells me what to do okay this tells me we're depressed someone's going to understand that a little bit more because it is

And

Do you know what ends up being a

Pavlovian type experience

The dog started

What kind of a weird metaphor but

That's honestly what it is once you do something over and over it becomes a load at more memorable and easy-to-use and easy-to-understand

Okay for homework we are going to design a little mini

Menu module here and we're going to do it in two different

Format

But using the same kind of

Style system

So let me just give you a quick demo here

I'm going to hit the F key and go to I want to go to dribble shot HD cuz I'll just kind of

Make a module out of this

And what we're going to do is Define a title

And a subtitle

Somebody copy

And our call to action

And maybe even a link

All right so it's not that common where I Define is upfront like I said earlier in the video

I don't often designed these upfront but I just I'm doing it this way just to kind of show my

My kind of thinking behind it

So I might see

Semi

And we're going to actually

Look down below for the information on what you need including this

I'm just going to paste in my

Description here just we'll have a quick little reference

Control command shift for will copy that to your clipboard

That way it'll be easier for you to

If you want to do the same thing feel free

Easier than jumping back and forth

I'm going to have a title a subtitle

And let's go ahead and

Maybe we'll make this

16

We do

16 is well maybe are so title is kind of like a grayish color

And then our link you can actually hit command option C

On your on your text or your object had come in options V2 paste

The same style

And I'm just going to go with

A blue for the link

And then for a call to action I might do 14

Kobold

Because this is going to be kind of like on a button background

And let's make the button blue and the link

White

Come back over here

Are these

At 100% so don't get too lost

And I might want around those corners

Just a little bit

For fun

Coming to do maybe 12

Margin on the side only got a slightly different color so you can see that better

It's not that much better on the side and let's say

16

Eight on the top 16 on the sides

22 -

So there's my button

I know that

Currently

Has said on social media that they're planning on

Adding the automatic

Expansion like when you type text Atwal change the size

But it's not active just yet so we're going to have to

Do it the old-fashioned way here

Okay so the last thing I'm going to do here

Go to the unsplash

Let's go to let's go to plugins and let's

Browse all plugins

And we're going to grab the Sunsplash

Plug-in I thought I already had it installed but that's how you install it

Now we will go to plugins

Unsplash

We're going to search for a hamburger

That one looks pretty good

Insert one image

That is a big hamburger

McDowell lot smaller

Okay so I've got all of my little things here so according to my

Homework

I'm going to go ahead and

Go here on right beside tax

And I'm going to create a new style I'm just going to call this title

Going to take this one

Create a new style

Click the plus icon

We'll call it subtitle

Click this one

Boom

Body

Like that

Textile plus I'm going to call that link

Command option k

To change that into a component you have not set up your quickies yet you can just

What's a right click

Create component

Alright so now we have all of our stuff

Now we can continue to lay out this stuff put in a

Maybe we make a background module and

You know maybe that's why it's got to drop shadow

You know whatever you want to do to create

Kind of a fun little module you know and wants you

If you want to change this

You can always click here and go to the settings icon

And change it to 40 points

That way if you

Get ready to duplicate

And now if I want to change that back

To like 32 or something I can do that

And then the other one over here is going to change as well so I can

I can work with different content

Change one of the other end is still going to

It's all going to work out

So we're going to 24 you know both of them are going to change

Noggin if you don't want to Define your textiles upfront

Then abstracted into those textiles

Before duplicating the content

Usually you need to go back

But the main idea here is that we're going to set up the styles

And

We are going to kind of get a feel for

You know

When when should we set up a style and when should we maybe experiment a little bit more so it's not a one-time event it's Steph

Continual process or even though

You've been assigned you've assigned a definition to a particular style you you might find that as other design problems arise

Expand on that

Remind me to go back and revisit it

So keep in mind that there is a scenario might want to extend the styles

Just because you said a definition doesn't mean it's got to be

Only that

You know sometimes you're active CT a color

Indicate primary action could also be

The active state in your tab are so it's not mutually exclusive but it's just something that you really need to keep in mind is that

You're defining interactions by the way that you style your text

And the way that you use certain colors

What's this homework and post your working progress is like if you want to post your

Final pieces into the flag grow bud just get some feedback and let's see what we can come up with and

Started