14 Ontwerp tips website: zelf je WordPress website ontwerpen

Tip 1: Domein extensie: zo kies je de juiste (bijv: .nl /.com / .shop)

Als je een bedrijf begint, dan verzin je een naam voor je bedrijf. Vaak volgt de website naam je bedrijfsnaam.

Nu komt de extensie van je website naam ( dus .nl of de .com of de .shop). Google rankt niet elke extensie even goed. 

Bij het kiezen van een extensie gelden de volgende zoekmachine optimalisatie (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 extensie. 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 kopië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.
  • Onderdeel van het kiezen van een extensie, is nadenken over de meertalige website. Eigenlijk geldt hetzelfde als bij de andere punten. Wil je bijv. Engels sprekende mensen aantrekken die in Nederland wonen. Neem dan de .nl extensie.Voor meertalige websites zijn meerdere mogelijkheden. Vaak wordt er in WordPress met een plugin zoals WPML gewerkt. Ook kun je voor een multisite kiezen. Of je maakt gewoon verschillende websites. Zo heb ik voor meijwebdeisgn.nl/en een aparte WordPress installatie gebruikt.

 

Inhoudsopgave 14 ontwerp tips website

Tip 2: Hosting: zo maak je de keuze (bijv: Vimexx / mijndomein of sneller)

Hosting is niets anders dan het huren van computerruimte. Een computer die eigenlijk altijd 24/7 aanstaat. Je installeert je website dus op een server van een hosting zodat deze altijd bereikbaar is. 

Bij kiezen van hosting gelden eigenlijk verschillende punten waar je op moet letten. Je budget is hier bepalend. Hoe meer budget, hoe beter de hosting. Des te sneller je website laadt.

De snelheid van laden is belangrijk voor je klanten. Klanten zijn niet meer zo geduldig. Is je website te traag dan is er een kans dat je klanten verliest. Daarnaast is snelheid een SEO punt geworden. Ze zeggen dat Google van snelle websites houdt.

  • 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 vindt Google het logisch dat de server vlak bij je klanten staat. Ten tweede kost afstand kostbare tijd. De reactie tijd van Vimexx is bijv. 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 variëren sterk afhankelijk van wat je verzekert. Je kunt een certificaat 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 gebruiken (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.

Inhoudsopgave 14 ontwerp tips website

Tip 3: Content Management Systeem: WordPress (bijv: WordPress / Joomla / Dupral of Magento ...)

WordPress websites. Als je even rondsnuffelt op het web dan kom je waarschijnlijk tot de conclusie dat de meeste ZZP’ers een WordPress website hebben. En dat is ook zo. 

WordPress is makkelijk te leren en tegenwoordig zijn er goede thema’s waarmee je in de browser je website kunt gaan ontwerpen. Veel webdesigners zijn dan ook overgestapt van de statische website naar de WordPress website.

En als je zelf een website wilt bouwen dan is een statische website niet echt handig. Je moet daar veel voor leren. En als je content marketing wilt gaan doen, dan is een CMS (content management systeem) het handigst. WordPress, Joomla, Drupal en Magento zijn dus CMS’en. 

Hieronder staan de meest gebruikte mogelijkheden om een website op te zetten:

  • De statische website in HTML en CSS. Je hebt hier kennis van HTML, CSS en javaScript voor nodig. Voor de CSS en javaScript zijn echter weer handige tools ontwikkelt. Een van de meest bekende is Bootstrap. Veel ontwikkelaars gebruiken deze tool om statische websites te maken. Je ziet echter ook dat Bootstrap wordt gebruikt om WordPress websites te ontwikkelen. 
  • Het CMS WordPress. Veel gebruikte software. Hier kun je zelf pagina’s aan toevoegen of veranderingen in teksten maken. WordPress is geschikt voor elke type website. Geschikt voor elke ZZP’er.  Vroeger is het ontwikkelt om een blog te schrijven. Tegenwoordig zie je zelfs veel online webshops met WordPress. WordPress is momenteel het meest gebruikte tool voor de webdesigner.
  • Het CMS Joomla. Joomla kan hetzelfde als WordPress, maar over het algemeen wordt het minder gebruikt in Nederland. Dit heeft voornamelijk met het uiterlijk 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 verschillende 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.

Inhoudsopgave 14 ontwerp tips website

Tip 4: WordPress.org of WordPress.com: Waar begin je (org is flexibeler dan com.)

WordPress.com en WordPress.org zijn 2 websites waar eigenlijk dezelfde WordPress software kan worden gebruikt. Dit is natuurlijk verwarrend.

WordPress.com is de commerciële versie van de gratis versie WordPress.org. Je kunt zelfs op de .com gratis met een website beginnen. Wil je echter een eigen domeinnaam dan komt .com met de betaalde versies. Je gaat dan al gauw €25,- per maand betalen voor een uitgeklede versie. 

Ga je voor de .org WordPress versie dan mag je de software gratis gebruiken. Het is open source software.

De eigenaar van WordPress.com heeft de software WordPress ontwikkelt. En helpt nog steeds mee aan het door ontwikkelen van de software. Hij heeft het voor het grote publiek gratis gemaakt in WordPress.org.

Dus…? Precies, er is geen goed en slecht in dit verhaal. 

Voordeel van WordPress.com is dat alles voor je geregeld wordt. Ik bedoel dan de server  en de beveiliging. Nadeel is dat je erg beperkt wordt. Er zijn maar een aantal plugins en thema’s ter beschikking. 

Dit laatste is waarom de meeste ZZP’ers uiteindelijk toch voor de .org versie kiezen. Als je zelf je website opzet dan is de .org versie ook een stuk goedkoper. En je bent een stuk flexibeler.

Inhoudsopgave 14 ontwerp tips website

Tip 5: Wat kost een website?

Als ik ervan uit ga dat je WordPress gaat gebruiken. Dan betaal je in ieder geval voor de hosting partij en het domeinnaam. Daarnaast moet je soms voor een SSL certifcaat betalen (deze zorgt voor het slotje voor je domeinnaam).

Een Nederlands domeinnaam varieert tussen 4 en 15 euro (per jaar). Afhankelijk van waar je het koopt. Sommige hostingpartijen geven het zelfs gratis.

Een SSL certificaat varieert tussen de 0  en 1000 euro (per jaar) 

Een hosting kost tussen de 0,60 en 25 euro per maand. Je zou de prijzen van Vimexx en Siteground eens naast elkaar kunnen leggen.

Je kunt voor een gratis thema kiezen. Maar waarschijnlijk wil je een professioneel thema. Ik raad dat in ieder geval wel aan. Een WordPress thema bepaalt hoe je website eruit gaat zien. Prijzen variëren van eenmalig €40,- euro tot jaarlijks €80,- euro.

De meeste plugins zijn gratis. Soms wil je echter een functionaliteit op je website die niet gratis is. Bijvoorbeeld een planningssysteem. Ook hier kunnen de prijzen erg variëren. Ze liggen in de range 20 tot 80 euro per jaar. Veel websites hebben dit echter niet nodig. Een plugin voor je contact pagina is namelijk gratis.

Als je de website uit gaat besteden dan is er ook qua prijsstelling van alles mogelijk. Het hangt ervan af welk type website je wilt. Een statische website kost nou eenmaal meer tijd voor de webdesigner dan een WordPress website. En in principe berekent de webdesigner zijn ingeschatte tijd.

Wil je besparen bij de webdesigner dan zul je bij een lager budget zelf de teksten en foto’s moeten aanleveren.

Hieronder staan wat globale richtlijnen. Maar goed elk bureau heeft natuurlijk zijn eigen prijs:

  • 0 euro: ga naar WordPress.com en kies de gratis versie. Je hebt dan helaas geen passende domeinnaam
  • 150 euro: WordPress of Joomla – doe alles zelf: dus hosting en domeinnaam bestellen + maken van je website + een professioneel thema aanschaffen
  • 500 euro: WordPress of Joomla  – webdesigner kan hier een 6 pagina’s voor je maken met een professioneel thema
  • 800 euro: WordPress of Joomla – de webdesigner kan ook bijvoorbeeld je foto’s mooier maken en teksten schrijven
  • 1000 euro: WordPress – Er kan een kleine webshop opgezet worden of de SEO kan wat uitgebreider bekeken worden.
  • 4000 euro: Statische website of WordPress website op maat inclusief teksten
  • 15000 euro: Magento webshop

Inhoudsopgave: 14 ontwerp tips website

Tip 6: Tekst opbouw van je website

Niet elke bladzijde op je website is hetzelfde. Zo heb je een hoofdpagina. Een contactpagina. Een over ons pagina. Een dienstenpagina.

De teksten zijn per pagina anders opgebouwd.

De hoofdpagina is korte samenvatting van wat de lezer kan verwachten op je website. Heb je een paar diensten dan is het handig om deze op de voorpagina te zetten. Zo weet de lezer meteen wat je te bieden hebt.

Verzamel je email adressen dan kun je de weg gever op de hoofdpagina zetten. 

Bij mij komt ongeveer 50% via de hoofdpagina binnen. Aan de hand van de Google analytics zie ik wat een klant belangrijk vind om te bekijken. Ik zet dan de knop duidelijk zichtbaar op mijn hoofdpagina. Ook de te verwachtte vervolgpagina behandel je zo. Zo creëer je een duidelijk pad.

hoofdpagina

Teksten op de hoofdpagina zijn kort tot zeer kort. De klant is hier binnengekomen om door te klikken. Ze scannen de pagina zo snel mogelijk. 

Natuurlijk is dit anders anders als je weg gever centraal staat. 

diensten pagina

De pagina over jouw dienst, is eigenlijk een verkooppagina. Je moet deze dus behandelen als een verkooppagina.

Over de verkooppagina zijn verschillende theorieën, maar meestal is dit een lange pagina zonder afleiding. 

Vaak wordt het menu weggelaten. Evenals de zijbalk.

Meestal worden er reviews toegevoegd om mensen te overtuigen van jouw expertise. Een portfolio kan natuurlijk ook. Of beide.

contact pagina

De contact pagina. Deze kun je kort houden. Mensen willen hier een mail naar je sturen. Kijken waar je kantoor is. Of je telefoonnummer opzoeken. Dit moet dus duidelijk zijn.

over ons pagina

Mensen willen weten met wie ze zaken doen. Je kunt hier iets over je vertellen. Wat je kunt betekenen voor de klant en misschien nog wat reviews. Zo is alles op 1 pagina te zien wat over jou en je afgeleverde werk gaat. 

menu’s

In je hoofdmenu staan de belangrijkste pagina’s. Daarnaast kun je nog een submenu aanleggen en eventueel verschillende menu’s in de footer (onderzijde van je website).

Je kunt ook pagina’s niet opnemen in je menu. Zogenaamde “echte” verkooppagina’s. Je komt hier alleen als je in Facebook of in Google Ads op een advertentie klikt. Dit soort pagina’s zijn via een vast stramien geschreven. Het doel van deze pagina is om de betaalde klik om te zetten in een lead of zelfs klant.

Alle pagina’s in het hoofdmenu hebben als hoofddoel om je klant te laten weten, wie je bent en wat voor probleem je oplost.

algemeen over teksten: het probleem dat je oplost

Je schrijft vanuit de klant. Als je bijv. een tour fiets verkoopt dan zou je in je tekst kunnen aangeven hoe leuk het is om op de zondag in het zonnetje door het bos te rijden. Je geeft een soort verbeelding in je tekst. 

In het menu staan dus de pagina’s. Doe je aan een vorm van content marketing, dan hou je ook een blog bij. Hier staan je berichten ofwel artikelen. 

Om vanuit je klant te schrijven, moet je dus weten wat voor soort vragen hij heeft. Een groot gedeelte van die vragen kun je achterhalen met een zoekwoorden onderzoek. 

SEO verwerken in je tekst

Een zoekwoorden onderzoek heeft dus een dubbele functie. Het geeft aan waar de klant naar op zoek is. Het geeft je dus eigenlijk heel veel ideeën voor je blog. 

De tweede functie is eigenlijk waarom iedereen het over zoekwoorden onderzoek heeft. Namelijk het hoog scoren in Google met bepaalde woorden. Als je een diensten pagina hebt, dan is het bijvoorbeeld handig om deze voor die woorden te optimaliseren die klanten gebruiken in Google.

zoekwoorden onderzoek 

Voor zoekwoorden onderzoek kun je verschillende tools en tactieken gebruiken. 

Ik gebruik zelf de Google Ads zoekwoordenplanner.  daarnaast de Google suggesties die je ziet zodra je begint met typen. Je vindt deze ook onderaan de Google pagina. Verder bekijk ik de url’s van de concurrent. Kijk ik wat voor bladzijden de concurrent in zijn website heeft. Ook kun je Google Trends gebruiken. 

lengte van de tekst  

Teksten zijn belangrijk voor de zoekmachine. Een zoekmachine als Google is misschien reuze slim, maar heeft woorden nodig om de inhoud te begrijpen. Meer tekst is over het algemeen beter voor de SEO, maar kan op een algemene pagina soms een overkill voor je lezer zijn. In je artikelen kun je wel los gaan met een lange tekst. 

Klanten zullen de meeste tekst niet lezen, aangezien ze de pagina scannen naar bruikbare informatie. Je moet hierom voor goede subtitels zorgen. Subtitels die je verhaal een beetje vertellen als een samenvatting.

Inhoudsopgave: 14 ontwerp tips website

8 WordPress artikelen

WordPress website laten maken kosten
WordPress
Gilles van der Meij

WordPress website laten maken kosten

WordPress is wereldwijd het meest gebruikte tool om een website te maken. Door het gebruiksgemak is zo populair geworden. Maar hoeveel kost het nu om een WordPress website te laten maken? Dit hangt af van verschillende factoren, zoals het doel, de functionaliteit, het design, de inhoud en het onderhoud van de website. In dit artikel

Lees dit artikel »
Wordpress als CMS wereldleider
WordPress
Gilles van der Meij

CMS of HML website?

De onderstaande tabel is een samenvatting van de tabel op de pagina w3tech Deze tabel lijkt duidelijk zien dat WordPress de wereld leider in elk type websites is met 43%. None zijn websites zonder CMS. Dus als je dat vertaalt dan is WordPress met 63% marktleider in de CMS (content management systemen). En het lijkt

Lees dit artikel »
Full site editor WordPress 5.9
WordPress
Gilles van der Meij

WordPress 5.9 Full Site Editor

WordPress 5.9 is niet zo maar een kleine update. Nee, de lang aangekondigde full site editor (FSE) wordt hier geïntroduceerd. De FSE (full site editor) zie je alleen als het thema dit ook ondersteund. Op het moment van schrijven zijn dit er 45 van de 4500 gratis thema’s. Je kunt dit zien in de video.

Lees dit artikel »
Elementor elementen
WordPress
Gilles van der Meij

Wat je maakt met de gratis Elementor plugin

Op deze pagina vind je alle gratis Elementor elementen zoals die nu in Elementor zitten. Zo kun je zien wat je zoal met de gratis Elementor plugin kun doen. Als je verder wilt met de Pro versie, bekijk dan deze pagina Hiernaast zie je het normale afbeelding element. Ik heb hier een masker bij gebruikt.

Lees dit artikel »
spam
WordPress
Gilles van der Meij

emailspam WordPress website oplossen

Emailspam oplossen / voorkomen is niet zo moeilijk als je waarschijnlijk denkt. Veel spam wordt door robots verstuurd. Om de meest gangbare robot emailspam te voorkomen in elk WordPress formulier is: een honeypot plugin gebruiken de reCAPTCHA van Google aanbrengen Emails adressen niet open en bloot op je website weergeven Veel bedrijven hebben hun email

Lees dit artikel »
kolommen
WordPress
Gilles van der Meij

Kolommen maken in WordPress

Kolommen maken in Gutenberg WordPress 5.0 is makkelijk. Hieronder zie je een video hoe je dit doet. Video: Kolommen maken in WordPress met Gutenberg De kolommen in de editor heeft grote voordelen Veel mensen die niet overstappen op de nieuwe Gutenberg missen volgens mij veel voordelen. Zo hebben veel thema’s alleen maar een mooie voorpagina. 

Lees dit artikel »
related products upsells and cross sells
WordPress
Gilles van der Meij

Woocommerce gerelateerde producten versus upsells en cross sells

Woocommerce gerelateerde producten, upsells, cross sells en andere suggesties. Wat is wat. En hoe stel je het in. En een plugin idee om je gerelateerde producten op je pagina handmatig aan te passen. Gerelateerde producten bij productinstellingen, zie foto Door de kromme vertaling (d.d. jan 2019) zie je standaard bij een productinstellingen de tab met

Lees dit artikel »

Tip 7: De uitstraling van je website (kleuren / foto's / fonts etc..)

De uitstraling van je website wordt door verschillende zaken bepaalt:

  • de kleuren
  • het font
  • de foto’s 
  • de lengte van de tekst
  • de uitlijning van de foto’s, tekst en knoppen
  • de witruimte tussen de foto’s, tekst en knoppen

Als je zelf een website maakt, dan zul je vaak over de eerste 2 zaken heel veel tijd hebben besteed. Dat is goed. De andere punten zullen je website extra uitstraling geven.

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.

bekijk de achterkant van een website en haal daar informatie vandaan

Heb je een website gevonden die je mooi vind? Een webdesigner kan je vertellen met welk ontwerp (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

 

Als je bijvoorbeeld het volgende ziet:

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’

Dan betekent dit:

De website is gemaakt met het WordPress thema Altitude-pro van Studiopress

Dit was mijn vorige thema. In 2019 gebruikte ik Divi en ben nu uiteindelijk overgestapt op het thema Astra.  

Inhoudsopgave 14 ontwerp tips website

Tip 8: Handige WordPress thema's

In WordPress is de keuze voor een thema overvloedig aanwezig. De meeste van deze thema’s hebben ook een betaalde versie. Wat jij als website eigenaar wilt is dat je thema in de toekomst blijft bestaan. En updates krijgt. Updates zorgen ervoor dat de hackers buiten de deur blijven. 

HIer zijn enkele betaalde thema’s waar ik al eens mee heb gewerkt. Deze thema’s hebben al een pagina builder in het thema. Met een pagina builder kun je dan elke gewenste pagina bouwen.

Hier zijn enkele thema’s waar een pagebuilder al is ingebouwd:

  • Kallyas, je krijgt levenslange updates (je betaalt eenmalig)
  • Enfold, update voor 1 jaar (je betaalt elk jaar)
  • Divi, update voor 1 jaar of levenslang (prijs afhankelijk)
  • StudioPress, sommige thema’s hebben ook een builder (je betaalt eenmalig)
 Een voordeel van een page builder is dat je dus alles kun bouwen zoder dat je hoeft te coderen. Een nadeel is dat je website er iets trager door wordt. Met caching plugins kun je het dan weer iets versnellen. 
 

 

Pagebuilder als gratis plugin (of pro)

Wat echter een betere keuze is om een thema te kiezen zonder ingebouwde pagebuilder. Nu klinkt dat misschien gek maar toch doen miljoenen mensen dat. Ze gebruiken de plugin Elementor als pagebuilder.
 

Elementor heeft ook een betaalde versie te koop. Elementor PRO. Hierdoor krijg je meer mogelijkheden. Je kunt dan de headers / footers per pagina laten wisselen. Maar ook krijg je een assortiment aan mogelijke popups ter beschikking. En je kunt er templates mee bouwen. Hiervoor zijn dan dynamische elementen beschikbaar.

knop om plugin Elementor te downladen
Voordelen van Elementor

Als je op het plaatje klikt, dan kun je alle verschillen zien tussen de gratis en pro versie. En je kunt er de gratis versie van Elementor downloaden.

Elementor zelf heeft een gratis thema ontwikkelt: Hello. Dit thema is geschikt als je Elementor Pro gebruikt.

Welke tools ik zelf gebruik

De pagebuilder Elementor werkt perfect met het thema Astra en GeneratePress of wpOcean. Na verschillende tests in GTMetrix heb ik uiteindelijk gekozen voor het thema Astra. Deze testte het snelste. 

Ik gebruik zelf Astra Pro in combinatie met Elementor Pro. Astra Pro geeft je namelijk zoveel extra ’s dat ik nu bezig ben om sommige pagina’s met Elementor over te zetten op alleen Astra met Gutenberg. 

Gutenberg is de pagebuilder die al in WordPress is ingebakken. In combinatie met Astra geeft dit de snelste pagina. De makers van Astra hebben ook nog een plugin ontwikkelt voor Gutenberg. Namelijk “Ultimate Addons for Gutenberg

Wil je helemaal uit je dak gaan met een dynamische website, kijk dan eens naar Crocoblocks. Deze had ik aangeschaft om webshops op maat te maken. Maar met hun jetengine bouw ik nu ook allerlei listings op maat. Handig voor makelaars of een verhuurder of autoverkoper / verhuurder. Verder kan jetengine deze daarna weer in een kalender laten zien.  Perfect dus om bijvoorbeeld je afspraken neer te zetten. 

Maar goed ik draaf dus een beetje door Als beginnend ondernemer wil je snel iets in elkaar zetten voor een zo gunstig mogelijke prijs. Begin daarom met het gratis thema Astra en Gutenberg. Wil je een stapje verder, neem dan de gratis plugin van Elementor. 

En kant en klaar websites / pagina’s kun je ook downloaden bij astra. Je kunt dan selecteren of je Gutenberg of Elementor gebruikt en kun je pagina inclusief foto’s en tekst downloaden. Hierna is ehet een kwestie van de teksten vernieuwen en eventueel je eigen foto’s neer te zetten.

Inhoudsopgave 14 ontwerp tips website

Tip 9: Tools, kleuren voor je website (generator voor de 5 basis kleuren)

Tegenwoordig zijn er allemaal handige tools te vinden online. Vaak gratis. 

Gratis foto bewerkings programma GIMP

Met een foto bewerkingsprogramma kun je dan de kleurcode van een opgeslagen foto in je computer bepalen.

Gratis Chrome extensie Colorzilla

 Heb je een mooie kleur op een website gevonden dan kun je bijvoorbeeld de extensie colorzilla in Chrome gebruiken om de kleur te vinden. Dit kan je natuurlijk ook gebruiken voor de foto’s die je zelf hebt geplaatst op je website.

Makkelijke keuren generator voor je kleurenpalet

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

Dit kleurenpalet 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 (bijvoorbeeld #FOC808 en #FFF1DO)
  • voor de tekst zelf gebruik je 1 kleur (bijvoorbeeld #086788)
  • de links en buttons (CTA) 1 kleur, liefst opvallend (bijvoorbeeld #16BACS)
  • menu en footer de laatse kleur (bijvoorbeeld #18F2B2)
  • in de foto’s laat je de gekozen kleuren terugkomen

 

Algemene tips over kleuren en contrast:

  • Fellere achtergrond en/of beter contrast zijn zaken waarmee je de lezer zijn aandacht kan trekken. Hetzelfde geldt voor een groter font
  • Standaard moet je opletten met de kleuren rood en groen. Veel mensen kunnen deze kleuren niet onderscheiden (kleurenblindheid). 
  • De achtergrond met de tekst moet voldoende contrast hebben om leesbaar te kunnen blijven
  • Voor de kleur van tekst wordt vaak donkergrijs gebruikt i.p.v. volledig zwart
  • Schaduwen in de natuur zijn eigenlijk nooit zwart, maar een donkere vorm van de oorspronkelijke kleur. Dus ook de schaduwen op je website. Bijvoorbeeld achter een knop
  • Als je met de muis over een link of button gaat dan moet dit een feedback aan de lezer geven  (een donkere kleur en een kleinere schaduw zijn goede indicatoren voor je bezoeker)
  • De kleur van je belangrijkste knop moet een totaal andere kleur zijn dan je hoofdkleur. Als je het wieltje van de kleuren erbij haalt, dan kun je het beste de tegenovergestelde kleur kiezen.

 

Inhoudsopgave 14 ontwerp tips website

Tip 10: Tools foto's + gebruik foto's (de bewerking, zoals GIMP / Photoshop of Paintshop)

Er zijn verschillende fotobewerkingsprogramma’s. 

Zo is er een gratis programma genaamd GIMP. 

Er is een betaalde fotobewerkingsprogramma Affinity Photo. Deze betaal je eenmalig en is slechts een paar tientjes.

Photoshop is een programma van Adobe. Vooral bedoelt voor fotograven en mensen die geld verdienen met grafische vormgeving. 

Ik zelf gebruikte de producten van Corel maar ben nu overgestapt op de producten van Affinity. 

Je hebt geen ingewikkeld fotobewerkingsprogramma nodig omdat je het voornamelijk gebruikt om:

  • een stuk uit een bestaand foto knippen
  • de foto verkleinen zodat je website sneller wordt
  • een kleur toevoegen zodat de foto in je kleuren palet van je website past
  • met lagen en mask effecten de foto verbeterd  

 

Hoe je aan foto’s komt:

  • zelf maken, hierdoor wordt je website persoonlijker
  • kopen op het web, zogenaamde stockfoto’s
  • gratis vinden op het web. Hier zijn speciale websites voor zoals unsplash. Maar WordPress heeft ook plugins die deze foto’s voor je kan opsporen.

 

verkleinen van je foto voor sneller laden van je website

Dit verkleinen zorgt ervoor dat je website sneller laadt en minder data nodig heeft als je op de mobiel wordt gevonden. Beide helpen met het verbeteren van je SEO.

Sommige mensen vertrouwen op WordPress om de foto te verkleinen. Dit is niet verstandig. Een van de redenen dat een website traag is, zijn namelijk de foto’s.

 

gratis verkleinprogramma

Je kunt hier een gratis verkleinprogramma voor vinden op het web zoals bijvoorbeeld EnterImage. Hiermee kun je dan verschillende foto’s tegelijk verkleinen.

 

foto’s weglaten op een mobiel

 Met een thema als Divi kun je ook ervoor kiezen om bepaalde foto’s niet te laten zien op de de mobiel. Je kunt zelfs hele secties alleen voor de laptop maken en een uitgeklede versie voor de mobiel.

Video’s als achtergrond is waarschijnlijk nooit een goed idee voor de mobiel. 

 

conversie killers

Sliders en achtergrond video’s worden over het algemeen gezien als conversie killers. Gebruik ze dus niet op je hoofdpagina

Inhoudsopgave 14 ontwerp tips website

Tip 11: Schets eerst de layout van je pagina's (wireframe: zodat je visualiseert wat belangrijk is)

Deze schets noemen ze een wireframe. 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 nog 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 (bijv. een keurwaar of betalingsmiddel)

 

Nu ik met het WordPress thema Divi werk, vergeet ik schetsen vaak en maak ik altijd snel een pagina layout met het thema zelf.

Inhoudsopgave 14 ontwerp tips website

Tip 12: Het menu, de structuur van je website (het belangrijkste eerst: dit geld ook voor je menu)

Voor de meeste websites geldt dat een simpel menu aan de bovenzijde van de website voldoende is. 

Hoewel het er leuk uitziet om iets ingewikkelds te creëren, is dit voor je bezoeker niet erg fijn. Hoe simpeler hoe beter is het motto voor het menu.

Meestal volstaat eigenlijk maximaal 5 items in het menu. Liefst zonder uit te klappen. 

Het menu in WordPress is makkelijk te maken en daardoor wordt er nogal eens uitgepakt met heel veel submenu’s. Als je dit perse wilt, denk dan eens aan een megamenu. Dit is over het algemeen duidelijker dan uitklappen per item.  

SEO van je menu

Je menu staat hoog op de bladzijde. Daarnaast komt het terug op elke pagina. Je zet hier dus de belangrijkste pagina’s. 

Elke pagina die in het menu staat krijgt dus automatisch veel interne links. Daardoor komt zo’n pagina makkelijk hoger in Google. 

hoofd menu en secundair menu

Thema’s bij WordPress spreken vaak van hoofdmenu en een secondair menu. 

Waar een menu staat op de pagina wordt door je thema bepaalt. Meestal staat het secundaire menu echter boven je hoofd menu. Veelal gebruikt voor winkels voor items als inloggen, winkelwagen en account.

custom menu

Daarnaast kun je ook nog custom menu’s maken. Custom menu’s kun je gebruiken in widget gebieden van WordPress.

Deze widget gebieden staan vaak in je footer gedeelte van je website of in de zijbalk van je website. 

Zo heb je natuurlijk ook nog je voorwaarden pagina, service pagina etc die je ergens kwijt moet. Vaak in je footer. Je kunt dat makkelijk met een custom menu doen.

menu’s in de footer

Belangrijke pagina’s van je menu kun je ook terug laten komen in je footer. Ook de pagina’s die een link in de footer hebben, krijgen veel interne waarde toegespeeld. Maar omdat deze onderaan de pagina staat, is het wel iets minder dan de pagina’s die in het hoofdmenu staan.

verkooppagina’s zonder menu (en footer)

Als je advertentie hebt in bijvoorbeeld Google Ads dan wil je dat de mensen die klikken op een speciale verkooppagina terecht komen. 

Op de verkooppagina wil je geen afleiding en geen links die naar de rest van je website gaat. Je laat dan ook het menu en de footer niet op deze verkooppagina zien. 

Inhoudsopgave 14 ontwerp tips website

Laatste 3 SEO artikelen

Google rankbrain door AI gemaakt
SEO
Gilles van der Meij

Hoe SEO door AI wordt beïnvloed

AI heeft een aanzienlijke impact gehad op de manier waarop zoekmachineoptimalisatie (SEO) werkt. Volgens een artikel van Forbes kan AI de toekomst van SEO revolutioneren door de manier waarop zoekmachines werken en hoe bedrijven hun online aanwezigheid optimaliseren te transformeren. Hier zijn enkele manieren waarop AI SEO heeft veranderd: Hoe optimaliseer je een webpagina voor Google Rankbrain Nu

Lees dit artikel »
pagina kwaliteit PQ van je webpagina
SEO
Gilles van der Meij

Pagina kwaliteit (PQ) in Google

In 2021 heeft Google een SEO update uitgerold waarbij de pagina kwaliteit (PQ = page quality) van belang is. Bij een te lage kwaliteit van een pagina zal Google de pagina wel zien, maar niet opnemen in zijn zoekmachine index. Het niet opnemen in de index van Google betekent eigenlijk dat je pagina niet in

Lees dit artikel »
mijn positie in Google behouden met nieuw website ontwerp
SEO
Gilles van der Meij

Positie in Google behouden met een nieuw ontworpen website (re-design)

Bij een nieuwe website je positie in Google behouden is belangrijk om de toevoer van nieuwe klanten te blijven garanderen. Om niet uit Google’s ranking te vallen., moet je de oude website pagina’s stuk voor stuk doorlinken met een 301. Zo voorkom je de 404’s, het verliezen van je backlinks en het verlies van je interne link waarde. En daarmee voorkom je een grote daling in Google.

Lees dit artikel »

Tip 13: Zoektermen, spreek de taal van je klant (deze bepaal je met bijv. de zoekwoordenplanner van Google)

Op je website wil je niet alleen klanten aantrekken. Je wilt ze ook nog overtuigen. 

Het aantrekken van klanten naar je website kan op verschillende manieren:  

  • je geeft iedereen een visite kaartje en hoopt dat ze uiteindelijk jouw gaan opzoeken op het web
  • via een advertentie op Facebook
  • via een advertentie op Google Ads
  • via content marketing en SEO

Voor zowel Google Ads en voor je SEO moet je weten wat je zoekwoorden zijn. 

Zo betaal je in Google Ads afhankelijk van je zoekwoord, je positie en de kwaliteitsscore van je landingspagina.

Google Ads geeft dan ook een gratis tool. De zoekwoordenplanner. Om dit tool te mogen gebruiken moet je een campagne hebben lopen in Google Ads. 

Ik raad je aan om een campagne te maken. Al is het maar voor 1 [zoekterm]. De zoekterm zet je tussen haken zodat je advertentie alleen eventueel wordt getoond voor dit woord.  Als bedrag kun je bijvoorbeeld 1 cent invullen. 

Dit kost natuurlijk wat tijd en uitzoekwerk.

De zoekwoordenplanner is de basis van al die betaalde versies die je overal op het web vindt. Er zijn ook gratis tools te vinden zoals ubersuggest. 

Heb je een mooie lijst zoektermen gevonden. Ga die dan verdelen over je pagina’s. Zo kun je per pagina synoniemen gebruiken van zoekwoorden. Alle zoekwoorden die je overhebt, bewaar je voor je blog.

Op je diensten pagina’s heb je vaak wat korte teksten. Maar bij een blog kun je lekker tekeer gaan. Super lange teksten, daar wordt Google blij van.

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

Inhoudsopgave 14 ontwerp tips website

Tip 14: Zoektermen, zet ze op de juiste plaats (Onpage SEO, maar ook interne links zijn belangrijk)

Je bent bezig met een bladzijde van je website. Je hebt de juiste zoekwoord gevonden en gaat deze op de bladzijde gebruiken.

Om de lezer en Google te laten zien waar je pagina over gaat, zet je de zoekterm op de juiste plaats in je pagina. 

De juiste plaats is over het algemeen zo hoog mogelijk en zo links mogelijk in de tekst en de pagina titels. Ze noemen dit de pagina SEO. (on-page SEO). De rest van de SEO bestaat uit links, zowel extern als intern. 

Hier enkele hoofdpunten voor on-page SEO:

  • Schrijf voldoende om wat ‘body te krijgen (liefst minimaal 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 aangegrepen om echt lange artikelen over een bepaald onderwerp (=zoekterm) te schrijven. Ikea moedigt 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 = heading 1) 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 = heading 2).
    • 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

 

Lijkt je dit lastig? WordPress heeft SEO plugins. Yoast is een veel gebruikte. Rank match is trouwens degen die ik op dit moment gebruik. In principe maakt het echter niet uit welk je gebruikt,.

Inhoudsopgave 14 ontwerp tips website

Extra Tip: Marketing (promoot je product en je website)

Naamsbekendheid opbouwen is niet zo 1,2,3 gebeurd. Als je jouw bedrijf wilt laten draaien moet je wel tijd besteden aan je marketing. Dat betekent voornamelijk dat je jezelf moet laten zien. 

Je kunt dit offline doen, door bijvoorbeeld te folderen, een reclame bord te plaatsen, midden in de stad een winkel openen of door cold calling. Het laatste wordt meer en meer aan banden gelegd.

Online heb je nu je website. En dus wil je bezoekers hier naartoe trekken. Je eerste actie zou kunnen zijn om deze op je sociale platform te delen. Ik denk dat ieder bedrijf wel een bedrijfspagina op Facebook heeft. Zitten jouw klanten meer op LinkedIn, Instagram of YouTube. Promoot daar dan ook je bedrijf. 

Kies een paar platforms uit. Want elk platform moet je bijhouden. En dat kost tijd.

Nu je vrienden en kennissen weten dat je een bedrijf hebt, is het tijd om andere mensen naar je website te trekken. 

Dit kan op verschillende manieren:

  • content plaatsen op je sociale media platforms
  • content plaatsen op je blog van je website (hier komt SEO om de hoek kijken)
  • adverteren op sociale media
  • adverteren op Google Ads

 

Zodra je gaat adverteren heb je wel goede verkoop pagina’s nodig op je website. Maak niet dezelfde fout als ik. Leidt ze niet naar je hoofdpagina en leidt ze ook niet naar een bestaande pagina in je hoofdmenu. 

Begrijp me niet verkeerd. Je krijgt daar wel verkoop uit, maar beter is om deze pagina’s speciaal te ontwerpen voor je advertentie. 

 

Inhoudsopgave 14 ontwerp tips website

Laatste marketing artikel

cookies
Marketing
Gilles van der Meij

Cookies, hoe en wat

Vandaag las ik dat nog steeds bijna alle politieke partijen ongewenste cookies op hun websites gebruiken. Vreemd omdat ze zelf de AVG wetgeving hebben geschreven. De wetgeving maakt verschil in gebruik van de cookies met de verschillende doelen. De wetgeving zegt grofweg dat cookies die nodig zijn om je website te laten werken mogen. Wat

Lees dit artikel »

Ontwerp tips website : blog ( je begrijpt sommige onderdelen beter )

WordPress website laten maken kosten
WordPress
Gilles van der Meij

WordPress website laten maken kosten

WordPress is wereldwijd het meest gebruikte tool om een website te maken. Door het gebruiksgemak is zo populair geworden. Maar hoeveel kost het nu om een WordPress website te laten maken? Dit hangt af van verschillende factoren, zoals het doel, de functionaliteit, het design, de inhoud en het onderhoud van de website. In dit artikel

Lees verder »
cookies
Marketing
Gilles van der Meij

Cookies, hoe en wat

Vandaag las ik dat nog steeds bijna alle politieke partijen ongewenste cookies op hun websites gebruiken. Vreemd omdat ze zelf de AVG wetgeving hebben geschreven. De wetgeving maakt verschil in gebruik van de cookies met de verschillende doelen. De wetgeving zegt grofweg dat cookies die nodig zijn om je website te laten werken mogen. Wat

Lees verder »
Wordpress als CMS wereldleider
WordPress
Gilles van der Meij

CMS of HML website?

De onderstaande tabel is een samenvatting van de tabel op de pagina w3tech Deze tabel lijkt duidelijk zien dat WordPress de wereld leider in elk type websites is met 43%. None zijn websites zonder CMS. Dus als je dat vertaalt dan is WordPress met 63% marktleider in de CMS (content management systemen). En het lijkt

Lees verder »

Boeken over webdesign:

principes van subliem webdesign

Principes van subliem webdesign

Dit praktische boek beschrijft het principe van webdesign in 5 hoofdstukken: LAY-out en compositie Kleur Textuur Typografie Beeldmateriaal Ik vond dit boek een goede aanvulling aan de opleiding “HBO webdesign” van de LOI. In het boek wordt echt op de....
marketing boek: Influence by CIaldini

Influence: Science and Practice

Influence: Science and Practice is an examination of the psychology of compliance (i.e. uncovering which factors cause a person to say “yes” to another’s request). Written in a narrative style combined with scholarly research, Cialdini combines evidence from experimental work....
neuro web design, what makes them click

Neuro Web Design

While you’re reading Neuro Web Design, you’ll probably find yourself thinking ‘I already knew that…’ a lot. But when you’re finished, you’ll discover that your ability to create effective web sites has mysteriously improved. A brilliant idea for a book,....
100 things every designer needs to know about people

100 Things

We design to elicit responses from people. We want them to buy something, read more, or take action of some kind. Designing without understanding what makes people act the way they do is like exploring a new city without a....
website boek: don't make me think by Steve Krug

Don’t Make Me Think

Since Don’t Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krug’s guide to help them understand the principles of intuitive navigation and information design. Witty, common....
Scroll naar boven

WP Cursus online

Bekijk 4 gratis video’s van de online WordPress cursus.

In de cursus zet je een WordPress website op met gratis tools.