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 strategier, användbarhet m.m.
Grafisk form för användargränssnitt
Upplägg Designprocess Grafisk form - Leverabler - Layout - Hierarki - Formgivning, verktyg som färg, form, typografi mm. - Trender - Tips
Designprocess Analysfas Workshop Vad är syqet Effektkarta KoncepTas Skisser, wireframes Designfas Grafisk form Utvecklingsfas Prototyp Utveckling
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.
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
KoncepTas Skisser och wireframes
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)
Style.les
Style.les
Style.les
PSD mockup
Grafisk form Layout och gridsystem
Layout och gridsystem
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, balans och linjering
Rytm, balans och linjering
Rytm, balans och linjering
Grafisk form Symmetri Asymmetri
Grafisk form Kontrast
Grafisk form Gestaltlagar
Grafisk form Låt innehållet styra
Grafisk form för användargränssnig, Petra Dryselius, Designer, Knowit
Grafisk form för användargränssnig, Petra Dryselius, Designer, Knowit
Visuell hierarki 3 blick 2 blick 1 blick Fokusera Prioritera AGrahera
Figur - Grund Vad är figur och vad är bakgrund? - Hjärnan vill skapa ordning och sortera/prioritera innehållet
Först när man känner <ll designprinciperna och vet hur man använder dem, - kan de brytas!
Eller så kanske Figur och Bakgrund är lika vik<ga?
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.
Formgivning Handlar om användandet av designens verktyg Punkt och linje Yta Textur Valör Färg Typografi Djupverkan Tid och rörelse
Formgivning Färg Överenskommen betydelse av en färg eller färgkombina.on inom eg system =
Formgivning Färg 8-10% defekt färgseende Tydliga färgval Funk.onell färg
Formgivning Typografi, webbsäkra typsnig Google fonts webbsäkra typsnig?
Formgivning Typografi, olika webbläsare Samtliga ovanpå varandra
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.
Grafisk form för användargränssnig
Grafisk form för användargränssnig
Grafisk form för användargränssnig
Grafisk form för användargränssnig
Grafisk form för användargränssnig
Grafisk form för användargränssnig
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
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.
Så, nu kan ni det här! Frågor?