Gulden Snede ontwerp WordPress webdesign

De gulden snede is waarschijnlijk het best te begrijpen als de verhouding 1:1,618. Natuurlijk, de wiskundige vergelijking is bruikbaar voor webdesign.

Logo cursus traing wordpress

Gulden Snede ontwerp WordPress webdesign

Wat is de Gulden Snede?

De Gulden Snede is een natuurlijke 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)


afmetingen in pixels (afgerond):
1
2
3
5
8
13
20
32
52
85
135
220 (4x 220 + 20 pixels margin = 940 exact
360
580
940
1520
2460

afmetingen in pixels (exact):
x
x
2.91
4.71
7.63
12.35
19.99
32.36
52.36
84.73
137.11
221.86
359.00
580.92
940
1520.92
2460.84

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 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:

Lorem ipsum dolor sit amet

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

""

✖ ✖ ✖

Lorem ipsum dolor sit

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

✖ ✖ ✖

Lorem ipsum dolor

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

Afbeeldingen in verhouding maken met Gulden Snede

Voor catalogi en portfoliowebsites ben ik vaak tegen het probleem aangelopen dat staande 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:

verhouding staande liggende afbeeldingen gulden snede
verhouding staande liggende afbeeldingen met behulp van de gulden snede

Meer informatie over Gulden Snede ontwerp WordPress webdesignof info?

Wil je meer informatie? Veel bezoekers met interesse in Gulden Snede ontwerp WordPress webdesign bekeken ook de onderstaande handleidingen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website of webshop beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over Gulden Snede ontwerp WordPress webdesign

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Gulden Snede ontwerp WordPress webdesign en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven