Proiectați abordări pentru site-urile editorilor

Ce este un „site de editor digital?” Este un site web care se concentrează pe publicarea zilnică a multor articole. Este un nivel peste un „blog”. Este practic un site de știri sau o platformă de publicare virală precum BuzzFeed.

Există o diferență în abordarea de proiectare pentru un astfel de site web comparativ cu vânzările de produse, afaceri, bloguri personale sau orice alt tip de site web. Aspectul său este adesea cunoscut ca stilul „Magazine”, care este, de asemenea, o categorie destul de bine saturată pe piețele tematice.

Ce face diferit un site web al editorului?

Există două diferențe majore între un site web al editorului și unul mai regulat.

Prima evidentă este cantitatea de conținut. Acum, desigur, există site-uri web uriașe, în special cele de comerț electronic, cum ar fi Amazon sau eBay, care au cel mai probabil mult mai mult conținut, dar acestea sunt platforme care obțin conținut de la utilizatorii site-ului. Editorii au echipe editoriale care lucrează cu normă întreagă pentru a produce conținut conform unui program. La fel ca un ziar.

Cealaltă diferență majoră este sursa de venit. Un site web al companiei precum Coca Cola nu își generează veniturile de pe site , ci provine din produsele sale. Majoritatea site-urilor web ale companiei au scopul de a fi pur și simplu o prezență digitală.

Știind acest lucru, este evident că veniturile unui site web ale editorului provin chiar de pe site. Cum? Reclame! Care este aproape modul în care Google sau Facebook generează majoritatea veniturilor lor.

Anunțurile, cel mai hotărât, rulează web și reprezintă principala prioritate a multor site-uri web. Conținutul lor este axat pe atragerea unui număr cât mai mare de cititori, astfel încât să poată vedea anunțurile pe aspectele lor.

Din perspectiva designului, aceasta este principala prioritate a site-urilor editorilor și a revistelor.

Proiectarea site-urilor web cu mult conținut

Să aruncăm o privire asupra unor editori mari precum Variety:

Primul lucru pe care îl vedeți este un anunț mare în partea de sus. Vom analiza mai mult într-o secundă, înainte - aspectul conținutului. Un antet mare cu multe linkuri - hamburger deasupra, căutare, apel la acțiuni și apoi și mai multe elemente de meniu. Scopul este de a oferi acces ușor la toate categoriile de conținut. Acest lucru este într-un contrast puternic cu multe site-uri de afaceri care au mai puțin de 10 pagini (cu excepția paginilor de blog).

După aceea - o cutie mare pentru articolul principal. Aceasta este o decizie bună de proiectare. Este mai ușor pentru vizitatorii dvs. să decidă ce să facă. Dacă există 10 elemente la fel de importante, efortul mental de a alege unul peste altul ar putea determina unii utilizatori să sară de pe pagină. Cu o ierarhie vizuală clară a articolelor importante pentru cele mai puțin importante, un designer poate face utilizatorii să rămână mai mult timp pe o pagină web.

În dreapta - un alt anunț și un widget „Cel mai popular”, care este exact ceea ce ar dori să vadă majoritatea utilizatorilor. Pentru a se potrivi atât de mult conținut, Variety a decis să-l transforme într-o zonă derulabilă.

Acesta este tipul de machete pe care le-ați urmări în cea mai mare parte cu editori mai mari.

BuzzFeed este un alt exemplu de aspect care este făcut să funcționeze cu cantități mai mari de text. Aici, totuși, designul este mai jucăuș cu culori vibrante și forme care atrag atenția (cum ar fi cele trei butoane din colțul din dreapta sus).

Există mai multe „clasamente” ca 1, 2, 3 pe Trending la dreapta, eticheta roșu aprins pentru știrile „Breaking” și așa mai departe. O tendință majoră într-un design similar este să mergi în atenția utilizatorului. Această atenție trebuie totuși bine direcționată, deoarece nu ați dori să o împărțiți în două elemente la fel de importante.

Iată un exemplu de abordare greșită în care totul încearcă să fie în partea de sus:

Suntem conștienți de faptul că scopul este complet diferit, iar site-ul de mai sus ar putea de fapt să obțină un profit bun, dar ilustrează bine principiul „tot ceea ce încearcă să vă atragă atenția”

Editori și reclame digitale

Proiectarea în jurul reclamelor este un alt subiect major pentru editori. Având în vedere că este principala sursă de venit, este și prioritatea principală. Există câteva lucruri pe care un designer ar trebui să le ia în considerare aici, în primul rând primind feedback sau informații bune din partea echipei AdOps, care înțelege bine cerințele și funcționalitatea acestor reclame.

Exemple pentru aceasta sunt dimensiunile anunțurilor. Există 300 × 250, 300 × 600, există 728 × 90 și 300 × 50.

• Unele s-ar putea lipi de o parte a ecranului, unde puteți defila prin diferite puncte
• Unii ar putea rămâne în propriul lor colț, unii ar rămâne întotdeauna în partea de sus a paginii.
• Alții ar apărea în perechi de două 300 × 250 sau unul de 720x90px.

De unde știi despre toate acestea și care sunt cerințele?

Deci da, primul pas ar fi colectarea tuturor acestor informații. O modalitate mai ușoară de a o privi este în ceea ce privește aspectele. O singură postare poate avea mai multe machete în funcție de obiectivele editorului. Uneori sunt mai puține reclame, alteori sunt mai multe. Uneori anunțurile își schimbă dimensiunea pentru încărcări diferite, alteori rămân constante. Totul se poate schimba rapid, deși pe măsură ce apar noi tendințe și reguli. Adesea zilnic!

Unele dintre lucrurile importante de reținut ar fi:

• Anunțurile cu înălțime s-ar putea încărca. Aceasta înseamnă că conținutul ar fi împins în jos și că proiectarea care este făcută pentru a se potrivi unui anumit widget deasupra pliantei ar eșua.
• Anunțurile ar putea avea nevoie de fundaluri. Acesta ar putea fi un fundal gri deschis care înconjoară anunțul, atingând colțurile ecranului.
• Reclamele au adesea nevoie de spațiu în jurul lor pentru a evita atingerile accidentale. 20-30 pixeli este o distanță bună între reclame.
• Ați dori să adăugați o etichetă „Publicitate” înainte / după, cu scopul de a atrage mai mult furnizorii de anunțuri.
• Nu ar trebui să existe prea multe reclame! Punctul dulce pentru acest lucru este ceea ce ar lucra o echipă AdOps pentru un anumit editor, o anumită pagină și chiar un anumit trafic (cum ar fi Facebook, Snapchat etc.)

Performanța site-ului editorului

Un contribuitor major la performanțe slabe sunt configurările cu peste 8 anunțuri care încearcă să se încarce cu multe alte scripturi în jur. De ce este preocuparea unui proiectant atunci când totul este în cod? Nu pot dezvoltatorii să-l optimizeze? Ei bine, da, dar este aproape o slujbă cu normă întreagă, pe care designerul ar putea să o ajute. Pentru a înțelege toate acestea, trebuie mai întâi să înțelegeți puțin despre browsere

Sursă

Browserele pot utiliza CPU sau GPU-ul unei mașini în funcție de modul în care un anumit element este codat de la un dezvoltator front-end. Uneori, acțiuni cum ar fi animațiile și interacțiunile la apăsare, folosesc CPU sau GPU. Dacă o animație, de exemplu, utilizează procesorul, este foarte probabil să existe un decalaj, dacă este GPU, atunci este posibil să obțineți performanțe mai bune. Cerințele proiectantului ar putea fi diferența dintre cele două.

Iată câteva sfaturi generale:

• Folosiți puține sau deloc umbre. Umbrele sunt foarte scumpe de redat, în special pe dispozitive mobile și laptopuri low-end.
• Nu utilizați filtre de fundal sau neclarități (sau filtre), deoarece acestea sunt, de asemenea, foarte scumpe.
• Păstrați formele simple cât mai mult posibil pentru a reduce calculul suplimentar.
• Nu solicitați animații ale elementelor care afectează aspectul (alte elemente). Proiectați cât mai mult posibil. Orice lucru care se suprapune sau este un popup este o alegere mai bună.
• Păstrați imaginile relativ mici. Acest lucru ar permite dezvoltatorilor să încarce imagini de dimensiuni mai mici, ceea ce ar economisi greutate pe site.
• Păstrați animațiile în general la un nivel minim, în special la încărcarea pe site. Același lucru se aplică schimbărilor de aspect. Prima încărcare este cel mai intens procesor de timp pentru un site web când se aplică tot JavaScript.

Sursă

Prioritatea proiectării

Majoritatea traficului de pe site-urile editorilor provine de pe dispozitive mobile. Deci, cel mai mult timp petrecut pentru lustruirea tuturor detaliilor ar trebui să meargă acolo. Și pe mobil este locul în care sunt necesare majoritatea optimizărilor, deoarece majoritatea dispozitivelor nu sunt flagship-uri high-end, ci smartphone-uri de la 200 la 300 $.

Pe mobil, obiectivul dvs. este să păstrați conținutul lizibil în timp ce prezentați anunțuri într-un mod clar. Păstrați distanța dintre orice element care poate fi făcut clic și anunțurile mari pentru a elimina orice clicuri accidentale pe anunțuri. Dacă este posibil, reduceți toate animațiile și suprapunerile care ar putea face site-ul să se simtă mai puțin rapid.

rezumat

Editorii se concentrează pe o mulțime de conținut și o mulțime de reclame. În general, paginile de destinație și arhivele au o prioritate mai mică decât vizualizările individuale, deoarece traficul ajunge adesea direct la articolele din alte reclame. În calitate de proiectant, obiectivul dvs. este să găsiți cel mai optim mod de a difuza reclame, de a adăuga spații adecvate și de a le separa bine de conținutul principal pentru a menține totul lizibil și utilizabil.

Păstrați elementele UI complexe la un nivel minim pentru a îmbunătăți performanța vitezei și pentru a solicita cât mai puține animații. Pentru a descurca totul bine, editorii trebuie adesea să colaboreze cu agenții de dezvoltare care au o experiență bună cu AdOps, urmează ultimele tendințe și stive de tehnologie în afaceri, cum ar fi DevriX.