Top Banner
from concept concept to completion completion tips for designing great content vicke cheung «/ graphic designer, Distilled / @vickekaravan
74

From Concept to Completion: Tips for Designing Great Content

Aug 11, 2014

Download

Design

Vicke Cheung

Presentation for BrightonSEO with tips on designing great pieces of content from a designer's perspective. This covers the stages of the creative process and gives an overview on key design elements, along with actionable tips throughout.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: From Concept to Completion: Tips for Designing Great Content

from

conceptconcept

to

completioncompletiontips for designing

great content

vicke cheung «««/ graphic designer, Distilled / @vickekaravan

Page 2: From Concept to Completion: Tips for Designing Great Content

people like to

joke about what

graphic designers do

Page 3: From Concept to Completion: Tips for Designing Great Content

This is more like

what we actually do

Page 4: From Concept to Completion: Tips for Designing Great Content

www.concerthotels.com/100-years-of-rock

90,0006,100566

Page 5: From Concept to Completion: Tips for Designing Great Content

thetrainline.com/tools/festival-finder

featured in

Page 6: From Concept to Completion: Tips for Designing Great Content

worldpayzinc.com/tech-wealth

featured in

7,9001,900359

Page 7: From Concept to Completion: Tips for Designing Great Content

from

conceptconcept

to

completioncompletiontips for designing

great content

Page 8: From Concept to Completion: Tips for Designing Great Content

- the -

processprocess

nailingnailing

part one

Page 9: From Concept to Completion: Tips for Designing Great Content

visualresearch

visualresearch

- 1 -

Page 10: From Concept to Completion: Tips for Designing Great Content

SPEND 15 MINUTESCOLLECTING VISUALS

SPEND 15 MINUTESCOLLECTING VISUALS

Page 11: From Concept to Completion: Tips for Designing Great Content

google images isn’t the right place to look

Page 12: From Concept to Completion: Tips for Designing Great Content

instead check out these

PATTERNTAP.COMBEHANCE.NET DRIBBBLE.COM

Page 13: From Concept to Completion: Tips for Designing Great Content

use pinterest to create moodboards

Page 14: From Concept to Completion: Tips for Designing Great Content

install their browser tools

about.pinterest.com/goodies

Page 15: From Concept to Completion: Tips for Designing Great Content

be broad withinitial research,

refine with analysis.

be broad withinitial research,

refine with analysis.

Page 16: From Concept to Completion: Tips for Designing Great Content

let related pins lend a helping hand

Page 17: From Concept to Completion: Tips for Designing Great Content

after researching,

you should end up with something like this…

Page 18: From Concept to Completion: Tips for Designing Great Content

now SPEND 15 MINUTESrefining & analysingnow SPEND 15 MINUTESrefining & analysing

Page 19: From Concept to Completion: Tips for Designing Great Content

COMMENT ON THE PINS

Page 20: From Concept to Completion: Tips for Designing Great Content

tell your designerwhat you want

as well as what youdon’t want

tell your designerwhat you want

as well as what youdon’t want

Page 21: From Concept to Completion: Tips for Designing Great Content

a good example of thorough research & analysis

Page 22: From Concept to Completion: Tips for Designing Great Content

create shared boards for more input

Page 23: From Concept to Completion: Tips for Designing Great Content

the design brief(...in brief)

the design brief(...in brief)

- 2 -

Page 24: From Concept to Completion: Tips for Designing Great Content

- think about« -

any brand

restrictions?

Page 25: From Concept to Completion: Tips for Designing Great Content

- think about« -

any brand

restrictions?

where will

it live?

Page 26: From Concept to Completion: Tips for Designing Great Content

- think about« -

any brand

restrictions?

where will

it live?

responsive

layouts?

Page 27: From Concept to Completion: Tips for Designing Great Content

STREAMLINE YOURPROCESS BY SETTING UP

A BRIEFING TEMPLATE

STREAMLINE YOURPROCESS BY SETTING UP

A BRIEFING TEMPLATE

Page 28: From Concept to Completion: Tips for Designing Great Content

giving feedback

giving feedback

- 3 -

Page 29: From Concept to Completion: Tips for Designing Great Content

the dreaded

thread

Page 30: From Concept to Completion: Tips for Designing Great Content

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.

Page 31: From Concept to Completion: Tips for Designing Great Content

realtimeboard.com

IS THE ANSWER

Page 32: From Concept to Completion: Tips for Designing Great Content

4 steps torealtimeboard

4 steps torealtimeboard

the distilled way

Page 33: From Concept to Completion: Tips for Designing Great Content

1

create new boards per project

Page 34: From Concept to Completion: Tips for Designing Great Content

2

keep everyone in the loop

Page 35: From Concept to Completion: Tips for Designing Great Content

3

Upload visuals at each stage

Page 36: From Concept to Completion: Tips for Designing Great Content

4

Make good use of the comment tool

Page 37: From Concept to Completion: Tips for Designing Great Content

try it out foryourself -it’s free!

try it out foryourself -it’s free!

Page 38: From Concept to Completion: Tips for Designing Great Content

QUALITY ASSURANCEtesting

quality assurancetesting

- 4 -

Page 39: From Concept to Completion: Tips for Designing Great Content

something's broken...

has a client ever come back and said…

Page 40: From Concept to Completion: Tips for Designing Great Content

and you’re thinking…

but I checked itlike 10 times!

Page 41: From Concept to Completion: Tips for Designing Great Content

have thoroughbrowser and

platform testingin place

have thoroughbrowser and

platform testingin place

Page 42: From Concept to Completion: Tips for Designing Great Content

for comprehensive testing:

browserstack.com

Page 43: From Concept to Completion: Tips for Designing Great Content

for simple responsive testing:

responsinator.com

Page 44: From Concept to Completion: Tips for Designing Great Content

for simple responsive testing:

responsinator.com

Page 45: From Concept to Completion: Tips for Designing Great Content

- recap -

1. Get involved in research

2. use pinterest

3. feedback with realtimeboard

4. test thoroughly

Page 46: From Concept to Completion: Tips for Designing Great Content

- on -

designdesign

tipstips

part two

Page 47: From Concept to Completion: Tips for Designing Great Content

t ypogr aphyt ypogr aphy

Page 48: From Concept to Completion: Tips for Designing Great Content

sad, but true.

Page 49: From Concept to Completion: Tips for Designing Great Content

where can I find good fonts?

Page 50: From Concept to Completion: Tips for Designing Great Content

invest in good

web fonts

£

AAzz

Page 51: From Concept to Completion: Tips for Designing Great Content

consider a typekit.com subscription

Page 52: From Concept to Completion: Tips for Designing Great Content

quality web fonts…

for about the price of a coffee each month

Page 53: From Concept to Completion: Tips for Designing Great Content

be aware that notall free fonts youcan download aresuitable for web

be aware that notall free fonts youcan download aresuitable for web

Page 54: From Concept to Completion: Tips for Designing Great Content

for free web fonts stick with these

google.com/fonts fontsquirrel.com

Page 55: From Concept to Completion: Tips for Designing Great Content

imagesimages

Page 56: From Concept to Completion: Tips for Designing Great Content

the trend of using big, photographic images

is still going strong

Page 57: From Concept to Completion: Tips for Designing Great Content

they complement the chapters of this guide

Page 58: From Concept to Completion: Tips for Designing Great Content

this doesn’t work at all

Chapter 3FUNNY BUSINESS: THE ROLE OF HUMOUR

Page 59: From Concept to Completion: Tips for Designing Great Content

BLATANTLY STAGEDSTOCK PHOTOGRAPHY

IS DISENGAGING

BLATANTLY STAGEDSTOCK PHOTOGRAPHY

IS DISENGAGING

Page 60: From Concept to Completion: Tips for Designing Great Content

AN ALTERNATIVE:

STOCKSY.COM

Page 61: From Concept to Completion: Tips for Designing Great Content

evidently stocksy is the better option here

Page 62: From Concept to Completion: Tips for Designing Great Content

zero budget?

try flickr via creative commons

search.creativecommons.org

Page 63: From Concept to Completion: Tips for Designing Great Content

iconsconsistencyis key

consistencyis key

Page 64: From Concept to Completion: Tips for Designing Great Content

google sets a great example

with its visual asset guidelines

behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077

Page 65: From Concept to Completion: Tips for Designing Great Content

e.g.

a whole section

on using shadows

Page 66: From Concept to Completion: Tips for Designing Great Content

iconsENSURE CONSISTENCYBY CUSTOM DESIGNING

AS OPPOSED TODOWNLOADING

ensure consistencyby custom designing

as opposed todownloading

Page 67: From Concept to Completion: Tips for Designing Great Content

social imagessocial images

Page 68: From Concept to Completion: Tips for Designing Great Content

THESE VISUALS MIGHT BE SOMEONE’S FIRST

POINT OF CONTACT WITH THE PIECE

Page 69: From Concept to Completion: Tips for Designing Great Content

they have to pack a punch

and be executed well

Page 70: From Concept to Completion: Tips for Designing Great Content

3 ways toachieve this

3 ways toachieve this

Page 71: From Concept to Completion: Tips for Designing Great Content

1. let the image speak for itself

2. crop to your advantage

3. ONE SIZE DOESN’T FIT ALL

Page 72: From Concept to Completion: Tips for Designing Great Content

- key takeaways -

show off

with social

images

give

typekit

a go

don’t settle

for ‘really-stock’

stock photos

Page 73: From Concept to Completion: Tips for Designing Great Content

thank youthank you

vicke cheung

vicke.cheung @ distilled.net

@vickekaravan

Page 74: From Concept to Completion: Tips for Designing Great Content

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