Uzorci dizajna sajta

Sadržaj:

Uzorci dizajna sajta
Uzorci dizajna sajta
Anonim

Da ne ulazimo u brojke i kalkulacije, jer je nemoguće utvrditi koliko sajtova već postoji na Internetu. Svakog dana hiljade, ako ne i stotine hiljada sajtova propadnu i na njihovom mestu se pojave nove. Šta je razlog neuspjeha? Zašto ljudi odlaze na stranicu i odmah je napuštaju? Odgovor je jednostavan i pred vašim očima - ovo je dizajn stranice.

Efekat privlačnosti

Slažem se, svako ima skup određenih stranica koje se posjećuju iz dana u dan. Siguran sam da su većina obeleženih omiljenih sajtova sa filmovima, knjigama, novostima, igricama itd. Zašto, nakon što pronađemo jednu lokaciju, ne pokušamo da pronađemo drugu sličnu, koja bi možda bila i bolja? Odgovor je jednostavan! Stranice koje bilježimo pogodne su za korištenje - takve stranice obično imaju zgodan raspored elemenata, kategorija i prijatan dizajn koji ne iritira oko. Ovo je "efekat privlačnosti", kada jednom posjetite pravilno dizajnirano mjesto - napustite gane želim više.

Pogledajmo primjer dvije stranice trgovačke platforme:

Primjeri lokacija
Primjeri lokacija

Nesumnjivo i neosporno, lokacija broj 1 želi da bude zatvorena što je prije moguće, a lokacija broj 2, naprotiv, želi da se zadrži. Zašto se ovo dešava? Na prvoj stranici, pored nasumično lociranog proizvoda, postoji i prezasićenost boja, što se ne može reći za drugu stranicu. Postoji tako divna poslovica: “Sreću se po odjeći, a ispraćaju ih po pameti”, primjenjiva je i na sajtove, samo što je umjesto odjeće dizajn, a umjesto uma je struktura navigacije. Posjetilac, nakon što uđe na stranicu, prvo što vidi je shema boja, a tek onda obraća pažnju na internu navigaciju i strukturu stranice.

Percepcija boje

Glavno pravilo pri odabiru boja je da ne preterujete. Ponekad su čak i dvije ili tri ispravno odabrane boje više nego dovoljne, živopisan primjer za to je stranica fb.ru. Mnogi web dizajneri koriste tablicu "sigurnih" boja za dizajn svoje html stranice.

Tabela sigurnih boja
Tabela sigurnih boja

Safe se zove iz razloga što će sve boje prikazane ovdje biti prenošene od strane apsolutno svih korisnika na isti način. Za ove boje se može reći da su standard pri kreiranju dizajna na sajtu.

Kompatibilnost boja

Svaka boja ima svoju "prijateljsku" boju - ovo je boja s kojom se najbolje slaže. Nema potrebe ponovo izmišljati točak i eksperimentisati sa selekcijom, sve je odavno izmišljeno i u javnom je domenu. Točkići u boji se koriste za odabir boja. Itten. Slika ispod prikazuje točak boja za uparivanje 2 odgovarajuće boje.

Komplementarna kombinacija boja
Komplementarna kombinacija boja

T. tj. suprotna boja unutar kruga smatra se najkompatibilnijom. Ako trebate odabrati 3 odgovarajuće boje, koristi se i točak boja, samo će linija rasporeda boja već biti promijenjena.

Trijada - kombinacija 3 boje
Trijada - kombinacija 3 boje

I postoji mnogo takvih krugova, možete odabrati više odgovarajućih boja. Na primjer, četiri.

Tetrad - kombinacija četiri boje
Tetrad - kombinacija četiri boje

Odabirom boja na ovaj način kroz Ittenove krugove, postići će se maksimalna kombinacija boja i dobiti vizualno ugodan dizajn stranice. Više krugova u boji možete pronaći na internetu. Odstupimo malo od glavne teme, jer želim da vas obavestim da ove Itten točkove u boji koriste čak i profesionalni dizajneri iz sveta mode, tj. prilikom kreiranja dizajnerske odeće koristi se ovaj metod slaganja boja.

Interna struktura sajta

Ako je manje-više sve postalo jasno sa percepcijom boja, onda ostaje još jedan važan pokazatelj kao interna struktura sajta ili drugim rečima - "upotrebljivost". Nije dovoljno samo odabrati prave boje na stranici, kao što praksa pokazuje - na prekrasnom dizajnu stranice nećete ići daleko. Ispravna struktura stranice je kao okvir kuće, ako nije pravilno planirana, tada će biti nezgodno kretati se po njoj.

Sve navigacijske elemente potrebno je unaprijed osmisliti, a još bolje - zapisati. StrukturaStranica bi prije svega trebala biti razumljiva i pogodna za posjetitelje. Mnogi sajtovi gube svoje posetioce samo zato što ovi pri ulasku na sajt ne razumeju gde se i šta nalazi. Nema potrebe da se zatrpavate gomilom dugmadi i okačite gomilu funkcionalnosti. Uvijek trebate gledati kroz oči posjetitelja, ako korisniku nije potrebna neka funkcija, onda je bolje da je uklonite. Opet, svijetao i ispravan primjer dizajna web stranice je web stranica Fb.ru, na kojoj su svi dijelovi locirani na način koji je razumljiv i pogodan za posjetitelja.

Najveća greška

Prema prosječnoj analizi, korisnik koji ne može pronaći potrebnu sekciju ili informaciju na stranici u roku od 15-30 sekundi smatra da ovog odjeljka ili informacije nema na stranici i napušta resurs. U većini slučajeva zauvijek. Odličan primjer stranice sa užasnom navigacijom:

Loša navigacija sajta
Loša navigacija sajta

Mislite li da je moguće pronaći potrebne informacije o takvom resursu tako što ćete ne otići iz pretraživanja, već jednostavno na glavnu stranicu? Mislim da ne. Opet, zasićenost boja i obilje nerazumljive navigacije, koja će svakog posjetitelja dovesti u omamljenost i zbunjenost. Da bi se izbjegle ovakve greške, potrebno je grupisati sve sekcije i staviti ih u poseban navigacijski meni, koji će biti razumljiv svakom posjetitelju.

Obrazac za registraciju

Još jedan važan i zastrašujući faktor na stranici je obrazac za registraciju. Neki pokušavaju prikupiti skoro pra-pra-prabake podatke u prozoru za registraciju.

Pogrešan formular za registraciju
Pogrešan formular za registraciju

Ovakvi formulari za registracijubili moderni i ranije, kada se internet tek počeo pojavljivati u domovima. Danas korisnik interneta želi da pronađe potrebne informacije što je prije moguće, a dugi formulari za registraciju, uprkos odličnom dizajnu stranice, vjerovatno će odbiti 99%. Idealan obrazac za registraciju po današnjim standardima prikazan je ispod.

Ispravan obrazac za registraciju
Ispravan obrazac za registraciju

Čak i ako ove informacije nisu dovoljne, niko se ne trudi da ih kasnije zatraži od posjetitelja, nakon procesa registracije. Ovaj pristup se smatra lojalnijim i prijateljskim od obrasca za registraciju, koji više liči na obrazac za prijavu za posao.

Šabloni web stranica

Mnogi sajtovi se sada kreiraju na modernim CMS sistemima koji obezbeđuju besplatan dizajn sajta. Ali besplatni dizajn (šabloni) ne nosi nikakav vizuelni dizajn, tako da ako vlasnik sajta ne pokuša da ga promeni na bilo koji način, onda takva stranica nestaje u pretrazi.

Vrijedi spomenuti i čitave internet portale koji nude postavljanje vlastite web stranice na osnovu njih. U ovom slučaju, postoje i prednosti i nedostaci:

  • Prvi i možda jedini plus je jednostavnost. Okvir stranice je već po pravilu napravljen po uzoru na takve resurse od strane iskusnih dizajnera, dizajn stranice je doveden pod određene zahtjeve i pravila. Ostaje samo popuniti ga tematskim materijalom i sačekati prve posjetitelje. Stoga jednostavnost i praktičnost takvih usluga privlače početnike. Ali ako je stranica postavljena za ozbiljan razvoj i konkurenciju zatop 1 u pretraživačima, onda je bolje odbiti takvu uslugu.
  • Od minusa - date šablone u većini slučajeva nije moguće uređivati ili mijenjati, moraćete stalno koristiti onaj koji ste dobili. Monotonija je glavni nedostatak, o čemu smo govorili na samom početku, jer svaka lokacija mora biti individualna i izgledom se razlikovati od drugih. Mnogo ograničenja koja će biti nemoguće opisati, jer svaka takva usluga ima svoje.

Završni dio

Sve što je opisano u ovom materijalu ne pretenduje da bude "glavno uputstvo", uvek možete, pa čak i trebate sve da radite na svoj način - ovo je samo skup najčešćih pravila i grešaka. Ali najvažnije točke, opisane ovdje u obliku percepcije boja i unutrašnje strukture stranice, su standard za dizajn stranice. Pogrešno odabrane boje će uplašiti svakog posjetitelja koji je upravo ušao na stranicu, a nepismeni dizajn kategorija i elemenata stranice neće mu omogućiti da se kreće i pronađe potrebne informacije. Ovim tačkama treba posvetiti maksimalnu pažnju i, kao što je gore spomenuto, uvijek treba gledati na bilo koju stranicu očima posjetitelja, a ne očima programera.

Preporučuje se: