Logo voor WordPress website webdesign maken

Het logo en je huisstijl zijn belangrijk. Het is bepaalt eerste indruk van waar je website over gaat, wie je bent en waar je voor staat. Enkele tips waar moet je op letten bij je logo, huisstijl en look-and-feel van je WordPress website.

Vaak wordt het logo zonder aanpassingen boven een website geplaatst. Maar een logo dat offline goed werkt, komt op een website niet altijd helder over. In deze handleiding leg ik uit waar je bij websites rekening mee moet houden en hoe je een bestaand logo kunt optimaliseren.

Tips logo voor WordPress cursisten

Zorg dat je een ’transparant’ logo hebt. Dus liever niet met een witte achtergrond. Een goed uitgangspunt is een logo van 360 pixels breed. Meer mag ook maar meer dan 600 pixels breed is zinloos en maakt je website langzamer. Als je dit hebt voor de WordPress cursus of Bootcamp is dit prima.
Om een indruk te geven, is dit een voorbeeld van een logo op 360 pixels breed:

Uitgebreide logoset maken voor WordPress website

Wil je het perfect doen, of ben je gevorderd, dan maak je 4 versies voor je logo, namelijk voor een versie voor desktop en tablet en daarnaast een versie voor mobiel, smartphone. Voor beide versie is het handig om een lichte en donkere versie te hebben voor een lichte/witte achtergrond of een donkere achtergrond of foto.
Een normaal zwart of donker logo wordt onzichtbaar op een donkere foto of achtergrond. Dan kun je beter een witte (diapositieve) versie gebruiken van je logo.
Tijdens het designgedeelte van de WordPress cursussen ga ik hier nog dieper op in. Enkele voorbeelden van witte logo’s op een foto vind je op deze pagina met voorbeelden van webdesign:
Voorbeelden gebruik logo op websites

4 versies voor je WordPress webdesign

Welke versies kun je het beste maken voor je WordPress website?

• 1
  Logo voor voor Desktop/tablets bovenin je pagina op een witte/lichte achtergrond (meestal 360 pixels breed)
• 2
  Logo voor voor Desktop/tablets bovenin je pagina op een donkere achtergrond of foto (meestal 360 pixels breed)
• 3
  Logo voor voor Mobiel/smartphone bovenin je pagina op een witte/lichte achtergrond (meestal 180 pixels breed)
• 4
  Logo voor voorMobiel/smartphone bovenin je pagina op een donkere achtergrond of foto (meestal 180 pixels breed)

Tijdens de cursus vertel ik je waar je deze eenmalig in WordPress kan zetten.

Logo normaalLogo op donkere foto's

Logo voor Desktop/tablets

360 pixels breed

Logo voor mobiel/smartphone

180 pixels breed

Wit logo voor Desktop/tablets met donkere achtergrond (foto)

360 pixels breed – Wit

Wit logo voor mobiel/smartphone met donkere achtergrond (foto)

180 pixels breed – Wit

Logo, huistijl en beeldelementen

Lange tijd was het logo de kern van de huisstijl van waaruit de overige elementen (kleuren, lettertypes, fotografie, ikonen en taalgebruik) werden afgeleid. Stijlelementen van de huisstijl worden nu dynamischer toegepast, zolang ze maar de basiswaarden van het merk hebben. Het logo is niet per definitie de basis van de identiteit. Kleur en de andere beeldelementen zorgen veel meer voor de  herkenning van het merk.

Logo en beeldscherm

Een beeldscherm stelt andere eisen aan een logo dan drukwerk. In drukwerk is staat het formaat van het logo vast. Meestal wordt een EPS-bestand gebruikt. Hierdoor kun je ook de leesbaarheid en kwaliteit (scherpte) van je logo garanderen. In een online omgeving werkt dit anders. De website schaalt van groot naar klein en de elementen (zoals het logo) verkleinen mee. Zeker op een mobiele telefoon en op tablets is een logo vaak niet groter dan 180 pixels breed bij 50 pixels hoog. Het is dus belangrijk dat je logo niet te klein is opgezet en goed leesbaar blijft op klein formaat.

Bestandsformaat en grootte van logo voor WordPress

Hoe groot moet je logo zijn als je met WordPress aan de slag gaat? Dit is een mede afhankelijk van de vorm van je logo. Een lang liggend logo mag wat breder zijn dan en stand of vierkant logo. Voor de breedte van het logo ga ik meestal uit van een breedte van minimaal 140 pixels en maximaal 300 pixels.
Welk betsandsformaat heb je nodig? JPG kan, maar levert en probleem op als je een transparant logo hebt. In dit geval kun je beter een PNG-bestand gebruiken.

Beeldmerk en huisstijl

Naast het basislogo is het handig als je logo een herkenbaar element of symbool heeft dat ook zelfstandig ingezet kan worden. Ik leerde op de academie dat dit het ‘beeldmerk’ was. Voor drukwerk was dit wenselijk, voor digitale toepassingen is dit noodzakelijk. Bijvoorbeeld voor een favicon (zie hieronder) of app-icoon. Als je nog geen beeldmerk hebt, bekijk dan op welke manier je een afgeleide van je logo kan maken. Dit kun je doen door bijvoorbeeld een karakteristiek fragment uit logo te kiezen of een huisstijlkleur met de eerste letter van je merk te combineren.

Tips voor het logo van je huisstijl

Een nieuw ontwerp van je logo voor je website is meestal niet nodig. Door onderstaande tips te gebruiken, kun je je bestaande logo optimaliseren voor je website.

Gebruik geen dunne iele lijnen voor je logo

Een logo waarin dunne lijnen zitten, kan problemen geven op een scherm. Vooral wanneer de lijnen schuin of rond zijn. En helemaal als er een kleurverloop in zit. Je beeldscherm is opgebouwd uit pixels. Als je iets wilt weergeven op een scherm, dan is dat dus altijd minimaal één pixel groot. Als je een dunne, schuine of ronde zwarte lijn over en paar pixels moet verdelen worden de pixels uiteindelijk niet zwart maar een mix van licht- en donkergrijs. Niet scherp dus. Bij drukwerk bestond dit probleem niet. Zorg dus voor een krachtig of robuust logo.

Gebruik stevige typografie en tekst voor je logo

Voor de typografie (tekst en letters) van je logo geldt hetzelfde als voor het gebruik van lijnen. Zorg ervoor dat deze niet te dun is want dit kan dan lastig worden weergegeven. Zorg ook dat de tekst in je logo niet te klein is, want je logo wordt  op telefoons en tablets vaak klein weergegeven. Mooie robuuste fonts en lettertypes kun je vinden bij het volgende artikel:
Meer over typografie, lettertypes en WordPress

Simpel kleurgebruik en zorg voor voldoende contrast

Logo’s en beeldtaal worden steeds simpeler. Als je oude en nieuwe logo’s naast elkaar zet, zie je hoe kleuren in de loop van de jaren vereenvoudigd zijn. Zorg ook voor voldoend contrast zodat bijvoorbeeld lichte tekst goed zichtbaar is op een donkere achtergrond of andersom. Ik maak voor elke website een kleurenpaletje aan. Dit zorgt ervoor dat je altijd dezelfde kleuren gebruikt. Je kan deze handleidingen bekijken hoe de dit kunt aanpakken:

Logo en gebruik voor gevorderden

Favicon in webbrowsers

Een favicon is het kleine vierkante plaatje dat in je browser naast je url wordt weergegeven wanneer je een webadres intypt. Een favicon is meestal maar 16 bij 16 pixels groot. Een ingewikkeld groot logo verschalen tot dit formaat is heel lastig. Daarom is het handig als een logo ook een apart symbool is, dat los van het logo kan functioneren als herkenbaar beeldmerk.
Voorbeelden van en favicon:

• Amazon gebruikt een A met een pijltje eronder
• WordPress gebruikt het ronde logo
• CursusWP gebruikt een C met een WP erin

Retinaschermen: Scherpe weergave en hogere resolutie

Retinaschermen zijn beeldschermen die een meer dan 2 keer zo hoge resolutie hebben dan gewone beeldschermen. Retina schermen gebruiken 220.5 pixels per inch in plaats van de standaard 72pixels per inch. Duurdere apparaten als iPhones en iPads hebben meestal een retinascherm. Voor responsive websites is het belangrijk dat een logo ook op dubbel pixelformaat beschikbaar is. Als dit niet het geval is, dan ziet iemand met een retinascherm het logo namelijk onscherp en blurry. Wat goed werkt is een svg-logo, zie hieronder. Bij de betere WordPress thema’s kun je een apart logo aangeven voor retina-schermen.

Maak een svg-bestand van je logo

Een goede manier om er voor te zorgen dat je logo altijd scherp wordt weergegeven. Logo’s  zijn meestal .png-afbeeldingen, opgebouwd in pixels. Een svg-bestand is een ‘scalable vector graphic’. Dit is een bestand dat is opgebouwd uit punten in plaats van pixels en is oneindig schaalbaar. Het behoud zijn kwaliteit, ook als deze wordt verkleind, vergroot of ingezoomed. Ideaal dus voor logo’s of pictogrammen op responsive websites! svg-bestanden worden door alle moderne browsers ondersteund. Voor IE 8 of lager kan een plugin worden gebruikt.

Update: svg-bestanden en veiligheid

Nadeel dat er wat niet overkomelijke veiligheidsissues zijn met SVG-bestanden. Lees dit artikel
Onveiligheid SVG bestanden logo

Cursussen over logo, huisstijl en webdesign

Meer over je logo en huisstijlen voor WordPress websites leer je bij één van onze designtrainingen, speciaal voor ontwerpers en designers:

• WordPress Bootcamp all-in one spoedcursus
• WordPress Designcursus ontwerp en vormgevingstraining
• WordPress Pop-up Bootcamp spoedcursus op maat
• Online WordPress cursus volgen op afstand vanuit huis