Uzorci dizajna stranice

Sadržaj:

Uzorci dizajna stranice
Uzorci dizajna stranice
Anonim

Ne ulazimo u brojke i izračune, jer je nemoguće odrediti koliko stranica već postoji na Internetu. Svaki dan tisuće, ako ne i stotine tisuća stranica propadnu i na njihovom mjestu se pojave nove. Koji 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.

efekt privlačnosti

Slažem se, svatko ima niz određenih stranica koje se posjećuju iz dana u dan. Siguran sam da su većina označenih omiljenih stranica s filmovima, knjigama, vijestima, igricama itd. Zašto, nakon što pronađemo jednu stranicu, ne pokušamo pronaći drugu sličnu, koja bi možda bila i bolja? Odgovor je jednostavan! Stranice koje bilježimo prikladne su za korištenje - takve stranice obično imaju prikladan raspored elemenata, kategorija i ugodan dizajn koji ne iritira oči. Ovo je "efekt privlačnosti", ako jednom posjetite pravilno dizajnirano mjesto - napustite gaviše ne želim.

Pogledajmo primjer dvije stranice platforme za trgovanje:

Primjeri web-mjesta
Primjeri web-mjesta

Nedvojbeno i nedvojbeno, lokacija broj 1 želi biti zatvorena što je prije moguće, a lokacija broj 2, naprotiv, želi ostati. Zašto se ovo događa? Na prvom mjestu, osim nasumično smještenog 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, ali ih ispraćaju po umu", primjenjiva je i na web-mjesta, samo što umjesto odjeće postoji dizajn, a umjesto uma postoji struktura navigacije. Posjetitelj, 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 boja

Glavno pravilo pri odabiru boja je ne pretjerivati. Ponekad su čak 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.

Tablica sigurnih boja
Tablica sigurnih boja

Safe zove se iz razloga što će sve ovdje prikazane boje prenijeti apsolutno svi korisnici na isti način. Za ove se boje može reći da su standard pri izradi dizajna na stranici.

Kompatibilnost boja

Svaka boja ima svoju "prijateljsku" boju - ovo je boja s kojom se najbolje slaže. Nema potrebe ponovno izmišljati kotač i eksperimentirati s selekcijom, sve je odavno izmišljeno i u javnoj je domeni. Kotačići u boji koriste se za odabir boja. Itten. Slika ispod prikazuje kotačić 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 kotačić 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 vas želim obavijestiti da ove Itten kotače u boji koriste čak i profesionalni dizajneri iz svijeta mode, odnosno pri kreiranju dizajnerske odjeće koristi se ova metoda slaganja boja.

Interna struktura web-lokacije

Ako je manje-više sve postalo jasno s percepcijom boja, onda ostaje još jedan važan pokazatelj kao interna struktura stranice ili drugim riječima - "upotrebljivost". Nije dovoljno samo odabrati prave boje na web mjestu, kao što praksa pokazuje - na lijepom dizajnu stranice nećete ići daleko. Ispravna struktura stranice je poput okvira kuće, ako nije ispravno 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. Puno web-mjesta gube posjetitelje samo zato što potonji prilikom ulaska na stranicu ne razumiju gdje i što se nalazi. Nema potrebe zatrpati se gomilom gumba i objesiti hrpu funkcionalnosti. Uvijek trebate gledati kroz oči posjetitelja, ako korisnik ne treba neku funkciju, onda ju je bolje ukloniti. Opet, svijetao i ispravan primjer dizajna web stranice je web stranica Fb.ru, na kojoj su svi odjeljci smješteni na način koji je razumljiv i prikladan za posjetitelja.

Najveća pogreš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 informacija nema na stranici i napušta resurs. U većini slučajeva zauvijek. Izvrstan primjer web-mjesta s užasnom navigacijom:

Loša navigacija stranice
Loša navigacija stranice

Mislite li da je moguće pronaći potrebne informacije na takvom izvoru tako da ne idete 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 biste izbjegli takve pogreške, potrebno je grupirati sve odjeljke i staviti ih u poseban navigacijski izbornik, 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 gotovo pra-pra-prabake podatke u prozoru za registraciju.

Pogrešan obrazac za registraciju
Pogrešan obrazac za registraciju

Ovakvi obrasci za registracijubili moderni prije, kada se internet tek počeo pojavljivati u domovima. Danas korisnik interneta želi što prije pronaći informacije koje mu trebaju, a dugi obrasci za registraciju, unatoč izvrsnom dizajnu stranice, vjerojatno će odbiti od 99%. Idealan obrazac za registraciju prema današnjim standardima prikazan je u nastavku.

Ispravan obrazac za registraciju
Ispravan obrazac za registraciju

Čak i ako ti podaci nisu dovoljni, nitko se ne trudi tražiti ih kasnije od posjetitelja, nakon procesa registracije. Ovaj pristup se smatra lojalnijim i prijateljskim od obrasca za registraciju, koji je više poput obrasca za prijavu za posao.

Predlošci web-mjesta

Mnoge web stranice se sada stvaraju na modernim CMS-sustavima koji pružaju besplatan dizajn web stranice. Ali besplatni dizajn (predlošci) ne nosi nikakav vizualni dizajn, pa ako ga vlasnik stranice ni na koji način ne pokuša promijeniti, takva stranica nestaje u pretraživanju.

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

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

Završni dio

Sve što je opisano u ovom materijalu ne pretendira da bude "glavna uputa", uvijek možete pa čak i trebate sve raditi na svoj način - ovo je samo skup najčešćih pravila i pogrešaka. Ali najvažnije točke, ovdje opisane u obliku percepcije boja i unutarnje strukture stranice, standard su za dizajn stranice. Pogrešno odabrane boje uplašit će svakog posjetitelja koji je upravo ušao na stranicu, a nepismeni dizajn kategorija i elemenata stranice neće mu dopustiti navigaciju i pronalaženje potrebnih informacija. Ovim točkama treba posvetiti maksimalnu pažnju i, kao što je gore spomenuto, uvijek trebate gledati na bilo koju stranicu očima posjetitelja, a ne očima programera.

Preporučeni: