11 machete de site-uri care au făcut ca conținutul să strălucească în 2017

De ce oamenii vizitează cu adevărat site-urile web? În cele mai multe cazuri, motivul principal din spatele fiecărei vizite este conținutul. Conținutul are o importanță extremă și fiecare designer dorește să-l prezinte în cel mai util și intuitiv mod. Atunci nu este surprinzător faptul că selectarea unei machete pentru conținutul dvs. este unul dintre primele lucruri pe care le fac designerii când încep un nou proiect.

Mulți designeri consideră că aspectul pentru fiecare site web pe care lucrează ar trebui să fie complet unic pentru a satisface obiectivele proiectului - acest lucru este departe de adevăr. Dacă vizitați site-uri web populare, veți observa că multe dintre ele folosesc machete similare. Aceasta nu este o coincidență sau este făcută din lene, deoarece aceste machete au trei avantaje semnificative:

  • Sunt utilizabile. Aspectele obișnuite au devenit atât de comune, deoarece au dovedit că utilizatorii pot lucra cu ei.
  • Sunt familiari. O experiență bună a utilizatorului este creată prin construirea unui sentiment de familiaritate cu utilizatorii. Vizitatorii simt un sentiment plăcut de deja-vu atunci când văd caracteristici familiare stabilite așa cum s-ar aștepta. Drept urmare, oamenii vor petrece timp digerând conținutul, mai degrabă decât să se concentreze pe designul unic al paginii.
  • Ei economisesc bani. Reutilizarea layouturilor existente este o economie de timp. Proiectanții vor petrece mai puțin timp experimentând aspectul și se vor concentra mai mult pe ierarhia vizuală și pe alte aspecte ale designului care au un impact direct asupra experienței utilizatorului.

Deși fiecare proiect este unic și necesită o abordare individuală, este util să vă familiarizați cu machete comune. În acest articol, vom arunca o privire asupra a 11 machete foarte comune pe care le puteți găsi pe nenumărate site-uri astăzi.

1. O singură coloană.

Dispunerile unei singure coloane prezintă conținutul principal într-o singură coloană verticală. Acest tip de aspect este poate cel mai simplu din această listă și este cel mai ușor pentru navigatori. Vizitatorii pur și simplu defilează în jos pentru a vedea mai mult conținut.

În ciuda simplității sale, machete cu o singură coloană sunt destul de populare printre multe site-uri web. Revoluția mobilă a avut, de asemenea, un impact asupra popularității acestui tip de aspect - machete cu o singură coloană se potrivesc perfect ecranelor mobile.

Când să-l folosești.

Acest aspect găsește aplicație în multe bloguri personale bazate pe principii de design minimalist. Acesta este un aspect comun pentru microbloguri, cum ar fi Tumblr.

Medium, o platformă populară de blogging, folosește acest tip de layout pentru a-și prezenta poveștile. Toate articolele de pe Medium sunt prezentate într-o singură coloană.

Sfaturi de proiectare

  • Luați în considerare meniurile „lipicioase” pentru paginile lungi. Întrucât aspectul unei singure coloane este adesea utilizat pentru paginile cu defilare lungă, este esențial să păstrați navigarea întotdeauna la vedere. „Navigare lipicioasă” vă ajută să evitați vizitatorii care trebuie să deruleze până la partea de sus a paginii pentru a naviga.
Sursa imaginii: codemyui

2. Ecran Split

Un aspect despărțit (sau un ecran împărțit în două) este perfect pentru o pagină care are două bucăți principale de conținut de aceeași importanță. Permite designerilor să afișeze ambele articole simultan, oferindu-le în același timp o considerație egală.

Două elemente centrale sunt afișate simultan. Sursa imaginii: 62 de modele

Când să-l folosești

Dispunerile de ecran despărțite sunt perfecte atunci când site-ul dvs. oferă două variații drastic diferite ale călătoriei utilizatorului, cum ar fi două tipuri diferite de instrucțiuni, așa cum vedem în exemplul Dropbox de mai jos.

Dispunerile de ecran despărțite sunt, de asemenea, ideale pentru contrast și tocmai de aceea designerii folosesc adesea acest aspect pentru a pune două elemente unul împotriva celuilalt.

Caracteristicile opuse ale dualității (culori opuse). Sursa imaginii: Personalizări Google Star Wars

Sfaturi de proiectare.

  • Evitați să utilizați prea mult conținut în secțiuni divizate. Modelele de ecran despărțit nu se extind bine odată cu creșterea conținutului, așa că este mai bine să evitați alegerea acestui tip de aspect dacă trebuie să furnizați multe informații textuale sau vizuale în secțiuni divizate.
  • Luați în considerare adăugarea animației. Puteți crea o experiență mai dinamică prin încorporarea de detalii animate.
Sursa imaginii: Cehov este viu

Asimetria este lipsa egalității între cele două părți ale machetei. Asimetria este o tehnică preferată de multă vreme în lumea artei și a devenit recent populară printre designerii web.

Mulți oameni confundă asimetria cu dezechilibrul, dar, de fapt, scopul asimetriei este de a crea un echilibru atunci când este imposibil sau nu este de dorit să folosească o greutate egală pentru două secțiuni. Utilizarea asimetriei face posibilă crearea tensiunii și dinamismului, iar asimetria facilitează un comportament de scanare mai bun prin focalizarea atenției utilizatorului asupra obiectelor individuale (puncte focale). Schimbând lățimea, scala și culoarea fiecărei bucăți de conținut asimetrice, proiectantul îndeamnă vizitatorul să se angajeze vizual.

Când să-l folosești.

Acest tip de aspect poate fi utilizat atunci când proiectanții doresc să creeze machete interesante și neașteptate, oferind în același timp accentul direcțional. Aplicată corespunzător, asimetria poate crea spațiu activ care ghidează ochiul de la un element la altul, chiar și peste goliciune. Luați în considerare modul în care Dropbox arată clar punctele de focalizare în exemplul de mai jos.

Asimetria face ca pagina principală Dropbox să pară mai energică.

Sfaturi de proiectare.

  • Asigurați-vă că conținutul dvs. poate fi prezentat într-un aspect asimetric. Un aspect asimetric nu este practic pentru fiecare site. Probabil funcționează cel mai bine pentru machete minimaliste.
  • Adăugați focalizarea cu culoarea. Asimetria este înrădăcinată în ideea că un obiect cu o greutate vizuală mai mare va atrage atenția asupra acestuia. Puteți utiliza elemente cu contrast de culoare ridicat pentru a adăuga greutate vizuală în anumite părți ale designului.
Contrastul ridicat de culoare adaugă greutate vizuală pentru anumite părți ale designului. Sursa imaginii: Culture PL

4. O grilă de cărți.

Cărțile sunt recipiente excelente pentru informații cu clic - - le permite proiectanților să prezinte o doză grea de informații într-o manieră digerabilă. Previzualizările cu dimensiunea mușcăturilor (de obicei o imagine și o scurtă descriere) ajută vizitatorii să găsească conținutul care le place și să se arunce în detalii făcând clic sau atingând cardul.

Cel mai important lucru despre o grilă de cărți este că acest tip de aspect este aproape infinit manipulabil. Grilele pot varia ca dimensiune, distanțare și numărul de coloane, iar stilul cărților poate varia în funcție de dimensiunea ecranului (cardurile pot fi reorganizate pentru a se potrivi cu orice ecran). Acesta este motivul pentru care grilele de carduri funcționează atât de bine cu modele responsive.

Când să-l folosești.

O grilă de dispunere de carduri este bună pentru site-urile cu conținut puternic care afișează o mulțime de elemente cu ierarhie egală.

YouTube are o structură grilă strictă; rânduri drepte de cărți sunt grupate în categorii.Fiecare pin de pe placa Pinterest este reprezentat ca un card.

Sfaturi de proiectare.

  • Faceți ca întreaga carte să poată face clic, nu doar anumite părți specifice. Interacțiunea utilizatorului cu un card este mult mai confortabilă atunci când utilizatorii nu trebuie să facă clic cu exactitate pe titlul sau imaginea unei cărți pentru a accesa detaliile conținutului.
  • Dacă cardul dvs. conține o imagine, luați în considerare cum va arăta pe un ecran mai mic. O imagine care nu se dimensionează bine și devine ilizibilă pe micile ecrane creează o experiență proastă a utilizatorului.
  • Acordați atenție spațiului alb dintre cărți, deoarece influențează modul în care vizitatorii navighează. Mai mult spațiu între carduri face navigarea mai lentă, dar vizitatorii vor acorda mai multă atenție fiecărui card. Spațiul minim permite scanarea rapidă, dar crește și riscurile pe care vizitatorii ar putea să le treacă cu vederea un anumit conținut.
  • Este posibil să încorporați feedback animat. Cardul va apărea ca un element cu clic.
Smashing Magazine are un feedback animat excelent pentru cărțile sale.

Aceasta este poate cea mai complexă dispunere menționată în acest post. După cum sugerează și numele, acest aspect a fost inițial popularizat de ziare și reviste, ceea ce a avut o problemă de a prezenta cantități uriașe de informații pentru cititor într-o manieră ușor de urmărit. Designerii de imprimare au folosit sistemul de grile în acest scop. Aspectul este construit folosind o grilă modulară care permite flexibilitate - o machete cu mai multe coloane folosește o greutate vizuală diferită pentru a acorda prioritate informațiilor.

Aspectul revistei permite cititorilor să scaneze, să citească. și înțelegeți rapid o pagină. Sursa imaginii: New York Times

Similar revistelor de hârtie, revistele digitale folosesc o grilă multicolumă care vă permite să creați o ierarhie complexă și să integrați text și ilustrații. Scopul principal este același - vizitatorii trebuie să poată scana, citi și înțelege rapid o pagină. Designerii se străduiesc să creeze un ritm vizual. Ei încearcă să faciliteze ochiului scanarea secțiunilor din pagină și să permită ochiului să călătorească natural de la un bloc la altul. În același timp, designerul încearcă să oprească diferitele blocuri de a concura pentru atenție.

Când să-l folosești.

Aspectul revistei este o alegere bună pentru publicațiile care au o ierarhie complexă, cu cantități mari de conținut pe o pagină. Fără utilizarea eficientă a unei grile, este probabil ca tot conținutul de pe pagina de pornire să pară mai aglomerat și mai puțin organizat.

Un aspect în revistă este cel mai bun pentru site-urile de știri care au o mulțime de conținut actualizat regulat în mai multe categorii.

Sfaturi de proiectare.

  • Acest aspect subliniază titluri și imagini. Mărimea titlului / imaginii este direct legată de atenția pe care o comandă. Mai multe elemente proeminente atrag atenția unui utilizator mai repede decât cea mai puțin proeminentă. Luăm, de exemplu, New York Times - cel mai important conținut din pagină are miniaturi mai mari, titluri mai mari și text mai detaliat.
New York Times folosește o dimensiune diferită pentru text pentru a crea un sentiment de importanță - dimensiunile textului variază pentru a crea o ierarhie vizuală.
  • Stabilirea unei grile necesită atenție atât asupra ritmurilor orizontale, cât și a celor verticale și sunt la fel de importante dacă doriți să creați un aspect bun. Luați în considerare diferența dintre următoarele exemple. În primul exemplu, grila este în concordanță cu lățimea coloanei și distanțarea orizontală, dar distanța verticală variată creează zgomot vizual. În cel de-al doilea caz, distanțarea pe coloane orizontale și spațiul elementelor verticale sunt consecvente, ceea ce face ca structura generală să pară mai curată și mai confortabilă pentru utilizatorul care consumă vizual conținutul.

6. Cutii.

Acest aspect are o casetă mare cu lățimea antetului și câteva cutii mai mici, care ocupă fiecare o porțiune din ecranul imobiliar al casetei mai mari. Numărul de cutii mai mici poate varia de la două la cinci. Fiecare dintre casete poate fi un link care duce la o pagină mai mare, mai complexă.

Când să-l folosești.

Acesta este un aspect destul de versatil, care poate fi utilizat atât pentru site-uri individuale de portofoliu, cât și pentru site-uri web corporative / e-commerce.

Sursa imaginii: mrporter

Sfaturi de proiectare.

  • Conectați casetele pentru a spune o poveste. Cutia mare poate fi folosită pentru a expune produsele, în timp ce casetele mai mici pot oferi informații suplimentare despre produs.
Sursa imaginii: Microsoft Surface

Navigarea este o parte critică a oricărui site web - meniul principal este primul lucru pe care majoritatea utilizatorilor îl caută atunci când doresc să navigheze. Alături de navigarea orizontală din partea de sus, este posibil să păstrați la vedere opțiunile de meniu plasându-l într-o bară laterală fixă. Bara laterală este o coloană verticală din partea stângă sau dreaptă a paginii. Pentru acest aspect, bara laterală rămâne staționată și rămâne mereu vizibilă în timp ce restul paginii se schimbă pe măsură ce utilizatorii defilează pagina în jos. Acest mod de navigare rămâne accesibil.

Când să-l folosești.

Acest aspect funcționează bine pentru site-urile web cu un număr relativ limitat de opțiuni de navigare. Este de preferat ca toate opțiunile să fie vizibile atunci când un utilizator intră în pagină.

Sursa imaginii: măsponte

Sfaturi de proiectare.

  • Bara laterală poate conține, de asemenea, alt conținut decât sau în plus față de un meniu, cum ar fi legături de social media, informații de contact sau orice altceva pe care doriți să le găsească ușor vizitatorilor.
Trefecta oferă schimbarea limbii și a opțiunilor de partajare a paginilor în bara laterală.

Acest aspect se bazează pe ideea că utilizarea imaginilor în design este cea mai rapidă modalitate de a vinde un produs. Imaginile au posibilitatea de a crea o conexiune emoțională cu vizitatorii - o fotografie mare, îndrăzneață sau o ilustrație a unui obiect face o declarație puternică și creează o primă impresie uimitoare.

Când să-l folosești.

Acest aspect este excelent atunci când trebuie să demonstrați un singur produs / serviciu și să vă concentrați întreaga atenție a utilizatorului asupra acestuia.

Lipsa altor elemente din acest aspect atrage atenția utilizatorului în totalitate asupra produsului.

Folosind acest tip de aspect, este posibil să construim o experiență emoțională cu adevărat imersivă. Un exemplu excelent este Species in Pieces, care oferă o experiență bogată și crește conștientizarea speciilor pe cale de dispariție.

Sursa imaginii: Specie în bucăți

Sfaturi de proiectare.

  • Asigurați-vă că graficul dvs. este suficient de bun pentru a fi prezentat în mod proeminent. Imaginea, fotografia sau ilustrația ar trebui să fie relevante atât pentru mesajul pe care doriți să îl transmiteți, cât și de înaltă calitate.
  • Luați în considerare tipografia. Tipografia însoțește imaginea. Dimensiunea, greutatea tipografiei și culoarea sunt toate proprietățile unei caractere care trebuie utilizate pentru a consolida designul.

9. Aspect în formă de F.

Acest tip de aspect a fost creat pe baza modului în care utilizatorii citesc conținutul de pe web. Modelul de scanare în formă de F, definit inițial de NNGroup, afirmă că utilizatorii scanează de obicei blocuri grele de conținut într-un model care arată ca literele F sau E. Ochii noștri încep din colțul din dreapta sus al paginii, scanează orizontal, apoi renunțați la linia următoare și faceți același lucru din nou și din nou, până când vom găsi ceva care ne atrage atenția (conținut interesant). Acest model de scanare este relevant nu numai pentru utilizatorii desktop, ci și pentru utilizatorii de telefonie mobilă.

Când să-l folosești.

Acest aspect este bun pentru paginile care trebuie să prezinte o mulțime de opțiuni diferite și să permită utilizatorilor să le scaneze rapid. Vizitatorii vor răspunde mai bine la aspectul modelului F, care imită modelul natural de scanare. Acest lucru este util pentru pagina principală a site-ului de știri sau pagina care conține rezultate de căutare.

New Yorker folosește un aspect în formă de F pe pagina sa de pornire.

Sfaturi de proiectare.

  • Ajustați conținutul în funcție de comportamentul de scanare. Merită să plasați cel mai important conținut pe partea stângă și dreapta a paginii, unde utilizatorul începe și își încheie scanarea orizontală. Când vizitatorii ajung la sfârșitul rândului, opresc o secundă înainte de a trece la rândul următor, iar această pauză vă oferă posibilitatea de a prezenta conținut.
  • Folosiți indicii vizuale pentru a ghida vizitatorul. Este posibil să vă concentrați atenția utilizatorilor asupra unui element specific, punând mai multă greutate vizuală. De exemplu, puteți evidenția cuvinte cheie dintr-un text pentru a focaliza atenția utilizatorilor.

10. Aspect în formă de Z.

Dispunerea modelului Z imită de asemenea obiceiurile naturale de scanare. Vizitatorii site-ului (din culturile occidentale) încep în colțul din stânga sus. Acestea scanează de la stânga sus la dreapta sus, formând o linie orizontală. Următorul pas, însă, este puțin diferit - în loc să cadă direct în jos, ca în modelul în formă de F, ochii se rătăcesc în jos și în partea stângă a paginii, creând o linie în diagonală. În cele din urmă, privirea din nou spre dreapta, formând o a doua linie orizontală.

Când să-l folosești.

În timp ce modelul F este mai bun pentru scanarea multor conținuturi, modelul Z este mai potrivit pentru site-urile cu un obiectiv singular și mai puțin conținut. Acest model este eficient pentru a direcționa atenția utilizatorilor către anumite puncte, folosind imagini, text și CTA bine plasate.

Acest aspect este excelent atunci când un site are o agendă specifică sau apeluri la acțiune cu care utilizatorii ar trebui să interacționeze. Sursa imaginii: Basecamp

Sfaturi de proiectare.

  • Implicați utilizatorii cu un zig-zag (sau model continuu Z). Este posibil să se implice utilizatorii în scanare alternând text și imagini de câteva ori pentru a crea un zig-zag.
Un model zig-zag este un model Z, repetat de câteva ori pe aceeași pagină. Zig-zag-urile creează un ritm care menține vizitatorii interesați. Sursa imaginii: Evernote

Elementul principal al acestei machete este o fotografie mare care este utilizată ca fundal pentru pagină. Este folosit pentru a introduce vizitatorii în conținutul site-ului. Acest aspect are ocazia de a crea o primă impresie puternică și încurajează interacțiunea utilizatorilor.

Când să-l folosești.

Acest aspect este excelent atunci când doriți să spuneți mai puțin și să afișați mai multe.

Sursa imaginii: Căutarea Siriei

Sfaturi de proiectare.

  • Alegeți cu atenție o imagine de fundal. Întrucât aspectul se bazează pe o singură imagine, este esențial să o selectăm pe cea potrivită. O imagine irelevantă poate confunda cu ușurință vizitatorii.
  • Utilizați videoclipuri în loc de imagini pentru a angaja vizitatori. S-ar putea să merite să folosești videoclip în loc de fotografie, mai ales atunci când trebuie să demonstrezi ceva în acțiune.
Videoclipul vă oferă o oportunitate mai bună de a vă angaja vizitatorii într-o imagine statică. Sursa imaginii: Tesla
  • Nu lăsați proiectarea să reducă lizibilitatea. Textul pe care îl utilizați ca suprapunere peste imagine ar trebui să fie suficient de contrastant pentru a putea fi citit. Dacă textul nu contrastează suficient, luați în considerare adăugarea unei suprapuneri la imagine.
Sursa imaginii: Google Wallet

Atunci când proiectați un site, este important să rețineți că conținutul este întotdeauna rege. Scopul principal al site-ului web rămâne publicarea de conținut ușor digerabil. Printre multe variante de conținut, este esențial să îl selectați pe cel care face ca conținutul dvs. să strălucească.

Publicat inițial pe theblog.adobe.com pe 13 decembrie 2017.