Wat is webdesign?

Uitleg
Wat is webdesign? 

 Webdesign is het ontwerpen van websites — niet alleen hoe ze eruitzien, maar ook hoe ze werken voor de gebruiker. Webdesigners maken keuzes over structuur, kleuren, lettertypes, afbeeldingen, knoppen, navigatie en de opbouw van pagina’s. 

 Goede webdesigners denken na over: 

 

 

 Wat wil de bezoeker hier doen? 

 

 

 Hoe zorg ik dat dat makkelijk, logisch en prettig is? 

 

 

 

 Webdesign gaat dus over vorm, inhoud én gebruikservaring. 

 

 Webdesign ≠ webdevelopment 

 Een veelgemaakte fout is denken dat webdesign hetzelfde is als websites bouwen met code. In werkelijkheid zijn het twee verschillende vakgebieden : 

 

 

 

 

 

 Webdesign 

 Webdevelopment 

 

 

 

 

 Gaat over uiterlijk en gebruikerservaring 

 Gaat over hoe het technisch werkt 

 

 

 Denk aan kleur, stijl, structuur 

 Denk aan HTML, CSS, JavaScript 

 

 

 Maakt wireframes, prototypes, mock-ups 

 Programmeert en integreert systemen 

 

 

 Richt zich op vorm en interactie 

 Richt zich op techniek en functionaliteit 

 

 

 

 

 

 In deze module richten we ons vooral op het ontwerpgedeelte : jij bent hier de ontwerper, niet de programmeur. 

 Waarom is webdesign belangrijk? 

 Een website kan er prachtig uitzien maar compleet onbruikbaar zijn — of omgekeerd: functioneel, maar zo lelijk of chaotisch dat niemand blijft hangen. Een goed ontwerp zorgt ervoor dat de bezoeker: 

 

 

 snapt waar hij is 

 

 

 weet wat hij kan doen 

 

 

 en dat ook graag wil doen 

 

 

 Voorbeelden van websites die op design falen of slagen: 

 

 

 

 

 

 Slecht design 

 Goed design 

 

 

 

 

 Te veel tekst zonder indeling 

 Duidelijke koppen en witruimte 

 

 

 Onlogische of verborgen menu’s 

 Intuïtieve navigatie 

 

 

 Slecht contrast of te klein lettertype 

 Goede leesbaarheid 

 

 

 Te veel visuele chaos 

 Rustige, consistente opmaak 

 

 

 

 

 

 

 👁‍🗨 Eerste indruk: bezoekers vormen hun oordeel over een website vaak binnen 3 seconden . Dan moet het ontwerp al duidelijk zijn. 

 

 

 Typen websites en hun doelen 

 Websites kunnen allerlei doelen hebben, zoals: 

 

 

 

 

 

 Type website 

 Voorbeeld 

 Doel 

 

 

 

 

 Informatief 

 Wikipedia, schoolsite 

 Informatie geven 

 

 

 Commercieel 

 Webshop, merkpagina 

 Verkopen of overtuigen 

 

 

 Persoonlijk 

 Portfolio, CV-site 

 Jezelf presenteren 

 

 

 Educatief 

 Leeromgeving, blog 

 Uitleggen, leren 

 

 

 Communicatief 

 Forum, contactpagina 

 Interactie mogelijk maken 

 

 

 

 

 

 Een goed design sluit visueel en functioneel aan bij dat doel. Een webshop vraagt andere kleuren en knoppen dan een online museum of een politieke partij. 

 Belangrijke begrippen 

 UI (User Interface) 

 

 De grafische kant van een website – alles wat je ziet en waarop je klikt. 

 

 Denk aan: knoppen, menu’s, velden, sliders, kleuren, layout. 

 UX (User Experience) 

 

 De ervaring die een gebruiker heeft tijdens het gebruik van de site. 

 

 Denk aan: gemak, snelheid, plezier, frustratie, duidelijkheid. 

 Visuele hiërarchie 

 

 De volgorde waarin je oog informatie oppikt. Dit wordt gestuurd door: 

 

 

 

 Grootte 

 

 

 Positie 

 

 

 Kleur 

 

 

 Witruimte 

 

 

 Contrasten 

 

 

 Bijvoorbeeld: de titel is groot en vet → dan komt de afbeelding → dan een subtitel → dan pas de tekst. 

 Responsive design 

 

 Een ontwerp dat zich automatisch aanpast aan het schermformaat (desktop, tablet, mobiel). 

 

 Een goede website ziet er op een telefoon dus anders maar nog steeds goed uit dan op een laptop.

Oefeningen
Oefening: Websites analyseren 

 Opdracht A – Eerste indruk 

 

 

 Bezoek drie verschillende websites: 

 

 

 Een informatieve site (bijv. NOS, Rijksoverheid, schoolsite) 

 

 

 Een commerciële site (bijv. Coolblue, Nike, Bol.com) 

 

 

 Een persoonlijke of creatieve site (bijv. een portfolio of blog) 

 

 

 

 

 Beantwoord per site: 

 

 

 Wat is het doel van de website? 

 

 

 Wie is de doelgroep? 

 

 

 Welke eerste indruk krijg je? 

 

 

 Wat zie je het eerst? 

 

 

 Vind je het ontwerp aantrekkelijk? Waarom wel/niet? 

 

 

 

 

 Opdracht B – Begrippen gebruiken 

 Gebruik de begrippen UI, UX, visuele hiërarchie en responsief ontwerp om een korte review te schrijven van één van de websites (± 150 woorden). Let op: 

 

 

 Waar let je oog op? 

 

 

 Is alles logisch te vinden? 

 

 

 Is de site goed leesbaar op mobiel?