top 10 tips

Op deze pagina vind je de Top 10 Tips voor website ontwerp. Het maken van een ontwerp voor een website is namelijk op veel punten anders dan ontwerpen voor drukwerk. Sommige dingen zijn zo anders dat je daar echt rekening mee moet houden in je ontwerp.

Check onze Top 10 Tips voor website ontwerp

Voor een snel overzicht hebben we naast de pagina’s die inzoomen op een bepaald onderwerp ook een Top 10 Tips voor website ontwerp gemaakt. In deze ‘Top 10 Tips voor het maken voor een ontwerp voor een website’ leggen we in het kort uit waar jij als grafisch ontwerper aan moet denken om een perfecte website te kunnen maken.

Wist je bijvoorbeeld dat om je website responsive te maken de website op 6 verschillende manieren wordt getoond? Van mobiele telefoon tot 30inch monitor, elke schermbreedte kan er voor zorgen dat de website anders getoond wordt.

En wist je dat je ook vector bestanden, .svg genaamd, kan gebruiken op een website? Of dat je het best Google Fonts kan gebruiken in je ontwerp voor de website? En dat je Google Fonts ook gewoon kan downloaden en gebruiken op je computer?

Vliegende start? Download onze Bootstrap templates!

Om een website responsive te maken gebruiken veel websitebouwers Bootstrap of vergelijkende software. Bijna al deze responsive software delen een webpagina op in 12 kolommen. Om nu meteen goed te beginnen met je ontwerp kan je hieronder (en in de menu balk) de Bootstrap Templates downloaden. Deze templates kan je downloaden in InDesign, Photoshop of Illustrator en vormen een prima basis voor je ontwerp.

Kom je er niet uit? Bel of mail gerust!

Moet je razendsnel aan de slag en zie je door de bomen het bos niet meer? Schroom dan niet en bel ons (tijdens kantooruren) op 010 – 3400 355 of 06 – 398 56 209. Mailen kan ook naar quin@brandnewfresh.com en dat kan 24 uur per dag.

tip 01

Gebruik onze Bootstrap Templates als basis

Bootstrap is eigenlijk onzichtbaar op je website. Maar achter de schermen regelt Bootstrap precies hoe je website er uit gaat zien op alle displays, van mobiel tot desktop.
Als je ons Bootstrap template met 12 kolommen gebruikt als basis voor je ontwerp, ziet de website er straks precies zo uit als jij hebt ontworpen. Deze templates templates download je makkelijk van onze website.

tip 02

Ontwerp mobile first (niet alleen de desktop versie)

Ongetwijfeld sta je te trappelen om te beginnen met een prachtige ontwerp voor je nieuwe website. Voordat je meteen aan volledige desktop schermen gaat denken, besef je dan dat momenteel meer dan 54% van de websitebezoekers deze bekijkt op een mobiele telefoon.
Met alleen een ontwerp voor de desktop versie van de website ben je dus pas op de helft. Bedenk in elk geval hoe de header en footer er uit gaan zien als je de website bekijkt op een mobiele telefoon..

tip 03

Bekijk je ontwerp op een monitor lage resolutie

Een veel gemaakt fout is dat ontwerpers een website ontwerpen op een geweldig snelle computer met een prachtige monitor, terwijl websites het vaakst worden bekeken op een telefoon (zie tip 2), laptop of simpele PC.
Eind 2021 gebruikte ongeveer 22% van de websitebezoekers op een computer een display van 1366 x 768px (dat is meestal een laptop) en ongeveer 20% een monitor van 1920 x 1080px (desktop PC). Een 'subtiel' ontwerp op je 4k scherm is dus gigantisch op een scherm van 1920 x 1080px.
Check dus regelmatig hoe een gemiddelde bezoeker je website ziet.

Tip: gebruik een verouderde computer om tijdens het ontwerpen je ontwerp te checken. Wij hebben bijvoorbeeld zelf een oude gammele PC met een monitor van 1920 x 1080px op de kop getikt voor 200 euro en controleren hierop voor publicatie elke webpagina die we maken en kijken hoe deze pagina overkomt op mensen met een display met een lagere resolutie.

tip 04

Gebruik Google Fonts (er zijn er echt genoeg...)

Je kunt in principe alle reguliere fonts voor drukwerk ook op een website gebruiken. Maar het is veel makkelijker om Google Fonts te gebruiken.
Momenteel zijn er zijn ongeveer 1.300 verschillende Google Fonts, dus voor ieder wat wils.
Ook kan je kan elk Google Font downloaden en gebruiken voor je offline projecten. No more excuses!

tip 05

Let op! Tekst blokken zijn dynamisch

Een stuk tekst ziet er op elke display van mobiel tot desktop PC anders uit en beweegt zich als het ware vrij door het tekstkader.
Ook kan de gebruikte browser invloed hebben op hoe tekst wordt getoond en ook of de kijker de lettergrootte in zijn browser heeft vergroot of verkleind.
Het is dus mogelijk dat bij de ene bezoeker een bepaald woord nog op de eerste regel staat en bij de andere bezoeker op de tweede regel.
In tegenstelling tot drukwerk weet je dus nooit 100% zeker hoe een tekstblok online getoond wordt. Maar een typefout op een website is natuurlijk wel dan weer supersnel opgelost!

tip 06

Doorbreek niet de horizontale rijen/lijnen

Websites werken naast de 12 verticale kolommen ook in horizontale rijen (‘rows). Je kunt dan ook niet heel eenvoudig een afbeelding of tekst plaatsen over 2 of meer horizontale rijen. Die afbeelding of teksten moeten dan met een ‘negatieve margin-top worden geplaatst en zullen anders getoond worden als de website op een andere schermbreedte bekeken wordt.
Hierdoor moet voor alle 6 de Bootstrap schermbreedtes worden ingesteld hoe zo’n afbeelding of tekst zich in die desbetreffende schermbreedte moet worden getoond.
Lees hier alles over op de pagina over 'indelen' en 'bootstrap'.

tip 07

Gebruik indien mogelijk vector bestanden

Elke grafisch ontwerper weet dat je met vectorbestanden het beste logo's, iconen of andere onderdelen superscherp in je ontwerp kunt plaatsen.
Ook websites kunnen gebruik maken van vectorbestanden in de vorm van .svg bestanden.
Dus zet je.eps of .ai bestanden over naar .svg of lever de originele bestanden aan bij je webbouwer. Maar maak er liever geen .png bestand van, dit maakt de afbeelding minder mooi en scherp.

tip 08

Passen de wensen bij het budget van je klant?

Het werk van een websitebouwer bestaat naast 1 op 1 het ontwerp nabouwen ook vaak uit het schrijven van code, die er op de achtergrond voor zorgt dat de dingen die jij met je klant hebt verzonnen ook echt werken.
Klanten denken vaak dat iets dat ze op een andere website hebben gezien makkelijk overgenomen kan worden op hun eigen website.
Soms kan dat met een stukje code op de website of een plugin downloaden, maar soms kan het niet.
Sommige handige onderdelen (bijvoorbeeld op veelbezochte websites als Bol.com of Coolblue) kosten maanden programmeerwerk en veel geld.
Vraag altijd vooraf aan de websitebouwer of de dingen die de klant wil mogelijk zijn binnen het beschikbare budget.

tip 09

Stuur het ontwerp alleen als je 100% zeker bent

Zorg dat je klant 100% tevreden is met het ontwerp dat naar de websitebouwer gaat.
Aanpassingen achteraf kunnen soms zeer tijdrovend zijn, met extra kosten voor de opdrachtgever als gevolg.
De websitebouwer heeft waarschijnlijk in zijn offerte ruimte opgenomen voor aanpassingen aan het originele ontwerp binnen het budget.
Laat de klant dus serieus naar het ontwerp van de website kijken voordat de websitebouwer de eerste versie oplevert. Dit voorkomt extra kosten voor latere aanpassingen.

tip 10

Twijfels? Bel je websitebouwer!

Ben je een ontwerp aan het maken en twijfel je of iets wel of niet kan? Neem dan meteen contact op met je websitebouwer en vraag of wat je hebt verzonnen ook werkelijk mogelijk is.
Dit voorkomt dat je later teruggestuurd wordt naar de tekentafel om het ontwerp opnieuw te doen.

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.