Creatieve voorbeelden van geometrische webontwerpstijlen

Iets dat zijn aanwezigheid tegenwoordig op het web bekend maakt, is het gebruik van gemeenschappelijke geometrische patronen die we allemaal op de basisschool hebben geleerd. Veelhoeken, ruiten, rechthoeken, driehoeken en af ​​en toe een ruit vormen allemaal een integraal onderdeel van modern webdesign. Dus hoe komt dit wiskundeonderwerp van de 10e klas uiteindelijk overeen met de manier waarop websitebezoekers consumeren en zich bezighouden met online-inhoud?

Geometrie (ten minste de Euclidische variëteit) wordt gedefinieerd door rechte lijnen, rechte hoeken en de onregelmatige cirkelvormige kromming. Deze vormen, met name cirkels en rechthoeken, domineren het webontwerp sinds zijn vroegste conceptie. Elk standaardraster is rechthoekig en het was op een bepaald moment zeer zeldzaam om een ​​knop of link in een andere vorm te zien. Onlangs is het echter populair geworden om meer exotische vormen op te nemen als achtergronden, logo's, inhoudsblokken en een aantal andere elementen op de pagina.

Geometrische vormen worden voornamelijk op drie verschillende manieren in de praktijk gebracht:

  • Navigatie: waarbij een vorm fungeert als een knop die linken naar een andere pagina in de website.
  • framing: waarbij een vorm dient als een container voor belangrijke stukken inhoud, zoals tekst of afbeeldingen.
  • Visueel effect: waarbij een atypische vorm wordt gebruikt voor het diversifiëren of verfraaien van de esthetiek van de webpagina en / of toepassing.

In elk geval is het gebruik van een ongebruikelijk, of op zijn minst zeldzaam gebruikt geometrisch element bedoeld om de aandacht te vestigen op het element zelf, of op inhoud die zich in of rond het element bevindt. Ontwerpers implementeren geometrische patronen om de visuele uniformiteit van de site zelf te doorbreken.

Vorm Betekenis en Gebruik

Over het algemeen hebben vormen hun eigen speciale gebruik en betekenis. Dit kan richting geven voor de juiste tijd en plaats om bepaalde vormen voor een definitief doel te gebruiken. De enige algemene richtlijnen voor het gebruik van verschillende soorten vormen zijn de volgende:

Vierkanten en rechthoeken

Rechthoekige vormen staan ​​voor stabiliteit. Ze zijn vertrouwd en betrouwbaar en geven de indruk van eerlijkheid, formaliteit en rationaliteit. Ze zijn veruit het meest voorkomende geometrische patroon.

cirkels

De cirkel heeft een bijna mystieke kwaliteit, omdat deze geen begin of einde heeft. Heel erg zoals het cijfer dat wordt gebruikt om zijn omtrek te berekenen, Pi, de cirkel is in wezen oneindig. Ze suggereren een uitgebreide kwaliteit of volheid. Vaak geïdentificeerd als vrouwelijk, kunnen cirkels geruststellende, sympathieke vormen zijn die gebruikers herinneren aan harmonie, liefde en perfectie.

driehoeken

Driehoeken worden vaak beschouwd als de "sterkste" geometrische vorm in ontwerp zin. Ze worden gebruikt om actie en agressie aan te geven. Ze kunnen de aandacht vestigen in de richting waarin ze wijzen en kunnen representatief zijn voor de voortgang en het doel.

Ruit

De Rhombus is een diamantvorm, gedefinieerd door diagonale lijnen. Ze kunnen worden gebruikt om een ​​ontwerp er levendiger, actiever en hedendaagser uit te laten zien.

Hexagons

Zeshoeken zijn zeszijdige vormen die eenheid en balans communiceren. Vaak geassocieerd met honingraten, wat duidt op samenwerking tussen individuen, zijn zeshoeken een veel voorkomende trend geworden onder websites voor technische bedrijven.

Geometrische Web Design Showcase

Nu u vertrouwd bent geraakt met de verschillende soorten vormen en wat ze vertegenwoordigen, laten we enkele voorbeelden van geometrisch ontwerp in de vitrine van vandaag bekijken. We zullen elf verschillende voorbeelden van geometrisch webontwerp onderzoeken en enkele belangrijke opmerkingen maken over de verschillende manieren waarop specifieke patronen worden geïmplementeerd.

Isaac-Katz

Ons eerste voorbeeld van geometrisch ontwerp is heel subtiel. Een geïnspireerde en visceraal aantrekkelijke website van beeldend kunstenaar Isaac Katz.

Om het adembenemende werk dat Katz produceert te weerspiegelen, gebruikten de ontwerpers geometrische pictogrammen om de navigatie onderaan het scherm te decrypteren en asymmetrische afbeeldingen die dienen als materiële achtergronden voor tekst op de pagina.

Door geometrische patronen te gebruiken om aan te geven welke elementen klikbaar of nuttig zijn, creëert het ontwerp een visuele hiërarchie die universeel eenvoudig te begrijpen is voor een diverse groep websitebezoekers.

Ultra Design Agency

Ontwerpbureau Ultra implementeert een beslist andere kijk op de traditionele schuifregelaar, met behulp van een schildachtige pentagon, gelaagd en gereflecteerd om draaiende blokken met inhoud weer te geven. 

Dit vertegenwoordigt een combinatie van trends: geometrie en subtiele animaties. Samen gebruiken is een krachtige manier om de aandacht te trekken en de betrokkenheid van gebruikers te vergroten.

Nogmaals, dit laat zien hoe effectief geometrische patronen kunnen zijn in een kaderend vermogen. Bovendien fungeert de onderkant van de vijfhoek als een pijl, waardoor gebruikers worden aangemoedigd om onder de vouw te scrollen.

Monument Valley (mobiel spel)

Het zijn niet alleen websites die kunnen profiteren van een geometrisch zwaar ontwerp. Bekroond mobiel spel, Monument Valley, is een visuele en viscerale traktatie om te doorkruisen. 

Het puzzelspel lijkt meer op een compendium van kunstwerken dan op een afleidende iPhone-app, en de geometrische perfectie van het ontwerp is alleen verantwoordelijk voor die indruk.

Buffalo Design Agency

Digital agency, Buffalo, maakt gebruik van een zeshoekige woordwolkstructuur om recente projecten op een eigenzinnige en opvallende manier te presenteren. 

Door gebruik te maken van zowel de frame- als navigatiecapaciteiten is elke zeshoek in Buffalo's geometrische woordwolk aanklikbaar. Eenmaal geklikt, verwijst elk pictogram de gebruiker om naar een bijbehorende pagina die een ander portfolio-item beschrijft.

We Love Noise

Overtallige beweging en subtiele visuele geometrische constructies bepalen de stijl van het multidisciplinaire ontwerpbureau We Love Noise

Muisbewegingen verschuiven het scherm drastisch en tonen een aantal rechthoekige en ronde iconen die elk verwijzen naar een ander project. Het effect kan schokkend zijn, maar het is toch adembenemend.

Mokhtar Saghafi

Ontwerper Mokhtar Saghafimaakt gebruik van een aantrekkelijke combinatie van geometrie en kleur om zijn portfolio-pagina weer te geven. Verschillende schuine rechthoekige en ruitvormige patronen vormen zowel achtergrond als initialen over de top van een prachtig natuurlijk landschap.

Het parallax-scrolleffect dat de achtergrondafbeeldingen bedekt, is ook een lust voor het oog en de diagonale lijnen die overal worden gebruikt, creëren een gevoel van dynamiek en elektrische activiteit. De gebruiker wordt aangemoedigd om de site te verkennen zonder precies te weten waarom. Dit is een fantastisch voorbeeld van het "onzichtbare ontwerp" -principe. Het totale effect is uiterst onderscheidend en biedt zeker een goed argument voor zijn talenten.

De moedige

Parallax scrollen, geometrie en een gezonde dosis houding combineren om een ​​wonderbaarlijke driedimensionale visuele traktatie te vormen De moedige de homepage van digital agency. 

Door het gebruik van ontelbare driehoeken geeft de interactieve en gelaagde achtergrond een indruk van diepte die de website echt doet knallen in de ogen van de bezoeker.

Boombotix

Boombotix is ​​een draagbare bluetooth-luidspreker en het is toevallig ook zeshoekig van vorm. Misschien een slimme zet van zijn ontwerpers, aangezien we al hebben besproken hoe zeshoeken hand in hand gaan met geavanceerde technische producten. 

Bovendien komt het ontwerp van de site overeen met dat van het product. Scherpe diagonale lijnen fungeren als frame-apparaten en visuele aanwijzingen waar u ook naartoe navigeert. Combineer dit met gladde animaties geactiveerd terwijl je bladert, en je hebt een opvallende etalage voor een intrigerend product.

450 gsm

Afdrukservice 450GSM heeft een eCommerce-site die de compatibiliteit van de platte en geometrische ontwerptrends echt laat zien. De belangrijkste illustratie is een origami-achtig beeld dat is opgebouwd uit kleinere driehoekige vormen. De enige andere afbeelding op de pagina bestaat uit rechthoeken en een enkele (in de knoppen en het logo).

Elke vorm dient om het oog weg te trekken van de overvloedige negatieve ruimte die door het scherm doordringt. Het slimme gebruik van diagonale lijnen in de origami-vogel bouwt spanning op en wijst de gebruiker naar zowel de CTA als de aanvullende inhoud die zich onder de vouw bevindt.

Akaru

De uitwerking van onze galerij is de geanimeerde website van een digitaal bureau Akaru

Deze website combineert veel van de eerder besproken elementen in onze lijst en vormt een fantastisch geometrisch smorgasbord voor de zintuigen. Driehoeken, rechthoeken en zelfs zeshoekige wolken vormen een onvergetelijke indruk in de geest van de bezoeker terwijl ze door de zeer boeiende website scrollen.

Conclusie

Aldus concludeert onze review van populaire geometrische patronen binnen modern webdesign! Nu de theorie is uitgelegd en je enkele praktische toepassingen hebt gezien van de drie primaire gebruiken van geometrische patronen in actie, zul je je misschien meer op je gemak voelen om te experimenteren met geometrie in je eigen ontwerpen.

Welke andere voorbeelden van geometrisch ontwerp hebben indruk op u gemaakt of hebben u versteld doen staan? Geluid uit in de commentaarsectie hieronder!