Webdesign - ITUitu.dk/people/mortenq/teaching/BWPFE2013/lecture7.pdf · 2013-10-22 · o...

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"


Lidt om underviseren


Anders Bergmann Nielsen

- BA i historie med tilvalg i samfundsfag (KU)"

- STJERNER"

Nye KUA – Københavns Universitet Amager


ITU Cand. It.


PartiManager (demo)


Brain-stormer Kreative værktøjer som app


Digital journalistik. Se mere: http://php.ekstrabladet.dk/redaktionelt/ebinteractive/


Ekstern lektor v. Medievidenskab på Københavns Universitet


Webdesigner på 2 timer?


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


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


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


DESIGNPROCES


Eksempel på en designproces #1

•  Koncept- og ideudvikling "•  Wireframes"•  Mockup"•  Prototype"•  Udvikling og test"


Vandfaldsmodellen


Livscyklusmodellen

(Sharp et. alt. 2007)


Vores fokus:


Sketching


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


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


Sketchens dialog

Buxton "A sketch of a dialouge with a sketch" (2007)


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"


Fordele ved skecthes #2

•  Du behøver ikke kunne tegne!"•  Tegningerne skal være rå i deres form og

udtryk"


Eksempel på en sketching-proces


Mockups


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 "


(Mockup i http://www.balsamiq.com/ )


(Mockup med imockups http://www.endloop.ca/imockups/)


(Kunne være et mockup i photoshop. http://www.mispp.edu/)


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"


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"


”There is no such thing as a high or low fidelity, only appropriate fidelity” Bill Buxton


PAUSE

Layout


Layout

- Skaber hierarki og overblik"- Definere sammenhængende områder og

funktionalitet "på siden"- Gruppere elementer så der skabes

relationer og struktur "


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


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


Site: mikemcquade.com/ Site: pierrickcalvez.com/


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


getbootstrap.com/


Billedkomposition Foto: Alexandre Dulaunoy. Creative Commons


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"


Subjekt

Rum

Bevægelse


Gestaltlove

- Gestaltlovene beskriver, hvordan vi opfatter visuel sammenhæng"

- Forhold mellem placering af knapper, billeder, tekster osv."


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


Figur og baggrund


Nærhed


Lighed


Forbindelser


Lukkethed


Farver


Farvehjulet


Primær!

Teritær!

Sekundær!


Farvemætning (saturation)


Lysstyrke (brightness)


Nuance Ly

sstyrke!

Farvemætning!


Farvevalg - monokromatisk


Farvevalg - komplimentær


Farvevalg - triadisk


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


INSPIRATION OVER ALT


TYPOGRAFI


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"


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"


HVORDAN VÆLGER VI SKRIFTTYPE?


Valg af skriftetype – Anatomi"– Klassifikation"– Historie"


Serif og San Serif


Politiken.dk


vg.no


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"


TREND #1


Mobil


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?


Responsivt design - Hvad er det?


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/


Ethan Marcotte Responsive Web Design (2011)


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"


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"


TREND #2


Flat UI vs. skeuomorphism

- Flat UI er et nyt designparadigme"– Læs mere:

http://www.smashingmagazine.com/2013/07/16/authentic-design/ "


Microsoft surface


Apple iOS 6 og 7


https://www.gjensidige.dk/


https://genbib.dk/


Anders Bergmann [email protected]"andersbergmann.dk"@anders_bergmann"

Webdesign - ITUitu.dk/people/mortenq/teaching/BWPFE2013/lecture7.pdf · 2013-10-22 · o...

Documents

Transcript of Webdesign - ITUitu.dk/people/mortenq/teaching/BWPFE2013/lecture7.pdf · 2013-10-22 · o...