03 Design Step by Step
-
Upload
chaib-el-kouri -
Category
Documents
-
view
224 -
download
0
Transcript of 03 Design Step by Step
-
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