3 Essential Design Trends, dicembre 2017
Tutte e tre le tendenze del design di questo mese hanno a che fare con la tipografia. E le tendenze mostrano alcuni modi piuttosto stellari per usare il tipo bello per creare il coinvolgimento degli utenti e fare una grande prima impressione.
Un tema comune tra questi progetti è che tutti gli stili tipografici sono altamente leggibili. Se hai intenzione di lavorare con un elemento di testo più trendy o funky, scegli un carattere tipografico che gli utenti non avranno difficoltà a leggere. La tecnica di tendenza è il trucco con questi disegni, non il carattere tipografico stesso.
Ecco cosa è in voga nel design questo mese:
1. Basta digitare sopra la pergamena
Mentre una grande immagine può aiutare a disegnare gli utenti in un design, a volte le parole e lo spazio giusti sono il biglietto.
La chiave per sfruttare al meglio questa tendenza di design è perfezionare il tuo messaggio. Le parole devono essere semplici, dire qualcosa di significativo e creare valore per l'utente.
Quindi come lo fai?
- Inizia con una frase chiave. Può essere la tua missione o una proposta di valore per gli utenti. Dì agli utenti cosa porti in tavola e perché il tuo sito web sarà importante per loro.
- Scegli un carattere semplice che abbia lo stesso umore del messaggio per i blocchi di copia più lunghi.
- Se il blocco di testo è breve, ad esempio con Tipi di tipo , considera un'opzione tipo funkier per attirare utenti.
- Ottieni il massimo dallo spazio. Nota che in ciascuno degli esempi seguenti, il testo ha molto spazio per respirare, rendendo più facile la lettura a colpo d'occhio. Lo spazio può anche aiutare ad attirare l'attenzione sul testo e può bilanciare gli elementi del testo se non vuoi centrarli sullo schermo, ad esempio Design Ups .
- Usa il colore per aumentare l'interesse visivo. Tonalità luminose e di tendenza possono aiutare a disegnare gli utenti nel design. Il colore può anche aiutare a impostare uno stato d'animo correlato alla messaggistica.
Quando lavori con un design di tipo pesante, non forzarlo. A volte non avrai abbastanza testo per riempire uno "schermo" completo. Meno + More e Tipo di tipo utilizza il blocco del colore per creare più riquadri perfettamente dimensionati per il contenuto del testo.
2. Testo in scatole bianche
Con così tanti elementi visivi audaci nei progetti di progettazione di siti Web e così tanti punti di risposta reattivi da affrontare, le scatole bianche stanno riemergendo come elemento contenitore per il testo. Le scatole bianche con testo scuro all'interno possono garantire la leggibilità quando si tratta di messaggi su foto, video o illustrazioni in cui è presente una variazione di colore.
E anche se questa tendenza potrebbe sembrare un po ', beh ... sciatta o pigra, sembra davvero ottima se fatta bene.
Non puoi semplicemente schiaffeggiare una scatola ovunque su un'immagine e sperare per il meglio. Le scatole bianche devono essere posizionate in modo strategico in modo che non coprano parti importanti dell'immagine e in modo che gli utenti si spostino su di esse nel corso della visualizzazione del disegno.
Le caselle bianche devono essere abbastanza grandi da contenere una quantità ragionevole di testo e dovresti avere un piano per questo elemento su schermi più piccoli, come ad esempio lasciare che tutto nella casella di testo scenda sotto l'immagine principale. Non provare a mettere una casella di testo su un'immagine su schermi più piccoli perché finirai con una scatola di testo troppo piccola per essere letta o la scatola coprirà la maggior parte dell'immagine stessa.
Se fai il pot per il trattamento della scatola bianca, divertiti. Ciascuno degli esempi seguenti utilizza le caselle bianche in modi completamente diversi.
Fai spazio taglia una scatola bianca nell'angolo inferiore dell'immagine in modo che la maggior parte dell'immagine sia visibile. La scatola bianca sanguina nello spazio sottostante, in modo tale che sembra quasi uscire dal pannello sottostante. Questa tecnica aiuta a collegare il cursore principale al contenuto sottostante (e può persino incoraggiare lo scorrimento).
Howit usa blob circolari in modo che le caselle di testo bianche corrispondano meglio al tono dell'illustrazione di sfondo. Questo sottile spostamento di forma, in modo che le scatole appaiano più fluide, aiuta a connettere gli elementi in modo che le scatole e lo sfondo abbiano una sensazione costante. Non vuoi che le caselle bianche per il testo sembrino posizionate a caso sullo sfondo. (Questo non funziona e non aiuta a creare un feeling coesivo per gli utenti.)
Macaulay Sinclair ha più testo degli altri esempi usando una parte di una griglia del pannello immagine per contenere l'elemento di testo. Qui, l'immagine dietro la casella bianca non fornisce alcun valore informativo. Ha uno schema di colori e movimenti che sembra simile ad altre immagini e serve principalmente a creare coesione tra l'elemento del testo e il resto del disegno.
3. Ritagli tipografici
Nessuno ha mai detto che il testo debba essere una serie di lettere piene. Altri designer stanno optando per ritagli tipografici che presentano un blocco di colore su un'immagine in modo che l'immagine arrivi attraverso caratteri chiari.
Questa tecnica può funzionare con immagini fisse o in movimento e con sovrapposizioni a schermo intero in modo che solo una piccola quantità di informazioni provenga da lettere (quasi per creare una trama) o con più di uno stile di blocco sopra l'immagine con più dell'immagine di sfondo visibile.
Il trucco per fare questo lavoro è il carattere giusto. Le lettere devono avere tratti abbastanza spessi in modo che l'immagine o la trama sullo sfondo siano visibili. Non è possibile farlo con un carattere sottile o condensato con un successo coerente.
Questa tecnica funziona anche se il numero di parole e lettere è piuttosto limitato. Attacca da una a tre parole con 10 o meno lettere o usa parole molto comuni che gli utenti conosceranno a colpo d'occhio.
Danbury utilizza un ritaglio di testo luminoso come disegno per incoraggiare gli utenti a interagire con la videochiamata all'azione. L'intera scatola arancione è solo un pulsante gigante.
Fusion Winery utilizza un video di sfondo di un vigneto nel lettering. La cosa eccezionale di questo design è l'effetto a triplo strato: lo sfondo video sotto il ritaglio di testo bianco sotto l'immagine di un prodotto.
Il Kaneko usa un'immagine non identificabile come riempimento per le lettere. Se si sceglie questo stile, mantenere questo sfondo semplice come fatto con questo design. C'è solo un tocco di colore e consistenza che attira l'attenzione sul testo sulla tela rigida.
Conclusione
La raccolta fornisce ispirazione per quei progetti che potrebbero non avere una buona immagine o video, in modo che tu possa ancora trovare il modo di creare qualcosa a cui gli utenti risponderanno. Non aver paura di usare il testo come elemento visivo e informativo in questo progetto.
Quali tendenze stai amando (o odiando) in questo momento? Mi piacerebbe vedere alcuni dei siti web di cui sei affascinato. Lasciami un link su Twitter ; Mi piacerebbe sentirti.