Share
De gulden snede wordt gebruikt in allerlei grafische lay-outs, vooral om inhoud die zwaar is te balanceren. Het kan ontwerpers helpen bij het maken van een hiërarchie en de ogen van gebruikers op specifieke gebieden richten. Bekijk de volgende website voorbeelden en zie hoe ontwerpers er gebruik van maken!
De gulden snede is een wiskundige verhouding, vaak gevonden in de natuur, en gebruikt in de klassieke ontwerptheorie om uitgebalanceerde composities te creëren. Het komt grofweg overeen met 1.6180, is ook bekend als de "Gulden snede", de "Gouden Sectie", en wordt aangeduid door de Griekse letter Phi "φ".
Een "Gouden rechthoek" is een rechthoek waarvan de lengte 1,66180 keer de breedte is. Bijvoorbeeld a div die een kant van 300px heeft en een ander van 300 * 1.6180 ≈ 485px kan een gouden rechthoek zijn.
Als je een perfect vierkant uit deze gouden rechthoek hakt, blijft er nog een gouden rechthoek over.
Je kunt hetzelfde doen voor de kleinere rechthoek, daarna hetzelfde opnieuw, voor onbepaalde tijd, waardoor je dit vertrouwde beeld krijgt:
De Fibonacci-reeks is vergelijkbaar met de gulden snede, maar niet precies zo. Het is een reeks getallen waarbij het volgende getal in de reeks de som is van de vorige twee. Bijvoorbeeld: 0, 1, 1, 2, 3, 5, 8
Als we beginnen met een perfect vierkant, dan toevoegen aan een ander krijgen we een rechthoek:
Blijf vierkanten over de langste lengte toevoegenDan voegen we nog een vierkant toe, gelijk aan de langste lengte van de totale vorm:
Dan opnieuw en opnieuw:
Dit kan oneindig doorgaan, wat ons hetzelfde effect geeft als onze Gouden Rechthoek, maar deze keer opbouwt in plaats van te hakken. Zowel de gulden snede als de Fibonacci-reeks geven ons vergelijkbare aantrekkelijke proporties.
Laten we nu een paar websites analyseren waar we ze in actie kunnen zien.
yourlocalstudio.dk"Your Local Studio" is een ontwerp- en ontwikkelstudio gevestigd in Kopenhagen, Denemarken. Ze zijn gespecialiseerd in het werken met visuele concepten in welke vorm dan ook om ervaringen te creëren die de omgeving verbeteren.
De website gebruikt hier de gulden middenweg voor twee van de drie pagina's. De startpagina is een conceptueel overzicht van belangrijke stukken werk. Wanneer u de studiopagina bezoekt, wordt echter een beetje van de traditionele weblay-out gemengd met rechthoekige gouden rechthoekige vormen terwijl u de pagina afrolt.
Wil je opvallen in de menigte? Yourlocalstudio (YLS) heeft dat gedaan door de gulden snede in hun websiteontwerp te gebruiken. Het ontwerp heeft een progressief uiterlijk met een duidelijk rastersysteem. Je zou kunnen zeggen dat deze dagen ealles ziet eruit als bootstrap... let op steeds meer sites die de aandacht proberen te trekken met een meer structureel dynamische lay-out.
mashable.comMashable is een nieuwswebsite; een bron van informatie, kennis en middelen voor de "verbonden generatie".
Ik heb de Golden Ratio-test van UX-triggers gebruikt om te laten zien hoe Mashable de Fibonacci-reeks in de lay-out gebruikt. De lay-out van de inhoud is flexibel, met de kop naar links en links naar meer nieuws aan de rechterkant, gescheiden door de rasters.
De Gulden Snede is hier van toepassing, omdat het een zeer inhoudgerichte site mogelijk maakt om typografie te geven ademruimte. Soortgelijke sites lijken misschien dichter opeengepakt met inhoud, gebruik makend van traditionele grid lay-outs, maar Mashable laat zien dat de Gulden Snede effectief kan zijn, zelfs als het onzichtbaar is.
www.jandk.frJackson & Kent is een webproductiebureau uit Frankrijk. Ze zijn gespecialiseerd in digitale diensten zoals HTML5, CSS3, Drupal, Wordpress, PHP / MySQL, Flash enz..
De bovenstaande schermafbeelding toont hoe de lay-out grotendeels bestaat uit eerder werk van klanten. Het bevat ook een blok met inhoud over het bureau zelf en een navigatiebalk in het midden van het scherm. De contactknop, zoals hieronder weergegeven, gebruikt ook de gulden snede als een rastersysteem om de lay-out op een unieke manier te ordenen.
Het voorbeeld hier moedigt u aan om door de website te pannen en de inhoud horizontaal te verkennen. Het gerasterde aanzicht en blokken met verschillende afmetingen maken de inhoud visueel interessanter. Aangezien gebruikers waarschijnlijk de inhoud op een desktop (evenals in een tablet) zullen bekijken, zijn er paginanummers bij de navigatie op de horizontale as. Dit is een innovatieve manier om elk stukje inhoud te bekijken, maar ook de gebruikersinterface als geheel.
De gulden snede leidt natuurlijk het oog van de gebruiker naar specifieke punten binnen een gebruikersinterface. Als concept kan het u helpen na te denken over het plaatsen van inhoud en het effectief gebruiken van hiërarchie. De combinatie van lay-out, typografie, kleur en overkoepelende principes helpt u uw ontwerpen naar een hoger niveau te tillen.
Accentsconagua