PRACTICES stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell Content SCS6079 Digital Practices MA Digital Media & Society DIGITAL → eyelearn.org/workshops/digital-practices2020 Planning for structure and design

DIGITAL PRACTICES THIS WEEK. from content to IA from IA to site map & navigation planning for good IA content structure — brand design — colour / type design considerations design for web — from mind map to content — theme settings workshop: brainstorming mind mapping ideas TEXT

DIGITAL PRACTICES SITE PLANNING stairwell where next? easy to use legibility clearly structured content consistency fitting language/tone clear hierarchy Content in hand Final goal

DIGITAL PRACTICES BRAINSTORMING / MIND MAPPING / STRUCTURE PLANNING word clouds fun ˛ȁȓɭ food friends LEARN BOOKS Brainstorming… Content audit

DIGITAL PRACTICES INFORMATION ARCHITECTURE | NAVIGATION stairwell stairwell castle towers stairwell castle towers stairwell stairwell stairwell stairwell PHOTOS stairwell where next? stairwell where next? TEXT content collected organised organically ˛ȁƛɭǟșɭȩȓƛȩɝƈƛɝࠋ ȁȩDŽǟžőȁőɻɻǖƛɻǟȓƛȩǁɓɝȩƈʒžɻǟȩș ˛ȁƛɭɝƛʯǟƛʳƛƈउƛƈǟɻƛƈࠋ ɭȩȁǟƈuɻȩŵƛžȩș˛ɝȓƛƈ uǟșǁȩɝȓɭɻǖƛɭǟɻƛɭɻɝʒžɻʒɝƛࠋ ɭǟɻƛȓőɓʳǟȁȁDŽʒǟƈƛÿuƈƛɭǟDŽș ȩɝDŽőșǟɭƛƈǁȩɝʒɭƛɝɭउǟșžȩșɻƛʻɻ ǟșǁȩɝȓƛƈŵʼuࠋɻȩƛɭɻőŵȁǟɭǖșőʯ content structured organising labelling indexing IA connecting guiding linking UI site map

DIGITAL PRACTICES THINKING METHOD SIX THINKING HATS lateral thinking method by Dr. Edward de Bono The White Hat calls for information known or needed. "The facts, just the facts." The Yellow Hat symbolizes brightness and optimism. Under this hat you explore the ɓȩɭǟɻǟʯƛɭőșƈɓɝȩŵƛǁȩɝʯőȁʒƛőșƈŵƛșƛ˛ɻࠑ The Black Hat is judgment - the devil's advocate or why something may not work. Spot the ƈǟǁ˛žʒȁɻǟƛɭőșƈƈőșDŽƛɝɭࠖʳǖƛɝƛɻǖǟșDŽɭȓǟDŽǖɻDŽȩ wrong. Probably the most powerful and useful of the Hats but a problem if overused. The Red HatɭǟDŽșǟ˛ƛɭǁƛƛȁǟșDŽɭࠋǖʒșžǖƛɭőșƈ ǟșɻʒǟɻǟȩșࠑğǖƛșʒɭǟșDŽɻǖǟɭǖőɻʼȩʒžőșƛʻɓɝƛɭɭ ƛȓȩɻǟȩșɭőșƈǁƛƛȁǟșDŽɭőșƈɭǖőɝƛǁƛőɝɭࠋȁǟǻƛɭࠋ ƈǟɭȁǟǻƛɭࠋȁȩʯƛɭࠋőșƈǖőɻƛɭࠑ The Green Hat focuses on creativity; the possibilities, alternatives, and new ideas. It's an opportunity to express new concepts and new perceptions. The Blue Hat is used to manage the thinking process. It's the control mechanism that ensures the Six Thinking Hats® guidelines are observed. Dr. Edward de Bono, 1985 [ISBN 0-316-17831-4] [The De Bono Group LLC | debonogroup.com]

DIGITAL PRACTICES CONTENT AUDIT: SIX THINKING HAT APPROACH Which elements would you like to include? Which aspects are you worried about? Review list of all ‘nice-to-have’ elements. Reminder: who is your site for? What is the given content? Will your content meet expectations? Does your site provide useful information? Check against list of all ‘must-have’ elements. What could your site achieve? How could your site evolve after launch? How can you make your site stand out? What unique approach can your site take? Which content elements warrant special treatment / presentation? Are you keeping your focus on your target group? Is the project on track? All content spell-checked and proof-read? Content review, going by summative checklist What can go wrong? What are the upcoming challenges? Is any part of planned content weak or in need of improvement? Perform site tests + address issues!

DIGITAL PRACTICES the optimist the intuitive mind the creative mind the analyst the rational mind the sceptic ‣ fact-driven ‣ text-orientated ‣ values clarity over visual flair ‣ often uses tab to navigate sites ‣ patient and calm browsing habits ‣ internet use mainly leisurely, allowing time to consume content ‣ interest to explore site likely ‣ prefers navigation with mouse, or use of tablet ‣ confident tech user, used to fast pace digital work ‣ impatient browsing habits, using many tabs and keyboard shortcuts ‣ quick skim reader, relying on good visual hierarchy ‣ risk of abandoning site high ‣ confident tech user ‣ prefers familiar patterns to unusual approaches ‣ responds strongly to visual design ‣ prefers mixed content combining media and text ‣ easily swayed by visual design ‣ engaged by unique and strong ideas ‣ tends to wander off / be easily distracted ‣ prefers to use open source apps/browsers ‣ objective and analytical ‣ usually rushing / skim reading ‣ likes consistency & logic ‣ main net use: mobile / tablet CONTENT AUDIT: SIX THINKING HAT PERSONAS

DIGITAL PRACTICES the rational mind the optimist the sceptic the intuitive mind the creative mind the analyst stairwell stairwell CONTENT CONTENT -> IA -> SITE MAP

DIGITAL PRACTICES TEXT designing for the web.

DIGITAL PRACTICES DESIGN CONSIDERATIONS: BRAND DESIGN X What exactly is a brand? common misconceptions: visual identity logo tagline / motto presentation of company/product to client group quality of product/service offered design message / image name or trademark

DIGITAL PRACTICES More than a visual representation or image… feeling emotion connection loyalty uniqueness exclusivity BRAND DESIGN

DIGITAL PRACTICES BRAND DESIGN AN EFFECTIVE BRAND • good content across all media. • strong brand design. • clear target group. • distinct objectives. is based on QUALITY DELIVERS. will promote • a strong message. • its unique content. • up-to-date content across all media.

DIGITAL PRACTICES EFFECTIVE BRANDING CROSS-MEDIA tone of language use of strong visuals short videos easy to view / easy to share grab attention, exploiting our natural attraction to images engaging, consistent & approachable QUALITY CONTENT VISUAL FOCUS & CONSISTENCY MULTIMEDIA ACROSS MULTIPLE CHANNELS LISTEN. RESPOND. BE OPEN.

DIGITAL PRACTICES GUIDELINES brand guidelines => for consistent brand perception across all media style guidelines => for consistency across all material ‣ brand description ‣ logo & permitted usage ‣ colour ‣ typeface/s ‣ layout / spacing / alignment ‣ use of photos/visual elements Style Guide

use for all copy Oxygen Mono Oxygen SIL Open Font License (OFL) google.com/fonts/specimen/Oxygen Oxygen Light Oxygen Regular Oxygen Bold TYPEFACES COLOURS used only for logo license availble for download & embed: visuals for main menu buttons MUTED TEAL accent colour FADED PURPLE reference colour RUST RED action colour NATURAL subtle border colour SLATE content colour STONE window colour use for borders, hover / rollover colour, backgrounds, highlights 413ê0$3&- 31 for border colour use for main copy use for page background user for meta data such as date, name, quoted sources use for links and all calls to action #517877 #8485A2 #C66630 #CBCDB7 #666661 #F9F9F9 2015 use for all copy Oxygen Mono Oxygen SIL Open Font License (OFL) google.com/fonts/specimen/Oxygen Oxygen Light Oxygen Regular Oxygen Bold TYPEFACES COLOURS used only for logo license availble for download & embed: visuals for main menu buttons MUTED TEAL accent colour FADED PURPLE reference colour RUST RED action colour NATURAL subtle border colour SLATE content colour STONE window colour use for borders, hover / rollover colour, backgrounds, highlights 413ê0$3&- 31 for border colour use for main copy use for page background user for meta data such as date, name, quoted sources use for links and all calls to action #517877 #8485A2 #C66630 #CBCDB7 #666661 #F9F9F9 example of style guide for seeingdata.org

DIGITAL PRACTICES TYPOGRAPHY Web Design is 95% Typography.” “ Oliver Reichenstein iA Inc.

DIGITAL PRACTICES TYPOGRAPHY A typeface is something you see - the actual shape and form of the letters, carefully crafted by a type designer. A font is something you use - the format which contains the variant of a typeface. This could be .ttf (TrueType font), or .otf (OpenType font), or any other digital font format.

DIGITAL PRACTICES TYPOGRAPHY Generic font families serif Georgia, Times, Times New Roman sans-serif Lucida Grande, Helvetica, Arial, Verdana monospace Courier New, Lucida Console, Andale Mono cursive Aguafina Script, Snell Roundhand, Zapfino fantasy Impact, Copperplate Gothic, Papyrus WANT TO LEARN MORE?! → typelab.co.uk →

DIGITAL PRACTICES TYPOGRAPHY § aim for an harmonious combination of type design and tone of language § consider how writing in all capitals appears to add volume, indicating shouting — and that this adds more difficulties for some dyslexia sufferers § to judge whether your typesetting works as intended, set your chosen typeface and read the text out loud, paying close attention to your phrasing and emphasis Typefaces have personalities. Typesetting enhances them. TIPS:

DIGITAL PRACTICES Colour & Meaning www.menti.com/rooqau6pmo Let's talk about the different meaning of colours and their effect on designing colour schemes.

DIGITAL PRACTICES

DIGITAL PRACTICES COLOUR PERCEPTION ‣ yellow/red light: vibrant/stimulating ‣ can portray warmth as well as danger and risk ‣ high arousal colours, especially when used in saturated shades ‣ perceived to be closer to the viewer = enhances perception of perspective ‣ white/blue light: cool/calm ‣ can portray tranquility ‣ low arousal colours, especially when used in pastel shades ‣ perceived to be further away from viewer = enhances perception of perspective cool warm chromodynamics

DIGITAL PRACTICES ‣ associations: fire / blood / energy / war / danger / passion / desire / love ‣ strong impact colour with high visibility ‣ expression of urgency / alert / error RED

‣ associations: sunshine / joy / health / enthusiasm / happiness/ creativity ‣ strong impact colour with high visibility ‣ expression of strength / endurance ORANGE

DIGITAL PRACTICES ‣ associations: sunshine / joy / happiness / intellect / energy / caution / jealousy ‣ effect depending in additional colours ‣ expression of pleasant and cheerful emotion, used for highlights; if overused or in dull shades - can become unappealing YELLOW

‣ associations: nature / growth / hope / harmony / safety / fertility / money ‣ calm impact, suggesting experience ‣ expression of restful and calm emotions; also used for eco / green products GREEN

DIGITAL PRACTICES ‣ associations: sky / water / depth / loyalty / trust / truth / intelligence / wisdom ‣ calm and tranquil impact ‣ expression of depth, expertise and stability BLUE

‣ associations: royalty / luxury / ambition / nobility / creativity / mystery ‣ impact varies with hues ‣ expression of nostalgia / romance PURPLE

DIGITAL PRACTICES BASIC COLOUR THEORY All other colours are derived from these 3 hues. yellow red blue orange purple green These are the colours created by mixing the primary colours. yellow-orange red-orange red-purple blue-purple blue-green yellow-green These are the colours created by mixing the secondary colours. In traditional colour theory, these are the 3 pigment colours which can not be mixed or formed by any combination of other colours. colour combinations

DIGITAL PRACTICES COLOUR SCHEME DESIGN combination of tones and shades within the same colour / hue combination of adjacent colours combination of 2 colours from opposite sides of the colour spectrum combination of colours, often 2 groups of similar hues, chosen specifically from the colour spectrum

DIGITAL PRACTICES COLOUR SCHEME DESIGN Where do you start?

DIGITAL PRACTICES COLOUR SCHEME DESIGN slate Blue #6A839A deep Rosé #B791BA — small, local business — established brand element: logo with type and colours — for web design of site: which colour scheme could work? Given example: Hattie’s Tea Room

DIGITAL PRACTICES COLOUR SCHEME DESIGN 3 METHODS 1. brand based 2. rooted in content 3. looking sideways

DIGITAL PRACTICES BASED ON BRAND slate Blue #6A839A deep Rosé #B791BA

No content

No content

DIGITAL PRACTICES ROOTED IN CONTENT

DIGITAL PRACTICES ROOTED IN CONTENT

Home Tea Selection Tea Selection Come & Visit Contact

DIGITAL PRACTICES LOOKING SIDEWAYS

DIGITAL PRACTICES LOOKING SIDEWAYS

HOME TEA SELECTION COME & VISIT CONTACT dĞĂ^ĞůĞĐƟŽŶ

DIGITAL PRACTICES working with

DIGITAL PRACTICES Prisca Schmarsow prisca@eyedeastudio.london eyedeastudio.london