ARTDIRECTIONVS THE WEB@JAMESFENTON
RE NT      FE N    IF O  D EA     LA N G  RT CTION A E D IR
HOVERINGARTDIRECTORS.TUMBLR.COM
HOVERINGARTDIRECTORS.TUMBLR.COM
HOVERINGARTDIRECTORS.TUMBLR.COM
HOVERINGARTDIRECTORS.TUMBLR.COM
HOVERINGARTDIRECTORS.TUMBLR.COM
HOVERINGARTDIRECTORS.TUMBLR.COM
WHAT ISARTDIRECTION?
PRINT,PUBLISHINGANDTHE WEB
WRITTENCONTENT INSTRUCTIONS    MARKETING      REPORTS       STORIES
VISUAL         WRITTENCONTENT        CONTENTPHOTOGRAPHY     INSTRUCTIONSILLUSTRATION       MARKETINGGRAPHICS             R...
VISUAL     ART      WRITTENCONTENT DIRECTION   CONTENTPHOTOGRAPHY          INSTRUCTIONSILLUSTRATION            MARKETINGGR...
AFAR MAGAZINE
ARTDIRECTIONVS THE WEB
AFAR.COM
AFAR.COM (READER VIEW)
GRAPHIC    DESIGNERS“   ARE RUINING THE WEB              JOHN NAUGHTON               THE OBSERVER               Sunday 19 ...
DAILYMAIL.CO.UK
COMPUTERARTS.CO.UK   WALLPAPER.COM
NORVIG.COM
RAINFALL-DAFFINSON.COM
“    The role of art direction is    to literally direct attention,    using art as an signpost    to guide the audience a...
ART DIRECTION    AS CURATION
NAVIGATIONAND WAY FINDING
NAVIGATIONAND WAY FINDING
PINTEREST.COM
VEERLE.DUOH.COM/INSPIRATION
BRANDGUIDELINESASARTDIRECTION
GOOGLE.COM/DOODLES
GOOGLE.COM/DOODLES
GENERATIVE LOGOS
TRIBAL PRODUCT SUITE
BRANDGUIDELINESANDTOOLKIT
ICON LIBRARY
IMAGE SPRITES      Phone      Notepad     Chat     Home     WWW     Home link     WWW link     Home hov..     WWW hov..   ...
DESIGN ETIQUETTE
UI PATTERNS
CODE SNIPPETS
CODE SNIPPETS
CODE SNIPPETS
CODE SNIPPETS
TRIBAL DESIGN PRINCIPLES
TRIBAL DESIGN PRINCIPLES1   DEFINE A VISION, THROUGH A    CLEAR BRIEF AND GUIDANCE
TRIBAL DESIGN PRINCIPLES1  DEFINE A VISION, THROUGH A   CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE  BE FLEXIBLE AND READY TO
TRIBAL DESIGN PRINCIPLES1  DEFINE A VISION, THROUGH A   CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE  BE FLEXIBLE AND READY TO...
TRIBAL DESIGN PRINCIPLES1  DEFINE A VISION, THROUGH A   CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE  BE FLEXIBLE AND READY TO...
TRIBAL DESIGN PRINCIPLES1  DEFINE A VISION, THROUGH A   CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE  BE FLEXIBLE AND READY TO...
ARTDIRECTIONVS THE WEB@JAMESFENTON
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Art Direction Vs The Web : FOWD London 2012
Upcoming SlideShare
Loading in...5
×

Art Direction Vs The Web : FOWD London 2012

2,807

Published on

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

Published in: Design, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,807
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

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 of "Art Direction Vs The Web : FOWD London 2012"

    1. 1. ARTDIRECTIONVS THE WEB@JAMESFENTON
    2. 2. RE NT FE N IF O D EA LA N G RT CTION A E D IR
    3. 3. HOVERINGARTDIRECTORS.TUMBLR.COM
    4. 4. HOVERINGARTDIRECTORS.TUMBLR.COM
    5. 5. HOVERINGARTDIRECTORS.TUMBLR.COM
    6. 6. HOVERINGARTDIRECTORS.TUMBLR.COM
    7. 7. HOVERINGARTDIRECTORS.TUMBLR.COM
    8. 8. HOVERINGARTDIRECTORS.TUMBLR.COM
    9. 9. WHAT ISARTDIRECTION?
    10. 10. PRINT,PUBLISHINGANDTHE WEB
    11. 11. WRITTENCONTENT INSTRUCTIONS MARKETING REPORTS STORIES
    12. 12. VISUAL WRITTENCONTENT CONTENTPHOTOGRAPHY INSTRUCTIONSILLUSTRATION MARKETINGGRAPHICS REPORTS STORIES
    13. 13. VISUAL ART WRITTENCONTENT DIRECTION CONTENTPHOTOGRAPHY INSTRUCTIONSILLUSTRATION MARKETINGGRAPHICS REPORTS STORIES
    14. 14. AFAR MAGAZINE
    15. 15. ARTDIRECTIONVS THE WEB
    16. 16. AFAR.COM
    17. 17. AFAR.COM (READER VIEW)
    18. 18. GRAPHIC DESIGNERS“ ARE RUINING THE WEB JOHN NAUGHTON THE OBSERVER Sunday 19 February 2012
    19. 19. DAILYMAIL.CO.UK
    20. 20. COMPUTERARTS.CO.UK WALLPAPER.COM
    21. 21. NORVIG.COM
    22. 22. RAINFALL-DAFFINSON.COM
    23. 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. 24. ART DIRECTION AS CURATION
    25. 25. NAVIGATIONAND WAY FINDING
    26. 26. NAVIGATIONAND WAY FINDING
    27. 27. PINTEREST.COM
    28. 28. VEERLE.DUOH.COM/INSPIRATION
    29. 29. BRANDGUIDELINESASARTDIRECTION
    30. 30. GOOGLE.COM/DOODLES
    31. 31. GOOGLE.COM/DOODLES
    32. 32. GENERATIVE LOGOS
    33. 33. TRIBAL PRODUCT SUITE
    34. 34. BRANDGUIDELINESANDTOOLKIT
    35. 35. ICON LIBRARY
    36. 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. 37. DESIGN ETIQUETTE
    38. 38. UI PATTERNS
    39. 39. CODE SNIPPETS
    40. 40. CODE SNIPPETS
    41. 41. CODE SNIPPETS
    42. 42. CODE SNIPPETS
    43. 43. TRIBAL DESIGN PRINCIPLES
    44. 44. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE
    45. 45. TRIBAL DESIGN PRINCIPLES1 DEFINE A VISION, THROUGH A CLEAR BRIEF AND GUIDANCE2 EMBRACE CHANGE BE FLEXIBLE AND READY TO
    46. 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. 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. 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. 49. ARTDIRECTIONVS THE WEB@JAMESFENTON

    ×