Izgled web stranice

Primjeri i ideje najboljeg izgleda web stranice


Izgled vaše web stranice može definirati njezin uspjeh. Pogrešan dizajn i ljudi će biti zbunjeni i dezorijentirani, uništavajući korisničko iskustvo. Vjerojatno će propustiti kritični sadržaj ili neće primijetiti poziv na akciju.

Ali važnost vašeg izgleda ide dalje. Dizajn mora odgovarati sadržaju vaše web stranice. S pravim izgledom vaš sadržaj može zasjati, ali s pogrešnim sadržajem može postati gužv, težak za čitanje i neinspirativan.

Izgled vaše web stranice može definirati njezin uspjeh. Pogrešan dizajn i ljudi će biti zbunjeni i dezorijentirani, uništavajući korisničko iskustvo. Vjerojatno će propustiti kritični sadržaj ili neće primijetiti poziv na akciju.

Ali važnost vašeg izgleda ide dalje. Dizajn mora odgovarati sadržaju vaše web stranice. S pravim izgledom vaš sadržaj može zasjati, ali s pogrešnim sadržajem može postati gužv, težak za čitanje i neinspirativan.

Konačno, sve web stranice imaju rešetkasti sustav koji stoji ispod dizajna web stranice. Ti stupci i redovi osiguravaju redoslijed vašeg sadržaja i usmjeravaju pogled korisnika oko stranice. Unutar tih mreža možete stvoriti mnoštvo različitih pristupa. Svaka web stranica ima podlogu na kojoj je dizajner izgradio izgled.

Međutim, kada je u pitanju odabir ispravnog dizajna izgleda za vašu web lokaciju, postoji nekoliko uobičajenih polazišta koja možete koristiti za početak.

Vrijedi reći da se ne trebate držati jednog pristupa. Jednostavno možete kombinirati više izgleda na vašoj web lokaciji ili čak na jednoj stranici, poput odredišne ​​stranice.

U skladu s tim, pogledajmo najčešće mogućnosti raspoloživog izgleda.

Započinjemo s najpristranijim uzorkom izgleda svih stupaca.

1. Izgled jednog stupca

Iako je najkompliciraniji izgled koji ćete pronaći, on je značajno porastao na popularnosti od rasta mobilnog weba. To je zato što web stranica može koristiti isti dizajn na mobilnim uređajima, tabletima i radnim površinama, smanjujući vrijeme za razvoj.

Također, rasporedi u jednom stupcu djeluju dobro zbog stvaranja sjajnog načina čitanja, jer usmjerava korisnika na sadržaj bez ometanja na bilo koju stranu. Zato stranica za bloganje Srednji usvaja za sve svoje članke.

Medij koristi izgled jednog stupca da bi poboljšao iskustvo čitanja.

Konačno, u kombinaciji s slikama, izgled jednog stupca može imati snažan utjecaj jer vam omogućuje da takve slike prikažete što je moguće veće. The Ocean Resort odličan je primjer toga na djelu.

Ocean Resort koristi punu širinu svog dizajna s jednim stupovima kako bi maksimizirao utjecaj slika.

Imajući na umu ove faktore, razmislite o korištenju izgleda jednog stupca ako želite da ljudi provode puno vremena čitajući na vašoj web lokaciji ili ako imate slike kojima treba da svijetli prostor.

Zbog njegove jednostavnosti, mali je izazov oko izgleda jednog stupca. No, morate pažljivo razmotriti protok informacija. Koji red treba korisniku da vidi vaš sadržaj?

Na primjer, korisno je dati korisnicima sažetak onoga što stranica pokriva na vrhu kako bi ih nacrtali i ponudili jasan poziv na akciju prema kraju.

Također razmislite o tome kako možete zadržati pomicanje korisnika niz stranicu. Izgledi pojedinih stupaca teže su dulji, a korisniku nije uvijek očito da postoji više sadržaja ispod preklopa. Vizualni pokazatelj, poput strelice, može vam pomoći.

Ako vam se izgled jednog stupca čini malo restriktivan, ali i dalje imate mnogo sadržaja za komuniciranje, razmislite o usvajanju dizajna koji je fokusiran na sadržaj.

2. Sadržaj fokusiran izgled

Web dizajneri često koriste izgled usmjeren na sadržaje na vijestima ili blogovima, a obično ima primarni stupac za sadržaj i jedan ili više bočnih stupaca za dodatne informacije.

Prednost ovog izgleda je u tome što vam može pomoći upravljati duljinom linije središnjeg sadržaja promjenom širine bočnih stupaca. To je važno zato što ako je duljina teksta dugačka ili kratka, postaje je teže čitati, tako smanjuje razumijevanje i zadržavanje informacija.

Međutim, ako se pravilno napravi, sadržaj koji je usredotočen na sadržaj idealan je za bilo koju web lokaciju koja je fokusirana na kopiranje. Tajna je u raščlanjivanju sadržaja unutar ovog izgleda na male, lako probavljive komade.

Postovi na Boagworldu razbijaju sadržaj uz naslove, popise, slike i citate za objavljivanje.

Na primjer, na mom blogu, otkrit ćete da moj prosječni post odiše naslovima, popisima, slikama i izvlačenjem citata. Sve su to tehnike za pomoć korisniku u skeniranju članka, pronalaženju zanimljivih dijelova.

Također treba pažljivo razmotriti bočne stupove. Važno je da web dizajner postavi pravi sadržaj u ove stupce i da oni vizualno imaju ispravnu ponderiranje.

Problem je što korisnici očekuju da u bočnim stupcima pronađu sporedni sadržaj, pa im posvećuju manje pozornosti. Stoga, ako namjeravate uključiti nešto poput poziva na akciju u bočni stupac, ono mora biti dovoljno snažno da privuče pažnju.

Primjerice, primijetite kako Smashing Magazine koristi šarenu ilustraciju mačke kako bi privukla pažnju na obrazac za prijavu na bilten u desnom stupcu.

Smashing Magazine koristi svoje bočne stupce za pružanje sekundarnih informacija o postu.

Nije da je sadržaj usmjeren na sadržaj prikladan za svaku stranicu vaše web lokacije. Web stranice često spajaju ovaj izgled s dizajnom u stilu časopisa.

3. Izgled časopisa

Kao što naziv govori, ovaj se izgled često koristi u časopisima ili vijestima kako bi se prikazao veliki broj različitih priča.

Inspirirani izgledom ispisa, omogućuju kombinaciju naslova i slika kako bi se uvele priče. To može biti privlačan način prenošenja onoga što je u biti popis veza.

Također je izvrstan izgled za isticanje sadržaja koji se redovito mijenja. Zato vijesti poput vijesti Washington Post pa favorizirati.

Web stranice s novinama uglavnom favoriziraju izgled časopisa.

No, izgled nije bez nedostataka. Izgled časopisa može biti izazovan za reagiranje, često zahtijeva cjelovitu promjenu dizajna za manje uređaje sa zaslonom.

Ovaj stil izgleda web stranice također može biti pomalo neodoljiv, s velikim brojem slika i naslova koji viču na pozornost.

Najefikasniji način rješavanja ovog problema je stvaranje jasne vizualne hijerarhije. Drugim riječima, učinite neke od “priča” većim od drugih.

Promjenom veličina priče oni usmjeravaju pažnju korisnika.

Na primjer, primijetite kako moda web stranica usmjerava pažnju na sliku s lijeve strane čineći je znatno većom. Učinkovito govore korisniku gdje prvo pogledati.

Također pomaže da je ostatak korisničkog sučelja izravan, s čistom tipografijom i jednostavnim navigacijskim trakama. Ako ćete koristiti izgled časopisa, morat ćete se potruditi da stvari budu jednostavne.

Drugi potencijalni nedostatak izgleda magazina je taj što on može izgledati ‘okvirno’, jer je mreža koja ga pokriva toliko vidljiva. Međutim, to možete ublažiti uzimajući inspiraciju iz naše sljedeće vrste izgleda.

4. Izgled razbijanja rešetke

Izgledi za koje se čini da lome njihovu osnovnu mrežu mogu biti vizualno mnogo zanimljiviji od tradicionalnijih pristupa. Također su izvrsni za skretanje pozornosti na pojedine elemente zaslona koji se probijaju iz uobičajenih stupaca.

Uzmimo, na primjer, the Web stranica VR Arles festivala. Uočite kako oni privlače vašu pažnju na navigacijsku traku tako da se preklapaju s dva stupca.

VR Arles Festival skreće vašu pažnju na njihovu navigacijsku traku tako da se preklapaju s dva stupca.

Druga praktična upotreba izgleda za probijanje rešetke jest njegova upotreba za prekrivanje teksta na slici na takav način da privuče pažnju na kopiju. Kada web stranica u potpunosti prekriva tekst na slici, često se može izgubiti. Međutim, kao što možete vidi iz donjeg primjera, ako tekst djelomično prekriva sliku, ističe se puno više.

Ovaj dizajn skreće pozornost na tekst i poziva na akciju djelomičnim prekrivanjem slike.

Nedostatak izgleda koji probijaju rešetke jest taj što je teško ispraviti ih, pogotovo kada web stranice trebaju biti odgovarajuće. Zapravo, većina dizajna koji probijaju rešetke nisu ništa takvog. Još uvijek postoji podmetač rešetke i svi elementi ekrana se uklapaju u njega. Jednostavno je da je mreža mnogo složenija i da nije tako očita. Zbog toga ih je teško dizajnirati.

Njihova urođena složenost je razlog zašto ih često vidite kako ih koriste tvrtke koje vode dizajn, poput dizajnerskih agencija ili modnih marki. Oni pokazuju stupanj sofisticiranosti dizajna koji se sviđa određenoj publici.

Ako vam se izgled lomljenja rešetke čini previše kompliciran za vašu situaciju, ali ipak želite učiniti nešto inovativnije i neobičnije, razmislite o dizajnu preko cijelog zaslona.

5. Izgled preko cijelog zaslona

Izgledi preko cijelog zaslona, ​​kako i samo ime govori, smještaju se na jedan zaslon bez potrebe da se korisnik pomiče. To ih čini idealnim za pripovijedanje priča ili prezentacije.

Uzmimo za primjer, Vrste u komadima. Ovo bogato i interaktivno prezentacijsko iskustvo govori o 30 angažiranih vrsta.

Species and Pieces je bogato interaktivno iskustvo koje se odvija bez potrebe za pomicanjem.

Kao što vidite, izgled cijelog zaslona je u najboljem redu kada ih prate snažne slike. To ih čini odličnim izborom za web stranice bogate fotografijom, ilustracijama ili videom.

Nije da se striktno morate držati pristupa na jednom zaslonu. Na prvi pogled Roux na web mjestu Parlamentarnog trga Čini se da je web-lokacija preko cijelog zaslona u istom smislu kao i Vrste u komadima. Njihova prekrasna slika ispunjava cjelokupni vidik.

Ova web stranica koristi cjelokupni prikaz kako bi prikazala svoje vrhunske fotografije.

Međutim, moguće je dalje kretati se po stranici da biste vidjeli dodatni sadržaj. Nažalost, to ukazuje na jedan potencijalni nedostatak ovog pristupa izgledu. Korisnici ne shvaćaju uvijek da mogu pomicati i tako mogu propustiti vrijedni sadržaj.

Također morate pažljivo razmotriti kako će se izgled prilagoditi različitim veličinama. Na primjer, hoće li pristup preko cijelog zaslona raditi na mobilnom uređaju? Također, hoće li se slike obrezati kako se mijenja veličina zaslona ili će se jednostavno smanjiti? Vrlo brzo možete pronaći žarišta slika koje se obrezuju iz vidljivog područja i manjih veličina.

Ipak, ako imate zadivljujuće slike koje ćete pokazati, potrudit ćete se pronaći bolji dizajn izgleda. Ali ako želite opciju dodati neki opis i pozive na radnju uz te slike, možda biste trebali razmotriti alternativni izgled.

6. Naizmjenični izgled

Naizmjenični uzorak izgleda jedan je od najčešćih načina na webu. Otkrit ćete da je sastavljen od niza blokova sadržaja od kojih svaki ima raspored u dva stupca. Blokovi se obično sastoje od slike s jedne strane i teksta s druge.

Ono što joj daje ime je da se slika izmjenjuje sa strane. Dakle, prvi blok će imati sadržaj s lijeve strane i sliku s desne strane, dok sljedeći blok mijenja taj izgled.

To je pristup oblikovanja koji se posebno favorizira kada se objašnjavaju značajke ili prednosti proizvoda. Na primjer, softverski proizvodi poput Webydo upotrijebit će sliku za prikaz značajke, a potom kopiju za objašnjenje njezina rada ili koristi koju pruža.

Webydo zamjenski tekst i slike u različitim sadržajima blokira početnu stranicu.

Nije da su ovi blokovi sadržaja ograničeni na slike i tekst. Ponekad web mjesta zamijene sliku videozapisom. Jednako tako, sadržajna strana elementa može uključivati ​​sve, od ikona do svjedočenja ili poziva na akciju.

Na primjer, Convertkit uključuje izjavu i poziv na akciju zajedno s njihovim tekstom u svakom bloku sadržaja.

Convertkit uključuje izjave i pozive na djelovanje zajedno sa svojim slikama.

Dio razloga što su izmjenični blokovi toliko uobičajeni je taj što su jednostavan izgled izgleda s nekoliko nedostataka. Ako trebate priopćiti nekoliko prodajnih mjesta, gotovo uvijek je to pouzdana opcija izgleda.

Naravno, vaši zahtjevi mogu biti različiti, pa je druga mogućnost koju treba razmotriti je dizajn temeljen na kartici.

7. Izgled na osnovi kartice

Izgledi stranica na bazi kartica još su jedan uobičajeni pristup izgleda koji ćete vidjeti na cijelom webu.

Izgled na temelju kartica izvrstan je način da se ljudima pruži niz mogućnosti za odabir korisnika, nudeći im dovoljno informacija o svakom izboru za donošenje odluke.

To ih čini popularnim izborom za stranice s popisima proizvoda na web stranicama e-trgovine. Omogućuje web mjestu da prikaže sliku proizvoda, opis i cijenu. Možete čak dodati funkcije poput “spremi za kasnije” kao što vidite iz prozora Web lokacija Asos.

Web-lokacije e-trgovine poput Asosa favoriziraju izgled na temelju kartica za prikaz popisa proizvoda.

Međutim, pronaći ćete web stranice koje koriste rasporede na temelju kartica u bilo kojoj situaciji u kojoj korisnici trebaju odabrati s popisa. Na primjer, druga uobičajena upotreba bilo bi prikazivanje popisa članaka na blogu ili vijestima.

Izgled koji se temelji na kartici omogućava prikaz slike priče, naslova i opisa, kao i sve dodatne detalje o postu koji želite uključiti. Awwwards blog je izvrstan primjer takve vrste korištenja u akciji.

Nagrade koriste izradu na osnovi kartice za popisivanje postova na svom blogu.

Najbolje od svega, kartoni koji se temelje na karticama dobro reagiraju, a broj karata u redu polako se smanjuje kako raspoloživa širina opada..

Međutim, postoji nekoliko manjih nedostataka u pristupu. Prvo, kartice najbolje funkcioniraju kada uključite sliku. To znači da ako se trudite pronaći odgovarajuće fotografije za svaku stavku popisa, možda će vam biti bolje s drugačijim dizajnom.

Drugi mali problem je s različitim količinama sadržaja. Ako jedna kartica ima više sadržaja od druge, ona može ostaviti bijeli prostor bilo unutar kartice ili između svakog retka.

Ako kartice imaju različite količine sadržaja, to može ostaviti razmake između kartica.

Jedan od načina ublažavanja ovog problema je ne pokušavati držati kartice u istom redu, kao što je prikazano u donjem primjeru.

Dopuštajući karticama da popunjavaju prazan prostor, završit ćete s estetski ugodnijim dizajnom.

Ipak, ovo je manje pitanje, što objašnjava široko prihvaćanje ovog pristupa izgleda.

Drugi jednako popularan dizajn je izgled slike heroja.

8. Izgled heroja

Izgled junaka nazvan je po slikama junaka, onim velikim slikama s tekstualnim slojevima koji dominiraju na početnim stranicama na toliko web lokacija. Apple dobro koristi klasičnu sliku heroja.

Apple dobro koristi klasičnu sliku heroja.
Pixave za MacOS još više poboljšava izgled junaka tako da dominira nad dizajnom početnih stranica.
Pixave za MacOS još više poboljšava izgled junaka tako da dominira nad dizajnom početnih stranica.

Ono zbog čega su slike junaka toliko rasprostranjene jest da vam omogućavaju da postavite svoje slike vrijednost propozicija na dojmljiv način odmah na ulaznoj točki vaše web stranice.

Kao što možete vidjeti iz Pixave i Jabuka web stranice gore navedene obično se sastoje od velike pozadinske slike, naslova ili pruge i opisa. Izgledi heroja često dolaze s istaknutim pozivom na akciju.

Ako trebate jasno objasniti što nudite na početnoj stranici ili odredišnoj stranici na način koji će privući pažnju, tada bi slika heroja mogla biti najbolji put. No, to je vjerojatno opseg njihove uporabe.

Povremeno ćete vidjeti raspored heroja koji se koristi na sljedećim stranicama. Ali, u većini slučajeva, slika heroja jednostavno odvlači pažnju od vrednijih sadržaja. Zato koristite s pažnjom.

Osim toga, postoji mali nedostatak korištenja rasporeda heroja. Da, oni su uobičajeni, ali korisnici su ih upoznati i učinkoviti su.

Znatno rjeđa opcija izgleda je izgled podijeljenog zaslona.

9. Razdjelni raspored ekrana

Poput izgleda na cijelom zaslonu, podijeljeni zaslon je odličan način za privlačenje pažnje kada korisnici prvi put dođu na vašu web lokaciju, kao što možete vidjeti iz početna stranica tvrtke za dizajn web stranica ispod.

Ova stranica koristi izgled podijeljenog zaslona da objasni koja su dva dijela njihove ponude.

Zbog čega je gornji primjer tako učinkovit je da postoji jasan razlog za izgled podijeljenog zaslona. Web stranica daje do znanja da postoje dvije strane u njihovom poslovanju – dizajn i razvoj.

Sličan primjer je kada korisnicima želite dati jasan binarni izbor. Podijeljeni zaslon ima puno smisla u toj situaciji, jer ekran dijeli ravnopravno između dvije mogućnosti.

Na primjer, agencija za modeliranje 62 Uprava koristi podijeljeni zaslon kako bi potaknuo korisnike da prepoznaju traže li muški ili ženski model.

62 Uprava koristi dizajn s razdvojenim zaslonom kako bi potaknuo korisnike da odaberu između dvije mogućnosti.

Nažalost, izvan ovog ograničenog broja aplikacija, malo je razloga za prihvaćanje dizajna s razdvojenim zaslonom. To je relativno ograničavajuća opcija izgleda, a jednostavno nema toliko scenarija gdje je to prikladno. Međutim, u onim slučajevima gdje jeste, daleko je najbolji izbor.

Slična opcija koja bi pružila malo veću fleksibilnost je asimetrični izgled.

10. Asimetrični izgled

Dok raspored dijeljenog zaslona čini jednak razdvajanje na sredini vidnog polja, asimetrični dizajn omogućuje vam da podijelite zaslon koliko god smatrate prikladnim.

Prednost ovog izgleda u odnosu na podijeljeni ekran je ta što omogućava dodavanje naglaska na pojedinu stranu stranice. Što više nekretnina ima strana, to se više stavljate na nju. To vam zauzvrat omogućava prepoznavanje primarnog i sekundarnog sadržaja.

Ako su postavljeni primarni i sekundarni stupci, pristup možete koristiti na više načina. Na primjer, Félix Lesouef koristi metodu na svojoj web lokaciji za podjelu između sadržaja i navigacije.

Félix Lesouef koristi asimetrični izgled za isticanje navigacije po svojim web lokacijama.

Suprotno tome, Hranite jesti web stranica koristi drugi stupac koji vam omogućuje da vidite sljedeći odjeljak svoje web stranice.

Nourish Eats koristi ovaj pristup izgleda da bi istaknuo sekundarni sadržaj na vidljiviji način.

Asimetrični izgled na mnogo je načina izvrstan izbor. Fleksibilan je, relativno jednostavan za implementaciju i manje se koristi. To je prikladan način da vaše web mjesto izgleda drugačije bez glavobolja nekih drugih izbora.

Kako odabrati izgled

Čitajući ovaj članak, napravili ste prvi korak u odabiru pravog izgleda za svoju web lokaciju. Naučili ste koje su vam opcije dostupne.

Zatim morate saznati koje bi opcije mogle biti prikladne za vašu web lokaciju. Jedan od načina za to je promatranje konkurencije. Ipak bih savjetovao da se ne zaustavljamo tamo. Opasnost je da ćete ih kopirati, a to će vas uvijek staviti korak iza.

Umjesto toga, pogledajte web stranice u drugim sektorima koji imaju povezane vrste sadržaja. Ako imate internetska stranica brošure namijenjena B2B publici, pogledajte druge slične stranice. Isto tako, ako imate web mjesto za e-trgovinu, pogledajte e-trgovinu u ostalim sektorima.

Odatle surađujte s vašim dizajnerom na eksperimentiranju s nekim različitim pristupima. Navedite ih da uokviruju neke ideje temeljene na različitim izgledima i pogledajte što najbolje odgovara vašem sadržaju.

Ako vam se ne da donijeti odluku ili vam nedostaje samopouzdanje u pravom smjeru, pokušajte da stavite opcije pred neke korisnike i dobiti njihove reakcije. Ne pitajte samo one koje više vole, već ih i pitajte jesu li uočili kritični sadržaj ili razumjeli o čemu se tvrtka radi.

Istina je da ćete vjerojatno birati i birati između različitih izgleda izgleda za različite dijelove vaše web stranice, i to je u redu. Jer kada je u pitanju izgled web mjesta, upotreba pravog u pravom trenutku je presudna.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map