from conceptconcept to completioncompletion tips
for designing great content vickecheung«||/graphicdesigner,Distilled/@vickekaravan

people like to joke about
what graphic designers do

This is more like what
we actually do

www.concerthotels.com
/100-years-of-rock
90,000
6,100
566

thetrainline.com
/tools/festival-finder
featuredin

worldpayzinc.com /tech-wealth featuredin 7,900 1,900
359

from conceptconcept to completioncompletion tips
for designing great content

-the-
processprocess
nailingnailing
part one

visual
research
visual
research
-1-

SPEND 15 MINUTES COLLECTING VISUALS
SPEND 15 MINUTES COLLECTING VISUALS

google images isn’t the right
place to look

instead check out these PATTERNTAP.COMBEHANCE.NET
DRIBBBLE.COM

use pinterest to create moodboards

install their browser tools
about.pinterest.com/goodies

be broad with initial research,
refine with analysis. be broad with initial research, refine with analysis.

let related pins lend a
helping hand

after researching, you should end
up with something like this…

now SPEND 15 MINUTES refining
& analysing now SPEND 15 MINUTES refining & analysing

COMMENT ON THE PINS

tell your designer what you
want as well as what you don’t want tell your designer what you want as well as what you don’t want

a good example of thorough
research & analysis

create shared boards for more
input

the design brief (...in brief)
the design brief (...in brief) -2-

-thinkabout…-
any brand
restrictions?

-thinkabout…- any brand restrictions? where
will it live?

-thinkabout…- any brand restrictions? where
will it live? responsive layouts?

STREAMLINE YOUR PROCESS BY SETTING
UP A BRIEFING TEMPLATE STREAMLINE YOUR PROCESS BY SETTING UP A BRIEFING TEMPLATE

giving
feedback
giving
feedback
-3-

the dreaded
thread

sowhatdoyouthinkaboutv.2.3.1
isentover...
ifedbackinlineafewdaysago.
didn'tyouseeit...
...oh.

realtimeboard.com
IS THE ANSWER

4 steps to realtimeboard 4
steps to realtimeboard the distilled way

1 create new boards per
project

2 keep everyone in the
loop

3 Upload visuals at each
stage

4 Make good use of
the comment tool

try it out for yourself
- it’s free! try it out for yourself - it’s free!

QUALITY ASSURANCE testing quality assurance
testing -4-

something'sbroken... has a client ever
come back and said…

and you’re thinking…
butIcheckedit
like10times!

have thorough browser and platform
testing in place have thorough browser and platform testing in place

for comprehensive testing:
browserstack.com

for simple responsive testing:
responsinator.com

for simple responsive testing:
responsinator.com

-recap- 1. Get involved in
research 2. use pinterest 3. feedback with realtimeboard 4. test thoroughly

-on-
designdesign
tipstips
part two

typographytypography

sad, but true.

wherecanIfindgoodfonts?

invest in good web fonts
£ AAzz

consider a typekit.com subscription

quality web fonts… for about
the price of a coffee each month

be aware that not all
free fonts you can download are suitable for web be aware that not all free fonts you can download are suitable for web

for free web fonts stick
with these google.com/fonts fontsquirrel.com

imagesimages

the trend of using big,
photographic images is still going strong

they complement the chapters of
this guide

this doesn’t work at all
Chapter 3 FUNNY BUSINESS: THE ROLE OF HUMOUR

BLATANTLY STAGED STOCK PHOTOGRAPHY IS
DISENGAGING BLATANTLY STAGED STOCK PHOTOGRAPHY IS DISENGAGING

AN ALTERNATIVE:
STOCKSY.COM

evidently stocksy is the better
option here

zero budget? try flickr via
creative commons search.creativecommons.org

iconsconsistency is key consistency is
key

google sets a great example
with its visual asset guidelines behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077

e.g. a whole section on
using shadows

icons ENSURE CONSISTENCY BY CUSTOM
DESIGNING AS OPPOSED TO DOWNLOADING ensure consistency by custom designing as opposed to downloading

social imagessocial images

THESE VISUALS MIGHT BE SOMEONE’S
FIRST POINT OF CONTACT WITH THE PIECE

they have to pack a
punch and be executed well

3 ways to achieve this
3 ways to achieve this

1. let the image speak
for itself 2. crop to your advantage 3. ONE SIZE DOESN’T FIT ALL

-keytakeaways- show off with social
images give typekit a go don’t settle for ‘really-stock’ stock photos

thank youthank you vicke cheung
vicke.cheung @ distilled.net @vickekaravan

image credits flic.kr/p/8wvsPK shutterstock.com flic.kr/p/eZhYRU
typetoken.net/typeface/ good-typography-is-invisible flic.kr/p/bMqynV TYPESETINAWconqueror&BLANCH. 2 23-25,29,38-39,48-49,57,66 46 47 54