Hogeschool Utrecht Faculteit Communicatie en Journalistiek Padualaan 99, 3512 CH Utrecht Periode B - 2014/15 Specialisatie: Visual design Docent: Dick Swart Het nut van de gulden snede in webdesign Bram Valentijn CMD - JDE-VISD-1 Studentnr. 1603613 bram.valentijn@student.hu.nl
1. Inleiding Al sinds mijn tienerjaren ben ik gefascineerd geraakt door de gulden snede en de verschillende theorieën hierover. Vandaar dat ik als interactief vormgever onderzoek ben gaan doen over de toepasbaarheid van de gulden snede in webdesign. Kan deze bijzondere verhouding een meerwaarde bieden met betrekking tot websites of zou dit juist een belemmering kunnen vormen? Om deze vraag te beantwoorden zijn de volgende deelvragen gesteld: - Wat is de gulden snede? - In hoeverre komt de gulden snede voor? - Welk doel heeft de toepassing van de gulden snede in webdesign? - Hoe is de gulden snede toe te passen in webdesign? - In hoeverre wordt de gulden snede in webdesign toegepast? Naar aanleiding van de resultaten van deze deelvragen kan er antwoord gegeven worden op de hoofdvraag: Hoe relevant is het gebruik van de gulden snede met betrekking tot webdesign?
2. Resultaten 2.1 Wat is de gulden snede? De gulden snede, in het Engels golden ratio genoemd, is de opdeling van een lijnstuk, oppervlak of cirkel in twee ongelijke delen. Deze lijnstukken zijn zo opgedeeld dat de verhouding tussen het grootste lijnstuk en het kleinste lijnstuk gelijk is aan de verhouding tussen de hele lijn en het langste stuk. Door de formule a : b = (a+b) : a toe te passen, ontstaat verhouding van 1 : 1,618 (zie fig. 1). Dit getal wordt phi (φ) genoemd en is net zoals pi (") een irrationaal getal. Irrationale getallen kunnen alleen uitgedrukt worden in een eindeloze reeks decimalen die nooit stoppen en ook nooit gaan repeteren zoals bij rationale getallen. Deze gulden snede kan gebruikt worden om een gulden rechthoek te maken. Als we in de gulden rechthoek een vierkant tekenen, is de kleinere rechthoek die overblijft opnieuw een gulden rechthoek. Door dit proces met de steeds kleiner wordende rechthoeken te herhalen ontstaat een gulden spiraal die in oneindigheid kan worden verkleint of vergroot (zie fig. 2). Fig. 1: Formule gulden snede Fig. 2: Gulden rechthoek met spiraal
De formule om een lijnstuk volgens de gulden snede te verdelen is al rond het jaar 300 v.chr. voor het eerst te lezen in Elementen, een meetkundig en rekenkundig verzamelwerk van de wiskundige Euclides. Daar wordt de gulden snede gedefinieerd als extreme en gemiddelde verhouding. In de 16e eeuw herontdekt de wiskundige Luca Pacioli de gulden snede en schrijft er over in zijn De Divina Proportione. Hij noemt het de goddelijke verhouding. Het geschrift bevat illustraties van zijn leerling Leonardo da Vinci. Pas omstreeks 1830 wordt de term gulden snede voor het eerst gebruikt in een boek van Duits wiskundige Martin Ohm.
2.2 In hoeverre komt de gulden snede voor? Er wordt beweerd dat de gulden snede al in de oudheid werd toegepast in architectuur. De Grieken zouden de gulden snede bijvoorbeeld gebruikt hebben om het Parthenon te bouwen. Echter is er geen enkel bewijs dat de Grieken de gulden snede hebben toegepast. Ook is het eenvoudig om achteraf de gulden rechthoek over een afbeelding te plaatsen en die zo te schuiven dat het lijkt alsof een oppervlakte wel degelijk de gulden snede bezit. Tevens hebben veel afbeeldingen die over de gulden snede in het Parthenon gaan, een dikke lijn over de randen van het bouwwerk die de gulden snede weergeeft. Als deze lijnen geschaald zouden worden naar de originele grootte van het Parthenon, zullen de lijnen wel enkele centimeters dik zijn. Deze manier van onderbouwen dat een oppervlakte de gulden snede bezit is niet accuraat genoeg (zie fig. 3). Ook in veel moderne gebouwen zoals het UN Secretariat Building in New York, zou de gulden snede toegepast zijn. Dit is niet waar. Heel weinig architecten hebben de gulden snede daadwerkelijk ingezet in hun bouwwerken. Een uitzondering is de Fransman Le Corbusier. Hij gebruikte de verhouding puur als experiment uit zijn fascinatie voor wiskunde. Fig. 3: Parthenon met de gulden snede
Een andere theorie die veel aandacht krijgt is de voorkomendheid van de gulden snede in kunst. Boticelli, Leonardo da Vinci, Georges Seurat en vele andere artiesten zouden de gulden snede hebben gebruikt in hun werk. Deze bewering is onjuist. Met een complex schilderij is het gemakkelijk om achteraf ergens een gulden snede in te zien. Overigens zijn er nog nooit annotaties gevonden bij Boticelli, da Vinci en Seurat waarbij uit te halen is dat zij daadwerkelijk de gulden snede zouden hebben gebruikt in hun schilderijen. Er zijn maar weinig kunstenaars die de gulden snede echt hebben toegepast. Deze artiesten zoals Salvador Dalí deden dit als experiment en niet uit intrinsieke esthetische redenen. Verscheidene componisten zoals Mozart, Debussy en Bartok zouden de gulden snede ook hebben toegepast in hun muziekstukken. Eveneens zijn hier nooit aantekeningen van gevonden die deze theorie zou kunnen onderbouwen. Er is geen enkel bewijs dat Mozart en Bartok de gulden snede gebruikt zouden hebben. Alleen zijn er uit enkele composities van Debussy af te leiden, dat dat deze musicus wel degelijk zou hebben geëxperimenteerd met de gulden snede. In de natuur schijnt de gulden snede ook veel voor te komen. Zo is er de Nautilus schelp die eigenlijk als het boegbeeld voor de gulden snede wordt gezien. Deze schelp zou de groeifactor van de gulden snede bezitten. Deze veronderstelling is incorrect. De Nautilus heeft wel een logaritmische groeifactor. Ook wordt er beweerd dat de gulden snede in de vorm van de Fibonacci-reeks voorkomt in veel verschillende planten. Dit is in zekere zin waar, maar lang niet alle planten bezitten deze verhouding. Een voorbeeld van een plant waarbij de gulden snede wel is te vinden, is de zonnebloem. Zo nu en dan zijn de zaden van de zonnebloem geordend in de Fibonacci-reeks. Door deze manier van rangschikken kan de bloem in het hart de meeste zaden kwijt. Hoe meer zaden, hoe groter de kans op een succesvolle voortplanting. In wiskundige vormen zoals een pentagon, pentagram en fractals komt de gulden snede wel degelijk voor.
2.3 Welk doel heeft de toepassing van de gulden snede in webdesign? Er wordt verondersteld dat mensen een voorkeur hebben voor de gulden snede ten opzichte van andere verhoudingen. Dit komt doordat de proportie als organisch, universeel, harmonisch en esthetisch wordt beschouwd. Door deze eigenschappen zou een website gestructureerd en aangenaam aan kunnen voelen voor de gebruiker. In de loop der jaren zijn er verschillende onderzoeken gehouden over de gulden snede op esthetisch gebied. De eerste experimenten zijn gehouden door psycholoog Gustav Theodor Fechner rond 1865 waarbij hij tien rechthoeken in verschillende verhoudingen liet zien aan respondenten. De proefpersonen werden gevraagd om de meest aantrekkelijkste rechthoek te selecteren. Uit het resultaat bleek dat 76% procent van de personen een voorkeur hadden voor de verhoudingen in de buurt van de gulden snede en 35% daadwerkelijk de gulden snede prefereerden. Veel wetenschappers hebben later soortgelijke onderzoeken uitgevoerd en verkregen tegenstrijdige resultaten ten opzichte van Fechner. De aantrekkelijkheid van de gulden snede wordt in talloze studies bevonden als significant, insignificant of ergens tussenin, elk met een andere conclusie. Door het gebrek aan overtuigend bewijs over de esthetiek van de gulden snede, blijft de aanname over de gulden snede als meest aantrekkelijkste verhouding nog steeds een onderwerp van discussie.
2.4 Hoe is de gulden snede toe te passen in webdesign? Tegenwoordig is bijna iedere website opgebouwd met behulp van een grid. Dit helpt het structureren van content op de site en kan zorgen voor een harmonie tussen de verschillende visuele elementen. Er bestaat een mogelijkheid om een grid in de vorm van de gulden snede op te zetten. De meest eenvoudige wijze om de gulden snede in een website te verwerken is door horizontaal een twee-koloms lay-out te maken waarbij een vlakverdeling ontstaat in de verhouding 1 : 1,618. Bijvoorbeeld door een website met een vaste breedte van 960px te delen door 1,618 ontstaat er een afmeting van ongeveer 593px. Deze maat kan gebruikt worden voor het content gedeelte. 367px is de resterende maat die verkregen wordt wanneer 960px minus 593px wordt gedaan. Dit vlak kan fungeren als sidebar (Zie fig. 4). Deze methode kan ook verticaal toegepast worden in een lay-out wanneer de website een vaste hoogte heeft. Verder kan de gulden snede bij meerdere elementen op de website gebruikt worden zoals in typografie. Fig. 4: Toepassing van de gulden snede in webdesign
Door de toename van nieuwe browsers en devices waarmee websites bezocht worden, is er een behoefte naar een website waarbij de content wordt aangepast naar de schermgrootte van het betreffende apparaat. Het vergt veel tijd en vaardigheden van de webdeveloper om dezelfde verhouding op alle beeldschermen gelijk te houden. Dit komt door de vele variabelen die een webdesign met zich mee brengt.
2.5 In hoeverre wordt de gulden snede in webdesign toegepast? Er is een empirisch onderzoek gehouden naar de voorkomendheid van de gulden snede in goed- en slecht beoordeelde websites uit het jaar 2014. Het doel van deze proef was om in te zien of de gulden snede in het hedendaagse webdesign veel voor zou komen en of er een correlatie bestaat tussen goed beoordeelde websites en de gulden snede. Op deze manier kan er een conclusie getrokken worden of het gebruik van de gulden snede met betrekking tot webdesign een meerwaarde kan bieden. De websites die zijn onderzocht, zijn beoordeeld via Awwwards, een platform waar juryleden en gebruikers ingezonden websites kunnen beoordelen. De jury geeft een cijfer van 1 tot 10 op basis van het ontwerp, creativiteit, de gebruiksvriendelijkheid en inhoud van de site. De juryleden bestaan uit belangrijke ontwerpers, bloggers en bedrijven. Met het onderzoek is er gekeken naar websites die goed en slecht werden beoordeeld op het gebied van ontwerp. De proef is uitgevoerd door het maken van screenshots van de betreffende websites waarbij vervolgens een meetinstrument over de lay-out is geplaatst om een eventuele gulden snede verhouding te constateren. Er zijn screenshots gemaakt in verschillende beeldverhoudingen om te bepalen of de verhoudingen zich niet permitteren tot een enkele schermgrootte. Het aantal onderzochte websites bedraagt 10 goed beoordeelde websites en 10 slecht beoordeelde websites. Uit het onderzoek is gebleken dat de gulden snede niet veel voorkomt in zowel goed als slecht beoordeelde websites. Tweemaal is de gulden snede gevonden. Eenmaal in een goed beoordeelde website en eenmaal in een slecht beoordeelde website (zie fig.5 en fig. 6).
Fig. 5: Goed beoordeelde websites (7,5 en hoger) Nr. Naam URL Bezit gulden snede 1 DAN Paris www.danparis.fr Nee 2 Risotteria Melotti www.risotteriamelottinyc.com Nee 3 G-Star RAW www.g-star.com Nee 4 Space Style Concept www.spacestyleconcept.com Nee 5 V76 www.v76.com Nee 6 Cantina Negrar www.cantinanegrar.it Nee 7 Locomotive www.locomotive.ca Nee 8 Elespacio www.elespacio.net Nee 9 Stopka www.stopka.cz Nee 10 Post Planjer www.postplanjer.nl Ja Fig. 6: Slecht beoordeelde websites (5,5 en lager) Nr. Naam URL Bezit gulden snede 1 INFORMisson Weekly www.informissionweekly.com Nee 2 Visuelcrea www.visuelcrea.com Nee 3 Dhub www.dhub.com Nee 4 Infinity Technologies www.infinitytechnologies.com.au Nee 5 Graftik www.graftik.lv Nee 6 Madinks www.madinks.ie Nee 7 Silver Fox Productions www.silverfoxprod.com Nee 8 Solutis www.solutis.fr Nee 9 Rafael Lüder www.rafael-lueder.com Ja 10 Oi www.oi-you.com Nee
3. Conclusie Naar aanleiding van de resultaten die uit het onderzoek zijn gekomen, is er een antwoord te geven op de vraag of het gebruik van de gulden snede relevant genoeg zou kunnen zijn met betrekking tot websites. Het onderzoek dat is gehouden naar de gulden snede in goed- en slecht beoordeelde websites heeft aan kunnen tonen dat het gebruik van deze verhouding niet veel wordt toegepast in het hedendaagse webdesign. Ook is er geen verband te vinden of een gulden snede invloed heeft op een goede beoordeling van een website. Verschillende wetenschappelijke studies onderbouwen het feit dat de gulden snede geen bovenmatige aantrekkelijkheid heeft ten opzichte van andere verhoudingen. Tevens is het technisch ingewikkeld om de gulden snede op een goede wijze te implementeren in een website. Het vergt veel tijd en vaardigheden van de webdeveloper om de gulden snede verhouding op alle beeldschermen gelijk te krijgen. Dit komt door de vele variabelen die een website met zich mee brengt. Ondanks de vele misvattingen over de voorkomendheid en aantrekkelijkheid van de gulden snede blijft het een interessante verhouding op wiskundig vlak. Echter kan er geconcludeerd worden dat de toepassing van de gulden snede geen meerwaarde biedt voor een ontwerper om deze verhouding in te zetten in webdesign.
4. Literatuur Bradley, S. (2011) How to Use Golden Section Proportions In Your Designs, Geraadpleegd op 22 december 2014 via www.vanseodesign.com/web-design/golden-sectionproportions Devlin, K. (2007) The Myth That Will Not Go Away, Mathematical Association of America. Devlin, K. (2011) The Man of Numbers: Fibonacci's Arithmetic Revolution, Walker & Company. Green, C. (1995) All that glitters: a review of psychological research on the aesthetics of the golden section, York University. Livio, M. (2002) The golden ratio and aesthetics, University of Cambridge. Livio, M. (2008) The Story of Phi, the World's Most Astonishing Number, Paw Prints. Markowsky, G. (1992) Misconceptions about the Golden Ratio, Mathematical Association of America.