CMS Web Design: una guida alle applicazioni di contenuto dinamico

Tecniche UI/UX per il mondo dinamico dei media online basato sui contenuti.

La grande maggioranza delle applicazioni Web e delle app mobili, in particolare nello spazio multimediale online, è alimentata da sistemi di gestione dei contenuti (CMS) come WordPress, Drupal e altri. Questi sistemi sono stati creati per soddisfare le esigenze di un'era di Internet in cui il contenuto è re e dinamico, cambiando continuamente e frequentemente.

In passato, la maggior parte dei siti Web erano statici, non costruiti per evolversi e crescere senza interruzioni. Ora sono considerati sistemi viventi e c'è un modo ottimale per progettare per loro.

Quella che segue è una guida per i designer digitali che desiderano espandere il proprio repertorio oltre i siti Web statici e le pagine di destinazione e per iniziare a progettare in modo efficace per applicazioni dinamiche basate sui contenuti come siti di notizie, blog o persino social network in cui gli utenti pubblicano contenuti regolarmente. Per effettuare questa transizione, i progettisti dovranno capire come sono tipicamente strutturati questi tipi di applicazioni e adottare una mentalità "content-first" nel processo di progettazione.

CMS Web Design IA Patterns in applicazioni basate su CMS

I progettisti dovrebbero avere un modello mentale dei modelli di architettura dell'informazione comuni in un'applicazione basata su CMS, specialmente se lavorano sull'UX (esperienza utente) e la progettano da zero. Esistono diversi tipi di pagina comuni e parte integrante di queste applicazioni e spesso si collegano tra loro in modo prevedibile in cui il "post" funge da componente principale. In genere non esiste un limite teorico al numero di post che una domanda può contenere.

Prima pagina

Questo è il punto di ingresso formale ed è spesso sinonimo di home page. È molto comune, soprattutto quando ci sono molti contenuti a cui accedere perché aiuta a evidenziare o mettere in evidenza ciò che è più importante. Questa pagina in genere mostra versioni abbreviate dei post senza rivelare troppi dettagli.

Pagina postale

Se il "post" è l'unità principale di un'applicazione basata su CMS, la pagina del post è il punto in cui vengono visualizzati tutti i dettagli pubblici su un post. Probabilmente è l'unica pagina veramente critica nell'applicazione e potrebbe essere una pagina di un articolo o una pagina informativa su un particolare evento, persona, gruppo, prodotto, ecc. In alcune applicazioni più grandi, potrebbero esserci più tipi di post e post pagine designate.

Pagina elenco/categoria

Questo tipo di pagina è utile per consentire agli utenti di navigare tra tutti i post disponibili e di filtrarli per categoria, attributi o altri criteri. Un'opzione di ordinamento è comune anche quando la quantità di contenuto da scorrere è notevole.

Pagina di ricerca

Una pagina dedicata per la ricerca non è essenziale per le applicazioni più piccole, ma è sempre utile. A volte, può essere unito o integrato con la pagina di categoria/elenco.

Profilo utente/autore

Questa pagina è dedicata a ciascun autore o utente che crea uno o più post. A volte viene evitato su piccoli siti di notizie e blog con un solo autore, ma è fondamentale per grandi siti di notizie con più autori, social network basati sui contenuti e altre applicazioni generate dagli utenti. Una pratica comune e utile consiste nell'includere un elenco di tutti i post dell'utente in questa pagina.

Pagina iniziale o dashboard dell'utente

Questa pagina mostra le informazioni (inclusi i post) rilevanti per l'utente che ha effettuato l'accesso, spesso sotto forma di feed di notizie personali o contenuti consigliati, attività recenti e stati. La home dell'utente è essenziale per le app gated e le applicazioni di social network, ma facoltativa o irrilevante per gli altri.

Progettazione dell'interfaccia utente basata sui contenuti per contenuti dinamici

Il contenuto precede il design. Il design in assenza di contenuto non è design, è decorazione. – Jeffrey Zeldman

Quando è il momento di progettare l'interfaccia utente di un'applicazione basata su CMS, è importante ricordare che il contenuto guida sempre il design, non il contrario. Un approccio basato sul contenuto è stato adottato da sempre più società di media negli ultimi anni con risultati comprovati. Con questo in mente, ecco un elenco di consigli che i progettisti dell'interfaccia utente devono tenere a mente quando si bagnano i piedi in questo tipo di progetti.

Considera il contenuto prima di definire uno stile

In un'applicazione basata sul contenuto, lo stile visivo dovrebbe supportare il contenuto nel suo insieme. Sebbene la natura di questi tipi di applicazioni di solito implichi che il contenuto sarà variabile e non del tutto prevedibile, il più delle volte si adatterà a un tema generale. Quindi, quando si sviluppa l'estetica del marchio, il contenuto reale può essere una grande fonte di ispirazione. Allo stesso tempo, può anche essere una responsabilità se il designer si attacca troppo a contenuti specifici e sviluppa uno stile eccessivamente mirato.

Conosci regolarmente chi creerà il contenuto.

In un'applicazione basata su CMS, il contenuto è in gran parte determinato dai creatori di contenuto, non dai designer. Quindi, di solito ci si aspetta che il designer lasci un po' di controllo sull'aspetto del prodotto alle persone che pubblicano contenuti su base regolare, vale a dire editori, autori, amministratori o anche utenti casuali che inseriscono contenuti tramite moduli pubblici.

A seconda del processo concordato, il designer può stabilire alcuni standard e linee guida per la scelta delle immagini, la preparazione e il ritaglio e persino impostare alcuni parametri sullo stile del testo. Tuttavia, nel complesso, è responsabilità del designer modellare il front-end dell'applicazione in modo tale che un lavoro scadente da parte del creatore di contenuti, come una fotografia scadente o un titolo molto lungo, non riduca la qualità del progetto in misura significativa.

PROGETTAZIONE con contenuti reali ove possibile.

Poiché il tipo di contenuto può variare notevolmente in un'applicazione basata su CMS, ha senso dedicare del tempo a esaminarne un ampio campione. Idealmente, nel caso di un sito di notizie o blog, il designer collaborerebbe con i creatori di contenuti all'inizio del processo di progettazione e richiederebbe esempi di storie, immagini di prodotti, video o qualsiasi altra cosa che possa aiutare a far sembrare reali i modelli di progettazione il più possibile.

La progettazione con contenuti reali è preferibile all'utilizzo di foto stock e testo fittizio e può essere eseguita anche in parallelo con wireframing o prototipazione, poiché aiuta a limitare eventuali sorprese che potrebbero verificarsi.

Non è raro che un design appaia sbalorditivo quando un designer lo riempie con immagini accuratamente preselezionate o photoshoppate e titoli perfettamente adattati, e poi lo vede scendere in stasi una volta entrato in produzione.

NON essere eccessivamente specifico con lo stile.

Quando imposti uno stile visivo, non classificare il contenuto riflettendo solo un singolo stato d'animo, genere, storia o argomento. Invece, mantienilo semplice e universale rispetto all'intera gamma di toni che potrebbero entrare in gioco nel contenuto.

Un aspetto molto specifico è accettabile a volte per un'applicazione che si rivolge a un pubblico di nicchia, ma spesso può sembrare obsoleta e priva di attrattiva di massa nel mercato odierno. Inoltre, può potenzialmente limitare le prospettive di crescita e di espansione a nuovi verticali in futuro.

Per garantire che un design funzioni per un'ampia gamma di contenuti, di solito è una buona idea testarlo simulando una versione aggiuntiva o due della stessa pagina con argomenti notevolmente diversi ancora all'interno dell'intervallo tematico di ciò che è pubblicabile.

Progetta ogni pagina come un modello per contenuti variabili

Pensa a ogni tipo di pagina nell'applicazione come un modello o un progetto per vari elementi multimediali (immagini, widget, video, blocchi di testo, ecc.) da riempire e scopri quali elementi saranno soggetti a modifiche e quali possono rimanere fissi .

Stabilire un chiaro insieme di regole e coerenza.

Solo perché il contenuto può variare notevolmente da una pagina all'altra non significa che non dovrebbe esserci un insieme coerente di formati in cui il contenuto viene presentato.

Mantenere le intestazioni e le dimensioni delle immagini prevedibili e osservare una gerarchia logica di informazioni dall'alto verso il basso all'interno di una pagina ha molti vantaggi, uno è che crea un senso di armonia in tutta l'applicazione e mantiene l'utente correttamente orientato.

Per ottenere ciò più facilmente, sviluppa un insieme modulare e riutilizzabile di componenti di stile per il maggior numero possibile di parti dell'interfaccia, inclusi titoli, divisori, pulsanti, widget e altri elementi all'interno di un programma di progettazione. Utilizzare questi componenti ripetutamente e in uno schema logico, riducendo al minimo le variazioni. Questo articolo del designer di Toptal Wojciech Dobry presenta una bella guida per la creazione di una libreria dell'interfaccia utente in Sketch.

NON dare trattamenti di design personalizzati ai post.

Cerca di evitare di dare ai post nella stessa sezione di una pagina troppe differenze di stile e formato. Ciò include la modifica delle dimensioni dell'immagine, l'aggiunta di layout di testo o caratteri speciali o l'ingrandimento di singole immagini con ornamenti o grafica personalizzati. Questo non solo tende a uccidere l'armonia visiva, ma è generalmente uno spreco di risorse e un freno alle prestazioni e alla manutenzione dal punto di vista di uno sviluppatore o di un gestore di contenuti.

NON dare per scontato che i contenuti rientrino sempre in un'area designata.

Uno dei risultati inevitabili della natura dinamica di un'applicazione basata su CMS è che la quantità di testo che appare in una determinata area di visualizzazione può variare in lunghezza. Spesso, i limiti di caratteri possono essere inseriti nel testo nel CMS per mantenere le cose ragionevoli, ma il progettista non dovrebbe mai presumere ciecamente che un blocco di testo si adatterà sempre a un certo numero di righe.

Non solo le larghezze dei singoli caratteri variano, ma non è nemmeno consuetudine limitare pesantemente la creatività degli scrittori imponendo un limite di caratteri molto basso. Questo è il motivo per cui è sempre bene testare un design con contenuti reali, come discusso sopra, e controllare ogni area con diversi campioni di testo.

Per essere sicuri di uno scenario peggiore, inserisci temporaneamente una sequenza di caratteri alfabetici larghi (come "w" se il contenuto è in inglese) fino a raggiungere un limite di caratteri concordato.

Consenti al contenuto di distinguersi

In un'applicazione basata sui contenuti, i contenuti dovrebbero essere sempre tenuti in primo piano e al centro e gli elementi di branding stilistici dovrebbero generalmente svanire.

Circonda i contenuti dinamici con colori di sfondo chiari, chiari e neutri.

Di solito è preferibile il bianco o il bianco sporco. Ciò consente a molti diversi tipi di immagini, chiare e scure, di uscire dalla pagina senza essere oscurate.

Rendi le immagini grandi e imponente.

Le immagini di grandi dimensioni, in particolare le foto, catturano l'attenzione del visitatore in modo più efficace di qualsiasi altra cosa.

Mantieni i titoli e il corpo del testo grandi e altamente leggibili.

Per le pagine con molto testo, scegli i caratteri Web che sono altamente leggibili e distribuiscili in una dimensione ampia e comoda su tutti i dispositivi: desktop, dispositivi mobili e tablet.

NON sovradimensionare.

Spesso, ai designer digitali e di stampa piace distribuire abbellimenti creativi o dare libero sfogo agli elementi di branding nei loro progetti. In generale, mentre alcuni effetti visivi a volte possono migliorare un design basato sui contenuti, possono anche distrarre facilmente dal contenuto, che è ciò che interessa davvero agli utenti quando visitano un sito di notizie o un blog.

Tali effetti possono anche rendere meno prevedibile l'aspetto dell'applicazione quando le immagini cambiano. È generalmente una buona pratica controllare i caratteri decorativi, i motivi in ​​grassetto, le illustrazioni, le immagini sovrapposte, le immagini semitrasparenti e le cornici di fantasia attorno alle immagini. Infine, mantieni il logo relativamente piccolo rispetto ai contenuti in primo piano.

NON utilizzare sfondi colorati vicino a immagini dinamiche.

In questo momento sono disponibili colori audaci e luminosi, ma di solito è meglio evitare di applicare grandi quantità di colore saturo o uno sfondo colorato attorno alle immagini soggette a modifiche poiché ciò può produrre risultati imprevedibili, inclusi contrasti di colore e sovrastimolazione, distraendo dal contenuto.

NON utilizzare sfondi scuri per coprire intere pagine di testo.

Gli studi dimostrano che il testo chiaro su uno sfondo scuro è più stressante per gli occhi rispetto al testo scuro su uno sfondo chiaro nelle applicazioni ad alto contenuto di contenuto. Uno sfondo scuro può funzionare bene per una sezione speciale di una pagina o un'area di presentazione in cui è presente una quantità limitata di testo, ma non è adatto per coprire lunghi blocchi di testo.

Scopri come funzionano le immagini e altri media sul back-end

I sistemi di gestione dei contenuti possono variare nel modo in cui gestiscono i media, come immagini, video e file di animazione, e talvolta uno sviluppatore imposterà di proposito dei vincoli sui media per motivi di efficienza.

Ad esempio, potrebbero esserci limitazioni sul modo in cui le immagini vengono ridimensionate e ritagliate e sul numero di dimensioni e ritagli che possono essere generati e visualizzati. Pertanto, è importante consultare lo sviluppatore dell'applicazione o i gestori dei contenuti per determinare cosa è pratico (e in cosa sono disposti a investire risorse di sviluppo aggiuntive) prima di andare avanti con un progetto.

Scopri quali formati multimediali sono supportati.

Sebbene di solito sia un dato di fatto che un'applicazione supporterà le immagini, è una buona idea consultare i gestori dei contenuti su quali tipi di file video, audio e altri file multimediali possono essere archiviati e visualizzati e in che misura possono essere personalizzati visivamente.

Ad esempio, aiuta a scoprire se verrà creato un lettore video personalizzato o se l'incorporamento di un video YouTube o Vimeo su una pagina è l'unica opzione. Nel caso di YouTube, ci sono standard e limitazioni specifici nel modo in cui i video possono essere incorporati, ridimensionati e skin.

NON designare molti ritagli e dimensioni diverse per le immagini.

Sebbene sia spesso tecnicamente fattibile creare molti ritagli separati per un'immagine, di solito c'è un impatto negativo nel farlo. Ad esempio, per impostazione predefinita, il CMS di WordPress genera automaticamente diverse dimensioni di un'immagine caricata in un unico rapporto, ma fornisce solo un'opzione per la creazione di una miniatura ritagliata separatamente.

Il ritaglio di ogni immagine in rapporti aggiuntivi non solo richiede l'installazione di un plug-in speciale o lo sviluppo di uno strumento dedicato in anticipo, ma pone anche richieste extra agli editor poiché richiede loro di svolgere un lavoro aggiuntivo per ogni immagine caricata. A volte questo rende anche più difficile la scelta di un'immagine valida, rallentando ulteriormente il flusso di lavoro.

Determinare se il contenuto legacy deve essere supportato.

Quando si riprogetta un'applicazione legacy, a volte sono disponibili ancora meno opzioni rispetto all'avvio di una nuova applicazione da zero. Questo perché esiste già un repository di media esistente e la migrazione di tutto ciò in un nuovo formato può spesso essere un'operazione costosa o poco pratica dal punto di vista dello sviluppo.

Fornisci agli editor di contenuti una varietà di modi per applicare uno stile al testo

Il contenuto di testo è un elemento chiave di un'applicazione basata su CMS e in un sito di notizie o blog in particolare, si scoprirà che editori o scrittori, quando lasciati a se stessi, cercano modi per dare uno stile e formattare il testo per dare enfasi a determinati punti, suddividere il contenuto, aggiungere citazioni, creare elenchi, collegare ad altri contenuti e svolgere una serie di altre attività.

Molte piattaforme CMS popolari come WordPress forniscono opzioni di formattazione del testo per impostazione predefinita, ma se il designer non riesce a pianificare come personalizzare questi stili in base al loro design, il risultato sarà qualcosa di casuale, semplice o indesiderabile.

PROGETTAZIONE per tutti i modi comuni in cui il testo può essere formattato.

Soprattutto per blog e siti di notizie, vale la pena dedicare del tempo a fornire allo sviluppatore regole di stile per tutti i modi comuni in cui il testo può essere formattato, inclusi: testo in grassetto e corsivo, intestazioni e sottotitoli, elenchi numerati e puntati, virgolette, didascalie e collegamenti ipertestuali.

NON dare ai creatori di contenuti un controllo stilistico eccessivo.

In genere non è una buona idea aprire troppo il controllo della progettazione agli editor. Consentire loro di fare cose come costruire i propri layout all'interno delle pagine o colorare il testo in più di un modo può essere scoraggiante o richiedere molto tempo per alcune persone e produrre risultati brutti e incoerenti nelle mani di altri.

Modelli futuri del design basato sui contenuti

Con l'avvento di nuove tecnologie come la realtà aumentata (AR), hanno iniziato a sorgere nuovi paradigmi per la progettazione basata sui contenuti. Le applicazioni basate su CMS nello spazio della realtà aumentata/mista, che sono attualmente nella loro infanzia, utilizzano oggetti e/o scene del mondo reale come parte fondamentale del contenuto.

L'ambiente di visualizzazione, le condizioni di illuminazione e la vicinanza fisica di un particolare utente mobile rispetto al testo e agli oggetti 3D inseriti possono influire sul risultato finale. Ciò altera in modo significativo la nozione di cura dei contenuti e aggiunge un ulteriore livello di imprevedibilità che dovrebbe essere preso in considerazione nel processo di progettazione.

CMS Web Design è un po' diverso

Progettare per applicazioni basate su CMS significa mettere al primo posto il contenuto, poi lo stile. Significa anche pianificare e abbracciare la variabilità e l'imprevedibilità nel contenuto attorno al quale si sta progettando. La capacità di accogliere una miriade di potenziali risultati diventerà ancora più critica nel web design CMS poiché le tecnologie emergenti trasformano la natura del contenuto stesso.