14 Tips (stappen) voor een nieuw website ontwerp

zelf website ontwerpen in 14 stappen
Als je een nieuwe website wilt gaan opzetten dan krijg je veel vragen te verwerken. Zelfs als je een website laat bouwen zul je verschillende keuzes moeten maken. Op deze pagina geef ik tips en een stappenplan om tot een mooi nieuw website ontwerp te komen. Het maakt dus niet zoveel uit of je het handwerk zelf doet of dat je het laat doen. Uiteidenlijk zijn de gedachten het belangrijkst.

Tip 1: Kies de juiste Domein extensie

tips voor een nieuwe website:domein extensieDenk na over de domeinextensie die bij je domeinnaam hoort. De meeste mensen die ik spreek hebben vaak al een goede naam bedacht. Meestal hebben ze echter nog niet over de extensie nagedacht.

Bij het kiezen van een extensie gelden de volgende SEO regels:

  • Alleen zaken doen in Nederland gaat het beste met een .nl extensie.
  • Ga je over de grens, maar ga je niet verder dan Duitsland en België, dan is de beste optie om verschillende websites met verschillende extensies te gebruiken. Dus .de en .be en .nl De meeste mensen denken dat dit dan 3x zoveel moet kosten, Dat is echter niet waar omdat de meeste tijd in het ontwerp zit. Het copiëren van een website is zo gedaan. De vertaling moet dan nog wel gebeuren, Wil je dit niet, dan is de volgende optie een .com extensie.
  • Ga je wereldwijd, dan zijn de verschillende websites geen optie meer en dan ga je voor een .com extensie eventueel met een plugin voor vertalingen. Dit kan ook met de zogenaamde multisite van WordPress, maar de website wordt dan snel zwaar en traag. Daarnaast heeft de multisite meer beperkingen met plugins en thema’s

Meertalige website

Als je een bestaande website meertalig wilt maken dan moet je opletten wat je doet. Gebruik een goede plugin of copieer dezelfde website op een verschillende URL zoals ik zelf gedaan heb. Dus meijwebdesign.nl en meijwebdesign.nl/en zijn 2 verschillende WordPress installaties. De tweede (de Engelse versie)  is een copie van de eerste en vervolgens handmatig vertaald. Het grote voordeel is dat je nu de taal indicatie voor Google altijd goed hebt staan. Dit gaat namelijk bij heel veel meertalige websites verkeerd.

Tip 2: Welke Hosting

Bij kiezen van hosting gelden eigenlijk verschillende punten waar je op moet letten. tips voor een nieuwe website: hosting vimexxJe budget is hier bepalend. Hoe meer budget, hoe beter de hosting ofwel computerruimte die je huurt.

  • Kies een hosting partij die de server vlak bij je klanten heeft staan. Dus wonen je klanten in Nederland, dan dient de server daar ook te staan. Wonen ze in Frankrijk dan is het beter om je server daar te huren. De reden is 2 ledig: ten eerste vind Google het logisch dat de server vlak bij je klanten staat. Ten tweede kost afstand kostbare tijd. De reactie tijd van Vimexx is b.v. 0.7 seconden. Zet je de server in Australië dan kan dezelfde kwaliteit server op eens een reactie tijd van 3 tot 6 seconden geven. Niemand wordt hier vrolijk van. Snelheid is nou eenmaal een SEO dingetje van Google, dus ook jouw ranking in de Google zoekmachine wordt er niet makkelijker op.
  • Snelheid: kies voor een SSD schijf als de hosting.
  • Veiligheid: kies voor een SSL certificaat. Sommige hosting partijen leveren deze gratis mee. Je kunt het certificaat echter ook huren per jaar, prijzen varieren sterk afhankelijk van wat je verzekert. Je kunt een certifiaat zelf op de markt kopen en installeren of  je huurt hem van je hosting partij.
  • Afhankelijk van je domeinnamen, kies je dan het geheugen en pakket.
  • Heb je een ruim budget, neem dan hosting vanaf 30 euro per maand, zodat je de ruimte niet meer deelt met andere websites. Jouw website snelheid kan namelijk erg afhangen van andere websites die ook dezelfde ip adres gebruikt (het grote nadeel van een klein budget en shared hosting)
  • Wil je meer uitleg over hosting, kijk dan eens de hosting uitleg op de FAQ bladzijde.

Ik gebruik zelf Vimexx en dan wel het pakket ‘compleet’ WordPress hosting. Is je budget hoger dan is SiteGround misschien iets voor je. Dit is een hosting partij die vaak wordt aanbevolen. Beide partijen hebben hun server in Nederland staan, waarbij SiteGround ook nog in 2 andere landen servers heeft.

Tip 3: Kies de website software die bij je past.

Momenteel zie je dat de meeste webdesigners een WordPress website aanbieden. Er zijn echter legio mogelijkheden om een nieuwe website op te zetten. Veel gebruiken qua opzet een verschillend software. Dit draait op de server, dus op de achtergrond, maar de uitput naar de browser (datgene wat je ziet op je scherm) zal altijd de statische HTML en CSS zijn. Enkele veel gebruikte software vormen:

wordpress-joomla-drupal-magento

  • De statische website in HTML en CSS. Deze kun je over het algemeen niet zelf uitbreiden met nieuwe pagina’s, daarvoor zijn alle hier onder genoemde mogelijkheden beter geschikt.
  • Het CMS WordPress: hier kun je zelf pagina’s aan toevoegen of veranderingen in teksten maken. WordPress is geschikt voor elke soort website. Dus voor elk bedrijf geschikt, maar ook voor de blogger of voor het toevoegen van een webshop. WordPress is momenteel het meest gebruikte tool voor de webdesigner.
  • Het CMS Joomla: Joomla kan hetzelfde als WordPress, maar over het algemeen wordt het niet veel meer gebruikt in Nederland. Dit heeft voornamelijk met de looks van de Joomla websites te maken. Dit was een beetje een ondergeschoven kindje. Tegenwoordig is er wel een inhaal slag gemaakt. Joomla heeft wel een betere structuur en is daarvoor waarschijnlijk beter in SEO en in multi talen.
  • Het CMS Drupal: zeer specialistisch en alleen aan te raden als je een stevig budget hebt en zelf echt niets wil doen aan je website.
  • Magento: voor de zwaardere webshop, meer dan 1000 artikelen. Wordt ook als zeer specialistisch beschouwd.
  • Presta: Voor webshops. Dit is weer redelijk toegankelijk.

Tip 4: Bekijk wat je budget is

We weten allemaal wat we mooi vinden. Gelukkig vinden we niet allemaal hetzelfde mooi. Toch wordt schoonheid ook door een prijs bepaald. Een horloge van 1000 euro is meestal mooier dan een horloge van 100 euro.

Bij websites geldt hetzelfde. Een statische website moet met de hand gecodeerd worden. Dit kost veel uren aan coderen zonder dat er over het webdesign is nagedacht. Daarom wordt er vaak WordPress gebruikt. Het aantal uren coderen wordt dan drastisch vermindert zodat er meer tijd over is om over het webdesign na te denken.

Een bouwvakker rekent v.a. 40 euro per uur, de advocaat v.a. 200 euro per uur en de webdesigner v.a. 60 euro per uur. Tijd, budget en ontwerp staan dus in relatie met elkaar. Weinig budget, mooi ontwerp betekent dus vaak een CMS als WordPress met een gekozen thema.

Thema’s zijn de ontwerpen van je website. Zo’n los ontwerp kost per website ongeveer 80 tot 130 euro. Bij de lagere budgetten zul je foto’s, tekst, kleuren moeten aanleveren. Er zijn de de volgende budget mogelijkheden:

  • 150 euro : WordPress of Joomla – doe alles zelf: dus hosting en domeinnaam bestellen + maken van je website
  • 500 euro : WordPress of Joomla  – webdesigner kan hier een 6 pagina’s voor je maken met een professioneel thema
  • 700 euro : WordPress of Joomla – webdesigner kan ook b.v. je foto’s mooier maken, extra functionaliteit toevoegen
  • 1000 euro : WordPress – Er kan een kleine webshop opgezet worden of de SEO kan toegevoegd worden.
  • 4000 euro : Statische website of WordPress website op maat inclusief teksten
  • 15000 euro: Magento webshop

Heb je een niet al te hoog budget dan blijft WordPress met een professioneel ontwerp waarschijnlijk de beste keus. Wil je echter dat er een webdesigner naar je invulling kijkt, dan is je budget bepaling een handige stap.

Tip 5: Bedenk wat de tekst op je website wordt

De geschreven tekst op je website bepaalt niet alleen hoe je overkomt bij je klant, maar ook hoe je gepositioneerd wordt in zoekmachines zoals b.v. Google. Vaak kom ik mensen tegen die nog niet weten wat ze op de website willen zetten. Nu is dat niet erg als je een geweldig budget hebt. De webdesigner kan dan tekstschrijvers inhuren die wat standaard teksten voor je schrijft.

Teksten zijn voornamelijk belangrijk voor de zoekmachine. Klanten zullen de meeste tekst niet lezen, aangezien ze de pagina scannen naar bruikbare informatie, En ze willen dat graag zo snel mogelijk gepresenteerd hebben, De hoofdpagina wordt dus een soort doorgeefluik waar de klant zo snel mogelijk zijn informatie kan krijgen. Hier kunnen ze dan verder klikken voor meer diepgang.

Dus qua inhoud van de tekst zijn de volgende punten belangrijk:tekst op je website

  • Wat doet je bedrijf, laat dit op je hoofpagina zien
  • Zorg voor een duidelijke navigatie op de hoofdpagina en natuurlijk in de menu’s
  • Schrijf alvast de bladzijde waar de klant meer informatie over je service krijgt.
  • Schrijf een pagina over je bedrijf
  • Bedenk en schrijf alvast een contact pagina
  • Ook heb je waarschijnlijk een pagina over je voorwaarden etc nodig
  • Heb je advertenties? Bedenk dan iets over cookies.

Tekst gaat altijd hand in hand met foto’s. Samen vormen ze de content ofwel inhoud van een pagina. Aangezien de mens visueel is ingesteld, zijn deze foto’s cruciaal om een boodschap over te brengen op de bezoeker. De zoekmachine kan een plaatje echter niet lezen, hiervoor dient de overdaad aan tekst voor en eventueel de alt tag van de foto’s ( de alt tag vertelt wat de foto voorsteld, kies dus de foto’s dchit bij je onderwerp zodat de alt tag ook zoekwoorden kunnen bevatten).

Tip 6: De looks van je website

Omdat je een website wilt hebben die je klanten aanspreekt, is een kleine rondgang op het web niet onbelangrijk. Kijk eens naar de websites die je tegenkomt. Wat spreekt je aan op een bepaalde bladzijde? Elke website bestaat uit blokken en dat is handig, zo kun je precies bepalen welke blokken jij op je website wilt.

Heb je een website gevonden die je mooi vind? Een webdesigner kan je vertellen met welk design (thema) is gemaakt. Wil je dit zelf ook kunnen, volg dan deze stappen in de browser Chrome:

  • Ga met je pijltje halverwege de pagina staan
  • Klik met de rechter muis
  • Klik op ‘bekijk pagina bron’ of ‘view page source’
  • Toets de 'Ctrl+F' tegelijkertijd in (op een windows computer)
  • Dit opent een zoekveld rechtsboven in je scherm
  • type hier ‘stylesheet’ in, je krijgt nu ongeveer 1 tot 10 regels gekleurd
  • Kijk of je wp-content/themes terug kunt vinden op deze regels
  • zo ja, dan is dit een WordPress website
  • Direct achter de wp-content/themes/ staat het gebruikte thema

Voorbeeld:

rel='stylesheet' id='altitude-pro-theme-css' href='https://static.meijwebdesign.nl/wp-content/themes/altitude-pro/style.css?ver=1.0.2' type='text/css' media='all'

Hier kun je zien dat hier het thema altitude-pro is gebruikt. Als je de demo gaat bekijken dan zie je dat ik hier toch wel veel aan verandert heb.

Tip 7: Algemeen thema kiezen

In tip 6 kun je zien, hoe je een enkel thema kunt terug vinden. Nu hebben WordPress ook algemene thema’s in de aanbieding. Deze werken allemaal met een pagina bouwer. Dit betekent dat je eenmalig een thema koopt en met dit thema dan elk soort pagina kunt maken wat je zelf wilt.
Hier zijn algemene thema’s waar ik meegewerkt hebt:

  • Kallyas, je krijgt levenslange updates.
  • Enfold, update voor 1 jaar.
  • Divi, met levenslange updates. Divi is een soort what you see is what you get thema. Je kunt in de browser klikken en veranderen.

Tip 8: De kleuren op je website bepalen

Niets is zo lastig als bijpassende kleuren te vinden. Tenminste dat was vroeger zo. Tegenwoordig zijn er allemaal handige hulpmiddelen. Heb je al een kleur dan kun je er een foto van maken. Met een foto bewerkings programma kun je dan de kleur code bepalen.

Heb je een mooie kleur op een website gevonden dan kun je b.v. de extensie colorzilla in Chrome gebruiken om de kleur te vinden.

Nu je eenmaal 1 hoofdkleur hebt gevonden, dan wil je misschien bijpassende kleuren vinden. Zonder kennis van kleuren kun je een kleuren generator op het web gebruiken. Ik gebruik vaak https://coolors.co/

kies je website kleuren met een kleuren generator

Dit kleurenpallet is willekeurig maar je ziet al dat je 5 kleuren gebruikt welke je over je website gebruikt, hier een voorbeeld:

  • voor de achtergronden van je teksten kies je 2 kleuren (b.v.#FOC808 en #FFF1DO)
  • voor de tekst zelf gebruik je 1 kleur (b.v.#086788)
  • de links en buttons (CTA) 1 kleur, liefst opvallend (b.v.#16BACS)
  • menu en footer de laatse kleur (b.v.#18F2B2)
  • in de foto’s laat je de gekozen kleuren terugkomen

Algemene opmerkingen met het kiezen van kleuren:

  1. Standaard moet je opletten met de kleuren rood en groen. Het schijnt dat veel mensen deze kleuren niet kunnen onderscheiden (kleurenblindheid). Je kunt ze dus beter niet in je ontwerp gebruiken.
  2. De achtergrond met de tekst moet voldoende contrast hebben om leesbaar te kunnen blijven
  3. Fellere achtergrond en/of beter contrast zijn zaken waarmee je de lezer zijn aandacht kan trekken
  4. Voor de kleur van tekst wordt vaak donkergrijs gebruikt i.p.v. volledig zwart
  5. Schaduwen in de natuur zijn eigenlijk nooit zwart, maar een donkere vorm van de oorspronkelijke kleur
  6. Als je met de muis over een link of button gaat dan moet dit een feedback aan de lezer geven  (andere of donkere kleur of schaduw)

Tip 9: Foto’s op je website bewerken

Foto’s kun je gewoon kopen op het web, zogenaamde stockfoto’s. Hier zijn er ook veel gratis stockfoto’s te vinden. Foto’s kun je natuurlijk ook gewoon maken. Zeker als je een bedrijf heb, is het misschien leuk als je laat zien wat je maakt. M.b.v. een foto bewerkings programma kun je dan mooie foto’s maken en je kunt ze op maat snijden (dus verkleinen naar het formaat dat je ook daadwerkelijk nodig hebt).

Een van de redenen dat een website traag is, zijn namelijk de foto’s. Foto’s en achtergrond video’s hebben nu eenmaal veel MB’s als je ze maakt. Een foto moet dus verkleind worden. Je kunt hier een gratis verklein programma voor vinden op het web zoals b.v. EnterImage. Hiermee kun je dan verschillende foto’s tegelijk verkleinen.

Voor een website maken is echter een foto bewerkingsprogramma toch wel een vereiste. Hier zijn 3 programma’s

  • Gimp Dit is een open source en gratis te downloaden en te gebruiken
  • Adobe Photoshop CC. Dit is een programma voor fotograven. Je huurt dit tegenwoordig per jaar. Kost rond de 60 euro per maand. Adobe heeft ook een simpeler uitvoering genaamd als Elements 15. Deze kun je dan wel weer als CD kopen voor ongeveer 80 euro.
  • Corel Paintshop Pro. Dit is en simpele versie voor thuisgebruik. Kost rond de 80 euro.

Elke foto dit je uitzoekt moeten met elkaar matchen en het handigste is dus om iets van je hoofdkleur in je foto te laten terugkomen.

Tip 10: Teken een wireframe op een A4

Een wat? Een Wireframe is eigenlijk niet anders dan het tekenen van je pagina lay-out. Heb je 8 pagina’s in je website, dan teken je dus 8 wireframes.

In eerste instantie is een wireframe zwart / wit. Zoals je misschien herinnert: een webpagina is opgebouwd met blokken. De blokken worden daarna afzonderlijk gevuld met inhoud.

Op het A4tje teken je met een potlood:

  • De plekken van de menu’s
  • De blokken waaruit de pagina bestaat
  • In de inhoud van de blokken geef je aan:
    • de plek van de foto of icon
    • de plek en lengte van de tekst
    • wel of geen CTA (call to action) knop
    • waar komen je social buttons
    • waar komen je contactgegevens of formulier
  • De footer
    • hoeveel kolommen de footer heeft
    • de lengte van de tekst of foto (b.v. een keurwaar of betalingsmiddel)

Tip 11: Bepaal de menu struktuur

Het menu bepaalt hoe je over de website navigeert. Ook de interne links verbeteren de interne navigatie. Hoe makkelijker de bezoeker iets kan vinden via je menu, hoe groter de kans is dat er zaken worden gedaan. De zoekfunctie is ook een belangrijk tool om op maat gemaakte menu te creëren, vaak in de vorm van een pagina met links.

Thema’s bij WordPress spreken vaak van hoofdmenu en een secondair menu. Daarnaast kun je ook nog custom menu’s maken. Kansen dus te over om je bezoeker het makkelijk te maken.

Heb je slechts een paar bladzijden op je website dan is de struktuur van het menu zo bepaald. Heb je echter ook nog een webshop dan ga je misschien wel met 2 menu’s werken. Zo heb je natuurlijk ook nog je voorwaarden pagina, service pagina etc die je ergens kwijt moet.

Belangrijke pagina’s van je menu kun je ook terug laten komen in je footer. Hierdoor krijgen ze meerwaarde. De footer kan ook nog andere linkgroepen bevatten. Elke linkgroep kun je zien als een klein menu.

Er zijn misschien ook pagina’s waar je helemaal geen menu wilt laten zien. De zogenaamde verkooppagina’s. Hier belanden mensen op als ze b.v. een CTA hebben geklikt of ze komen via Adwords naar je website. Deze verkooppagina’s staan trouwens ook niet in het menu zelf.

Tip 12: Bepaal de zoekterm per pagina

Als je website hebt, dan kun je deze als visite kaartje gebruiken, als landingpagina voor Facebook, als landingspagina voor Adwords of je probeert ook nog op pagina 1 van Google te komen (mensen zoeken namelijk niet op pagina 2 van Google). Dus een website als een marketing tool ofwel SEO (search engine optimization)

Nu schrijft het gemiddeld bedrijf niet veel op zijn pagina’s. Ik raad toch aan om minstens 300-400 woorden per bladzijde te schrijven. Een zoekmachine is nu eenmaal een machine en die heeft een bepaalde hoeveelheid woorden nodig om te begrijpen waar een pagina over gaat.

Het belangrijkste van zoekwoorden is om de juiste zoekwoorden te vinden. De juiste zoekwoorden (ofwel zoektermen) zijn die termen die de meeste mensen intikken, zodra ze ervan overtuigd zijn dat ze iets willen vinden. Zoekwoorden ofwel termen bestaan dus meestal uit meerdere woorden. Een enkel woord geeft namelijk meestal niet de uitkomst waar we wat hebben in Google.

Hoe je een zoekterm zoekt:

zoekterm in google zoeken

  • type in Google en zoekterm in en kijk of u op die pagina wilt staan. (Google geeft vaak al zoekwoord suggesties als u aan het typen bent)
  • Heeft u de juiste Google SERP (search engine result page) gevonden met een zoekterm, schrijf dan deze zoekterm op.
  • Kijk naar de URL’s die uw concurrenten gebruiken en pas eventueel u zoekterm aan.
  • De aangepaste term weer proberen in Google. Zelf een spatie kan uitmaken in de rangschikking, dus dit is wel belangrijk.
  • Als uw Google adwords gebruikt, dan kun u natuurlijk deze gebruiken om in eerste instantie een zoekterm te vinden. Maar daarna moet je toch weer terug naar de zoekmachine om het te testen.
  • Eventueel Google trends gebruiken om een zoekwoord te vinden.

Bij een lange tekst kun je ook meeredere zoektermen verwerken al is dit niet altijd even gemakkelijk.

Tip 13: Zet je zoektermen op de juiste plaats

Om de zoekmachine nog meer te helpen, zet dan jouw zoektermen op de juiste plaats. De juiste plaats is over het algemeen zo hoog mogelijk en zo links mogelijk in tekst en titels.

Nu de zoektermen bekend zijn, komt de inhoud van de pagina.  Hier enkele hoofdpunten voor pagina SEO:

  • Schrijf voldoende om wat ‘body te krijgen’ (liefst minmaal 300 woorden). Dit geldt meestal niet voor de hoofdpagina omdat dit meer een verwijs pagina naar je diensten is. 300 Woorden voor een verkooppagina is redelijk haalbaar als je het met voldoende plaatjes afwisselt. ( veelal wordt dan ook een blog aangegegrepen om echt lange artikelen over een bepaald onderwerp (=zoekterm) te schrijven. Ikea moedigd zelf klanten aan om hun blog te vullen en laat daarna enkele meubels uit de winkel hier zien. Daar snijdt het mes dus echt aan beide kanten.
  • Je zoekterm moet op verschillende plaatsen staan:
    • In de titel (h1) van je pagina ( liefst zo ver mogelijk aan de linker zijde van de zin)
    • Aan het begin van de eerste alinea, zodat de klant weet waarover de pagina gaat (en Google dus ook)
    • enkele keren in de tekst eronder. Je mag ook andere bewoordingen gebruiken zodra je het een keer of 5 benoemd hebt.
    • Eventueel in een subtitel (h2).
    • In een alt tekst van een foto die je gebruikt
    • De title, de url en desciption bevatten het liefst ook de zoekterm
    •  Als een link op een andere pagina naar deze pagina verwijst, dan kun je daar ook de zoekterm in verwerken (dit wordt de ankertekst genoemd)
  • Probeer de leesbaarheid van je pagina goed te houden door korte zinnen, plaatjes en lijstjes.
  • Hou 1 doel per pagina voor ogen

Tip 14: Laat van je horen

Of ook wel marketing genoemd. Ben je aktief op bepaalde platforms zoals Facebook, Google+, LinkedIn, Twitter, WhatsApp, WeChat of wat voor social platform dan ook. Post je mooie website en laat de wereld weten dat je iets moois hebt gemaakt.

Tips voor een nieuwe website: eindconclusie

Met deze tips en stappenplan zou je een website moeten kunnen ontwerpen en misschien zelfs wel bouwen.

  • Ik heb voor degene die graag zelf een website met WordPress bouwt een cursus WordPress
  • Heb je alles voorbereid, maar lukt het niet om zelf het begin te maken dan heb ik verschillende opties
    • Huur me voor een gedeelte van je project in, dus op uurbasis
    • Kom langs en ik geef je persoonlijk uitleg in de vorm van een cursus ‘samen bouwen we jouw website’
    • Kies een website pakket, hier vind je de pakket prijzen
    • Besteed alles uit (incl. tekst, foto’s etc) en betaal 1 prijs volgens je offerte

 

 

 

Summary
14 tips voor een nieuw website ontwerp
Article Name
14 tips voor een nieuw website ontwerp
Description
Met 14 tips gaat jouw zelf ontworpen website er een stuk beter uitzien. Hier vind je ook verschillende tools om een foto te bewerken of een kleuren pallet te kiezen.
Author
Publisher Name
Meij Design & Survey
Publisher Logo

Pin It on Pinterest