Elementi comuni utilizzati nella progettazione dell'interfaccia utente in legno
Sappiamo tutti che la trama è molto utilizzata sia nel design moderno che vintage, sebbene in molti casi di design prodotto molti anni fa, le trame rumorose e sgangherate fossero inevitabili.
Quando si parla di texture in legno nel design, tuttavia, sia in un prodotto di stampa, un elemento Web o mobile dell'interfaccia utente o in un layout generale, viene sempre utilizzato per migliorare l'impatto visivo.
In questo articolo, esamineremo cinque elementi comuni nella progettazione dell'interfaccia utente che utilizzano trame di legno per fare proprio questo.
Oltre a discutere di questi elementi e ad ammirare alcuni disegni di interfaccia utente piuttosto sexy che ho raccolto da Dribbble , impareremo anche come riprodurre alcuni di questi effetti seguendo mini-tutorial qui in questo articolo.
Questi cinque elementi comuni nel design dell'interfaccia utente sono:
- Tessuto e cuciture,
- Carta e ombre,
- Tipografia e motivi incisi,
- Elementi eleganti e moderni,
- Effetti tridimensionali.
1. Tessuto e cuciture
Il tessuto e le cuciture sono elementi che tendono ad adattarsi perfettamente alla struttura in legno perché entrambi sono prodotti naturali e biologici. (Certo, il cotone è intrecciato, tagliato e tinto, e un sacco di legno in questa vetrina è stato tagliato, levigato e trattato ... ma capisci cosa intendo!) Guarda i pochi esempi qui sotto che combinano tessuto e elementi di cucitura con trame di legno.
Esempi
Questo design molto leggero utilizza un "punto" di base (solo un collegamento a tratto tratteggiato) per far apparire l'emblema e lo stendardo del cerchio come se fosse stato cucito sulla bassa opacità e sullo sfondo colorato di legno. Quel piccolo tocco funziona così bene per un design così semplice.
Le cuciture in questo disegno sono molto più realistiche, combinando uno sfondo completamente opaco con elementi in legno, elementi incisi, ombre e trame di tessuto reali. Questo punto ha un'ombreggiatura (0 pixel in dimensioni e 1 pixel a una distanza di 90 °), consentendo al punto di risaltare e abbinare i dettagli al resto del disegno.
La texture in legno prodotta digitalmente rende questo design un aspetto moderno, con i suoi sfumati gradienti e gli elementi incisi che producono un aspetto leggermente tridimensionale e più realistico. Un motivo ripetuto viene utilizzato per produrre un effetto pelle grazioso per il badge nell'angolo in alto a sinistra, che è stato cucito usando la stessa identica tecnica di quella sopra menzionata (con l'ombra esterna di 1 pixel).
Mini-Tutorial
Creazione di una semplice linea tratteggiata (Illustrator)
In questo mini-tutorial, utilizzeremo Illustrator (Ai) per creare una semplice linea tratteggiata per formare un cerchio, come nel primo esempio di questa sezione. Apri Illustrator e seleziona lo strumento Ellisse. Tenendo premuto il tasto Maiusc per mantenere la forma in proporzione, trascinare un cerchio come mostrato di seguito.
Dal pannello Traccia (Finestra → Traccia) applica un tratto di peso a 2 punti con un Limite angolo di 4. Seleziona l'opzione "Linea tratteggiata" e inserisci 12 punti nel tuo primo campo di trattino.
Noterai che la linea sul lato destro della nostra forma è in realtà composta da due trattini a 12 punti. Per risolvere questo problema, diamo al nostro tratto un po 'più di uno schema. Cambia il trattino a 3 punti e il divario a 12 punti, quindi raddoppia il trattino a 6 punti e mantieni il gap finale di 12 punti. Dovresti finire con una linea tratteggiata simile a quella qui sotto (i risultati varieranno a seconda delle dimensioni della tua cerchia).
Duplica la tua forma selezionandola prima, quindi scegli Modifica → Copia (Comando + C) e infine Modifica → Incolla in posizione (Comando + F). Con la nuova forma ancora selezionata, tieni premuti contemporaneamente i tasti Alt + Maiusc e riduci le dimensioni della forma. Tenendo questi due tasti contemporaneamente manterrà la forma in proporzione e diminuirà o aumenterà la dimensione dal punto centrale, eliminando la necessità di riallineamento.
Seleziona il più grande dei due cerchi. Rimuovi il tratto e modifica il colore di riempimento su un marrone (o su qualsiasi altro colore). Ora seleziona il più piccolo dei due cerchi e cambia il colore del tratto in un marrone più chiaro.
Con il più piccolo dei due cerchi ancora selezionati, duplicalo copiando e incollando in posizione. Una volta duplicato, posizionalo sotto la forma originale (Comando + [), e sposta la forma verso il basso premendo una volta la freccia giù sulla tastiera; quindi cambia il colore del tratto in bianco.
Ridurre l'opacità del cerchio del tratto bianco al 50% e l'opacità del cerchio del tratto marrone al 75%.
Creazione di un punto realistico (Photoshop)
In questo mini-tutorial, utilizzeremo una trama reale del tessuto e alcuni degli effetti incorporati di Photoshop per produrre un punto realistico. Apri un nuovo documento Photoshop e inserisci una trama di tessuto a tua scelta. Ritaglia l'immagine in modo che si trovi su uno sfondo bianco.
Seleziona lo strumento Selezione rettangolare e trascina una selezione all'interno della forma della trama del tessuto. Crea un nuovo livello e rinominalo "Punto". Vai a Modifica → Traccia e applica un tratto nero da 1 pixel alla forma.
Seleziona nuovamente lo strumento Selezione rettangolare e posizionalo sopra il tratto. Non importa da dove parti. Con una posizione scelta, premi il tasto Cancella. Assicurati di rimuovere il contenuto dal livello del tratto e non dal livello del tessuto.
Ripeti il processo per il resto della linea tratteggiata, come mostrato sotto.
C'è un'alta probabilità che i punti non siano simmetrici; ma questa è una buona cosa, perché i punti sono raramente!
Dovresti ritrovarti con qualcosa che assomiglia a questo:
Fai clic con il pulsante destro del mouse sul livello tracciato e seleziona "Opzioni di fusione" per aprire la finestra Stili livello. Seleziona la scheda Sovrapposizione colore e seleziona un grigio chiaro (ho usato #F1F1F1 ).
Ora seleziona la scheda Ombra esterna. Applicare un'ombreggiatura nera con un angolo di 90 °, una distanza di 1 pixel e una dimensione di 0 pixel. Abbassa l'opacità dell'ombra da qualche parte tra il 20 e il 60%.
Seleziona il livello di tessuto e apri la finestra Stili livello. Applica un'ombreggiatura predefinita con una distanza di 0 pixel e una sovrapposizione sfumatura che va dal bianco al nero al bianco. Cambia la modalità di fusione del tuo Sovrapposizione sfumatura su "Moltiplica" con un'opacità del 15%. Una volta applicato e visualizzato al 100%, si dovrebbe finire con qualcosa di simile a questo:
Gioca con i colori del tuo tessuto usando le impostazioni di tonalità e bilanciamento del colore. Ecco il mio risultato:
2. Carta e ombre
La carta e le ombre stanno diventando sempre più popolari come stili di design, ma sono particolarmente apprezzate nei disegni pesanti come il legno. La raccolta di lavori che segue mostra la carta e le ombre utilizzate in diversi modi per presentare piccoli pezzi di informazioni o, in alcuni casi, il contenuto principale del sito.
Esempi
Questo screenshot, nel caso non l'avessi notato, proviene da una piccola sezione del disegno che abbiamo visto alla fine della sezione "Tessuto e cuciture" sopra. Continuando il tema della trama prodotta digitalmente, una semplice forma bianca con un'ombra personalizzata deformata viene utilizzata per rendere la carta simile a come si arriccia.
Una combinazione davvero bella di trame di carta di legno e accartocciate. Il documento in questa interfaccia utente viene utilizzato per presentare un frammento di informazioni necessarie per una ricetta, con alcune icone adorabili in stile silhouette che consentono all'utente di visualizzare, aggiungere ai segnalibri e condividere la ricetta completa.
Questo design è pesante come una trama, unendo texture di legno, carta e nastro per creare un'interfaccia utente accattivante. Il legno e il nastro fotografati, combinati con le trame e le ombre di carta prodotte digitalmente, funzionano bene insieme.
Questo è uno dei miei esempi di interfaccia utente preferiti nel post. Puramente digitale (compresa la trama in legno), il design utilizza la goccia e le ombre interne per creare un bellissimo campo di ricerca. Il design utilizza anche i punti e l'elemento tessuto. Nel complesso, un'interfaccia molto user-friendly che sembra fantastica!
Questo disegno sembra ispirato alle tradizionali buste di posta aerea con il motivo ripetuto attorno al foglio. Il foglio è stato (digitalmente) pinzato sullo sfondo di legno, rendendo l'interfaccia utente simile a una bacheca e bacheca piuttosto che a una pagina web piatta.
L'immagine beige-crema e lo sfondo di navigazione hanno un'ombra sottile che la fa apparire come carta, in particolare con il badge stampato e le foto in stile seppia sbiadita che sembrano stampate. Ciò si adatta magnificamente allo sfondo con texture in legno e alla sensazione generale dell'interfaccia.
Mini-Tutorial
Creazione di un effetto carta digitale semplice (Photoshop)
In questo mini-tutorial, utilizzeremo una texture di legno e strumenti di Photoshop di base per creare un effetto carta digitale. Inizia con la creazione di un nuovo documento con una trama o un motivo ripetuto.
Seleziona lo strumento Forma rettangolare e inserisci una forma simile a quella sottostante, posizionandola esattamente nella parte superiore dell'area di disegno.
Duplica la forma e vai a Modifica → Trasformazione libera (o premi Comando + T). Ridurre le dimensioni della forma tenendo premuti i tasti Alt + Maiusc per mantenere la forma in proporzione, quindi ridurre la dimensione verso il centro.
Trascina il punto di ancoraggio superiore sopra la parte superiore della tela in modo che si sovrapponga alla parte superiore della forma originale.
Cambia il colore della tua nuova forma in un beige molto chiaro (quasi bianco). ero solito #FFFBF8 .
Duplica la tua forma originale e cambia il colore in nero puro ( #000000 ).
Aumentare la dimensione della forma in modo che sia un paio di pixel più grande della forma originale. Crea una guida: puoi trascinare una guida dal righello (Visualizza → Mostra righelli, se non è visualizzata) - a circa 10 o 20 pixel sotto la tua forma nera. Vai a Modifica → Trasforma → Deforma.
Trascina il punto di ancoraggio in basso a sinistra verso la guida, quindi ripeti il passaggio con l'ancoraggio in basso a destra.
Premi Invio per confermare la trasformazione della forma. Fai clic con il pulsante destro del mouse sullo strumento Livello forme e seleziona l'opzione "Rasterizza livello".
Riposiziona lo strato nero sotto le altre due forme, ma sopra lo strato di legno. Vai a Filtro → Sfocatura → Sfocatura gaussiana e sfoca la forma nera di 10 pixel. Quindi fare clic su "OK".
Abbassa l'opacità della forma nera al 50%. Aprire la finestra Stili livello per la forma bianca originale e fare clic sulla scheda Tratto. Applicare un tratto da 1 pixel alla forma utilizzando il tipo di riempimento sfumato, passando dal nero al bianco con un angolo di 90 °.
Fatto ciò, abbiamo il nostro effetto carta-su-legno digitale! Questa è una grande tecnica da usare per i siti web.
3. Tipografia e motivi incisi
Tipografia e motivi incisi sono una tecnica abbastanza comune nel web design avanzato, e sta diventando sempre più popolare nel design di tutti i giorni. Di seguito sono riportati alcuni esempi che utilizzano bene questo stile nelle interfacce con trama di legno.
Esempi
Questa interfaccia utente dell'applicazione Instagram ha uno sfondo grungy con texture in legno e immagini semi-trasparenti sbiadite per produrre un look vintage consumato. La tipografia ha diversi stili, che consentono di distinguere il lettering e conferire allo sfondo in legno una sensazione incisa.
Nel complesso, questa è un'interfaccia utente in legno davvero pulita, con una collezione ampia e altrettanto grande di vari stili e tecniche. Uno usato ripetutamente (e molto bene) è l'effetto inciso sulla tipografia e sui modelli, esemplificati nei motivi floreali nella parte superiore dello screenshot.
La segnaletica in metallo è appesa all'intestazione testurizzata per essere utilizzata come navigazione principale. Per dare ai segni un effetto inciso più realistico, il designer ha dato la tipografia interiore e lascia cadere le ombre.
Le trame di legno vengono principalmente utilizzate in questo progetto per la barra di navigazione (il registro, in questo caso). La tipografia incisa fa apparire il titolo come se una parte della pietra fosse stata incisa per mostrare la struttura di legno.
Un altro esempio di tipografia incisa su cartelli, in questo caso segni di legno piuttosto che di metallo.
Questa interfaccia utente in legno utilizza elementi eleganti e moderni, rendendo difficile scegliere se metterla in questa o nella categoria successiva. Il pulsante "Acquista" e l'icona della shopping bag hanno un effetto inciso molto dettagliato, rendendoli meravigliosamente cliccabili!
Mini-Tutorial
Come incidere un modello in legno (Photoshop)
In questo mini-tutorial, creeremo un effetto legno inciso o inciso in Photoshop. Apri un nuovo documento e inserisci una trama di legno.
Inserisci uno dei tuoi modelli o utilizza l'immagine del vettore di scorta.
Dopo aver posizionato correttamente il vettore, fai clic con il pulsante destro del mouse sul livello e seleziona "Rasterizza livello". Fai nuovamente clic con il pulsante destro del mouse su di esso e seleziona la scheda Sovrapposizione sfumatura. Applicare una sfumatura utilizzando due colori selezionati dallo sfondo in legno, come mostrato di seguito.
Seleziona la scheda Ombra esterna e applica un'ombra bianca con una normale modalità di fusione. Cambia l'angolo dell'ombra a 90 ° e la distanza e la dimensione a 1 pixel. È possibile mantenere le altre impostazioni al loro valore predefinito.
Seleziona la scheda Inner Shadow per applicare un'ombra all'interno del tuo pattern. Questo ci permetterà di creare l'effetto inciso. Abbassa l'opacità dell'ombra al 20% e modifica l'angolo a 90 °. Cambia la distanza e la dimensione dell'ombra a 3 pixel ciascuna e mantieni tutte le altre impostazioni di default.
Fai clic su "OK" e quindi abbassa l'opacità del tuo livello del modello all'80% per consentire a parte della trama dello sfondo di risplendere in tutta la sua gloria. Dovresti finire con questo risultato:
4. Elementi eleganti e moderni
Nonostante le trame di legno siano spesso legate al design vintage e retrò, se tolte correttamente, possono anche essere usate per integrare elementi moderni ed eleganti, come potete vedere dagli esempi qui sotto.
Esempi
Ecco un'altra schermata di un'interfaccia che abbiamo visto nella categoria precedente, che mostra un altro elemento in stile completamente diverso. Il cursore e le barre di scorrimento in questo design hanno eleganti sfumature bianco-argento e verde per un'interfaccia user-friendly.
Oltre ai tessuti e ai punti e alle tecniche di tipografia incisa, questo design presenta alcuni elementi moderni, come i tratti grigio-bianco da 2 pixel e le icone minimaliste, che rendono un'interfaccia simile ad iPad attraente e utilizzabile.
Un'altra delle mie interfacce preferite. Combina immagini in tessuto e legno con sfumature eleganti, tratti a 2 pixel, icone semplici e una tipografia meravigliosa per molti punti di interesse per l'utente.
Un'interfaccia altamente dettagliata che unisce texture in legno, effetti tridimensionali, bagliori e riflessi lucidi per produrre un risultato che stordirà i suoi utenti. Le linee a un pixel vengono utilizzate per rinforzare l'effetto 3D.
Luci, ombre e tratti sono usati per dare vita a questa vivida interfaccia in legno. Le icone moderne, però, sono la chiave.
Questa deliziosa piccola interfaccia utilizza i prodotti naturali del mondo e gli eleganti elementi futuristici per produrre un'interfaccia utente attraente e facile da capire. Il rumore viene aggiunto agli elementi moderni, consentendogli di adattarsi all'intestazione testurizzata.
Questa tastiera ci dà una trama di legno basata su un elemento moderno esistente: l'iPhone UIKit predefinito. La tastiera funziona esattamente allo stesso modo della tastiera di default e quindi non confonderà gli utenti.
Mini-Tutorial
In questo mini-tutorial, creeremo un dispositivo di scorrimento dell'interfaccia utente in legno utilizzando una selezione di effetti di livello di Photoshop. Crea un nuovo documento e inserisci una trama o un motivo di legno.
Seleziona lo strumento Rettangolo arrotondato e trascina una forma lunga e stretta, simile a quella sottostante. Il raggio dell'angolo del mio strumento è impostato su 15 pixel.
Fai clic con il pulsante destro del mouse sul livello delle forme e seleziona "Opzioni di fusione". Seleziona la scheda Sovrapposizione sfumatura e aggiungi un colore sfumato selezionato dallo sfondo, quindi un colore leggermente più scuro. Quindi fare clic su "OK".
Ora, seleziona la scheda Inner Shadow e applica un'ombra nera con un'opacità del 30% e un angolo di 120 °. Riduci la distanza a 1 pixel e trascina il resto a 0. Ciò creerà un'ombra all'interno della nostra forma, facendola sembrare scolpita dallo sfondo di legno.
Seleziona la scheda Ombra esterna e applica un'ombra bianca con una normale modalità di fusione. Cambia l'angolo a 90 ° e la distanza e la dimensione a 1 pixel. Lascia tutto il resto a 0 pixel. Questo darà alla nostra forma un punto culminante lungo il fondo, facendolo sembrare più tridimensionale e realistico.
Ingrandisci la linea intagliata e seleziona lo strumento Ellisse. Tenendo premuto il tasto Maiusc per mantenere la forma rotonda, trascinare un cerchio e posizionarlo sulla barra di scorrimento.
Apri la finestra "Stili livello" per la tua nuova forma circolare. Fai clic sulla scheda Sovrapposizione sfumatura e applica una sfumatura che va dal grigio chiaro al grigio chiaro. Dagli un angolo di 90 °.
Seleziona la scheda Ombra esterna e applica un'ombra alla tua forma. Cambia la distanza a 0 pixel e la dimensione a 10 pixel.
Rimpicciolisci per vedere il tuo cursore al 100%. Ecco il risultato:
5. Effetti tridimensionali
Non ci sono restrizioni sul design tridimensionale, ed è incredibilmente efficace con trame di legno. Questa combinazione è comunemente usata per produrre "scaffali", come si vede nelle interfacce iPhone e iPad, in particolare l'applicazione iBook di Apple.
Esempi
Questi scaffali sono altamente realistici e le ombre (come quella sul ripiano interno nell'angolo in alto a destra) provengono da un'ampia selezione di lavori personalizzati (non filtri Photoshop incorporati).
Gli effetti in questo disegno sono abbastanza simili a quelli del precedente. Questa volta, gli effetti hanno un aspetto più pulito e moderno, mentre il precedente doveva sembrare più realistico e "usato".
Questi scaffali per iPhone presentano tecniche simili. Questa volta, il risultato è sia moderno che realistico, bilanciando perfettamente le fotografie strutturate con effetti digitali.
Questo pulsante 3D è incredibile! Con la sua combinazione di trame di legno, i dettagli delicati del design sono in primo piano. Se un pulsante come questo fosse di fronte a te, non c'è modo che tu possa resistere dandogli una spinta!
Un effetto 3D semplice ma efficace è stato applicato a questa barra di navigazione, facendo apparire i pulsanti come se stessero archiviando i cassetti. S un elemento ingegnosamente progettato per coinvolgere l'utente nell'interfaccia.
Scritto esclusivamente per WDD da Callum Chapman, un designer e illustrazione commerciale come Circlebox creativo . Gestisce anche The Blog di ispirazione e Picmix Store
Condividi con noi i tuoi disegni e le tue illustrazioni in legno e tutti gli articoli o tutorial che potrebbero aiutare gli altri lettori.