leuk man, verticaal ritme

Wat verticale spacers precies zijn? Het zijn tussenruimtes met een vaste hoogte voor desktop, tablet en mobile devices, waarmee je een goed verticaal ritme creëert: een logische bundeling of scheiding van stukken informatie. Dat levert flink wat voordelen op:

  • Je ontwerpt way much sneller en consequenter.
  • Er is minder overhead en overleg.
  • Je optimaliseert het verticale leesgedrag (het stelt je bezoeker in staat de pagina sneller te scannen (dat is wat je bezoeker wil).
  • Het geeft voldoening – als designer ben je tenslotte een sterk esthetisch ingesteld wezen.
  • Je maakt developers blij (en misschien gaan ze zelfs van je houden – bonus!).

Bij verticale spacers hanteren wij maatvoeringen om het overleg en de overdracht tussen designer en developer een stuk makkelijker te maken. We werken met T-shirt sizes: XS, S, M, L, XL, XXL.

Responsive gezien zijn spacers niet universeel. Per device is het afwegen van de juiste verhouding belangrijk, want je weet zelf: de grote spacers van bijvoorbeeld een desktop view zijn veel te ruim voor je mobiele ontwerp. Het beste kun je met logische stappen vergroten, zodat de developer ze maar eenmalig globaal hoeft in te voeren. Bijvoorbeeld:

  • Spacer XXL:      desktop 200px > tablet 150px > mobile 100px
  • Spacer S:            desktop 20px > tablet 15px > mobile 10px

Een goed verticaal ritme zorgt voor een logische bundeling of scheiding van stukken informatie.

 

it’s alive

De spacers die je hanteert draag je over aan development. Hiervoor gebruik je de developer hand-off: een document waarin alle spelregels, componenten, tekststijlen, kleuren en spacers zijn vastgelegd. ‘De enige waarheid’, zullen we maar zeggen 😉 . Zo’n hand-off is te genereren vanuit apps als Sketch, Figma en Adobe EX, maar wij geven de voorkeur aan ‘good old fashioned’ handwerk! Waarom? Omdat een hand-off in feite een levend document is en continu verandert.


Zie de hand-off als Frankenstein, een levend wezen samengesteld uit allerlei onmisbare onderdelen. Al is onze Frankenstein een stuk knapper.

 

Zo pas je verticale spacers toe

Hoewel de hoogte van de spacers per project kan veranderen, levert het visueel weinig verschil op. Onze tip: standaardiseer je spacers en win tijd! Maak voor jezelf een set spacers aan en verdeel ze over de verschillende devices. Mocht je toch een grotere of kleinere view missen, bijvoorbeeld voor grotere schermen, dan maak je gewoon een extra kolom aan. It’s your call!

Nu de toepassing, we geven een voorbeeld. Stel, we gebruiken vertical spacer L in de desktop view tussen blok A en blok B. Uit ons standaard overzicht blijkt: in de mobile view wordt deze spacer vervolgens automatisch 40px hoog. Dat ziet er zo uit:

Niets meer aan doen, toch?

 

in je webdesign

Ook al verschillen de pagina’s binnen een site of app nog zo erg van elkaar, over één ding kun je zeker zijn: je hebt een header, een footer en daartussen contentsecties. Bij het ontwerpen van je webpagina geef je deze ruimtes vaste verticale afstanden met de spacers. In de praktijk hanteren wij de volgende regels:

  • Header:
    Spacer L – zorgt dat vitale informatie meer kans heeft binnen de eerste view te blijven.
  • Contentsecties:
    Spacer XL – genoeg ‘witruimte’ zodat informatie sneller gescand kan worden.
  • Footer:
    Spacer XL of XXL – de bezoeker ziet dat de pagina hier eindigt.

Voilà: daar is je verticale ritme. Je design krijgt karakter!

 

the next steps

Na het opstellen van de hand-off, lever je deze af bij de developer. Die gaat voor de toepassing aan de slag met een css framework. Wij gebruiken daarvoor Bootstrap 4 framework: één van de meest gebruikte frameworks en een super solide basis voor ieder project! Bootstrap benoemt de maten als volgt:

S > sm | M > md | L > lg | XL > xl | XXL > xxl

De developer legt de verticale spacers vast in een SCSS mixin volgens de benaming van Bootstrap:

variables.scss

// Making use of the 8px Grid.
$grid-spacer: 8px;

mixins.scss

// @include v-spacer-sm(margin-bottom)
@mixin v-spacer-sm($attribute) {
  #{$attribute} : $grid-spacer * 1.25;
  @include media-breakpoint-up(md) {
     #{$attribute} : $grid-spacer * 1.875;
  }
  @include media-breakpoint-up(xl) {
     #{$attribute} : $grid-spacer * 2.5;
  }
}
// @include v-spacer-md(margin-bottom)
@mixin v-spacer-md($attribute) {
  #{$attribute} : $grid-spacer * 2.5;
  @include media-breakpoint-up(md) {
     #{$attribute} : $grid-spacer * 3.75;
  }
  @include media-breakpoint-up(xl) {
     #{$attribute} : $grid-spacer * 5;
  }
}
// @include v-spacer-lg(margin-bottom)
@mixin v-spacer-lg($attribute) {
  #{$attribute} : $grid-spacer * 5;
  @include media-breakpoint-up(md) {
     #{$attribute} : $grid-spacer * 7.5;
  }
  @include media-breakpoint-up(xl) {
     #{$attribute} : $grid-spacer * 10;
  }
}
// @include v-spacer-xl(margin-bottom)
@mixin v-spacer-xl($attribute) {
  #{$attribute} : $grid-spacer * 10;
  @include media-breakpoint-up(md) {
     #{$attribute} : $grid-spacer * 15;
  }
  @include media-breakpoint-up(xl) {
     #{$attribute} : $grid-spacer * 20;
  }
}
// @include v-spacer-xxl(margin-bottom)
@mixin v-spacer-xxl($attribute) {
  #{$attribute} : $grid-spacer * 12.5;
  @include media-breakpoint-up(md) {
     #{$attribute} : $grid-spacer * 18.75;
  }
  @include media-breakpoint-up(xl) {
     #{$attribute} : $grid-spacer * 25;
  }
}

v-spacer.scss
Tevens is er een SCSS bestand om de v-spacers als classes te kunnen gebruiken:

.v-spacer {
  &.v-spacer-sm {
     @include v-spacer-sm(margin-bottom);
  }
  &.v-spacer-md {
     @include v-spacer-md(margin-bottom);
  }
  &.v-spacer-lg {
     @include v-spacer-lg(margin-bottom);
  }
  &.v-spacer-xl {
     @include v-spacer-xl(margin-bottom);
  }
  &.v-spacer-xxl {
     @include v-spacer-xxl(margin-bottom);
  }
}

 

De vertical spacers kun je op meerdere manieren gebruiken:

In HTML:

<section class="v-spacer v-spacer-md">

Of in CSS

section {
  @include v-spacer-md(margin-bottom);
}

Mocht ‘margin-bottom’ niet afdoende zijn dat kun je hier ook een ander attribuut voor gebruiken, zoals: padding-top, padding-bottom, height. Maar ons advies luidt: gebruik enkel verticale attributen 🙂

Wanneer je als developer een verticale tussenruimte meet in het design, zou deze met één van de gedefinieerde vertical spacers overeen moeten komen en kun je de betreffende vertical spacer blindelings toepassen in HTML of CSS. Designer blij, developer blij!

Klaar om verticaal ritme toe te passen voor een design met karakter? Let’s go!
#beamazing