DESIGN FOR DIFFERENTIATION:
THE IMPORTANCE OF DESIGN IN ASSET MANAGEMENT MARKETING
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.
BUILD YOUR BRAND VISUALLY
www.kurtosys.com
• 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.
1. GET THE BASICS RIGHT
COLOR: BRANDING
www.kurtosys.com
• 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
1. GET THE BASICS RIGHT
COLOR: USE TOOLS
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
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
CMYK: C = 69% M = 14% Y = 0% K = 0% RGB: R = 41 G = 171 B = 226 Web: #20adda
CMYK: C = 84% M = 9% Y = 99% K = 1% RGB: R = 6 G = 161 B = 75 Web: #189b4d
CMYK: C = 1% M = 98% Y = 97% K = 0% RGB: R = 234 G = 34 B = 39 Web: #e8232a
www.kurtosys.com
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
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
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
1 2
3
www.kurtosys.com
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Design for Differentiation: The Importance of Design in Asset Management Marketing
DOWNLOAD THE COMPLETE
PDF WHITE PAPER
www.kurtosys.com
DOWNLOAD