2 Dagens föreläsning Visuell utformning och informationsgrafik Gestaltlagar Visuell struktur Visuell kommunikation Mattias Arvola Typografi för skärm och webb Informationsgrafik Närhetslagen: Saker som är nära hör ihop 3 Likhetslagen: Saker som är lika hör ihop 4 Kontinuerlighetslagen: Delarna fortsätter 5 6 Slutenhetslagen: Delar av en form bildar en helhet
Figur och grund Designer Nathan Ford 7 Den gemensamma rörelsens lag gör att de som rör sig ihop hör ihop 8 10 Utformning, perception och kognition Funktion Synlighet, visuell prioritering Tydlig struktur underlättar avläsning och avkodning Kommunikation: tecken, koder och kultur In- och avkodning, gynnad och dominant tolkning Referenser eller tolkningsnycklar underlättar avläsning Känslor och estetisk upplevelse underlättar mottagande och repsons 11 12 Visuell hierarki Fyra kvaliteter av formgivning Första blick: attrahera Perception: sinnesintrycken Andra koll: prioritera Emotion eller affektion: känslorna Tredje studerande av bild eller text: fokusera, informera Kognition: tankarna Konation: syftena (vilja till handling med inslag av ansträngning eller anspänning, målinriktad)
13 Visuell hierarki Storlek Färg Kontrast Textur Form Placering Riktning Luft Rörelse Saab AB Tobii AB 15 16 Perceptuella kvaliteter Omedveten och medveten varseblivning och uppmärksamhet Synbarhet genom kontrast och placering mm. Visuell hierarki ger ordning och struktur Färg och form och visuell orkestrering ger effekter som dominans, subdominant och accent Emotiva kvaliteter Kommunikativa grepp och signaler Känsla föregår tanke, tonalitet Uttryck för att göra intryck, formbeslut Vad tilltalar målgruppen? (sub-) kulturella koder 17 18 Konativa kvaliteter Användarmål Löfte och bekräftelse Metaprodukt: erfarenheter, minnen, förväntningar och associationer som gör produkten möjlig att värdera för användaren (märkesvaror och märkestjänster, status) Carl Eric Linn (1985) Form som utsaga Typografi Kommunikativ: stödjande diskret Läslig och läsbar (läsvärd) Expressiv: uttrycksfull Framträdande form Känslobärande
Verktygskatalog (ur Alan Pipes Graphic Design) 19 Grafiska element 20 Grafiska element: Punkt Linje Yta Text Djupverkan Tid och rörelse Valör Färg Grafiska principer: Enhet och harmoni Balans Skala och proportioner Kontrast och betoning Rytm Byggstenar att formas och arrangeras utifrån syfte, funktion och kommunikation Färgval 22 ca. 10% har defekt färgseende Använd inte bara kulör utan även valör och form som informationsbärare Tydlighet Lätt identifierade och lätt namngivna färger ökar observationsvärde och hågkomst Funktion Välj färger med mening och konsekvens Systematik i färgattribut Kulörton, ljushet, mättnad: likheter, olikheter, betydelse Sinnesstimulans och harmoni: Kontrast och färgklang http://www.j6design.com.au/6-principles-of-design/ Färg och association, kommunikation och kontext Färgscheman, moodboard Adobe Kuler
25 26 Komplementfärger Accentfärger 27 28 Kalla och varma färger Mörka och ljusa färger 29 30 Mörka kombinerat med ljusa färger Ton i ton
31 Närliggande färger Exempel på visuell struktur Exempel av Brandon Jones och Andy Rutledge http://webdesign.tutsplus.com/articles/design-theory/ understanding-visual-hierarchy-in-web-design/ http://andyrutledge.com/quiet-structure.php Storlek 33 Färg 34 Kontrast 35 Justering och upprepning 36
Densitet och whitespace 37 Ryckig ögonbana 38 https://www.igentics.com/responsive-web-design Lugn ögonbana 39 Konsekvent utformad grid 40 41 42 Det finns färdiga grids att använda till många verktyg Rule of Thirds Grids ger ordning och struktur Det är ett konsekvent system för att placera objekt I webbdesign är innehållet dynamiskt och därför måste vi fokusera på kolumnerna. Men tänk på raderna också om du har kontroll över dem. Den bygger på linjehöjden som styrs av storlek på text och avstånd och höjd på widgets. I typografi använd em-mått 1. Divide the width of the layout by 3. 960px : 3 = 320px. 2. Divide the height of the layout by 3. 750 + 950px : 2 = 850px 850px : 3 283px. 3. Each rectangle should have the size of 320px 283px.
Det gyllene snittet, Phi 1,618 12 columns Grid system available for free: www.960.gs 45 46 Vårt perifera seende är dåligt Testa objektens synlighet och hierarki med kistestet Öka synligheten på ett objekt genom att Placera det där folk tittar Flytta det bort från andra objekt Flytta bort omgivande objekt Lägga visuell tyngd på det Reducera den visuella tyngden på omgivande objekt Exempel av Marc Van Rymenant, Simplifying interfaces hbp://www.simplifyinginterfaces.com/tag/peripheral-vision/ Dra till sig uppmärksamheten på ett burdust sätt genom att En modal dialog kastas upp i ansiktet Spela ljud som startar scanning Blinka och skaka: rörelse uppfattas perifert och drar automatiskt till sig uppmärksamhet 47 Visuell kommunikation i gränssnitt Baserat på Mullet och Sanos bok Designing Visual Interfaces (1995)
49 50 En rörig skärmbild En mindre rörig skärmbild 51 52 Reduktion Regelbundenhet 53 54 Överflödiga element Kombination av element
55 56 Obalans och många kontraster Obalans 57 58 Balans Tydliga perpetuella lager eller grupper 59 60 Skarpa kontraster Dålig samordning mellan figur och grund
61 62 Bättre samordning mellan figur och grund Det bara blev så 63 64 Symmetri Justering 65 66 Justering av tre former Bra användning av negativ yta Physically equivalent Optically equivalent
68 Typografi Skärm och webb Från Söderberg (2015) Linjär som till exempel Calibri 69 Tumregler webbtypografi Söderberg (2015) 70 Antikva som till exempel Georgia 1. Val av teckensnitt 2. Val av teckengrader 3. Lämplig radlängd 4. Lämpligt radavstånd 5. Vita ytor för att markera sammanhängande text 6. Vänsterställd textjustering för förbättrad läsbarhet 7. Linjerering av text 8. Kontrast mellan text och bakgrund 9. Hierarki 10. Länkar ska särskiljas från brödtext 11. Responsiv typografi Val av teckensnitt 71 Val av teckengrader 72 Hög läsbarhet på brödtext bör vara av högsta prioritet vid val av teckensnitt. Linjärer och antikvor ger bäst läsbarhet. Dekorativa teckensnitt försämrar läsbarheten. På äldre skärmar anses linjärer fungera bättre än antikvor. Fler teckensnitt än tre skapar ofta ett rörigt intryck. En distinkt skillnad bör finnas vid val av flera teckensnitt. Var medveten om att olika teckensnitt förmedlar olika känslor. Använd expressiv typografi för att förmedla en medveten känsla, eller osynlig typografi för att förmedla textens innehåll. Hög läsbarhet på brödtext bör vara av högsta prioritet vid val av teckengrad. Alltför många teckengrader kan skapa ett rörigt intryck. Olika skärmar kräver olika teckengrader. I ett responsivt gränssnitt ska teckengraden öka eller minska beroende på skärmstorlek. Detta görs lättast genom att använda sig av relativa enheter (%, em eller rem) och inte pixlar. Det mest naturliga avståndet mellan skärm och öga bör vara utgångspunkt vid val av teckengrader. En bra utgångspunkt är att skärmstorlekar på ca 24 tum har ett rekommenderat avstånd på 70 cm från ögat och en lämplig teckengrad är standardvärdet 100% (ca 16 pixlar).
Lämplig radlängd 73 Lämpligt radavstånd 74 Brödtexten bör alltid ha en radlängd som är mellan 40 75 tecken inklusive mellanrum. Längre rader gör det svårare att hitta tillbaka till ny rad, kortare rader gör läsupplevelsen hackig. Brödtextens radavstånd ska göra det enkelt att hitta från slutet på en rad till början på nästa rad. Den vita korridoren som bildas mellan raderna hjälper läsaren att hitta till nästa rad. Raderna ska inte flyta ihop. Längre rader kräver oftast ett större radavstånd. Teckensnittets x-höjd (höjden på x i förhållande till exempelvis h) påverkar också radavståndet. Ett teckensnitt med en hög x-höjd minskar den vita ytan mellan radera och behöver således större radavstånd, medan en lägre x-höjd behöver mindre radavstånd. Vita ytor för att markera sammanhängande text Tydliga blankrader eller indrag bör separera och markera stycken. Marginaler och spaltmellanrum, gör det lättare att identifiera sammanhängande text. 75 Vänsterställd textjustering för förbättrad läsbarhet Vänsterställd text gör det lättare att hitta början på nästa rad. Även marginaljusterad text fungerar, men i smala spalter kan oönskade mellanrum dyka upp i texten. Centrerad text bör endast användas i korta textblock med ett fåtal rader, och inte för brödtext. 76 Linjering av text 77 Kontrast mellan text och bakgrund 78 Linjering av text och andra designelement skapar en mer harmonisk layout. Ofta används ett osynligt rut- eller spaltsystem (grid) för att skapa konsekvent placering av text och bild. Textblock och element kan linjeras antingen i ytterkant eller centrerat. Textens färg ska vara i tillräcklig stark kontrast mot bakgrunden för att skapa god läsbarhet. Ett optimalt kontrastförhållande är svart text på vit bakgrund. Var däremot medveten att maximalt svart på maximalt vitt kan skapa en irriterande, flimrande effekt på äldre skärmar. Exempel på dålig färgkontrast är grönt på rött, ljusgrått på vitt, gult på vitt.
Kontrast mellan brödtext och rubriker 79 Hierarki 80 Rubriker ska väcka uppmärksamhet och särskiljas från brödtexten för att underlätta skanning av text. Kontrast kan skapas med kontrasterande teckensnitt, större teckengrad, annorlunda skärning (fet/kursiv) och/eller annan färg. Det måste finnas en tydlig hierarki och läsordning mellan rubriker, underrubriker och brödtext samt övriga textelement. Hierarki kan skapas med positionering, särskiljande teckengrader, färger, teckensnitt och/eller teckengrader Observera att en kombination av alltför många typer kan skapa en otydlig och rörig hierarki. Jämför med antal teckengrader och teckensnitt. Länkar ska särskiljas från brödtext 81 Responsiv typografi 82 Användare ska se skillnad på länkar och brödtext. Även besökta länkar bör särskiljas från obesökta länkar. Mediaförfrågningar (media queries) bör användas för att ändra teckengrad, radlängd och radavstånd när skärmeller fönsterstorlek förändras. Tänk igenom din design och tillämpa enkla principer för att förbättra den visuella kommunikationen. Informationsgrafik Mattias Arvola (baserat på Tidwell, 2011)
85 Översikt plus detalj 86 https://www.google.com/finance Bra informationsgrafik besvarar Hur är denna data ordnad? Vad är relaterat till vad? Hur kan jag utforska dessa data? Kan jag ändra ordningen på dessa data för att få ett annat perspektiv på dem? Hur kan jag titta på endast de data som jag är intresserad av? Vad är de exakta värdena på olika datapunkter? https://www.google.se/maps/search/kafé/@58.4102567,15.6188845,16z?hl=sv Datatips 87 http://qz.com/171191/south-koreans-drink-twice-as-much-liquor-as-russians-and-more-than-four-times-as-much-as-americans/ Små multiplar 88 Dynamisk sökning 89 https://www.booli.se/sverige/77104/ mattias.arvola@liu @mattiasarvola www.liu.se