Wat is het verschil tussen webdesign en webdevelopment?

Regelmatig worden de termen webdesign en webdevelopment door elkaar heen gehaald. Dit is ook logisch want beiden termen hebben betrekking op het ontwikkelen van een website. Tussen beide termen is zeker overlap, en soms kom je ook mensen tegen die zich bezighouden met webdesign en development.

Wat is nou het verschil? Hieronder geven we antwoord op deze vraag.

Wat is webdesign?

Op Wikipedia staat het volgende over webdesign: Webdesign is het ontwerpen van websites op het internet, in het bijzonder van hun grafische vormgeving en gebruikerservaring. Het vereist een goede beheersing van de esthetische en functionele aspecten van websites en van de technische middelen waarmee een website kan worden gerealiseerd. Het is een deelgebied van webdevelopment.

Structuur

De structuur van een website is belangrijk voor gebruikers en de vindbaarheid in zoekmachines. Maar wat verstaan we onder de structuur? De basis van de website, het skelet. Hoe beter het skelet staat hoe makkelijker gebruikers er doorheen navigeren. Daarnaast helpt het en zoekmachine crawler (de robots die jouw website doorlopen) de website makkelijker en beter te indexeren. Vaak dient de structuur van een website, ook als basis waarvan uit gestart kan worden met de creatie van teksten en afbeeldingen voor op de website.

Wireframe

Wireframes (draadmodel) zijn een belangrijk onderdeel van de basis van een webdesign. Een wireframe is een vroege weergave/schets van hoe het eindresultaat van een website eruit komt te zien. Wireframes zijn beeldvormend en geven weer hoe de websitepagina’s opgebouwd zijn. De focus ligt hierbij op de opbouw van de website op verschillende scherm groottes denk aan laptops, tablets en telefoons. Per scherm maakt met de designer een aangepast wireframe. Naast de scherm grootte is er ook veel aandacht voor de gebruikersvriendelijkheid van de website en conversiegerichtheid. De teksten en afbeeldingen kunnen ook toegevoegd worden in het wireframe voor een zo compleet mogelijk beeld.

Als het wireframe is uitgewerkt kan dit ook interactief worden gemaakt zo dat het geschikt is voor in een verkennend stadium testen hoe gebruikers de website ervaren.

Grafisch ontwerp

Zodra het wireframe staat kan de volgende stap worden gezet. Dit is het uitwerken van het daadwerkelijke ontwerp van de website. Hierbij wordt het gemaakte wirefame gebruikt als basis. De webdesigner gaat aan de slag en werkt een ontwerp uit per websitepagina en scherm grootte. Hierbij wordt de huisstijl (eventueel link toevoegen naar blog hierover?) gebruikt om te bepalen welke kleuren en lettertypes er in het design komen. De webdesigner borgt hierbij de toegankelijkheid voor een goede gebruikerservaring.

Als het ontwerp gereed is kan het gepresenteerd worden aan de opdrachtgever. Tijdens deze presentatie kan worden toegelicht waarom er bepaalde keuzes zijn gemaakt. Soms volgt er nog een correctie ronde, op basis van input vanuit de opdrachtgever of gebruikers die het (interactieve) ontwerp getest hebben. Nadat dit verwerkt is en ontwerp definitief is kan gestart worden met het daadwerkelijk coderen van de website, ook wel het webdevelopment genoemd.

Wat is webdevelopment?

De betekenis van webdevelopment is erg breed. In deze blog gaan wij ervan uit dat webdesign en webvelopment twee aparte processen zijn. Je kunt ook zeggen dat webdesign een onderdeel is van webdevelopment. In het blog zijn twee achter elkaar komende processen. Zodra het webdesign gereed is start development, dit is het programmeren van de website. Om een website interactief te kunnen aanbieden op internet moet die zijn opgebouwd in code. Vaak gebruiken we hiervoor de volgende programmeertalen html, css en javascript.

• HTML
  is de afkorting van HyperText Markup Language en is de standaard opmaaktaal voor pagina’s van websites. Het is de taal waarmee webpagina’s worden gemaakt, die vervolgens kan worden bekeken op je browser. HTML is een stuk code waarmee je de structuur van een webpagina bepaalt.
• CSS
  is de afkoring van Cascading Style Sheets dit zijn gecodeerde bestanden die elementen van de websitepagina selecteren in html en hun presentatie regelen. Denk hierbij aan lettertype voor de tekst, grootte, kleur en afbeeldingen.
• JavaScript
  is een scripttaal waarmee je elementen op websites pagina’s interactief kan maken. Een stukje van een scripttaal bestaat uit een aantal opdrachten die de browser uitvoert. Denk hierbij aan het verschijnen van pop-up als je op een knop klikt of het openklappen van een lijst met veelgestelde vragen.

De webdesigner bouwt met het ontwerp de website op met bovenstaande codes. Vaak wordt er gewerkt met Content Management Systeem. Dit maakt het makkelijk om de website te beheren en aan te passen. Een content managementsysteem (CMS) is een systeem waarin je content van een website beheert zonder dat je hier veel technische kennis voor nodig hebt. Vaak kun je inloggen op een Content Management Systeem via je webbrowser, een bekend CMS is WordPress.

Responsive opbouwen website

Belangrijk onderdeel tijdens het development proces van de website is het responsive opbouwen. Hiermee zorgt de webdeveloper ervoor dat de website op verschillende grootte schermen goed werkt en functioneert.

Zoekmachine optimalisatie

Tijdens het onderwerp structuur werd dit onderwerp al besproken, maar nu gaan we er dieper op in. Zoekmachine optimalisatie, ook wel search engine optimization (SEO) genoemd, zorgt ervoor dat je website beter vindbaar is in zoekmachines zoals Google of Bing. De webdeveloper houdt tijdens het development proces rekening met de eisen die worden gesteld aan de website door de zoekmachines. Belangrijk hierbij is de hoeveelheid pagina’s en tekst op de website en goede technische code.

Livegang

Als de website gereed is en volledig getest is die klaar om live te gaan. De webdeveloper plaatst de website online! Dit is een mooi moment om dat er veel tijd is gestopt in de realisatie van de website. Vaak is dit reden tot een klein feestje.

Vragen of meer weten?
Wil jij meer weten over webdesign of webdevelopment, neem gerust contact met Marijn Ruijl op. We helpen je graag!