[MUSIC]

Hi, I'm Nick.

Studying the elements and principles of art and design can help you understand how

to talk about design and analyze the individual components.

But sometimes application can feel like a conceptual leap.

In this course we're going to look at an example website layout and

make improvements to it.

The first thing we'll work on, cold copy, isn't visual at all,

copy is all of the text that appears in a design.

And while you might not be responsible for things like blog posts and other

core content, designers are often still expected to write for things like labels,

buttons, form fields, and even sometimes, short marketing blurbs.

We'll write some copy of our own later on.

But to get us started, we're going to check the spelling and

grammar of some existing copy.

It's important that you follow the rules of grammar and

spelling when creating apps and websites, because it builds trust with your user.

If a user spots a world that's spelled incorrectly,

they might start to wonder what else is wrong with your product.

And that could impact really important moments in the experience,

like a purchase decision.

In this course, I'm going to use Adobe XD, and I encourage you to follow

along by downloading the example file and making the improvements with me.

Here's the example website that we'll be working on.

I have it pulled up in the Preview mode in Adobe XD.

This is the homepage for a fictional website that collects user reviews for

restaurants similar to Yelp.

However, this website focuses exclusively on desserts, or ZERTS.

There's a lot about this layout that can be improved.

Some of the improvements might be obvious to you right away,

but if not, that's okay, because that's exactly what we're here to learn.

I want to help you develop your aesthetic sensibility so

that when you see something that looks wrong,

you can specifically identify what that thing is and how to improve it.

Let's take a look at what's here now, and quickly review it,

before we make any of our own changes.

Along the top is a pretty standard navigation bar.

There's the name of the website, ZERTS, short for

dessert, a tag line, it's a piece of cake.

And there's a search bar, a few restaurants that are new,

and a recent blog post, and then we have a footer down at the bottom.

So let's work our way from top to bottom and look for

improvements we can make to spelling and grammar.

So to do that, I'm going to pop back over into Adobe XD and

come out of preview mode.

The first thing I notice is this link to the forums,

going to zoom in on that just a bit here.

Any buttons or links in a navigation bar like this should generally be title case.

Even though it's not a title, it's also not text that's in a paragraph.

In title case, all major words are capitalized and minor words,

like conjunctions and prepositions, are lowercase.

So the word a, for example, would be

lowercase if it were in the middle of a tagline, like it's a piece of cake.

So let's change this link here, and I'll just double click

on it a couple of times to drill down into the layers there,

and change this to a capital F for Forums.

There we go.

And if we scroll over here, the copy for Log In and Sign Up look good to me,

although there is other visual issues we'll address later.

The logo itself, ZERTS*, also looks good to me, but

this tagline is bothersome for a few reasons.

First, it's a sentence, its a piece of cake, so

it should begin with a capital letter and end with a period.

Secondly, the word its in the possessive form here,

as if the sentence were trying to say something different.

It's in this case is actually a contraction of the word it and

the word is, so it should have an apostrophe before the s.

And finally, the word piece is spelled wrong.

So let's fix all of that.

I'm going to double click this, capitalize it,

give it an apostrophe, and even XD is saying, hey, this is spelled wrong

with that red underline, need to swap the i and the e there.

And then we need a period at the end of this, and

then to accept those changes I'll just hit Escape.

So let's zoom back out here.

Finally, there's one more piece of copy toward the bottom

right that says the blog.

And because that's actually a title it should be title case.

Now, before I said words like prepositions and

conjunctions shouldn't be capitalized in title case.

The only time they should be capitalized is if they're at the start of the title.

So in this case, The Blog,

where the T and the B should both be capitalized.

So let's hit Escape to accept those changes.

I'll zoom back out, and that should be it for spelling and grammar.

When you're done, save your work.

And there actually is one more thing here underneath the blog title.

In this copy, it says have you ever been had a great dinner.

Let's, Change that to,

Have you ever, Enjoyed a great dinner,

only to be disappointed by the lack of dessert options?

And I'll zoom back out.

And that should be it for spelling and grammar.

When you're done, save your work.

There's a lot more about this layout that needs to be fixed, but

we're off to a good start.