La guida completa per un design dell'interfaccia in stile scheda efficace

L'architettura in stile carta è una delle cose più importanti nel web design e in particolare nel mobile design. Dalle app ai siti web reattivi, il formato in stile carta sta spuntando ovunque.

E per una buona ragione. Il design delle carte mobili sembra bello, funziona bene su una varietà di dispositivi e crea un'organizzazione distinta e un metodo per la consegna dei contenuti. Ecco perché molti marchi grandi e famosi utilizzano il formato delle carte e molti gruppi di progettazione e sviluppo più piccoli stanno seguendo l'esempio.

Cos'è il Card Design?

Gli stili di design delle carte per i siti Web mobili e desktop sono definiti da un contenuto in scatola che sembra essere presente in una sorta di scheda di gioco. Le scatole in stile scheda contengono in genere un unico bit di contenuto o informazioni e sono comunemente orientate verticalmente.

Ma come con qualsiasi tecnica di progettazione, ci sono molti modi per infrangere le regole. Il principio alla base dell'idea è quello di dare una raffica di informazioni in un modo che sia facile da vedere e digerire tutto in una volta. I popolari siti di condivisione di social media come Twitter e Pinterest utilizzano questo formato per raggruppare immagini e post.

Cosa c'è di carino in una carta? è che può essere manipolato in vari modi. Possono apparire impilati singolarmente (come spesso accade per il design mobile) o cadere in una griglia per schermi più grandi. Le carte possono essere corte o alte e progettate per adattarsi in base al contenuto contenuto.

Il design in stile carta è anche popolare per i framework reattivi perché i progettisti possono aggiungere e comprimere colonne di carte per adattarle alla forma e alle dimensioni dello schermo. Mentre la maggior parte dei progettisti progettano carte con una larghezza fissa e consentono di mantenere l'altezza della carta variabile.

Come le carte possono funzionare per il tuo progetto

Le carte sono un'opzione di tendenza per la loro flessibilità e l'ampia gamma di utilizzo. (Aiuta anche il fatto che alcuni dei siti web più popolari al mondo abbiano utilizzato una qualche forma di carta nelle recenti iterazioni di progettazione: Google, Microsoft, Facebook, Twitter, Pinterest e Buzzfeed, per citarne alcuni).

Ma vuoi usare un concetto in stile carta? Questa tecnica di progettazione ha alcuni vantaggi:

  • Rende il contenuto facile da digerire.
  • Ci sono molti stili di progettazione che funzionano in questo formato, dal piano all'abbellimento.
  • Le carte funzionano bene in strutture reattive.
  • Il formato ha un aspetto grafico strutturato e fornisce una struttura per molte informazioni.
  • Funziona bene per molti diversi tipi di contenuti.
  • I design in stile card sono fatti praticamente per la condivisione sui social media.

Progettare una grande carta

Il miglior design della carta è semplice. Offre anche un'esperienza ricca di contenuti. Per un progetto in stile carta di successo, devono essere presenti entrambi questi elementi. Ma ci sono molte altre tecniche di progettazione che possono aggiungere funzionalità ed estetica.

La cosa grandiosa delle carte è che non c'è un puro insieme di regole di design che devi seguire. I principi di base del buon design sono tutto ciò che devi capire per iniziare a creare un progetto in stile carta.

Usa un sacco di spazio

Lo spazio è un fattore comune nei progetti di design in stile carta. In particolare, un sacco di spazio bianco. È importante dare a ogni singola stanza elemento la vista, la lettura e la comprensione. Questo è particolarmente vero in un blocco che spesso contiene un "mini design"? proprio. Pensala in questo modo: se ogni carta nel tuo progetto contiene un'immagine, titolo, testo della copia principale, pulsante di chiamata all'azione e pulsante o link di condivisione, ci sono almeno cinque elementi con cui lavorare in uno spazio di circa 600 pixel di larghezza .

Avere un sacco di spazio attorno a ciascun elemento offre agli utenti il ​​tempo di reimpostare visivamente quando si guarda da un elemento all'altro o da una scheda all'altra. Includere un sacco di padding tra gli elementi aiuterà anche a portare attenzione e attenzione attraverso la carta in un modo che funzioni con la gerarchia dei contenuti.

Un pezzo di informazione per carta

Abbiamo già stabilito che la carta conterrà più elementi all'interno di un disegno, ma ognuno dovrebbe concentrarsi su un solo bit di informazione o contenuto. Segui l'idea di un concetto per blocco in base a cui l'immagine e tutto il testo di supporto sono unificati.

Questa idea può rendere il contenuto che potrebbe essere molto vario lavorare nello stesso spazio, apparentemente intenzionale e organizzato. Offre agli utenti l'opportunità di scegliere e selezionare le parti del proprio portafoglio di contenuti che desiderano utilizzare e condividere.

Seleziona un'immagine chiara e nitida

L'immagine è il re dello spazio di progettazione della carta. Hai bisogno di una grande immagine - e deve essere bella anche se piccola - per attirare gli utenti su ogni singola carta. (Ricorda che questo è uno spazio Internet affollato).

Se non hai un'immagine, scegli il tipo di stile artistico o crea un testo che non possa aiutare a disegnare gli utenti? (Ricorda il lama? Scappa? A fine febbraio che è diventato virale grazie a grandi scrittori di titoli.)

Usa la tipografia semplice

Optare per caratteri tipografici semplici in colori semplici e facili da leggere - neri e grigi sono popolari - che si tengono lontani dal design. I sans serif da medi a tondi sono apprezzati per la leggibilità e un design neutro.

Limita anche il numero di caratteri tipografici. Per la maggior parte dei progetti di carte è sufficiente un singolo carattere tipografico. Prendi in considerazione l'uso di una variante in grassetto, ma nella maggior parte dei casi le differenze di dimensione sono tutto ciò che ti serve per ottenere il massimo dal testo. (Mentre ci sei, assicurati di limitare anche il numero di parole. Un pensiero per carta.)

Includi un dettaglio imprevisto

Sebbene le interfacce di stile delle carte siano spesso semplici, l'aggiunta di un dettaglio inaspettato può dargli la giusta quantità di stile. Prendi in considerazione un ritaglio ritagliato o angolato, un bordo angolato o un effetto 3D per aggiungere enfasi alle carte.

Altre tecniche come le sovrapposizioni cromatiche o gli effetti al passaggio del mouse possono essere ugualmente gradevoli. Considerare anche l'aggiunta di un effetto solo ai bit più significativi del contenuto in modo che ogni carta non sia abbastanza uguale in termini di peso visivo.

Crea una griglia aperta

Questo potrebbe essere il concetto più difficile da capire, a seconda di come il progetto di progettazione si riunisce. Altrettanto importante quanto il design di ogni carta è l'esterno? spazio tra ogni elemento.

Crea una griglia che include un certo tipo di contrasto con ogni carta. Progetta la struttura in modo tale che la spaziatura sia coerente da una tessera all'altra e in modo che ci sia molto spazio tra ogni elemento. Questo potrebbe entrare ancora più in gioco quando si pensa a dove i breakpoint potrebbero cadere in un framework reattivo con carte a larghezza fissa in particolare.

Considera l'usabilità

Una carta dovrebbe essere più di un semplice elemento di design; dovrebbe aiutare un utente a realizzare un qualche tipo di azione. Dalla lettura di una storia o di un articolo alla sottoscrizione di una e-newsletter o all'acquisto, l'interfaccia della carta dovrebbe fornire un'interazione semplice.

Considera anche come funzionano queste interazioni. Vai oltre il clic. Molti progetti di design con schede saranno consumati su dispositivi mobili. Prendi in considerazione le interazioni che utilizzano tap e swip piuttosto che clic tradizionali. Assicurati che i pulsanti o le azioni siano facili da vedere ed eseguire, incluso avere abbastanza spazio tra gli oggetti da toccare con facilità e senza attivare l'elemento sbagliato.

Conclusione

I progetti di design in stile carta sono divertenti, alla moda e funzionali. L'utilizzo di alcuni principi fondamentali del design ti aiuterà a creare un mazzo di carte esteticamente piacevole e funzionale.

L'idea numero uno da tenere a mente è la semplicità. Tutto ciò che riguarda il design di una carta dovrebbe essere facile da leggere e capire. Buona fortuna con il vostro progetto!