Grafisk form för användargränssnitt

Storlek: px
Starta visningen från sidan:

Download "Grafisk form för användargränssnitt"

Transkript

1 Grafisk form för användargränssnitt

2 Petra Dryselius Designer, digitala plattformar

3 Digital Communica.on Linköping AB Kompetens och lösningar inom digitala medier. Intranät, externwebb, webbsystem, digitala strategier, användbarhet m.m.

4 Grafisk form för användargränssnitt

5 Upplägg Designprocess Grafisk form - Leverabler - Layout - Hierarki - Formgivning, verktyg som färg, form, typografi mm. - Trender - Tips

6 Designprocess Analysfas Workshop Vad är syqet Effektkarta KoncepTas Skisser, wireframes Designfas Grafisk form Utvecklingsfas Prototyp Utveckling

7 Analysfas Vad är syqet med projektet? Vem är användaren? Vad finns sedan.digare? - Grafisk profil, återkommande element i marknadsföring, se hur produkterna ser ut, hur tjänsterna de säljer är utormade.

8 Effektkarta Varför gör vi den här satsningen? Förklarar i vilken mån systemet förbägrar verksamheten, hur förbägringen ska mätas under och eqer avslutat projekt. Vem skapar den önskade effekten? Grupper av människor som har liknande behov och förväntningar på systemet. SyQe Mätbarhet Målgrupper Källa: InUse Vad vill målgrupperna göra och veta? Behoven, förväntningarna och värderingarna som målgrupperna har. Hur ska det nya lösningen utormas? En design som möter behoven och förväntningarna. Användarmål Steg Steg 1 Steg 2 Steg 3 Steg 1.3

9 KoncepTas Skisser och wireframes

10 Grafisk form Fysiska leverabler Moodboard (Style.les) Style.les är eg slags detaljerat moodboard där färg, form, typsnig, bildspråk kombineras och visas upp. Mockup (PSD eller html & css)

11 Style.les

12 Style.les

13 Style.les

14 PSD mockup

15 Grafisk form Layout och gridsystem

16 Layout och gridsystem

17 Grafisk form Rytm, balans och linjering När vi surfar in på en webbsida upplever vi med en gång om innehållet känns läg ag ta.ll sig. Om det är en oharmonisk sida som stör vårt öga och som spretar åt alla håll finns det risk ag den saknar rytm, balans eller linjering. Rytm Igenkänning, återkommande element med samma placering. Användaren ska känna sig trygg Balans Ögat vill ha balans. Obalans blir en störning. Layout och grids blir vik.ga, men likaså färger, svärta och bilder. Linjering Text och bilder linjeras för ag skapa ordning, balans. Layouten behöver inte ha synliga linjer men tydliga avskiljare mellan element.

18 Rytm, balans och linjering

19 Rytm, balans och linjering

20 Rytm, balans och linjering

21 Grafisk form Symmetri Asymmetri

22 Grafisk form Kontrast

23 Grafisk form Gestaltlagar

24 Grafisk form Låt innehållet styra

25

26 Grafisk form för användargränssnig, Petra Dryselius, Designer, Knowit

27

28 Grafisk form för användargränssnig, Petra Dryselius, Designer, Knowit

29 Visuell hierarki 3 blick 2 blick 1 blick Fokusera Prioritera AGrahera

30 Figur - Grund Vad är figur och vad är bakgrund? - Hjärnan vill skapa ordning och sortera/prioritera innehållet

31 Först när man känner <ll designprinciperna och vet hur man använder dem, - kan de brytas!

32 Eller så kanske Figur och Bakgrund är lika vik<ga?

33 Grafisk form Igenkänning, upprepning, gruppering Var snäll mot användaren. Placering - Var bör en logotyp vara? - En huvudmeny? - KontaktuppgiQer? Det vik<gaste först Vad användaren vill: - Veta - Göra - Tänka - Känna Sparsamt med färg och form - Återkommande färger/ former - Good design is as ligle design as possible.

34 Formgivning Handlar om användandet av designens verktyg Punkt och linje Yta Textur Valör Färg Typografi Djupverkan Tid och rörelse

35 Formgivning Färg Överenskommen betydelse av en färg eller färgkombina.on inom eg system =

36 Formgivning Färg 8-10% defekt färgseende Tydliga färgval Funk.onell färg

37

38 Formgivning Typografi, webbsäkra typsnig Google fonts webbsäkra typsnig?

39 Formgivning Typografi, olika webbläsare Samtliga ovanpå varandra

40 Trender Flat design Card design / Grid design Stort intro- area Typography is King Stora bilder / videos. Videos istället för förklarande text Less clicky, More Scrolly Enkla färgscheman Responsiv design - Must have.

41 Grafisk form för användargränssnig

42 Grafisk form för användargränssnig

43 Grafisk form för användargränssnig

44 Grafisk form för användargränssnig

45 Grafisk form för användargränssnig

46 Grafisk form för användargränssnig

47 SammanfaGning Se.ll ag det finns eg tydligt syqe och mål med projektet Du ska veta vilka användarna är innan du börjar med det grafiska Använd en grid och gör en layout som är ren och enkel Använd eg typsnig som stödjer syqet med projektet Testa i olika browsers hur färger och typsnig ser ut och om de är läsbara Välj funk.onell färg. Se.ll ag kunna förklara dina färgval i förhållande.ll syqe och användningsområde. Vad är vik.gast på webbplatsen, vad är det första användaren ska se? Se.ll ag det syns! Skapa en trendig och hållbar produkt Hämta inspira.on och kopiera andra! Alla gör det, varför uppfinna hjulet igen

48 Läs.ps Smashing books: hgps://shop.smashingmagazine.com/ Många olika böcker, det senaste inom Webdesign och UX, prak.skt hur man gör och hur man ska tänka Effek.v visuell kommunika.on, Bo Bergström Hur du skapar grafisk form som agraherar, hur du får text och bild ag samspela lockande, hur du visuellt profilerar eg företag, hur du skapar eg helhetsugryck med hjälp av färg, form, ljud, text och bild. Designbloggar, Smashing magazine, Webdesignerdepot, Hongkiat Lite mer avancerat, men allt inom webdesign.

49

50 Så, nu kan ni det här! Frågor?

Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com

Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com Portfolio Mathias Andelin www.webbformgivare.se mathias.andelin@gmail.com 1 Innehåll Redesign.......................................................................3 Värvet........................................................................

Läs mer

ANALYS & KONCEPT ETT DOKUMENT FRÅN NOC WEBBYRÅ

ANALYS & KONCEPT ETT DOKUMENT FRÅN NOC WEBBYRÅ ANALYS & KONCEPT ETT DOKUMENT FRÅN NOC WEBBYRÅ ANALYS För att vi ska kunna hjälpa er att ta fram en webbplats som uppfyller era mål och förväntningar måste vi lära känna er och er verksamhet så mycket

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

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

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

Sveavägen 31 SE-111 34 Stockholm. mia.kolmodin@crisp.se +46-(0)70 443 91 91 miakolmodin

Sveavägen 31 SE-111 34 Stockholm. mia.kolmodin@crisp.se +46-(0)70 443 91 91 miakolmodin Sveavägen 31 SE-111 34 Stockholm mia.kolmodin@crisp.se +46-(0)70 443 91 91 miakolmodin f. 1976 Med 13 år erfarenhet av att ta fram digitala lösningar och tjänster till allt från fackförbund, kommuner,

Läs mer

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

Hi-Fi Prototyping + laborationsgenomgång & verktyg

Hi-Fi Prototyping + laborationsgenomgång & verktyg Hi-Fi Prototyping + laborationsgenomgång & verktyg Karin Fahlquist 2015 Frågor att besvara Vad innebär prototyping? Vad är speciellt med hi-fi prototyping? Hur kan man använda dem? Hur väljer man nivå

Läs mer

Användbarhet för webben

Användbarhet för webben Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk

Läs mer

Användbarhet för webben

Användbarhet för webben Användbarhet för webben Varför är webben extra viktig? Användningen av webbaserade aplikationer ökar mycket kraftigt och håller i vissa fall på att ersätta vanliga datorprogram. Webmail, Kallendrar, uppslagsverk

Läs mer

Riktlinjer för Halmstads kommuns grafiska profil

Riktlinjer för Halmstads kommuns grafiska profil Riktlinjer för Halmstads kommuns grafiska profil 1 Bakgrund Vår grafiska profil är ett av flera hjälpmedel för att stärka varumärket Halmstad. Den skapar en enhetlig och professionell bild av Halmstads

Läs mer

On-line produktion TDDC61

On-line produktion TDDC61 On-line produktion TDDC61 Förra veckan Kursupplägg HTML FTP Validering Laboration 1. Deadlines Laborationer: 12/10, kl 08 Lämna in efterhand ni blir färdiga Vi rättar inom 4 arbetsdagar Portfolio, tillfälle

Läs mer

Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1

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

http://www.one-life.com/ http://www.bjork.com/ http://www.ro.me/ http://www.protest.eu/en#!/home

http://www.one-life.com/ http://www.bjork.com/ http://www.ro.me/ http://www.protest.eu/en#!/home http://www.one-life.com/ http://www.bjork.com/ http://www.ro.me/ http://www.protest.eu/en#!/home http://www.oakley.com/legionofoakley?cm_mmc=ads-_-apparel_goggles-_-prs_sigseries-_-appa Inspiration Koncept

Läs mer

Du hittar programmet här på Högskolan Dalarnas webb: http://www.du.se/gd

Du hittar programmet här på Högskolan Dalarnas webb: http://www.du.se/gd Du hittar programmet här på Högskolan Dalarnas webb: http://www.du.se/gd 1 Petter Kolseth Högskolan Dalarna, Grafisk Teknologi pkl@du.se och nsieme consulting, Norra Järnvägsgatan 7 petter@nsieme.se 79135

Läs mer

Portfolio. Mathias Andelin 2014

Portfolio. Mathias Andelin 2014 Portfolio Mathias Andelin 2014 1 Innehåll Responsiv design.............................................................. 3 Sektionsdata webb................................................................

Läs mer

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1

Responsiv webbplats. Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 2014-02-17 1 Responsiv webbplats Tips på hur innehållet ska ses över för en bra användarupplevelse på alla skärmstorlekar 1 Vad är responsivt? Det betyder att webbplatsen känner av vilken skärmstorlek användaren surfar

Läs mer

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014

Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014 Kursplan Gränssnittsdesign och Webbutveckling 1 Vårtermin 2014 Kurswebb: www.creativerooms.se/edu, välj Gränssnittsdesign eller Webbutveckling 1 Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se

Läs mer

Kursplan Webbutveckling 2, 100p Läsår 2013-2014

Kursplan Webbutveckling 2, 100p Läsår 2013-2014 Kursplan Webbutveckling 2, 100p Läsår 2013-2014 Kurswebb: www.creativerooms.se/edu, välj Webbutveckling 2 Lärare: Aino-Maria Kumpulainen, aino-maria.kumpulainen@it-gymnasiet.se Hösttermin 2013 Vecka Tema

Läs mer

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan.

Symmetry: Bortsett från menyn har innehållet av sidan viss symmetri när det kommer till videoklippen som är upplagda på sidan. WorkShop II Checklistor 1.2 Överordnad Struktur Balance: Gränssnittet har just nu viss balans i innehållet, men menyn behöver justeras i förhållande med innehållet samt en fast container för innehållet

Läs mer

Sharecut. Michael De Stefano Robin Gustafsson Fredrik Warfvinge

Sharecut. Michael De Stefano Robin Gustafsson Fredrik Warfvinge Michael De Stefano Michael De Stefano Idé och koncept Grundidé, syfte och innehåll ShareCut är en tjänst som effektiviserar publicering på sociala medier. En hub som gör det enkelt att skriva och publicera

Läs mer

Sluta gissa börja testa workshop alla pratar ux, 28 nov 2013

Sluta gissa börja testa workshop alla pratar ux, 28 nov 2013 Sluta gissa börja testa workshop alla pratar ux, 28 nov 2013 DAYTONA COMMUNICATION AB Riddargatan 17D, 114 57 Stockholm, Sweden Phone +46 8 579 397 50, Fax +46 8 579 397 55 www.daytona.se, info@daytona.se

Läs mer

Curriculum Vitae. Om mig. Nuvarande arbetsgivare och uppdrag. Dick Wennberg Fogdevägen 11 131 50 Saltsjö-Duvnäs

Curriculum Vitae. Om mig. Nuvarande arbetsgivare och uppdrag. Dick Wennberg Fogdevägen 11 131 50 Saltsjö-Duvnäs Curriculum Vitae Dick Wennberg Fogdevägen 11 131 50 Saltsjö-Duvnäs Mobil: 070 894 90 03 E-post: dick.wennberg@gmail.com Om mig I femton år har jag jobbat med digitala lösningar, något som jag brinner för

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

Skapa en upplevelse. Christian Ohlsson 1

Skapa en upplevelse. Christian Ohlsson 1 Skapa en upplevelse Christian Ohlsson 1 User Experience är the way a person feels about using a product, system or service. - Wikipedia Christian Ohlsson 2 User Experience är a person's perceptions and

Läs mer

Wireframe när, vad, hur och varför?

Wireframe när, vad, hur och varför? Wireframe när, vad, hur och varför - 1 Wireframe när, vad, hur och varför? Arbetsflöde är ett samlande begrepp för alla steg som används för att göra en webbplats. Från första början till färdig sajt.

Läs mer

Användningsforum. Strategisk dialog kring tillgänglighet och användbarhet i it

Användningsforum. Strategisk dialog kring tillgänglighet och användbarhet i it Användningsforum Strategisk dialog kring tillgänglighet och användbarhet i it Uppdrag: Användare, 2015-04-14 Andreas Richter, projektledare för Användningsforums kansli Vad är Användningsforum? Regeringens

Läs mer

Konsultprofil. Agil Coach. Lead UX. Product Owner. Konverteringsoptimering. Användbarhet. Agila & Lean metoder. Lärare

Konsultprofil. Agil Coach. Lead UX. Product Owner. Konverteringsoptimering. Användbarhet. Agila & Lean metoder. Lärare Konsultprofil Agil Coach Lead UX Product Owner Konverteringsoptimering Användbarhet Agila & Lean metoder Lärare Sveavägen 31 SE- 111 34 Stockholm mia.kolmodin@crisp.se +46- (0)70 443 91 91 miakolmodin

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

Att skapa en webbplats

Att skapa en webbplats Att skapa en webbplats En introduktion till ämnet med vägledning, tips och råd Andreas Ellhar 2014 1 Innehållsförteckning 1. Syfte med webbplatsen s. 4 2. Domännamn s. 4-5 3. Webbhotell s. 5 4. Webbplatsens

Läs mer

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Projektanvisning Webbsideprojekt Författare: Johan Leitet Version: 2 Datum: 2012-10-09 Inledning Du har nu under ett antal laborationer i webbteknik fått relativt styrda uppgifter där du ensam fått lösa

Läs mer

Effektivare medborgarservice

Effektivare medborgarservice Effektivare medborgarservice inuse AB Sveriges största företag inom användbarhet 22 erfarna specialister Kontor i... Något av vad vi gör just nu Stockholms skolwebb: utbildning i Att skriva för webb SOS

Läs mer

seminarier östergötland

seminarier östergötland seminarier östergötland... våren 2013 Låt dig inspireras av Knowit i Östergötland under våren 2013! Knowit i Östergötland har samlat några av regionens främsta specialister och vi vill nu dela med oss

Läs mer

SLUTPRESENTATION K3 KONCEPTPLAN OCH GRAFISK PROFIL. Hannes Svensson Amanda Lundius Mörck Ebba Krigström Linda Hurtig Jon Högman

SLUTPRESENTATION K3 KONCEPTPLAN OCH GRAFISK PROFIL. Hannes Svensson Amanda Lundius Mörck Ebba Krigström Linda Hurtig Jon Högman SLUTPRESENTATION K3 KONCEPTPLAN OCH GRAFISK PROFIL Hannes Svensson Amanda Lundius Mörck Ebba Krigström Linda Hurtig Jon Högman BAKGRUND Otydlig profilering Svårt att ta del av information Dålig koll på

Läs mer

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0 Webbtillgänglighet Webbtillgänglighet Att göra webbinnehåll så att de är tillgängliga för alla oavsett vilka funktionsnedsättningar man har Att göra webbinnehåll tillgängligt oavsett vilken in- och utmatningsutrustning

Läs mer

01 Brand and Design Consultant Liberty Stockholm LIBERTY STHLM BRAND AND DESIGN CONSULTANCY

01 Brand and Design Consultant Liberty Stockholm LIBERTY STHLM BRAND AND DESIGN CONSULTANCY 01 Brand and Design Consultant Liberty Stockholm Erbjudandet 02 LIBERTY STHLM BRAND AND DESIGN CONSULTANCY Förslag till samarbete Hej Anders, Här kommer en beskrivning av det arbete vi ser som nästa steg.

Läs mer

Institutionen för datavetenskap

Institutionen för datavetenskap Institutionen för datavetenskap Department of Computer and Information Science Examensarbete Ett visuellt designspråk för datorförstärkta landskap i Astrid Lindgrens bygd av Thea Dahlqvist LIU-IDA/LITH-EX-G--11/018--SE

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

Bilaga 3b. Användbarhet. Upphandling av ett helhetsåtagande avseende IT-stöd för pedagogiskt material inom Skolplattform Stockholm

Bilaga 3b. Användbarhet. Upphandling av ett helhetsåtagande avseende IT-stöd för pedagogiskt material inom Skolplattform Stockholm SID 1 (12) Bilaga 3b Användbarhet Förfrågningsunderlag Upphandling av ett helhetsåtagande avseende IT-stöd för pedagogiskt material inom Skolplattform Stockholm Box 22049, 104 22 Stockholm. Besöksadress

Läs mer

PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+

PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ IT-universitetet i Göteborg Interaktionsdesign - Grafiska Gränssnitt 2003-09-17 Deltagare:

Läs mer

TÄVLINGSRESULTAT Ung Företagsamhet Jämtland

TÄVLINGSRESULTAT Ung Företagsamhet Jämtland TÄVLINGSRESULTAT Ung Företagsamhet Jämtland Årets UF-företag Tävlingsvärd Länsförsäkringar Med passion och en dröm att förändra sitt hörn av världen har det här företaget skapat en säljbar och visuellt

Läs mer

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson

Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet - Webbredaktörens skrivhandbok av Karin Guldbrand & Helena Englund Hjalmarsson Klarspråk på nätet är en praktisk handbok för dig som någon gång skriver text för webb, surfplattor och

Läs mer

2013-04-09. Vem är vi? Magnus Äng

2013-04-09. Vem är vi? Magnus Äng 1 2 Vem är vi? Magnus Äng 3 14 år 4 5 TopVisible 6 Kunder Digital byrå ü Grundandes 2012 ü 7 st i TopVisible-team ü +50 år samlad erfarenhet inom Digital Marketing ü Omsättning ca 5,1 Mkr ü Resultat ca

Läs mer

Gränsöverskridande samverkan

Gränsöverskridande samverkan 1 Grafisk Profil Denna grafiska manual är en hjälp för dig som jobbar i eller med Vårdsamverkan Fyrbodal för att skapa en tydlig, enhetlig och konsekvent kommunikation med omvärlden. Vår logga, våra färger

Läs mer

Visuell design Bilder & färger

Visuell design Bilder & färger 1ME321 Webbteknik 1 Lek0on 8 Visuell design Bilder & färger Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 43 Läsanvisningar UpphovsräPslagen Kort sammanfapning

Läs mer

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

Designmanual. Logotype Färger Varumärkesbård Mönster Formgivning Typografi Skyltning

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

Daniel Wetter. Senior UX- Interaktion och tjänsteutveckling

Daniel Wetter. Senior UX- Interaktion och tjänsteutveckling Daniel Wetter Senior UX- Interaktion och tjänsteutveckling Design fungerar när den lyckas förmedla idéer väl på enklaste möjliga sätt. Interaktionsdesign fokuserar speciellt på hur en användare interagerar

Läs mer

Välkommen. Presenta/onsteknik. Konsten a2 övertyga. Henrik Mannerstråle. Powersales Communica0on. onsdag 13 november 13

Välkommen. Presenta/onsteknik. Konsten a2 övertyga. Henrik Mannerstråle. Powersales Communica0on. onsdag 13 november 13 Välkommen Presenta/onsteknik Konsten a2 övertyga Henrik Mannerstråle Presenta/onsteknik Kom ihåg a6 det är fullständigt ointressant vad du säger i din presenta0on det är vad åhörarna tror a6 du säger som

Läs mer

Hej! Helena Leach Designer. Date: September 2015 Subject: Identitet Dummy

Hej! Helena Leach Designer. Date: September 2015 Subject: Identitet Dummy Hej! Helena Leach Designer Date: September 2015 Subject: Identitet Dummy IDENTITETSUTVECKLING Grundelement och visualisering LOGO TYPO FÄRGER BILDSTIL GRID De olika grundelementen i en identitet: Logotyp,

Läs mer

Version 3.0 2012. Grafiska riktlinjer Nya Ostkustbanan

Version 3.0 2012. Grafiska riktlinjer Nya Ostkustbanan Version 3.0 2012 Grafiska riktlinjer Nya Ostkustbanan Nya Ostkustbanan ökar pulsen i hela Sverige Järnvägen mellan Gävle till Härnösand skulle kunna vara en pulsåder för tillväxt. Som knyter ihop Norrland

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

Creating webdesign for a communication agency

Creating webdesign for a communication agency Södertörns högskola Institutionen för kommunikation, medier & IT Examensarbete 15 hp Medieteknik Vårterminen 2012 Programmet för It, medier & design) Creating webdesign for a communication agency Skapa

Läs mer

Så vinner du fajten på Google

Så vinner du fajten på Google Så vinner du fajten på Google Så vinner du fajten på Google Sökmotoroptimeringens grunder Kunskapen som gör att ni kan börja arbeta med er synlighet redan idag. Innehållet viktigare än någonsin SEO = Content

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

Utveckling av Läsaren

Utveckling av Läsaren Utveckling av Läsaren Projektet steg för steg Läsaren har utvecklats sucessivt till att bli den anpassningsbara och situationsoberoende tjänst den är idag. Tabellen nedan visar hur utvecklingen har skett

Läs mer

Vår grafiska profil 2015.04

Vår grafiska profil 2015.04 Vår grafiska profil 2015.04 Logotyp och grafik 4 Vår logotyp 5 Logotypens olika varianter 6 Vår logotyp - ikon 7 Våra profilfärger 8 Logotypen BAS mot olika bakgrunder 9 Logotypen med juridisk avsändare

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

Callisma (2 mån) Adam levererade en modern och plattformsoberoende webbplats som även är integrerad till en E-handelsplattform.

Callisma (2 mån) Adam levererade en modern och plattformsoberoende webbplats som även är integrerad till en E-handelsplattform. KONSULTPROFIL Adam Frontend-utvecklare Sammanfattning Adam är en senior frontend-utvecklare med tyngd på HTML, CSS och JavaScript. Han fungerar väldigt bra både i team och individuellt. Han drivs av att

Läs mer

P r i s u p p g i f t e r

P r i s u p p g i f t e r P r i s u p p g i f t e r Grafisk produktion -datum enligt hemsida eller överrenskommelse Uppdatering AdobeCS4/ CS5, 1dag InDesign grund, 2dgr InDesign steg2, 2dgr InDesign automatisera, spara tid 1dag

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

Webbsystems inverkan på innehåll och användbarhet på webbplatser - oppositionsrapport

Webbsystems inverkan på innehåll och användbarhet på webbplatser - oppositionsrapport Webbsystems inverkan på innehåll och användbarhet på webbplatser - oppositionsrapport Respondenter: Emma Henriksson och Ola Ekelund Opponenter: Eva Pettersson och Johan Westerdahl Sammanfattande omdöme

Läs mer

Vi är ett passionerat utbildningsföretag som har förmågan och viljan att lyckas med ert utbildnings- och utvecklingsprojekt

Vi är ett passionerat utbildningsföretag som har förmågan och viljan att lyckas med ert utbildnings- och utvecklingsprojekt Vi är ett passionerat utbildningsföretag som har förmågan och viljan att lyckas med ert utbildnings- och utvecklingsprojekt Vi bygger goda relationer med alla som berörs av vår verksamhet på effektivitet

Läs mer

Grafisk profil 2015 Uppdaterad senast 2015-01-13

Grafisk profil 2015 Uppdaterad senast 2015-01-13 Grafisk profil 2015 Uppdaterad senast 2015-01-13 Innehåll Vad är en grafisk profil?... 3 Färger... 4 Profilfärg...4 Komplementfärger...4 Gråtoner...4 Tilläggsfärger...4 Färgkoder...5 SciLifeLabs logotyp...

Läs mer

Slutrapport. APFy.me

Slutrapport. APFy.me Slutrapport APFy.me Innehållsförteckning 1 Inledning... 3 2 Mål och syfte... 3 3 Projektbeskrivning... 3 4 Leverabler... 4 5 Resultat... 4 6 Utvärdering och analys... 4 6.1 Utvärdering av resultat... 4

Läs mer

Förstudie SVID.se. Insikter, koncept & roadmap

Förstudie SVID.se. Insikter, koncept & roadmap 1 Förstudie SVID.se Insikter, koncept & roadmap 22 februari 2012 Linnéa Becker, projektledare Erik Almenberg, kundansvarig Jenny Dannstedt, interaktionsdesigner Sammanfattning Uppdraget SVID förändrar

Läs mer

RAPPORT REKRYTERING OCH SOCIALA MEDIER

RAPPORT REKRYTERING OCH SOCIALA MEDIER RAPPORT REKRYTERING OCH SOCIALA MEDIER Kontakt: Elisabeth Thörnsten/ Anna Lindström Datum: 7 sept, 2012 Gun PeBersson Tel: 0739 403916 Gun.peBersson@novus.se Annelie Önnerud Åström Tel: 0739 40 37 61 Annelie.astrom@novus.se

Läs mer

Kravspecifika.on, pappersprototyp & CSS

Kravspecifika.on, pappersprototyp & CSS 1ME321 Webbteknik 1 Lek0on 4 Kravspecifika.on, pappersprototyp & CSS Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Agenda Veckoplanen Vecka 39 UppgiI U2 = L4+L5+L6 UppgiI U3 Allmänna

Läs mer

GRAFISKA RIKTLINJER FÖR ANNONSPRODUKTION

GRAFISKA RIKTLINJER FÖR ANNONSPRODUKTION GRAFISKA RIKTLINJER FÖR ANNONSPRODUKTION EN ENHETLIG PROFIL För oss på HAND är det väldigt viktigt att all vår kommunikation ser likadan ut oberoende vem som annonserar. För att göra detta enkelt har vi

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

Grupp 15 Rapport projektarbete

Grupp 15 Rapport projektarbete Grupp 15 Rapport projektarbete http://student.mtstudent.se/~vt15_mta_15/wordpress/ Magnus Källström magnus01.kallstrom@student.sh.se Yvette Schudeck yvette01.schudeck@student.sh.se Elin Sigvardsson elin01.sigvardsson@student.sh.se

Läs mer

Mobilwebb.com - Mobila hemsidor, snabbt och enkelt

Mobilwebb.com - Mobila hemsidor, snabbt och enkelt Mobilwebb.com - Mobila hemsidor, snabbt och enkelt Agenda 8.30-8.40 Mobilwebb vilka är vi? 8.40-9.00 Mobila trender och mobilt beteende Vad händer på marknaden? Hur påverkar det mobila beteendet våra affärer?

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

QR-kodernas intåg för nytta och nöje!

QR-kodernas intåg för nytta och nöje! QR-kodernas intåg för nytta och nöje! Föredrag av Stig Ottosson om smarta "självlänkande" streckkoder som vi kommer att se alltmer i framtiden. 2012-05-04 Webbvärlden ur exponeringssynpunkt till ca 2010

Läs mer

Skillnader mellan design för tryck och webbdesign

Skillnader mellan design för tryck och webbdesign Vad är en webbtext? Webbtexter är inte en specifik texttyp i likhet med protokoll, rapporter eller artiklar. Istället kan webbtexter vara precis vilken texttyp som helst, och det enda som förenar dem är

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

PROJEKTRAPPORT GRUPP 10

PROJEKTRAPPORT GRUPP 10 PROJEKTRAPPORT GRUPP 10 AD/ID: Oskar Kiviniemi oskarkiviniemi@gmail.com Projektledare: Mikaela Olsson mikaela-olsson@live.se Teknik-/ljud-/bild-ansvarig: Filip Edde Martinsson filipeddemartinsson@gmail.com

Läs mer

Bilaga Digital profilmanual

Bilaga Digital profilmanual Bilaga Digital profilmanual Version 3 December 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 mer

Så skapar du fler affärer på nätet

Så skapar du fler affärer på nätet Så skapar du fler affärer på nätet Så skapar du fler affärer på nätet Sökmotoroptimeringens grunder Kunskapen som gör att ni kan börja arbeta med er synlighet redan idag. Det mobila söket växer Faktorer

Läs mer

Vår grafiska profil 2015.04

Vår grafiska profil 2015.04 Vår grafiska profil 2015.04 Logotyp och grafik 4 Vår logotyp 5 Logotypens olika varianter 6 Vår logotyp - ikon 7 Våra profilfärger 8 Logotypen BAS mot olika bakgrunder 9 Logotypen med juridisk avsändare

Läs mer

Måldriven, informationscentrerad webbdesign

Måldriven, informationscentrerad webbdesign Måldriven, informationscentrerad webbdesign Linus Forsell Digitala Distributionsformer vid Högskolan Väst, Trollhättan, Sverige linus.forsell@student.hv.se 1 Abstrakt I den här essän kommer måldriven och

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

PROSPEKT MEDIAS HANDBOK

PROSPEKT MEDIAS HANDBOK PROSPEKT MEDIAS HANDBOK 1 INNEHÅLLSFÖRTECKNING INLEDNING 3 FACEBOOK 4-5 INSTAGRAM 6-7 TWITTER 8-9 LINKEDIN 10 YOUTUBE 11 2 INLEDNING Idag är sociala medier ett måste i ett företags mediemix. Det har blivit

Läs mer

Bilaga Digital profilmanual

Bilaga 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 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

Prislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet

Prislista. Information. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet. Se detaljerad info i dokumentet Prislista Prislista Produkt Information Pris, SEK Kampanjsida 8.500 Nyhetsbrev 3.500 Banners 900-1200 Mobilwebapp 12.000 Logotyper 8.000-14.000 Informationswebbplats 13.500 Offertbaserade webbplatser Offertbaserade

Läs mer

Anvisningar för din ansökan Följande handlingar ska alltid bifogas din ansökan. Personbevis från Skattemyndigheten Betyg Arbestprover

Anvisningar för din ansökan Följande handlingar ska alltid bifogas din ansökan. Personbevis från Skattemyndigheten Betyg Arbestprover nya media KONST & DESIGn FRIA FÖRBEREDANDE KONSTLINJEN Du söker med 5-10 verk digitalt. Det är valfritt att söka med måleri, skulptur, teckning, video, foto, ljud, objekt osv. Digitala arbetsprover kan

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

VETENSKAPLIG METOD TNGD23 Kursstart: Januari 2013

VETENSKAPLIG METOD TNGD23 Kursstart: Januari 2013 Info GDK3 2013-09-27 Valbara kurser & exjobb Tobias Trofast, LiU 1 VETENSKAPLIG METOD TNGD23 Kursstart: Januari 2013 Kursen kan vara en bra start på ditt examensarbete! Du får: Göra ett upplägg för ditt

Läs mer

DRAFT. Utformning av ny grafisk identitet till Exportakademien

DRAFT. Utformning av ny grafisk identitet till Exportakademien Utformning av ny grafisk identitet till Exportakademien Ett arbete om att ta fram kärnvärden i ett företag och utformningen av en ny grafisk profil. Designing a new graphic identity for Swedish Export

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

DIGITAL MANUAL BILAGA 1 TILL GRAFISK PROFIL KK 13/167

DIGITAL MANUAL BILAGA 1 TILL GRAFISK PROFIL KK 13/167 BILAGA 1 TILL GRAFISK PROFIL KK 13/167 Innehåll Logotyp för webb 2 Användning av logotypen 2 Färger 3 Primärfärger 3 Komplementfärger 3 Att använda färgerna 4 Kontraster 4 Typsnitt 5 Bilder 6 Storlekar

Läs mer

Kunskapscentrumcentrum för Äldres Säkerhet

Kunskapscentrumcentrum för Äldres Säkerhet Kunskapscentrumcentrum för Äldres Säkerhet Kravspecifikation Webbplatsen ska vara uppbyggd så att den följer riktlinjerna från World Web Consortium (W3W). Webbplatsen ska följa standarder för uppmärkningskod.

Läs mer

GÖTEBORGS UNIVERSITETS REGLER FÖR VISUELL IDENTITET

GÖTEBORGS UNIVERSITETS REGLER FÖR VISUELL IDENTITET STYRDOKUMENT Dnr V 2013/1018 GÖTEBORGS UNIVERSITETS REGLER FÖR VISUELL IDENTITET Publicerad Beslutsfattare Ansvarig funktion medarbetarportalen.gu.se/styrdokument Rektor Kommunikationsenheten, Gemensamma

Läs mer

Bildpolicy för Handelshögskolan vid Göteborgs universitet

Bildpolicy för Handelshögskolan vid Göteborgs universitet Bildpolicy för Handelshögskolan vid Göteborgs universitet Detta är en bildpolicy för Handelshögskolan vid Göteborgs universitet. Bildpolicyn ger riktlinjer för hur bilder används i skolans kommunikation.

Läs mer

Arbetsprover för sökande till Beckmans Designhögskola 2015 Form 180 p

Arbetsprover för sökande till Beckmans Designhögskola 2015 Form 180 p Form 180 p 2. Arbetsprover skickas i Postens blåa kartong avsedd för A3- format. Paketet skickas som företagspaket. Vikt upp till 3 kg kostar 215 kr. Spara paketnummer. Märk kartongens kortsida med ditt

Läs mer

Skapa epublikationer för Webben & Mobila Enheter

Skapa epublikationer för Webben & Mobila Enheter emag PRODUKTION Skapa epublikationer för Webben & Mobila Enheter Med emag kan du omvandla statiska PDF-dokument till interaktiva on-linepublikationer för vanliga webbläsare och mobila enheter, och detta

Läs mer

Hemsida till företaget Entusiastisk Coaching

Hemsida till företaget Entusiastisk Coaching Beteckning: Akademin för teknik och miljö Hemsida till företaget Entusiastisk Coaching Annelie Hammar Juni 2010 Examensarbete, 15 högskolepoäng, B Datavetenskap Internetteknologi Examinator: Anders Jackson

Läs mer

PRISLISTA 2015. www.alltombrollop.com. Vi finns där brudparen finns!

PRISLISTA 2015. www.alltombrollop.com. Vi finns där brudparen finns! PRISLISTA 0 Vi finns där brudparen finns! Det råder fullkomlig bröllopsfeber både i Skandinavien och ute i Europa. Bröllop är en festlighet som ska firas ordentligt och populärast är det att göra tillställningen

Läs mer

Läsplattor är gjorda för att läsa på

Läsplattor är gjorda för att läsa på Läsplattor är gjorda för att läsa på om skillnaden mellan dataskärmar, läsplattor, surfplattor och smartphones? Gustaf Öqvist Seimyr, är doktor i datorlingvistik och expert på ögonrörelsemätningar, vid

Läs mer