14 webdesign trucs die je moet kennen
Deze 14 webdesign trucs helpen je om tijd te besparen, zodat je meer kunt doen in de tijd die je op een dag hebt.
Webdesign is lonend, maar tijdrovend. Dat is geen probleem wanneer je voor het eerst begint met ontwerpen en voor die ene klant een perfecte website wilt bouwen. Wanneer je meerdere tegelijkertijd aan het bouwen bent, helpt alles wat je kunt doen om tijd te besparen of de professionaliteit van een website te vergroten.
Deze 14 webdesign trucs helpen je om tijd te besparen, zodat je meer kunt doen in de tijd die je op een dag hebt.
Inhoud
Zelfs de meest kale WordPress website duurt al snel 4 uur om te starten. Hoe mooier het design, hoe uitgebreider de website en hoe meer functies je toevoegt, des te langer duurt het natuurlijk om de website te ontwikkelen. Gelukkig kun je met onze webdesign trucs tijd besparen en een geweldige website maken die is gebouwd om indruk te maken. Je kan natuurlijk ook je website door SEOlab laten ontwikkelen.
1. Voeg globale wijzigingen toe
Wat als je aan het coderen bent en beseft dat het lettertype dat je overal hebt gebruikt niet werkt? Een van onze trucs is om globale veranderingen in CSS toe te passen met behulp van een asterisk-selector. Om alle lettertypen op een pagina van de ene familie naar de andere te wijzigen, kun je bijvoorbeeld * {font-family: sans-serif, helvetica;} gebruiken om alle lettertypen gemakkelijk te wijzigen. Pas echter op dat je deze wijzigingen niet aan jouw live code toevoegt.
2. Test de mobiele responsiviteit
Steeds meer mensen hebben toegang tot internet via hun mobiele apparaten. Het is tegenwoordig een must om ervoor te zorgen dat jouw website mobielvriendelijk is. Alleen het kiezen van een basisthema voor WordPress zorgt er niet altijd voor dat jouw website er goed uitziet op mobiele apparaten. Gelukkig kun je de mobiele responsiviteit snel controleren met tools zoals de mobielvriendelijke test van Google.
3. Identificeer lettertypen
Heb je een webdesign gezien die je mooi vindt, maar weet je niet precies welk lettertype ze gebruiken? Natuurlijk kun je de broncode ophalen en hier in het lettertype zoeken. Dit kan alleen erg tijdrovend zijn. Als je tijd wilt besparen, kun je de tool What Font gebruiken om snel te zien welke lettertypen er op de pagina staan. Als je deze Chrome-extensie hebt geïnstalleerd, kun je jouw muis op het lettertype op de pagina plaatsen, dan wordt de naam van het lettertype weergegeven, evenals alle services die worden gebruikt om dat lettertype te leveren.
4. Voeg Hover-effecten toe
Als je wilt dat jouw website interactiever en gebruiksvriendelijker is, moet je duidelijk maken wanneer een gebruiker een actie kan ondernemen. Dat kan inhouden dat de weergave van tekst wordt gewijzigd wanneer een websitebezoeker eroverheen beweegt. Je kan dit effect eenvoudig toevoegen met eenvoudige codering, zoals dit:
.entry h2{font-size:24px;color:#00000;font-weight:600;} .entry h2:hover{color:#FF0000;}
Voer de kleuren en wijzigingen in zoals je wilt dat deze verschijnen.
5. Optimaliseer afbeeldingen
Geoptimaliseerde afbeeldingen worden sneller geladen voor websitebezoekers, waardoor je bouncepercentages en je laadsnelheid worden verbeterd. Een snelle manier om afbeeldingen in WordPress te optimaliseren, is door de ShortPixel Image Optimizer voor afbeeldingscompressie aan jouw website toe te voegen. Je kan de afbeelding vervolgens eenvoudig met een klik op de knop comprimeren, zodat de pagina snel en soepel wordt geladen voor uw gebruikers.
6. Blijf bij drie kleuren
Als je wilt voorkomen dat jouw website te druk wordt, gebruik dan niet meer dan drie kleuren in jouw huisstijl. Veel websites van grote bedrijven gebruiken twee kleuren en een wit-zwart-schema. Je kan op deze trend inspelen om een eenvoudig, maar professioneel ogende huisstijl te creëren.
7. Controleer de Alt-tags
Een alt-tag, soms ook wel alt-tekst genoemd, is de tag die je gebruikt om een afbeelding te omschrijven voor zoekmachines. Als er alt-tags ontbreken heeft dit invloed op verschillende onderdelen: van de positie in zoekmachines tot het vermogen voor mensen met een visuele beperking om de elementen op jouw pagina te begrijpen. Het kan gebeuren dat per ongeluk een alt-tag bent vergeten in te vullen. Gebruik Screaming Frog om jouw website te scannen en ontbrekende alt-tags te vinden.
8. Verbeter de website snelheid
De snelheid van jouw website is van invloed op hoe goed de eindgebruiker deze ontvangt. Als het niet snel laadt, loop je het risico bezoekers te verliezen, doordat zij gefrustreerd raken. Met Gtmetrix kun je controleren hoe snel jouw website wordt geladen en krijg je suggesties hoe je deze kunt versnellen. Lees ook eens ons blog "hoe je je WordPress website kan versnellen".
9. Wijzig automatisch het formaat van afbeeldingen
Afbeeldingen in een afbeeldingseditor plakken, uitzoeken welke afmetingen het beste werken en de afbeeldingen opnieuw in jouw ontwerp invoegen. Dit kan je uren werk kosten. We hebben een manier voor je om dit proces aanzienlijk te versnellen. Gebruik wat basiscodering voor afbeeldingen die in een bepaalde ruimte moeten passen, maar waarvan je de grootte proportioneel kunt wijzigen. Hiervoor gebruik je deze code:
img {max-width:100%;height: auto; }
De afbeelding past dan in de ruimte en past zichzelf automatisch aan, waardoor dit je veel kostbare tijd bespaart.
10. Checklist voor webdevelopers
Als webdeveloper ben je waarschijnlijk op de hoogte van enkele best practices. Het is echter niet altijd gemakkelijk om elk element te controleren dat een negatieve invloed kan hebben op jouw website. Hiervoor kan je de Chrome’s Web Developer Checklist gebruiken. Het laat je weten of je praktische tips voor webdesign misloopt.
11. Selecteer snel Tools in Photoshop
Als je Photoshop hebt gebruikt voor het maken van ontwerpen, dan weet je dat het veel tijd kost om van de ene tool naar de andere te gaan. Het vinden van een snelkoppeling om tussen tools te wisselen, versnelt jouw proces en maakt je productiever als webdesigner. Als je bijvoorbeeld merkt dat je vaak overschakelt naar het handgereedschap, druk je gewoon op de spatiebalk op jouw toetsenbord om automatisch terug te keren naar dat gereedschap.
12. Voeg drop-caps toe
Als je een website in tijdschriftstijl maakt, geeft het toevoegen van initialen aan het begin van artikelen de site het uiterlijk van een gedrukte publicatie. Je kunt deze functie toevoegen met een plug-in, maar je kunt ook deze gebruiken bij het coderen van de handleiding:
p:first-letter{display:block;float:left;margin:4px;color:#FF0000;font-size:200%;}
Je kunt de kleur van de hoofdletter aanpassen onder 'kleur', de marge rond de letter aanpassen onder 'marge' en de grootte van het initiaal aanpassen onder 'lettergrootte'.
13. Oefen met sneltoetsen
Sommige sneltoetsen zijn universeel voor Windows en Mac. Leer de sneltoetsen voor taken die je vaak gebruikt uit je hoofd, zodat je hier tijd mee kan besparen. Als je bijvoorbeeld vaak alle tekst en afbeeldingen moet selecteren, gebruik je Ctrl + A om alles in één keer te selecteren. De homeknop op je toetsenbord brengt je naar het begin van een regel en de eindknop springt de cursor naar het einde van een regel. Selecteer de startknop of de eindknop terwijl je Ctrl ingedrukt houdt, en je gaat direct naar het begin of einde van het document.
14. Bekijk Sizing
Neem de tijd om jouw website in verschillende schermformaten van de browser te bekijken. Met de Chrome-extensie Resizer maak je deze taak sneller en eenvoudiger. Kies het schermformaat waarin je een voorbeeld van de website wilt bekijken. Test jouw lay-outs voor al jouw gebruikers en pas deze indien nodig aan.
Ontwikkel je eigen hacks
Ervaren webdesigners ontwikkelen snelkoppelingen waarmee ze sneller kunnen werken. Verborgen hacks, plus een beetje creativiteit en ervaring, stellen webdesigners in staat unieke websites te maken die zijn afgestemd op de wensen en behoeften van elke klant. Deze 14 webdesign trucs zijn goed om mee te beginnen, maar je zult in de loop van de tijd ook persoonlijke hacks willen ontwikkelen.
