From Concept to Completion: Tips for Designing Great Content
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

From Concept to Completion: Tips for Designing Great Content

  • 17,641 views
Uploaded on

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......

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
17,641
On Slideshare
13,723
From Embeds
3,918
Number of Embeds
56

Actions

Shares
Downloads
806
Comments
8
Likes
431

Embeds 3,918

http://heartrobot.org.uk 1,660
https://twitter.com 410
http://www.seo-girl.co.uk 400
http://dialoegue.com 315
http://www.scoop.it 314
http://www.boom-online.co.uk 148
http://www.headred.net 123
http://community.dpgplc.co.uk 103
http://www.conseilsmarketing.com 84
https://realtimeboard.com 67
http://cathyma.com 49
http://newrisedigital.com 43
http://dealroom.loc 26
http://inbound.org 17
http://olgaabanto.milaulas.com 15
http://www.google.com 12
http://carolasanche.milaulas.com 11
http://www.wetradetogether.com 10
http://leoeningles.blogspot.com.es 10
http://www.paperblog.fr 10
http://list.ly 10
http://honeypresentations.blogspot.com 7
http://www.wefundtogether.com 7
https://www.linkedin.com 6
http://plus.url.google.com 6
http://htmlcomponentservice.appspot.com 5
http://know-how.synyodev.com 4
http://wayneb77.tumblr.com 4
http://www.tumblr.com 3
http://www.newsblur.com 2
http://www.slidesharenet.org 2
http://blog.list.ly 2
http://website.linkbuilding.co 2
http://feeds.feedburner.com 2
http://jvvildoso.milaulas.com 2
http://cipasdutaro2.wikispaces.com 2
https://www.facebook.com 2
http://assets.txmblr.com 2
http://feedly.com 2
http://jarkkomies.tumblr.com 2
http://translate.googleusercontent.com 2
http://www.slideee.com 1
http://news.google.com 1
http://realtimeboard.com 1
http://sco.lt 1
http://www.pinterest.com 1
https://storify.com 1
http://localhost 1
http://www.linkedin.com 1
https://home.jolicloud.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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