From Concept to Completion: Tips for Designing Great Content

Embed Size (px)

DESCRIPTION

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.

Text of From Concept to Completion: Tips for Designing Great Content

  • 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 isnt 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 dont want tell your designer what you want as well as what you dont 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 - its free! try it out for yourself - its free!
  • QUALITY ASSURANCE testing quality assurance testing -4-
  • something'sbroken... has a client ever come back and said
  • and youre 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 doesnt 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 SOMEONES 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 DOESNT FIT ALL
  • -keytakeaways- show off with social images give typekit a go dont 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