webdesign - ituitu.dk/people/mortenq/teaching/bwpfe2013/lecture7.pdf · 2013-10-22 · o...
TRANSCRIPT
Webdesign Introduktion v. Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Dagens program - Introduktion"– Om underviseren"
- Designproces"- Sketch og mockups"- Pause!- Grids og gestaltlove"- Farver"- Skrifttyper"- Trends i webdesign"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Lidt om underviseren
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Anders Bergmann Nielsen
- BA i historie med tilvalg i samfundsfag (KU)"
- STJERNER"
Nye KUA – Københavns Universitet Amager
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
ITU Cand. It.
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
PartiManager (demo)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Brain-stormer Kreative værktøjer som app
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Digital journalistik. Se mere: http://php.ekstrabladet.dk/redaktionelt/ebinteractive/
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Ekstern lektor v. Medievidenskab på Københavns Universitet
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Webdesigner på 2 timer?
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
- du får en indsigt i forskellige design-teknikker - du kommer til at blive opdateret på seneste trends - du får en basal forståelse for gængse designprincipper
men… Nok ikke, !
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Nyttige links
- Design blog"– http://www.smashingmagazine.com/ "- http://webdesign.tutsplus.com/"
- Inspiration"– http://thedesigninspiration.com/"– http://tympanus.net/codrops/ "– http://www.awwwards.com/ "– http://www.bestcssvault.com/"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Nyttig litteratur - Steve Krug (2006). ”Don’t make me think”"- Mark Boulton (2009). ”A Practical Guide to Designing for the Web”"- Kim Pedersen. Grundbog i grafisk design (2012)."- Matt Ward et.alt. (2011). ”The Smashing Book 2”. "- Rogers, Sharp og Preece (2011). ”Interaction Design. 3. ed.”"- Nanna Friis (2012). ”Kort, klart og klikbart” (kommunikation)"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
DESIGNPROCES
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Eksempel på en designproces #1
• Koncept- og ideudvikling "• Wireframes"• Mockup"• Prototype"• Udvikling og test"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Vandfaldsmodellen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Livscyklusmodellen
(Sharp et. alt. 2007)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Vores fokus:
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Sketching
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Sketching
• Tegninger (”sketches”) af ideen"o Sketches gør ideen mere konkret"o Det giver mulighed for hurtigt at teste ideen og
diskutere den"• En sketch er et godt samarbejdsredskab"
o Ideer kan sammenlignes og sammensættes"o Pen og papir som redskaber"
• Simpelt, hurtigt, billigt og fleksibelt"o Giver plads til skøre ideer (som måske viser sig
brugbare)"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Sketching ifølge Buxton
• Sketching har, ifølge Buxton, følgende kvaliteter:"o Bearbejdning af sketchen"o Sketchens ”sprog”"
Buxton: Sketching User Experiences: Getting the Design Right and the Right Design
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Sketchens dialog
Buxton "A sketch of a dialouge with a sketch" (2007)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Fordele ved sketches #1 • Sketches udarbejdes hurtigt"
o Det er nemt at kassere en sketch. Omvendt er det svært at kassere et projekt, som teamet har brugt 10 uger på"
• Der kan hurtigt udarbejdes mange sketches"o Mulighed for mange og hurtige iterationer"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Fordele ved skecthes #2
• Du behøver ikke kunne tegne!"• Tegningerne skal være rå i deres form og
udtryk"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Eksempel på en sketching-proces
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Mockups
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Mockups
• Visuelle repræsentationer af brugergrænsefladen"
• Ofte udarbejdet i et tegneprogram, fx Illustrator eller Photoshop"
• Gør brug af færdigdesignede elementer, fx knapper og menuer"
• Kan vises til bruger og stakeholder til evaluering af designet. Her kan farver, layout og typografi diskuteres "
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
(Mockup i http://www.balsamiq.com/ )
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
(Mockup i http://www.balsamiq.com/ )
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
(Mockup med imockups http://www.endloop.ca/imockups/)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
(Kunne være et mockup i photoshop. http://www.mispp.edu/)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Prototype • En udgave af produktet, der ikke er færdig,
men er god nok til test"• High fidelity / low fidelity prototyping"
o Det kan være næsten færdigudviklet software, eller det kan være et mockup på papir"
o Interaktive prototyper kan udvikles i deciderede prototype-programmer eller i PowerPoint."
• Metoder til prototyping og test"o Storyboards"o Sketching"o Wizard of Oz"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Hvordan vælger vi? • Spørgsmål om, hvem der skal teste, og hvad der
skal testes for"o Brugeres oplevelse af avanceret animation og
navigation kan være svært på low-fidelity prototyper"o Simple navigation og ”proof-of-concept” af ideer kan
testes med en low-fidelity prototype"• Spørgsmål om tid og økonomi"• Spørgsmål om, hvor langt du er i designprocessen"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
”There is no such thing as a high or low fidelity, only appropriate fidelity” Bill Buxton
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
PAUSE
Layout
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Layout
- Skaber hierarki og overblik"- Definere sammenhængende områder og
funktionalitet "på siden"- Gruppere elementer så der skabes
relationer og struktur "
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
De gyldne snit
- En opdeling mellem to punkter på et sted hvor det er visuelt “behageligt”."
- Forholdet: 1.6180."- Læs også: http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-
web-design/ "
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Rule of third
- Det gyldne snit kræver lidt matematik""= besværligt"
- Rule of third"– Simpelt: Opdel et layout i tredjedele
(kan også bruges i billedkompositioner)"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Site: mikemcquade.com/ Site: pierrickcalvez.com/
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Grids
- 960grid (fixed)"- Twitters Bootstrap"- 1140 css grid (fluid)"- 1Kb CSS Grid, "- Golden Grid System (”folding columns” =
16 cols > 8 cols > 4 cols til forskellige skærmstørrelser) "
- og mange flere..."
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
getbootstrap.com/
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Billedkomposition Foto: Alexandre Dulaunoy. Creative Commons
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Looking room
- Det negative rum et subjekt kigger eller bevæger sig imod."
- Kendt fra basal fotokomposition"- Skaber:"– Et rum i layoutet"– Dynamik i layoutet"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Subjekt
Rum
Bevægelse
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Gestaltlove
- Gestaltlovene beskriver, hvordan vi opfatter visuel sammenhæng"
- Forhold mellem placering af knapper, billeder, tekster osv."
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Gestaltlove - Figur og baggrund!
– Den mindste figur på et afgrænset areal, er den første, der vil blive bemærket og vil derfor blive opfattet som den vigtigste, mens den største figur vil blive opfattet som baggrunden. "
- Nærhed!– Symboler der er anbragt tæt på hinanden, opfattes som hørende
sammen. "– Whitespace er vigtigt: Kan bruges til at knytte elementer sammen eller
fjerne dem fra hinanden."- Lighed!
– Igennem elementernes visuelle udtryk og form ses, at elementer har noget til fælles eller på anden måde hører sammen."
- Forbindelser!– Elementer opfattes som sammenhørige ved forbinde med streger, farver
og overlap. Loven er meget brugbar hvis du fx er tvunget til at placere sammenhørende elementer langt fra hinanden."
- Lukkethed!– Elementer, der står i samme ramme hører sammen. Fx i en boks med
en ramme eller på en farvet baggrund.."
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Figur og baggrund
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Nærhed
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Lighed
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Forbindelser
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Lukkethed
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Farver
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Farvehjulet
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Primær!
Teritær!
Sekundær!
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Farvemætning (saturation)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Lysstyrke (brightness)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Nuance Ly
sstyrke!
Farvemætning!
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Farvevalg - monokromatisk
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Farvevalg - komplimentær
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Farvevalg - triadisk
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
En note om farver
- KISS"- Vælg farver sent i designprocessen"- Eksperimenter når farvepaletten
sammensættes, men tag teorien med i overvejelserne"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen kuler.adobe.com
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen Photoshop - screendump
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
INSPIRATION OVER ALT
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
TYPOGRAFI
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Typografi
- Typografi er vigtigt"– Skaber identitet"– Størstedelen af formidlingen på nettet foregår
via tekst"– Har været undervurderet på nettet"• Få ”websikre” fonte at vælge i mellem"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Typografi er en del af kommunikationen – En skrifttype er en del af kommunikation:"• Comic Sans er til …"• Times New Roman er til …"
– En skrifttype kan fortælle en historie og slå et budskab fast"
– Brødtekst og display"• Brødtekst: Læsetekst"• Display: Stemning, blikfang, særlig identitet"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
HVORDAN VÆLGER VI SKRIFTTYPE?
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Valg af skriftetype – Anatomi"– Klassifikation"– Historie"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Serif og San Serif
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Politiken.dk
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
vg.no
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Hierarki - H1 – Sections header (24px)"- H2 – Artikel header (18px)"- H3 – Navigations header (16px)"- H4 – Alle andre headers (13px)"- Body (11px)"
- Behold hierarkiet! Skaber et roligt og overskueligt layout"
- Pixelstørrelserne kan gøres større eller mindre, men det indbyrdes forhold bør bevares"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
TREND #1
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Mobil
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Design til mobil - Mobiloptimeret oplevelse"- ”At det bare virker, også på mobil og
tablet” [citat fra workshop]"
- Problem: Konstant nye devices og skærmstørrelser"– Seneste trend: Mindre tablets, større mobiler"
- Løsninger: Dedikeret mobilsite eller website optimeret til alle skærmstørrelser"
Et website for alle skærmstørrelser
Hvordan?
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Responsivt design - Hvad er det?
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.
Kayla Knight http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Ethan Marcotte Responsive Web Design (2011)
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Responsivt design – konkret
- Flydende layout (fluid layout), baseret på et grid"– Margin, padding og width sat i procent "
- Responsive billeder og medier - størrelse angives i procent"
- Media queries - CSS3 feature der gør det muligt at justere designet afhængig af skærmstørrelse"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Responsivt design – den nye dreng i klassen - Yderst omtalt og stor interesse omkring
denne teknik og måde at tænke design på "- Begynder at være standard og er en
naturlig del af webudvikling"
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
TREND #2
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Flat UI vs. skeuomorphism
- Flat UI er et nyt designparadigme"– Læs mere:
http://www.smashingmagazine.com/2013/07/16/authentic-design/ "
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Microsoft surface
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Apple iOS 6 og 7
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
https://www.gjensidige.dk/
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
https://genbib.dk/
Introduktion til webdesign. Efterår 2013, Anders Bergmann Nielsen
Anders Bergmann [email protected]"andersbergmann.dk"@anders_bergmann"