8/2/2019 03 Design Step by Step

1/18

Design it!

03 webdesign stap voor stap

8/2/2019 03 Design Step by Step

2/18

Stap 1 Conceptbeschrijving

Beknopte omschrijving van het uitgangspunt /achterliggende idee! Wat wil je met de site?Beschrijf:

Doel

Inhoud

Structuur

Vorm / uitstraling

8/2/2019 03 Design Step by Step

3/18

Hulptekst bij formulerenconcept

Het basisidee achter het concept is... Ik stel

me de digitale krant/tijdschrift voor als een

Het doel ervan is De relatie tot de papierenkrant is

Als inhoud stellen we voor Bij de vorm

denken we aan Inhoud en vorm passen bij

elkaar, want... Het moet de uitstraling hebbenvan...

8/2/2019 03 Design Step by Step

4/18

Stap 2 Stramien / Wireframe

Schematische weergave beeldschermindeling

8/2/2019 03 Design Step by Step

5/18

Eerst schetsen: papier / tool

Low fidelity

prototype

8/2/2019 03 Design Step by Step

6/18

Uitwerken: 960 grid systeem

8/2/2019 03 Design Step by Step

7/18

960 grid systeem

8/2/2019 03 Design Step by Step

8/18

960 grid systeem

Maak indeling homepage en vervolgpagina.

Gebruikelijke onderdelen site:

Header

Contentgedeelte (1 of meer gedeeltes)

Footer

Homepage: 1 hoofditem uitlichten(aandacht trekken)

Onderdelen utlijnen

8/2/2019 03 Design Step by Step

9/18

Stap 3 Kleurenschema kiezen

Hou rekening met:

Huisstijl

Gewenste uitstraling

Goede kleurencombinatie kiezen:http://www.adobe.com/products/kuler/

Beperk aantal kleuren: 2 a 3 niet teveel!

Voldoende contrast Saaie kleuren verfraaien dmv gradients

Pas op met rood: verbod, agressie

http://www.adobe.com/products/kuler/http://www.adobe.com/products/kuler/

8/2/2019 03 Design Step by Step

10/18

Stap 4 Typografie kiezen

Tips:

Keep it simple: niet meer dan 2 verschillendelettertypes

Variatie bereiken dmv: lettergrootte, spacing,kleur, achtergrondkleur, contrast

http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

8/2/2019 03 Design Step by Step

11/18

Opdracht

Maak wireframe dmv schets op papier ofgebruik een tool, bv pencil:http://pencil.evolus.vn/en-US/Home.aspx

Werk het wireframe vervolgens uit mbv 960grid systeem

Kies kleurenschema:

Kies typografie

http://pencil.evolus.vn/en-US/Home.aspxhttp://pencil.evolus.vn/en-US/Home.aspxhttp://pencil.evolus.vn/en-US/Home.aspxhttp://pencil.evolus.vn/en-US/Home.aspx

8/2/2019 03 Design Step by Step

12/18

Stap 5 Sjabloon ontwikkelen

Creeer je eigen vormgevingssjabloon:

Compositie:

Schermindeling: vlakken, kolommen inkleuren / invullen

Witruimte / tussenruimte

eventueel scheidingslijnen

onderscheid voorgrond-achtergrond (wat moet opvallen?)

verhouding beeld-tekst

teksthierarchie: koppen, subkoppen

kleurgebruik

Ga groeperen, ordenen,

Menus, buttons vormgeven

Dummy tekst: Lorem ipsum

8/2/2019 03 Design Step by Step

13/18

8/2/2019 03 Design Step by Step

14/18

8/2/2019 03 Design Step by Step

15/18

8/2/2019 03 Design Step by Step

16/18

Stap 6 Lay-out uitwerken

8/2/2019 03 Design Step by Step

17/18

8/2/2019 03 Design Step by Step

18/18

Opdracht: uitwerken lay-out

Uitwerken homepage en vervolgpage

Gebruik echte content tbv opdracht enopdrachtgever

Presenteer volgende week en licht keuzestoe