canva style guide - gracelabue.com … · use of white space ... canva is a web-based graphic...
TRANSCRIPT
1
Canva Style Guide
Charlotte Center for Legal Advocacy
2
Contents
What is Canva? .................................................................................................................. 4
Infographic ....................................................................................................................... 4
Type ................................................................................................................................. 4
Bad Infographic ............................................................................................................ 5
Good Infographic ......................................................................................................... 5
What makes a good design? ....................................................................................... 6
Basics of Good Design ....................................................................................................... 7
Rule of Thirds .................................................................................................................. 7
Why does this matter? ................................................................................................. 8
Use of White Space ........................................................................................................ 8
Scale down graphic designs ........................................................................................ 8
Don’t fill up every space with content! ......................................................................... 9
Trapped White Space ................................................................................................... 10
Our logo ............................................................................................................................ 10
inspiration ...................................................................................................................... 10
Tagline .............................................................................................................................. 11
inspiration ...................................................................................................................... 11
Logo variations ................................................................................................................. 12
Logo usage ....................................................................................................................... 13
Area of isolation............................................................................................................. 13
Minimum Size of Logo .................................................................................................. 13
Incorrect logo usage ......................................................................................................... 14
Color Palette ..................................................................................................................... 15
Primary .......................................................................................................................... 15
Secondary ..................................................................................................................... 15
Branding Colors on Canva ............................................................................................ 16
Why is Color Use Important? ........................................................................................ 16
Color Do’s .................................................................................................................. 16
Color don’ts ................................................................................................................ 17
3
Usage of black and white in design .............................................................................. 17
Color Blindness ............................................................................................................. 18
Graphics ............................................................................................................................ 19
Selecting the right graphic ............................................................................................ 19
Cultural Sensitivity ..................................................................................................... 19
Representation........................................................................................................... 19
Typography ....................................................................................................................... 19
Serif VS Sans Serif ....................................................................................................... 20
Title Font ........................................................................................................................ 20
Body:.............................................................................................................................. 20
Copy .............................................................................................................................. 21
Line length.................................................................................................................. 21
The visual hierarchy................................................................................................... 22
Language Accessibility .............................................................................................. 22
Audience ........................................................................................................................... 23
Audience Profiles .......................................................................................................... 24
Include examples of potential audiences and who staff client, community member, best
mediums ............................................................................ Error! Bookmark not defined.
The Approval Process ...................................................................................................... 26
4
What is Canva? Canva is a web-based graphic design tool created in 2012. Canva can be used to
create infographics, posters, and social media posts. The items created can be used for
web and print media.
Infographic
Noun in.fuh.gra.fuhk
A visual image such as a chart or diagram used to represent information or data.
Synonyms: Visualization, Diagram, Plan
Type
Noun tipe
Printed characters or letters.
Synonyms: print, typeface, face, characters, font
Related Words: fount, lettering
5
Bad Infographic
Why is this bad?
- People typically read from
left to right, top to bottom
and the dates are not in
any meaningful order
- Graphics are sporadically
placed
- There is too much type
Good Infographic
What makes this a good infographic?
• Meaningful images and graphics
• Good spacing
• Easy to find title
• Easy to understand
• Nice color pallet
6
What makes a good design?
7
Basics of Good Design
Rule of Thirds
The rule of thirds states that if you divided a canvas into three equally sized horizontal
and vertical sections, the grid serves as a “road map” for good design and placement of
objects.
Think the classic Brady Bunch Opening!
As the grid below shows, the intersections of the line should be the primary areas of
your graphic. The intersections are where the human eye is naturally drawn and thus
have the most attention. The audience’s eyes typically move from the top left, to the
bottom left, then to the top right, and lastly the bottom right.
8
Why does this matter?
The rule of thirds creates visual interest using asymmetry! For example, look at how this
advertisement utilizes the rule of thirds. People have very short attention spans, so
creating something that is visually interesting is crucial to holding your audience’s
attention. Do not forget to place the focal points of your design at the intersection. For
more help complete this tutorial on grid use and Canva:
https://designschool.canva.com/tutorials/using-canva-grids/
Use of White Space
White space is not the same thing as “empty space” and it does not always need to be
filled. Correct white space use can boost clarity and look of an advertisement by
balancing complex parts of a design with extra space.
Scale down graphic designs
By scaling down imagery, type, and graphics, you can create white space around focal
points. This graphic scaled down the information to create a frame of white space.
9
Don’t fill up every space with content!
White space is doing its own job and does not need to be filled. The example below
uses very few words and graphics to let each element breathe and speak for itself.
10
Trapped White Space
Trapped White Space is white space that is trapped in a design, boxed in by many
elements, thus creating a non-aesthetically appealing whole in design. This is often
created by cluttered, overlapping elements in a design. This can be easily corrected by
rearranging the design to open the space.
Our logo
inspiration
Our logo was conceived and built on the mission and vision of Charlotte Center for
Legal Advocacy. In the center of our mark stands a strong human figure. Others
surround and overlap this central figure, representing the principles of teamwork and
community in a balanced structure that exudes safety, security and stability. The mark is
open to interpretation —the group can signify a team of attorneys, or it can be a client
backed up by attorneys. As a visual nod to the Charlotte region and its nickname of the
Queen City, the figures form an abstract crown. The typeface is a straightforward sans
11
serif font. The use of all lower-case letters sets a welcoming tone and communicates
the warm and accessible nature of our organization.
Tagline
inspiration
Our tagline uses three simple words to tell a big story. “Justice” is the key word in our
mission statement, because we fight for fairness and equality in everything we do. It’s
the word we live by, not just a principle or a goal but a living, breathing thing. With the
statement “justice lives here,” we communicate the bold idea that justice is alive and
well in our community, pursued by tireless and passionate attorneys and advocates who
work side by side with our neighbors and fellow citizens. This is a state of mind as well
as a physical space – it’s the center for justice in the Charlotte region.
12
Logo variations
Logo with English tagline
Use for white/light
colored
backgrounds for
mainly English-
speaking audiences.
Use on above instances when communicating in black and white
This White logo is useful for dark backgrounds where the original logo may be washed out
Logo with Spanish tagline
Use for white/light colored backgrounds for mainly Spanish-speaking audiences.
This White logo is useful for dark backgrounds where the original logo may be washed out
CCLA + Legal Aid Logo
This logo is useful when doing collaborative designs with the CCLA and Legal Aid.
Please note, when using the logo with tagline, it is important to maintain the integrity of
the full lockup. The placement of the tagline should not be altered, nor should the font or
the text color be changed.
13
Logo usage
All canvas produced must have the logo on it in some fashion that the average viewer
could easily find it and recognize what it is.
Area of isolation
Please always maintain an amount of clear space around the logo. This is to ensure the
readability of our logo in all areas of communications.
Minimum Size of Logo
0.7 x 1.25 inches
This may vary based on the specific graphic, but make sure that the logo is easy to read
and understand
14
Incorrect logo usage
do not crop parts of our corporate logo.
Please use the logo in its entirety.
do not screen back the logo.
Please always use at 100% density.
do not stretch or reshape the logo.
do not place graphics or text over,
under or near the logo. Please remember
to be considerate of our Area of Isolation
guidelines.
do not place the logo over competing graphics or text.
The readability of the logo is of the utmost importance.
15
Color Palette
Use four colors or less to create cohesiveness and reflect the personality of the
Charlotte Center for Legal Advocacy.
Primary
Secondary
16
Branding Colors on Canva
Finding the brand colors on Canva is simple by typing the hashtags listed on the page
above into the color search bar. The light blue color above looks more like this hashtag
“#447BBF”.
Color Do’s
1. Use colors under the branding standards above to match the company’s color
scheme. Matching color scheme helps align brand with the messaging content.
2. Use one color to represent continuous data
3. Use contrasting colors for comparisons –
contrasting colors help differentiate data
quickly
4. Use colors that appear in nature – people
respond better to colors they are familiar with
in their surroundings
17
5. Use color to highlight the most important information – color can guide the
reader’s eye to what you
think is most important
on the chart.
6. Consider how different
colors make people feel
different things
Color don’ts
1. Pick colors that are too hard to distinguish – viewers must be able to understand
the data presented
2. Use too many colors – Avoid the rainbow effect!
3. Forget that some people are color blind – Avoid color combinations like green &
red, green & brown, etc., that are especially hard on individuals that are color
blind
4. Avoid Color Discord – ‘color clashing’ occurs when two colors widely separate on
the color wheel are paired together. This ‘vibrating’ effect makes it hard for the
audience to read the type.
18
Usage of black and white in design
Sometimes designs must be printed in black and white. This color scale exemplifies
how you can still use shades of gray and black to draw attention to different areas.
Canva additionally has several black and
white templates that can be copied and
filled in with different information. Typing the
hashtag into the color section on Canva is
an easy way to recreate this color scale.
Color Blindness
Sometimes it’s hard to remember that other
individuals in society perceive colors differently
than we do and may be color blind. Color
blindness simulators like this one:
https://www.color-blindness.com/coblis-color-
blindness-simulator/ allow users to upload their
images and view how they are perceived by
people with varying ranges of color blindness. How people perceive color is crucial
because of the different psychological responses to color use.
19
Graphics
Graphics chosen should inform your audience and complement the copy, nor simply fill
space. The graphics and images you choose for your designs should be created with
cultural sensitivity and representation in mind.
Selecting the right graphic
Graphics that you select must complement each other to create a cohesive look when
grouped together. One way of accomplishing this is through using photos from the same
photoshoot. Another way is to use the same filter across multiple images to tie them
together through filters.
Cultural Sensitivity
Cultural awareness allows individuals to consider designs from all angles and ensure
their work is not misinterpreted or offensive. From color pallet to font selection, these
seemingly harmless choices can often be frowned upon by different cultures. While
cultural sensitivity should be used in all facets, you should pay especially close attention
to cultures in your audience. Generalizations and stereotypes should be avoided at all
costs because they are the root of misconceptions about REAL people.
Representation
Your audience should see themselves represented in your design. Representation goes
beyond race or gender and can include categories like sexual orientation, income level,
and disability. Often, lack of representation is not intentional, instead groups are afraid
to misrepresent and insult a group. It is important that the minority groups we serve and
advocate for are represented in our designs.
Typography
Specific type styles have been selected to convey the Charlotte Center for Legal
Advocacy brand. Use light text on dark backgrounds and dark text on light backgrounds.
20
Readability of your type should not be compromised because of aesthetic reasons. The
primary reason for Canva design in
COMMUNICATION after all.
Serif VS Sans Serif To keep with the overall Charlotte Center for
Legal Advocacy Brand, select san serif family
fonts. Sans serif fonts are easier to read on
web-based mediums and lack the projecting
features called “serifs” at the end of strokes.
Having a pallet of fonts is crucial and no more
than two or three fonts should be used to
avoid complication and clutter. As with color,
fonts also carry different moods and emotions.
Title Font: Arialle
Ideal Size: 32 px
The typeface family Gotham has been
chosen for main conceptual and
descriptive headlines, informational
subheads and body copy. Because
Gotham is not available on Canva, Arialle or Century Gothic are acceptable
substitutes.
Body: Roboto Ideal Size: 14 px
21
Roboto is another sans serif font that pairs well with the Gotham font. Using different
fonts for the body and title engages readers and helps draw them in. Oswald and
helveticish are good alternatives.
The size of the font is
not a set px, instead it
may vary based on
your graphic.
Copy
Line length
Copy lines should have a minimum of six words per line and average about 30-40
words per line. Readers have a short attention span, and lengthy lines can lose their
attention. Finding a balance between too tedious and too lengthy is key.
22
The visual hierarchy
A strong and personal hierarchy is a powerful tool for communication and design.
Hierarchy of type includes scale, color, type, etc. giving the most important elements the
most attention and vice versa for less important items.
Language Accessibility
Because the central goal of design is communication, you must ensure the type you
choose is at a 6th or 7th grade level and easily understood. The exact understanding
level you choose may vary based on your audience (i.e. college graduates or 1st
graders). The reading level of your type can be checked via Microsoft Word.
23
1. Go to File > Options
2. Select Proofing
3. Under When correct spelling and grammar, make sure the Check grammar with
spelling check box is selected
4. Select Show readability statistics
5. Press F7 or go to Review > Spelling & Grammar
Audience
Before creating your design, you
should have a specific audience
in mind. One easy way to do this
is by asking yourself, “Who
needs to receive this
message?”. Who your audience
is determines what type, color, information, and medium you use for your design. Every
design must have an intended audience made up of the people viewing the design and
receiving the communication. In the example below, the children’s concert is designed
in two different ways for two different audiences. The graphic on the left targets parents
because it is black and sophisticated. The graphic on the right is for children because it
is bright and colorful to attract kids. It doesn’t matter if your design looks great if it is not
the best way to reach your audience.
24
Audience Profiles
The Millennial
• Channel: most millennials can be found on social media sites like Instagram,
Reddit, Snapchat, and Twitter. Consider using these mediums to reach
audiences in this demographic.
o Cross channel outreach is key because of the different forms of media
provided by different forces
• In 2017, 96 percent of millennials owned a smart phone.
• Millennial audiences have short attention spans given the amount of media
throne at them, thus the message you are conveying must be concise
• Visual ads and uses of imagery in communication is key to engaging younger
audiences
Middle-Aged Audience
• Channel: most middle-aged adults spend most of their time online on either the
Facebook, Instagram, or linkedin profiles.
• Middle-aged audiences are very busy and prefer concise messaging
25
Seniors
• Channel: some seniors have made the move to Facebook, but many still prefer
print media and their local newspapers
o Therefore, print should be utilized to communicate with people in this
demographic
• Avoid teenage/trendy jargon in your communication
• 2017, on 27% of adults over 65 owned smartphones
Client Communication
• Client communication may very based on the demographic of your client
• Take advantage of the multiple channels of communication to reach clients
• Keep in mind potential clients may not have internet service, so print
communication may be best in some cases
• Positioning posters about CCLA and the services we provide in community
centers may be the best form of communication in some cases
26
The Approval Process All materials drafted on Canva must be approved by the Communications specialist or a
member of the Development Team before being published or shared with the public.
Drafts need to be submitted for approval with at least two days’ notice before the final
version is needed.
For any questions and approvals, please
contact:
Hannah Sharpe Grace LaBue
27
Communications Specialist
1431 Elizabeth Ave.
Charlotte, N.C. 28204
Phone 704 376 1600 704 749 7486
Development Intern
1431 Elizabeth Ave.
Charlotte, N.C. 28204
Phone 704 376 1600
Brittney Coleman
Director of Development and Public
Relations
1431 Elizabeth Ave.
Charlotte, N.C. 28204
Phone 704 376 1600 704 749 7486
Meghan Rankins
Development Intern
1431 Elizabeth Ave.
Charlotte, N.C. 28204
Phone 704 376 1600
Maria Byers
Development Specialist
1431 Elizabeth Ave.
Charlotte, N.C. 28204
Phone 704 808 4140