NOVASAR

De vier pijlers van ontwerp.

PS: Handleiding is interactief.

  1. 01TypografieVorm
  2. 02Lay-outRuimte
  3. 03KleurGevoel
  4. 04BewegingRitme
Definitie

Typografie

Typografie is de kunst en techniek van het vormgeven, zetten en rangschikken van tekst. Het doel is om geschreven taal leesbaar, begrijpelijk en visueel aantrekkelijk te maken.

01 / Hiërarchie

Hiërarchie.

De volgorde waarin u leest.

Weetje

Een octopus heeft drie harten

Twee harten pompen bloed door de kieuwen, het derde door de rest van het lichaam. Wanneer de octopus zwemt, stopt dat derde hart met kloppen. Daarom verkiest het dier kruipen boven zwemmen. Het bloed is bovendien blauw, omdat het koper bevat in plaats van ijzer. Druk nu eens op de Hiërarchie-knop hierboven om het verschil te zien.

Marine Biological Association

Hiërarchie is volgorde. Wat u eerst leest, wat daarna. Daarom gebruiken we grootte en gewicht in tekst om de bezoeker structuur te geven doorheen de website.

02 / Vormgeving

Vormgeving.

De toon die u wilt uitstralen.

Lettertype
56px
600
-0.020

Novasar is een webstudio.

Vormgeving maakt uw tekst toegankelijk voor uw doelgroep en bouwt mee aan uw merkidentiteit. Belangrijk dus.

02

Lay-out

Ruimte

Definitie

Een lay-out (of opmaak) is het ruimtelijk ordenen, rangschikken en positioneren van visuele elementen. Het doel is om een overzichtelijk, logisch en visueel aantrekkelijk geheel te creëren.

Vier onderdelen
01

Witruimte

Ademruimte tussen elementen.

Hoe meer ademruimte tussen elementen, hoe meer rust de pagina uitstraalt. Een goedkope website staat vaak volgepropt, terwijl een premium website juist alles ademruimte geeft.

02

Uitlijning

Het raster.

Een sterk ontwerp is gebouwd op een onzichtbaar raster, oftewel een grid. Doordat alle elementen op de pagina netjes uitlijnen op dezelfde verticale lijnen, ontstaat er visuele orde. Hierdoor ervaren bezoekers meer rust en overzicht.

03

Hiërarchie

Welk element domineert.

In een goede lay-out is niet alles even belangrijk: je creëert een duidelijke visuele hiërarchie. Je geeft altijd één hoofdelement het meeste ‘visuele gewicht’ door slim gebruik te maken van schaal, contrast of witruimte. Daarna leiden de andere elementen de bezoeker vanzelf verder door de website.

04

Balans

Verdeling tussen elementen.

Balans gaat over de verdeling van elementen. Bij een symmetrische verdeling is het gewicht precies in evenwicht, wat zorgt voor een formele en rustige uitstraling. Asymmetrie balanceert grote en kleine elementen tegenover elkaar, wat veel meer energie en spanning oplevert.

Drie lay-outs

NOVASAR

Drie elementen (titel, foto en tekst), drie totaal verschillende lay-outs. Elk met hun eigen gevoel.

03

Kleur

Gevoel

Definitie

Kleur is een visueel ontwerpelement dat wordt gebruikt om emotie en sfeer over te brengen, een merkidentiteit te vormen en de aandacht van de bezoeker te sturen.

01 / Kleurenpsychologie

Kleurenpsychologie.

Het gevoel dat een bezoeker krijgt.

U hebt wel eens gehoord dat elke kleur een ander soort emotie oproept. Blauw is rust, oranje energie, geel optimisme en groen is groei. Maar kleur krijgt pas betekenis door zijn omgeving. Felblauw op een witte achtergrond straalt de betrouwbaarheid van een bank uit, maar datzelfde blauw op een pikzwarte achtergrond voelt ineens als een moderne nachtclub.

Dat gezegd zijnde steunt elke emotie in een kleur op deze drie basisprincipes.

Temperatuur

Het warme of koele karakter van een kleur.

Verzadiging

De zuiverheid en intensiteit van een kleur.

Helderheid

Hoe licht of donker een kleur is.

NOVASAR
warmenergie & passie
koelrust & kalmte
NOVASAR
verzadigd
gedempt
NOVASAR
licht
donker
02 / Kleur als gids

Kleur als gids.

Waar het oog naartoe wordt gestuurd.

Kleur stuurt het oog door zeldzaamheid, niet door hoeveelheid. Een knop is niet opvallend omdat hij rood is. Een knop is opvallend omdat hij de enige rode is op de pagina. Drie regels die hieruit volgen.

  1. Exclusiviteit. De primaire accentkleur dient om eruit te springen. Gebruik deze kleur puur om de belangrijkste actie aan te wijzen. Zodra u deze kleur inzet als simpele decoratie, verwatert het effect direct.
  2. Consistentie. Geef twee elementen dezelfde kleur en het brein concludeert direct dat ze bij elkaar horen.
  3. Rust. De kracht van een kleur zit in de minimale aanwezigheid. Het overgrote deel van uw website leunt op neutrale kleuren. Het gekleurde element valt zo goed op omdat de rest van de pagina rust uitstraalt.
Meer kleur is niet meer sturing. Meer kleur is geen sturing.
04

Beweging

Ritme

Definitie

Beweging is het strategisch inzetten van animaties en transities om de gebruiker feedback te geven, de aandacht te sturen en de website tot leven te wekken.

01 / Tijd & Ritme

Tijd & Ritme.

De taal waarmee beweging gemaakt wordt.

Drie identieke animaties. Zelfde start, zelfde eind, zelfde duur, alleen ander ritme.

Animatie A
Animatie B
Animatie C
02 / Transities

Transities.

De overgang tussen verschillende weergaves.

04 — Vandaag

Ochtend.

Wekker, koffie, krant.

03 / Micro-interacties

Micro-interacties.

Beweging als bevestiging op uw eigen acties.

hover-respons
klik-bevestiging
validatie-feedback

Micro-interacties lijken misschien simpel, maar ze vervullen een cruciale psychologische behoefte: de nood aan bevestiging. Door direct visueel antwoord te geven op een klik of een muisbeweging, beloont u de bezoeker en neemt u onbewuste twijfel weg. Bijzonder waardevol dus.

Einde van de handleiding

Proficiat.

U bent nu een echte webdesigner.

U begrijpt dus hoe belangrijk typografie, lay-out, kleur en beweging zijn. Hiermee kan u uw droomwebsite maken.

Heeft u toevallig toch iemand nodig die daarbij helpt?
Contacteer me gerust:

Stuur een bericht(U begrijpt dus nu ook waarom deze knop in het rood staat)