Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
from conceptconcept to completioncompletion tips for designing great content vickecheung«||/graphicdesigner,Distilled/@vic...
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...
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 a...
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/90...
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 t...
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...
Prochain SlideShare
Chargement dans…5
×

From Concept to Completion: Tips for Designing Great Content

62 613 vues

Publié le

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.

Publié dans : Design, Technologie
no profile picture user

  • Identifiez-vous pour voir les commentaires

Voir plus

From Concept to Completion: Tips for Designing Great Content

  1. from conceptconcept to completioncompletion tips for designing great content vickecheung«||/graphicdesigner,Distilled/@vickekaravan
  2. people like to joke about what graphic designers do
  3. This is more like what we actually do
  4. www.concerthotels.com /100-years-of-rock 90,000 6,100 566
  5. thetrainline.com /tools/festival-finder featuredin
  6. worldpayzinc.com /tech-wealth featuredin 7,900 1,900 359
  7. from conceptconcept to completioncompletion tips for designing great content
  8. -the- processprocess nailingnailing part one
  9. visual research visual research -1-
  10. SPEND 15 MINUTES COLLECTING VISUALS SPEND 15 MINUTES COLLECTING VISUALS
  11. google images isn’t the right place to look
  12. instead check out these PATTERNTAP.COMBEHANCE.NET DRIBBBLE.COM
  13. use pinterest to create moodboards
  14. install their browser tools about.pinterest.com/goodies
  15. be broad with initial research, refine with analysis. be broad with initial research, refine with analysis.
  16. let related pins lend a helping hand
  17. after researching, you should end up with something like this…
  18. now SPEND 15 MINUTES refining & analysing now SPEND 15 MINUTES refining & analysing
  19. COMMENT ON THE PINS
  20. 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
  21. a good example of thorough research & analysis
  22. create shared boards for more input
  23. the design brief (...in brief) the design brief (...in brief) -2-
  24. -thinkabout…- any brand restrictions?
  25. -thinkabout…- any brand restrictions? where will it live?
  26. -thinkabout…- any brand restrictions? where will it live? responsive layouts?
  27. STREAMLINE YOUR PROCESS BY SETTING UP A BRIEFING TEMPLATE STREAMLINE YOUR PROCESS BY SETTING UP A BRIEFING TEMPLATE
  28. giving feedback giving feedback -3-
  29. the dreaded thread
  30. sowhatdoyouthinkaboutv.2.3.1 isentover... ifedbackinlineafewdaysago. didn'tyouseeit... ...oh.
  31. realtimeboard.com IS THE ANSWER
  32. 4 steps to realtimeboard 4 steps to realtimeboard the distilled way
  33. 1 create new boards per project
  34. 2 keep everyone in the loop
  35. 3 Upload visuals at each stage
  36. 4 Make good use of the comment tool
  37. try it out for yourself - it’s free! try it out for yourself - it’s free!
  38. QUALITY ASSURANCE testing quality assurance testing -4-
  39. something'sbroken... has a client ever come back and said…
  40. and you’re thinking… butIcheckedit like10times!
  41. have thorough browser and platform testing in place have thorough browser and platform testing in place
  42. for comprehensive testing: browserstack.com
  43. for simple responsive testing: responsinator.com
  44. for simple responsive testing: responsinator.com
  45. -recap- 1. Get involved in research 2. use pinterest 3. feedback with realtimeboard 4. test thoroughly
  46. -on- designdesign tipstips part two
  47. typographytypography
  48. sad, but true.
  49. wherecanIfindgoodfonts?
  50. invest in good web fonts £ AAzz
  51. consider a typekit.com subscription
  52. quality web fonts… for about the price of a coffee each month
  53. 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
  54. for free web fonts stick with these google.com/fonts fontsquirrel.com
  55. imagesimages
  56. the trend of using big, photographic images is still going strong
  57. they complement the chapters of this guide
  58. this doesn’t work at all Chapter 3 FUNNY BUSINESS: THE ROLE OF HUMOUR
  59. BLATANTLY STAGED STOCK PHOTOGRAPHY IS DISENGAGING BLATANTLY STAGED STOCK PHOTOGRAPHY IS DISENGAGING
  60. AN ALTERNATIVE: STOCKSY.COM
  61. evidently stocksy is the better option here
  62. zero budget? try flickr via creative commons search.creativecommons.org
  63. iconsconsistency is key consistency is key
  64. google sets a great example with its visual asset guidelines behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
  65. e.g. a whole section on using shadows
  66. icons ENSURE CONSISTENCY BY CUSTOM DESIGNING AS OPPOSED TO DOWNLOADING ensure consistency by custom designing as opposed to downloading
  67. social imagessocial images
  68. THESE VISUALS MIGHT BE SOMEONE’S FIRST POINT OF CONTACT WITH THE PIECE
  69. they have to pack a punch and be executed well
  70. 3 ways to achieve this 3 ways to achieve this
  71. 1. let the image speak for itself 2. crop to your advantage 3. ONE SIZE DOESN’T FIT ALL
  72. -keytakeaways- show off with social images give typekit a go don’t settle for ‘really-stock’ stock photos
  73. thank youthank you vicke cheung vicke.cheung @ distilled.net @vickekaravan
  74. 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

×