Simpelheid heeft ook zijn kracht

Simpelheid heeft ook zijn kracht

Wanneer je een site aan het ontwerpen bent, is het design natuurlijk erg belangrijk. Het is zaak dat je site een uitstraling geeft die bij je product/dienst past. Dit kun je bijvoorbeeld doen door uitbundig gebruik te maken van dezelfde kleuren als je product. Wat we verder vaak zien bij webdesign is dat de site helemaal vol staat. In dit artikel zullen we je echter een ietwat ander perspectief bieden. Simpelheid staat hierbij centraal. We zullen dit illustreren aan de hand van de volgende site: http://www.creatinekopen.nl/.

Schermafbeelding 2017-03-02 om 17.06.09

Indeling

Het eerste wat opvalt is de indeling. Deze is erg overzichtelijk en duidelijk: simpel dus. Bovenin bevindt zich een logo, in een simplistisch lettertype. Daaronder kun je kiezen uit de subpagina’s. Wat we ook gelijk zien is de zoekfunctie rechtsboven. Mocht je iets niet kunnen vinden, kan je hier terecht! Verder is de tekst opgedeeld door middel van kopjes.

Kleuren

Wat betreft de kleuren zien we een kleurenschema bestaande uit drie verschillende kleuren. Dit zijn een felle lichtblauwe kleur, grijs en zwart. Blauw straalt, zoals we weten, vertrouwen uit. Deze kleur is dus altijd aan te raden bij webdesign, je site gaat er betrouwbaarder uitzien. Grijs en zwart zijn verder ook fijne kleuren om te gebruiken, omdat deze simpel en duidelijk zijn.

Lettertype

Het lettertype is zakelijk en recht-toe-recht-aan. De titels zijn in hoofdletters getypt, waardoor deze zonder al te veel poespas duidelijk aan te merken zijn als titels. Het is fijn om een duidelijk en simpel lettertype te kiezen. Dit zorgt er onder andere voor dat de bezoeker niet wordt afgeleid en goed door de tekst heen kan komen.

Subpagina’s

Tot slot, de subpagina’s. Op elke subpagina wordt dezelfde stijl doorgevoerd. Dat is altijd belangrijk om te doen: zo zorg je voor consistentie binnen je site. De subpagina’s staan boven in het menu aangegeven. Zo ziet een van de subpagina’s eruit:

Schermafbeelding 2017-03-02 om 18.13.01

Het ontwerpen van een subpagina

Het ontwerpen van een subpagina

Wanneer je je op een site bevindt, word je bij één klik al snel doorverwezen naar een ander pagina van die site, de subpage. Als voorbeeld de pagina van Nieuwe Sneakers die zich volledig richt op de adidas Superstar: https://www.nieuwesneakers.nl/adidas-superstar/. Hoe zorg je dat bezoekers vinden wat ze zoeken? En hoe zorg je er vervolgens voor dat die subpage mooi verzorgd en duidelijk is? Daar zullen we in dit artikel aandacht aan besteden.

Dit is de pagina die we als voorbeeld nemen:
schermafbeelding-2016-12-05-om-21-30-39

Onder het logo van Nieuwe Sneakers, wat overigens een goed logo is; duidelijk en passend bij het ‘product’, zien we een menu. Dit menu geeft de opties weer waar de meeste bezoekers naar op zoek zijn. Het zijn als het ware de hoofdzaken van de site. Een icoon voor de home pagina op links, altijd handig om terug te gaan. Daarnaast zien we ‘merk & model’ wat haast alle opties weergeeft wanneer je hier met je muis op klikt. Weer daarnaast zien we de twee meest populaire sneakers: de Nike Air Max en de adidas Superstar. Verder geeft het menu nog ‘alle sneakers’, ‘blog’ en zeker niet onbelangrijk ‘contact’ weer.

Eenmaal op de pagina van de adidas Superstar, zien we wederom dat alle opties duidelijk zijn weergeven. Als bezoeker weet je precies waar je moet zijn voor wat je zoekt. Qua design is het mooi dat de naam van de pagina ‘ADIDAS SUPERSTAR’, bovenaan weergeven is met een foto van de sneaker op de achtergrond. Daaronder zien we uitgelichte schoenen uit deze categorie. Als we op deze pagina meer naar beneden scrollen, ziet het er als volgt uit:
schermafbeelding-2016-12-05-om-21-40-02

Als je op de oranje knop ‘lees meer’ klikt, krijg je uitgebreide informatie over de adidas Superstar. Wat deze site ook heel mooi heeft gedaan is het invoegen van eventuele kortingscodes, dit is als een dienst naar de bezoekers toe! Ten slotte kunnen we nog een opmerking maken over het aangeven van wat er in de aanbieding is, dit werkt erg goed omdat dit de bezoeker snel over kan halen om daadwerkelijk een koopactie uit te voeren.

Kortom: neem bij het ontwerpen van een subpage een voorbeeld aan deze pagina!

Design

Design

Design is ontzettend belangrijk bij het maken van een site. Het uiterlijk trekt vaak de aandacht en de bezoeker beslist onbewust in de eerste paar seconden al of hij op de site blijft. Vervolgens is het natuurlijk ook nog de bedoeling dat de bezoeker een aankoop doet, ook daarbij is design erg belangrijk. We zullen dit in dit artikel nader uitleggen aan de hand van een voorbeeld.

 

Als voorbeeld gebruiken we een site waar alle pampers aanbiedingen op te zien zijn:

schermafbeelding-2016-11-20-om-21-41-35

De doelgroep van zo’n site is natuurlijk ouders van jonge kindjes en/of baby’s. Het is daarom belangrijk dat de site aan hun voorkeuren voldoet. Je zou dit als volgt kunnen benaderen: grote kans dat hun leven bestaat uit chaos en drukte met het opvoeden van kinderen en daarnaast eventueel werken. Het is dus belangrijk dat de site wat rustiger is, duidelijk en overzichtelijk. Zoals we hierboven kunnen zien hebben de makers dat goed aangepakt. De tekst is mooi verdeeld waardoor het niet druk is, maar juist overzichtelijk. De site heeft kleuren die mooi bij elkaar passen, het lichte blauw bij het lila paars en, als contrastkleur, oranje. Door deze oranje kleur springt de ‘koop-knop’ er goed uit. Daarnaast, als je hier met je muis overheen gaat, verschijnt er een schaduw onder de knop wat een versterkend effect heeft. Het is daarmee een goede call to action door de goede positionering. Ook dekt de knop goed de lading.

Vervolgens is er goed gebruik gemaakt van het zogenaamde bite-snack-meal. Dit is het principe dat er een titel is, gevolg door een ondertitel, gevolgd door tekst. Hierdoor is er sprake van een goede en duidelijke hiërarchie. De bezoeker wordt namelijk geleid van belangrijk naar minder belangrijk.

 

Zie hier ten slotte de contact pagina:

schermafbeelding-2016-11-20-om-22-11-30

Hier zien we dat het design erg rustig en duidelijk is. De eventuele afleidingen zijn weggehaald waardoor bezoekers precies kunnen invullen wat ze willen.

Opbouw van je website

Opbouw van je website

Het is belangrijk dat je bezoekers continue getriggerd blijven om op je website te blijven en door te klikken. Google vindt dit belangrijk en meet ook hoelang bezoekers op je website blijven.

Dit noemt google de Bounce Rate, hoe hoger de bounce rate hoe eerder bezoekers je pagina verlaten. Dit beïnvloed dus je plaats in de zoekmachine. Er zijn verschillende manieren om je bezoeker te blijven tripleren. Denk bijvoorbeeld aan een popup. Hieronder zie je hier een voorbeeld van op de website van krantenproefabonnement.nl;

popup-voorbeeldkopie

Je ziet dat de klant opnieuw een keuze krijgt en hierop in kan gaan. Daarnaast moet de pop-up gesloten worden wat zorgt voor een actie van de klant die ook de bounce rate beinvloed.

Zo zijn er tal van mogelijkheden in de opbouw die een bezoeker blijven triggeren. Achter de popup zie je een voorbeeld van een slider. Deze slider bestaat uit een grote foto zonder al te veel tekst. Zo is het voor de bezoeker meteen duidelijk wat de boodschap is. Daarnaast is er overduidelijk een actie nodig van de bezoeker, namelijk een druk op de groene knop. Ook hier wordt de bezoeker weer een keuze voorgespiegeld. De opbouw is dus enorm belangrijk.

Bedrijven als booking.com, google en Facebook testen ons daarom ook continue. Dit noemen ze AB testing. Bezoekers krijgen verschillende versies voorgeschoteld. Alles op deze sites wordt gemeten zodat men weet wat het beste werkt en welke keuze bezoekers maken. Probeer zelf dus ook op zijn tijd de opbouw te veranderen.

Het aanpassen van een thema

Het aanpassen van een thema

Er zijn tegenwoordig een flink aantal “WordPress developers” die zeggen dat ze voor jou een website kunnen maken. Nu is dat wel zo, maar 80% van deze ontwikkelaars volgen allemaal een simpel stappenplan.

  1. Zoek een mooi thema op
  2. Vul deze in met een logo en inhoud
  3. Dit ‘ingevulde thema’ gaat 3 of 4 keer over de kop bij de klant

Nu is dit een tactiek waar veel klanten en webdesigners tevreden mee zullen zijn, echter hoeft dit niet. In dit artikel leggen wij uit hoe je je gekochte thema jouw unieke eigen twist kan geven. We hebben het internet afgezocht naar een website die dit principe goed heeft toegepast. Het is namelijk deze website over ibiza kleding. We kunnen duidelijk zien dat ze het thema Suave hebben gebruikt (klik).

ibiza-kleding

Je kunt zien dat ze gebruik hebben gemaakt van een kolom layout, iets wat niet standaard in het thema zit. Het thema maakt wel gebruik van bootstrap maar daarover later meer.

Leer CSS

Welicht 1 van de eerste stappen die goed is om uit te voeren is om een stoomcursus CSS te volgen. Met CSS leer je elk visueel element van een website aan te passen, dit is dus essentieel als je graag je eigen draai aan je website zou willen geven.

Er zijn enkele browsers die jou in de gelegenheid stellen om ‘live’ een website aan te passen. Dit zijn Google Chrome en Mozilla Firefox. Deze hebben zogeheten Dev-tools waarmee je heel erg simpel je eigen CSS wijzigingen kan toepassen aan elementen binnen een site.

Je kunt beginnen op W3schools.com. Hier kan je de basis leren van HTML en CSS. Een achtergrond in HTML is zeker handig, omdat je hiermee snapt hoe een webpagina is opgebouwd en hoe elementen bij elkaar passen. Daarna, wanneer je CSS leert, leer je dus hoe je vorm geeft aan deze elementen.

Wanneer je HTML en CSS leert kun je dus heel gemakkelijk je eigen draai geven aan een WordPress thema!

Een goed ontwerp kiezen voor verschillende soorten sites

Een goed ontwerp kiezen voor verschillende soorten sites

Wanneer je denkt dat je een goede webdesigner bent, ben je pas op de helft. Heb je namelijk ooit wel eens nagedacht over hoe een website voor ‘computers’ er anders uit moet zien dan bijvoorbeeld een website over ‘voedsel/supermarkten’?

Website over supermarkten

We kennen natuurlijk allemaal Albert Heijn, dit is de grootste supermarktketen van Nederland. Zij hebben ook een online gedeelte. Wist je dat er over dit design heel erg is nagedacht? Waar denk je zelf aan als je aan supermarkten of voedsel denkt?
ah-bonus-screenshot

Zie hier de website van Albert Heijn. Zij hebben hun eigen stijl weten te creëren, maar hebbend dit gedaan met het onderwerp van de site in hun achterhoofd. Zo zijn er ook verschillende sites die hierop aansluiten, bijvoorbeeld deze pagina, die over de bonus van de AH gaat.

ah-bonus-voorbeeld-website

Je ziet hier elementen terugkomen van de Albert Heijn huisstijl (omdat de pagina in kwestie over AH Bonus gaat), maar ze hebben ook een groene (vertrouwde) kleur gebruikt. Groen wordt vaak gebruikt als het om (gezond) voedsel gaat.

Bij het kiezen van kleuren van bijvoorbeeld een groot elektronicaconcern zoals Coolblue, is het wederom belangrijk dat je voor vertrouwde kleuren kiest. Het is bijvoorbeeld bewezen dat een blauwe tint in je website vertrouwen opwekt bij je klanten. Lees hier bijvoorbeeld een interessant artikel over het kiezen van kleuren voor je marketing communicatie strategie.

We kunnen wel stellen dat het kiezen van de juiste kleuren voor het webdesign van je site van hoogste prioriteit is. Kleurencombinaties kunnen een site maken of breken, en het is dus belangrijk om goed na te gaan wat voor boodschap je over wilt brengen via je site. Kijk uit voor schreeuwerige combinaties en misschien wel 1 van de belangrijkste tips; kijk bij je concurrenten om inspiratie op te doen!

Veel succes!

Hoe kies je het juiste kleurenschema voor je website?

Hoe kies je het juiste kleurenschema voor je website?

Een van de meest uitdagende en lastige onderdelen van het ontwerp proces is het kiezen van een kleurenpalet dat recht doet aan uw uw merk of boodschap. Terwijl dit kleurenpalet de belangrijke basis is voor een geweldig ontwerp. Het creëren van perfecte kleur combinaties is meer dan alleen het kiezen van twee kleuren. Achter het kiezen van de kleuren zit best veel wetenschap en theorie. Vandaag zullen we kijken naar negen manieren om u te helpen om een beter kleurenpalet te creëren. (En natuurlijk, de tips worden geleverd met een showcase van websites met mooie kleurencombinaties.)

Begin met het kleurenwiel
kleurenwiel

Herinnert u zich de kleurenwiel van school als een kind? Het is nog steeds een praktisch hulpmiddel als een volwassene. Het kleurenwiel kan u helpen om na te denken over kleur en hoe de verschillende tinten zich tot elkaar verhouden. Het is een praktische manier om te bepalen of een paar (of meer) van de kleuren zich tot elkaar verhouden op een harmonieuze manier.

Het wiel bestaat uit primaire, secundaire en tertiaire kleuren en elke combinatie daarin.

  1. Primaire kleuren: rood, geel, blauw
  2. Secundaire kleuren: groen, paars, oranje (mix van twee primaire kleuren
  3. Tertiaire kleuren: Azure, violet, rose, rood-oranje, chartreuse, groene de lente (mix van een primaire en secundaire kleur)

Hoe je de kleuren mixt op het wiel is belangrijk en draagt ​​bij aan hoe goed de kleuren samen te werken.

  1. Analoog: Pick drie kleuren naast elkaar op het kleurenwiel
  2. Aanvullend: Kleuren uit weerszijden van het kleurenwiel
  3. Split complementair: Kies een kleur en gebruik de kleur aan beide zijden van het andere kleur uit het kleurenwiel
  4. Double complementair: Het moeilijkste om te maken, dit concept maakt gebruik van een primaire kleur en is een aanvulling van beide kanten van de andere kleur op het kleurenwiel (werkt het beste met tinten en tonen)
  5. Monochromatische: Een kleur en variaties van die kleur (zoals de Nifty, hierboven)
  6. Triadic: Drie kleuren gelijke afstand van elkaar op het kleurenwiel
    De meeste kleuren picking tools te gebruiken een simulatie van een kleurenwiel om u te helpen kleur keuzes te maken. (Dus er is echt geen manier om dit onderdeel van het ontwerp theorie.)

Zwart, wit en Neutrals Matter
Maar een palet is meer dan alleen een felle kleur of twee. Verdedigbaar, de belangrijkste kleuren in het palet zijn de kleuren die je niet echt ziet – zwart, wit en neutralen.

Deze kleuren vormen het decor voor hoe alles werkt. Ze zijn vaak onderdeel van de achtergrond, zorgen voor een warm of koud gevoel voor het project en dragen bij aan de totale navigatie en usability al typografie en andere directional cues.

Toning en Tinting
Er zijn maar weinig ontwerpers die een paar kleuren grijpen van de kleurencirkel en ze gewoon direct gaan gebruiken. Dat is waar tinten en kleuren samenkomen.

  1. Tint: Kleur plus wit
  2. Shade: Kleur plus zwart
  3. Tone: Kleur plus grijs of zwart-wit

Deze variaties veranderen de verzadiging van kleur en geven u variantie in een palet. Als het gaat om het creëren van kleurencombinaties tinten, tonen en kleuren worden vaak gebruikt om een ​​palet langer dan twee of drie kleuren uit te breiden, zodat alle kleuren zijn in dezelfde familie (veel op dezelfde manier dat u misschien vet of cursief met typografie te gebruiken ).

Gebruik Trends met Voorzichtigheid
Er zijn veel “trendy” kleuren. Terwijl ze leuk om spaarzaam zijn, kunnen deze kleuren wat moeilijker om langdurig gebruik. Als u een kleur trend gebruiken, vasthouden aan een trendy optie en werk het in uw palet.

In het algemeen, wilt u een kleurenpalet dat de tijd zal doorstaan ​​en kan worden gebruikt over en weer te creëren. (Kleur is een belangrijke bijdrage aan merkidentiteit.) Werken met een paar kleuren die “jou” en voeg een trendy optie in als een accent voor een maximale impact. (Op die manier, wanneer de trend voorbij is, kunt u terugkeren naar een andere accentkleur.)

Vermijd de Regenboog
Kleur is het beste wanneer het wordt gebruikt met een doel en met mate. U hoeft niet vijf, 10 of 15 kleuren in het palet te kiezen. De beste kleurencombinaties zijn vaak net groepen van twee of drie kleuren met een neutrale achtergrond.

Waarom? Dit geeft elke kleur ruimte om gezien te worden en hebben een doel. Kleur moet iets in het ontwerp te doen. Te veel kleuren en het enige doel is kleur. De beste ontwerpen en kleurencombinaties bestaan ​​zodat elke kleur een specifieke rol en gebruikers kunnen gaan met kleur op een wijze die de website die veel gemakkelijker te gebruiken maakt. (Bijvoorbeeld, de meeste ontwerpers gebruiken dezelfde kleur voor elke knop in een website project.)

Onder meer een kleur voor Tekst Elements
Als u het bouwen van kleurencombinaties, is het belangrijk om na te denken over tekstelementen. Tenzij de tekst alleen zwart, wit of grijs wordt, bepaalt welke kleur (kleuren) worden gebruikt voor tekstelementen.

Dit kan variëren van kleur voor de leesbaarheid of bruikbaarheid bevatten om te koppelen aan menu-items. De belangrijkste overweging bij de planning van kleurkeuzes voor de tekst is de leesbaarheid. Letters moet voldoende contrast in verhouding tot de achtergrond, zodat het kan worden gezien en gemakkelijk leesbaar.

De kleur wordt gebruikt voor de tekst elementen kunnen deel uitmaken van de algemene kleurenschema of een accentkleur die specifiek is voor belettering.

Beschouw kleur als het gaat om Content
De beste kleurencombinaties niet alleen overeen met tint aan Hue, maar ze overeenkomen ook kleur aan de inhoud. Denk na over wat is eigenlijk op de website. Heeft de kleur keuzes die goed mengen met die inhoud?

Soms is dit een duidelijk probleem en oplossing. Websites die te maken hebben met de natuur of het milieu zou kunnen gebruiken groen of bruin; banking websites zijn vaak blauw als gevolg van de associatie van die kleur met vertrouwen.

Andere tijden, het is niet zo eenvoudig. Als je twijfelt, kijk naar de beelden op de site design. Trek stalen van het aan het opzetten van een basislijn voor het type van de kleur die het meest geschikt is. Dan bouwen vanaf daar.

Vasthouden aan een Palette
Als je eenmaal op de weg naar het creëren van een grote kleurencombinatie, stelt een palet zodat kleurgebruik consistent in een project blijft. Stellen een aantal regels voor de manier waarop kleur moet worden gebruikt.

Neem al deze tips mee, en dan kun je uiteindelijk je afgemaakte EPS Bestand opsturen naar het drukbedrijf!

Beantwoord deze vragen aan de slag:

Hoeveel kleuren zijn jullie samen?
Zijn er tinten, kleuren en tinten te gebruiken?
Kan tekst worden gekleurd?
Is er een set tint voor UI-elementen?
Kan accentkleuren buiten het palet worden toegevoegd aan de mix?

Conclusie
Als het gaat om kleur, veel van wat maakt een groot palet begint bij jezelf. Laat de kleuren zien en voelen? Het lijkt misschien een eenvoudige test, maar het is belangrijk. Als je het minst beetje onzeker, nadenken over uw opties of ga terug naar de basis van theorie en wijzigingen in een van de kleuren maken.

Vergeet niet om het contrast en de variantie in het palet te creëren. Opzetten van een gevoel. En vergeet niet om de kleur aan te passen aan de inhoud voor de beste algehele gebruikerservaring.