All language subtitles for 2-06 callouts

Callouts add visual interest to typography base layoffs and

It's going to be typography beso call-outs are sort of important

And not quite as much in the interface is on World by the principals

Kind of still remain on the web you might see something more like a block quote or a pull quote

Or something like that that is typically thought of as a call out because that's definitely one of those exam

Look how I was going to use to literally call-out attention to any specific information that you'd like to

Highlight call Alchemy created with other elements like background colors borders arrows and

Morbid

Simply we're going to look at creating call-outs with typography just kind of by itself and

About the focus here is on the typography itself and all that

Another way to think about it

Is giving special attention to any particular piece of tax that grabs attention for a very specific reason

In a magazine layout like a call Mae Bia full quote because it's like a really kind of

Impactful kind of quote on a website testimonial or something similar

More visual impact because the statement alone has more impact based on whether trying to influence

A viewer or just call out some kind of functionality

So despite all of this when you're constantly battling between Form and Function you have to make sure that you're not overdoing

The typography

So that your functionality is hindered so there's kind of a trade-off that you have to go in between Form and Function where you do

Really nice beautiful type

But also

It needs to make sense in the context for the design because if you're doing a marketing site

You have a lot more leeway to do block quotes and big typographic things but if you're doing an application and interface

You're going to be a tiny bit more limited to what you can do so you just going to keep that in mind

Call out by itself is typically not referred to any specific functionality though it's definitely

Please

If the situation warrants a call-out in an interface

And is tied to functionality then that's perfectly fine it's just not traditionally

Clock app on the iPhone okay so we're going to go to the clock app

And the first thing I want to call out here is

The 4 p.m. 1 p.m. and 8 a.m.

Those 441 are they showing 401

Regardless of that. Does it

All right still alive

Still wrong okay anyway

The hours here and the minutes and the time is

Is large it's quite large larger than the world clock

Title there

And it doesn't it doesn't overtake the title do it the title is

Chunky and bold at 7.

Play mats 34-point size and again the title goes to 17 at the top

But then the

The time itself those are quite large quite possibly

68 or 48 somewhere along in there we can check in a little bit but they're large and there

Called-out because after all this app is for telling time for setting time alarms things like that

And

It's intentionally larger now that I could work

As well if the 402 p.m. was in the same exact size as New York but there's plenty of room

Just makes it a lot easier to glance out the time

And so and this specific

Giant numbers so you can see even the alarm you know they're kind of taking that

Big number across from the clock to the alarms

And then on bedtime they've scaled them down a little bit because you they want to be able to kind of put that into

To its own kind of line item with two numbers and so two numbers that large beside each other or not going to

Quite work so

There would be the temptation to kind of make them all this size

But it's kind of a different context where they're displaying them

One at a time or two together on the same row

And then you got the the same size on the Bedtime schedule there

And then stopwatch you know you have an even bigger number

These aren't necessarily the traditional graphic design call outweighs for kind of calling out a quote

Boat inside of a of a body copy but it's the

Can work in interface design and you know this they're not calling out the time

Quite as large because there are three numbers and it's more of a utility but once you start the time

You know that is a big-time now

You know that's probably as big as the lock screen time and that's probably the biggest number that you'll ever

Apple use on the out and that's because it's

Very important that's like the biggest

The biggest concern is how much time is left on the actual app

So these are some decent examples for

Single call out inside of an app

Alright next let's take a look at the Apple App Store on the Mac

So I've got to open here and I'm going to click on any one of these kind of big

Tiles here

So this right here exciting news4gamers this could technically be considered a call out

Because it's it's not

It's kind of a title but it's kind of called out within the body of the text

This is definitely the title of the screen gray with controllers

Exciting news for gamers this is just kind of a fun way to kind of a little bit of spice

To the text out a little bit of texture

Kind of pull you in without darker

Contrast between the white in the background

It's also worth noting that they have this nice all caps

Title kind of secondary title above that pretty nice right there as well

Another one

Same thing here

Detailed hyper-local minute-by-minute forecast

To make

Allowed erstatement

And sometimes you know the App Store is a nap and they're using call-outs in a pre

They're not going to do a giant

Huge pool quotes

But it is worth noting that they are calling that text out

And in the positioning

You know they're they're making a bold they're giving it a higher contrast color so there

Doing a few just subtle things to do it but they are doing it

Next up I want to show you these pull quotes that I designed for a course that I made a long time ago

X

Now this is a sales page

And I've got multiple call-outs going on here and this is a really long form salespage you know it can get

Very very boring to scroll through all of this

And read it unless there was a lot of visual interest look how tiny this scroll cursor

Very very very long page

And so I wanted there to be lots of visual interest here

Because otherwise just a boring

And it would feel like you're reading a novel and that's not really what you're trying to do here so the first thing I'm doing here is I'm

I'm pulling in like a little bit of a block quote

Same font but it's bolted and it's orange and it's just kind of sitting inside

Of the content here and I'm giving it like a very subtle little.

In a little bit kind of like a nice magazine layout

I'm also calling out

You know kind of not really buzzwords but

You know I want to call out this is super fast

I've used these techniques

And step by step process for strategizing into zani I'm trying to like emphasize what this particular course is all about

Where the call outs on the side and with the with the bolded in phatic pieces inside the

Inside the body copy now you can't easily overdo this and I might have gone a little heavier

Candid with some of the tales coffee

But again I mean that's what it's for as you're trying to

Check this out check this out

I'm doing the same thing here in this is this even like a call-out within a call-out

So I'm I'm taking larger text

Number one larger text number to I'm combining at where the giant quotation

Number 3 I am also Bolding

Another piece of text inside of that text and then number for it's also combined with that bottom board

And with the logo and everything. So there's

This is kind of like its own little component design in and of itself and same thing over here

Where I got

You know it's basically the exact same component just reversed

And so I'm calling out the name making sure the the logos nice and prominent because either these are important.

These are all a bunch of block quote

Call Allison so when you're trying to when you're trying to show that someone has you something and that

You might find it useful as well it's it's worth putting some more visual weight

Into that otherwise it's just this tiny little thing a text

And someone I overlooked it and it could be quite important

So if you scroll down through this a little bit more you can still see these

Piano pieces of tax being called out but then

We have a bigger version

Of what I did in the very in the very beginning here so I'm just amusing

The orange and the border and then doing the same thing

Was just like a huge I'm breaking the format so it you're trying to scroll along and then all of a sudden it break so it's

I'm breaking the format over here off to the riot and I think I do it later that later on in the website

A little bit to the left but then for the really big impactful call-outs I'm doing

Doing it in the center with with a lot of negative space in these borders on the top and the bottom

And I'm I'm also kind of mimicking my breaking the form a little bit with some of these images I'm just

Breaking us

It's probably three to five thousand words it might take you a solid 10 or 15 minutes to read

So it's got to be a little bit more interesting than just

One of the same format over and over and over

So again where the

The poor quotes

I'm doing this again on the right

Another big one broken up

And then this is another example of

Simple quotes that are not quite as

Large and Powerful but only reason I didn't want to do this huge is because these are kind of like answers to a survey

And there's looks like about eight of them and I don't really need 8 giant things all together when they're not quite

Why does impressive as maybe one of these

Bigger pull quotes

So as the importance of the the text

Elevates as it's more important The More Design in the more impact that I'm putting on it with negative space

Bold colors

With the combining of with images and little quotation symbols things like that

Are the smaller quote kind of sticking out on the left

And on and on some just I've got probably four or five different call out elements on this page

And they all kind of have their own little Parts in designing

But the four

Layout

I'm even I was super proud of this particular thing where I had a bunch of designer from Adobe try the course out

So I just wanted to over-the-top pull this module Oz 30 designers from Adobe

30 designers could have made the at one point I might have had that 30 even larger

Looking back on this now I mean this course is probably I don't know five or six years old at this point

I was probably a little bit gratuitous with the giant call out

Kind of like a personal critique eunos

You know you happy

Take it with a grain of salt because

Think really well you might kind of cringe out later so it's just one of those things where you have to strike a balance

The next example.com

They have a lot of different little call-outs going on you can see that they have the before base camp after basic

Call-outs handwritten call out there trying to just make it

Same kind of personable and friendly

More handwritten call-outs

More bold and place kind of call outs

And then if you get down here

They just have these huge testimonials

Socio from Shopify

You know just

A bunch of big testimonials ATS

Great time completely was just a lot of a lot of big bold

Call outs

And I think that there's

There's does start to

There's start to compete with the headlines

I would say it's kind of borderline like they could possibly a little more negative space

And I'm I'm personally

On the fence about if this is too much text to be centerline's but that's not my point here

Call outs and base County uses big blocky call out so that's a good take away from this

Panera.com website

This is the actual little marketing site that I designed for the cryptocurrency desktop app that we looked at in a

Another lesson

So I'm not using any call-outs here just yet

Unless you want to kind of consider these emojis that were using as somewhat of a call-out with the headline but these are I mean

What I wanted to do is scroll down here to these

Quotes right here

So

This is another example you know what to pull quote or a block quote

It doesn't have to be a block quote HTML tag / say it could just be a dumb thing like a testimonial

But again I'm combining this quote with larger typeface I mean larger than

And the titles

This looks like it could be 28 or 32 something

Using background color

Size

Locking it up with a logo and putting an avatar with it with the name and the name of the company

So, the same type of elements and I was using on the AI

To match this kind of sleek and clean cryptocurrency out in color

Type size and locking up with other elements those are all great ways to make call-outs

Okay next example is going to be inside of the sketch file

Where I designed these screens for 12stone.com

And 12stone.com is a large

Church in Southeast Georgia

And

I-design the mobile app and their website this is their website

Alright so let's take a look at this

This is a quote

From a video they publish new videos every week

And this is a quote from the video

Rather than only having the video up here

I wanted to have a way to make it really nice and big and type of graphic and kind of give it a

Chunky friendly Style

So I got lots of negative space around here by just a big

Chunky quote

And then the ability to tweet

Normal title and normal body copy

And so that

Breaks away from that size just having a big nice and chunky chunky Style

And again I think this is

Yeah this is bold Gibson Bowl just a really big bold typeface

And I just think it works really well for that

And then over here on the

Homepage

You can see that I'm kind of using that same same style here big and bold and chunky

Directly from this could probably be a little bit better but

Boulder project right now

And then

I'm doing the same thing again

With

Background color

Avatar

And then adding the name and the the title in a smaller kind of lock up

And I want two days to kind of break the form out a little bit I thought it would be fine to add

Going on in the website I wanted to break the format a little bit

Have these avatars kind of offset

And the floating tiles with the kind of the background patterns that they

They already had a felt like it was kind of provided a nice fun fresh look to it

Inside to see how

A few different examples of what you can do to type

And interface to give it that call out fuel

Alright we're going to look at

Size case

Style or color

And then locking things up and then breaking the format

The first of all

I got this block of coffee here

I'm going to go ahead and make the whole thing black

Because I

In another lesson made these red so you can see the 45th and 75th character

Let's go ahead and click that okay

So I'm just going to

Snag some of this out of here

My cuts

And

And I'll just kind of make that spaced-out little bit

Is actually easier to work with multiple box of coffee versus one because you can come and get yourself

Confused when you're dealing with multiple weights and and styles and things like that inside of one block of car

So let me

Delete this out here

Okay

So you got two of the same box

Box of coffee and then now it's going to paste

This one in here as well just so it's on it it's on its own thing so like if I wanted to change

I want to change any of these I could just click on it versus getting in here and having a highlight and move stuff around that's just kind of a

So whenever I'm dealing with lots of text I like to isolate it

So I can get it going here

All right so first let's just play with changing the size of this is said 18 already

I'm using Georgia serif fonts to

Like 32 and

Are Arline high is going to be too high when we do that we don't want it to be

So crazy high

Feels like it's just kind of

Not as

Nice

Fourth at 1:30

And then

Mean honestly like

Even this

Even this by itself is pretty nice little call-out

But if you wanted to make it

You know even more of a call-out Wicked break

Break the format a little bit which I'm skipping ahead in number five but

That's one way to do it is just my size size and the negative space or round

You might want to put that it like a nice

Even evenly-spaced kind of

Been there

But that's it right there size

You could even go bigger so you'll see what it's like if you go bigger you might want to reduce your line High each time

So you can just kind of just kind of do some experiments are next case

Just changing the queso if we go here to the more options

You can change the case to

Upper

Lower

Or title case

Lowercase and title case not really going to work not well for a block quote

So less I would just recommend going with tenants case

4 uppercase can be kind of cool

And remember on uppercase you can pretty

You can get pretty tight with your wedding

That's actually kind of looking cool with the way the seraphs

Play off of each other may be hard to read but if you weren't you could you could potentially use this

As

You know like a theme of your

Well you actually might have to have

All caps for that to work

But that could actually be

Like some kind of

Text treatment

Some kind of stylistic text treatment that is like unique to the way that you handle titles

Again I would have to it would have to make sense for the contacts for what you're doing I don't know

You know that would work

Well or not until you going to try it

And it makes sense

But that would be changing case

And you could go really tight or you could go

A little bit more open

And that's another way

To just call out that text

Make sure that you're paying attention to the line high and you're not going to crazy and you want to make sure that you have your

Spacing

Around

Pretty nice

You wouldn't want it to be like all up on

All up on each other

And another thing along with size you could even

You could even go smaller

And go like

Narrow in The Wiz

Cuz you're using a smaller font

And that would give

More negative space over here

And I could be another way

Are you even tried aligning

I got

Okay style or color

So Style

Would mean in I like let's change the oil change a bold

Or let's change it to italics

Let's go back to regular case

Certain fonts are going to have better italics than others

Georgia

In particular has a really nice

Italics

Compared to just slanting the letters it's basically all-new letterforms

So this way

You know better the fault that you choose will impact your ability to

Have options to do these call-outs

So that's pretty nice I mean that. Georgia italic to me just kind of looks really good

Bring this back down here you know and if we wanted to, call out within the call out

No that's starting to look pretty nice

And again you know you're not limited to only changing that's your kind of manipulating it altogether so as

As you have this nice big maybe we go a little bit

Maybe we got 32 right here and maybe this goes down to 16

And then maybe you would go up to 175

And just kind of play with that

And there's absolutely nothing wrong

We're just grabbing this and duplicating if you have something that you kind of like

Just leave it there duplicate it and then make some more changes because if you change the same thing over and over and over you're going to

End up with only one option to look at you like

30 minutes feeling with it the whole time

So make sure that if you're making things and you kind of like it that you're going to leave

You know make some duplication so you can see the difference between the things that you're working on so maybe you maybe want to lock up

These quotation marks

Let me pay stand this quotation mark and let's make it like 1:20

You know we could

We can honestly just stick it onto the edge maybe it's breaking out like that

Maybe this comes in and this is broken here

It's really just about moving things around until you like the way it looks and if we're using a grid you know you can

Play the Greta little bit more

This is kind of more like what I had on the

Aux

Maybe that's like 20% opacity or maybe 10%

Or you know you can even make that

Slightly different color

Capacity

Try different percentages

Just hitting the 234 key

To give it 30% at 40% opacity

And if you didn't want to go

Traditional

Traditional kind of quotation mark maybe you draw a little tiny rectangle

And

You give it

No like your

Block quote kind of format there so that's

1 pixel 2 3 4

That's another nice that's pretty nice way like a little sliver of red just enough

To give it.

That look

Maybe it was like your your accent color for the rest of your website

That's actually

Kind of nice right there

So let me make sure this is spaced out

32 there unless 232 on the top as well

Hey bring that down

Use all of the elements together look at the title versus the block quotes and look at it

Look at all of it together maybe you're coming

Because it just looks nice with the rest

And maybe not you know just go back and forth and have two different option if you want to see it

Going to give us some more breathing room

I like to kind of zoom out and then Zoom back into a hundred percent

And then just kind of check it all out

So you can imagine like we had a little

Logo up here

And

Maybe we do these all caps

You're like quick little sample navigation

Do that was go down to like

What's a 12

Maybe a little small but

Australia

32

Poster about

Blob Jimenez a Blog

Contacts

And let's just say work

Heights rent it these up by zooming into clicking that button

I'm going to space these out to be like 40

Maybe work should be before

Blog and contacts so I can describe the purple. Bring it over there

Screw bits

Let's bring it up here

Group all that

Are we go

On this up a bit

So I'm just messing around here

We're talking about call-outs but

Just very very quickly with Georgia

This negative space and this little like red logo thing whatever it is that I just met

You know that's that's the beginning of something that kind of works nicely in it

Kind of started

With this red sliver and making this block quote every now and then you'll kind of stumble upon something that just to I like the way that looks and then you just

Try to expand that more more

You know you seen this but if we if we

Broke

The mold on the call out like that

That could be another way to do it

If you really wanted to go all out and went and actually you know before I do all that

Let me duplicate this

So whatever they liked already

Let's make let's make the text White

And let's put this guy in the back

That is not as not as nice but it does have a lot more

It's it's pretty it's pretty bold

See what they say

Contrast is on this red

And white

So it's

Almost Double AA mean that's it's fine if it's that big and it's passing day a large

But you know something like this could work better if it was more like

If we hide you know sign up for newsletter or something like that

Another way to call out

Maybe it's a

You know you've got some form fields and a white button or something

Had a little quick call out for

Newsletter sign-up

Maybe they should be

What italic

Have you bumped that up a bit

Maybe that's an email

And not all caps cuz

Don't typically type your email in all caps

Unless I was going to be like a little label or something that floated but

What is

Will do

Almost at I thought in all caps

Email

So anyway

So you you might expect

This block

To maybe even beyond the bottom of something like this

This is 520 Wyatt's with make this module 520 wide as well

Just to make it

Better

So very very simple

Yuno and Yuki

You might make a copy

And grab all of these red colors

Try it with something else maybe you really love

Bluer you know Green I'm not sure

You could try any number of callers and it could potentially work couple ways to pull out

To call out kind of like larger components

And all of it is going to kind of go back to

Doing these five things you're going to change the size you're going to change the case style the color you're going to lock

Elements and you're going to oftentimes break the format

Free homework assignment I want you to design a call-out highlighting a specific sentence

One article just like we did so you can you can use those documents as a starting point and use your own typeface

Your own article text

And

If it's something of personal interest to you and maybe a little bit more fun might be a little bit more enjoyable for you to Noah

What to accentuate

You can pick something from Wikipedia or something that doesn't really matter

Pick one or two sentences to try to call out and then try multiple variations the same way that we just did

And

Make some changes until it feels right and then duplicate it and then try something different

I want you to do that like two or three times for that particular exercise and then secondly

I want you to make sure that you design another call out which is specifically you like has an avatar

And it may be aligned with a logo and a title

Maybe design two or three of those together

Kind of like those small Avatar big Avatar

Try different lockups

Call all that information and then when you're done you can kind of put those

The two exercises together so you have a article of coffee and then you have your text call

Fallout and then maybe your whole quote call outs with the Avatar and the quotations you want to

Try one where you're changing nothing but the font weight and the size you might want to try another one with the alternating between

Try one with type of typography differences using

Only negative space as your divider so you saw like a negative space try some with a border

And then try some negative space and see which ones you like and then

More elements

Make it super friendly rounded edges big drop Shadows just try a couple of different versions

Postman slack and let's get some feedback on those and if you come up with some that you really like someone dribble and