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.

Vergeleken met het grafisch ontwerp van traditioneel drukwerk is webdesign een breder terrein, omdat websites een interactief medium zijn: de interactie van gebruikers met een website is typisch veel ingewikkelder dan met traditioneel drukwerk, waar hooguit in gebladerd kan worden. Ook bestaat drukwerk uit statische tekst, afbeeldingen en andere visuele elementen, terwijl websites ook andersoortige elementen kunnen bevatten zoals animaties, video en audio, knoppen, formulieren en andere middelen voor gebruikersinvoer. Veel websites zijn in feite gebruikersinterfaces van applicaties, en de technische middelen hebben zich zozeer ontwikkeld dat vrijwel willekeurige applicaties te realiseren zijn, zoals spellen, interactief bankieren, applicaties om audio of video af te spelen, op te nemen en te bewerken, enzovoorts. Webdesign is dan in feite user interface design met inachtneming van de specifieke technische mogelijkheden en eisen van het web.

Richtlijnen op het gebied van webdesign zijn onder meer de Web Content Accessibility Guidelines (WCAG) van het World Wide Web Consortium en https://digitoegankelijk.nl/ van de Nederlandse overheid. Doel hiervan is een goede toegankelijkheid van websites voor alle gebruikers, inclusief gebruikers met lichamelijke beperkingen. Websites die voldoen aan de standaarden voor goed webdesign kunnen een waarmerk^[1] aanvragen bij Stichting Drempelvrij.

In tegenstelling tot de traditionele structuur van boeken, met een inhoudsopgave, verschillende indexen, een hoofdstukindeling en dergelijke, worden websites over het algemeen minder lineair vormgegeven. Daarbij wordt gebruikgemaakt van diverse menu's, zoekfuncties en soms ook inlogfuncties om delen van de inhoud af te schermen van het grote publiek. Een manier om oriëntatiemogelijkheden in een website te bieden is de zogenaamde broodkruimelnavigatie, waarbij het door de gebruiker gekozen pad in de boomstructuur van de website op elke pagina is aangegeven.

De inhoudelijke samenhang van de boodschap van een website, wordt met computercommando's in de tekst aangegeven. Doorgaans worden hiervoor HTML-codes opgeven. Daarnaast kan gebruikgemaakt worden van een stylesheet. Daarin worden aanwijzingen vastgelegd over de gewenste weergaven van bepaalde HTML-elementen zoals lettertypes, kleuren en achtergrondafbeeldingen, evenals de positionering van en spatiëring tussen elementen op de site. Door meerdere webpagina's aan eenzelfde stylesheet te koppelen, is het eenvoudiger om de hele site in een uniforme opmaak te presenteren. De uiteindelijke weergave is echter voor de designer niet volledig in de hand te houden, omdat verschillende lezers verschillende apparaten zullen gebruiken om zijn websites te raadplegen.

Naast statische opmaakelementen kunnen er ook dynamische elementen worden toegevoegd zoals mouseovers, webvideo's en dergelijke, maar ook afzonderlijke interactieve onderdelen, bijvoorbeeld een landkaart waarvan elk onderdeel afzonderlijk aanklikbaar is. Voor het toevoegen van dynamische en interactieve elementen bestaan allerlei technieken: JavaScript, Dynamic HTML, Adobe Flash. Deze sites leveren vaak echter problemen op voor mensen met tekstbrowsers als Lynx en voor bijvoorbeeld blinden die surfen met een spraakbrowser of brailleleesregel, omdat er geen alternatieve inhoud wordt aangeboden.

Websites zien er niet op iedere computer en in iedere browser identiek uit. HTML wordt door elke computer/browser afzonderlijk geïnterpreteerd en weergegeven. Een webdesigner dient daarom rekening te houden met deze pluriforme weergave, en zal derhalve streven naar een crossbrowser opmaak om dit zo veel mogelijk in de hand te houden.

• De resolutie is de grootte van het scherm, gemeten in pixels. De resolutie kan per gebruiker variëren. Een grote resolutie biedt vooral meer ruimte in de breedte, de lengte is over het algemeen minder van belang omdat dat wordt opgevangen door scrollen. Een ontwerp dat niet uitgaat van vaste beeldschermafmetingen noemt men wel liquid design, de inhoud "vloeit" hier als het ware in de beschikbare ruimte.
• De kleurendiepte geeft aan hoeveel kleuren het scherm kan weergeven. In het verleden was 256 kleuren gangbaar en moest daar rekening mee worden gehouden. In die tijd zijn de webkleuren ontstaan. Tegenwoordig zijn hoge kleurendiepten echter normaal.
• De kleurweergave kan verschillen per scherm. Op sommige computers is een programma geïnstalleerd dat gammacorrectie uitvoert, waardoor kleuren worden aangepast. Het maakt ook verschil of er een CRT- of tft-beeldscherm wordt gebruikt.
• De soort webbrowser is ook van belang. Browsers hebben ieder een eigen interpretatie van de code van een webpagina. Door het W3C zijn standaarden ontwikkeld over hoe de code moet worden geïnterpreteerd. De browsers houden zich daar nog niet altijd volledig aan, vooral Internet Explorer is voor ontwikkelaars vaak een zorgenkind.

Afgezien van zulke technische weergave elementen, verwachten ook (kleuren)blinde, slechtziende of dove gebruikers dat een website ook voor hen raadpleegbaar is.

Het webdesign van een website heeft invloed op de vindbaarheid van een website. Om de vindbaarheid in zoekmachines als Google en Bing te vergroten, kan er tijdens het ontwikkelen van een webdesign rekening worden gehouden met een aantal structuurelementen voor een webdesign. Zo is het belangrijk om bij een webdesign rekening te houden met de plaatsing van een H1 en H2 titel. Ook het toevoegen van een kruimelpad vergroot de vindbaarheid, omdat zoekmachines de sitestructuur op deze wijze beter begrijpen. Het vindbaar maken van een website in de zoekmachines wordt ook wel SEO of Zoekmachine Optimalisatie genoemd.

De creatie van een website gaat in verschillende stappen. Elke stap kan meestal worden uitgevoerd door een andere, op het betreffende gebied gespecialiseerde persoon. Vaak wordt er bij het maken van een nieuwe website, nadat duidelijk is wat de gewenste doelstellingen zijn, eerst een schematische opzet gemaakt, een zogenaamd wireframe, over hoe de ontsluiting dient te gaan functioneren en welke elementen opgenomen dienen te worden. Op basis van dit wireframe wordt vervolgens een grafische opzet van de gehele webpagina gemaakt, die kan worden gepresenteerd in de vorm van een bijvoorbeeld een enkel JPEG-bestand, vergezeld van een aantal afzonderlijke plaatjes die gebruikt gaan worden als losse grafische elementen, of als volledig klikbaar model dat een goede indruk geeft van de uiteindelijke weergave. De tekstuele inhoud krijgt wel een plaats, maar het opstellen van de teksten is een losstaand proces. Vaak wordt Lorem ipsum gebruikt om de ruimte bedoeld voor teksten, tijdelijk te vullen.

De grafische opzet wordt vervolgens omgezet in HTML, basen genaamd, waarin de bijgeleverde grafische elementen worden gebruikt. Ook op dit moment is de tekstuele inhoud nog bijzaak. Als tekst wordt vaak het Lorem ipsum gebruikt. Op dit moment kan worden getest hoe de code eruitziet in verschillende omstandigheden. Ten slotte wordt de interactiviteit toegevoegd en worden de uiteindelijke teksten in de verschillende pagina's van de website geplaatst. Het is mogelijk dat het om een dynamische website gaat, waar de inhoud met behulp van een CMS aangepast kan worden. De codering van dit server-sidegedeelte valt echter niet onder webdesign, maar wordt overgelaten aan de webontwikkelaar. De interactiviteit en uiteindelijke afwerking op de webpagina zelf kan verder verfijnd worden door een zogenaamde fronteer.

Met de opkomst van smartphones, PDA's en andere (persoonlijke) apparaten die toegang hebben tot het internet, veranderen ook de eisen die gesteld worden aan een website. Het lijkt niet eenvoudig om bij het ontwerp en de bouw zicht te houden op de uiteenlopende vormen van gebruik die inmiddels mogelijk zijn. Met behulp van de webstandaarden die onder meer door het W3C zijn ontwikkeld, kan er toch voor worden gezorgd dat een site onder al die gebruikersomstandigheden bruikbaar is. Zo is HTML bedoeld om de inhoud van een webpagina van structuur te voorzien, CSS om de (grafische) stijl vast te leggen en de combinatie ECMAScript/DOM om interactiviteit aan een pagina toe te voegen. Een voordeel is dat al die componenten los van elkaar kunnen worden ontwikkeld en beheerd. Sterker nog: als zaken als inhoud, stijl en/of scripting worden gemengd, zal dat onmiddellijk een negatieve invloed hebben op de bruikbaarheid van een webpagina voor andere toepassingen dan een pc-met-beeldscherm-en-Internet-Explorer. Omdat het gebruik van andere browsers, besturingssystemen en webapparaten gestaag toeneemt, wordt het voor webdesigners steeds belangrijker om rekening te houden met dergelijke vormen van gebruik.

• Adobe Flash
• ASP
• Grafische vormgeving
• JavaScript
• HTML
• PHP
• XML
• Webdesigner
• Webdevelopment

Richtlijnen op het gebied van webdesign zijn vastgelegd in het w3c, WCAG en webrichtlijnen.nl. Accessibillity en usabillity zijn hierin uitgangspunten. Websites die voldoen aan de standaarden voor goed webdesign, kunnen een waarmerk aanvragen bij Stichting Drempelvrij.

• (en) Toegankelijkheidsrichtlijnen van het W3C
• (en) The Web Standards Project