Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

Save this PDF as:
 WORD  PNG  TXT  JPG

Storlek: px
Starta visningen från sidan:

Download "Design och konstruktion av grafiska gränssnitt. Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU"

Transkript

1 Design och konstruktion av grafiska gränssnitt Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU

2 Idag Making it look good: Visual Style and Aesthetics Visuell design Färger Typografi Exempel och patterns Komplex data

3 Ett exempel

4 Ett exempel

5 Ett exempel

6 Ett exempel

7 Mycket billigt! Armin Flajt Delajt

8 Utseende spelar roll Även vetenskapliga undersökningar visar att det spelar roll hur en sida ser ut Man litar inte på en sida som ser ut att vara gjord av amatörer Användaren trivs bättre Ökar chansen att man vill prova igen Ökar chansen att man få gott rykte Ökar tiden användaren spenderar på sidan Användaren får större tolerans Ökar chansen att man har överseende med småproblem Användbarheten ökar helt enkelt Ibland också effektivitet

9 Utseende spelar roll Väldesignad software tar hänsyn till utseendet, språk och dess ton lika mycket som till kvalitén (kodning) Produkter och websidor stödjer också branding. Interface kan skapa emotionell respons.

10 Samma innehåll olika utseende

11 Samma innehåll olika utseende

12 Samma innehåll olika utseende

13 Samma innehåll olika utseende

14 Samma innehåll olika utseende

15 Visuell design Kognitivt inbyggda fenomen Hjärnan uppfattar vissa saker automatiskt Vissa reaktioner kan förutses Känslor och instinktiva reaktioner spelar in också Kultur Förväntningar Erfarenheter osv...

16 Markera, beteckna, sätta etikett på Färg i UI

17 Färg Färg är det bland det första vi ser. Det är bra att fundera ut ett färgschema Grundregler Använd mörk förgrund mot ljus bakgrund eller tvärtom För att testa skillnaden kan man göra om till gråskala Använd aldrig röd kontra grön för kritiska distinktioner Upp till 10% av alla män har någon form av färgblindhet Ha aldrig t ex liten blå text på en röd eller orange bakgrund Text mer text och lite till

18 Bakgrund o kontrast Kontrast Skarpa kontraster Spänning o styrka Mindre kontrast Lugnande och avslappnande Ljus eller mörk bakgrund? Gör stor skillnad Ljusa klart vanligast Vanliga kontroller funkar bäst på dessa Mörka fräckare, dyster, energisk

19 Hue ( kulör, färgton, nyans )

20 Varma o kalla färger Varma Röd, orange, brun, beige Kalla Blå, grön, lila, grå ( i stora mängder) För att framkalla respekt och konservatism används typiskt kalla färger i synnerhet blått

21 Mättad Färgmättnad Omättad

22 Mättade och omättade färger Mättade eller rena (saturated) färger Klara, briljanta, skarpa gula, röda, gröna etc Framkallar energi, livlighet, värme Vågade och har karaktär Också tröttande för ögat Vanligast att ha max 1 eller 2 mättade färger Resten omättade, nedtonade

23 Exempel

24 Exempel

25 Kombinationer Vad händer om man kombinerar? 2 mättade färger = mer liv, energi än bara 1 färg 1 mättad och 1 omättad = mer uppmärksamhet mot mättad Ofta använder man ett litet antal grundfärger och sedan variationer på dessa Mindre splittrat intryck

26 Exempel

27 Exempel

28 Färgblindhet

29 Färgblindhet Förmedla aldrig information med enbart färg Använd istället medföljande text, form eller något annat. Undvik röd-gröna kombinationer If possible use only yellow, blue, black, grey and white hues Test, test, test! Mer info

30 Sammanfattning Färgval spelar roll Se över färgscheman i projektet

31 Typografi Typografi är läran om texter och dess utformning. En text kan avstavas, radbrytas och sidbrytas på flera olika sätt. Mellanrummet mellan raderna, bredd, marginaler, placering påverkar det totala intrycket Traditionellt = hur lätt det är att läsa och förstå en text Idag = att påverka Viktigt på nätet

32 Sans-serif (sans = utan) Serif Typografi Sans-serif ofta bättre i små storlekar på datorskärm men på pappret är det tvärtom. Webben: Verdana Georgia

33 Typografi Vilket/vilka typsnitt man använder spelar också roll för vilket intryck man ger Varje typsnitt har sin egen röst

34 Typografi ANVÄND INTE TEXT MED BARA STORA BOKSTÄVER EFTERSOM DET ÄR SVÅRARE ATT LÄSA Undantag kan vara vissa rubriker

35 Läsbarhet Undvik kursiv text eller fonter med mycket ornament ord per kolumn är ungefär lagom för att behålla läsbarhet (ungefär 500 pixels) Låt kortare textstycken vara vänsterjusterade

36 Online text Man läser inte allt online utan man snarare scannar texten. Text ska vara kortare online än på papper Länkar, Headings, punkter etc används för att dra uppmärksamhet till viktigt eller intressant innehåll Bli kort och direkt så mycket som möjligt Det är viktigt med trovärdighet (välskriven text, bra grafik, utgående länkar) Read more:

37 Online text Kontrasten mellan text and bakground ska inte vara för stor eller för liten Mörkgrå på vit bakgrund är bättre än svart på vitt Svart på en off-white bakgrund är inte svårt att läsa heller Och mörk text på en ljus bakgrund är är mer läsbart än ljus text på en mörk bakgrund

38 Visual Framework Vad Designa varje sida med samma grundläggande layout, färg, stil. När Applikationer eller sajter med många olika sidor (typ allt). Man vill att det ska sitta ihop Varför Konsistent design av varje sida gör att man känner igen sig och inte behöver anstränga sig lika mycket. Bidrar till branding också. Hur Skapa en genomgående look-and-feel för alla sidor i applikationen Färger, fonter, stil på text Navigation Layout-grid

39 Exempel

40 Exempel

41 Desktop-GUI:n Desktop-GUI:n ofta hårt styrda av design-guidelines speciellt nyttoprogram Vad kan man göra Bakgrunder Deep Background Färger och fonter (vikt och kontrast) Separerar informationsnivå och vikt Kanter (man kan använda runda kanter och diagonaler) Bilder Man kan göra knappar gjorda av bilder Träd, listor mm kan också justeras med bilder

42 Rymd, vinklar o textur Textur När man ska täcka en yta ser ofta någon slags textur bättre ut än bara att fylla med en färg Bilder Kan vara effektivt, men finns i desktop-gui:n mest när de har en funktion (ikoner)

43 Deep Background Vad Placera en bild i bakgrunden som ger intryck av att finnas bakom övriga gränssnittselement När Man har en layout med ett antal distinkta GUI-element som inte är särskilt överbefolkad och vill att det ska vara intressantare än med vanlig vit/grå bakgrund Varför Lyckas man göra en bakgrund som ser ut att finnas bakom så kan det vara snyggt helt enkelt Hur Lite överkurs. Boken talar om soft focus, color gradients, depth cues och no strong focal points

44 Soft focus (undvik detaljer) Color gradients (starka och rena färger OK men inte hårda linjer mellan dem) Depth cues (ledtrådar att något är långt bort, vertical gradient, oklarhet) No strong focal points Deep Background

45 Few Hues, Many Values Vad Välj en, två eller max 3 huvudkulörer (hues). Skapa en färgpalett genom att ha olika varianter av dessa När Man skapar en färgpalett och vill undvika ett splittrat intryck, men ha någon slags karaktär Varför Alltför många färger, speciellt klara och mättade gör lätt GUI:t överlastat och stökigt. Färgerna slåss om användarens uppmärksamhet. Hur Välj ett par färger (svart o vitt räknas inte) Sen kan man ha ett stort antal inom dessa färger om det krävs. Verktyg som visats kan vara användbara för detta.

46 Exempel

47 Exempel

48 Showing Complex Data

49 Showing Complex Data Tidwell kap 7 Preattentive variables (färg, storlek mm) Saker som uppfattas direkt av människor utan vidare tänkande Fortsättning på föregående om visual flow, grouping etc Bra att känna till vid design

50 Hitta de blå prickarna

51 Hitta de blå prickarna

52 Hitta tal > 1

53 Hitta tal > 1

54 Hitta tal > 1

55 Hitta tal > 1

56 Mera

57 Forts preattentive

58 Forts preattentive

59 Exempel

60 Exempel

61 Showing Complex Data Tidwell kap 7 Läs inledning och Overview plus detail

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag

Den här veckan. Kapitel 7 och 11. Kom ihåg att boka tiden för handledning på fredag. Uppsamling av missade övningar på onsdag Den här veckan Kapitel 7 och 11 Kom ihåg att boka tiden för handledning på fredag Uppsamling av missade övningar på onsdag Making it look good Visuell design Färger Typografi Exempel och patterns Komplex

Läs mer

Extra handledning för de som vill det på onsdag i ML1 - Drop in, inga tider behöver bokas - En lärare

Extra 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

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Data- och informationsteknik Chalmers/GU 1 Idag Lite av varje Resten av Tidwell Små skärmar Kodtips för projekt Tenta Hjälpmedel

Läs mer

Grafisk 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 mer

Grafisk 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 mer

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU 1 Idag Lite av varje LayoutManagers Sista Tidwell Backend projekt (Små skärmar)

Läs mer

Grafisk Profil. Grafisk Profil Version 1.0 06/12-2005

Grafisk 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 mer

GRAFISK PROFIL TIDAHOLMS KOMMUN

GRAFISK PROFIL TIDAHOLMS KOMMUN GRAFISK PROFIL TIDAHOLMS KOMMUN INNEHÅLL 2 3 4 5 6 7 8 8 8 Varför grafisk profil? Övergripande riktlinjer Logotyper Kommunvapen Tidaholmslogotyp Verksamhetsspecifika symboler Skyltar Mallar Audiell profil

Läs mer

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Sjuk Kortföreläsning Idag Torsdag intro till projekt Kom då! 1 MENYER OCH TOOLBARS

Läs mer

Grafisk manual Version 1.0

Grafisk manual Version 1.0 Grafisk manual 2 0 / Innehåll 1 / Introduktion 1.1 / Syfte 2 / Grafisk manual 2.1 / Logotyp 2.1.1 Logotypens sammansättning 2.1.2 Storlekar & friyta 2.1.3 Användning 2.1.4 Strapline 2.1.5 Operatörslogotyper

Läs mer

Grafisk profil EN KULTURSKOLA I RÖRELSE 2011 03 07 Denna grafiska manual tillhör festivalen En Kulturskola i Rörelse som arrangeras av Kulturskolan i

Grafisk profil EN KULTURSKOLA I RÖRELSE 2011 03 07 Denna grafiska manual tillhör festivalen En Kulturskola i Rörelse som arrangeras av Kulturskolan i Grafisk profil EN KULTURSKOLA I RÖRELSE 2011 03 07 Denna grafiska manual tillhör festivalen En Kulturskola i Rörelse som arrangeras av Kulturskolan i Göteborgs Stad. Bakgrund En Kulturskola i Rörelse är

Läs mer

GRAFISK MANUAL 6/2012

GRAFISK MANUAL 6/2012 GRAFISK MANUAL 6/2012 2 Innehållsförteckning Innehållsförteckning 01 Baselement Svenska folkpartiets logotyp Vår logo: dimensioner och skyddsområde Logoversioner och minimistorlek Logons användning Applikationer

Läs mer

Vad utmärker ett bra användargränssnitt?

Vad utmärker ett bra användargränssnitt? Vad utmärker ett bra användargränssnitt? Att kommunicera med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphic User Interface GUI = Graphic User Interface GUIn, eller grafiska gränssnitt

Läs mer

small phones for big people Grafisk manual Innehåll Förutsättningar small phones for big people En enhetlig grafisk profil 1 Logotyp

small phones for big people Grafisk manual Innehåll Förutsättningar small phones for big people En enhetlig grafisk profil 1 Logotyp Grafisk manual Innehåll Förutsättningar En enhetlig grafisk profil 1 Logotyp Cellulite s logotyp 2 Mini logga 3 Frizon 4 Storlek 5 Placering 5 Färger 2 Cellulite s färger 6 Typografi Cellulite s typografi

Läs mer

Trädgårdscentrum AB. Grafisk profil

Trä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 mer

Grafsk Profl. Stilmanual för Astronomisk Ungdoms kommunikation

Grafsk Profl. Stilmanual för Astronomisk Ungdoms kommunikation Grafsk Profl Stilmanual för Astronomisk Ungdoms kommunikation Inledning Varför grafsk profl? Identifkation För att alla ska uppfatta att det är Astronomisk ungdom som står bakom ett meddelande måste vi

Läs mer

Layout och Navigation

Layout och Navigation Layout och Navigation Layout Layout Det är tre saker som definierar formen på ett GUI Gruppering av element Balans Grid & alignment (dvs hur komponenter är utlagda på ett osynligt rutnät) och som sagt,

Läs mer

Färger. Matthew Woehlke Översättare: Stefan Asserhäll

Fä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 mer

Text och typsnitt. Läsbarhet. Tecken per rad. Storlek

Text 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 mer

FÄRGER GRAFISKA ELEMENT BILD- OCH TEXTMANÉER ANVÄNDNING SLUTORD

FÄ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 mer

1.2 Logotypens färgsättning

1.2 Logotypens färgsättning GRAFISK MANUAL Vår grafiska profil Den grafiska profilen utgörs av logotypen, våra färger och vår typografi. Dessa bildar tillsammans bilden och uppfattningen av varumärket Ridentity. Denna manual beskriver

Läs mer

Vad utmärker ett bra gränssnitt?

Vad utmärker ett bra gränssnitt? Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphical User Interface GUIn, eller grafiska gränssnitt hittar vi på alla sorters skärmar I

Läs mer

Lektion 2 - CSS. CSS - Fortsätt så här

Lektion 2 - CSS. CSS - Fortsätt så här Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt

Läs mer

Grafisk design För synskadade och lite om dyslexi

Grafisk 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 mer

Åbo Akademis Studentkårs grafiska profil. Utarbetad av Ken Snellman.

Å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 mer

grafisk design & layout regler

grafisk 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 mer

Kommunikationsorienterad. visuell design

Kommunikationsorienterad. 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 mer

FÄRGLÄRA Portfolieuppgift i bild

FÄRGLÄRA Portfolieuppgift i bild FÄRGLÄRA Portfolieuppgift i bild Mål: Att lära sig vad färg är och vad som händer när jag blandar olika färger Att lära sig blanda färger Att veta vad en färgcirkel och komplementfärger är Att kunna skilja

Läs mer

IP-solutions Grafisk Profil

IP-solutions Grafisk Profil Grafisk Profil Varför branding är viktigt Positionering Genom design så förmedlar och förankrar ett företag sin position på marknaden. Förtroende Företag med ett genomarbetat varumärke förmedlar högre

Läs mer

Primär. Sekundär. färger 1.0

Primär. Sekundär. färger 1.0 grafisk manual 1.0 färger Primär Den orangea färgen är Apelsinblommans husfärg och är tagen från apelsinen för att skapa en tydlig återkoppling till företagets namn. Orange är en energifylld färg som

Läs mer

Typografi, text & designperspektiv

Typografi, text & designperspektiv Typografi, text & designperspektiv Serif Hårstreck Stapel Heplx x-höjd Baslinje Grundstreck Serif Underhäng Inre form I dag Lite bakgrund Övergripande grunder inom typografi Text hantering Elva Synlig

Läs mer

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar

Läs mer

KULTURRÅDET - EN INSPIRERANDE MYNDIGHET

KULTURRÅDET - EN INSPIRERANDE MYNDIGHET 2008-01-28 09.32 KULTURRÅDET - EN INSPIRERANDE MYNDIGHET Kulturrådet har i uppdrag att förverkliga de kulturpolitiska beslut som riksdag och regering fattat. Det är ett viktigt uppdrag och ett inspirerande

Läs mer

GRAFISKA RIKTLINJER 1

GRAFISKA RIKTLINJER 1 GRAFISKA RIKTLINJER 1 ETT PARTITUR FÖR ÖGAT Det går kanske inte att jämföra grafiska riktlinjer med ett partitur. Men lite fritt tolkat kan man säga att en grafisk manual innehåller alla element som behövs

Läs mer

Analys av com hems startsida

Analys av com hems startsida IT-Universitetet Interaktionsdesign Grafiska gränssnitt, 6p Göteborg ht 2003 Analys av com hems startsida Björn Nord d00nord@dtek.chalmers.se 1. Innehållsförteckning 1. Innehållsförteckning... 2 2. Inledning...

Läs mer

Vi möts dagligen av en

Vi 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 mer

Research. Erikdalsbadets utomhusbad i Stockholm

Research. Erikdalsbadets utomhusbad i Stockholm Framtidens färg Framtidens färg kommer varken att handla om nya kulörer eller färgkombinationer, vilket tidigare ofta har kännetecknat en viss tidsperiod. I framtiden får färgen sin betydelse genom kontexten

Läs mer

Ett enklare sätt att färgsätta Breddar din designpalett

Ett enklare sätt att färgsätta Breddar din designpalett Fasad 1 Ett enklare sätt att färgsätta Breddar din designpalett Färger, skuggningar, texturer du som arkitekt eller designer har starka visuella verktyg. Våra fasadskivor i fibercement möter dig hela vägen.

Läs mer

Hö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 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 mer

Grafisk manual. Innehåll. Kontakt: max@desmond.com

Grafisk 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 mer

S.M.A.R.T UF 07/11 2014 GRAFISK PROFIL Emin Karalic. Grafisk profil 2014/2015

S.M.A.R.T UF 07/11 2014 GRAFISK PROFIL Emin Karalic. Grafisk profil 2014/2015 Grafisk profil 2014/2015 Förord Vi inom S.M.A.R.T UF arbetar för avstigmatiseringen kring psykisk ohälsa genom olika projekt. Talespersonen som agerar som en del av ansiktet utåt är Emin Agga. Han jobbar

Läs mer

Profilmanual, internt

Profilmanual, 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 mer

Brandskyddsföreningen är en allmännyttig ideell förening som arbetar för ett brandsäkrare Sverige. Brandskydds föreningen är ett ledande

Brandskyddsfö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 mer

Centerpartiets grafiska manual Version 2.2, 2007

Centerpartiets grafiska manual Version 2.2, 2007 Centerpartiets grafiska manual Version 2.2, 2007 innehåll Centerpartiets logotyp 1 Centerpartiets färg 2 Centerpartiets typografi 3 Exempel och anvisningar 4 Kontakt & nerladdning 5 Centerpartiets logotyp

Läs mer

GRAFISK MANUAL. Trollhättans Missionskyrka 2014-04-24

GRAFISK MANUAL. Trollhättans Missionskyrka 2014-04-24 GRAFISK MANUAL Trollhättans Missionskyrka 2014-04-24 Kapitel 8, Marknadsföring är tills vidare utelämnad då det tar tid att genomarbeta konsekvenserna för programblad och hemsida samt hur vi vill marknadsföra

Läs mer

Värmdö IFs grafiska profil 4. Logotyp 5-9. Färg 10. Typografi 11-12. Brevpapper 13. Visitkort 14. Korrespondenskort 15.

Vä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 mer

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

Läs mer

Innehåll. 3 Grafisk profil. 4 Logotyp Färgversion av logotyp Konturversion av logotyp Inga förändringar tillåtna Frizon Placering Storlek

Innehå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 mer

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

behö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 mer

Kommunikation och presentation

Kommunikation och presentation Kommunikation och presentation MFM310 2010-09-16 Eva Larsson FoUU-enheten primärvården i Fyrbodal Om din presentation: Bilderna ska vara stöd, ersätter ej muntlig presentation. Högst en bild per minut.

Läs mer

En stiligare portal Laboration 3

En stiligare portal Laboration 3 Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt

Läs mer

SWEBO Bioenergy Grafisk profil

SWEBO 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 mer

Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan

Design av användargränssnitt. Vad behöver man veta? Generella designprinciper. Vad är ett användargränssnitt? Några egenskaper hos människan Design av användargränssnitt Vad är ett bra användargränssnitt? Vad påverkar designen? Utvärdering viktig Praktiska råd och tips - Heuristik Exempel på bra och mindre bra design Några egenskaper hos människan

Läs mer

GRAFISK MANUAL WALLOXSTRAND

GRAFISK MANUAL WALLOXSTRAND GRAFISK MANUAL WALLOXSTRAND WALLOXSTRAND INTRODUKTION VARUMÄRKET WALLOXSTRAND För att förstärka och förtydliga varumärket Walloxstrand behövs en tydlig och gemensam hållen identitet. Den grafiska profilen

Läs mer

INLEDNING. Inledning Logotyp Färger Teckensnitt Tillämpningar

INLEDNING. 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

Grafisk profil & kommunikation Vänersborgs kommun. Version 1.5 - maj 2013

Grafisk profil & kommunikation Vänersborgs kommun. Version 1.5 - maj 2013 Grafisk profil & kommunikation Vänersborgs kommun Version 1.5 - maj 2013 Innehåll Grafisk profil & kommunikation Vänersborgs kommun 2 Om denna manual 3 Logotypen 4 Logotypen - 3 olika varianter 5 Logotyp

Läs mer

LOKALISERA. Designmanual

LOKALISERA. Designmanual L LOKALISERA Designmanual Innehåll 5 Lokalisera AB 6 Logotyp 7 Användning av logo 8 Färger 9 Grafiska element 10 Typsnitt 11 Bildanvändning 12 Kontakt Lokalisera AB I och med övergången från Xpresskontor

Läs mer

Anvä ndärguide Nyä Expeditionsresor

Anvä ndärguide Nyä Expeditionsresor Anvä ndärguide Nyä Expeditionsresor Hjälpguide för att använda Wordpress och Nya Expeditionsresor.se 2014-08-10 Innehållsförteckning Logga in till Wordpress-panelen... 3 Skapa bildspel... 4 Färgkoder...

Läs mer

Allt är Tobbes fel. Grafisk profil för förbundet. Ung Pirat

Allt ä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 mer

Projekt 1 Webb- och inform ationsdesign

Projekt 1 Webb- och inform ationsdesign IT-universitetet MDI Interaktionsdesign Interaktionsdesign Grafiska gränssnitt 6p HT 03 Projekt 1 Webb- och inform ationsdesign Grupp 6 Theresa Harmanen, Linus Kjellqvist, Camilla Orrenäs, Emma Thunström

Läs mer

INTRODUKTION TILL LOGOTYPEN

INTRODUKTION 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 mer

Grafisk form för användargränssnitt

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 mer

design & layout Distansskolan 1

design & 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 mer

Primär färgpalett. Rött RGB: HEX: #A92B31. Guld RGB: HEX: #AD9469

Primär färgpalett. Rött RGB: HEX: #A92B31. Guld RGB: HEX: #AD9469 Huddinge Färger & gradienter Primär färgpalett Färg är en av de mest igenkännbara delarna av ett varumärke. I bästa fall kan det bli det element som omvärlden främst kopplar till företaget. Huddinge primära

Läs mer

Om din presentation:

Om din presentation: Om din presentation: Bilderna ska vara stöd, ersätter ej muntlig presentation. Högst en bild per minut. Välj raka typsnitt som är standardinstallerade i alla datorer. Luftiga marginaler som här och undvik

Läs mer

Vad påverkar designen?

Vad 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 mer

Den grafiska profilieringen för roar

Den 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 mer

Varumärket - föreningens hjärta... 3. Logotyp... 4. Logotypens frizon... 5. Deviselement... 6. Profilfärger... 7. Primära färger...

Varumärket - föreningens hjärta... 3. Logotyp... 4. Logotypens frizon... 5. Deviselement... 6. Profilfärger... 7. Primära färger... 1 Varumärket - föreningens hjärta... 3 Logotyp... 4 Logotypens frizon... 5 Deviselement... 6 Profilfärger... 7 Primära färger... 7 Sekundära färger... 8 Tertiära färger... 9 Typsnitt & typografi... 10

Läs mer

Anpassning av Windows 7 och Word 2010

Anpassning av Windows 7 och Word 2010 Anpassning av Windows 7 och Word 2010 Det finns en hel del små förändringar man kan göra för att det ska bli lättare att navigera i datorn, läsa och skriva. Med kortare rader, tydligt typsnitt större avstånd

Läs mer

Lampladan City. Grafisk manual

Lampladan City. Grafisk manual Grafisk manual Innehåll 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Introduktion Logotyp Logotyp: Färgalternativ Logotyp: Färgalternativ Färger Färger: Förklaring Grafisk dekor Typografi Typografi: Tillämpling

Läs mer

aloq.se Loxysoft AB Post: Box 153, 840 60 Bräcke Besök: Öneslingan 11, Frösön Tel: 063-18 34 40 Fax: 063-12 40 35 info@loxysoft.se www.loxysoft.

aloq.se Loxysoft AB Post: Box 153, 840 60 Bräcke Besök: Öneslingan 11, Frösön Tel: 063-18 34 40 Fax: 063-12 40 35 info@loxysoft.se www.loxysoft. aloq.se Loxysoft AB Post: Box 53, 840 60 Bräcke Besök: Öneslingan, Frösön Tel: 063-8 34 40 Fax: 063-40 35 info@loxysoft.se www.loxysoft.se Grafisk manual Loxysoft AB Text och design: aloq AB, Östersund

Läs mer

En bild säger mer än tusen ord

En bild säger mer än tusen ord Identitet 2 3 En bild säger mer än tusen ord Ideon Science Park är inte bara en organisation och ett geografiskt område. Det är också ett starkt varumärke som skapar positiva bilder i många människors

Läs mer

Om din presentation:

Om din presentation: Om din presentation: Bilderna ska vara stöd, ersätter ej muntlig presentation. Högst en bild per minut. Välj raka typsnitt som är standardinstallerade i alla datorer. Luftiga marginaler som här och undvik

Läs mer

Grundlä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. 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 mer

Markbyggarna. Markbyggarna. Markbyggarna. Markbyggarna LOGOTYP VARIANTER

Markbyggarna. Markbyggarna. Markbyggarna. Markbyggarna LOGOTYP VARIANTER Grafisk manual Markbyggarna AB, 2013 LOGOTYP Markbyggarnas logotyp föreställer två träd. Logotypen kommunicerar Markbyggarnas uppdrag inom park- och markarbete genom den bruna jordfärgen i texten och de

Läs mer

B känns ny och ger en överblick över många delar av tidningen och får mig att leta mig vidare B

B känns ny och ger en överblick över många delar av tidningen och får mig att leta mig vidare B 2011-11-06 07.49.41 B Bra kontraster. 2011-11-06 11.13.50 A 2011-11-06 23.19.52 A 11.12.39 A 11.16.15 A 11.16.52 A 11.27.11 B 11.27.32 A luftig och stilren, man blir störd när man läser artiklar av att

Läs mer

VISUELLA FÖRHÅLLANDEN

VISUELLA FÖRHÅLLANDEN VISUELLA FÖRHÅLLANDEN Hur man uppfattar ljuset i ett rum kan beskrivas med sju begrepp som kännetecknar de delar av synintrycken som man kan iaktta och beskriva ljusnivå, ljusfördelning, skuggor, bländning,

Läs mer

kärnvärden & grafisk profil

kärnvärden & grafisk profil kärnvärden & grafisk profil 1 Studiefrämjandet ska vara en frigörande kraft för människors möjligheter i ett samhälle med respekt för naturens och kulturens mångfald. Studiefrämjandets vision antagen 2007

Läs mer

Logotyp. Logotyp med förvaltningsnamn. Frizon. Typsnitt. Färger. Futura Book ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö

Logotyp. Logotyp med förvaltningsnamn. Frizon. Typsnitt. Färger. Futura Book ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö GRAFISK MANUAL Logotyp Landstinget Dalarnas logotyp består av två enheter, symbol och namn. Landstingets symbol är en kombination av bokstäverna L och D. De bildar en symbol som är enkel att använda och

Läs mer

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet

GRÄNSSNITTSDESIGN. Ämnets syfte. Kurser i ämnet GRÄNSSNITTSDESIGN Ämnet gränssnittsdesign behandlar interaktionen mellan dator och människa med fokus på designaspekterna i utveckling av användbara, tillgängliga och tilltalande gränssnitt. Det innehåller

Läs mer

Grafisk manual. 1.0 Index. Om logotypen... 2 DOTTERBOLAG... 3 DOTTERBOLAG 2 RADER... 4 VARIATIONER... 6 EXEMPEL PÅ EJ TILLÅTEN ANVÄNDNING...

Grafisk manual. 1.0 Index. Om logotypen... 2 DOTTERBOLAG... 3 DOTTERBOLAG 2 RADER... 4 VARIATIONER... 6 EXEMPEL PÅ EJ TILLÅTEN ANVÄNDNING... Grafisk manual 1.0 Index Om logotypen... 2 DOTTERBOLAG... 3 DOTTERBOLAG 2 RADER... 4 Friyta och MinimIstorlek... 5 VARIATIONER... 6 EXEMPEL PÅ EJ TILLÅTEN ANVÄNDNING... 7 EXEMPEL PÅ EJ TILLÅTEN ANVÄNDNING...

Läs mer

Kommunikations- orienterad visuell design

Kommunikations- orienterad visuell design Kommunikations- orienterad visuell design Magnus Haake Inst. för Designvetenskaper, LTH Lunds universitet Kommunikationsorienterad visuell design = Kognitivt orienterad grafisk design Varför kognitivt

Läs mer

0.1 PROFILANSVARIG FÖRORD OCH

0.1 PROFILANSVARIG FÖRORD OCH VISUELL IDENTITET 0.1 FÖRORD OCH PROFILANSVARIG I denna manual drar vi upp riktlinjerna för den grafiska kommunikationen kring varumärket Höga Kusten. Syftet med detta är att skapa en tydlig destination.

Läs mer

High Voltage Valley möjliggör framtidens energieffektiva värld.

High Voltage Valley möjliggör framtidens energieffektiva värld. High Voltage Valley möjliggör framtidens energieffektiva värld. INNEHÅLL 1 En världsledande region inom Elkraftteknik 2 HVV:s kärnvärden och identitet 3 Logotyp 4 Profilfärger 5 Typografi 6 Layout 7 Avsändare

Läs mer

Detta är inte en ny grafisk profilhandbok utan version 2.0 enklare, tydligare och med fokus på innehållet i kommunikationen, inte utseendet.

Detta är inte en ny grafisk profilhandbok utan version 2.0 enklare, tydligare och med fokus på innehållet i kommunikationen, inte utseendet. Grafisk profil 2.0 Vimmerby kommun tog fram en grafisk profil 2008 för att skapa en tydlighet i sin kommunikation. I samband med att en ny destinations-logotyp tagits fram har behovet att förenkla och

Läs mer

Grafisk Manual. Version 1.0

Grafisk Manual. Version 1.0 Grafisk Manual Version 1.0 Innehåll Inledning...3 Logotyp...4-5 Symbol och ordbild...4 Lokalavdelningar...5 Logotypens säkerhetszon...5 Storlekar...5 Grafiskt mönster...6 Flagga... 7 Färger...8 Typografi...9

Läs mer

Grafisk manual. version 1.2

Grafisk manual. version 1.2 Grafisk manual version 1.2 Innehåll 1.0 Varför en grafisk manual? 1.1 När ska manualen användas? 1.2. Använda profilmaterial 1.3 Lämna synpunkter 2.0 Namnet och organisationen 2.1 Namnet 2.2 Presentationstext

Läs mer

Grafisk profil för Ottenby Åkeri

Grafisk profil för Ottenby Åkeri Grafisk profil för Ottenby Åkeri Grafisk profil framtagen för Ottenby Åkeri utav designbyrån ADDinnovation 2006 Inledning Grafisk profil Den största vinsten med en enhetlig grafisk profil är att företagets

Läs mer

färger - för profil och känsla

fä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 mer

Design och konstruktion av grafiska gränssnitt

Design och konstruktion av grafiska gränssnitt Design och konstruktion av grafiska gränssnitt Peter Börjesson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Idag Pappersprototyper Designexempel Listor (Tidwell kap.5, List of Things)

Läs mer

Förord. Innehåll. Logotyp 3 Typsnitt 4 Färger 5 Profilelement 6 Profilmallar 7-9

Förord. Innehåll. Logotyp 3 Typsnitt 4 Färger 5 Profilelement 6 Profilmallar 7-9 Grafisk Guide 1.0 Förord Den grafiska guiden ska fungera som en vägledning för allt profilmaterial; både för tryck och webb och såväl för extern som intern kommunikation. Rocklunda Restaurang & Konferens

Läs mer

Elektronisk publicering TNMK30

Elektronisk publicering TNMK30 Elektronisk publicering TNMK30 Muddycards ERD MySQL Säkerhet. Förra gången Idag Muddy cards resultat MySQL-kopplingar mellan tabeller Usability - användbarhet Interaktionsdesign Projektuppgift. Muddy Cards

Läs mer

GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL

GRAFISK PROFILMANUAL GRAFISK PROFILMANUAL 1 GRAFISK PROFILMANUAL 3 Innehåll LOGOTYPEN 6 FÄRGER 8 TYPOGRAFI 10 ANNONS 12 ROLL-UP 13 VEPA/BANDEROLL 14 VISITKORT 15 BREVPAPPER/FAXBLAD 16 KUVERT 17 FLAGGOR 17 PROFILKLÄDER 18 WEBB 19 BILDMANÉR 20

Läs mer

Palmeblads Grafiska är återförsäljare för exklusiva bröllopskonceptet Bjud-in.

Palmeblads Grafiska är återförsäljare för exklusiva bröllopskonceptet Bjud-in. Palmeblads Grafiska är återförsäljare för exklusiva bröllopskonceptet Bjud-in. Prislista 2015 Champagne guld: Kollektionen champagne guld går i toner av guld. Gästerna får först ett save-the-day-kort som

Läs mer

Laboration 2. Webbproduktion En stiligare webbsida HT2015

Laboration 2. Webbproduktion En stiligare webbsida HT2015 Laboration 2 Webbproduktion Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt sätt som möjligt. Nu är det dags att ge ögat något vackert att vila på.

Läs mer

förankrade i Sverige och den vardag som svenskarna upplever oavsett klass, bostadsort, ålder eller ursprung.

förankrade i Sverige och den vardag som svenskarna upplever oavsett klass, bostadsort, ålder eller ursprung. En guide till Alliansens utseende 2014 OM ALLIANSEN VÅR AMBITION Alliansen ska upplevas som: förankrade i Sverige och den vardag som svenskarna upplever oavsett klass, bostadsort, ålder eller ursprung.

Läs mer

Föreläsning 4. CSS Stilmallar för webben

Föreläsning 4. CSS Stilmallar för webben Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll

Läs mer

Layout. Layout. Varför layout? Proportioner. Rutnät, gruppering & justering. skapa struktur skapa balans markera betydelse

Layout. 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 mer

Motstånd med 5 eller 6 ringar Serie E48 och E96 Med 1:a ringen brun = 1

Motstånd med 5 eller 6 ringar Serie E48 och E96 Med 1:a ringen brun = 1 Motstånd med eller ringar Serie E och Med :a ringen brun = Nedan visas motstånd med % tolerans (=) dvs te ringen brun. För % tolerans (E) skall femte ringen istället vara röd. -e ringen visas ej. Anger

Läs mer

RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK. Grafisk manual

RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK. Grafisk manual RIKTLINJER FÖR ETT ENHETLIGT UTTRYCK Grafisk manual Riksförbundet Attention är en intresseorganisation för människor med neuropsykiatriska funktionshinder. Vi arbetar för att de barn, ungdomar och vuxna

Läs mer