MARKETING

DESIGN
GUIDELINES
OUTSOURCED
DOERS
Design guidelines

Contents

Marketing Rules 3 Dimensions 20

Fonts 5 Spacing / Alignment 21

Colours 14 Colour Wheel 23

Button Rules 16 Terminology 25

Stock Images 17
 Marketing Design Guidelines

Marketing Rules
1. CHOOSE CONTRASTING + HIGH 2. LIMIT YOURSELF TO 1 OR 2 FONTS 3. STRATEGICALLY SELECT YOUR
CONVERTING COLOURS COLOR PALETTE
Instead, choose (at most) a pair of fonts. In fact, to really
Contrast “makes it easy and pleasurable to read” If you tie all your visual assets together, you may want to put As with fonts, restraint pays off when you’re selecting
do nothing else, it’s crucial to make sure that the text in a little work ahead of time to find a couple of fonts colors. Two or three hues are often plenty in a small
on your images is immediately legible: dark text on light to call your own, and then use them on everything you space such as a banner ad.
backgrounds or vice versa. Make sure these colours create.
are high converting and attractive to a user. See more
information around this on page 15.

4. USE WHITE SPACE TO YOUR 5. ADD ICONS TO SUPPORT YOUR 6. THINK ABOUT WHO YOU’RE
ADVANTAGE MESSAGE DESIGNING FOR
Think of white space as structural support for the Use icons to draw eyes to the richer information of your Not only do different social platforms have different
most important elements of your image. If the space headline and help people instantly understand what audiences, but even the same audience often turns to
between your headline and your icon gets too narrow, your page, post, or offer is about. Say you’re writing different channels for different kinds of information.
its strength is reduced. It can’t effectively position the a blog post about improving your email open rate.
headline or the icon to catch viewers’ attention. Adding an icon of, say, an envelope to your image is a
great way to reinforce the message of the blog post.

3
 Marketing Design Guidelines

Marketing Rules
7. LET FORM FOLLOW FUNCTION 8. BE CONSISTENT 9. TEXT SIZE DOES MATTER
Rather than trying to fit graphics you’ve already Consistency is one of the design principles that we
created into odd-shaped spaces, start by researching violate frequently. It improves usability, which leads to Did you know that the brain prefers to read 65
the ideal image dimensions for whatever platform the consistency in your customer experience with your characters across for optimal readability? It’s referred
you’re using. In the same place where you’ve stored product. In contrast, if there’s no consistency around to as the perfect measure. Designers are trained to
your color palette hex codes, make a list of the your marketing materials as well as brand touch points, break line lengths around 45 to 75 characters (including
preferred dimensions for any channel you regularly your customers may not have the same experience in punctuation and spaces). Consider this rule, when
use. You’ll end up with an image that truly fits into its the different points of time. writing your text for a headline or campaign next time. It
surroundings. shouldn’t be a novel.

10. DO NOT PUT TEXT OVER IMAGES 11. ALIGNMENT

That doesn’t mean to say you should use no words, Pay close attention to the alignment of your text and
but use them with care. The less words involved in a graphics, as placing these elements anywhere within
design, the greater the statement and the better the your design can lead it to look messy and disorganised.
readability. Do not under any circumstances put text Whether you use left alignment, columns or simply
over images when creating a funnel. Especially that of draw a line across the page and ensure that your
the same colour as the image. graphics and text fit appropriately alongside it, these
details will help to add sophistication to your design.

4
 Marketing Design Guidelines

Fonts
SIZE TRACKING AND KERNING
Font is so important when it comes to The height of each character is known as its ‘x-height’ Kerning is the process of adjusting the space between characters

creating a design piece. It needs to work (quite simply because it’s based on the ‘x’ character). to create a harmonious pairing. For example, where an uppercase

with the choice of colour, imagery and even When pairing different typefaces, it’s generally wise to ‘A’ meets an uppercase ‘V’, their diagonal strokes are usually
use those that share a similar x-height. kerned so that the top left of the ‘V’ sits above the bottom right of
layout.
The width of each character is known as the ‘set width’. the ‘A’.
This spans the body of the letter, plus the space that Kerning is similar to tracking, but they are not the same thing.
It’s important to remember that
acts as a buffer between one letterform and the next. Tracking is the process of adjusting the spacing of all characters in
typography/font is designed to look busy
The most common method used to measure type is a word, and is applied evenly.
and complicated. It’s used to inform
the point system, which dates back to the 18th century.
and provide information, name and One point is 1/72 inch. 12 points make one pica, a unit
identify, create visual hierarchy...etc. On
MEASURE
used to measure column widths. Type sizes can also be
a complicated/busy design piece it’s The term ‘measure’ describes the width of a text block. If you’re
measured in inches, millimetres, or pixels.
important to understand the role your font seeking to achieve the optimum reading experience, it’s clearly an

choice will make. LEADING important consideration. If your lines are too long, your reader can
easily get lost, while a too-short measure breaks up the reading
Leading describes the vertical space between each
experience unnecessarily.
Here is some important font terminology to line of type. For legible body text that’s comfortable to
One rule of thumb is that your lines should be 2-3 alphabets in
remember: read, a general rule is that your leading value should be
length (so 52-78 characters, including spaces).
anything between 1.25 and 1.5 times greater than the
font size.

55
 Marketing Design Guidelines

Fonts
1. CHOOSE COMPLEMENTARY FONTS 2. ESTABLISH A VISUAL HIERARCHY 3. CONSIDER CONTEXT
Many fonts have distinct moods or personalities— When you’re picking fonts for a project, just think The text should be easily readable at the size it is going
serious, casual, playful, elegant. You want to make sure about what part you want viewers to look at first. Or to be displayed, and clarity is especially important for
the moods of your font choices match the purpose here’s another way of approaching it: Decide what small type.
of your design. For instance, a rounded, bubbly information is essential — what must stand out at first In addition to size, font styles also affect readability.
typeface may be appropriate for a child’s birthday glance (a company name, a headline, a special offer?) A good starting point for choosing fonts that fit the
party invitation, but not for your business newsletter. — and what is less important. Then, make your font context of your design is to match the attributes of
So if you have a distinctive font with a “strong style, size, and arrangement choices accordingly. The your intended message with the perceived traits of a
personality” (often referred to as a display font), pair it most important textual element is generally (though typeface. Doing a little research into the backgrounds of
with something more neutral and conservative for a not always) the largest and the weightiest. the fonts you’re considering—when and how they were
balanced design. created and for what purpose, or even how they’ve
been used in a cultural context—may help determine if
they’re a good choice for your design.

EXAMPLE: The
smallest text is in
all caps, and the
letters are spaced
generously—both
choices enhance
legibility.
6
 Marketing Design Guidelines

Fonts
4. MIX SERIFS AND SANS SERIFS 5. CREATE CONTRAST 6. STEER CLEAR OF CONFLICT
Try one serif and one sans serif. The two tend to work Contrast can be achieved in a number of ways, When combining fonts, you do want contrast, but you
together well, particularly at contrasting sizes. For including through style, size, weight, spacing, and color, don’t want conflict. Just because fonts are different
large amounts of text, serif fonts are generally thought among others. The differences help create distinct roles doesn’t mean they will automatically work well
to move the eye along more effectively and increase for each font, allowing them to stand out as individual together. Generally speaking, typefaces that share a
reading speed, especially in print (though this obviously pieces of information. couple qualities—maybe they have similar proportions,
depends the characteristics of the specific font used). or the lowercase letters have the same height (known
On the other hand, sans-serif fonts are often favored In the example below, a bold, chunky font is paired with as “x-height”)—are more likely to look harmonious
for online/on-screen text due to their simplified a tall, thin one—and although they’re almost complete together, even if the overall appearance differs.
letterforms that display more clearly at various screen opposites, they work nicely together in large part
resolutions. because they are so different.

7
 Marketing Design Guidelines

Fonts
7. AVOID PAIRING FONTS THAT ARE 8. USE FONTS FROM THE SAME 9. STEER CLEAR OF CONFLICT
TOO SIMILAR Using typefaces from the same family is always a safe You may have heard it said that you should keep fonts

On the flip side of Rule #5, choosing fonts that are bet; after all, they were created to work together. Look for one project to only two. That’s an appropriate rule

too similar (i.e., don’t have enough contrast) becomes for families that come with a range of options (different of thumb in certain applications (and is common in

problematic. You’ll have trouble establishing a hierarchy weights, styles, cases) to ensure that you have enough editorial designs like magazine spreads), but it is by no

because the fonts aren’t visually distinguishable from each variation for your purposes. means a hard-and-fast rule.

other.
When pairing fonts that come from the same family, However, as with any design element, you can overdo

But fonts don’t have to be exactly alike to be incompatible. you have to plan carefully to create contrast, varying it with typeface selections. Most projects will benefit

Typefaces that are somewhat different but have things like font size, weight (such as light, regular, and from a more restrained, thoughtful approach. A good

comparable weights, proportions, and/or letter shapes may bold), and case (upper, lower, small caps). way to refine your choices is to give each font a specific

be similar enough to make your design look confusing . role or purpose in the design.

8
 Marketing Design Guidelines

Fonts: Body Text (Sans-Serif)

Helvetica Arial Avenir

Body and Heading font Body and Heading font Body and Heading font

ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW

abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw
1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?><
Light Body Italic Body Light Body
Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.
Regular Body Regular Body Regular Body
Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.
Bold Body Bold Body
Bold Body
Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.

9
 Marketing Design Guidelines

Fonts: Body Text (Sans-Serif)

Open Sans Neuzeit Grotesk Calibri

Body and Heading font Body and Heading font Body and Heading font

ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW

abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw
1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?><

Light Body Light Body Light Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.

Regular Body Regular Body Regular Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.

Bold Body Bold Body Bold Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.
10
 Marketing Design Guidelines

Fonts: Body Text (Serif)

Baskerville Palatino Georgia

Body and Heading font Body and Heading font Body and Heading font

ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW

abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw
1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?><
Regular Body Regular Body Regular Body
Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.

Semi-bold Body Italic Body Italic Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra.

Bold Body Bold Body Bold Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. over jianbing. Artisan blog retro
neutra.
11
 Marketing Design Guidelines

Fonts: Body Text (Serif)

Bodoni 72 PT Serif Garamond
Body and Heading font Body and Heading font Body and Heading font

ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW ABCDEFGHIJKLMNOPQRSTUVW

abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw
1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?>< 1234567890!@#$%^&*()_+=”:?><

Regular Body Regular Body Light Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over jianbing.
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. Artisan blog retro neutra.

Italic Body Italic Body Regular Body

Semiotics aesthetic freegan pour-over jianbing. Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over jianbing.
Artisan blog retro neutra. jianbing. Artisan blog retro neutra. Artisan blog retro neutra.

Bold Body Bold Body Bold Body

Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over Semiotics aesthetic freegan pour-over jianbing.
jianbing. Artisan blog retro neutra. jianbing. Artisan blog retro neutra. Artisan blog retro neutra.

12
 Marketing Design Guidelines

Fonts: DO NOT USE

Impact Papyrus Phosphate

Comic Sans Times New Roman Futura Condensed

Zapfino
Chalkboard Chalkduster
Copperplate Marker Felt
Bradley Hand Brush Script
Copperplate Gill Sans
13
 * Make sure you are always using the HEX (#xxxxx)
Marketing Design Guidelines code given to you by your founder. DO NOT try

Colour and guess their colour, keep the integrity of the

colour by using the HEX, RGB or CMYK code.

COLOUR CODES
EXAMPLE (INDESIGN): * HOW TO GET TO COLOUR CODE: Swatches, New Colour Swatch, Change Colour mode accordingly, Add/OK EXAMPLE (CANVA): * You can only use the HEX
code in Canva. By pressing
the new colour you can insert
the HEX code to achieve the
correct colour.

HEX: CMYK: RGB:

#e22587 C=5 M=96 Y=7 K=0 (K=Black) R=226 G=37 B=135

RGB CYMK HEX

(Red, Green, Blue) colour mode is for anything that (Cyan, Magenta, Yellow, Black) colour mode is used (Red, Green, Blue) Designers and developers use HEX colors in web

is computer-based design. This includes websites, for print design. This includes logos, business cards, design. A HEX color is expressed as a six-digit combination of numbers

apps, banner ad and any other design created for stationary, illustration, packaging and any other and letters defined by its mix of red, green and blue (RGB). Basically, a

electronic use. designs used for print. HEX color code is shorthand for its RGB values.

14
 * Make sure you are always using the HEX (#xxxxx)
Marketing Design Guidelines code given to you by your founder. DO NOT try

Colour Combination Examples and guess their colour, keep the integrity of the
colour by using the HEX, RGB or CMYK code.

WHITE BROWN LIGHT

BLUE
BLUE RED
BRIGHT CREAM PINK FAWN
CYAN FUCHSIA CHERRY CREAM VIOLET
Combines with everything

BEIGE ORANGE LILAC

BLUE BROWN EMERALD RED CYAN BLUE LILAC WHITE PINK DARK OLIVE GRAY
VIOLET

LEMON BLACK
PINK YELLOW

BROWN WHITE MINT LIGHT BLUE ORANGE PINK SALAD RED

CHERRY BROWN BLUE GRAY
GREEN

SALAD GRAY
RED GREEN

YELLOW WHITE GREEN BLUE BROWN FAWN DARK RED BLUE RED VIOLET FUCHSIA
BLUE

15
 Marketing Design Guidelines * DO NOT put two harmonising colours on top of

Button Rules
eachother - these do not convert. Use these colours
and these colours ONLY. Apply HEX code provided

HIGH CONVERTING BUTTON COLOURS + PHRASES

HEX: #2d2d2d HEX: #ffffff HEX: #ffe300 HEX: #e1306c

HEX: #474747 HEX: #e43b2c HEX: #201652 HEX: #833ab4

HEX: #606060 HEX: #42b99f HEX: #ff9900 HEX: #00457c

HEX: #888888 HEX: #0075b2 HEX: #1db954 HEX: #e50914

16 * Based of button templates found in Canva: 07 | BUTTONS

 Marketing Design
Design guidelines
Guidelines
Imagery
Stock Images The style and feel of the images used
across all brand material plays an
important role in representing the
overall Outsourced Doers brand.

IMAGE CHECKLIST

- Light and bright

(Exception is darker studio imagery of Grace)

- Simple, clean and sharp

- No grunge or grain overlays / filters

- Soft textures and simple

- Office, stationery and female entrepreneur

orientated props & styling for women

- Aligns with brand personality key words

- Target market at front of mind when

selecting new imagery.

11
27
17
 Marketing Design
Guidelinesof
Examples

Images
DO NOT to
not
USEuse

11
28
27
18
 11
28
27
19
 Marketing Design Guidelines * ONLY use your Founders logo that is given to you.

Dimensions DO NOT change any colours within the logo or the

integrity of the logo while changing the size.

LOGO/IMAGE PARAMETERS

OUTSOURCED
DOERS
25mm

MINIMUM WIDTH
25mm OUTSOURCED 25mm
Logo/Image minimum width is 230px or 60mm.
DOERS
25mm

OUTSOURCED
DOERS
EXCLUSION ZONES
MAXIMUM WIDTH
Always allow 25mm around the logos and Images
Maximum width 500px wide.
20
 Marketing Design Guidelines

Spacing / Alignment
TEXT SPACING + ALIGNMENT

* RECOMMENDED * RECOMMENDED * PROMO ONLY * DO NOT USE

LEFT ALIGNED RIGHT ALIGNED CENTERED JUSTIFIED
(Left Justified, Flush Left) (Right Justified, Flush Right) (Starts center of each line) (Uses Right/Left Aligned)

READABILITY: 100% READABILITY: 100% READABILITY: 50% READABILITY: 25%

WHY: Has a straight left edge which mean WHY: Has a straight right edge which WHY: Has a ragged left edge. Each line WHY: Uses unequal spaces between the
each line starts at the same edge. The mean each line starts at the same edge. starts on a different edge. Centered text is words and letters so both margins appear
gaps are the same size between each The gaps are the same size between each best for headlines and short lines of text. even. Uses hyphenation to break words at
word. word. Best for small promo designs the end of sentences.

EXAMPLE: EXAMPLE: EXAMPLE: EXAMPLE:

Marketing Design Guidelines Marketing Design Guidelines Marketing Design Guidelines Marketing Design Guidelines
Spacing and Alignment Spacing and Alignment Spacing and Alignment Spacing and Alignment
Nobitas dolles a volorer atiatio ssitates Nobitas dolles a volorer atiatio ssitates Nobitas dolles a volorer atiatio ssitates Nobitas dolles a volorer atiatio ssitates
estia denimposam autecti autat ute que estia denimposam autecti autat ute que estia denimposam autecti autat ute que estia denimposam autecti autat ute que
delique rem adit fugia cor as aut fugiat. delique rem adit fugia cor as aut fugiat. delique rem adit fugia cor as aut fugiat. delique rem adit fugia cor as aut fugiat.
Aque nate es dolor se rem rero quidebita Aque nate es dolor se rem rero quidebita Aque nate es dolor se rem rero quidebita Aque nate es dolor se rem rero quidebita
volo tem volum quunti ad ut utem volo tem volum quunti ad ut utem volo tem volum quunti ad ut utem volo tem volum quunti ad ut utem
quibuscia et is debit as doluptur serupta quibuscia et is debit as doluptur serupta quibuscia et is debit as doluptur serupta quibuscia et is debit as doluptur serupta
et oditinu llabore dis sinvenimus. et oditinu llabore dis sinvenimus. et oditinu llabore dis sinvenimus. et oditinu llabore dis sinvenimus.
Eheni dolo cus accus ditasitibus Eheni dolo cus accus ditasitibus Eheni dolo cus accus ditasitibus Eheni dolo cus accus ditasitibus

21
 Marketing Design Guidelines

Spacing / Alignment
IMAGE / SHAPE SPACING + ALIGNMENT

When working
Space In rem as ma
with images. If porum, voluptus
you want to place THE DOERS WAY acerorum do-
text on top of the lupid molupta
Space Space image make sure tenderum rae-
the image has pro eos acitemp
negative space oreptium nesent
for the text to go accum ilia cum
- this increases fugit atur sequi
qui dest que
readability. Make
num, cum qui
Space sure there is tectus et mol-
space around the ores similiquas
image

In rem as ma porum, voluptus DO NOT ever In rem as ma porum,

acerorum dolupid molupta put the text right voluptus acerorum
In rem as ma porum, vo- tenderum raepro eos acitemp dolupid molupta
luptus acerorum dolupid up to the edge of
oreptium nesent accum ilia cum tenderum raepro
molupta tenderum raepro the shape/image/
fugit atur sequi qui dest que eos acitemp orep-
eos acitemp oreptium edge of the tium nesent accum
num, cum qui tectus et mol-
nesent accum ilia cum ores similiquas molorest, ipis page. The best ilia cum fugit atur
fugit atur sequi qui dest quias eatquos sumque es non way to increase sequi qui dest que
que num, cum qui tec- re re, si quiatur, nos enihillabo. readability is to num, cum qui tectus
tus et molores similiquas Ur? Quis cum, ut ut quibustrum create space et molores similiq-
molorest, ipis quias eatqu- quas ipsam que nonsequi diasi uas molorest, ipis
around the text.
os sumque es non re re, si vellupi enihil imEturibus porum- quias eatquos sum-
quiatur, nos enihillabo.
This also is very
que es non re re, si
quaerum quiLabo. Loressu unappealing. THE DOERS WAY
22
 Marketing Design Guidelines *The colour wheel is your ultimate guide to finding colours that work the

Colour Wheel best together! Follow this guide and read through all the information on
colour theory when trying to find colours for your founder.

SCHEME #1: SCHEME #2: SCHEME #3:

A COMPLEMENTARY COMBINATION A COMBINATION OF THREE COLORS AN ANALOGOUS COMBINATION

RED-PURPLE RED-PURPLE RED-PURPLE

PU PU PU
D RP D RP D RP
RE LE RE LE RE LE
GE

GE

GE
BL

BL

BL
UE

UE

UE
AN

AN

AN
-P

-P

-P
OR

OR

OR
UR

UR

UR
D-

D-

D-
PL

PL

PL
RE

RE

RE
E

E
ORANGE

ORANGE

ORANGE
BLUE

BLUE

BLUE
B

BL
GE

GE

GE
L

L
N

N
UE

UE

U
RA

RA

RA

E-
-G

-G
-O

-O

-O

GR
W

W
R

R
O

O
EE

EE

EE
LL

LL

LL
N

N
YE

YE

YE
GR GR GR
OW EE LO
W EE LO
W EE
LL N L N L N
YE YE YE
YELLOW-GREEN YELLOW-GREEN YELLOW-GREEN

Complementary (also known as supplementary or contrasting) A Triad is a combination of 3 colors that are equidistant from each This is a combination of 2 to 5 (ideally 2 to 3) colors that are
colors are colors that sit opposite of each other on the color circle. other on the color circle. It produces a high contrast effect while adjacent to each other on the color circle. It creates a calming,
The combination of such colors creates a vivid and energizing preserving ’harmony.’ Such a composition looks vibrant even likable impression. Here’s an example of combining analogous
effect, especially at maximum saturation. when you use pale and unsaturated colours. muted colors: yellow-orange, yellow, yellow-green, green, blue-
green.
23
 Marketing Design Guidelines *The colour wheel is your ultimate guide to finding colours that work the

Colour Wheel best together! Follow this guide and read through all the information on
colour theory when trying to find colours for your founder.

SCHEME #4: SCHEME #5: SCHEME #6:

THE SPLIT COMPLEMENTARY COMBINATION A COMBINATION OF FOUR COLORS THE SQUARE

RED-PURPLE RED-PURPLE RED-PURPLE

PU PU PU
D RP D RP D RP
RE LE RE LE RE LE

GE

BL
GE

GE
BL

BL

UE
UE

UE

AN
AN

AN

-P
-P

-P

OR
OR

OR

UR
UR

UR

D-
D-

D-

PL
PL

PL

RE
RE

RE

E
E

ORANGE
ORANGE

ORANGE

BLUE
BLUE

BLUE

BL
B

GE
GE

GE
L

AN
N

U
UE

UE
RA

RA

E-
OR
-G

-G
-O

-O

GR
-
OW
W

W
R

R
O

EE
EE

EE

LL
LL

LL

N
N

YE
YE

YE
GR GR GR
OW EE W EE W EE
LL N LO L N LO L N
YE YE YE
YELLOW-GREEN YELLOW-GREEN YELLOW-GREEN

A variation on the complementary color combination. In this case, you This is a scheme that includes one primary and two A combination of 4 colors that are equidistant from each other
take one primary color and two complementary ones (the colors that complementary colors, plus an additional color that highlights the on the color circle. In this case, the colors differ from each other in
lie on both sides of the primary color’s antipode on the color circle). accents. An example: blue-green, blue-violet, orange-red, orange- tone, but are also complementary. This creates a dynamic, vivid,
The effect created by such a scheme is just as contrasting as the yellow. and playful effect. An example: violet, orange-red, yellow, blue-
one before but slightly less intense. If you feel unsure about using the green.
complementary scheme, use the split complementary instead.
24
 Marketing Design Guidelines

Terminology
RGB CYMK VECTOR
(Red, Green, Blue) colour mode is for anything that is (Cyan, Magenta, Yellow, Black) colour mode is used Vector images are made up of points, lines, and curves
computer-based design. This includes websites, apps, for print design. This includes logos, business cards, that can be infinitely scaled without any loss in image
banner ad and any other design created for electronic stationary, illustration, packaging and any other designs quality.
use. used for print.

RASTER LOSSLESS LOSSY

Raster images are made up of a set grid of dots called Lossless image formats capture all of the data of your Lossy image formats approximate what your original
pixels, where each pixel is assigned a colour value. Unlike original file. Nothing from the original file, photo, or piece image looks like. For example, a lossy image might
a vector image, raster images are resolution dependent. of art is lost—hence the term “lossless.” The file may still reduce the amount of colors in your image or analyze the
When you change the size of a raster image, you shrink be compressed, but all lossless formats will be able to image for any unnecessary data. These clever technical
or stretch the pixels themselves, which can result in a reconstruct your image to its original state. tricks will typically reduce the file size, though they may
significant loss of clarity and produce very blurry images. reduce the quality of your image.

25
 Marketing Design Guidelines

Terminology
JPEG/JPG EPS PNG
JPEG is a lossy raster format that stands for Joint EPS is an image format that stands for Encapsulated PNG is a lossless raster format that stands for Portable
Photographic Experts Group, the technical team that PostScript. Although it is used primarily as a vector format, Network Graphics. Think of PNGs as the next-generation GIF.
developed it. This is one of the most widely used formats an EPS file can include both vector and raster image data. This format has built-in transparency, but can also display
online, typically for photos, email graphics and large web Typically, an EPS file includes a single design element that can higher color depths, which translates into millions of colors.
images like banner ads. JPEG images have a sliding scale be used in a larger design. PNGs are a web standard and are quickly becoming one of
of compression that decreases file size tremendously, but the most common image formats used online.
increases artifacts or pixelation the more the image is
compressed.

AI PDF TIFF/TIF
AI is a proprietary vector image format that stands for Adobe PDF stands for Portable Document Format and is an image format TIFF is a lossless raster format that stands for Tagged Image
Illustrator. The format is based on both the EPS and PDF used to display documents and graphics correctly, no matter File Format. Because of its extremely high quality, the format
standards developed by Adobe. Like those formats, AI files are the device. At its core, PDF files have a powerful vector graphics is primarily used in photography and desktop publishing.
primarily a vector-based format, though they can also include foundation, but can also display everything from raster graphics to You’ll likely encounter TIFF files when you scan a document or
embedded or linked raster images. AI files can be exported to form fields to spreadsheets. Because it is a near universal standard, take a photo with a professional digital camera. Do note that
both PDF and EPS files (for easy reviewing and printing), and PDF files are often the file format requested by printers to send a TIFF files can also be used as a “container” for JPEG images.
also JPEG, PNG, GIF, TIFF and PSD (for web use and further final design into production. Both Adobe Photoshop and Illustrator These files will be much smaller than traditional TIFF files,
editing). can export straight to PDF, making it easy to start your design and which are typically very large.
get it ready for printing.

26
OUTSOURCED
DOERS

Marketing Design
Guidelines