Visuell utformning och informationsgrafik
|
|
- Karl Axelsson
- för 7 år sedan
- Visningar:
Transkript
1 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
2 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 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)
3 13 Visuell hierarki Storlek Färg Kontrast Textur Form Placering Riktning Luft Rörelse Saab AB Tobii AB 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 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
4 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 Färg och association, kommunikation och kontext Färgscheman, moodboard Adobe Kuler
5 25 26 Komplementfärger Accentfärger Kalla och varma färger Mörka och ljusa färger Mörka kombinerat med ljusa färger Ton i ton
6 31 Närliggande färger Exempel på visuell struktur Exempel av Brandon Jones och Andy Rutledge understanding-visual-hierarchy-in-web-design/ Storlek 33 Färg 34 Kontrast 35 Justering och upprepning 36
7 Densitet och whitespace 37 Ryckig ögonbana 38 Lugn ögonbana 39 Konsekvent utformad grid 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 px : 3 = 320px. 2. Divide the height of the layout by px : 2 = 850px 850px : 3 283px. 3. Each rectangle should have the size of 320px 283px.
8 Det gyllene snittet, Phi 1, columns Grid system available for free: 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:// 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)
9 49 50 En rörig skärmbild En mindre rörig skärmbild Reduktion Regelbundenhet Överflödiga element Kombination av element
10 55 56 Obalans och många kontraster Obalans Balans Tydliga perpetuella lager eller grupper Skarpa kontraster Dålig samordning mellan figur och grund
11 61 62 Bättre samordning mellan figur och grund Det bara blev så Symmetri Justering Justering av tre former Bra användning av negativ yta Physically equivalent Optically equivalent
12 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).
13 Lämplig radlängd 73 Lämpligt radavstånd 74 Brödtexten bör alltid ha en radlängd som är mellan 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.
14 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)
15 85 Översikt plus detalj 86 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? Datatips 87 Små multiplar 88 Dynamisk sökning 89
Grafisk form för användargränssnitt
Grafisk form för användargränssnitt Petra Dryselius Designer, digitala plattformar Digital Communica.on Linköping AB Kompetens och lösningar inom digitala medier. Intranät, externwebb, webbsystem, digitala
Läs merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
Läs merGrafisk design Varför grafisk design? öka synligheten ge klar affordance stödja en god mappning ge god feedback Varför grafisk design? skapa en smidig interaktion kan göra gränssnittet visuellt mer
Läs mergrafisk design & layout regler
& layout regler Grafisk design eller grafisk formgivning är ett kreativt och konstnärligt språk, men till skillnad från en fri konstnär så får en grafisk designer i uppdrag att föra ut ett speciellt budskap.
Läs merGrafisk profil för digitala gränssnitt MAJ 2019
Grafisk profil för digitala gränssnitt MAJ 2019 GRAFISK PROFIL FÖR DIGITALA GRÄNSSNITT Inledning Den här grafiska profilen för digitala gränssnitt innehåller riktlinjer för hur Umeå kommuns e-tjänster
Läs merTeckenförrådet Grafisk profil
Teckenförrådet Grafisk profil Om den grafiska profilen Hur vi beter oss och ser ut styr i mångt och mycket hur vi uppfattas, alla har vi en personlig stil som signalerar vilka vi är, detta gäller även
Läs merVÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP GÖTEBORGS UNIVERSITET
VÅR NYA PPT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP 2019-06-03 Lättare för dig bättre för dina åhörare Den nya mallen är framtagen utifrån två olika perspektiv användbarhet
Läs merVetenskapliga affischer. Karin Fahlquist
Vetenskapliga affischer Karin Fahlquist En forsknings affisch/poster Sammafatta information eller forskning kortfattat och tilltalande Publicera resultat Skapa diskussion (diskussions underlag) Reklam
Läs merNYA POWERPOINT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN
GÖTEBORGS UNIVERSTITETS NYA POWERPOINT-MALL BESKRIVNING AV MALLEN OCH NÅGRA TIPS PÅ VÄGEN KICKI EDGREN / CHRISTEL COPP, 2019-06-04 Lättare för dig bättre för dina åhörare Den nya mallen är framtagen utifrån
Läs merbehövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
Läs merGränsnittsprinciper. Mattias Institutionen för datavetenskap Linköpings universitet
Gränsnittsprinciper Mattias Arvola @mattiasarvola Institutionen för datavetenskap Linköpings universitet 1 Dagens föreläsning Principer i gränssnitt 2 Principer i gränssnitt Syfte: Förklara gränssnittsprinciper
Läs merVärmdö IFs grafiska profil 4. Logotyp 5-9. Färg 10. Typografi 11-12. Brevpapper 13. Visitkort 14. Korrespondenskort 15.
1Grafisk manual 2 Innehåll Sida Värmdö IFs grafiska profil 4 Logotyp 5-9 Färg 10 Typografi 11-12 Brevpapper 13 Visitkort 14 Korrespondenskort 15 Kuvert 16-17 3 Värmdö IFs grafiska profil En enhetlig grafisk
Läs merProjektarbete Skriftlig redogörelse för grafiska och visuella ställningstaganden
Projektarbete Skriftlig redogörelse för grafiska och visuella ställningstaganden Ewa Kwiatkowska & Marika Johansson Webbredaktörsprogrammet, distans VT 2010 Formgivning och layout i InDesign Skriftlig
Läs merGrafisk design För synskadade och lite om dyslexi
Grafisk design För synskadade och lite om dyslexi Färgblind Tritanopi/tritanomali, blått Protanopi/protanomali, röd Deuteranopi/deuteranomali, grönt Röd-grön vanligast Gul-blå ovanlig Mycket ovanligt,
Läs merdesign & layout Distansskolan 1
design & layout Distansskolan 1 Grundelementen Varje komposition är summan av dess grundelement. Om du tittar på en annons eller broschyr kommer du hitta både enkla och komplexa kompositioner. En del kompositioner
Läs merProfilmanual, internt
Profilmanual, internt Källa: securitasbrand.com Vid frågor eller framtagande av marknadsmaterial kontakta marknadskommunikation. Våra färger 1. Logotypfärger Logotypen består av tre färger - svart, vit
Läs merDirektonline. GRAFISK MANUAL
Visuell kommunikation Direktonline Direktonline. GRAFISK MANUAL KONTAKT Telefon: 031-301 33 20 E-post: info@direktonline.se ADRESS Erik Dahlbergsgatan 9 411 26 Göteborg ONLINE Webbplats: www.direktonline.se
Läs merINTRODUKTION TILL LOGOTYPEN
INTRODUKTION TILL LOGOTYPEN Greppa Näringen logotypen är den officiella avsändaren och vårt viktigaste verktyg. Logotypen har en klar och tydlig form som syns mycket bra i alla sammanhang. För att skydda
Läs merKlimatrådet Grafiskt manér
Klimatrådet Grafiskt manér Igenkänning och trovärdighet Klimatrådet är ett nätverk bestående av vitt skilda organisationer från offentlighet, näringsliv och idéburen sektor. En del i att knyta ihop rådets
Läs merBILDEN BUDSKAP FORM KRAFTFÄLT
BILDEN BUDSKAP FORM KRAFTFÄLT Perceptionen vad i bilden påverkar oss? Betraktaren och bilden - innebörd och tolkning 1. punkter linjer ytor 2. figur - grunden och bakgrunden 3. delar nära varandra - helhet
Läs merSWEBO Bioenergy Grafisk profil
SWEBO Bioenergy Grafisk profil Formsmedjan Reklam & Kommunikation Grafisk profil Den image vi har, det vill säga hur andra människor uppfattar vårt företag är ett resultat av alla de intryck vi gör på
Läs merHögskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck. Projektarbete Solveig Betnér
Högskolan i Borås HT10 Webbredaktörsprogrammet distans Grafisk produktion för webb och tryck Projektarbete Solveig Betnér Sammanfattning och syfte Företaget Solveig skapar textila handarbetade produkter
Läs merFÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD
GRAFISK MANUAL IDENTITET INNEHÅLL Grafisk design och kommunikation är en sektion med en stark identitet. Vi vet vilka vi är och hur vi gör. Denna manual har gjorts för att alla andra också ska veta vilka
Läs merSkiljer sig rekommendationerna för»skriven» och»tryckt» text?
KUNGLIGA TEKNISKA HÖGSKOLAN Numerisk analys och datalogi Skiljer sig rekommendationerna för»skriven» och»tryckt» text? Vårterminen 2002 Kurs i datorstöd för textbehandling 10 poäng Författare: Agneta Forslund
Läs merInstruktioner till övningen som börjar på nästa sida
Instruktioner till övningen som börjar på nästa sida Övningen innehåller det grundläggande som du måste kunna för att klara Word. Varje stycke ska vara formaterat så som det står i stycket. Under varje
Läs merHögskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor. Projektarbete Solveig Betnér
Högskolan i Borås HT10 Webbredaktörsprogrammet distans Formgivning av webbsidor Projektarbete Solveig Betnér Innehållsförteckning Syfte s. 3 Målgrupp s. 3 Genre s. 3 Funktionalitet s. 4 Prototyper s. 5
Läs merAllt är Tobbes fel. Grafisk profil för förbundet. Ung Pirat
Allt är Tobbes fel. Grafisk profil för förbundet Ung Pirat Varför behövs en grafisk profil? En grafisk profil har man för att en organisation enkelt ska kännas igen. Här sammanställs olika riktlinjer för
Läs merInnehåll. ukm grafisk manual. Innehåll. Översikt Logotyp Typografi Vårt språk Bildmanér Textmall Kontakt
grafisk manual Innehåll Översikt Logotyp Typografi Vårt språk Bildmanér Textmall Kontakt 3 4 5 6 7 8 9 Innehåll 2 Logotyp Typografi Rubriker: Circular Pro Black Övrig text: Circular Pro Medium ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
Läs merVi möts dagligen av en
Text som fler kan läsa tips om typografi och layout Vi möts dagligen av en mängd tidningar, tidskrifter, broschyrer, affischer och andra trycksaker. De flesta kan lätt läsa informationen i dem. Men det
Läs merFrågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Läs merLogotyp och Grafisk profil för UT Transport i Norr AB
Logotyp: Introduktion UT Transport i Norr AB s logotyp är designad för att på ett tydligare och starkare sätt representera det företag som UT har utvecklats till att bli idag och kommer att bli imorgon.
Läs merEn enhetlig profil är viktig för alla organisationer
En enhetlig profil är viktig för alla organisationer och ännu viktigare för en stor grupp av frivilliga. Då öppnas möjligheten för att alla känner samhörighet och vet åt vilket håll gruppen går. Det gör
Läs merTeman för föreläsningen. Gestaltlagarna Layout Typografi
Teman för föreläsningen Gestaltlagarna Layout Typografi Gestaltlagarna Lagen om likhet Gestaltlagarna Gestaltlagarna Gestaltlagarna Lagen om närhet Gestaltlagarna Gestaltlagarna närhet likhet kontinuitet
Läs merGrafisk manual GAKE DOJO. Riktigt bra självförsvar!
Grafisk manual 2007 JUJUTSU Riktigt bra självförsvar! Högskolan för Lärande och Kommunikation i Jönköping Andrea Drljaca, Viktor Larsson och Jesper Jarl Grafisk manual 2007-06-08 INNEHÅLL GRAFISK MANUAL...4
Läs merGRAFISK MANUAL & RIKTLINJER
GRAFISK MANUAL & RIKTLINJER Sektion 0 Introduktion Sida 2 Sektion 1 Logotyp Sida 4 Sektion 2 Typografi Sida 8 Sektion 3 Färger Sida 12 Sektion 4 Placeringsexempel Sida 14 SEKTION 0 INTRODUKTION Producerad
Läs merGRAFISK PROFILMANUAL
GRAFISK PROFILMANUAL JUNI 2017 INLEDNING Vår grafiska identitet är det snabbaste och starkaste uttrycksmedlet för vårt varumärke. Därför är det av största vikt att vi följer de grafiska riktlinjer som
Läs merHur gör man en poster? Sommarforskarskolan 2018
Hur gör man en poster? Sommarforskarskolan 2018 En vetenskaplig poster Vad är en poster? Vad är en postersession? En vetenskaplig poster Hur skiljer sig en poster från en artikel? Hur skiljer sig en poster
Läs merS vintagebröllo LSA p E EL P SAS LLO VINTAGEBRÖ Grafisk manual
Grafisk manual Välkommen! Den grafiska profilen är skapad till Elsas vintagebröllop som ägs av Elsa billgren. Hennes affärsidé är att erbjuda fantastiska klänningar i underbar kvalitet till lågt pris.
Läs merGRAFISKT PROFILPROGRAM TESKEDSORDEN
GRAFISKT PROFILPROGRAM INLEDNING Hur handlar en människa när det börjar brinna, på tre olika sätt enligt Amos Oz: 1. Hon springer från eldsvådan så fort hon bara kan och struntar i alla dem som inte kan
Läs merVad är Typografi och Layout
Vad är Typografi och Layout Typografi: Att ge form åt dokumentets bokstäver, ord, meningar, stycken och rubriker. Layout: Att lägga ut text och bild på en sida så att den blir tilltalande och lätt för
Läs merGUIDELINES: VALSLOGAN 2018 GRAFISK ANVÄNDNING
GUIDELINES: VALSLOGAN 2018 GRAFISK ANVÄNDNING Det här dokumentet anger guidelines för hur 2018 års valslogan används i grafisk form. @ 2018 Socialdemokraterna Sida 1 2018 ÅRS VALSLOGAN: Användning: Använd
Läs merDags att skriva uppsats?
Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta
Läs merInstitutionen för datavetenskap Department of Computer and Information Science
Institutionen för datavetenskap Department of Computer and Information Science Examensarbete Heuristisk utvärdering av typografi i responsiva gränssnitt av Christian Söderberg LIU-IDA/LITH-EX-G--15/042--SE
Läs merMålgruppsanpassad Webbplats. Bild och grafisk design för webben Institutionen för samhällsvetenskaper HT2010 Av: Eva Wallin
Bild och grafisk design för webben Institutionen för samhällsvetenskaper HT2010 Av: Eva Wallin Målgruppsanpassad Webbplats Motiveringar för utformningen av webbplatsen Utsiktens SPA Tredje och avslutande
Läs merHej! Innehållsförteckning. Inledning 3. Visuell identitet Logotyp 4 Versioner 6 Frizon 9 Minsta storlek 10 Placering 11
Grafisk manual Innehållsförteckning Inledning 3 Visuell identitet Logotyp 4 Versioner 6 Frizon 9 Minsta storlek 10 Placering 11 Typografi Kommunikationsteckensnitt 12 Office och digital media 13 Färger
Läs merFärger. Matthew Woehlke Översättare: Stefan Asserhäll
Matthew Woehlke Översättare: Stefan Asserhäll 2 Innehåll 1 Färger 4 1.1 Inledning........................................... 4 1.2 Hantering av scheman................................... 4 1.2.1 Importerar
Läs merGrafisk Profil. Grafisk Profil Version 1.0 06/12-2005
Grafisk Profil Gertruds grafiska profil är dess ansiktet utåt. För Gertruds kunder, samarbetspartners och medarbetare ska det vara lätt att identifiera budskap från Gertrud i olika medier. Logotpen är
Läs merGrafisk manual. Innehåll. Kontakt: max@desmond.com
Grafisk manual Innehåll Kontakt: max@desmond.com Förutsättningar Hoop skall ha en modern och sportig profil som skall vara denna manual trogen i allt formellt material som: Brev, Mejl, Instruktionsböcker
Läs merInnehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek
Grafisk profil Innehåll 3 Grafisk profil 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek 6 Teckensnitt 7 Färger Profilfärger och kompletterande
Läs merPrinciper i gränssnitt och heuristisk utvärdering
Dagens föreläsning Principer i gränssnitt och heuristisk utvärdering Principer i gränssnitt Heuristisk utvärdering Mattias Arvola @mattiasarvola Institutionen för datavetenskap Linköpings universitet 1
Läs merMANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL
MANUAL FÖR ENHETLIG KOMMUNIKATION GRAFISK PROFIL Innehåll Logotyp 1.0 Den grafiska profilen syftar till att skapa en enhetlig visuell identitet för NB coachning. Den här manualen beskriver hur man arbetar
Läs merGrafisk manual Sörmlandsstugan 2.0
Grafisk manual Sörmlandsstugan 2.0 Innehållsförteckning 3 Om Sörmlandsstugan 2.0 4 Logotypen 5 Storlek och frizon 6 Typografi 7 Anvisningar 8 Basfärger 9 Komplementfärger 10 Färgsystem 11 Grafiska element
Läs merORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Läs merGRAFISK MANUAL
GRAFISK MANUAL 1.2 2012-02-16 INNEHÅLL GRAFISK MANUAL Om förkortningar...2 Consats Logotyp...3 Färger...4 Dotterbolagens logotyper...5 Symbol...6 Payoff...7 Payoff SES...8 Frizon...9 Typografi...10 Huvudtypsnitt...10
Läs merDesign och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU
Design och konstruktion av grafiska gränssnitt Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Making it look good: Visual Style and Aesthetics Visuell design Färger Typografi Exempel
Läs merGRAFISKA RIKTLINJER. för Statskontoret. Version
GRAFISKA RIKTLINJER för Statskontoret Version 5. 2018-01-09 Innehåll Logotype svensk och engelsk Färgpalett Typografi Rapportomslag Annonsering Visitkort Logotype svensk och engelsk Logotypen förekommer
Läs merBrandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande
Vår grafiska manual Brandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande kunskapscentrum som ökar fram tidens brandsäkerhet
Läs merKraftfält i bilden: Utsnittet Motivet fångas, bilden ramas in i höjd och bredd, blickpunkt bestäms
Kraftfält i bilden: Utsnittet Motivet fångas, bilden ramas in i höjd och bredd, blickpunkt bestäms Komposition Linje, rymd, ljus, volym och färg - komponeras till helhet Innehåll budskapet som beställare
Läs merMed blicken på bilden
Med blicken på bilden om vad vi ser och varför Sammanställning av föredraget för Sveriges Konstföreningar Grafikens Hus, 29 maj 2010 Christel Copp Om bildskapande Människan har i alla tider sökt olika
Läs merGrafisk manual. Studentkåren i Sundsvall 2013
Grafisk manual Studentkåren i Sundsvall 2013 STUDENTKÅREN I SUNDSVALL GRAFISK MANUAL INLEDNING 2 Inledning Detta dokument reglerar Sundsvalls studentkårs grafiska profil med logotyper, typsnitt, färger
Läs merDesignmanual. Logotype Färger Varumärkesbård Mönster Formgivning Typografi Skyltning
Designmanual Logotype Färger Varumärkesbård Mönster Formgivning Typografi Skyltning Designmanual i korthet För frågor om vår design kontakta Helene Keskitalo, stab Information, tel 08 655 91 05 eller helene.keskitalo@sveaskog.se
Läs merINLEDNING. Inledning Logotyp Färger Teckensnitt Tillämpningar
GRAFISK MANUAL INLEDNING Den här manualen beskriver hur vi arbetar med vår grafiska profil. I den hittar du allt från användandet av logotypen och hanterandet av färger och typografi, till mallar för utformning
Läs merÅbo Akademis Studentkårs grafiska profil. Utarbetad av Ken Snellman.
1 Åbo Akademis Studentkårs grafiska profil. Utarbetad av Ken Snellman. Åbo Akademis Studentkår 2015 2 Innehåll 1. Logotyp... 4 2. Sigill... 9 3. Rutnät... 10 4. Dekorelement... 11 5. Färger... 12 6. Teckensnitt...
Läs merFöreläsning 7: Kognition & perception
Föreläsning 7: Kognition & perception FSR: 3, 4 Att läsa: Kapitel 2-3 i Rogers et al.: Interaction design Översikt Att kunna om perception och kognition Konceptuella modeller Metaforer Paradigm, teorier,
Läs merGrafisk profil R AB. Ransäters Invest AB
Grafisk profil R AB Ransäters Invest AB Innehåll 3 Grafisk profil 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek 6 Teckensnitt 7 Färger och
Läs merInteraktionsteknik. Föreläsning 6, Kognition perception. Översikt. Vad händer i medvetandet?
Föreläsning 6: Kognition och perception Rogers et al. Kapitel 3 Översikt Vad är kognition? Vad är användare bra och dåliga på? Exempel på hur kognition kopplas till interaktionsdesign Kognition och perception
Läs merGRAFISK MANUAL FASTSTÄLLD AV FULLMÄKTIGE 2014-12-10
GRAFISK MANUAL Studentkåren i Borås Studentkåren i Borås 2014 Fastställd av fullmäktige 2014-12-10 Grafik: Studentkåren i Borås Layout: Paulina Olin Att användas som riktlinje av studentkårens interna
Läs merTrädgårdscentrum AB. Grafisk profil
Grafisk profil Logotypen Logotypen är baserad på en script för att få den att kännas mer moderna samtidigt som det kopplas mer ihop med växtriket och stjälkar. Bladen är ännu ett element som ska göra att
Läs merGrundredigering i Photoshop Elements. Innehåll. Lennart Elg Grundredigering i Elements Version 2, uppdaterad 2012-09-14
Grundredigering i Photoshop Elements Denna artikel handlar om grundläggande fotoredigering i Elements: Att räta upp sneda horisonter och beskära bilden, och att justera exponering, färg och kontrast, så
Läs merFöreläsning 6: Kognition och perception. Rogers et al. Kapitel 3
Föreläsning 6: Kognition och perception Rogers et al. Kapitel 3 Översikt Vad är kognition? Vad är användare bra och dåliga på? Exempel på hur kognition kopplas till interaktionsdesign 120420 Kognition
Läs merVetenskapliga affischer
Vetenskapliga affischer En forsknings affisch/poster Sammafatta information eller forskning kortfattat och tilltalande Publicera resultat Skapa diskussion (diskussions underlag) 1 Reklam för ditt arbete
Läs merInledning 4 6. Märke. Typsnitt 7 9. 10. Färger
GRAFISK PROFIL INNEHÅLL 3. Inledning 4 6. Märke Huvudmärke. Varianter. Tillämpning. 7 9. Typsnitt Huvudtypsnitt. Webbtypsnitt. 10. Färger Huvudfärger. Komplementfärger. Webbfärger INLEDNING Den grafiska
Läs merDokumentation av rapportmall
Dokumentation av rapportmall Utgivningsår: 2003 Författare: Eva Erbenius Samhällsmedicin Centrum för Tillämpad Näringslära Box 175 33 Wollmar Yxkullsgatan 19 118 91 Stockholm Innehåll Inledning... 3 Rapportens
Läs merHjälp till BoD easyeditor
Hjälp till BoD easyeditor 1 TEXT 1.1 Innehållsförteckning och kapitel 1.2 Skapa nytt kapitel och bearbeta 1.3 Skriva/infoga 1.4 Formatera/skapa 1.5 Ytterligare funktioner 2 BILDER 2.1 Ladda upp bilder
Läs merGrundläggande grafisk profilmanual för SKR. Georgia Pro Black italic. Georgia Bold italic. Typografi. Rubriker. Georgia Pro light italic 16 pkt
Grundläggande grafisk profilmanual för SKR Typografi Vi använder Calibri och georgia. Dessa typsnitt finns förinstallerade på de flesta datorer och därmed kan både tryck, web och word-dokument hålla samma
Läs merbilder för användning
Grundläggande guide i efterbehandling av bilder för användning på webben Innehåll Innehåll...2 Inledning...3 Beskärning...4 Att beskära en kvadratisk bild...5 Att beskära med bibehållna proportioner...5
Läs merFärger. Matthew Woehlke Översättare: Stefan Asserhäll
Matthew Woehlke Översättare: Stefan Asserhäll 2 Innehåll 1 Färger 4 1.1 Hantering av scheman................................... 4 1.2 Redigera eller skapa färgscheman............................. 4 1.2.1
Läs merVisuell identitet JUNI 2018
Visuell identitet JUNI 2018 1 VISUELL IDENTITET Inledning Vi har arbetat fram en varumärkesplattform som ska: Fungera som intern ledstjärna och inspiration. Vara vägledande i vad vi gör och hur vi agerar.
Läs merGRAFISK MANUAL Arcada studerandekår - ASK
GRAFISK MANUAL Arcada studerandekår - ASK Innehåll 1 Inledning 3 2 Namn och undertecknare 3 3 Färgskala 3 4 Typografi 4 4.1 Brödtext 4 4.2 Rubriker 5 5 Logo 5 5.1 Logo med text 5 5.2 Logo utan text 6 5.3
Läs merKognition. Kognition, interaktion och användare. Överblick - kognition. Data-information-kunskap. Nivåer av kognition. Dä ä bar å åk.
Kognition Kognition, interaktion och användare Henrik Artman Tänkande Mentala funktioner för att tolka information genom sinnena Kognitiva funktioner Perception Minne och uppmärksamhet Problemlösning och
Läs merSociala medier för företag
Sociala medier för företag Utbildningen ingår i projektet Helikoopter vilket är ett kompetensutvecklingsprojekt som finansieras av Europeiska socialfonden och genomförs i Coompanion Norr och Västerbottens
Läs merfärger - för profil och känsla
industrialismen...och det blev viktigare för både producenter och tjänstemän att särskilja sig från andra... och skapa en egen grafisk profil en egen form och ett eget namn, att synas och särskiljas från
Läs merMänniskan och Tekniken. Fö 3 Människan och tekniken. Perception. Visuell perception
Fö 3 Människan och tekniken Fö1 om Användbarhet och svårigheter med det. PACT som ett ramverk för att beskriva problemet. Fö 2 om metoder för att genomföra PACT-analys, dvs användarstudie och ev. analys
Läs merKommunikationsorienterad. visuell design
Kommunikationsorienterad visuell design Magnus Haake LUCS, Lunds universitet Kommunikationsorienterad visuell design = Kognitivt orienterad grafisk design Varför kognitivt orienterad grafisk design? Verktyg
Läs merVad påverkar designen?
Vad påverkar designen av ett gränssnitt? Vi ser arbetet med design av ett användargränssnitt som något som liknar en arkitekts arbete. En arkitekt ska i sin utformning av en ny byggnad se till att: Byggnaden
Läs merLayout. Layout. Varför layout? Proportioner. Rutnät, gruppering & justering. skapa struktur skapa balans markera betydelse
Layout Proportioner A4 1,42 (roten ur 2) Letter 8,5 x 11 Gyllene snittet 1,62 Kvadrat (1:1) Datorskärm 0,75 (3:4) Layout: Proportioner Layout: Proportioner Pocket: 110 x 178 mm Fackpockett: 110 x 170 mm
Läs merInnehållsförteckning
Innehållsförteckning Tillgänglighet i praktiken Hur skapar man tillgänglighetsanpassade dokument? Hur gör vi då? Dagens mål Tillgänglighet i det dagliga arbetet en arbetsprocess Hur får vi skribenten medveten
Läs merlogotyp Logotypen finns i två utföranden. Liggande och stående.
logotyp Logotypen finns i två utföranden. Liggande och stående. På vit yta skall om möjligt den tvåfärgade logotypen användas. Skall logotypen plaseras där man har endast är tillgång till en färg, skall
Läs mer1. STANDARDLOGOTYP. Läs mer om Flexit LOGOTYP INLEDNING. LOGOTYP FÖR POSITIONERING Ljusblå: 100% C Mörkblå: C 100%, M 89%, Y 27%, K 10% Svart/vit
Designmanual 2019 INLEDNING En stark och tydlig visuell identitet är avgörande för att bygga önskad position och stärka Flexits varumärke. Genom att följa riktlinjerna i denna designmanual säkerställer
Läs merDen grafiska profilieringen för roar
Den grafiska profilieringen för roar 2013 edition INNEHÅLL LOGOTYP 04 LOGOTYPENS FRIZON 05 TYPOGRAFI 06 FÄRGER 07 KONTORSMATERIAL 08 ANNONS & BILDER 10 BROSCHYR 12 GRAFISKA ELEMENT/BYXMÄRKE 14 WEBBSIDA
Läs merFör mycket information! Att presentera vetenskap. Målet med föreläsningen. Planera din presentation besvara dessa frågor: Presentationens struktur
Målet med föreläsningen tt presentera vetenskap Magister-/ Masterkurs Odontologi, VT- 16 Tülay Lindberg, nna Kats Institutionen för Odontologi 1. Lära dig mer om hur man presenterar forskning så att de
Läs merBilaga Digital profilmanual
Bilaga Digital profilmanual Version 1 Januari 2011 SID 2 Innehåll Inledning... 3 Logotyp... 4 Placering... 4 Alternativ placering... 5 Färger... 6 Färgpalett... 6 Färganvändning... 7 Färghierarki... 8
Läs merFöreläsning 10: Gränssnitt och webbdesign
Föreläsning 10: Gränssnitt och webbdesign FSR: 6 Att läsa: Kapitel 6 i Rogers et al.: Interaction Design 1501006 Gränssnitt och webb 2 Översikt Gränssnitt historiskt Kännetecken olika gränssnitt Designutmaningar
Läs merText och typsnitt. Läsbarhet. Tecken per rad. Storlek
Text och typsnitt Läsbarhet Tecken per rad Idealt antal för löpande text i större mängder är 45-65, (55). Tidningar och tidskrifter: 25-35 tecken per rad. För långa rader - svårt för läsaren att snabbt
Läs merFöreläsning 7: Kognition & perception
Föreläsning 7: Kognition & perception FSR: 3, 4 Att läsa: Kapitel 2-3 i Rogers et al.: Interaction design Översikt Vad är kognition, perception? Vad har kognition och perception med interaktionsdesign
Läs merFrågor och svar Gränssnittsdesign/Webbutveckling
Frågor och svar Gränssnittsdesign/Webbutveckling Bilder och optimering 1. Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi eller 96
Läs merKurs i oljemåleri Medborgarskolan
Kurs i oljemåleri Medborgarskolan Lärare Ragnar Österlund Inledning Detta är en kort sammanfattning av de begrepp som vi går igenom på kursen. Det är tänkt som ett minnesstöd snarare än en introduktionstext
Läs merTillgänglig presentation av statistiska data
Tillgänglig presentation av statistiska data Fjärde versionen, men fortfarande ofullständig Pär Lannerö, plus namngivna medhjälpare Uppdaterad 2018-09-19 En vit fläck på kartan? Svårt att hitta talare
Läs merLinjalens inställningar och formatering i ordbehandling.
SYDSOL Handledning ordbehandling 2000-02-23 Linjalens inställningar och formatering i ordbehandling. Syfte: Beskriva linjalens funktioner i ordbehandling och utformning av ett dokument Skall du lyckas
Läs merExtra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare
Den här veckan Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare Kom ihåg att boka tiden för handledning på fredag när doodles kommer upp. Handledning
Läs mer