All language subtitles for 2-09 combining text

Combining text with other elements is really starting to get into interface design in general I mean

Never really going to be just a single I'm tax there's always going to be textPlus something else I might be text

Plus other

TextPlus a border

And then x infinity basically for any screen designs

A handful of examples that Explorer combining text with other elements and then we'll dive into

Kind of live process of kind of how to balance all of that while looking at the bigger picture and zooming into the deep

The first of all we're going to look at stripe.com it's a great example of just really good design

Nothing I want to point out here is

The combination of all of these elements right in here

So we're looking at

This little kind of kicker title thing

The big title

Paragraph in the knees buttons

Anything I want to point out is

The two probably the two most important things when you're combining text elements

Is the variety

She got small

Big

Medium

And then kind of you know medium-large ish

Nice variety

It's not all the same it's not

You know what kind of all complement each other

And the other thing here is going to be the negative space

Nice use of negative space see if they've got an even space between this

And this

And then maybe half that

Four right in here

The letting is nice that means take a screenshot

The wedding is nice and they're just nice variety

So variety and negative space are going to be the two biggest

Factors that you want to think about when you're combining

Multiple text

Multiple text

Variety and negative space

Eisenhower going to look at an example from one of my older projects this is a project called Baby sense

Which was a

Baby product comparison shopping site

And

Kind of the same thing I want to point out here is variety and negative space

So God

You know we got our for fonts here we've got

1

2

3

Actually probably only three

Three sizes in this main area so if you look

Got 32 points

14

14

14 + 14

This is sandor Museo Sans

Rounded

Font that I chose just because this is a baby sight and

Basically when you have a baby you want every Edge to be rounded so I thought it made sense to have that type of typeface

Again

It's it's not quite as

Are quite as Aerie and

Breathable as the stripes site but again this is an application this more of an e-commerce application

So

Where where we have things a little bit tighter in here but

But again it's variety

And negative space like look at all the space in here

Even in these tiles here

We have a little bit of variety

We got the title

The price

The description

But you have to be careful not to use too much brighter you only want

You know three or four different

Styles based on information to hand in you know in these cases

We want to see the big

Title for what it actually is we obviously want to know what the price is

And since we're comparison shopping

We want to know how many stores

Has this available because the details screen would show

The different stores that you can purchase the product

But again I'm just trying to emphasize

Variety

And negative space

All right back to stripe.com this is their checkouts

Kind of their check-out template that you can have access to through stripe

Links to all this down below but

I just want to point out

Again variety

We got the smaller

You know since this is a checkout page

You're probably more interested in the price as your man

Kind of largest

Piece of information versus

What the name of the article is

So they made a decision to make this price a little bit larger

But again look at the look at the generous use of negative space lots of space right in here

Lots of space in here

And you know over here

They change this a lot so it could be different by the time

You're watching this video but

Some of the spacing in here is

It feels like I could use a little bit of work so if I open up this inspector

And I go to this label

Cheer this form filled group

What feels tight to me is this space right in here

And you know this is just a gut

Change it's not necessarily

Something that I feel like

Has to absolutely be done

But if we just add for pixels

Of padding on the bottom of that

And another thing that I like to do

I do appreciate that this is all left-aligned

Don't ever I'm pairing text

With a rounded Edge like this

It's it's kind of a similar similar when you pair a circle to a square the circle item should be a little bit

Because the perceived way is

It is smaller with a circle with his exact same size

As the square and we'll get more into that in the layout and alignment

Section but I do want to point out here

I'm going to move this over to the left

4 pixels as well

And so now even though

Even though that are text is not aligned

We can still kind of consider this entire thing as a block as an object

In this particular incense pay with a card is the is the parent of email

Moving us in a little bit

LA Times I might even move this all the way over to be

Fully left-aligned with the input field

And again this is a matter of preference

All in a lot of cases

I want to go back to

There we got right there

So it looks like they probably have about

12

Zoom in here you can see that that's what it looks like if our input tax is aligned with our labels

But if we zoom out

That might feel a little bit too

There might be too much negative space going to

Blobbing in and out through here

It might be too much

So if we leave that out

4

You can say just just changing it from 4 pixels to 12 pixels

It's a very small change very kind of makes a big difference when you're paying attention to those little details

When you're praying text with other elements like how much of a negative space

Is going to make a difference into me

This

Feels

A little bit better so I open that

And I go back and forth between these two

That's just

4 pixels of padding on the bottom of those labels

And then for Pixel to the laugh and you see it

Just a very subtle change

But those little things paying attention to that a such a granular level and then you zoom out it kind of

Gives it a little bit more of a balance

Another thing I want to point out an addition to combining tags with things like

Border-radius on a fields

I want to talk just quickly about combining text with little accents like hash marks or lie

Or just something to get it some decoration whether it is an interactive link

Or an icon

Just something to give it a little more

Interest

Jazz it up a bit or to make it pop as

Some people would like to say

And to do that I want to look at

Dribbble.com rally rally Interactive

Based in Utah

Ben and his team they are

Absolute Masters at

Layout and typography and design and it's always really good to find people that are really nailing it

To kind of take inspiration from

So what I want to do is scroll down here and check out

Let's go with this one here Snowbird lodging detail

And it's going to open up one of these attachments

And maybe zooman on this one that's a little bit larger

Alright

Scroll down here

Okay so

In both of these examples

You can see that

MDOC

Only end of the title

And it's not really necessarily for any particular

Important reason other than it just kind of has like a fun little accent

So

Relax at the cliff Spa

M.

And notice also this

01 hanging out way out here so he's

Titling the sections with

And in it it's an accent but it's also typography it's very small and it's got lots of negative space

Add a little bit of balance little bit more visual interest

This is something that Ben and rally do a lot just find those little detail that I can pop in

To give things balance a little bit more interest

Even these I know those little pixelated but you can kind of get the feeling anyway

These are probably not even links

Actually they might be

Because it says book a room

But if he could have just put a last of buttons

With

You know something a little more boring but

He has a little accidents kind of off to the left

And when you're all over them

Very likely that they might kind of hover in

So you can just kind of see that

This little mdash these little

Kind of matches the style of these arrows

And then going back to this larger one

You can actually can see that's a little bit better

These arrows this m.

Or actually this is probably not even in mdash mdash is typically only as long as an actual in character

So they might actually drawing these

Little rectangle by Hannah Poppin them in there

So just just trying to find those little things that you can add in like a little hash marks under the title or a little

Arrow

Sometimes it is easy to overdo those things but if you want to come to bump up your text usage

As long as it has generous negative space and there's variety and it's kind of well-balanced they can really add a lot to your designs

I saw the last example here that I want to show is this kind of section in here this is kind of like your feet or you got calls and texts

Messages and lost things going on

And this isn't framer which I don't use that often but it is

Kind of nice

To be able to create little prototypes

Like that's where you have the native kind of bouncy scrolling

And what not and you can add Little Things

What I don't want to cover all that just right now I just want to mostly point out the text information right here

So we got our Avatar here

And this thing is 60 by 60

Hold of the option key you can see

I'm going 16 pixels from the last ads and then 16 pixels from this title here

Until my title is 18 point

My

Little timestamp his 14 points

And this thing is 16 points

And the reason those

Ended up being those sizes

Is because

The the little kind of Miss call answer call in this text message that's going to be text that you're going to read a lot more

Offense I wanted that to be just a little bit larger

But it's not quite as important as a title so as I'm combining

This title would this text

I'm using a little bit Bolder of a 518 and then I'm using 16 here

And you can see I've used

Four Points of space between the two

Which gives just enough negative space

While still kind of balancing against

This Avatar over here

Nope I had the Avatar by itself and I wanted to just have someone's name

This Avatar and this title if it was on a completely different page

That might not work as well because it's only the title

With this larger

Avatar

So I might end up wanting to go like

40 by 40

Something like that if it was only the name

And if you could go even smaller still matter of like

What's going on on the page you kind of have to zoom out

And look at every element

Altogether

Before you can make those smaller details his about zooming out and looking at variety paying attention to negative space

And making your decisions based on all of the balance kind of

So tell about holding each of these elements

Kind of together in balance and Harmony as you make individual decisions

Sookie takeaways here combining text

With other pieces of tax combining tax with other elements

You want to pay attention to your overall balance at a high level

You can't just make individual decisions and say I can my titles always need to be 20-point is always going to be dependent on other Elam

And how I can kind of balance out

You're going to want to create that balance out of low-level with the tiny like

You know increments of four pixels or 16 pixels are or whatever kind of makes sense for your design you're going to want to use those little

Increments

As your kind of foundation for creating that balance

Then you zoom out and see how it plays with every other individual element

On the screen

And you're going to want to be generous with your negative space

You know under on the message example

You know you can see that there's not a

Part of negative space in between each one of these

But

There's at least

You know close to 30 pixels on top and bottom

Each one of these has its own negative space so

Between Foley between

Avatar Avatar

We've got

Close to 48

Pixels of negatives

And if this was a lot tighter

You know if these were all kind of crammed together

Then it wouldn't work as well because it's starting to get too dense

And there are times when you can make super-dense informational

Layoffs but in this case

I wanted it to feel a little bit more little bit more lighthearted

As you add space it just kind of gives you

More room to breathe

So don't forget to get your elements breathing room and generous use of negative space

When you are

Kind of lame things out

Another just quickly

Vertically

You know make sure you're paying attention to this

Space in between you know are you going to use

2 points or 6 points or 8 you know like and then zoom out and see what how that feels and if there if there more

Closely related to each other a little bit

If it's not related at all you know it needs it needs a lot more space

Aligning text with other tax

Horizontally you want to make sure that you're going

With a Baseline

Alignment

Screwed us over

You can see that

The Baseline of these texts

Strings here is is lying Baseline is going to be the bottom of these lowercase letters and the

Not including the descender here if I try to grab this

And

And Center it

Vertically

That would be

An option

But it's just not going to work

Quite as well as you might have

A larger

I'll see you make this little bit larger

Doesn't got a larger typeface here

And you might be 10 to the kind of Center that

Vertically if I can do it

As as this gets larger it's just going to fit it just feels a little bit

Like it's just not quite going to work

Are you just feels a little bit wrong it's always going to be a little bit nicer to have these

Baseline

Wyandotte preet a little bit more balanced

We put that back in place

Don't have my quick easy setup in framer because

A little harder to do that

But as you as you

As you make those little tiny decisions and then use zoom

Ouch

It's just going to create a nice balance

For every single

Peace

That's on the page so I got all of these

All of these

God names and times answer balancing each other out

On this horizontal line

And then all of my names are

On this hard-edged across here so I'm aligning things

Use of negative space

And there's also some variety in this

And the screen are so all together

Balance with the size of the avatar

Balanced with

The little icons that are

Kind of indicative of what that message is all of these work together to create that

Balance and Harmony when you're combining all these texts elements

Okay so for your homework

On this combining text with other elements

I want you to create a mobile view

Of a

I'm some kind of product it doesn't matter what it is I am I exempt alarm using Nike shoes

But I want you to create a grid of like six to eight products do you have two products side-by-side

Some kind of title

And I want you to have an image of the product

A title of the product

Category of the product

Number of options like color are there three options are there three colors

And then also the price

So image with all that

And you know make sure that you're trying to balance the title with the price and you're paying paying

Attention to the space in between

The product grid you know pay close attention to all of the spacing

And all that accredits balance wire combining all the tech

On your second screen I want you to show

One of those products from the first screen as a product detail and and I'm intentionally making it a mole

Mobile screen to start to not so much to design and you can look at the examples below doesn't have to be like in entire

Text backs features you know all this warranty everything just basically the title

At least 11 large image for the product detail screen you can do a gallery if you want

Totally up to you

Put in the category bring in a short description of the product

An option to select size or color or whatever makes sense for the product that you're using

And also like an add2cart CTA you can again see the Nike example

But create something of your own with your own products and

If you're having a hard time deciding you know try to recreate this Nike one pixel-by-pixel

But if you want to Branch out a little bit go for something else that isn't done yet

And just

We're focusing on creating text

Elements that are going to balance each other out

Sobriety

Negative space

Horizontal Baseline alignment and then vertical

Left Edge text alignment

So

Get to work on this poster work

Let let us give you some feedback on it and