CMS Web Design: Un ghid pentru aplicații de conținut dinamic

Tehnici UI/UX pentru lumea dinamică a conținutului media online.

O mare majoritate a aplicațiilor web și a aplicațiilor mobile, în special în spațiul media online, sunt alimentate de sisteme de management al conținutului (CMS) precum WordPress, Drupal și altele. Aceste sisteme au apărut pentru a satisface nevoile unei ere a internetului în care conținutul este rege și dinamic – schimbându-se continuu și frecvent.

În trecut, majoritatea site-urilor web erau statice – nu erau create pentru a evolua și a crește fără probleme. Acum sunt considerate sisteme vii și există o modalitate optimă de proiectare pentru ele.

Următorul este un ghid pentru designerii digitali care doresc să-și extindă repertoriul dincolo de site-urile web statice și paginile de destinație și să înceapă să proiecteze eficient pentru aplicații dinamice bazate pe conținut, cum ar fi site-uri de știri, bloguri sau chiar rețele sociale în care utilizatorii publică conținut în mod regulat. Pentru a face această tranziție, designerii vor trebui să înțeleagă cum sunt structurate de obicei aceste tipuri de aplicații, precum și să adopte o mentalitate „în primul rând pe conținut” în procesul de proiectare.

Modele CMS Web Design IA în aplicații bazate pe CMS

Designerii ar trebui să aibă un model mental al modelelor comune de arhitectură a informațiilor într-o aplicație condusă de CMS, mai ales dacă lucrează la UX (experiența utilizatorului) și o proiectează de la zero. Există mai multe tipuri de pagini care sunt comune și integrale pentru aceste aplicații și adesea se conectează împreună într-un mod previzibil, unde „postarea” funcționează ca componentă de bază. În general, nu există o limită teoretică a numărului de postări pe care o aplicație le poate conține.

Prima pagina

Acesta este punctul formal de intrare și este adesea sinonim cu pagina de pornire. Este foarte comun, mai ales când există mult conținut de accesat, deoarece ajută la evidențierea sau prezentarea a ceea ce este cel mai important. Această pagină arată de obicei versiuni prescurtate ale postărilor fără a dezvălui prea multe detalii.

Pagina de postare

Dacă „postarea” este unitatea de bază a unei aplicații bazate pe CMS, atunci pagina de postare este locul în care sunt afișate toate detaliile publice despre o postare. Este probabil singura pagină cu adevărat critică din aplicație și ar putea fi o pagină de articol sau o pagină informativă despre un anumit eveniment, persoană, grup, produs etc. În unele aplicații mai mari, pot exista mai multe tipuri de postări și postări. paginile desemnate.

Pagina Listă/Categorie

Acest tip de pagină este util pentru a le permite utilizatorilor să navigheze prin toate postările disponibile și să le filtreze după categorie, atribute sau alte criterii. O opțiune de sortare este, de asemenea, comună atunci când cantitatea de conținut de defilat este substanțială.

Pagina de căutare

O pagină dedicată pentru căutare nu este esențială pentru aplicațiile mai mici, dar este întotdeauna utilă. Uneori, poate fi îmbinat sau integrat cu pagina categorie/listă.

Profil utilizator/autor

Această pagină este dedicată fiecărui autor sau utilizator care creează una sau mai multe postări. Uneori se renunță la site-urile mici de știri și blogurile cu un singur autor, dar este esențială pentru site-urile mari de știri cu mai mulți autori, rețelele sociale bazate pe conținut și alte aplicații generate de utilizatori. O practică comună și utilă este includerea unei liste a tuturor postărilor utilizatorului pe această pagină.

Pagina de pornire a utilizatorului sau tabloul de bord

Această pagină arată informații (inclusiv postări) relevante pentru utilizatorul conectat, adesea sub forma unui flux de știri personal sau conținut recomandat, activitate recentă și stări. Acasă utilizatorului este esențială pentru aplicațiile închise și aplicațiile de rețele sociale, dar opțională sau irelevantă pentru alții.

Design UI bazat pe conținut pentru conținut dinamic

Conținutul precede designul. Designul în absența conținutului nu este design, este decor. – Jeffrey Zeldman

Când este timpul să proiectați interfața de utilizator a unei aplicații bazate pe CMS, este important să rețineți că conținutul conduce întotdeauna designul, nu invers. O abordare bazată pe conținut a fost adoptată de tot mai multe companii media în ultimii ani, cu rezultate dovedite. Având în vedere acest lucru, iată o listă de recomandări pentru designerii de UI de care să aibă în vedere atunci când își ud picioarele în aceste tipuri de proiecte.

Luați în considerare conținutul înainte de a defini un stil

Într-o aplicație bazată pe conținut, stilul vizual ar trebui să susțină conținutul în ansamblu. Deși natura acestor tipuri de aplicații implică de obicei că conținutul va fi variabil și nu în întregime previzibil, de cele mai multe ori se va încadra într-o temă generală. Deci, atunci când dezvoltați estetica mărcii, conținutul real poate fi o sursă excelentă de inspirație. În același timp, poate fi și o răspundere dacă designerul devine prea atașat de anumite piese de conținut și dezvoltă un stil prea țintit.

Aflați cine va crea conținutul în mod regulat.

Într-o aplicație bazată pe CMS, conținutul este determinat în mare măsură de creatorii de conținut, nu de designeri. Prin urmare, este de obicei de așteptat ca designerul să renunțe la un anumit control asupra aspectului produsului persoanelor care publică conținut în mod regulat - și anume editori, autori, administratori sau chiar utilizatori aleatori care introduc conținut prin formulare publice.

În funcție de procesul asupra căruia este convenit, designerul poate stabili niște standarde și linii directoare pentru alegerea imaginilor, pregătirea și decuparea acestora și chiar poate pune niște parametri pentru stilul textului. Cu toate acestea, în general, este responsabilitatea designerului să modeleze front-end-ul aplicației în așa fel încât munca necorespunzătoare din partea creatorului de conținut, cum ar fi o fotografie slabă sau un titlu foarte lung, să nu scadă calitatea. a designului într-o măsură semnificativă.

Proiectați cu conținut real acolo unde este posibil.

Deoarece tipul de conținut poate varia foarte mult într-o aplicație bazată pe CMS, este logic să petreceți timp privind o eșantion mare a acestuia. În mod ideal, în cazul unui site de știri sau blog, designerul ar colabora cu creatorii de conținut chiar la începutul procesului de proiectare și ar solicita exemple de povești, imagini de produse, videoclipuri sau orice altceva care poate ajuta ca machetele de design să pară la fel de reale. pe cat posibil.

Proiectarea cu conținut real este de preferat decât utilizarea fotografiilor de stoc și a textului fals și poate fi chiar realizată în paralel cu wireframing sau prototipare, deoarece ajută la limitarea oricăror surprize care pot apărea.

Nu este neobișnuit ca un design să arate uimitor atunci când un designer îl umple cu imagini preselectate sau photoshopate cu atenție și titluri perfect adaptate, apoi îl vede coborând în stare de nebunie odată ce intră în producție.

NU fiți prea specifici cu stilul.

Când setați un stil vizual, nu încadrați conținutul reflectând doar o singură dispoziție, gen, poveste sau subiect. În schimb, păstrați-l simplu și universal în ceea ce privește întreaga gamă de tonuri care ar putea intra în joc în conținut.

Un aspect foarte specific este acceptabil uneori pentru o aplicație care se adresează unui public de nișă, dar poate părea adesea învechit și lipsit de atractivitate în masă pe piața actuală. În plus, poate limita perspectivele de creștere și extindere către noi verticale în viitor.

Pentru a vă asigura că un design funcționează pentru o gamă largă de conținut, este de obicei o idee bună să-l testați prin ridicarea unei versiuni suplimentare sau două ale aceleiași pagini, cu subiecte semnificativ diferite încă în gama tematică a ceea ce poate fi publicat.

Proiectați fiecare pagină ca șablon pentru conținut variat

Gândiți-vă la fiecare tip de pagină din aplicație ca un șablon sau un plan pentru diferite elemente media (imagini, widget-uri, videoclipuri, blocuri de text etc.) de completat și știți ce elemente vor fi supuse modificării și care pot rămâne fixe .

Stabiliți un set clar de reguli și coerențe.

Doar pentru că conținutul poate varia foarte mult de la o pagină la alta nu înseamnă că nu ar trebui să existe un set consistent de formate în care conținutul este prezentat.

Păstrarea anteturilor și dimensiunilor imaginilor previzibile și observarea unei ierarhii logice a informațiilor de sus în jos în cadrul unei pagini are multe beneficii, unul fiind că creează un sentiment de armonie în întreaga aplicație și menține utilizatorul orientat corespunzător.

Pentru a realiza acest lucru mai ușor, dezvoltați un set modular, reutilizabil de componente de stil pentru cât mai multe părți ale interfeței, inclusiv titluri, divizoare, butoane, widget-uri și alte elemente într-un program de design. Utilizați aceste componente în mod repetat și într-o schemă logică, păstrând variațiile la minimum. Acest articol al designerului Toptal Wojciech Dobry prezintă un ghid frumos pentru crearea unei biblioteci UI în Sketch.

NU dați postărilor tratamente de design individualizate.

Încercați să evitați să dați postărilor din aceeași secțiune a unei pagini prea multe diferențe de stil și format. Aceasta include modificarea dimensiunilor imaginii, adăugarea de aspecte speciale de text sau fonturi sau umflarea imaginilor individuale cu ornamente sau grafice personalizate. Acest lucru nu numai că tinde să distrugă armonia vizuală, dar este, în general, o risipă de resurse și o reducere a performanței și întreținerii din punctul de vedere al dezvoltatorului sau al managerului de conținut.

NU presupuneți că conținutul se va încadra întotdeauna într-o zonă desemnată.

Unul dintre rezultatele inevitabile ale naturii dinamice a unei aplicații bazate pe CMS este că cantitatea de text care apare într-o anumită zonă de afișare poate varia în lungime. Adesea, limitele de caractere pot fi plasate pe text în CMS pentru a menține lucrurile rezonabile, dar designerul nu ar trebui niciodată să presupună orbește că un bloc de text se va potrivi întotdeauna pe un anumit număr de linii.

Nu numai că lățimea caracterelor individuale variază, dar nici nu este obișnuit să restrângem puternic creativitatea scriitorilor prin aplicarea unei limite de caractere foarte scăzute. Acesta este motivul pentru care este întotdeauna bine să testați un design cu conținut real, așa cum sa discutat mai sus, și să verificați fiecare zonă cu mostre diferite de text.

Pentru a fi sigur de cel mai rău caz, introduceți temporar o secvență de caractere alfabetice largi (cum ar fi „w” dacă conținutul este în limba engleză) până la atingerea limitei de caractere convenite.

Permiteți conținutului să iasă în evidență

Într-o aplicație bazată pe conținut, conținutul ar trebui să fie menținut în primul rând în centrul atenției, iar elementele de branding stilistice ar trebui, în general, să se retragă.

Înconjurați conținutul dinamic cu culori de fundal curate, deschise și neutre.

Alb sau aproape alb este de obicei de preferat. Acest lucru permite ca multe tipuri diferite de imagini, deschise și întunecate, să apară de pe pagină fără a fi umbrite.

Fă imaginile mari și impunătoare.

Imaginile mari, în special fotografiile, captează atenția vizitatorului mai eficient decât orice altceva.

Păstrați titlurile și corpul textului mari și foarte lizibile.

Pentru paginile cu mult text, alegeți fonturi web care sunt foarte lizibile și implementați-le la o dimensiune mare și confortabilă pe toate dispozitivele - desktop, mobil și tabletă.

NU supraproiectați.

Deseori, designerilor digitali și de imprimare le place să implementeze ornamente creative sau să ofere frâu liber elementelor de branding în design-urile lor. În general, în timp ce anumite efecte vizuale pot îmbunătăți uneori un design bazat pe conținut, ele pot, de asemenea, să distragă cu ușurință atenția de la conținut, care este ceea ce interesează cu adevărat utilizatorii atunci când vizitează un site de știri sau un blog.

Astfel de efecte pot face, de asemenea, aspectul aplicației mai puțin previzibil pe măsură ce imaginile se schimbă. În general, este cea mai bună practică să verificați fonturile decorative, modelele îndrăznețe, ilustrațiile, imaginile suprapuse, imaginile semi-transparente și cadrele fanteziste din jurul imaginilor. În cele din urmă, păstrați sigla relativ mică în comparație cu conținutul prezentat.

NU folosiți fundaluri colorate în apropierea imaginilor dinamice.

Culorile îndrăznețe și luminoase sunt acum, dar de obicei este mai bine să evitați aplicarea unor cantități mari de culoare saturată sau a unui fundal colorat în jurul imaginilor care pot fi modificate, deoarece acest lucru poate produce rezultate imprevizibile, inclusiv ciocniri de culoare și suprastimulare, distragerea atenției de la conținut.

NU folosiți fundaluri întunecate pentru a acoperi pagini întregi de text.

Studiile arată că textul deschis pe un fundal întunecat este mai stresant pentru ochi decât textul întunecat pe un fundal deschis în aplicațiile cu conținut intens. Un fundal întunecat poate funcționa bine pentru o secțiune specială a unei pagini sau o zonă de prezentare de diapozitive unde există o cantitate limitată de text, dar nu este potrivit pentru a acoperi blocuri lungi de text.

Înțelegeți cum funcționează imaginile și alte medii pe back-end

Sistemele de gestionare a conținutului pot varia în ceea ce privește modul în care gestionează media, cum ar fi imaginile, videoclipurile și fișierele de animație, iar uneori un dezvoltator va stabili în mod intenționat constrângeri asupra media în scopuri de eficiență.

De exemplu, pot exista limitări asupra modului în care imaginile sunt scalate și decupate și asupra numărului de dimensiuni și decupări care pot fi generate și afișate. Prin urmare, este important să vă consultați cu dezvoltatorul de aplicații sau cu managerii de conținut pentru a determina ce este practic (și în ce sunt dispuși să pună resurse suplimentare de dezvoltare) înainte de a continua cu un design.

Aflați ce formate media sunt acceptate.

Deși este de obicei un dat că o aplicație va accepta imagini, este o idee bună să vă consultați cu managerii de conținut despre ce tipuri de fișiere video, audio și alte fișiere multimedia pot fi stocate și afișate și gradul în care pot fi personalizate vizual.

De exemplu, vă ajută să aflați dacă va fi creat un player video personalizat sau dacă încorporarea unui videoclip YouTube sau Vimeo pe o pagină este singura opțiune. În cazul YouTube, există standarde și limitări specifice în ceea ce privește modul în care videoclipurile pot fi încorporate, scalate și adaptate.

NU desemnați multe decupări și dimensiuni diferite pentru imagini.

Deși este adesea fezabil din punct de vedere tehnic să se creeze o mulțime de decupări separate pentru o imagine, de obicei există un impact negativ în acest sens. De exemplu, în mod implicit, CMS WordPress generează automat mai multe dimensiuni ale unei imagini încărcate într-un singur raport, dar oferă doar o opțiune pentru crearea unei miniaturi decupate separat.

Decuparea fiecărei imagini la rapoarte suplimentare necesită nu numai instalarea unui plugin special sau dezvoltarea unui instrument dedicat în avans, dar impune, de asemenea, cerințe suplimentare editorilor, deoarece le cere să facă o muncă suplimentară pentru fiecare imagine încărcată. Uneori, acest lucru îngreunează și alegerea unei imagini viabile, încetinind și mai mult fluxul de lucru.

Determinați dacă conținutul vechi trebuie să fie acceptat.

Când reproiectați o aplicație moștenită, uneori există și mai puține opțiuni disponibile decât atunci când porniți o nouă aplicație de la zero. Acest lucru se datorează faptului că există deja un depozit de media existent, iar migrarea tuturor unui format nou poate fi adesea o operațiune costisitoare sau nepractică din punct de vedere al dezvoltării.

Oferiți editorilor de conținut o varietate de moduri de a stila textul

Conținutul text este un element cheie al unei aplicații bazate pe CMS și, în special, într-un site de știri sau blog, se va descoperi că editorii sau scriitorii, atunci când sunt lăsați la dispozițiile lor, caută modalități de a stila și forma textul pentru a pune accent pe anumite puncte, descompune conținutul, adaugă citate, creează liste, leagă la alt conținut și îndeplinește o serie de alte sarcini.

Multe platforme CMS populare precum WordPress oferă opțiuni de formatare a textului în mod implicit, dar dacă designerul nu reușește să planifice modul în care aceste stiluri vor fi personalizate în funcție de designul lor, rezultatul va fi ceva aleatoriu, simplu sau nedorit.

DO design pentru toate modurile comune în care textul poate fi formatat.

În special pentru bloguri și site-uri de știri, merită să vă acordați timp pentru a oferi dezvoltatorului reguli de stil pentru toate modurile obișnuite în care textul poate fi formatat, inclusiv: text aldine și italice, titluri și subtitluri, liste numerotate și marcate, ghilimele, subtitrările , și hyperlinkuri.

NU acordați creatorilor de conținut prea mult control stilistic.

În general, nu este o idee bună să deschideți prea mult control al designului pentru editori. Permiterea acestora să facă astfel de lucruri, cum ar fi să-și construiască propriile machete în pagini sau text colorat în mai multe moduri, poate fi descurajantă sau consumatoare de timp pentru unii oameni și poate produce rezultate urâte și inconsecvente în mâinile altora.

Modele viitoare de design bazat pe conținut

Odată cu apariția noilor tehnologii, cum ar fi realitatea augmentată (AR), au început să apară noi paradigme pentru designul bazat pe conținut. Aplicațiile bazate pe CMS în spațiul de realitate augmentată/mixtă, care sunt în prezent la început, folosesc obiecte și/sau scene din lumea reală ca parte cheie a conținutului.

Mediul de vizualizare al unui anumit utilizator mobil, condițiile de iluminare și proximitatea fizică în ceea ce privește textul și obiectele 3D inserate pot afecta rezultatul final. Acest lucru modifică semnificativ noțiunea de curatare a conținutului și adaugă un strat suplimentar de imprevizibilitate care ar trebui să fie luat în considerare în procesul de proiectare.

Designul web CMS este puțin diferit

Proiectarea pentru aplicații bazate pe CMS înseamnă a pune pe primul loc conținutul, pe al doilea stil. De asemenea, înseamnă planificarea și îmbrățișarea variabilității și impredictibilității în conținutul pe care îl proiectăm. Capacitatea de a găzdui nenumărate rezultate potențiale va deveni și mai critică în designul web CMS, pe măsură ce tehnologiile emergente transformă natura conținutului în sine.