Process steps to design a websites

1. visuele communicatie
webdesign:
van ontwerp naar browser
Raoul Postel
docent CROSSmedia
maker | ontwerper
grafisch vormgever
webdesigner / developer
ondernemer
ar
html
css
epub share
pdf
3dvr
dpi
cmyk
rgb px
cms
mbo
hbo

2. visuele communicatie & webdesign
van speels naar zakelijk

3. visuele communicatie & webdesign
van creatief gevarieerd naar flexibiliteit in blokken

4. visuele communicatie & webdesign
van pagina-aandacht naar product-aandacht

5. visuele communicatie & webdesign
van totaal-informatie naar one-liner

6. zijn responsive
bevatten call-to-action & motion
vertellen een verhaal
zijn ook op social media te vinden
visuele communicatie & webdesign
hedendaagse websites…

7. 1. functioneel ontwerp
2. interactief ontwerp (wire)
3. vormgeving & identiteit
4. html en css
5. content management
6. online zetten
7. ondersteuning/advies
visuele communicatie & webdesign
ontwikkeling van een website/app in stappen:

8. een websiteplan opzetten
Het websiteplan omvat het functioneel
en interactief ontwerp, het stappen-
plan voor bouwer en opdrachtgever
Een helder websiteplan omvat:
• het doel van de site
• doelgroep(en)
• de uitstraling (look and feel)
• het concept
• de opbouw en navigatie
HOME
contactnieuwswerkover mij
grafisch
illustratie
foto’s
route
webdesign

9. visuele communicatie & webdesign
interactie schema | wireframe

10. storytelling
visuele communicatie & storytelling

11. visuele communicatie & storytelling
vertel het verhaal…

12. Een verhaal…
1. vermijdt het cliché
2. heeft een duidelijk doel
3. beschrijft een unieke ervaring
4.verbindt product met doelgroep
visuele communicatie & storytelling

13. responsive design: breedte in % in plaatst van px
denk in kolommen
webdesign

14. visuele communicatie & webdesign
heat-map: scherm-aandacht op midden-boven

15. visuele communicatie & webdesign
opensource vormgeving: bijv. Bootstrap of Pure CSS

16. visuele communicatie & webdesign
opensource vormgeving:
zeer veel gebruikt, ook te vinden in WordPress e.a. systemen

17. webdesign
beheersing van webdesign en internettechniek: HTML & CSS

18. HTML = inhoud van de website
CSS = vormgeving van de website
Scheiden van inhoud en vormgeving
is belangrijk voor de zoekmachines
CODE = GEEN EXAMENSTOF
webdesign & vormgeving

19. webdesign & vormgeving
Photoshop als basis voor webdesign:
ontwerp in pixelprogramma
voor pixelmedium (scherm)
Maar ook in Illustrator en InDesign
mag een website worden ontworpen
Losse onderdelen/afbeeldingen
bewaren als: png-formaat

20. webdesign & vormgeving
Document grootte in Photoshop
150 dpi & sRGB
desktop: 1920 x (minimaal) 1080 dpi
tablet: 1024 x 768 dpi
smartphone: 480 x 320 dpi
Oudere schermresoluties zijn 72dpi
Retina en HD is 262dpi
Geen verschil tussen 72 en 300 dpi (op 100%)
De afbeelding wordt altijd 1:1 weergegeven
LET OP:
Print een gebruiker de
webpagina, dan is de
resolutie wel van belang.
Die moet dan
minstens 150 dpi zijn.
LET OP: Maak alleen wat de examencasus vraagt!

21. webdesign & vormgeving
Dus:
Alleen voor de laadtijd van je website is
het noodzakelijk om rekening te houden
met de resolutie.
Afbeeldingen met een hoge resolutie zijn
groter en nemen meer laadtijd in beslag.
De afmeting van de afbeelding is wel
belangrijk voor de schermbreedte
TEST:
Resample in Photoshop
een plaatje tot bijv.
200 pixels.
Vink resamplen (pixels
berekenen) daarna uit.
Bewaar dit plaatje op 72
dpi, daarna in 300 dpi, of
welk getal je maar wilt.
Zet die plaatjes op je
website. Zie je verschil?
Nee, want er is geen
verschil.

22. webdesign & vormgeving
achtergrond
repeteren
achtergrond
beeldvullend

23. webdesign & vormgeving
Achtergrond afbeeldingen:
maak in het ontwerp duidelijk wat er met
de achtergrond van de website moet
gebeuren:
1. wordt een schermvullende afbeelding
die mee schaalt met de browser
(min 1920px breed)
2. wordt een verloop of effen kleur
3. wordt een repeterende afbeelding
(patroon)

24. webdesign & vormgeving
Menu:
zorg dat het menu altijd volledig in
beeld staat. Ook als er gescrolled
moet worden!
1. laat in het ontwerp zien hoe een
rollover-knop er uit ziet
2. laat zien hoe een uitklapmenu er
uit ziet, indien dat er in zit.
3. houdt rekening met vingerdikte
bij touch screen.

25. webdesign & vormgeving

26. webdesign & vormgeving
Gedetailleerd uitwerken:
werk het ontwerp zo gedetailleerd
mogelijk uit. De opdrachtgever weet
dan precies wat hij kan verwachten.
1. onderstreep tekstlinkjes
2. maak teksthierarchie (kop, subkop,
tekst, nieuwsbericht, links)
3. rollover en aktieve knoppen
4. randen, verloop, rondhoeken, etc.

27. webdesign & vormgeving : DESKTOP DESIGN

28. webdesign & vormgeving : TABLET DESIGN

29. webdesign & vormgeving : PHONE DESIGN

30. webdesign & vormgeving
Welke elementen plaats je
in een website ontwerp?
• horizontaal of verticaal menu
• header en footer (sfeerbeeld-slidehow)
• tekstblok (neptekst) met titel
• fotoalbum
• contactgegevens en call-to-action
• 3 nieuwsberichten incl. datum en titel kopje
• linkjes naar social media + share
typografie sluit aan bij huisstijl
kleur in lijn met de huisstijl en sfeer

31. webdesign & vormgeving: presentatie in Mockup