11 rasporeda web stranica zbog kojih je sadržaj zasjao u 2017. godini

Zašto ljudi stvarno posjećuju web stranice? U većini slučajeva osnovni je razlog svakog posjeta sadržaj. Sadržaj je od najveće važnosti i svaki dizajner želi ga predstaviti na najkorisniji i intuitivniji način. Stoga ne iznenađuje da je odabir izgleda za vaš sadržaj jedna od prvih stvari koje dizajneri učine kada započnu novi projekt.

Mnogi dizajneri smatraju kako bi izgled svake web stranice na kojoj rade trebao biti potpuno jedinstven kako bi se zadovoljili ciljevi projekta - to je daleko od istine. Ako posjetite popularne web stranice, primijetit ćete da mnoge od njih koriste slične izglede. Ovo nije slučajnost ili je napravljeno iz lijenosti, to je zato što ovi izgledi imaju tri značajne prednosti:

  • Korisni su. Uobičajeni rasporedi postali su toliko uobičajeni jer su dokazali da korisnici mogu raditi s njima.
  • Oni su poznati. Dobar korisnički doživljaj stvara se izgradnjom osjećaja upoznavanja s korisnicima. Posjetitelji osjećaju ugodan osjećaj deja-vu kad vide poznate značajke izložene onako kako bi i očekivali. Kao rezultat toga, ljudi će provoditi vrijeme probavljajući sadržaj umjesto da se fokusiraju na jedinstveni dizajn stranice.
  • Uštede novac. Ponovna upotreba postojećih izgleda štedi vrijeme. Dizajneri će potrošiti manje vremena eksperimentirajući s izgledom i više će se usredotočiti na vizualnu hijerarhiju i druge aspekte dizajna koji imaju izravan utjecaj na korisničko iskustvo.

Iako je svaki projekt jedinstven i zahtijeva individualan pristup, korisno je biti upoznat s uobičajenim izgledima. U ovom ćemo članku pogledati 11 vrlo uobičajenih izgleda koje danas možete pronaći na bezbroj web lokacija.

1. Jedan stupac.

Izgledi pojedinih stupaca predstavljaju glavni sadržaj u jednom vertikalnom stupcu. Ova vrsta izgleda možda je najjednostavnija s ovog popisa i korisnicima je najjednostavnija navigacija. Posjetitelji se jednostavno pomaknu prema dolje da vide više sadržaja.

Unatoč svojoj jednostavnosti, izgled jednog stupca prilično je popularan na mnogim web stranicama. Mobilna revolucija imala je utjecaj i na popularnost ove vrste izgleda - izgled jednog stupca savršeno se uklapa u mobilne ekrane.

Kada ga koristiti.

Ovaj izgled nalazi primjenu na mnogim osobnim blogovima koji se temelje na minimalističkim principima dizajna. Ovo je uobičajeni izgled za mikrobloge kao što je Tumblr.

Medium, popularna platforma za pisanje blogova, koristi ovakav izgled da bi predstavio svoje priče. Svi članci na Mediju predstavljeni su u jednom stupcu.

Savjeti za dizajn

  • Razmislite o "ljepljivim" izbornicima za duge stranice. Budući da se izgled jednog stupca često koristi za stranice s dugim pomicanjem, važno je da navigacija bude uvijek na vidiku. "Ljepljiva navigacija" pomaže vam izbjeći da posjetitelji moraju pomicati sve do vrha stranice da bi se kretali.
Izvor slike: codemyui

2. Podijeljeni ekran

Izgled podijeljenog zaslona (ili jedan zaslon podijeljen na dva) savršen je za stranicu koja ima dva glavna dijela jednake važnosti. Omogućuje dizajnerima da prikazuju obje stavke istovremeno, istovremeno im uzimajući jednaku obzir.

Dva centralna elementa prikazana su istovremeno. Izvor slike: 62 modela

Kada ga koristiti

Raspored podijeljenih zaslona savršen je kada vaša web stranica nudi dvije drastično različite varijacije korisničkog putovanja, poput dvije različite vrste uputa kao što vidimo u primjeru Dropboxa u nastavku.

Podijeljeni izgled ekrana također je idealan za kontrast i zato dizajneri često koriste ovaj izgled kako bi postavili dvije stavke jedna protiv druge.

Suprotne karakteristike dualnosti (suprotne boje). Izvor slike: Prilagodbe Google Star Wars

Savjeti za dizajn.

  • Izbjegavajte upotrebu previše sadržaja u podijeljenim odjeljcima. Dizajni podijeljenih zaslona se ne proširuju tako kako sadržaj raste, pa je bolje izbjegavati odabir ove vrste izgleda ako trebate pružiti puno tekstualnih ili vizualnih podataka u podijeljenim odjeljcima.
  • Razmislite o dodavanju animacije. Možete stvoriti dinamičnije iskustvo uključivanjem animiranih detalja.
Izvor slike: Čehov je živ

Asimetrija je nedostatak jednakosti dviju strana izgleda. Asimetrija je dugo omiljena tehnika u svijetu umjetnosti, a odnedavno je postala popularna među web dizajnerima.

Mnogi ljudi zbunjuju asimetriju s neravnotežom, ali u stvari, cilj asimetrije je stvoriti ravnotežu kad je za dva odsječka nemoguće ili nije poželjno koristiti jednaku težinu. Upotreba asimetrije omogućava stvaranje napetosti i dinamike, a asimetrija omogućuje bolje ponašanje skeniranja usredotočenjem pažnje korisnika na pojedine objekte (žarišta). Promjenom širine, razmjera i boje svakog asimetričnog dijela sadržaja dizajner poziva posjetitelja da ostane vizualno angažiran.

Kada ga koristiti.

Ova vrsta izgleda može se koristiti kada dizajneri žele stvoriti zanimljive i neočekivane izvode, istovremeno pružajući usmjereni naglasak. Na odgovarajući način, asimetrija može stvoriti aktivni prostor koji vodi oko od jednog elementa do drugog, čak i kroz prazninu. Razmotrite kako Dropbox jasno pokazuje točke fokusa u donjem primjeru.

Asimetrija čini da Dropbox početna stranica izgleda energičnije.

Savjeti za dizajn.

  • Provjerite može li se vaš sadržaj predstaviti u asimetričnom obliku. Asimetrični izgled nije praktičan za svako mjesto. Vjerojatno djeluje najbolje za minimalistički izgled.
  • Dodajte fokus s bojom. Asimetrija je ukorijenjena u ideji da će objekt veće vizualne težine na to prvo privući pažnju. Možete koristiti elemente s visokim kontrastom boja kako biste dodali vizualnu težinu određenim dijelovima dizajna.
Visoki kontrast boja dodaje vizualnu težinu određenim dijelovima dizajna. Izvor slike: Culture PL

4. Rešetka karata.

Karte su sjajni spremnici za informacije koje se mogu kliknuti - - omogućuju dizajnerama da na probavljiv način predstave veliku dozu informacija. Pretpregledi veličine bita (obično slika i kratak opis) pomažu posjetiteljima da pronađu sadržaj koji im se sviđa i uđu u detalje klikom ili dodirom kartice.

Najvažnija stvar rešetke karata je ta da je s ovakvim izgledom gotovo beskonačno moguće upravljati. Mreže mogu varirati u veličini, razmaku i broju stupaca, a stil kartica može se razlikovati ovisno o veličini zaslona (kartice se mogu preurediti tako da odgovaraju bilo kojem zaslonu). Zato rešetke karata funkcioniraju tako dobro sa fleksibilnim dizajnom.

Kada ga koristiti.

Izgled mreža kartica dobar je za web lokacije sa velikim sadržajem koje prikazuju puno predmeta s jednakom hijerarhijom.

YouTube ima strogi raspored rešetki; Ravni redovi karata grupirani su u kategorije.Svaki pin na Pinterest ploči predstavljen je kao kartica.

Savjeti za dizajn.

  • Učinite kliknuti cijelu karticu, a ne samo određene dijelove. Interakcija korisnika s karticom mnogo je ugodnija kada korisnici ne moraju precizno kliknuti naslov ili sliku kartice da bi pristupili detaljima sadržaja.
  • Ako vaša kartica sadrži sliku, razmislite kako će to izgledati na manjem zaslonu. Slika koja ne mjeri dobro i postaje nečitljiva na malim ekranima stvara loše korisničko iskustvo.
  • Obratite pažnju na bijeli razmak između karata jer on utječe na to kako posjetitelji pregledavaju. Više prostora između kartica čini pregledavanje sporijim, ali posjetitelji će posvetiti više pažnje svakoj kartici. Minimalni prostor omogućuje brzo skeniranje, ali također povećava rizik da posjetitelji mogu previdjeti neki sadržaj.
  • Moguće je uključiti animirane povratne informacije. Kartica će se pojaviti kao element na koji se može kliknuti.
Smashing Magazine ima sjajne animirane povratne informacije o svojim karticama.

Ovo je možda najsloženiji izgled spomenut u ovom postu. Kao što ime sugerira, ovaj su oblik u početku popularizirali novine i časopisi, koji su imali problem predstavljati ogromne količine podataka čitatelju na jednostavan način pratiti. Dizajneri ispisa koristili su rešetkasti sustav. Izgled je izrađen pomoću modularne rešetke koja omogućava fleksibilnost - izgled s više stupaca koristi različitu vizualnu težinu za određivanje prioriteta informacija.

Izgled časopisa omogućuje čitateljima da skeniraju, čitaju. i brzo razumjeti stranicu Izvor slike: New York Times

Slično kao papirnati časopisi, digitalni časopisi koriste rešetku više kolona koja vam omogućuje stvaranje složene hijerarhije i integriranje teksta i ilustracija. Primarni je cilj isti - posjetitelji moraju biti u mogućnosti brzo skenirati, pročitati i razumjeti stranicu. Dizajneri teže stvaranju vizualnog ritma. Oni pokušavaju olakšati oku skeniranje odjeljaka na stranici i omogućuju prirodnom prijelazu iz jednog bloka u drugi. U isto vrijeme, dizajner pokušava spriječiti različite blokove da se natječu za pažnju.

Kada ga koristiti.

Izgled časopisa dobar je izbor za publikacije koje imaju složenu hijerarhiju s velikim količinama sadržaja na stranici. Bez učinkovite uporabe mrežice, vjerovatno je da će sav sadržaj na početnoj stranici izgledati zbijenije i manje organizirano.

Izgled u obliku časopisa najbolji je za web-lokacije s vijestima koje imaju mnoštvo redovito ažuriranih sadržaja u više kategorija.

Savjeti za dizajn.

  • Ovaj izgled naglašava naslove i slike. Veličina naslova / slike izravno je povezana s pažnjom koju zapovijeda. Istaknutiji elementi crtaju korisnikov fokus brže od manje istaknutih. Uzmimo za primjer New York Times - najvažniji sadržaj na stranici ima veće minijature, veće naslove i detaljniji tekst.
New York Times koristi drugu veličinu teksta za stvaranje osjećaja važnosti - veličine teksta variraju u stvaranju vizualne hijerarhije.
  • Postavljanje rešetke zahtijeva pažnju i horizontalnog i vertikalnog ritma, a oni su podjednako važni ako želite stvoriti dobar izgled. Razmotrite razliku između sljedećih primjera. U prvom primjeru rešetka je u skladu s širinom stupca i vodoravnim razmakom, ali raznoliki okomiti razmak stvara vizualni šum. U drugom su slučaju vodoravni razmaci stupaca i okomiti razmaci elemenata, što čini cjelokupnu strukturu čišćom i ugodnijom za korisnika koji vizualno konzumira sadržaj.

6. Kutije.

Ovaj izgled ima veliku kutiju širine zaglavlja i nekoliko manjih okvira koji svaki zauzimaju dio nekretnine zaslona veće kutije. Broj manjih kutija može se kretati od dvije do pet. Svaki od okvira može biti veza koja vodi do veće, složenije stranice.

Kada ga koristiti.

Ovo je prilično svestran izgled koji se može koristiti kako za pojedinačne web stranice u obliku portfelja, tako i za web stranice korporacije / e-trgovine.

Izvor slike: mrporter

Savjeti za dizajn.

  • Povežite kutije da biste ispričali priču. Velika kutija može se koristiti za predstavljanje proizvoda, dok manje kutije mogu pružiti dodatne informacije o proizvodu.
Izvor slike: Microsoft Surface

Navigacija je kritični dio bilo koje web stranice - glavni izbornik je prvo što većina korisnika traži kada žele navigirati. Uz vodoravnu navigaciju s gornje strane, moguće je zadržati mogućnosti izbornika postavljanjem u fiksnu bočnu traku. Bočna traka vertikalni je stupac na lijevom ili desnom dijelu stranice. Za ovaj izgled bočna traka ostaje nepomična i uvijek ostaje vidljiva dok se ostatak stranice mijenja dok korisnici prelaze stranicu prema dolje. Na ovaj način navigacija ostaje dostupna.

Kada ga koristiti.

Ovaj izgled dobro funkcionira za web stranice s relativno ograničenim brojem opcija za navigaciju. Poželjno je da sve opcije budu vidljive kada korisnik uđe na stranicu.

Izvor slike: mereponte

Savjeti za dizajn.

  • Bočne trake mogu sadržavati i sadržaj koji nije osim dodatnog izbornika, kao što su veze na društvenim mrežama, kontaktni podaci ili bilo što drugo što posjetitelji lako pronađu.
Trefecta nudi opcije promjene jezika i dijeljenja stranica u bočnoj traci.

Ovaj se raspored temelji na ideji da je upotreba slika u dizajnu najbrži način prodaje proizvoda. Slike imaju priliku stvoriti emocionalnu vezu s posjetiteljima - velika, podebljana fotografija ili ilustracija predmeta daje snažne izjave i stvara zadivljujući prvi dojam.

Kada ga koristiti.

Ovaj je izgled sjajan kada trebate demonstrirati samo jedan proizvod / uslugu i usmjeriti cjelokupnu pažnju korisnika na njega.

Nedostatak drugih elemenata u ovom izgledu potpuno usmjerava pažnju korisnika prema proizvodu.

Pomoću ove vrste izgleda moguće je izgraditi doista impresivno, emocionalno iskustvo. Jedan sjajan primjer su vrste u komadima koje nude bogato iskustvo i podižu svijest o ugroženim vrstama.

Izvor slike: Vrste u komadima

Savjeti za dizajn.

  • Provjerite je li vaša grafika dovoljno dobra da bi bila istaknuta. Slika, fotografija ili ilustracija trebaju biti relevantni za poruku koju želite isporučiti i visoke kvalitete.
  • Razmotrite tipografiju. Tipografija prati sliku. Veličina, težina slova i boja su sva svojstva slova koja se trebaju koristiti za pojačanje dizajna.

9. Izgled F oblika.

Ova vrsta izgleda nastala je na temelju načina na koji korisnici čitaju sadržaj na webu. Uzorak skeniranja u obliku slova F, koji je izvorno definirao NNGroup, navodi da korisnici obično skeniraju teške blokove sadržaja u obrascu koji izgleda poput slova F ili E. Naše se oči počinju u gornjem desnom kutu stranice, skeniraju vodoravno, a zatim spustite se na sljedeći redak i radite isto uvijek iznova dok ne pronađemo nešto što će privući našu pažnju (zanimljiv sadržaj). Ovaj je obrazac skeniranja relevantan ne samo za korisnike desktop računala, već i za mobilne korisnike.

Kada ga koristiti.

Ovaj je izgled dobar za stranice koje trebaju predstaviti puno različitih opcija i omogućiti korisnicima da ih brzo skeniraju. Posjetitelji će bolje odgovoriti na izgled F-uzorka, koji oponaša prirodni uzorak skeniranja. Ovo je korisno za početnu stranicu ili stranicu sa vijestima koja sadrži rezultate pretraživanja.

New Yorker koristi izgled F oblika na svojoj početnoj stranici.

Savjeti za dizajn.

  • Prilagodite sadržaj prema ponašanju skeniranja. Vrijedno je postaviti najvažniji sadržaj na lijevu i desnu stranu stranice, gdje korisnik započinje i završava svoje horizontalno skeniranje. Kada posjetitelji dođu do kraja reda, pauziraju djelić sekunde prije prelaska na sljedeći redak, a ova stanka pruža vam priliku za predstavljanje sadržaja.
  • Upotrijebite vizualne znakove za usmjeravanje posjetitelja. Pozornost korisnika moguće je usmjeriti na određeni element dodavanjem veće vizualne težine na njega. Na primjer, možete istaknuti ključne riječi u tekstu kako biste usredotočili pažnju korisnika.

10. Izgled oblika Z

Izgled Z uzorka također oponaša prirodne navike skeniranja. Posjetitelji web mjesta (zapadnih kultura) započinju u gornjem lijevom kutu. Oni skeniraju od gore lijevo do vrha desno, tvoreći horizontalnu liniju. Sljedeći je korak ipak malo drugačiji - umjesto da padaju izravno dolje, kao u uzorku u obliku slova F, oči im lutaju prema dolje i na lijevu stranu stranice, stvarajući dijagonalnu liniju. Konačno, ponovno pogled na desnu stranu, tvoreći drugu vodoravnu liniju.

Kada ga koristiti.

Dok je F-uzorak bolji za skeniranje velikog broja sadržaja, Z-uzorak je pogodniji za web mjesta sa jedinstvenim ciljem i manje sadržaja. Ovaj je obrazac učinkovit pri usmjeravanju pažnje korisnika na određene točke pomoću dobro postavljenih vizuala, teksta i CTA-ova.

Ovaj je raspored izvrstan kada web lokacija ima određen dnevni plan ili poziv na radnju s kojim bi korisnici trebali komunicirati. Izvor slike: Basecamp

Savjeti za dizajn.

  • Angažirajte korisnike cik-cak (ili nastavak Z-uzorka). U skeniranje je moguće uključiti korisnike naizmjeničnim izmjenjivanjem teksta i slika radi stvaranja cik-caka.
Zig-zag uzorak je Z-uzorak ponovljen nekoliko puta na istoj stranici. Zig-zagovi stvaraju ritam koji posjetitelje zanima. Izvor slike: Evernote

Temeljni element ovog izgleda je jedna velika fotografija koja se koristi kao pozadina stranice. Koristi se za upoznavanje posjetitelja sa sadržajem web mjesta. Ovaj izgled ima priliku stvoriti snažan prvi dojam i potiče interakciju korisnika.

Kada ga koristiti.

Ovaj je raspored odličan kada želite reći manje i pokazati više.

Izvor slike: U potrazi za Sirijom

Savjeti za dizajn.

  • Pažljivo odaberite pozadinsku sliku. Kako se izgled temelji na jednoj jedinoj slici, bitno je odabrati pravu. Nevažna slika lako može zbuniti posjetitelje.
  • Upotrijebite videozapise umjesto slika da biste privukli posjetitelje. Možda bi bilo vrijedno upotrijebiti video umjesto fotografije, pogotovo kada morate nešto pokazati u akciji.
Video vam pruža bolju priliku za privlačenje posjetitelja na statičku sliku. Izvor slike: Tesla
  • Ne dopustite da dizajn umanji čitljivost. Tekst koji koristite kao sloj preko slike trebao bi biti dovoljno kontrastalan da bi mogao biti čitljiv. Ako tekst nema dovoljno kontrasta, razmislite o dodavanju slike u sloju.
Izvor slike: Google novčanik

Prilikom dizajniranja web-lokacije, važno je zapamtiti da je sadržaj uvijek kralj. Primarna svrha web stranice ostaje objavljivanje lako probavljivog sadržaja. Među mnogim varijacijama sadržaja ključno je odabrati onaj koji čini vaš sadržaj.

Izvorno objavljeno na theblog.adobe.com 13. prosinca 2017.