12 tips voor Webdesign
Tip 1 Kies een lettertype
Elk lettertype heeft zijn eigen persoonlijkheid en gevoel, dus kies er een die het beste bij jouw merk past.
Door Whatfont (Google Chrome-extensie) te gebruiken, kun je zien wat andere sites gebruiken.
Tip 2 Grootte lettertype
Het is belangrijk dat het voor mensen fijn leest. Het webdesign van je website draagt bij aan de leesbaarheid. Hou de lettergrootte tussen de 14 – 18 px voor alinea’s .
12px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit est, porta et enim quis, hendrerit dapibus dolor. Aenean hendrerit pellentesque risus. Etiam quis odio turpis. Proin a consequat mi. Suspendisse potenti. Integer consectetur dictum ante at placerat. Etiam at mauris elit. Vestibulum non enim ac dui sollicitudin posuere.
16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit est, porta et enim quis, hendrerit dapibus dolor. Aenean hendrerit pellentesque risus. Etiam quis odio turpis. Proin a consequat mi. Suspendisse potenti. Integer consectetur dictum ante at placerat. Etiam at mauris elit. Vestibulum non enim ac dui sollicitudin posuere.
25px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit est, porta et enim quis, hendrerit dapibus dolor. Aenean hendrerit pellentesque risus. Etiam quis odio turpis. Proin a consequat mi. Suspendisse potenti. Integer consectetur dictum ante at placerat. Etiam at mauris elit. Vestibulum non enim ac dui sollicitudin posuere.
Tip 3 Lijnlengte
Gebruik 45-90 tekens per regel voor een gemakkelijke lezing.
(vooral als je veel tekst hebt)
Fout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum na sollicitatie. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus. Donec semper ligula a purus fringilla varius. Quisque ut nisi dui. Maecenas libero eros, sagittis quis dui in, tristique dignissim sapien. Sed vel dui ornare, varius massa sed, scelerisque libero. Quisque dignissim sapien id augue efficitur lobortis sed at eros. Quisque vitae volutpat ex. Suspendisse in egestas turpis.
GOED
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum na sollicitatie. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum na sollicitatie. Donec malesuada accumsan mauris in faucibus. Curabitur lobortis felis vel felis dapibus dictum. Pellentesque posuere, erat eget tempus tincidunt, tellus arcu pellentesque nisl, lacinia vehicula est nunc a lectus.
TIP 4 Teksthiërarchie
Tijdens het webdesign is het belangrijk om verschil aan te brengen in de tekst. Maak gebruik van H1, H2 & H3.
Definieer hiërarchie door de lettergrootte, het lettergewicht of de kleur te verkleinen.
Voordat
Maak een geweldige kop
Ontwerp een “app-achtige” mobiel-responsieve website. Kies een webdesign wat voor beide modellen geschikt is.
Ontwerp
Een betere gebruikerservaring voor jou
U kunt een kop bovenaan toevoegen zoals hierboven.
Marketing
Ontwikkel een effectieve zoekmachinestrategie
U kunt de tekst op deze manier desatureren en met een hoofdletter schrijven.
Na
Maak een geweldige kop
Ontwerp een “app-achtige” mobiel-responsieve website.
Kies een webdesign wat voor beide modellen geschikt is.
ONTWERP
Een betere gebruikerservaring voor jou
Minder lettertype, kleur toevoegen en letterafstand vergroten.
MARKETING
Ontwikkel een effectieve zoekmachinestrategie
U kunt de tekst op deze manier desatureren en met een hoofdletter schrijven.
TIP 5 Kies 1 accentkleur
Houd het simpel en kies slechts één kleur, maar gebruik tinten van dezelfde kleur.
Dit is een monochroom kleurenschema en is een gemakkelijke manier voor beginners om ervoor te zorgen dat de website er altijd goed uitziet!
TIP 6 Gebruik neutrale kleuren
Deze kan worden gebruikt voor de inhoud en kop- & voetteksten. En overal
waar je niet weet welke kleur je wil gebruiken, te scheiden.
#FFFFFF
#F6F6F6
#CCCCCC
#999999
#4D4D4D
#222222
TIP 7 Knopstijlen en kleuren
Probeer de knopstijl consistent te houden. Kies tussen vierkant of afgerond.
Normaal gesproken maakt afgerond de website een beetje vriendelijker. Square geeft het een meer designer en professionele uitstraling.
Stap 1
Kies je hoofdkleur
Stap 2
Ga naar 0to255.com
Stap 3
Voer je # hexcode in en kies een kleur, bijvoorbeeld # 333333
Stap 4
Kies een kleur die – / + 2 tinten lichter| donkerder is dan het origineel is, bijvoorbeeld # 222222
Pas de hoofdkleur toe op de achtergrond en de donkerder / lichter als zweeftekst.
Of beweeg het met een van je accentkleuren.
KNOPSTIJLEN
TIP 8 Kies de juiste afbeelding
Het gebruik van de juiste afbeelding kan een website maken of breken.
Stap 1
Kies een afbeelding om uw tekst te ondersteunen.
Stap 2
Weerspiegelt de afbeelding de stijl van uw website?
Stap 3
Is je afbeelding groot genoeg? Zie tip 9 Afbeeldingsgrootte hieronder. Zo niet, verbeter dan hier de kwaliteit .
TIP 9 Afbeeldingsgrootte
Afbeeldingen rechtstreeks van websites / camera’s kunnen te groot zijn, bijv. (5000 x 3000px), dus wanneer ze naar de site worden geüpload. Heeft dit als gevolg dat de website langzaam wordt geladen.
Hieronder vindt u enkele richtlijnen om u te helpen beslissen wat u wilt bijsnijden voordat u ze naar uw website uploadt.
Klein JPG Afbeelding
Geschatte grootte (px) = 400 x 305
Gemiddeld (JPG)
Geschatte grootte (px) = 800 x 615
Groot (JPG)
Geschatte grootte (px) = 1200 x 915
Hero afbeelding
Ongeveer (px) = 1800 x 1000
Grootte (KB) <400KB
Opgeslagen formaat = JPG
Klein JPG Afbeelding Geschatte grootte (px) = 400 x 305
Gemiddeld (JPG) Geschatte grootte (px) = 800 x 615
Groot (JPG) Geschatte grootte (px) = 1200 x 915
Hero afbeelding
Ongeveer (px) = 1800 x 1000
Grootte (KB) <400KB
Opgeslagen formaat = JPG
TIP 10 Product afbeeldingen
Alle geüploade formaten moeten ongeveer 800 x 800 px zijn
Houd het proportioneel
Hieronder vindt u enkele richtlijnen om u te helpen beslissen wat u wilt bijsnijden voordat u ze naar uw website uploadt.
Witte achtergrond aanbevolen
Dit heeft een kleinere bestandsgrootte – creëert eenheid in de shop omgeving. En zal zorgen dat je website sneller laadt.
TIP 11 Uitlijning, afstand en scheiding
1. Probeer waar mogelijk dingen op één lijn te brengen.
2 . Zorg ervoor dat de afstand gelijk is. En als je witruimte gebruikt, kan je website er eenvoudiger en overzichtelijker uitzien.
3. Gebruik neutrale kleuren, achtergrondafbeeldingen en scheidingslijnen om inhoud te scheiden.
TIP 12 Focus op eenvoud en consistentie
Er zijn veel tools, plug-ins, thema’s met allerlei functies. Echter 80% van de tijd hebben we ze niet nodig.
Concentreer je gewoon op de basiselementen zoals de tekst, afbeeldingen en kleuren.
Volg de bovenstaande richtlijnen en je zou een geweldige website moeten hebben.
Je hoeft niet luxe te zijn, focus op leesbaarheid en ook op het maken van nuttige inhoud.
Hulpmiddelen
> Meer inkomen genereren
> Je doelen sneller bereiken
> Je tijd beheersen
> Je business laten groeien