1
00:00:00,000 --> 00:00:08,876
[MUSIC]

2
00:00:08,876 --> 00:00:10,263
Hi, I'm Nick.

3
00:00:10,263 --> 00:00:15,186
Studying the elements and principles of
art and design can help you understand how

4
00:00:15,186 --> 00:00:18,908
to talk about design and
analyze the individual components.

5
00:00:18,908 --> 00:00:24,572
But sometimes application can
feel like a conceptual leap.

6
00:00:24,572 --> 00:00:29,141
In this course we're going to look
at an example website layout and

7
00:00:29,141 --> 00:00:30,942
make improvements to it.

8
00:00:30,942 --> 00:00:36,191
The first thing we'll work on,
cold copy, isn't visual at all,

9
00:00:36,191 --> 00:00:40,050
copy is all of the text
that appears in a design.

10
00:00:40,050 --> 00:00:45,140
And while you might not be responsible for
things like blog posts and other

11
00:00:45,140 --> 00:00:50,670
core content, designers are often still
expected to write for things like labels,

12
00:00:50,670 --> 00:00:55,420
buttons, form fields, and
even sometimes, short marketing blurbs.

13
00:00:56,740 --> 00:00:59,370
We'll write some copy of our own later on.

14
00:00:59,370 --> 00:01:02,990
But to get us started,
we're going to check the spelling and

15
00:01:02,990 --> 00:01:05,870
grammar of some existing copy.

16
00:01:05,870 --> 00:01:08,650
It's important that you follow
the rules of grammar and

17
00:01:08,650 --> 00:01:13,910
spelling when creating apps and websites,
because it builds trust with your user.

18
00:01:13,910 --> 00:01:17,460
If a user spots a world
that's spelled incorrectly,

19
00:01:17,460 --> 00:01:20,780
they might start to wonder what
else is wrong with your product.

20
00:01:20,780 --> 00:01:24,714
And that could impact really
important moments in the experience,

21
00:01:24,714 --> 00:01:25,950
like a purchase decision.

22
00:01:27,180 --> 00:01:31,670
In this course, I'm going to use Adobe XD,
and I encourage you to follow

23
00:01:31,670 --> 00:01:36,150
along by downloading the example file and
making the improvements with me.

24
00:01:37,560 --> 00:01:40,836
Here's the example website
that we'll be working on.

25
00:01:40,836 --> 00:01:45,030
I have it pulled up in
the Preview mode in Adobe XD.

26
00:01:45,030 --> 00:01:50,470
This is the homepage for a fictional
website that collects user reviews for

27
00:01:50,470 --> 00:01:52,790
restaurants similar to Yelp.

28
00:01:52,790 --> 00:01:59,680
However, this website focuses
exclusively on desserts, or ZERTS.

29
00:01:59,680 --> 00:02:03,170
There's a lot about this
layout that can be improved.

30
00:02:03,170 --> 00:02:05,890
Some of the improvements might
be obvious to you right away,

31
00:02:05,890 --> 00:02:10,770
but if not, that's okay, because that's
exactly what we're here to learn.

32
00:02:10,770 --> 00:02:14,360
I want to help you develop
your aesthetic sensibility so

33
00:02:14,360 --> 00:02:16,810
that when you see
something that looks wrong,

34
00:02:16,810 --> 00:02:22,500
you can specifically identify what
that thing is and how to improve it.

35
00:02:22,500 --> 00:02:26,669
Let's take a look at what's here now,
and quickly review it,

36
00:02:26,669 --> 00:02:29,199
before we make any of our own changes.

37
00:02:29,199 --> 00:02:33,133
Along the top is a pretty
standard navigation bar.

38
00:02:33,133 --> 00:02:37,339
There's the name of the website,
ZERTS, short for

39
00:02:37,339 --> 00:02:41,620
dessert, a tag line, it's a piece of cake.

40
00:02:41,620 --> 00:02:48,190
And there's a search bar,
a few restaurants that are new,

41
00:02:48,190 --> 00:02:54,210
and a recent blog post, and
then we have a footer down at the bottom.

42
00:02:54,210 --> 00:02:58,820
So let's work our way from
top to bottom and look for

43
00:02:58,820 --> 00:03:02,790
improvements we can make to spelling and
grammar.

44
00:03:04,040 --> 00:03:08,489
So to do that, I'm going to pop
back over into Adobe XD and

45
00:03:08,489 --> 00:03:10,542
come out of preview mode.

46
00:03:18,016 --> 00:03:22,793
The first thing I notice
is this link to the forums,

47
00:03:22,793 --> 00:03:26,470
going to zoom in on that just a bit here.

48
00:03:28,900 --> 00:03:35,680
Any buttons or links in a navigation bar
like this should generally be title case.

49
00:03:35,680 --> 00:03:41,740
Even though it's not a title,
it's also not text that's in a paragraph.

50
00:03:41,740 --> 00:03:46,730
In title case, all major words
are capitalized and minor words,

51
00:03:46,730 --> 00:03:50,830
like conjunctions and
prepositions, are lowercase.

52
00:03:50,830 --> 00:03:54,700
So the word a, for example, would be

53
00:03:54,700 --> 00:03:59,310
lowercase if it were in the middle of
a tagline, like it's a piece of cake.

54
00:04:00,610 --> 00:04:05,761
So let's change this link here,
and I'll just double click

55
00:04:05,761 --> 00:04:10,710
on it a couple of times to drill
down into the layers there,

56
00:04:10,710 --> 00:04:14,259
and change this to a capital F for Forums.

57
00:04:14,259 --> 00:04:15,243
There we go.

58
00:04:18,420 --> 00:04:24,094
And if we scroll over here, the copy for
Log In and Sign Up look good to me,

59
00:04:24,094 --> 00:04:29,930
although there is other visual
issues we'll address later.

60
00:04:29,930 --> 00:04:34,714
The logo itself, ZERTS*,
also looks good to me, but

61
00:04:34,714 --> 00:04:38,777
this tagline is bothersome for
a few reasons.

62
00:04:38,777 --> 00:04:42,876
First, it's a sentence,
its a piece of cake, so

63
00:04:42,876 --> 00:04:47,770
it should begin with a capital letter and
end with a period.

64
00:04:48,780 --> 00:04:53,590
Secondly, the word its in
the possessive form here,

65
00:04:53,590 --> 00:04:56,950
as if the sentence were trying
to say something different.

66
00:04:58,140 --> 00:05:03,620
It's in this case is actually
a contraction of the word it and

67
00:05:03,620 --> 00:05:09,610
the word is, so
it should have an apostrophe before the s.

68
00:05:09,610 --> 00:05:13,870
And finally,
the word piece is spelled wrong.

69
00:05:13,870 --> 00:05:15,830
So let's fix all of that.

70
00:05:15,830 --> 00:05:21,810
I'm going to double click this,
capitalize it,

71
00:05:22,890 --> 00:05:28,220
give it an apostrophe, and even XD is
saying, hey, this is spelled wrong

72
00:05:28,220 --> 00:05:34,680
with that red underline,
need to swap the i and the e there.

73
00:05:34,680 --> 00:05:37,790
And then we need a period
at the end of this, and

74
00:05:37,790 --> 00:05:41,250
then to accept those changes
I'll just hit Escape.

75
00:05:42,820 --> 00:05:44,740
So let's zoom back out here.

76
00:05:45,860 --> 00:05:50,510
Finally, there's one more piece
of copy toward the bottom

77
00:05:50,510 --> 00:05:53,550
right that says the blog.

78
00:05:53,550 --> 00:05:59,100
And because that's actually
a title it should be title case.

79
00:05:59,100 --> 00:06:02,880
Now, before I said words
like prepositions and

80
00:06:02,880 --> 00:06:06,500
conjunctions shouldn't be
capitalized in title case.

81
00:06:06,500 --> 00:06:12,190
The only time they should be capitalized
is if they're at the start of the title.

82
00:06:12,190 --> 00:06:15,960
So in this case, The Blog,

83
00:06:17,560 --> 00:06:21,080
where the T and
the B should both be capitalized.

84
00:06:22,950 --> 00:06:25,560
So let's hit Escape to
accept those changes.

85
00:06:25,560 --> 00:06:32,017
I'll zoom back out, and that should
be it for spelling and grammar.

86
00:06:32,017 --> 00:06:34,230
When you're done, save your work.

87
00:06:35,590 --> 00:06:40,920
And there actually is one more thing
here underneath the blog title.

88
00:06:43,400 --> 00:06:50,150
In this copy, it says have you
ever been had a great dinner.

89
00:06:50,150 --> 00:06:53,840
Let's, Change that to,

90
00:06:55,630 --> 00:07:01,017
Have you ever, Enjoyed a great dinner,

91
00:07:01,017 --> 00:07:05,148
only to be disappointed by
the lack of dessert options?

92
00:07:09,779 --> 00:07:11,088
And I'll zoom back out.

93
00:07:12,719 --> 00:07:16,910
And that should be it for
spelling and grammar.

94
00:07:16,910 --> 00:07:19,640
When you're done, save your work.

95
00:07:21,757 --> 00:07:24,971
There's a lot more about this
layout that needs to be fixed, but

96
00:07:24,971 --> 00:07:26,350
we're off to a good start.