Texture e Pattern — Gli eroi non celebrati del Visual Design

Nov 26 2022
È stato divertente fare amicizia (haha) nella Ayagigs Web3 Fellowship, un programma di apprendimento tenuto in collaborazione con Coinbase. Apprezzo il lavoro di Product Design Lead, Ajiri Omafokpe e Program Associate, Folushola Esther.

È stato divertente condividere (haha) nella Ayagigs Web3 Fellowship, un programma di apprendimento tenuto in collaborazione con Coinbase .

Apprezzo il lavoro di Product Design Lead, Ajiri Omafokpe e Program Associate, Folushola Esther . Hanno davvero fatto molto per rendere il programma accogliente, educativo, divertente e portano con sé l'intero gruppo che ami vedere.

Abbiamo finito con la fase fondamentale e ci dirigiamo verso la fase principale, ma prima abbiamo avuto una settimana di sfida che è iniziata lunedì 21 novembre 2022 per metterci alla prova su ciò che abbiamo imparato durante la fase fondamentale. È stato impegnativo, fare tutti i tipi di test inclusi MCQ, QA, test pratici (non crederai che sia stato fatto in 2 giorni), con questo articolo come compito finale per la settimana della sfida.

Ho ricevuto molte richieste di scrivere sull'uso di motivi e texture, quindi ho deciso di sfruttare questa opportunità per condividere le mie conoscenze sull'argomento.

Quindi, cominciamo,

Textures e Patterns sono elementi visivi che sono diventati indispensabili nel design in generale. Li chiamo eroi non celebrati perché sono per lo più trascurati ma diventano inestimabili quando vengono scoperti dal designer curioso.

Sono elementi presi in prestito dall'arte, che completano il design digitale e danno una sensazione di profondità. Le trame possono mostrare il contenuto chiave della pagina Web guidando la vista dell'utente. I motivi possono rendere vivaci gli spazi opachi. Entrambi contribuiscono notevolmente a rendere piacevole un'interfaccia, migliorando quindi l'esperienza dell'utente.

Quando pensi a Texture
Quando pensi a Pattern

Tuttavia, la trama sembra essere stata fraintesa per molto tempo come un design in stile " GRUNGE ". In molte pagine Web, possiamo vedere che per evidenziare effetti interessanti, vengono utilizzati in grandi quantità e persino sospettati di abuso. Il risultato dell'abuso è che i suoi reali benefici sono sepolti. Per utilizzare veramente la trama al meglio, deve essere usata in modo sottile e con intenzione.

Stile “GRUNGE”.

I pattern, d'altra parte, sono più facili da usare e possono essere utilizzati per attirare l'attenzione su aree specifiche dello schermo. Come le trame, i motivi sono efficaci se usati in modo sottile, tuttavia possono essere usati in modi più ovvi quando necessario.

Modelli usati in modi ovvi
Modelli utilizzati in modi più sottili

Le due parole sono talvolta scambiate, il che è sbagliato. Condividono solo piccole somiglianze. Il pattern di solito consiste in alcuni piccoli elementi ripetitivi, con un certo ritmo visivo. La trama è composta da elementi più grandi del motivo, che non è necessariamente ripetitivo.

Casi d'uso di trame e motivi

La trama viene utilizzata principalmente durante la progettazione per il Web piuttosto che per le app mobili. I pattern sono popolari sia nella progettazione di app web che per dispositivi mobili. Il motivo del design non deve essere solo perché " sembra bello ", ma dovrebbe essere basato sul soddisfare una certa funzione, e la maggior parte dello scopo dell'utilizzo di texture e pattern durante il design è quello di migliorare il livello e la visione della pagina web. Diamo un'occhiata ad alcuni dei loro casi d'uso:

Attira gli utenti a fare clic

Elementi come icone, pulsanti, titoli, ecc. possono essere tutti strutturati. Può attirare gli utenti a fare clic sugli elementi corrispondenti. Questo potrebbe essere il motivo per cui l'uso della trama è popolare. L'uso principale della texture è applicarla agli elementi in modo che possano essere distinti dagli altri elementi sul web.

La texture applicata al pulsante attira l'attenzione dell'utente e aiuta a separarlo dallo sfondo.
Il motivo sul pulsante attira l'attenzione dell'utente.

Presentazione visiva migliorata delle informazioni

Poiché la trama può essere utilizzata per guidare la linea di vista, proprio come le linee, i riquadri e il contrasto, può anche essere utilizzata per la composizione per visualizzare il contenuto secondo determinate regole visive. Allo stesso tempo, l'effetto texture dovrebbe essere usato correttamente e coordinato con altre regole visive, e l'effetto di output finale sarà eccezionale.

Grande uso della trama in un sito web

Allo stesso tempo, la trama dovrebbe essere perfettamente abbinata allo stile e al tema del sito web. Ad esempio, i siti Web fatti a mano corrispondono a modelli di stoffa e i siti Web dipinti corrispondono a modelli di carta. Tutti questi elementi possono riflettere il contenuto del sito Web attraverso una determinata regola logica e rafforzare la gerarchia generale delle informazioni.

Crea atmosfera ed evidenzia l'individualità

Ora, sempre più clienti apprezzano il fatto che il loro sito Web possa utilizzare il design dell'interfaccia per trasmettere più informazioni su se stessi. Sperano che il sito web possa evidenziare la propria personalità ed esercitare un effetto di marca. La trama e il motivo sono strumenti potenti per stabilire l'individualità.

Quale sfondo dà la sensazione di una lezione di pittura?
L'uso del modello aiuta a creare un'atmosfera divertente.

Mantienilo leggibile

La leggibilità è la linea di fondo che una pagina web deve mantenere. Anche quando si utilizzano trame, assicurarsi che il contenuto sia facile da scansionare e leggere. Anche se è una bella pagina web, gli utenti non continueranno a usarla se la leggibilità non è buona. Assicurarsi di evitare questa situazione, come mostrato nella figura seguente.

Prestare sempre attenzione alla leggibilità durante l'utilizzo delle trame
Non c'è abbastanza contrasto tra il testo e il motivo, rendendo il testo meno leggibile per gli utenti

Usa la trama con parsimonia

Come affermato in precedenza, la trama dovrebbe essere usata in modo sottile e non abusato. Nelle pagine web, dobbiamo essere moderati e non usarli su larga scala, in modo da non interferire con l'attenzione degli utenti sul contenuto principale.

Se abusiamo della trama, finiamo con il disordine

La pratica rende perfetti

Quando usi trame e motivi, prova di più. Solo dopo aver provato, conoscerai il risultato finale. Posiziona la trama in un posto a cui non hai mai pensato e potresti trovare cose diverse. Più usi motivi e trame, meglio ottieni.

Usalo con intenzione

Quando usi modelli e texture devi essere intenzionale. Come con il design, non lo fai per il gusto di farlo. Il tuo uso di trame e motivi dovrebbe essere un mezzo per raggiungere un fine.

Esplora, esplora, esplora...

Esistono migliaia di siti che offrono fantastiche trame e motivi gratuitamente. Trascorri del tempo esplorando e amerai ciò che ottieni. Per risparmiare molto tempo durante la progettazione, credimi, è la soluzione migliore per creare risorse di backup in tempo di pace. Se il tempo per la progettazione viene utilizzato per scaricare e raccogliere risorse, temo che avrai poco tempo.

Collegamenti selezionati manualmente per l'esplorazione delle texture

365 texture da scaricare (JPG, PSD, PAT, ABR) — WeGraphics

Sfondi | GraphicBurger

La libreria dei modelli

modelli ava7 /// 1905 modelli di sfondo senza soluzione di continuità gratuiti

Collegamenti selezionati a mano per l'esplorazione del modello

Generatori SVG gratuiti, strumenti colore e strumenti di web design (fffuel.co)

Pattern Monster — Generatore di pattern SVG

Modelli sottili | Texture gratuite per il tuo prossimo progetto web (toptal.com)

Generatore di schemi | Crea modelli senza soluzione di continuità e senza diritti d'autore (doodad.dev)

Grazie per aver letto e buona giornata!

Riferimenti

  • UXdesign.cc