Tendenza del design: testo e tipografia a fette

I puristi sostengono che non dovresti mai alterare la tipografia. Le lettere dovrebbero apparire come previsto dal progettista del tipo, oppure è necessario selezionare un carattere completamente diverso. Sebbene ciò sia per lo più vero, l'eccezione è nella tendenza del testo suddiviso.

L'effetto elegante fa sembrare gli elementi del tipo come se fossero stati tagliati con uno strumento di precisione e può aggiungere interesse visivo a logotipi, titoli e semplici blocchi di testo. Gli effetti di testo a fette possono variare da super sottili (come una piccola lettera mancante) a parti principali di parole che mancano del tutto.

La cosa da tenere a mente quando si utilizza il testo suddiviso è che le parole devono essere sempre leggibili - che senso ha altrimenti? - e dovresti prestare molta attenzione in modo che combinazioni di lettere o parole non intenzionali non compaiano a causa della divisione. Ecco uno sguardo a come farlo funzionare per te con alcuni esempi di progetti che lo fanno bene.

Esplora Envato Elements

Fetta "tradizionale"

Il testo a fette include un aspetto quasi stratificato con un elemento di testo, come una parola o un piccolo gruppo di parole, che viene tagliato e sovrapposto su due piani. Questo effetto crea profondità e può rendere visivamente interessante un semplice insieme di personaggi.

Resoluut utilizza questo effetto in combinazione con una e commerciale per attirare gli utenti al centro del progetto. Il testo a fette rispecchia i messaggi sottostanti su cui l'azienda si concentra sul "design digitale con attitudine", perché il testo a fette trasmette una certa vibrazione tagliente a lettere diritte.

Questa tecnica funziona meglio quando i set di caratteri sono semplici (pensa innanzitutto a caratteri sans serif) e le parole hanno un punto di rottura naturale in cui possono essere tagliate e mantenere la leggibilità.

Taglia testo e foto

L'effetto di stratificazione non è limitato a una combinazione di font e spazio. I designer possono anche utilizzare immagini e testo per creare anche un effetto a fette, come nell'esempio sopra di The Shift.

Le combinazioni di sezioni inclinate di una singola immagine (anche sezionate) con scritte attirano l'utente nel design.

Mentre alcune delle parole sono un po 'più difficili da discernere all'inizio, c'è abbastanza tempo tra le animazioni per capire facilmente il messaggio.

Questa tendenza funziona bene per le agenzie digitali e i siti di portfolio come un modo per mostrare un aspetto moderno e per evidenziare i tagli creativi.

Slice with Animation

L'effetto testo a fette può essere combinato anche con altri elementi di design alla moda. Mescolare lo slicing con l'animazione può risultare in un piacevole elemento visivo.

Nell'esempio sopra, ciascuno degli elementi di testo suddivisi è in realtà la navigazione. Gli utenti possono fare clic su uno dei due elementi, ma ciò che è più impressionante è l'azione al passaggio del mouse, che rimette insieme il testo suddiviso.

Per i logotipi

Il testo a fette può essere un modo divertente per creare un logo quando gli unici elementi con cui devi lavorare sono il testo. Un logotipo divertente può essere più di un segno per il riconoscimento del marchio; può anche essere un elemento altamente grafico per molteplici usi, come il design della camicia, sopra.

Quando si lavora con testo a fette, cercare una forma e una pendenza naturali per il taglio in modo che sia interessante da guardare mantenendo la facilità di lettura.

Presta attenzione al modo in cui il taglio crea uno spazio bianco. Il disegno sopra utilizza una grande fetta di informazioni aggiuntive al suo interno. L'uso più comune di slicing è spesso una linea sottile, ma gli approcci (come puoi vedere dagli esempi in questo post) possono variare in modo piuttosto drammatico.

Crea interattività

Consenti agli utenti di tagliare il proprio testo con una combinazione interattiva di testo e pennello, come nell'esempio sopra. Sebbene il testo non sia esattamente suddiviso in sé, l'effetto viene creato nel processo di creazione artistica.

Qualsiasi strumento che consente agli utenti di modificare il design può comportare tempi più lunghi sul sito a causa del componente interattivo.

Tratti verticali a fette

Le fette verticali tendono ad essere più corte perché ogni taglio fa parte di una singola lettera.

Mentre la maggior parte dei designer sembra utilizzare la tendenza allo stesso modo con una fetta più orientata orizzontalmente, anche i tagli possono essere verticali.

Le fette verticali tendono ad essere più corte perché ogni taglio fa parte di una singola lettera. Il trucco per far funzionare le sezioni verticali è la coerenza. Il modo in cui vengono fatti i tagli dovrebbe imitarsi a vicenda in modo che le lettere sembrino andare insieme. Questo metodo di suddivisione dovrebbe apparire come se fosse quasi una parte prevista del carattere tipografico. (Non nell'esempio sopra riportato, le sezioni hanno la stessa larghezza da lettera a lettera e le stesse lettere hanno le stesse sezioni).

Stabilire Visual Flow

I tagli creano quasi un senso di urgenza di lettura in modo da comprimere le lettere e passare alla visuale principale sullo schermo.

Una conseguenza del testo suddiviso, voluto o no, è che crea flusso visivo. Un occhio dell'utente seguirà la direzione della fetta e dello spazio bianco che lo circonda.

Guarda il logotipo nell'esempio sopra. Con le sezioni in R e O in Robocath (più la normale parte mancante della c) c'è un evidente tiro direzionale sullo schermo da sinistra a destra.

L'attrazione è più forte di ciò che associ alla lettura normale (anche da sinistra a destra) perché le sezioni ti spingono rapidamente attraverso i personaggi. I tagli creano quasi un senso di urgenza di lettura in modo da comprimere le lettere e passare alla visuale principale sullo schermo.

Aggiungi enfasi alle lettere

L'ultimo - e forse il più convincente - motivo per usare la tendenza del design del testo a fette è quello di aggiungere enfasi alle lettere o al messaggio. L'affettatura può essere praticamente qualsiasi alterazione delle lettere in cui una parte di un personaggio manca nel design.

MJND, sopra, usa più di un effetto di stratificazione per nascondere, o tagliare le forme letterali per aiutare ad aggiungere enfasi al messaggio. L'immagine potrebbe facilmente fare tutte le comunicazioni qui, ma questo effetto aiuta a riportare l'utente alla messaggistica principale. La combinazione è semplice, efficace e visivamente interessante.

Risorse di apprendimento

Esistono alcuni modi per creare effetti di testo suddivisi per progetti, a seconda esattamente di ciò che si sta tentando di creare. Le opzioni più popolari includono la creazione manuale dell'effetto testo mediante l'utilizzo di software di modifica o l'utilizzo di CSS per creare l'effetto per progetti Web.

Ecco tutorial per ognuna di queste opzioni in modo da poter provare a creare un effetto di testo a fette alla moda:

• Video: come creare testo a fette in Adobe Illustrator
• Taglia lo snippet di effetti di testo usando CSS

Conclusione

L'uso della tendenza del testo suddiviso può essere un po 'complicato perché comporta l'alterazione di elementi di testo. È importante che la leggibilità non venga persa o potresti perdere utenti con questo effetto.

Gli effetti di testo a fette, tuttavia, possono essere una soluzione divertente e aiutano a generare un punto focale. L'aggiunta di un tocco di animazione può aiutare anche a passare al livello successivo. (Molti degli esempi inclusi in questo post fanno proprio questo; assicurati di visitare quei siti Web e fare clic in giro.)