webdesign
drie onderdelen van het maken van een website
VOORBEREIDING
taakdefinitie
Dit is het uitgangspunt van alles. Hier leer ik het project kennen, doelstellingen en doelgroep worden gedefinieerd. Het wordt duidelijk wie er verantwoordelijk is voor de verschillende onderdelen in het ontstaan van de website.
Dit punt maakt vaak een verrassend groot deel uit in de ontwikkeling van een website, maar hoe nauwkeuriger hier alle details worden besproken, hoe minder vragen en misverstanden zijn te verwachten en hoe beter het werk en het resultaat zal zijn.
· Is er al een domein?
· Wie zorgt er voor een host/serverplek?
· Is er al een logo?
· In aanvulling op de grafische elementen horen bij een website goede en zoekmachine-vriendelijk geschreven teksten – wie schrijft deze?
· En wanneer worden zij ingeleverd?
· Meestal moeten er ook foto’s op de website. Wie maakt deze?
· Of wie zoekt naar passende stockfoto’s?
analyse
Hiervan maak ik gebruik als het gaat om het herstructureren of de nieuwbouw van een bestaande website of als de websites van concurrenten beoordeeld moeten worden.
concept
Na een gedetailleerde briefing met een duidelijke definitie van alle doelpunten begin ik aan het ontwerp van de website. Structuur, navigatie, pagina-elementen en inhoud worden geschetst.
VORMGEVING
inhoud
Ook zonder dat het ontwerp al helemaal af is kan en moet er worden begonnen met het verzamelen van de inhoud. De inhoud is het belangrijkste van een website, hiervoor wordt hij bezocht. Alle teksten, foto’s, afbeeldingen en video’s moeten van hoge kwaliteit en zinvol zijn, ter zake doen en geoptimaliseerd worden voor zoekmachines.
grafisch ontwerp
Vóórdat ik begin aan een definitief ontwerp voor de website schets ik één of twee voorbeeldpagina’s op papier of in een grafisch programma. Als de ontwerpen goed zijn gekeurd, wordt het basisontwerp gedaan in de browser.
techniek
Voor veel websites, die ik ontwerp en maak, gebruik ik WordPress, zodat zij voorzien zijn van een beheersysteem (CMS – Content Management System). Op die manier heeft de klant zonder veel technische kennis toegang tot zijn site en is hij of zij in staat, om deze op elk moment te updaten en te veranderen.
REALISATIE
samenbrengen van alle elementen
Laatste loodjes wegen vaak het zwaarst: Alle nog ontbrekende inhoud wordt nu op de site geplaatst, en er wordt de laatste hand gelegd aan het ontwerp.
testen
De website wordt door testpersonen (met specifieke taken) doorgeklikt (usability testing). Alles wordt geoptimaliseerd tot iedereen tevreden is.
launch
De website gaat online.
Na een paar weken worden – indien nodig – op basis van alle ervaringen en feedback laatste verbeteringen uitgevoerd.
Dit is een continu proces!
Op een gegeven moment komt er nieuwe inhoud bij en moeten er aanpassingen gemaakt worden. Dit gaat door totdat de site niet meer voldoet aan de eisen of gewoon visueel of technisch verouderd is. Dan begint het proces opnieuw.
drie onderdelen van het onderhouden van een website
ONDERHOUD
Een website is niet alleen complex tijdens het ontstaan, ook na de “voltooiing” blijft hij veranderen en vergt hij onderhoud.
· De samenstelling van een team verandert,
· klanten wensen meer service,
· technische veranderingen stellen nieuwe (en vaak onvoorziene) eisen aan de website.
· Nieuwe teksten, verwijzingen of foto’s zijn nodig.
Een website moet minstens één keer per maand geüpdate of er moet nieuwe inhoud gepubliceerd worden. De aantrekkelijkheid van een site wordt verhoogd door geregeld beheer en actualiteit – niet alleen voor de bezoekers, maar ook voor zoekmachines.
Het bijwerken van websites geldt met name voor alle technische elementen (content management system en alle andere software-elementen, zoals theme en plugins). Dit is absoluut essentieel voor de veiligheid en functionaliteit van een website.
KWALITEITSZORG
Kwaliteitszorg is een proces. Een website van goede kwaliteit ontstaat door continu oude inhoud te blijven testen, de website regelmatig met nieuwe inhoud aan te vullen en door kritisch te blijven kijken naar alle documenten, alle verklaringen en het ontwerp.
De bezoekers van uw website zijn uw grootste critici of uw tevreden klanten.
DATA BACKUP
Regelmatig backups maken is een van de meest belangrijke taken bij het onderhouden van een website.
Op vaste tijdstippen (en zeker na grote wijzigingen of het invoegen van veel nieuwe inhoud) moeten er veiligheidskopieën gemaakt worden van alle pagina’s, bestanden en bijbehorende databases.
Op de website traxxys.com worden de verschillende soorten opdrachtgevers en -benaderingen van het adviesbureau gepresenteerd in overzichtelijke tabellen en beschreven in korte, persoonlijke interviews. De video’s worden getoond in een wisselaar, voorzien van thumbnails van stilstaande beelden die zijn aangepast aan de algemene vormgeving van de website.
Nieuwe praktijk, vertrouwde locatie, bekende naam, nieuwe website: Op bewegungaufderinsel.de worden de ruimtes en alle aanbiedingen overzichtelijk gepresenteerd. Het logo ontwerp, de symbolen en het kleurenpalet komen terug in de bijbehorende producten zoals raamstickers, visitekaartjes en flyers.
Weer eens werd het hoogste tijd om een website helemaal te moderniseren. Twaalf jaar geleden heb ik naturheilpraxis-rfg.de (toen nog onder een andere naam) ontworpen en gebouwd en sindsdien onderhouden. De nieuwe componenten brengen de website technisch up-to-date, en een grondig herziene structuur zorgt voor een beter overzicht en een duidelijkere indeling.
De vertaalster Emmanuelle Tardif had een drietalige website nodig. In de desktopversie van versionfrancaise.nl werd dit opgelost door pagina’s in indexkaart-look met tabbladen te gebruiken; op die manier zijn de talen goed in beeld en gemakkelijk te selecteren.
Op deze zijwaarts scrollende website presenteert Frank Sorge een selectie van zijn foto’s in een galerij. franksorge.de fungeert bovendien als verdeler naar de andere twee websites van de fotograaf en imker. Gebouwd als HTML5-template, is hij vrij statisch, maar vooral licht, stabiel en vrijwel onderhoudsvrij.
Met veel foto’s wordt op casa-brava.com de gelijknamige, rustige Spaanse finca gepresenteerd. Naast afbeeldingen van het huis en in het bijzonder van het gastenverblijf, is er een kaart en zijn er foto’s van de nabije en verdere omgeving, die ook voorzien zijn van afstandsinformatie.
In deze tijden leek het mij belangrijk om ruimte te geven aan een actueel onderwerp. www.less-co2.nl is een van de vele benaderingen, een andere actieve stap tegen het gevoel van onmacht. Een plek voor ideeën en initiatieven.
Op de website xeniaruhrig-psychotherapie.de stelt een psychotherapeute uit Berlijn zich voor. De foto’s helpen erbij een indruk te geven van zowel de therapeute als de sfeer van de praktijk. Extra aandacht werd besteed aan het beantwoorden van veelgestelde vragen op een visueel overzichtelijke manier.
De website tevreede.nl is een zogenaamde one pager. Om deze redelijke kleine site een compleet uiterlijk te geven, was mijn doel om een sfeervol foto te combineren met een attractief ontwerp en een goede user experience (UX), wat misschien het best vertaald kan worden met ‘gebruikerservaring’.
De website www.bienenschwarm-berlin.de is een kleine en nogal statische site. Ik heb daarom voor een html5-template van HTML5up gekozen dat ik aangevuld heb met foto’s en teksten van mijn klant. Het idee is dat mensen buiten een bijenzwerm spotten en op zoek gaan naar een imker, die ervoor zal zorgen. Ik wilde dus een volledig responsive website die er goed uitziet op mobiele telefoons, desktop computers en tablets (ook in staande weergave). Om de site extra gebruikersvriendelijk te maken biedt de link naar het telefoonnummer gebruikers aan de nummer in hun contacten op te slaan (iPads en Kindles) of om het telefoonnummer direct te bellen (Androids en iPhones).
Dit is de website marthacastaneda.nl. In dit geval werd mij gevraagd om een website af te maken die door een andere ontwerper begonnen was. Hoewel het een hele uitdaging kan zijn om het werk van een ander voort te zetten, is het altijd een goed gevoel wanneer het resultaat uiteindelijk overeenkomt met het idee van de klant.
De website www.studio-danse.de is van een dansschool in Berlijn, die voornamelijk modern dance- en balletlessen aanbiedt voor kinderen en jongeren. Ik had het logo en de grafische elementen al eerder voor postkaarten en brochures van Studio Danse ontworpen en kon deze nu aanpassen voor het gebruik op de computer. Dans is beweging, dus heb ik dit als thema gekozen voor de manier waarop je door de website navigeert, in de continu draaiende galerie aan het einde en in de verschuivingen en overlays van de foto’s in de achtergrond.
Naast veel foto’s en teksten werd het uiterlijk van deze website bepaald door decoratieve grafieken, handgetekende plattegronden en online-formulieren. Voordat de fysiotherapiepraktijk werd gesloten, heb ik deze website elf jaar lang beheerd en in de loop van de tijd geüpgraded met een SSL-certificaat en een modern theme.
Een van de eerste websites, die ik gebouwd heb, was gabrieledziemba.de. Dankzij het content management system (WordPress) was de klant in staat, haar site zelf bij te houden. De onderdelen heb ik steeds aan kunnen passen aan nieuwe technische ontwikkelingen, dus werd de website later ook responsive op tablets en smartphones.
Deze website heb ik recent helemaal verniewd (zie boven).
In het ontwerp van deze website wilde de Nederlandse gewichts- en voedingscoach haar Zuid-Afrikaanse achtergrond laten zien. Ze maakte gebruik van de blog-pagina voor haar recepten, die gezocht en gevonden konden worden door middel van een systeem van categorieën en trefwoorden. De website bevatte ook de functie voor een seizoensgebonden e-nieuwsbrief.
Ten slotte mijn twee “zandbakken”. Hier probeer ik nieuwe ideeën en durf ik technische uitdagingen aan.
De website mijn berlijn is vooral een voorbeeld voor een ontwerp, maar langzaam vul ik hem ook met wat inhoud.
Gekriggel & Gekrabbel is na de verhuizing ook weer online. Het enige audiobestand wat ik ooit gebruikt heb zit op deze website.
