from

conceptconcept

to

completioncompletiontips for designing

great content

vicke cheung «««/ graphic designer, 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,0006,100566

thetrainline.com/tools/festival-finder

featured in

worldpayzinc.com/tech-wealth

featured in

7,9001,900359

from

conceptconcept

to

completioncompletiontips for designing

great content

- the -

processprocess

nailingnailing

part one

visualresearch

visualresearch

- 1 -

SPEND 15 MINUTESCOLLECTING VISUALS

SPEND 15 MINUTESCOLLECTING 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 withinitial research,

refine with analysis.

be broad withinitial research,

refine with analysis.

let related pins lend a helping hand

after researching,

you should end up with something like this…

now SPEND 15 MINUTESrefining & analysingnow SPEND 15 MINUTESrefining & analysing

COMMENT ON THE PINS

tell your designerwhat you want

as well as what youdon’t want

tell your designerwhat you want

as well as what youdon’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 -

- think about« -

any brand

restrictions?

- think about« -

any brand

restrictions?

where will

it live?

- think about« -

any brand

restrictions?

where will

it live?

responsive

layouts?

STREAMLINE YOURPROCESS BY SETTING UP

A BRIEFING TEMPLATE

STREAMLINE YOURPROCESS BY SETTING UP

A BRIEFING TEMPLATE

giving feedback

giving feedback

- 3 -

the dreaded

thread

so what do you think about v.2.3.1 i sent over...

i fed back inline a few days ago. didn't you see it...

...oh.

realtimeboard.com

IS THE ANSWER

4 steps torealtimeboard

4 steps torealtimeboard

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 foryourself -it’s free!

try it out foryourself -it’s free!

QUALITY ASSURANCEtesting

quality assurancetesting

- 4 -

something's broken...

has a client ever come back and said…

and you’re thinking…

but I checked itlike 10 times!

have thoroughbrowser and

platform testingin place

have thoroughbrowser and

platform testingin 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

t ypogr aphyt ypogr aphy

sad, but true.

where can I find good fonts?

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 notall free fonts youcan download aresuitable for web

be aware that notall free fonts youcan download aresuitable 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 3FUNNY BUSINESS: THE ROLE OF HUMOUR

BLATANTLY STAGEDSTOCK PHOTOGRAPHY

IS DISENGAGING

BLATANTLY STAGEDSTOCK PHOTOGRAPHY

IS DISENGAGING

AN ALTERNATIVE:

STOCKSY.COM

evidently stocksy is the better option here

zero budget?

try flickr via creative commons

search.creativecommons.org

iconsconsistencyis key

consistencyis 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

iconsENSURE CONSISTENCYBY CUSTOM DESIGNING

AS OPPOSED TODOWNLOADING

ensure consistencyby custom designing

as opposed todownloading

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 toachieve this

3 ways toachieve this

1. let the image speak for itself

2. crop to your advantage

3. ONE SIZE DOESN’T FIT ALL

- key takeaways -

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/8wvsPKshutterstock.comflic.kr/p/eZhYRUtypetoken.net/typeface/good-typography-is-invisibleflic.kr/p/bMqynV

TYPE SET IN AW conqueror & BLANCH.

223-25, 29, 38-39, 48-49, 57, 6646

4754