Waar gaat deze blog over?
Waar te beginnen?
Een van de grootste fouten die ik in het begin, als websiteontwerper maakte, was te starten op de verkeerde plek binnen een project.
Ik begon altijd direct met het grafische deel van de website. Iets nieuws ontwerpen is namelijk heel leuk, dus de verleiding om hiermee te starten is dan ook groot. Heel begrijpelijk, maar niet verstandig.
Wijs geworden door de tijd kwam ik erachter dat deze manier van werken erg tijdintensief was en ook niet de beste resultaten opleverde.
Start met typen
Natuurlijk had ik tussendoor gehoord en gelezen wat de beste manier is om een project aan te pakken, maar dat drong toch niet helemaal door! Eigenwijze Achterhoeker.
De omslag kwam toen ik een bestaande website moest restylen. Alle inhoud was al aanwezig, misschien niet helemaal klaar voor SEO, maar dat was een zorg van later.
Ik beschikte in dit project over alle teksten en kon die dus direct op papier zetten. Iedere pagina kreeg zijn eigen bladzijde en binnen de kortste keren had ik de complete website netjes op papier staan.
Nu nog bepalen waar de foto’s en illustraties moesten komen, hoe de tekst was opgebouwd en waar de headers (h1, h2 etc.) moesten komen. De basis voor de SEO was gemaakt!
Nu nog kijken of de headers de goede zoekwoorden bevatten en of deze ook voorkwamen in de ‘gewone’ tekst. Nu waren de foto’s, video’s of illustraties aan de beurt. Zij moesten het verhaal verder ondersteunen.
Toen ik alles zo bekeek realiseerde ik me dat dit ook de manier is waarop zoekmachines, zoals Google, pagina’s bekijken en indexeren. Eigenlijk heel eenvoudig en logisch.
Aan de slag met het ontwerp
Nu dit klaar was moest ik alles ‘alleen nog maar’ mooi gaan verpakken. Dus Figma opgestart en aan het werk. Omdat alles al op papier stond en ook de volgorde bekend was (document order) was dit een mooie leidraad voor het ontwerp.
Hoewel je optisch alles overal kunt neerzetten op een webpagina, via CSS, is het toch wel verstandig ook hier de document volgorde aan te houden. Dit maakt alles meer overzichtelijk en bespaart je ook de nodig extra CSS of JavaScript code. Want net als voor design geldt ook voor code, keep it simple stupid (KISS).
Dit principe (KISS is ontwikkeld door de U.S. Navy in 1960) wordt vaak verkeerd begrepen. Het is niet zo dat iedereen van jong tot oud elk design moet kunnen begrijpen. Stel je moet een raketmotor ontwerpen en je past dit principe toe, dat is het niet zo dat iedereen dit ontwerp moet kunnen begrijpen. Sommige zaken zijn nu eenmaal ingewikkeld en vragen om de nodig kennis. Heb je deze kennis dan is het de kunst deze zo simpel mogelijk toe te passen. Dit is echter een proces dat tijd kost en daarom vaak wordt overgeslagen.
Het grafische deel is klaar.
Dit is ook het moment waarop je je design voor het eerst aan de klant laat zien. Sommigen websitebouwers maken eerste nog een grove schets, een wireframe, waarin alleen de plaats en de ruimtes grof worden geschetst. Dus zonder kleur, foto’s, lettertype etc. maar dat werkt eigenlijk alleen als je een gecompliceerde website moet bouwen met veel functies. Dan is het handig om eerst te kijken wat, waar en hoe geplaatst moet worden op een webpagina. Voor de ‘huis tuin en keuken’ website is dit denk ik een stap te veel en geeft vaak meer verwarring dan duidelijkheid.
Start met bouwen in Webflow
Nu was alles klaar en kon ik (eindelijk) beginnen met het bouwen van de daadwerkelijk website in Webflow. En dit bouwen gaat opeens een heel stuk sneller omdat bijna alles al bekend is en het alleen nog een kwestie van verpakken (in code) is.
Samengevat;
- Schrijf de teksten, ga deze logisch structureren en ga daarna op zoek naar de bijpassende foto's etc.
- Zet vervolgens deze tekst grafisch om met een programma zoals Figma.
- En als laatste start je Webflow op om alles in HTML, CSS en JavaScript te zetten.
Ik wil niet pretenderen dat dit de beste methode is om websites te ontwikkelen, maar voor mij werkt deze methode het beste.
Door veel fouten te maken heb ik een hoop geleerd, vooral hoe het niet moet.
