26. “
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
46. 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..
55. TRIBAL DESIGN PRINCIPLES
1 DEFINE A VISION, THROUGH A
CLEAR BRIEF AND GUIDANCE
2 EMBRACE CHANGE
BE FLEXIBLE AND READY TO
56. TRIBAL DESIGN PRINCIPLES
1 DEFINE A VISION, THROUGH A
CLEAR BRIEF AND GUIDANCE
2 EMBRACE CHANGE
BE FLEXIBLE AND READY TO
3 QUALITY OF EXPERIENCE
AIM FOR CONSISTENCY IN THE
57. TRIBAL DESIGN PRINCIPLES
1 DEFINE A VISION, THROUGH A
CLEAR BRIEF AND GUIDANCE
2 EMBRACE CHANGE
BE FLEXIBLE AND READY TO
3 QUALITY OF EXPERIENCE
AIM FOR CONSISTENCY IN THE
4 AND IDEAS
SHARE ASSETS, PATTERNS
58. TRIBAL DESIGN PRINCIPLES
1 DEFINE A VISION, THROUGH A
CLEAR BRIEF AND GUIDANCE
2 EMBRACE CHANGE
BE FLEXIBLE AND READY TO
3 QUALITY OF EXPERIENCE
AIM FOR CONSISTENCY IN THE
4 AND IDEAS
SHARE ASSETS, PATTERNS
5 CURATE THE BRAND, DON'T DICTATE IT!
DEMOCRATISE THE DESIGN PROCESS.
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
