2. BUILD YOUR BRAND VISUALLY
Your brand exists to build a bridge between you and your
clients. It’s there to tell them who you are, why they
should trust you and what they can expect from your
products and services. It’s there to reinforce your
relationship and inspire loyalty — even brand love.
Effectively translating the essence of your brand into a
visual display of information can be the start of a
beautiful relationship, so here are our no-nonsense,
step-by-step tips for improving your visual design.
www.kurtosys.com
3. 1. GET THE BASICS RIGHT
COLOR: BRANDING
• Refer to your brand guidelines
document regularly
• If you don’t have one, get it done — it
should contain all the colors you
should be using
• Designers often create a primary/
secondary color palette — apply to
charts and objects where multiple
colors are required.
www.kurtosys.com
4. 1. GET THE BASICS RIGHT
COLOR: USE TOOLS
• Creating color schemes from
scratch? Try Adobe Kuler,
colorschemedesigner,
COLOURlovers, or ColorBlender
• Start with 2 or 3 main colors, then
add shades of those colors and
neutral tones
• Avoid adding extra colors
randomly as this will dilute the
brand and visual appeal
Pantone
RGB
HEX
Pantone Cool Gray 9
R116, G118, B121
#747679
Pantone 534 Dark Blue
R41, G62, B107
#293e6b
Orange 021
R255, G82, B0
#ff5200
www.kurtosys.com
5. 1. GET THE BASICS RIGHT
COLOR: PRINT OR DIGITAL?
• Are you producing something that will
be printed or is it for onscreen use?
• Your brand guidelines should provide
CMYK / RGB / Pantone and HEX
values — get the colors right for the
relevant medium
www.kurtosys.com
CMYK: C = 69%
M = 14%
Y = 0%
K = 0%
RGB: R = 41
G = 171
B = 226
Web: #20adda
CMYK: C = 1%
M = 98%
Y = 97%
K = 0%
RGB: R = 234
G = 34
B = 39
Web: #e8232a
CMYK: C = 84%
M = 9%
Y = 99%
K = 1%
RGB: R = 6
G = 161
B = 75
Web: #189b4d
6. 1. GET THE BASICS RIGHT
COLOR: MONO VS. COLOR
• What does your color scheme look like
in black and white? Can your reader tell
the difference in mono?
• Websites can have printer-friendly style
sheets (via CSS)
• PDFs don’t have that luxury — test your
contrast and tints so that multi-colored
charts print well in monochrome
(grayscale)
www.kurtosys.com
7. 2. ORGANIZE YOUR LAYOUT
LAYOUT: USE GRIDS
In print or online media, layout grids can
help you organize the elements on the page
in a clear and consistent way
• Web applications such as Adobe
Dreamweaver come with built-in tools to
assist with responsive layout grids
• See using layout grids effectively
www.kurtosys.com
8. 2. ORGANIZE YOUR LAYOUT
LAYOUT: TEMPLATES
Without templates there is no consistency
or visual harmony across content.
• Most websites are template-driven for
easy manipulation and scaling
• DTP “master pages” can control both
the layout and the content styling
www.kurtosys.com
1
2
3
9. 2. ORGANIZE YOUR LAYOUT
LAYOUT: RULE OF THIRDS
• The rule of thirds is a design concept that
is applied to many things: photography,
film, painting and graphic design
• There are 4 focus points where the lines
intersect — the most important content
should reside not in the center but along
these lines or points (often in the top or
bottom third)
www.kurtosys.com
10. 2. ORGANIZE YOUR LAYOUT
LAYOUT: WHITE SPACE
• Avoid horizontal rules and divider
lines — use negative space to divide
content
• A List Apart demonstrates the idea
of the same content in two designs,
but with different treatments of
space: “cheap” direct mail design on
the left versus “Luxury” brand
design on the right.
Source: A List Apart, 2007
www.kurtosys.com
11. 2. ORGANIZE YOUR LAYOUT
LAYOUT: GROUP CONTENT
Group related content together
• Users get accustomed to seeing
content in consistent chunks
• Speed up information absorption
• Block out less relevant content
www.kurtosys.com
12. 3. ADD CONTENT INTELLIGENTLY
TYPE: FONTS
• Use the right font for the job
• Brand guidelines come first
• Use only two or three fonts
• In print or online, style sheets
should be applied for consistent
headings, body, asides, block
quotes and captions
www.kurtosys.com
13. 3. ADD CONTENT INTELLIGENTLY
TYPE: LEADING
• Leading, AKA line spacing
provides adequate space
between text
• Basic guide: leading should be
2–3 pts greater than the font
size (ex: 12pt text may have
15pt leading)
www.kurtosys.com
14. 3. ADD CONTENT INTELLIGENTLY
TYPE: ORPHANS & WIDOWS
• Words/phrases that become separated from a paragraph
make your text difficult to read
• Hard to avoid in
websites but easily
dealt with using
DTP style sheets
www.kurtosys.com
15. 3. ADD CONTENT INTELLIGENTLY
TYPE: HIGHLIGHTING
• Use color or font styling to
add emphasis to any key
words or sentences
• Avoid underlining
• Be consistent — if you
choose italics then stick to
that style across the board
www.kurtosys.com
16. 3. ADD CONTENT INTELLIGENTLY
CHARTS: PIES LIE
• Choose the right tool for the job
• Pie charts can be misleading —
can a bar chart give a more
clear picture for your readers?
www.kurtosys.com
17. 3. ADD CONTENT INTELLIGENTLY
CHARTS: 3D MADNESS
• Avoid 3D effects and “quick styles”
unless there’s a real need for them
• Focus on the key data and message
that you want to get across
www.kurtosys.com
18. 3. ADD CONTENT INTELLIGENTLY
CHARTS: MULTIPLE CHARTS
If your chart contains lots of
data, consider breaking one big
chart into many smaller ones
— you may find it easier to see
the results and compare data
www.kurtosys.com
19. 3. ADD CONTENT INTELLIGENTLY
CHARTS: LABELS
• Add concise labels to your chart to
let the reader know what point
you’re making
• Embed labels on or near the data if
possible, not in a separate legend
• If your chart represents an update
to a series of data, highlight the
area you want to focus on
www.kurtosys.com
20. 3. ADD CONTENT INTELLIGENTLY
CHARTS: DE-CLUTTER
• Do you really need all those axis
points, grid lines, and legends?
• Remove unnecessary items in
your chart for a cleaner look
• Always simplify and the
important data will shine through
www.kurtosys.com
21. 3. ADD CONTENT INTELLIGENTLY
CHARTS: NO CHART
• Consider not even using a chart
• If the data you show is relatively
simple, maybe some one stats or
a simple text and a visual icon
does a better job
• A table may demonstrate the
data more effectively
SOURCE: http://www.articulate.com
www.kurtosys.com
22. 3. ADD CONTENT INTELLIGENTLY
DATA TABLES: MESSAGE
1. Remember the message
your data table is trying to
get across — does the
table convey the key info?
2. If the table is a regular
monthly update then
consider highlighting the
column/row/data that you
want to draw attention to
www.kurtosys.com
23. 3. ADD CONTENT INTELLIGENTLY
DATA TABLES: COLUMNS
• Keep table columns to a
minimum
• Complex Excel data may not
translate well to a PDF or
web page—width is the
limitation in both cases
• Consider omitting columns
and using a summary
www.kurtosys.com
24. 3. ADD CONTENT INTELLIGENTLY
DATA TABLES: CONTRAST
• Contrast is a simple way to make
tabular info clearer to the reader
• Try alternating background tints in
rows and/or columns
• Apply stronger contrast to table
headers and footers
SOURCE: http://www.huidesign.com
www.kurtosys.com
25. 3. ADD CONTENT INTELLIGENTLY
DATA TABLES: FIGURES
• If your table contains numerical
data consider rounding the
numbers down to one or two
decimal places
• Shorter numbers are easier on the
eye and use less space
SOURCE: http://www.hotmath.com
www.kurtosys.com
26. 3. ADD CONTENT INTELLIGENTLY
DATA TABLES: FONTS
• Some fonts don’t display numbers
well with characters having varying
baseline settings (e.g. Georgia)
• Choose sensible typefaces for data
tables (within brand guidelines)
• Serif fonts often make table data
hard to read
www.kurtosys.com
27. 3. ADD CONTENT INTELLIGENTLY
DATA TABLES: CONSISTENCY
• Use style sheets in web or print
to maintain a brand-consistent
look and feel to your tables
• Adobe InDesign has great
controls for table styles and it
saves time — master these
www.kurtosys.com
28. DOWNLOAD THE COMPLETE
PDF WHITE PAPER
Design for Differentiation: The
Importance of Design in Asset
Management Marketing
DOWNLOAD
www.kurtosys.com