Tot nu toe hebben we je deze week laten zien hoe je een website opzet. Nu gaan we kijken hoe je het perfecte ontwerp voor jouw kleine hoekje van het internet kunt samenstellen. Aan het einde van dit artikel weet je hoe je het volgende moet doen:
- Een webpagina vanaf nul maken
- Ontwerp van webpagina's
- Hoe test je een websiteframe?
- Hoe maak je een websiteprototype?
- Hoe u uw merk op uw website kunt toepassen
Voordat u begint: denk na over uw tijd en doelen
In dit gedeelte gaan we dieper in op het gedetailleerd ontwerpen van een website, van vroege schetsen tot de uiteindelijke productie. Het is erg belangrijk om te beseffen dat het maken van grote, kwalitatieve websites een tijdrovend, iteratief proces is.
Dat proces begint nu, maar zal doorgaan... voor altijd. Het web is een arena die voortdurend verandert en het is te verwachten dat het blijft bewegen. U zult altijd aan uw website blijven werken terwijl u de prestaties ervan in de loop van de tijd verbetert of uw websitedoelen verandert om te reageren op veranderingen in de markt.
Om snel iets up and running te krijgen, moet je heel strategisch zijn over wat je als eerste kiest. Je hoeft niet meteen met ALLES te beginnen. Kijk terug naar je doelen en schets hoe de kleinst mogelijke website eruit zou zien om die doelen te bereiken – een minimaal levensvatbaar product.
Richt nu al je aandacht op het bereiken daarvan. Als je te groot en te snel gaat, zul je wekenlang vastlopen. Wees slim met het werk dat je kiest om aan te pakken.
Misschien is het enige dat je deze week kunt bereiken een one-page website opzetten met je prototype logo en 'coming soon' tekst erop! Dat is zeker beter dan niets en het zorgt ervoor dat je later verder kunt.
Het bouwen van uw website lijkt misschien een ontmoedigende taak, maar als u uw website plant, zult u beseffen welke pagina's absoluut essentieel zijn voor de lancering en welke pagina's later kunnen worden toegevoegd. Het is beter om een kleinere, hoogwaardige website te maken dan een brede site met veel pagina's met slechte of ontbrekende inhoud. U verliest niets door deze extra pagina's in eerste instantie te schrappen. Van websites wordt verwacht dat ze in de loop van de tijd evolueren en veranderen en u kunt uw website na de lancering eenvoudig uitbreiden.
Een webpagina plannen
Wanneer u begint met het bouwen van uw website, moet u eerst bedenken welke pagina's u wilt lanceren en hoe u deze pagina's met elkaar gaat verbinden, zodat gebruikers de content die u maakt, gemakkelijk kunnen vinden.
Navigatie is ontzettend belangrijk om goed te krijgen. Als bezoekers niet snel kunnen vinden wat ze zoeken, zullen ze net zo snel weer weggaan als ze zijn gekomen!
Dit wordt meestal aangepakt door een navigatiebalk te hebben die vast blijft zitten aan de bovenkant van de pagina wanneer de gebruiker naar beneden scrolt. Navigatie voor 95% van de websites komt in de vorm van een balk bovenaan die inklapt tot een pictogram op mobiele sites. Het is daarom essentieel om de juiste pagina's op het hoogste niveau te kiezen om in deze navigatiebalk te plaatsen. Je wilt niet per se dat elke pagina bovenaan wordt gelinkt, omdat dit ervoor zorgt dat de balk snel rommelig wordt, wat de navigatie belemmert.
Als uw website veel pagina's nodig heeft, zelfs vanaf de lancering, moet u ze groeperen in categorieën en ze nestelen in dropdownmenu's in uw navigatiebalk. U zult dit al vaak hebben gezien op modewebsites waar ze een groot assortiment producten hebben, verdeeld over meerdere categorieën. Ze gebruiken over het algemeen grote, ruime dropdownpanelen om hieraan tegemoet te komen. De beste voorbeelden slagen erin om een groot scala aan opties duidelijk weer te geven zonder dat het een rommelige stapel menu's in menu's wordt. Als u een modebedrijf of een ander bedrijf met een divers assortiment producten plant, is het de moeite waard om hier veel tijd aan te besteden om de navigatie goed te krijgen. Als mensen uw producten niet kunnen vinden, kunnen ze ze ook niet kopen.
Kijk nog eens naar uw marktonderzoek om te achterhalen wat uw bezoekers willen bereiken als ze uw website bezoeken. Zorg dat ze zo snel mogelijk en met zo min mogelijk verwarring op dat punt aankomen.
Uw marktonderzoek moet ook bijdragen aan het algemene ontwerp van uw website.
Ontwerp van webpagina's
Wanneer u een webpagina vanaf nul ontwerpt, moet u rekening houden met het ontwerp.
Vorige week hebben we een moodboard gemaakt om de look en feel van uw merk te helpen bepalen en om inspiratie te verzamelen. U zou hier weer gebruik van moeten maken voor uw website. U zou zelfs een heel moodboard kunnen maken dat gewijd is aan website-inspiratie. Nogmaals, er zijn genoeg bronnen die ongelooflijke website-ontwerpen laten zien.
Hieronder vindt u een aantal hulpmiddelen die u bij dit proces kunnen helpen:
- Abduzeedo website artikelen
- Voorbeelden van Dribbble-websites
- Voorbeelden van Behance-websites
- Voorbeelden van Pinterest-websites
Website-wireframing
Wireframing is een veelvoorkomende en uiterst nuttige stap in het ontwerp, of u nu een landingssite van één pagina of een uitgebreide e-commercewinkel maakt.
Hiermee kunt u snel spelen met lay-outs zonder dat u hoogwaardige ontwerpen hoeft te maken. Wireframing kan worden gedaan met pen en papier en het proces omvat het mocken van elke webpagina met behulp van lijnen en vakken om aan te geven waar inhoud kan worden geplaatst. Hiermee kunt u snel lay-outs genereren en de stroom van de pagina voorstellen zonder er veel tijd aan te besteden. Gebruik dit om na te denken over de plaatsing van uw oproepen tot actie (CTA's), afbeeldingen, tekstblokken en navigatie.
Website-prototype
Dit is een extra stap die u kunt nemen bij het bouwen van uw website. Dit is veel gemakkelijker dan het klinkt, omdat het geen codering vereist, aangezien er genoeg apps zijn die dit proces snel en eenvoudig maken.
Het idee is om uw wireframes te digitaliseren (u kunt nog steeds tijdelijke aanduidingen voor tekst en afbeeldingen gebruiken) en ze met behulp van de prototypingsoftware aan elkaar te koppelen, zodat u een nog duidelijker beeld krijgt van de flow en navigatie van de site.
U kunt grijswaarden, statische afbeeldingen van uw wireframe-layouts maken in beeldsoftware zoals Photoshop en deze vervolgens uploaden naar deze prototyping-sites. De sites stellen u vervolgens in staat om meerdere prototypes aan elkaar te koppelen om een mockup van uw website te maken die u kunt bekijken en testen.
Bij veel van deze apps kunt u direct in de software ontwerpen maken:
U kunt beginnen met het gebruiken van uw prototypes om uit te zoeken waar u uw berichten het meest effectief gaat plaatsen. Wanneer u tijdelijke inhoud vervangt door echte inhoud, zorg er dan voor dat deze bijdraagt aan het bereiken van uw strategie. Wanneer iemand op uw landingspagina aankomt, weten ze dan binnen een paar seconden precies wat uw bedrijf doet? Stuurt de website ze snel naar de acties die u wilt dat gebruikers voltooien?
Natuurlijk gaat het hierbij net zo goed om de berichten zelf als om de plek waar ze op de pagina worden geplaatst en gepresenteerd.
Merkwebsite ontwerp
Zodra u uw ideale lay-outs hebt vastgesteld, wordt het ontwerp op natuurlijke wijze vervuld door uw merk. U moet het werk dat u vorige week hebt voltooid, toepassen op uw website, aangezien consistentie de sleutel is tot het opbouwen van uw merk. Uw website moet er goed uitzien en passen bij de rest van uw marketingactiviteiten en communicatie.
De merkimago's die u hebt gekozen, zijn cruciaal voor het creëren van een aantrekkelijke en boeiende site. Afbeeldingen van hoge kwaliteit zijn essentieel om ervoor te zorgen dat uw website er scherp uitziet op veel verschillende formaten. Een wazige afbeelding creëert een slechte eerste indruk.
Het logo dat u in de branding week hebt ontworpen, moet uw eerste aanspreekpunt zijn. Zorg ervoor dat het bovenaan uw website op elke pagina zichtbaar is. Veel websites zullen het inbedden in het bovenste navigatiemenu dat waarschijnlijk op elke pagina staat. U kunt het logo ook gebruiken voor navigatie, door te klikken kunt u terugkeren naar de startpagina van de site.
Locaties van merkkleuren
Door uw merkkleurenpalet op uw website toe te passen, zorgt u ervoor dat uw merk duidelijk naar voren komt. Dit alleen al kan voldoende zijn om uw website direct herkenbaar te maken. Uw primaire merkkleur moet consistent op uw site voorkomen.
Hier zijn enkele veelvoorkomende plekken waar u uw primaire merkkleur kunt krijgen:
- Navigatiekoppen
- Achtergrondkleuren bovenste banner (wees voorzichtig als u een overheersende kleur hebt)
- Paginatitels en ondertitels
- Tekst hyperlinks
- Knopkleuren – (hoewel u wellicht een contrasterende kleur wilt kiezen om uw CTA’s te laten opvallen)
- Kleur iconen
- Overlays bovenop uw stockfoto's
U kunt uw secundaire kleuren op vergelijkbare manieren gebruiken om interesse, variatie en contrast te creëren. Wees gewoon consistent met uw toepassingsmethode. Vergeet niet dat u uw prototypingsoftware kunt gebruiken om zoveel te experimenteren als u wilt. Het testen van variaties en itereren op uw ontwerpen is de sleutel tot het snel bereiken van een definitief ontwerp waar u tevreden mee bent.
De juiste afbeeldingen kiezen
Bij het kiezen van goede graphics voor uw website moet u gebruikmaken van de merkactiva die we in week 8 hebben beschreven. Hier volgen nog enkele tips om ze op uw website toe te passen:
- Zorg ervoor dat de afbeeldingen die u kiest de tekst die u erbij schrijft, complimenteren. Ze moeten de duidelijke boodschap die u probeert over te brengen, ondersteunen.
- Wees voorzichtig met het plaatsen van tekst bovenop afbeeldingen. Het kan de leesbaarheid schaden. Het toepassen van een accentkleur over de afbeelding kan helpen door de ruis op de achtergrond te verminderen.
- Grote afbeeldingen kunnen de laadtijden beïnvloeden. U kunt ze altijd opslaan als jpeg om de bestandsgrootte te comprimeren als dit het geval is.
- Vermijd stock die er te generiek of nep uitziet. Het is heel duidelijk en zal het vertrouwen en de authenticiteit van uw website schaden (daarover later meer).
- Ga niet overboord met beeldmateriaal. Afbeeldingen zijn erg krachtig en kunnen afleidend zijn als ze te veel worden gebruikt. Denk aan de doelen van uw website en zorg ervoor dat elke afbeelding een rol heeft en deze niet hindert.
Focus op website
Een ander cruciaal element van webdesign is hoe je je content schrijft en presenteert op een manier dat mensen daadwerkelijk de tijd nemen om het te lezen. Essays over producten schrijven op je homepage werkt gewoon niet en is niet boeiend genoeg.
Een deel hiervan wordt opgelost door een duidelijk webfont te gebruiken, met goed contrast, grootte en spatie. Als u thema's gebruikt die in een websiteplatform zijn ingebouwd, zijn er genoeg thema's die van nature een goede leesbaarheid hebben. Dit is echter maar de helft van de strijd. Leesmoeheid, vooral op schermen, is heel reëel en u moet slim zijn om ervoor te zorgen dat u uw tekst schrijft en positioneert op een manier die ook daadwerkelijk wordt gelezen.
Volg deze richtlijnen:
- Zorg ervoor dat uw tekst duidelijk is en vermijd dubbelzinnigheden.
- Houd de zinsstructuur simpel. Vermijd complexe woorden en combinaties.
- Kom snel ter zake.
- Verdeel grote stukken tekst in afzonderlijke, kleinere blokken met een eigen titel.
- Probeer niet te veel tegelijk over te brengen. Bepaal het punt dat elk tekstblok probeert over te brengen en houd je daaraan.
- Gebruik afbeeldingen naast tekst om mensen aan te moedigen om te lezen.
- Gebruik witruimte! Zorg voor voldoende ruimte (padding) rondom uw content, zodat deze niet te vol staat.
Hoe u ervoor zorgt dat u een mobiele website bouwt
Het is ontzettend belangrijk dat uw website soepel werkt op mobiele telefoons en tablets, aangezien zoveel mensen tegenwoordig content consumeren via deze apparaten. Google zal websites in hun zoekopdrachten daadwerkelijk straffen als u hier niet aan voldoet!
Gelukkig is dit tegenwoordig vrij eenvoudig. De meeste standaardthema's die bij een websiteplatform worden geleverd, zouden 'responsief' design moeten gebruiken. Dit betekent dat naarmate de schermbreedte afneemt, de content zich automatisch aanpast aan deze nieuwe grootte, perfect!
Toch is het de moeite waard om te controleren of de afbeeldingen en video's die u gebruikt zichtbaar blijven wanneer ze worden verkleind en dat de tekst nog steeds leesbaar is. Als u niet meerdere verschillende soorten tablets en mobiele telefoons bezit, vraagt u zich misschien af hoe u dit kunt controleren. Nou, de snelste manier is om de linker- of rechterrand van uw browser te pakken (zorg ervoor dat deze niet op volledig scherm staat) en deze naar links of rechts te slepen om het venster groter of kleiner te maken. U zult zien dat de inhoud van uw website wordt aangepast terwijl u dit doet en zo kunt u uw lay-outs op verschillende formaten analyseren. Er is ook een nauwkeurigere methode waarbij u een tool gebruikt die is ingebouwd in de Chrome-browser:
- Klik met de rechtermuisknop op uw webpagina
- Klik op 'Inspecteren' (hierdoor verschijnt een paneel)
- Linksonder in dit nieuwe paneel staat een pictogram van een scherm en een telefoon (schakel de apparaatwerkbalk in)
- Klik op dit pictogram
Nu heb je bovenaan verschillende grijze balken waarmee je kunt simuleren hoe je browser eruitziet bij specifieke resoluties. Er is zelfs een dropdown om populaire telefoons/tablets te kiezen en de resoluties die ze gebruiken. Leuk!
Of u nu besluit om uw bedrijfswebsite zelf te bouwen of een bureau inhuurt om het voor u te doen, er zijn veel kosten verbonden aan het ontwerpen van een website. U moet niet alleen betalen voor uw domeinnaam, hostingkosten en welk webplatform u ook kiest, er zijn ook doorlopende kosten voor website-onderhoud.
Als je een designbureau inhuurt om het voor je te doen, zal dit een grote kostenpost zijn voor je startup. Je moet overwegen of je fondsen deze kosten dekken of dat het goedkoper is om het zelf te doen. Zoals we in de afgelopen paar artikelen hebben laten zien, is het opzetten van een website een stuk eenvoudiger dan je denkt. Hoewel er kosten verbonden zijn aan beide benaderingen van het ontwerpen van je website, moet je bepalen welke voor jou het meest haalbaar is.
Samenvatting
Denk bij het ontwerpen van een website na over hoe u wilt dat uw merk wordt vertegenwoordigd. De kans is groot dat uw website een van de eerste indrukken is die klanten van uw merk krijgen. Dit betekent dat het cruciaal is dat u de juiste boodschap overbrengt. U moet er ook voor zorgen dat uw website gebruiksvriendelijk is en dat deze op een breed scala aan apparaten kan worden gebruikt. Een website die er op mobiele apparaten niet goed uitziet, kan ervoor zorgen dat een gebruiker weggaat.
Denk nog eens terug aan uw strategie en bedenk hoe u uw ontwerp kunt gebruiken om uw gebruikers aan te moedigen om op de door u gewenste manier door de website te navigeren, zodat u uw gewenste doel bereikt.
Zodra u uw website heeft ontworpen en gelanceerd, wilt u controleren of deze daadwerkelijk het beoogde doel dient.
