Wat is de Gulden Snede?

De Gulden Snede is een natuurlijke verhouding in de kunst en wiskunde. Als je de verhouding uittekent in een rechthoek (zoals hierboven in het plaatje) dan is de verhouding tussen AB en BC hetzelfde als de verhouding tussen BC en AC. In getallen is dit gelijk aan (1+√5)/2 en is dus ongeveer 1.61803. De snede is dus 1:1.61803.

Het leuke is dat de verhoudingen tussen het onderstaande hetzelfde zijn:

• 1 : 1.61803
• 1 : 0.61803

Gulden snede in de kunst

In de Renaissance zochten kunstenaars naar harmonieuze composities, die organisatie en evenwicht uitstraalden. Veel Renaissance kunstenaars waren bovendien wetenschappers, omdat ze er naar streefden om een ‘homo universalis’ te zijn. Dus iemand dus die talenten op vele vakgebieden heeft. Kunstenaars vonden voor hun werk inspiratie in de wiskunde, anatomie en architectuur.

Als homo universalis probeer ik op de meeste WordPress websites en ontwerpen de Gulden Snede toe te passen. 🙂

Gulden snede en pixels voor website

toegepast op het web
Door A. Wentzel (februari 2013)

Typografie, wegontwerp, design en de Gulden Snede

Een fijne tool om mooie en goed te typograferen met behulp van de Gulden Snede is de Golden Ratio Calculator. Wel voor gevorderde webdesigners.
Gulden snede en typografie met grtcalculator.com

Gulden Snede toepassen in webdesign

Voor gevorderden: Gulden snede met CSS op CodePen

Kader maken in verhouding gulden snede in webdesign

Je kan een kader maken in verhouding gulden snede.

Gulden snede in CSS en in html

Plaats dit in je CSS. Het is wel handig om iets meer te weten over de Root en variabelen. Lees eventueel de onderstaande handleidingen over properties, variabelen en root:

:root {
  --ratio: 1 / 1.618;
  --width: 98vmin;
  --height: calc(var(--width) * var(--ratio));
}

* {
  box-sizing: border-box;
}

/* Kader Layout */
.kader-guldensnede {
  background: #f2f2f2;
  border: 1px solid;
  font-size: 3.5vmin;
  margin: 1vmin auto;
  padding: 3vmin;
  width: var(--width);
  height: var(--height);
  text-align: center;
}

Plaats dit op de WordPress pagina of bericht in een blok:

<section class="kader-guldensnede">
  <h3>Lorem ipsum dolor sit amet</h3>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque.</p>

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skull-and-crossbones.svg" alt="" />

  <p class="bigred"> ✖ ✖ ✖ </p>
</section>

<section class="kader-guldensnede">
  <h3>Lorem ipsum dolor sit</h3>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque.</p>

  <p class="bigred"> ✖ ✖ ✖ </p>
</section>

<section class="kader-guldensnede">
  <h3>Lorem ipsum dolor</h3>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus et leo eget tellus hendrerit scelerisque.</p>

</section>

Afbeeldingen in verhouding maken met Gulden Snede

Voor catalogi en portfoliowebsites ben ik vaak tegen het probleem aangelopen dat staande afbeeldingen veel te groot worden als je ze even breed maakt als liggende (oblong) afbeeldingen. Je ziet op een liggend desktop scherm nooit de hele afbeelding in 1 keer. De onderkant verdwijnt onder de vouw van je beeldscherm.

Daarom heb ik deze truc uitgevonden. Maak de staande afbeeldingen 0.618 keer zo breed als de liggende afbeeldingen.

• Afbeelding 1200px breed
• Afbeelding 742px staand (1200px X 0,618)

Dit werkt in de praktijk heel goed. In het voorbeeld hieronder dat ik heb gemaakt zie je dat de staande en liggende afbeeldingen optisch mooi in balans zijn: