Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
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 word 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.
Oops
In the last seconds of this video, we left out the word "a" in the text. It should have read "Have you ever enjoyed a great dinner." Paying close attention to your copy is important!
Resources
-
0:00
[MUSIC]
-
0:08
Hi, I'm Nick.
-
0:10
Studying the elements and principles of art and design can help you understand how
-
0:15
to talk about design and analyze the individual components.
-
0:18
But sometimes application can feel like a conceptual leap.
-
0:24
In this course we're going to look at an example website layout and
-
0:29
make improvements to it.
-
0:30
The first thing we'll work on, cold copy, isn't visual at all,
-
0:36
copy is all of the text that appears in a design.
-
0:40
And while you might not be responsible for things like blog posts and other
-
0:45
core content, designers are often still expected to write for things like labels,
-
0:50
buttons, form fields, and even sometimes, short marketing blurbs.
-
0:56
We'll write some copy of our own later on.
-
0:59
But to get us started, we're going to check the spelling and
-
1:02
grammar of some existing copy.
-
1:05
It's important that you follow the rules of grammar and
-
1:08
spelling when creating apps and websites, because it builds trust with your user.
-
1:13
If a user spots a world that's spelled incorrectly,
-
1:17
they might start to wonder what else is wrong with your product.
-
1:20
And that could impact really important moments in the experience,
-
1:24
like a purchase decision.
-
1:27
In this course, I'm going to use Adobe XD, and I encourage you to follow
-
1:31
along by downloading the example file and making the improvements with me.
-
1:37
Here's the example website that we'll be working on.
-
1:40
I have it pulled up in the Preview mode in Adobe XD.
-
1:45
This is the homepage for a fictional website that collects user reviews for
-
1:50
restaurants similar to Yelp.
-
1:52
However, this website focuses exclusively on desserts, or ZERTS.
-
1:59
There's a lot about this layout that can be improved.
-
2:03
Some of the improvements might be obvious to you right away,
-
2:05
but if not, that's okay, because that's exactly what we're here to learn.
-
2:10
I want to help you develop your aesthetic sensibility so
-
2:14
that when you see something that looks wrong,
-
2:16
you can specifically identify what that thing is and how to improve it.
-
2:22
Let's take a look at what's here now, and quickly review it,
-
2:26
before we make any of our own changes.
-
2:29
Along the top is a pretty standard navigation bar.
-
2:33
There's the name of the website, ZERTS, short for
-
2:37
dessert, a tag line, it's a piece of cake.
-
2:41
And there's a search bar, a few restaurants that are new,
-
2:48
and a recent blog post, and then we have a footer down at the bottom.
-
2:54
So let's work our way from top to bottom and look for
-
2:58
improvements we can make to spelling and grammar.
-
3:04
So to do that, I'm going to pop back over into Adobe XD and
-
3:08
come out of preview mode.
-
3:18
The first thing I notice is this link to the forums,
-
3:22
going to zoom in on that just a bit here.
-
3:28
Any buttons or links in a navigation bar like this should generally be title case.
-
3:35
Even though it's not a title, it's also not text that's in a paragraph.
-
3:41
In title case, all major words are capitalized and minor words,
-
3:46
like conjunctions and prepositions, are lowercase.
-
3:50
So the word a, for example, would be
-
3:54
lowercase if it were in the middle of a tagline, like it's a piece of cake.
-
4:00
So let's change this link here, and I'll just double click
-
4:05
on it a couple of times to drill down into the layers there,
-
4:10
and change this to a capital F for Forums.
-
4:14
There we go.
-
4:18
And if we scroll over here, the copy for Log In and Sign Up look good to me,
-
4:24
although there is other visual issues we'll address later.
-
4:29
The logo itself, ZERTS*, also looks good to me, but
-
4:34
this tagline is bothersome for a few reasons.
-
4:38
First, it's a sentence, its a piece of cake, so
-
4:42
it should begin with a capital letter and end with a period.
-
4:48
Secondly, the word its in the possessive form here,
-
4:53
as if the sentence were trying to say something different.
-
4:58
It's in this case is actually a contraction of the word it and
-
5:03
the word is, so it should have an apostrophe before the s.
-
5:09
And finally, the word piece is spelled wrong.
-
5:13
So let's fix all of that.
-
5:15
I'm going to double click this, capitalize it,
-
5:22
give it an apostrophe, and even XD is saying, hey, this is spelled wrong
-
5:28
with that red underline, need to swap the i and the e there.
-
5:34
And then we need a period at the end of this, and
-
5:37
then to accept those changes I'll just hit Escape.
-
5:42
So let's zoom back out here.
-
5:45
Finally, there's one more piece of copy toward the bottom
-
5:50
right that says the blog.
-
5:53
And because that's actually a title it should be title case.
-
5:59
Now, before I said words like prepositions and
-
6:02
conjunctions shouldn't be capitalized in title case.
-
6:06
The only time they should be capitalized is if they're at the start of the title.
-
6:12
So in this case, The Blog,
-
6:17
where the T and the B should both be capitalized.
-
6:22
So let's hit Escape to accept those changes.
-
6:25
I'll zoom back out, and that should be it for spelling and grammar.
-
6:32
When you're done, save your work.
-
6:35
And there actually is one more thing here underneath the blog title.
-
6:43
In this copy, it says have you ever been had a great dinner.
-
6:50
Let's, Change that to,
-
6:55
Have you ever, Enjoyed a great dinner,
-
7:01
only to be disappointed by the lack of dessert options?
-
7:09
And I'll zoom back out.
-
7:12
And that should be it for spelling and grammar.
-
7:16
When you're done, save your work.
-
7:21
There's a lot more about this layout that needs to be fixed, but
-
7:24
we're off to a good start.
You need to sign up for Treehouse in order to download course files.
Sign up