Esempi creativi di stili di progettazione Web geometrica

Qualcosa che rende nota la sua presenza sul web in questi giorni è l'uso di schemi geometrici comuni che tutti abbiamo appreso nella scuola elementare. Poligoni, diamanti, rettangoli, triangoli e occasionali rombi sono tutti parte integrante del moderno web design. In che modo questo tema matematico del decimo grado finisce per influenzare il modo in cui i visitatori del sito web consumano e interagiscono con i contenuti online?

La geometria (almeno la varietà euclidea) è definita da linee rette, angoli retti e curvatura circolare poco frequente. Queste forme, in particolare cerchi e rettangoli, hanno dominato il web design sin dalla sua prima concezione. Ogni griglia standard è rettangolare ed è stato un tempo molto raro vedere un pulsante o un collegamento in qualsiasi altra forma. Recentemente, tuttavia, è diventato popolare incorporare forme più esotiche come sfondi, loghi, blocchi di contenuti e una serie di altri elementi in-page.

Le forme geometriche vengono principalmente messe in pratica in tre modi distinti:

  • Navigazione: in cui una forma funge da pulsante che si collega a una pagina diversa nel sito web.
  • Framing: in cui una forma funge da contenitore per pezzi importanti di contenuto come testo o immagini.
  • Effetto visivo: in cui una forma atipica viene utilizzata per diversificare o abbellire l'estetica della pagina web e / o dell'applicazione.

In ogni caso, l'uso di un elemento geometrico insolito o almeno usato raramente è inteso a richiamare l'attenzione sull'elemento stesso o sul contenuto contenuto all'interno o attorno all'elemento. I progettisti implementano schemi geometrici per rompere l'uniformità visiva del sito stesso.

Significato e uso della forma

In generale, le forme hanno il loro uso e significato speciale. Questo può dare una direzione per il momento e il luogo giusto per usare certe forme per uno scopo definitivo. Le linee guida generali per l'utilizzo di diversi tipi di forme sono le seguenti:

Piazze e rettangoli

Le forme rettangolari rappresentano la stabilità. Sono entrambi familiari e affidabili, dando l'impressione di onestà, formalità e razionalità. Sono di gran lunga il modello geometrico più comune.

Circles

Il cerchio ha una qualità quasi mistica, poiché non ha né inizio né fine. Molto simile al numero usato per calcolare la sua circonferenza, Pi, il cerchio è essenzialmente infinito. Suggeriscono una qualità completa o pienezza. Spesso identificati come femminili, i cerchi possono essere forme confortanti e simpatiche che ricordano agli utenti l'armonia, l'amore e la perfezione.

triangoli

I triangoli sono spesso considerati la forma geometrica "più forte" in senso progettuale. Sono usati per indicare azione e aggressività. Possono attirare l'attenzione nella direzione in cui puntano e possono essere rappresentativi della progressione e dello scopo.

Rombo

Il rombo è una forma a rombi, definita da linee diagonali. Possono essere utilizzati per creare un aspetto di design e sentirsi più vivaci, attivi e contemporanei in natura.

esagoni

Gli esagoni sono forme a sei facce che comunicano unità ed equilibrio. Spesso associati ai nidi d'ape, suggerendo la cooperazione tra individui, gli esagoni sono diventati una tendenza comune tra i siti Web delle imprese tecnologiche.

Vetrina geometrica di web design

Ora che hai acquisito una familiarità passeggera con i diversi tipi di forme e ciò che rappresentano, diamo un'occhiata ad alcuni esempi di design geometrico nella vetrina di oggi. Esamineremo undici diversi esempi di web design geometrico e faremo alcune osservazioni importanti sui diversi modi in cui sono implementati schemi specifici.

Isaac-Katz

Il nostro primo esempio di design geometrico è molto sottile. Un sito web ispirato e visceralmente coinvolgente dall'artista visuale, Isaac Katz.

Per rispecchiare il lavoro mozzafiato prodotto da Katz, i progettisti hanno utilizzato icone geometriche per scovare la navigazione nella parte inferiore dello schermo e una grafica asimmetrica che funge da sfondi materiali per il testo sulla pagina.

Utilizzando schemi geometrici per indicare quali elementi sono cliccabili o utili, il design crea una gerarchia visiva che è universalmente facile da comprendere tra un gruppo eterogeneo di visitatori del sito web.

Ultra Design Agency

Agenzia di design Ultra implementa una presa decisamente diversa sul cursore tradizionale, utilizzando un pentagono simile a uno scudo, stratificato e riflesso per visualizzare blocchi di contenuti rotanti. 

Questo rappresenta una combinazione di tendenze: geometria e animazioni sottili. L'utilizzo di entrambi insieme è un modo efficace per attirare l'attenzione e aumentare il coinvolgimento degli utenti.

Ancora una volta, questo mostra come i modelli geometrici efficaci possono essere in una capacità di inquadratura. Inoltre, il fondo del pentagono agisce come una freccia, incoraggiando gli utenti a scorrere sotto la piega.

Monument Valley (gioco mobile)

Non sono solo i siti Web che possono beneficiare di un design dalla geometria pesante. Il pluripremiato gioco mobile, Monument Valley, è un piacere visuale e viscerale da attraversare. 

Il puzzle game assomiglia più a un compendio di opere d'arte che a un'app distratta per iPhone, e la perfezione geometrica del suo design è la sola responsabile di quell'impressione.

Buffalo Design Agency

L'agenzia digitale, Buffalo, utilizza una struttura a forma di nuvola a forma di esagono per mostrare i progetti recenti in modo bizzarro e sorprendente. 

Sfruttando le capacità di inquadratura e navigazione, ogni esagono nella nuvola di parole geometrica di Buffalo è cliccabile. Una volta cliccato, ogni icona reindirizza l'utente a una pagina corrispondente che descrive una voce diversa del portfolio.

We Love Noise

Il movimento eccessivo e i sottili costrutti geometrici visivi definiscono lo stile dell'agenzia di progettazione multidisciplinare We Love Noise

I movimenti del mouse spostano drasticamente lo schermo, mostrando un numero di icone rettangolari e circolari che si collegano a un progetto diverso. L'effetto può essere stridente, ma è comunque sorprendente.

Mokhtar Saghafi

Designer Mokhtar Saghafiusa una combinazione accattivante di geometrie e colori per visualizzare la sua pagina del portfolio. Vari motivi a forma di rettangolo e rombo inclinati formano sia lo sfondo che le iniziali sulla cima di uno splendido paesaggio naturale.

Anche l'effetto di scrolling parallasse che ricopre le immagini di sfondo è piacevole alla vista e le linee diagonali utilizzate creano un senso di dinamismo e attività elettrica. L'utente è incoraggiato ad esplorare il sito senza sapere esattamente perché. Questo è un fantastico esempio del principio del "disegno invisibile". L'effetto complessivo è estremamente distintivo e certamente fornisce una buona causa per i suoi talenti.

Il coraggioso

Lo scrolling di parallasse, la geometria e una sana dose di attitudine si combinano per formare un trattamento visivo tridimensionale miracoloso Il coraggioso homepage dell'agenzia digitale. 

Attraverso l'uso di una miriade di triangoli, lo sfondo interattivo e stratificato dà un'impressione di profondità che fa davvero pop del sito agli occhi del visitatore.

Boombotix

Boombotix è un altoparlante portatile bluetooth, ed è anche di forma esagonale. Forse una mossa astuta dei suoi progettisti, visto che abbiamo già discusso di come esagoni vanno di pari passo con prodotti tecnologici avanzati. 

Inoltre, il design del sito corrisponde a quello del prodotto. Le linee diagonali affilate fungono da dispositivi di inquadratura e segnali visivi ovunque vi capita di navigare. Combina questo con le animazioni slick attivate mentre scorri e hai una straordinaria vetrina per un prodotto intrigante.

450 GSM

Servizio di stampa 450gsm ha un sito eCommerce che dimostra davvero la compatibilità delle tendenze del design piatto e geometrico. L'illustrazione principale è un'immagine simile ad origami costruita con forme triangolari più piccole. L'unica altra immagine sulla pagina è composta da rettangoli e un singolo (nei pulsanti e nel logo).

Ogni forma serve a distogliere lo sguardo dall'abbondante spazio negativo che pervade tutto lo schermo. L'uso intelligente delle linee diagonali nell'uccello origami crea tensione e indirizza l'utente verso il CTA e il contenuto aggiuntivo che risiede sotto la piega.

akaru

Finire la nostra galleria è il sito web animato dell'agenzia digitale akaru

Questo sito combina molti degli elementi precedentemente discussi nel nostro elenco e forma un fantastico buffet geometrico per i sensi. Triangoli, rettangoli e persino nuvole esagonali formano un'impressione indimenticabile nella mente del visitatore mentre sfogliano il sito altamente coinvolgente.

Conclusione

Così conclude la nostra rassegna di modelli geometrici popolari all'interno del web design moderno! Ora che la teoria è stata spiegata e hai visto alcune applicazioni pratiche dei tre usi primari dei modelli geometrici in azione, forse ti sentirai più a tuo agio a sperimentare la geometria nei tuoi progetti.

Quali altri esempi di design geometrico ti hanno impressionato o sbalordito? Sound off nella sezione commenti qui sotto!