Art Direction Vs The Web : FOWD London 2012

  • 2,677 views
Uploaded on

Slides from my FOWD London 2012 presentation 'Art Direction Vs The Web'

Slides from my FOWD London 2012 presentation 'Art Direction Vs The Web'

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

Views

Total Views
2,677
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

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
  • Thank you :)\nTribal Group - Provide Services and Technology Solutions for Education\nStarted as UI Designer\nBring experience of web design to AD \n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • • Publishing of books, magazines and newspapers\n• Advertising and branding\n
  • \n\n
  • \n\n
  • Written content - editorial, instructional, marketing or reporting\nVisual content - photography, illustration or diagrams\nArt direction - a marriage of the two content types\n
  • Written content - editorial, instructional, marketing or reporting\nVisual content - photography, illustration or diagrams\nArt direction - a marriage of the two content types\n
  • \n\n
  • \n\n
  • \n\n
  • Leading image to set the scene\nHeadline and introductory paragraph\n2 columns per page\nA marriage of text and image, creating emphasis and storytelling\n
  • Software - browsers and operating systems\nHardware - screen size, devices\nUsers - accessibility, usability \nBandwidth and data\n
  • \n\n
  • \n\n
  • Images and server calls slow down the web experience\n
  • Daily Mail\nNews media on the web\nImage laden\n344 items being called from the server\n
  • \n\n
  • Peter Norvig - Research Director at Google\nWeb in one of its purest forms - simple portal\nHyperlinks in a table to various articles around the web\nAssumption that graphic design is simply pretty pictures\n
  • Rainfall Daffinson\nAlmost entirely typographical design, barely any images\nUsing light CSS, to provide a clear structure and organisation of content \n
  • • Personal blogs and portfolios\n• Author is both content creator and art director \n
  • Ver Ron Eek - Vee En : AD at Vogue and Elle magazine\nAD literally directs the audience's attention through information via its visual presentation \n
  • Metaphor of the Art Gallery space\nGoal is to produce a minimal, non- distracting space. \nAllow content (art) to become the focus\nRemove distracting ornament or decoration\n
  • Though can still guide audience through the space\nUsing navigation elements and signposting\nProviding detailed information to accompany the artwork\nExhibition can be setup in different buildings, though the experience will be consistent\n
  • Though can still guide audience through the space\nUsing navigation elements and signposting\nProviding detailed information to accompany the artwork\nExhibition can be setup in different buildings, though the experience will be consistent\n
  • Pinterest typifies this curation approach on the web\nThe focus is the content (and user generated content at that)\nThe overall design is stripped back and minimal\nThough clear navigational and informational elements remain\n
  • Vi - Erl Peters takes the pinterest model a step further\nAnd like the personal blog or portfolio adds her own art direction to each entry by picking out the dominant colour\nThis still relies on a certain level of personalised control\nThough across large numbers of products we need to provide clear guidance and art direction\n
  • Traditionally brand guidelines provide this guidance\nOffering guidance on use of the logo, colour palette, basic typography and content style\nSome offer templates for printed stationary\nUgly side effect can be the emergence of the Brand Police\n
  • Logo Usage\nFonts\nColour palette\nImagery\n
  • Logo Usage\nFonts\nColour palette\nImagery\n
  • Logo Usage\nFonts\nColour palette\nImagery\n
  • Logo Usage\nFonts\nColour palette\nImagery\n
  • Logo Usage\nFonts\nColour palette\nImagery\n
  • Generally Brand Guidelines neglect the web\nSo we began to look at some typographical rules on the web\nAnd basic UI layouts, though these are limited\nGenerally we're not creating pages, but applications with much more complex UIs\n
  • \n\n
  • \n\n
  • \n\n
  • Traditionally brand guidelines provide this guidance\nOffering guidance on use of the logo, colour palette, basic typography and content style\nSome offer templates for printed stationary\nUgly side effect can be the emergence of the Brand Police\n
  • Traditionally brand guidelines provide this guidance\nOffering guidance on use of the logo, colour palette, basic typography and content style\nSome offer templates for printed stationary\nUgly side effect can be the emergence of the Brand Police\n
  • \n\n
  • \n\n
  • Design sharing etiquette\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • DEFINE A VISION\nBE FLEXIBLE AND FLUID\nCONSISTENCY IN QUALITY, PERSONALITY AND EXPERIENCE\nSHARE ASSETS AND PATTERNS\nCURATE DON'T DICTATE\n
  • Thank you :)\nTribal Group - Provide Services and Technology Solutions for Education\nStarted as UI Designer\nBring experience of web design to AD \n

Transcript

  • 1. ARTDIRECTIONVS THE WEB@JAMESFENTON
  • 2. RE NT FE N IF O D EA LA N G RT CTION A E D IR
  • 3. HOVERINGARTDIRECTORS.TUMBLR.COM
  • 4. HOVERINGARTDIRECTORS.TUMBLR.COM
  • 5. HOVERINGARTDIRECTORS.TUMBLR.COM
  • 6. HOVERINGARTDIRECTORS.TUMBLR.COM
  • 7. HOVERINGARTDIRECTORS.TUMBLR.COM
  • 8. HOVERINGARTDIRECTORS.TUMBLR.COM
  • 9. WHAT ISARTDIRECTION?
  • 10. PRINT,PUBLISHINGANDTHE WEB
  • 11. WRITTENCONTENT INSTRUCTIONS MARKETING REPORTS STORIES
  • 12. VISUAL WRITTENCONTENT CONTENTPHOTOGRAPHY INSTRUCTIONSILLUSTRATION MARKETINGGRAPHICS REPORTS STORIES
  • 13. VISUAL ART WRITTENCONTENT DIRECTION CONTENTPHOTOGRAPHY INSTRUCTIONSILLUSTRATION MARKETINGGRAPHICS REPORTS STORIES
  • 14. AFAR MAGAZINE
  • 15. ARTDIRECTIONVS THE WEB
  • 16. AFAR.COM
  • 17. AFAR.COM (READER VIEW)
  • 18. GRAPHIC DESIGNERS“ ARE RUINING THE WEB JOHN NAUGHTON THE OBSERVER Sunday 19 February 2012
  • 19. DAILYMAIL.CO.UK
  • 20. COMPUTERARTS.CO.UK WALLPAPER.COM
  • 21. NORVIG.COM
  • 22. RAINFALL-DAFFINSON.COM
  • 23. “ The role of art direction is to literally direct attention, using art as an signpost to guide the audience and decipher the information Véronique Vienne ART DIRECTOR/ WRITER
  • 24. ART DIRECTION AS CURATION
  • 25. NAVIGATIONAND WAY FINDING
  • 26. NAVIGATIONAND WAY FINDING
  • 27. PINTEREST.COM
  • 28. VEERLE.DUOH.COM/INSPIRATION
  • 29. BRANDGUIDELINESASARTDIRECTION
  • 30. GOOGLE.COM/DOODLES
  • 31. GOOGLE.COM/DOODLES
  • 32. GENERATIVE LOGOS
  • 33. TRIBAL PRODUCT SUITE
  • 34. BRANDGUIDELINESANDTOOLKIT
  • 35. ICON LIBRARY
  • 36. IMAGE SPRITES Phone Notepad Chat Home WWW Home link WWW link Home hov.. WWW hov.. Phone L Mobile Photo Settings Refresh Comment UP DWN Search Broadcast.. Unlock Lock Phone ho..
  • 37. DESIGN ETIQUETTE
  • 38. UI PATTERNS
  • 39. CODE SNIPPETS
  • 40. CODE SNIPPETS
  • 41. CODE SNIPPETS
  • 42. CODE SNIPPETS
  • 43. TRIBAL DESIGN PRINCIPLES
  • 44. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE
  • 45. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE BE FLEXIBLE AND READY TO
  • 46. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE BE FLEXIBLE AND READY TO3 QUALITY OF EXPERIENCE AIM FOR CONSISTENCY IN THE
  • 47. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE BE FLEXIBLE AND READY TO3 QUALITY OF EXPERIENCE AIM FOR CONSISTENCY IN THE4 AND IDEAS SHARE ASSETS, PATTERNS
  • 48. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE BE FLEXIBLE AND READY TO3 QUALITY OF EXPERIENCE AIM FOR CONSISTENCY IN THE4 AND IDEAS SHARE ASSETS, PATTERNS5 CURATE THE BRAND, DONT DICTATE IT! DEMOCRATISE THE DESIGN PROCESS.
  • 49. ARTDIRECTIONVS THE WEB@JAMESFENTON