TNMK30 Bild & grafisk design Grafisk kommunikation Visuell ...
TNMK30 Bild & grafisk design Grafisk kommunikation Visuell ...
TNMK30 Bild & grafisk design Grafisk kommunikation Visuell ...
Transform your PDFs into Flipbooks and boost your revenue!
Leverage SEO-optimized Flipbooks, powerful backlinks, and multimedia content to professionally showcase your products and significantly increase your reach.
<strong>TNMK30</strong><br />
<strong>Bild</strong> & <strong>grafisk</strong> <strong>design</strong><br />
<strong>Grafisk</strong> <strong>kommunikation</strong><br />
• Form och kontext<br />
‣ Alltid på användarens/betraktarens villkor: vad, vem, var, när, hur<br />
Perception och kognition<br />
Varseblivning<br />
• Medvetet och omedvetet; hur vi<br />
ser och uppfattar vad vi ser<br />
• Fysiskt och psykiskt; vi "tittar<br />
med ögonen men ser med<br />
hjärnan"<br />
Tolkning<br />
• Betydelser och innebörder,<br />
referenser och standarder<br />
Selektion och fokus<br />
• Syfte, användarens kontext<br />
<strong>Visuell</strong> perception och kognition
Perception och kognition<br />
Funktion<br />
• Synlighet, visuell prioritering,<br />
ordning m.m.<br />
• Tydlig struktur underlättar<br />
avläsning och gynnar avkodning<br />
Kommunikation: tecken, koder<br />
och kultur<br />
• In- och avkodning, gynnad och<br />
dominant tolkning m.m.<br />
• Referenser/tolkningsnycklar<br />
underlättar avläsning<br />
• Känslor (t.ex. estetisk<br />
upplevelse) underlättar<br />
mottagande och respons<br />
Kunskapsramar<br />
Kulturkontext<br />
Mediakontext<br />
Tekniska<br />
förutsättningar<br />
Inkodning<br />
Betydelse<br />
strukturer 1<br />
Meningsfull<br />
diskurs<br />
Avkodning<br />
Betydelse<br />
strukturer 2<br />
Kunskapsramar<br />
Kulturkontext<br />
Mediakontext<br />
Tekniska<br />
förutsättningar<br />
Neurofysiologiskt<br />
små bitar av indata processas<br />
till minnesreferenser för mening
<strong>Bild</strong>ens abstraktionsnivå<br />
• Tolkningsramar<br />
‣ Referenser: natur och kultur, kontext<br />
‣ Tolkning påverkas av informationens form<br />
Abstraktion - symbolism<br />
Gestaltlagarna: "mentala figurer"<br />
Perceptuella fenomen<br />
• Hjärnan fyller i det som saknas, jämför med referenser<br />
Emergens<br />
ett mönster framträder,<br />
sammansatt av enklare<br />
delar<br />
Reifikation<br />
olika objekt tycks bildas<br />
mellan de existerande<br />
formerna<br />
Invarians<br />
oförändrad igenkänning<br />
trots formförändring<br />
Figur-grund<br />
en figur urskiljer sig från<br />
bakgrunden, djupillusion<br />
Gestaltlagarna<br />
• Gestaltlagar av betydelse för grafik och layout<br />
‣ Närhetens lag<br />
- Enheter som är nära varandra grupperas till enheter<br />
‣ Likhetens lag<br />
- Enheter på lika avstånd grupperas så att de som liknar varandra bildar en enhet<br />
‣ Slutenhetens lag<br />
- Om linjer tenderar att bilda en sluten form uppfattas ytan emellan som en sluten yta/<br />
enhet<br />
‣ Den goda formens/kurvans lag (kontinuitetslagen)<br />
- Delar i en figur som har en kontinuerlig form uppfattas som en enhet<br />
‣ Erfarenhetens lag<br />
- Mönster som delvis sammanfaller med inlärda figurer/mönster kompletteras till<br />
helheter genom erfarenhet<br />
Gestaltteori: organisation av seendet<br />
• Hjärnan söker helheter och relationer<br />
‣ Layout, sekvens, metafor, mfl. är verktyg för att stödja meddelandet och<br />
betraktaren/användaren i <strong>kommunikation</strong>en<br />
‣ Brist på genomtänkt utformning kan leda till att användaren uppfattar<br />
andra/egna relationer till en icke avsedd betydelse
Gestaltlagarna i praktiken: visuell <strong>kommunikation</strong><br />
Perception/kognition/<strong>kommunikation</strong><br />
• Budskapet relativt formen, kommunikativ effekt<br />
Attrahera och Orientera med formgivning<br />
A/ Fånga och<br />
- Attrahera<br />
- initialt intryck: vad, hur,<br />
varför<br />
B/ led<br />
uppmärksamhet<br />
- Orientera<br />
- prioritering (första<br />
koll), sekvens, nivå:<br />
- gruppera och separera<br />
C/ mot mål/utgång<br />
- Aktivera<br />
- kommunikativt syfte,<br />
fokusering, poäng,<br />
nästa steg...<br />
<strong>Grafisk</strong>a element<br />
Byggstenarna som kan formas och arrangeras<br />
• Individuella visuella egenskaper som kan identifiera, sammanbinda<br />
och sär- och urskilja<br />
• Formges och arrangeras utifrån syfte, funktion och <strong>kommunikation</strong><br />
Exempel på <strong>grafisk</strong>a element för information<br />
Strukturerat tittande<br />
Funktionell formgivning<br />
Standarder<br />
Perceptuella och<br />
kognitiva<br />
funktionshinder<br />
Affordanser,<br />
transparens
Exempel på <strong>grafisk</strong>a element för information<br />
Prioritering och sammanhang,<br />
visuell återkoppling<br />
• Vad händer<br />
• Vad betyder det<br />
• Vad ska jag göra<br />
• Var och hur<br />
<strong>Visuell</strong> hierarki och information<br />
<strong>Visuell</strong> hierarki<br />
Första blick: attrahera<br />
Andra koll: prioritera<br />
Tredje studerande av bild/text: fokusera, informera<br />
Likhet och olikhet – effekt på urskiljning<br />
<strong>Visuell</strong> hierarki<br />
Storlek<br />
Färg<br />
Kontrast<br />
Textur<br />
Form<br />
Placering<br />
Riktning<br />
Luft<br />
Hierarki<br />
Storlek<br />
Färg<br />
Kontrast<br />
Textur<br />
Form<br />
Placering<br />
Riktning<br />
Luft
Hierarki<br />
Informationsnivåer och betydelser<br />
Hierarki<br />
Informationsnivåer och betydelser<br />
Hierarki<br />
Informationsnivåer<br />
och betydelser<br />
Hierarki<br />
Läsordning<br />
Hierarki<br />
Betraktelseordning: placering (generisk webbsida)<br />
Hierarki<br />
Uppmärksamhet och blickriktning
Hierarki<br />
Uppmärksamhet och blickriktning<br />
Hierarki<br />
Uppmärksamhet<br />
Hierarki<br />
Uppmärksamhet<br />
Hierarki<br />
Läsordning<br />
Hierarki<br />
Hierarki: less is more
<strong>Visuell</strong> hierarki<br />
Storlek<br />
Färg<br />
Kontrast<br />
Textur<br />
Form<br />
Placering<br />
Riktning<br />
Luft<br />
"The prominence hierarchy then is:<br />
1. Upper left corner of the screen<br />
2. Top margin of the screen<br />
3. Upper right corner<br />
4. Lower left and right corners<br />
5. Bottom margin of the screen<br />
6. Left and right margins<br />
7. Screen center<br />
Where the eye is drawn:<br />
1. Moving pictures (video, animation)<br />
2. Pictures (photos, graphics, illustrations)<br />
3. Headlines (large, bold, or differently-colored text)<br />
4. Body copy<br />
Visual prominence accrues to:<br />
1. Larger regions of positive and negative space<br />
2. Regions with greater contrast<br />
3. Higher saturations of color<br />
4. Warmer colors"<br />
Formfaktor: storleken har betydelse<br />
• Avstånd, informationsupplösning och visuell hierarki<br />
• Prioritera, fokusera, kommunicera<br />
• Fasta resp. varierande storlekar<br />
Responsiv <strong>design</strong><br />
• Skalbarhet: media queries (storlek, webbläsare)<br />
• CSS gridsystem: flytande eller stegvis layout<br />
Responsiv <strong>design</strong><br />
• Skalbarhet: media queries (storlek, webbläsare)<br />
• CSS gridsystem: flytande eller stegvis layout<br />
Responsiv <strong>design</strong><br />
• Flytande layout: omflödning och anpassning e. fönster<br />
Responsiv <strong>design</strong><br />
• Stegvis layout: fasta mallar för rsp storlek
Typografi för bildskärm<br />
• Läsbarhet: läslighet,<br />
kontrast, radlängd,<br />
radavstånd...<br />
• Fonter: seriffer eller<br />
”sans serifs”, Georgia<br />
eller Verdana<br />
• Typo<strong>grafisk</strong> kontroll<br />
Typografi för bildskärm<br />
• Läsbarhet: läslighet,<br />
kontrast, radlängd,<br />
radavstånd...<br />
• Fonter: seriffer eller<br />
”sans serifs”, Georgia<br />
eller Verdana<br />
• Typo<strong>grafisk</strong> kontroll<br />
• Kommunikativ och<br />
expressiv typografi<br />
Synen = 70% av informationsprocessande i hjärnan.<br />
Grafikens funktion Mening Betydelse
Change language