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?

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

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

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

Förra gången. jquery Lab 4 Muddy Cards resultat.

Förra gången. jquery Lab 4 Muddy Cards resultat. Förra gången jquery Lab 4 Muddy Cards resultat. Labgrupper Helklass alltid på lab-tiderna? Ingen föreläsning nästa vecka Bonus-info HTML - formulär Serverskript PHP Portfolio Sammanfattning. Idag Webblingo

Läs mer

Användbarhet för webben MDI, Webb och speciella behov 1

Användbarhet för webben MDI, Webb och speciella behov 1 Användbarhet för webben MDI, Webb och speciella behov 1 Hur används webben? Webbsidor läses inte, de skummas! Således, designa för att de ska skommas scanability Vi gör inga optimala val, vi söker något

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

Visuell utformning och informationsgrafik

Visuell utformning och informationsgrafik 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

Läs mer

BILDEN BUDSKAP FORM KRAFTFÄLT

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

Webbteknik för ingenjörer

Webbteknik för ingenjörer Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera

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

Så gör Vägledningen 24-timmarswebben dig till en bättre beställare. Funda Denizhan, Statskontoret Kommits 17 november, 2005

Så gör Vägledningen 24-timmarswebben dig till en bättre beställare. Funda Denizhan, Statskontoret Kommits 17 november, 2005 Så gör Vägledningen 24-timmarswebben dig till en bättre beställare Funda Denizhan, Statskontoret Kommits 17 november, 2005 Om IT och webb inte är en teknikfråga vad är det då? Är IT och webb en verksamhetsfråga?

Läs mer

Inlämningsuppgift 3. Medeltidsveckan. Responsiv redesign. Grupp 8 Dina Eid Musalam, Henrik Persson, Johan Rodin & Michelle Tapper

Inlämningsuppgift 3. Medeltidsveckan. Responsiv redesign. Grupp 8 Dina Eid Musalam, Henrik Persson, Johan Rodin & Michelle Tapper Inlämningsuppgift 3 Medeltidsveckan Responsiv redesign Grupp 8 Dina Eid Musalam, Henrik Persson, Johan Rodin & Michelle Tapper To do In progress Completed Projektplan Samla & visualisera research Skapa

Läs mer

GÖR DIN EGEN LOGOTYP SÅ GÖR DU OCH DET SKA DU TÄNKA PÅ

GÖR DIN EGEN LOGOTYP SÅ GÖR DU OCH DET SKA DU TÄNKA PÅ GÖR DIN EGEN LOGOTYP SÅ GÖR DU OCH DET SKA DU TÄNKA PÅ ATT HYRA IN EN DESIGNER eller andra dyra konsulter när du startar upp är troligtvis inte på tapeten. Du får lösa det mesta själv. Som egenföretagare

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

Kårmål G. Profilerad kommunikation. Arbetsmaterial för kårer. Kårmålsformulering. Kåren använder NSF:s grafiska profil i all visuell kommunikation.

Kårmål G. Profilerad kommunikation. Arbetsmaterial för kårer. Kårmålsformulering. Kåren använder NSF:s grafiska profil i all visuell kommunikation. Kårmål G Profilerad kommunikation Arbetsmaterial för kårer Kårmålsformulering Kåren använder NSF:s grafiska profil i all visuell kommunikation. Målgrupp Alla i kåren som är över 15 år och vill vara med.

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

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

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

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

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 Sök till Legionen! Förra gången MuddyCards PHP Lab 4. Agenda Webbtermer och annat som är bra att veta Bildoptimering Javascript jquery Portfolio Avstämning kurs. Webbsida Webbsida

Läs mer

Webbutveckling Laboration 1: HTML5 och CSS3.

Webbutveckling Laboration 1: HTML5 och CSS3. Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan

Läs mer

Ny grafisk symbol för Sölvesborg

Ny grafisk symbol för Sölvesborg Ny grafisk symbol för Sölvesborg På kommunfullmäktigesammanträdet i slutet av januari ligger ett ärende om en ny grafisk symbol för kommunen uppe för beslut. Denna symbol är tänkt att ersätta det träd

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

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

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

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

En vägg av väg till information

En vägg av väg till information En vägg av väg till information 7 insikter från när vi byggde om Sveriges största myndighetssajt Marcus Davidsson Lead Interaction Designer Sebastian Leinehed Lead Art Director Anders Lewin Språkkonsult

Läs mer

Användbarhet. Bryt rätt regler. Nils Ehrenberg nils.ehrenberg@mah.se

Användbarhet. Bryt rätt regler. Nils Ehrenberg nils.ehrenberg@mah.se Användbarhet Bryt rätt regler Nils Ehrenberg nils.ehrenberg@mah.se Agenda Intro till Användbarhet Användbarhet på nätet Exempel Fyra dörrar Inlämningsuppgift Viktigt En skala Subjektivt Användbarhet /

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

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

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

Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se

Designhäftet. När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Designhäftet När du kört fast, eller vill ha hjälp på traven. 2011 MailEasy International AB www.maileasy.se Materialet är framtaget i samband med utbildningstunrén 2011. Praktiska designtips En lista

Läs mer

Sveriges bästa kommunwebb

Sveriges bästa kommunwebb Sveriges bästa kommunwebb Pontus Marie Enköpings kommun Ligger mellan Stockholm, Uppsala och Västerås Känd för sin slogan: Sveriges närmaste stad 42 000 invånare och 3 000 medarbetare Jämförbar med Borlänge,

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

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

Nya perspektiv för västeråsaren SiteVisiondagarna 2015, Örebro 20-21 oktober

Nya perspektiv för västeråsaren SiteVisiondagarna 2015, Örebro 20-21 oktober Nya perspektiv för västeråsaren SiteVisiondagarna 2015, Örebro 20-21 oktober Anneli Sjödin, Digital Strateg, Västerås Stad Anders Nilsson, Säljare och ledare, HiQ Här bor 143 702 västeråsare. Västerås

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

Portfolio. Mathias Andelin 2014

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

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

Olov Källgarn. pixelengine.se Slussgatan Malmö

Olov Källgarn. pixelengine.se Slussgatan Malmö Olov Källgarn pixelengine.se olov@pixelengine.se Slussgatan 13 211 30 Malmö 070-661 56 31 Färdigheter Hej! På den här sidan hittar du sådant jag är bra på, dvs färdigheter, och på nästa sida hittar du

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

INTERAKTIONSDESIGN: VAD & HUR?

INTERAKTIONSDESIGN: VAD & HUR? INTERAKTIONSDESIGN: VAD & HUR? Interaktionsteknik & Design, HT-13 Evelina Fagertun evelinafagertun@gmail.com VAD? Vad är interaktionsdesign? HUR? Hur skapar vi bra design? INTERAKTION Wiki: Interaktion

Läs mer

Grafisk Profil 2016 kort version

Grafisk Profil 2016 kort version Grafisk Profil 2016 kort version Vår grafiska profil Om vi konsekvent tänker på hur vi presenterar oss kan vi skapa en visuell identitet som gör att mottagaren känner att det är vi som talar. Med visuell

Läs mer

DESIGNDOKUMENT 1(8) 1. Idé & koncept. Grundidé, syfte & innehåll. Målgrupp, koncept & sammanhang

DESIGNDOKUMENT 1(8) 1. Idé & koncept. Grundidé, syfte & innehåll. Målgrupp, koncept & sammanhang DESIGNDOKUMENT 1. Idé & koncept Grundidé, syfte & innehåll Vad önskar du att du gjort mer av, när du var 20? Finns det böcker som påverkat ditt liv på något sätt? Vilka låtar ska jag lyssna på för att

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

TENTAPLUGG.NU AV STUDENTER FÖR STUDENTER. Datum. Kursexaminator. Betygsgränser. Tentamenspoäng. Övrig kommentar

TENTAPLUGG.NU AV STUDENTER FÖR STUDENTER. Datum. Kursexaminator. Betygsgränser. Tentamenspoäng. Övrig kommentar TENTAPLUGG.NU AV STUDENTER FÖR STUDENTER Kurskod Kursnamn D0017A Produktdesign Datum Material Sammanfattning Kursexaminator Betygsgränser Tentamenspoäng Uppladdare Johanna Hamne Övrig kommentar November

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

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

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

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

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

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

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

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

Vårt sätt att synas. En guide till ett bestående första intryck. December 2016, v. 1.4 VISION LOGOTYPE FÄRG TYPOGRAFI LAYOUT

Vårt sätt att synas. En guide till ett bestående första intryck. December 2016, v. 1.4 VISION LOGOTYPE FÄRG TYPOGRAFI LAYOUT Vårt sätt att synas En guide till ett bestående första intryck. December 2016, v. 1.4 VISION LOGOTYPE FÄRG TYPOGRAFI LAYOUT Vi vill bli igenkända Kungsbacka Golfklubb har under årens lopp tagit stora steg

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

Grafisk manual Vårdsamverkan Skaraborg

Grafisk manual Vårdsamverkan Skaraborg Grafisk manual AaBbCcDdEe FfGgHhIiJjKk LlMmNnOoPp QqRrSsTtnOoPpQq RrSsTtUuVv WwXxYyZzÅåÄäÖö Varför en grafisk manual? s visuella profil syftar till att skapa en tydlig, enhetlig och konsekvent kommunikation

Läs mer

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012 Oktober 2012 Uppgiften går ut på att redovisa dina kunskaper kring JavaScript, liksom din förmåga att skapa en CSS-baserad layout. Detta gör du genom att lämna in ett resultat som följer specifikationerna

Läs mer

Introduktion till visuell kommunikation och design (MKGA60), 7,5 hp Välkommen till kursen! Kursens mål

Introduktion till visuell kommunikation och design (MKGA60), 7,5 hp Välkommen till kursen! Kursens mål Introduktion till visuell kommunikation och design (MKGA60), 7,5 hp Visuell kommunikation och design, Medie- och kommunikationsvetenskap, Karlstads universitet Kursinformation med momentschema Välkommen

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

GRAFISK MANUAL FASTSTÄLLD AV FULLMÄKTIGE 2014-12-10

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

VARFÖR BEHÖVER SSDF REGLER FÖR SIN GRAFISKA PROFIL?

VARFÖR BEHÖVER SSDF REGLER FÖR SIN GRAFISKA PROFIL? VÅR GRAFISKA PROFIL VARFÖR BEHÖVER SSDF REGLER FÖR SIN GRAFISKA PROFIL? Det är mycket viktigt för en organisation, oavsett om det är ett företag eller ett ideellt idrottsförbund, att alltid visa samma

Läs mer

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst?

Några exempel. Principer för design. Vilka problem medför den här designen? Vilken av följande placeringar av piltangenterna är bäst? Några exempel Principer för design Hur många kan ställa in klockan på sin video utan manual? Hur ofta vrider man på fel platta på spisen eller glömmer vrida av den när man är klar? Hur ofta knuffar man

Läs mer

Structuring Two Dimensional Space

Structuring Two Dimensional Space Structuring Two Dimensional Space Structuring Two Dimensional Space Vi tar in mönster mestadels som tvådimensionella plan utan djup. Dessa tvådimensionella mönster är viktiga av två anledningar; 1. De

Läs mer

Frågor och svar Gränssnittsdesign/Webbutveckling

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

Svenskt Sigill Grafiska riktlinjer

Svenskt Sigill Grafiska riktlinjer Svenskt Sigill Grafiska riktlinjer Inledning 2 Logotyp Grundversion 3 Logotyp Frizon 4 Logotyp 3D 5 Logotyp Webbanpassad 6 Logotyp Byline 7 Logotyp Tilläggsinformation 8 Tillämpning 10 Typografi 11 Kontakt

Läs mer

Arbetslivserfarenhet. Utbildning AKTUELLA ROLLER KOMPETENSER SPRÅK BRANSCHER. KONSULTPROFIL/KONSULENTPROFIL Andreas Blackne

Arbetslivserfarenhet. Utbildning AKTUELLA ROLLER KOMPETENSER SPRÅK BRANSCHER. KONSULTPROFIL/KONSULENTPROFIL Andreas Blackne KONSULTPROFIL/KONSULENTPROFIL Andreas Blackne Andreas har hjälpt över 100 myndigheter, organisationer och företag att förbättra användbarheten och tillgängligheten på sina webbplatser, intranät eller system.

Läs mer

Grafisk manual (kort version)

Grafisk manual (kort version) Grafisk manual (kort version) Innehåll 1. Grafisk profil 2. Idé 3. Logotyp Lathund 4. Fri yta 5. Balans 6. Storlek 7. Med andra logotyper 8. Typografi Museo Sans 500 Georgia 9. Färger Huvudfärger 10. Språk

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

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

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 AdobeCS, 1dag InDesign grund, 2dgr InDesign steg2, 1dag InDesign automatisera, spara tid 1dag InDesign

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

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

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

utdrag ur grafisk profil region halland

utdrag ur grafisk profil region halland utdrag ur grafisk profil region halland innehåll om region hallands grafiska profil... 3 huvudlogotypen... 4 huvudlogotypens alternativa färger... 5 verksamhetslogotypen... 6 logotypen verksamhet som drivs

Läs mer

Projektarbete 2010 måndag den 29 november 2010

Projektarbete 2010 måndag den 29 november 2010 Projektarbete 2010 Om projektarbete BRAINSTORMA - med hela projektgruppen. - Skriv ned alla tankar och idéer. - Ifrågasätt inget! TESTA idéer och uppslag genom diskussioner. Titta på målen i projektbeskrivningen

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

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

Inspirationsguide för dig som hyresgäst till ett av Avenyns skyltskåp

Inspirationsguide för dig som hyresgäst till ett av Avenyns skyltskåp Inspirationsguide för dig som hyresgäst till ett av Avenyns skyltskåp För att du som hyresgäst till ett av våra skyltskåp på Avenyn ska få ut mesta möjliga av din hyresperiod har vi här tagit fram en inspirationsguide

Läs mer

Grafisk manual 1.0 2009-10-07

Grafisk manual 1.0 2009-10-07 Grafisk manual 1.0 2009-10-07 Innehåll Logotyp... 3 Profilfärger... 4 Symbolen... 4 Typografi... 5 Svenska Vård i text... 6 Svenska Vård Grafisk manual 1.0 2 Logotyp Svenska Vårds logotyp finns i två versioner.

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

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

Portfolio Jennifer Lundkvist

Portfolio Jennifer Lundkvist Portfolio Jennifer Lundkvist vad? layout vem? hur? varför? bildspråk syfte bild in- Design harmoni målgrupp gränssnitt gestaltlagar estetik text rgb stil analys cmyk photoshop Texter information Född med

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

Offertunderlag Webbportal NILS

Offertunderlag Webbportal NILS Offertunderlag Webbportal NILS Version: 0.2 Distributionslista Namn Befattning Enhet Saskia Sandring Åsa Eriksson SLU SLU Innehållsförteckning 1. Sammanfattning av uppdrag... 4 1.1 NILS-programmet... 4

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

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

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

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

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