Comprensione delle parti composte del tuo disegno

In questo articolo vedremo una semplice analogia che illustrerà i modi efficaci di comunicare attraverso il design. Una volta stabilita l'idea, daremo un'occhiata ad alcuni esempi familiari per portare a casa il punto.

L'analogia che andremo a vedere è The Fourier Transform, uno strumento matematico intrigante che prende il nome dal francese Joseph Fourier.

Per cominciare, potrebbe non riuscire a impressionare con le sue complesse (e apparentemente noiose) equazioni. Ma, nascosto nel profondo di queste equazioni, è un'idea semplice: che qualsiasi onda, o segnale basato sul tempo, può essere scomposto in molte altre onde, che costituiscono l'originale. In altre parole, indica i singoli ingredienti che fanno il prodotto finale.

La Trasformata di Fourier ha applicazioni che spaziano dalla risonanza magnetica nucleare (NMR) alla compressione MP3, ma applicheremo a qualcosa di più familiare: design.


Fonte dell'immagine: Wikipedia
Joseph Fourier, immagine rilasciata nel pubblico dominio dal suo autore, Bunzil

Ad esempio, hai deciso di creare un sito Web quando hai un concetto che deve essere trasmesso agli utenti. Il tuo lavoro, come web designer, è quello di creare una pagina web che rompa questa idea in bit gestibili; frammenti di immagini, frammenti di testo o persino video che, se consumati da un visitatore, trasmettono l'idea nella loro mente.

Pensa all'onda quadrata rossa nell'immagine in alto come all'idea o al messaggio che vuoi trasmettere attraverso il tuo sito web. Ogni onda blu, anche se sembrano completamente diversi se presi singolarmente, contribuiscono a creare l'onda rossa in qualche modo quando sono combinati con le altre onde blu. Il tuo compito è capire le "onde blu" (gli elementi compositi) del tuo messaggio principale. Ahimè, se solo avessimo una formula per questo!

In definitiva, se il visitatore comprende completamente lo scopo del tuo sito web ed è sicuro di utilizzarlo, hai avuto successo nel tuo ruolo di designer.


Progettare per abbracciare il contenuto, non il disordine

L'ultimo iOS 7 di Apple, nonostante abbia ricevuto una risposta mista sui nuovi colori, l'estetica, l'iconografia e la tipografia, rappresenta un positivo passo in avanti. Come utente di iPhone, trovo l'ultima offerta software di Apple un'esperienza molto più fruibile e divertente rispetto al suo predecessore. Non riesco a immaginare di tornare su iOS 6 ora che mi sono abituato alla nuova interfaccia. Questo è attribuito a più di semplici effetti di parallasse, animazioni e altri effetti speciali. Uno dei motivi principali che rendono iOS 7 così utilizzabile è che abbraccia il contenuto, piuttosto che avvolgerlo in una skin skeuomorphic. Apple chiama questo approccio "Deferenza".

Deferenza: l'interfaccia utente aiuta gli utenti a comprendere e interagire con i contenuti, ma non è mai in concorrenza con questo: linee guida per iOS Human Interface

Nella prima pagina della guida alla progettazione, uno screenshot affiancato all'app Meteo nativa in esecuzione su iOS 6 e iOS 7 parla da solo; il design abbraccia il contenuto. Non devi leggere una parola per essere informato immediatamente sul tempo corrente. Ogni piccolo dettaglio dovrebbe aiutare a esprimere il messaggio.


Mentre progetta il tuo sito web perfetto, assicurati di pensarci due volte su ogni dettaglio. Ogni componente che lo compone; tipografia, colore, immagini, ogni singolo dettaglio fino alla favicon, dovrebbero contribuire in modo costruttivo, lavorando insieme in perfetta armonia per consegnare efficacemente il tuo messaggio.

Dettagli controproducenti

Mi sono spesso chiesto perché alcuni siti web posizionino in modo prominente un pulsante "feedback" sulla prima pagina. Mentre è assolutamente necessario ricevere feedback sul tuo lavoro, non dare mai l'impressione di non essere sicuro e sicuro. Pensaci in questo modo: quando vai a fare shopping, ti è mai stata posta la domanda "Cosa pensi delle nostre lampade e vernici per negozi?" giusto quando entrate in un negozio? Tali dettagli sono essenzialmente invisibili per noi. La buona illuminazione del negozio e l'atmosfera generale del negozio non vengono elaborate da noi consapevolmente.

Detto questo, il tuo cervello riceve continuamente informazioni dai tuoi occhi e altri organi sensoriali sull'ambiente intorno a te. Un buon ambiente del negozio cambierebbe sicuramente la tua idea di non acquistare un prodotto da loro. Tornando all'argomento, i link di feedback dovrebbero essere accessibili, ma nascosti. Gmail fa un buon lavoro in questo:


Fai due domande quando aggiungi qualcosa al tuo sito web:

  • Questo aiuta i miei visitatori a capire lo scopo del mio sito web?
  • C'è un modo migliore per farlo?

La perfezione si ottiene, non quando non c'è altro da aggiungere, ma quando non c'è più nulla da togliere

Antoine de Saint - Exupe

minimalismo

Google è sempre stato un maestro del minimalismo nel design. Un recente aggiornamento ha rimosso la barra superiore nera dalla loro home page, perché le persone vengono a cercare su Google.com, non per distrarsi da altri prodotti che Google ha da offrire. Questa barra in più non ha mai contribuito al messaggio principale del loro motore di ricerca: cerca nel web. Invece, questi link sono ora posizionati ordinatamente in una finestra a comparsa, in modo che gli utenti interessati possano dare un'occhiata e navigare quando necessario.


GoodUI.org è un'eccellente raccolta di 32 idee di Jakub Linowski che ti aiuteranno a costruire un'interfaccia utente valida e utilizzabile. Il primo suggerimento è che dovresti provare un layout a una colonna piuttosto che un layout a più colonne. La giustificazione di questo argomento è che, facendo questo, dovresti essere in grado di guidare i tuoi lettori in un modo più prevedibile da cima a fondo, mentre un approccio a più colonne rischia di essere più distratto dallo scopo principale di una pagina.

I layout a più colonne sono stati usati per anni nella stampa e funzionano bene. Prendi il caso di The New York Times o Mashable. Il contenuto è una raccolta di articoli (o notizie), ciascuno con un titolo di spicco. Non hanno un singolo messaggio centrale per i loro visitatori, piuttosto una raccolta di informazioni per loro, e le loro interfacce lo forniscono in modo efficace.

Un layout a una colonna guiderà i tuoi lettori in modo prevedibile, senza il rischio di distoglierli dallo scopo principale di una pagina

GoodUI.org


Fonte immagine: Goodui.org

Design per esprimere meglio

Dai un'occhiata a questo semplice diagramma, che io uso per rappresentare "espressione":


Il cerchio interno rappresenta ciò che esprimi agli altri e il cerchio esterno è il messaggio che tu avere intenzione per esprimere. Questo non si applica solo al web design, infatti, questo concetto ti aiuterà a migliorare le tue capacità comunicative in generale. Ogni volta che provi ad esprimere o comunicare un'idea agli altri, fai del tuo meglio per aumentare la cerchia interna. Valuta te stesso e prova a metterti nei panni del tuo pubblico. Quanto del tuo messaggio previsto stai effettivamente esprimendo?

Il Portfolio of Calm Digital è un buon esempio di come sia possibile esprimere efficacemente un'idea di base. In questo caso, la prima cosa che noti è la parola "Calm" scritta in enormi lettere Sans-Serif su uno sfondo blu. Il contrasto tra il bianco e il blu usati è perfetto; non troppo e non troppo poco, solo abbastanza calmo. Il colore blu è ben noto per promuovere sentimenti di calma e serenità.


Non esitare da qualsiasi opportunità che possa aiutarti a esprimere meglio le cose. Le connessioni Internet sono più veloci di un tempo, i browser sono molto più potenti e le tecnologie avanzate come HTML5, CSS3, ecc. Stanno dando più potere che mai agli sviluppatori web. Sono finiti i giorni in cui ti eri limitato a creare pagine statiche. Non esitare a utilizzare l'ultima serie di strumenti e tecnologie se può aiutarti a trasmettere meglio il tuo messaggio ai tuoi visitatori. Sottolineo la seconda metà di questa frase: se può aiutarti a trasmettere meglio il tuo messaggio ai tuoi visitatori.

Solo pochi anni fa, non potevamo immaginare di inserire un video in piena regola come sfondo di un sito web. Ma, ecco, non è pratica insolita in questi giorni. Non esiste un modo migliore per trasmettere l'esperienza dell'utilizzo di un tablet rispetto a un video. Questo è esattamente ciò che Google ha fatto per il loro sito Web Nexus 7. Fare clic su un pulsante ti mette nel bel mezzo dell'esperienza Nexus.


Spotify fa un passo avanti e riproduce automaticamente un video in background. È accattivante ...


Il sito web del designer Fernando Maclen utilizza un video sfocato sullo sfondo che lo mostra al lavoro. L'intera pagina rimane fedele alla didascalia "Superba semplicità".



Conclusione

Esaminiamo brevemente ciò che abbiamo trattato in questo articolo:

  • La trasformata di Fourier è un'idea semplice ma efficace, che ci informa degli ingredienti individuali che entrano nella creazione di un prodotto finale. Questa semplice idea di dividere un messaggio principale in piccoli componenti è ciò che un Web Designer dovrebbe mirare a fare.
  • Design per abbracciare il contenuto, non il disordine. Ogni dettaglio, fino alla favicon dovrebbe aiutare a esprimere il messaggio del contenuto.
  • Progettare per esprimere. Non esitare a fare quel qualcosa in più per esprimere la tua idea in un modo migliore. Usa l'ultima e più grande tecnologia che ha da offrire, se pensi che ti aiuterà a esprimere in modo più efficace.

Spero che questo articolo ti sia piaciuto, grazie per la lettura!