Grafisk form för användargränssnitt

Storlek: px

Starta visningen från sidan:

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

Ulf Mattsson
för 8 år sedan
Visningar:

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

Vem skapar den önskade effekten? Grupper av människor som har liknande behov och förväntningar på systemet.

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.

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.

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

26 Graﬁsk form för användargränssnig, Petra Dryselius, Designer, Knowit

28 Graﬁsk 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

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 Graﬁsk form för användargränssnig

42 Graﬁsk form för användargränssnig

43 Graﬁsk form för användargränssnig

44 Grafisk form för användargränssnig

45 Grafisk form för användargränssnig

46 Graﬁsk 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.

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

Relevanta dokument

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