Planning for structure & design

talk delivered for Digital Practices Module,
part of the MA Digital Media & Society,
The University of Sheffield

website: http://eyelearn.org/workshops/digital-practices2018

Transcript

1. 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-practices2018 Planning for structure and design
2. 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 — what makes a good theme
 — how to test themes workshop: sourcing themes a first look at themes and options TEXT
3. 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
4. DIGITAL PRACTICES BRAINSTORMING / MIND MAPPING / STRUCTURE PLANNING word clouds fun films food friends LEARN BOOKS Brainstorming… Content audit
5. 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 files in some order, logical at the time of production files reviewed & edited, solid IA to be confirmed IA informs the site structure, site map will guide UI design organised for users & in context informed by IA, to establish nav content structured organising labelling indexing IA connecting guiding linking UI site map
6. 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 positives and probe for value and benefit. The Black Hat is judgment - the devil's advocate or why something may not work. Spot the difficulties and dangers; where things might go wrong. Probably the most powerful and useful of the Hats but a problem if overused. The Red Hat signifies feelings, hunches and intuition. When using this hat you can express emotions and feelings and share fears, likes, dislikes, loves, and hates. 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]
7. 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!
8. 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
9. DIGITAL PRACTICES the rational mind the optimist the sceptic the intuitive mind the creative mind the analyst stairwell stairwell CONTENT CONTENT -> IA -> SITE MAP
10. DIGITAL PRACTICES TEXT designing for the web.
11. 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
12. DIGITAL PRACTICES More than a visual representation or image… feeling emotion connection loyalty uniqueness exclusivity BRAND DESIGN
13. 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.
14. 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.
15. 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
16. 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 use at different opacities 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 use at different opacities 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
17. DIGITAL PRACTICES TYPOGRAPHY Web Design is 
 95% Typography.” “ Oliver Reichenstein
 iA Inc.
18. 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.
19. 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 →
20. 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:
21. DIGITAL PRACTICES
22. 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
23. DIGITAL PRACTICES ‣ associations:
 fire / blood / energy / war / danger / passion / desire / love ‣ strong impact colour with high visibility ‣ expression of urgency / alert / error RED
24. 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
25. DIGITAL PRACTICES ‣ associations:
 sky / water / depth / loyalty / trust / truth / intelligence / wisdom ‣ calm and tranquil impact ‣ expression of depth, expertise and stability BLUE
26. 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
27. 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
28. DIGITAL PRACTICES COLOUR SCHEME DESIGN Where do you start?
29. 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
30. DIGITAL PRACTICES COLOUR SCHEME DESIGN 3 METHODS 1. brand based 2. rooted in content 3. looking sideways
31. DIGITAL PRACTICES BASED ON BRAND slate Blue #6A839A deep Rosé #B791BA
34. DIGITAL PRACTICES ROOTED IN CONTENT
35. DIGITAL PRACTICES ROOTED IN CONTENT
36. Home Tea Selection Tea Selection Come & Visit Contact
37. DIGITAL PRACTICES LOOKING SIDEWAYS
38. DIGITAL PRACTICES LOOKING SIDEWAYS
39. HOME TEA SELECTION COME & VISIT CONTACT Tea Selection
40. DIGITAL PRACTICES working with
41. DIGITAL PRACTICES Prisca Schmarsow prisca@eyedeastudio.london eyedeastudio.london