Tendenze essenziali del design, dicembre 2016
Ti capita mai di notare che un determinato elemento di design continua a spuntare? Anche quei piccoli dettagli che sembrano un po 'insignificanti possono essere indicatori di tendenze del design. Questo è particolarmente vero con gli elementi del riepilogo di questo mese.
Ognuna di queste tendenze - i bordi bianchi che incorniciano un web design, cinemagraphs e piccole animazioni di caricamento - sono dettagli apparentemente semplici che migliorano l'esperienza visiva per gli utenti.
Ecco cosa è in voga nel design questo mese:
1) Bordi bianchi
Altri progetti web utilizzano bordi bianchi o incorniciano il perimetro del design nel browser web. È una nuova svolta su una vecchia idea quando sono stati creati più siti Web per determinate dimensioni e l'inquadratura è stata utilizzata per le strane larghezze del browser.
È qualcosa che è sbiadito dal momento che più designer hanno optato per modelli reattivi, a tutta larghezza.
La nuova svolta con l'inquadratura è interessante ed è un bel modo per creare una tela per il design. La maggior parte dei siti che utilizzano questa tendenza includono un bordo bianco-comune, ma non obbligatorio attorno al design. È largo pochi pixel ed è comunemente posizionato attorno a tre o quattro lati del disegno. (Alcuni optano per lasciare la cornice dalla parte inferiore del disegno per incoraggiare lo scorrimento).
La cosa bella del bordo bianco è che il design è pulito con linee bianche che possono aiutare a mettere a fuoco le forti scelte di colore, attirare l'attenzione dal bordo dello schermo ad altri elementi luminosi (come caselle di testo o inviti all'azione) e il bordo può aiutare a creare una tela di sfondo per lo scrolling della parallasse o altri effetti animati.
Birrificio di Camden Town fa questo eccezionalmente bene. L'inquadratura bianca si inserisce tra gli elementi del design per creare profondità e concentrazione per l'utente. La separazione bianca separa ogni nuova sezione di contenuto sullo schermo e contribuisce all'organizzazione generale del progetto. (Inoltre, gli accenti bianchi mettono in risalto la forte tavolozza di colori rosso e nero per evitare che la combinazione si senta troppo travolgente.)
2) Cinemagraphs
Cinemagraphs sono foto con un elemento di movimento in loro. Può essere qualsiasi cosa, da una foto di una persona che batte gli occhi al sottile movimento delle nuvole nel cielo dove non si muove nient'altro. Mentre gli usi più comuni della tendenza del design sembrano ancora essere nella pubblicità e nei social media, i web designer stanno iniziando a incorporare anche questa tecnica di "live photo".
Funziona perché gli utenti sono intrigati dal movimento. È efficace per molte delle stesse ragioni per cui il video è una buona opzione per attirare l'attenzione di un utente. Il movimento e l'azione sono coinvolgenti. È interessante. Sembra reale.
Quando si tratta di lavorare con cinemagraphs, il vantaggio è che è possibile creare un design con motion ma senza l'alta produzione che viene fornita con un progetto video.
Il trucco per far funzionare i cinemagraph è radicare il movimento nella realtà. Anche se la scena è più immaginata, come Parigi monocromatica , le leggi della fisica dovrebbero applicarsi al movimento sullo schermo. L'acqua dovrebbe fluire a valle, ad esempio, la gravità dovrebbe essere una forza nel modo in cui si verifica il movimento.
La mozione deve anche essere semplice e sottile. Troppi movimenti e un video potrebbe essere un'opzione migliore. Ciò che attira gli utenti in un cinemagraph è quell'elemento di sorpresa. Ciò che sembra una foto fissa in un'immagine di un eroe ha effettivamente qualcosa in esso. Quel piccolo divisorio aiuterà a coinvolgere le persone, a farle coinvolgere più a lungo con il design e, auspicabilmente, a convertire il sito web.
3) Piccole animazioni di caricamento
I tempi di caricamento sono un grosso problema. Ma non puoi sempre tenere conto della velocità della rete su cui un utente è attivo; è qui che le piccole animazioni di caricamento possono diventare un grosso problema.
La differenza nella piccola tendenza dell'animazione di caricamento è che a volte la si vede, a volte non si progetta un elemento. In ogni caso, il team di progettazione ha fatto particolare attenzione a garantire che ogni utente arrivi al sito con un'esperienza positiva.
Queste piccole animazioni sono identificabili dal fatto che non fanno realmente parte dell'esperienza utente che conta per l'obiettivo generale del sito web. Sono un elemento semplice e piccolo che cattura la tua attenzione per un istante, mentre il design del sito primario viene pubblicato.
La cosa interessante della tendenza è che queste animazioni di caricamento minuscole sono davvero minuscole, dalle dimensioni del visual stesso all'azione sullo schermo, non c'è molto da vedere, ma ciò che c'è è assolutamente delizioso.
Ecco tre grandi esempi:
- Di Hannah Purmort caricamento dell'animazione è un singolo tratto in movimento nella combinazione di colori opposta della schermata principale. Anche il tratto viene eseguito attraverso il disegno nell'effetto di scorrimento.
- Susa Ventures presenta una piccola icona con una piccola barra di caricamento. Questo attira la tua attenzione perché il piccolo gorilla è visivamente interessante e ti incuriosisce sui contenuti del sito web.
- FPG utilizza uno schizzo che sembra essere disegnato sullo schermo mentre il resto della home page viene caricato. L'unica indicazione che in realtà è un'animazione di caricamento è che il resto dello schermo è molto più elaborato una volta caricato con il video in esecuzione e ancora più schizzi. L'effetto è senza interruzioni ed è finito quasi prima che l'utente si accorga che è stato avviato.
Conclusione
I dettagli sono al centro di ogni buon design. È importante ricordare che la progettazione (e la contabilità) di cose che non tutti gli utenti noteranno è importante. Ecco come si collegano ognuna di queste tendenze, attraverso piccoli elementi di design che non sono una parte ovvia dell'estetica generale.
Questi piccoli elementi potrebbero essere la cosa che distingue davvero il tuo sito web per un utente. Potrebbe essere l'elemento di piacere che riporta qualcuno al tuo design. I dettagli possono essere il fattore di differenziazione tra successo e fallimento.
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.