La guida completa per un'efficace progettazione dell'interfaccia in stile scheda
L'architettura in stile card è una delle cose più importanti nel web design e in particolare nel design mobile. Dalle app ai siti Web reattivi, il formato in stile carta sta spuntando ovunque.
E per una buona ragione. Il design della scheda mobile ha un bell'aspetto, funziona bene su una varietà di dispositivi e crea un'organizzazione distinta e un metodo per la consegna dei contenuti. Ecco perché molti marchi di grandi dimensioni e noti stanno usando il formato delle carte e molti gruppi di progettazione e sviluppo più piccoli stanno seguendo l'esempio.
Esplora Envato Elements
Cos'è il Card Design?
Gli stili di progettazione delle carte per i siti Web mobili e desktop sono definiti da un contenuto inscatolato che sembra essere presente in una sorta di carta da gioco. Le scatole in stile carta contengono in genere un unico contenuto di informazioni o informazioni e sono generalmente 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 fornire una raffica di informazioni in un modo che sia facile da vedere e digerire tutto in una volta. I popolari siti di condivisione sui social media come Twitter e Pinterest utilizzano questo formato per raggruppare immagini e post.
La cosa bella di una "carta" digitale è che può essere manipolata 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 al contenuto contenuto.
Il design in stile scheda è popolare anche per i framework reattivi perché i progettisti possono aggiungere e comprimere colonne di schede per adattarle alla forma e alle dimensioni dello schermo. Mentre la maggior parte dei progettisti progetta carte con una larghezza fissa e consente all'altezza delle carte di rimanere variabile.
Come possono funzionare le carte per il tuo progetto
Le carte sono un'opzione di tendenza a causa della loro flessibilità e ampia gamma di utilizzo. (Aiuta anche alcuni dei siti Web più famosi al mondo a utilizzare alcune forme di carte nelle recenti iterazioni di design: Google, Microsoft, Facebook, Twitter, Pinterest e Buzzfeed, solo per citarne alcuni.)
Ma vuoi usare un concetto simile a una carta? Questa tecnica di progettazione ha diversi professionisti:
- Rende il contenuto facile da digerire.
- Ci sono molti stili di design che funzionano in questo formato, dal piatto all'abbellito.
- Le carte funzionano bene in contesti reattivi.
- Il formato ha un aspetto organizzato e fornisce la struttura per molte informazioni.
- Funziona bene con molti tipi diversi di contenuti.
- I disegni in stile carta sono praticamente realizzati per la condivisione sui social media.
Progetta una carta eccezionale
Il miglior design delle carte è semplice. Offre anche una ricca esperienza di contenuto. Per un progetto di successo in stile carta, entrambi questi elementi devono essere presenti. Ma ci sono molte altre tecniche di progettazione che possono aggiungere funzionalità ed estetica.
La cosa grandiosa delle carte è che non c'è davvero un puro insieme di regole di progettazione che devi seguire. I principi di base di un buon design sono tutto ciò che devi capire per iniziare a realizzare un progetto in stile card.
Usa molto spazio
Lo spazio è un fattore comune nei progetti di design in stile card. In particolare, un sacco di spazio bianco. Dare spazio a ogni singolo elemento da vedere, leggere e comprendere è importante. Ciò è particolarmente vero in un blocco che conterrà spesso un "mini design" a sé stante. Pensala in questo modo: se ogni scheda nel tuo progetto contiene un'immagine, un titolo, un testo di copia principale, un pulsante di invito all'azione e un pulsante o un link di condivisione, ci sono almeno cinque elementi con cui lavorare in uno spazio di circa 600 pixel di larghezza .
Avere molto spazio attorno a ciascun elemento offre agli utenti il tempo di ripristinare visivamente quando guardano da un elemento all'altro o da una scheda all'altra. Includere molta imbottitura tra gli elementi aiuterà anche a mettere a fuoco e attenzione attraverso la carta in un modo che funziona con la gerarchia dei contenuti.
Un pezzo di informazione per scheda
Abbiamo già stabilito che la scheda conterrà più elementi all'interno di un disegno, ma ognuno dovrebbe concentrarsi su un solo bit di informazione o contenuto. Segui l'idea per blocco per idea che l'immagine e tutto il testo di supporto sono unificati.
Questa idea può far funzionare nello stesso spazio contenuti che potrebbero essere variati in modo drammatico, sembrando intenzionali e organizzati. Offre agli utenti l'opportunità di scegliere le parti del portfolio di contenuti che desiderano consumare e condividere.
Seleziona un'immagine chiara e nitida
L'immagine è il re dello spazio di progettazione delle carte. Hai bisogno di un'immagine fantastica - e deve essere eccezionale anche da 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 arte o crea testo che non può fare a meno di attirare utenti? (Ricorda la lama "fuga" alla fine di febbraio che è diventata virale grazie ai grandi scrittori.)
Usa tipografia semplice
Optare per caratteri tipografici semplici in colori semplici e facili da leggere (neri e grigi sono popolari) che non tengono conto del design. I sans serif da medi a rotondi sono famosi per la leggibilità e la sensazione di un design neutro.
Limita anche il numero di caratteri tipografici. Per la maggior parte dei progetti di carte è sufficiente un solo carattere tipografico. Prendi in considerazione l'uso di una variazione in grassetto, ma nella maggior parte dei casi le differenze di dimensione sono tutto ciò che ti serve per sfruttare al meglio il testo. (Mentre ci sei, assicurati di limitare anche il numero di parole. Un pensiero per carta.)
Includi un dettaglio imprevisto
Mentre le interfacce in stile carta sono spesso semplici, l'aggiunta di un dettaglio inaspettato può dare la giusta dose di eleganza. Prendi in considerazione un ritaglio ritagliato o angolare, un bordo angolato o un effetto 3D per aggiungere enfasi alle carte.
Altre tecniche come sovrapposizioni di colore o effetti hover possono essere altrettanto piacevoli. Considera anche di aggiungere un effetto solo ai bit di contenuto più significativi in modo che ogni carta non sia del tutto uguale in termini di peso visivo.
Crea una griglia aperta
Questo potrebbe essere il concetto più difficile da prendere in giro, a seconda di come il progetto si unisce. Altrettanto importante del design di ogni carta è lo spazio "esterno" tra ogni elemento.
Crea un framework di griglia che includa un certo tipo di contrasto con ogni carta. Progettare la struttura in modo tale che la spaziatura sia coerente da una scheda all'altra e che vi sia ampio spazio tra ogni elemento. Ciò potrebbe entrare ancora più in gioco quando si pensa a dove potrebbero cadere i punti di interruzione in un quadro 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 compiere qualche tipo di azione. Dalla lettura di una storia o di un articolo alla sottoscrizione di una newsletter elettronica o all'acquisto, l'interfaccia della scheda dovrebbe fornire un'interazione semplice.
Considera anche come funzionano queste interazioni. Vai oltre il clic. Molti progetti di design con schede verranno consumati su dispositivi mobili. Prendi in considerazione le interazioni che utilizzano i tocchi e i colpi anziché i 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 card sono divertenti, alla moda e funzionali. L'uso di alcuni dei principi di base del design ti aiuterà a creare un mazzo di carte esteticamente gradevole e funzionale.
L'idea n. 1 da tenere a mente è la semplicità. Tutto ciò che riguarda il design di una carta dovrebbe essere di facile lettura e comprensione. Buona fortuna con il vostro progetto!
