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