Vzorci oblikovanja strani

Kazalo:

Vzorci oblikovanja strani
Vzorci oblikovanja strani
Anonim

Ne spuščajmo se v številke in izračune, saj je nemogoče ugotoviti, koliko spletnih mest že obstaja na internetu. Vsak dan na tisoče, če ne na stotine tisoč spletnih mest propade in na njihovem mestu se pojavijo nova. Kaj je razlog za neuspehe? Zakaj ljudje gredo na spletno mesto in ga takoj zapustijo? Odgovor je preprost in pred vašimi očmi - to je dizajn spletnega mesta.

učinek privlačnosti

Strinjam se, vsak ima nabor določenih spletnih mest, ki jih obiskuje dan za dnem. Prepričan sem, da je večina med zaznamki priljubljenih strani s filmi, knjigami, novicami, igrami itd. Zakaj, potem ko najdemo eno stran, ne poskušamo najti drugega podobnega, ki je morda še boljši? Odgovor je preprost! Spletna mesta, ki jih dodajamo med zaznamke, so priročna za uporabo - taka mesta imajo običajno priročno razporeditev elementov, kategorij in prijeten dizajn, ki ne draži oči. To je "učinek privlačnosti", če enkrat obiščete ustrezno zasnovano spletno mesto - zapustite ganočem več.

Oglejmo si primer dveh spletnih mest trgovalne platforme:

Primeri spletnih mest
Primeri spletnih mest

Nedvomno in nesporno se želi lokacija številka 1 čim prej zapreti, stran številka 2 pa se, nasprotno, želi zadržati. Zakaj se to dogaja? Na prvem mestu je poleg naključno nameščenega izdelka tudi barvna prenasičenost, česar o drugem mestu ni mogoče reči. Obstaja tako čudovit pregovor: "Srečajo se po oblačilih, a jih izganjajo po pameti", velja tudi za spletna mesta, le da je namesto oblačil dizajn, namesto uma pa navigacijska struktura. Obiskovalec, ko vstopi na spletno mesto, najprej vidi barvno shemo, šele nato je pozoren na notranjo navigacijo in strukturo spletnega mesta.

zaznavanje barv

Glavno pravilo pri izbiri barv je, da ne pretiravajte. Včasih so celo dve ali tri pravilno izbrane barve več kot dovolj, živahen primer tega je spletno mesto fb.ru. Mnogi spletni oblikovalci uporabljajo tabelo "varnih" barv za oblikovanje svojega html spletnega mesta.

Tabela varnih barv
Tabela varnih barv

Safe se imenuje zato, ker bodo vse tukaj prikazane barve prenašali popolnoma vsi uporabniki na enak način. Za te barve lahko rečemo, da so standard pri ustvarjanju dizajna na spletnem mestu.

Združljivost barv

Vsaka barva ima svojo "prijazno" barvo - to je barva, s katero se najbolje poda. Ni treba znova izumljati kolesa in eksperimentirati z izbiro, vse je že dolgo izumljeno in je v javni domeni. Za izbiro barv se uporabljajo barvna kolesa. Itten. Spodnja slika prikazuje barvno kolo za ujemanje dveh ujemajočih se barv.

Komplementarna barvna kombinacija
Komplementarna barvna kombinacija

T. to pomeni, da je nasprotna barva znotraj kroga najbolj združljiva. Če morate izbrati 3 ujemajoče se barve, se uporablja tudi barvno kolo, samo črta za razporeditev barv bo že spremenjena.

Triada - kombinacija 3 barv
Triada - kombinacija 3 barv

In takšnih krogov je veliko, lahko izberete več ujemajočih se barv. Na primer štiri.

Tetrad - kombinacija štirih barv
Tetrad - kombinacija štirih barv

S takšnim izborom barv skozi Ittenove kroge bo dosežena največja kombinacija barv in vizualno prijeten dizajn strani. Več barvnih krogov lahko najdete na spletu. Naj se malo odmaknimo od glavne teme, ker vas želim obvestiti, da ta barvna kolesa Itten uporabljajo tudi profesionalni oblikovalci iz modnega sveta, torej pri ustvarjanju dizajnerskih oblačil se uporablja ta način ujemanja barv.

Notranja struktura spletnega mesta

Če je z zaznavanjem barv bolj ali manj vse postalo jasno, potem ostaja še en pomemben kazalnik, kot je notranja struktura strani oziroma z drugimi besedami - "uporabnost". Ni dovolj samo izbrati prave barve na spletnem mestu, kot kaže praksa - na čudovitem dizajnu spletnega mesta ne boste šli daleč. Pravilna struktura spletnega mesta je kot okvir hiše, če ni pravilno načrtovana, bo neprijetno krmariti po njej.

Vse navigacijske elemente je treba premisliti vnaprej, še bolje - zapisati. StrukturaSpletno mesto mora biti najprej razumljivo in priročno za obiskovalce. Veliko spletnih mest izgubi obiskovalce samo zato, ker slednji ob vstopu na spletno mesto ne razumejo, kje in kaj se nahaja. Ni vam treba natrpati z množico gumbov in obesiti kup funkcionalnosti. Vedno morate gledati skozi oči obiskovalca, če uporabnik ne potrebuje neke funkcije, potem jo je bolje odstraniti. Ponovno je svetel in pravilen primer oblikovanja spletne strani spletno mesto Fb.ru, na katerem so vsi razdelki locirani na način, ki je razumljiv in priročen za obiskovalca.

Največja napaka

Po povprečni analizi uporabnik, ki ne najde potrebnega razdelka ali informacije na spletnem mestu v 15-30 sekundah, meni, da tega razdelka ali informacije ni na spletnem mestu, in zapusti vir. V večini primerov za vedno. Odličen primer spletnega mesta z grozno navigacijo:

Slaba navigacija po spletnem mestu
Slaba navigacija po spletnem mestu

Ali menite, da je mogoče najti potrebne informacije o takem viru tako, da ne greste iz iskanja, ampak preprosto na glavno stran? Mislim, da ne. Spet barvna nasičenost in obilica nerazumljive navigacije, ki bo vsakega obiskovalca spravila v omamljenost in zbeganost. Da bi se izognili takšnim napakam, je treba vse rubrike združiti in jih postaviti v ločen navigacijski meni, ki bo razumljiv vsakemu obiskovalcu.

Prijavni obrazec

Drug pomemben in zastrašujoč dejavnik na spletnem mestu je obrazec za registracijo. Nekateri poskušajo zbrati skoraj praprababice podatke v oknu za registracijo.

Napačen obrazec za registracijo
Napačen obrazec za registracijo

Takšni obrazci za registracijoso bili v modi že prej, ko se je internet šele začel pojavljati v domovih. Danes želi uporabnik interneta čim prej najti informacije, ki jih potrebuje, dolgi obrazci za registracijo pa bodo kljub odlični zasnovi spletnega mesta v 99 % verjetno odbili. Idealen obrazec za registracijo po današnjih standardih je prikazan spodaj.

Pravilen obrazec za registracijo
Pravilen obrazec za registracijo

Tudi če ti podatki ne zadoščajo, se nihče ne trudi, da bi jih pozneje zahteval od obiskovalca, po postopku registracije. Ta pristop velja za bolj zvestega in prijaznejšega od obrazca za registracijo, ki je bolj podoben obrazcu za prijavo za zaposlitev.

Predloge spletnih mest

Veliko spletnih mest se zdaj ustvarja na sodobnih CMS-sistemih, ki zagotavljajo brezplačno oblikovanje strani. Toda brezplačno oblikovanje (predloge) ne nosi vizualnega oblikovanja, tako da če ga lastnik spletnega mesta na noben način ne poskuša spremeniti, potem takšno spletno mesto izgine v iskanju.

Omeniti velja tudi celotne internetne portale, ki na podlagi njih ponujajo uvedbo lastnega spletnega mesta. V tem primeru so prednosti in slabosti:

  • Prvi in morda edini plus je preprostost. Okvir spletnega mesta praviloma že izkušeni oblikovalci oblikujejo po takih virih, zasnova mesta pa je pod določenimi zahtevami in pravili. Ostaja le, da ga napolnimo s tematskim gradivom in počakamo na prve obiskovalce. Zato preprostost in priročnost takšnih storitev pritegne začetnike. Ampak, če je spletno mesto pripravljeno za resen razvoj in konkurenco zatop 1 v iskalnikih, potem je bolje zavrniti takšno storitev.
  • Od minusov - predloženih predlog v večini primerov ni mogoče urejati ali spreminjati, ves čas boste morali uporabljati tisto, ki je na voljo. Monotonija je glavna pomanjkljivost, o kateri smo govorili na samem začetku, saj mora biti vsaka stran individualna in se po videzu razlikovati od drugih. Veliko omejitev, ki jih bo nemogoče opisati, saj ima vsaka taka storitev svojo.

Zaključni del

Vse, kar je opisano v tem gradivu, se ne pretvarja, da je "glavno navodilo", vedno in celo morate vse narediti na svoj način - to je le niz najpogostejših pravil in napak. Toda najpomembnejše točke, opisane tukaj v obliki zaznavanja barv in notranje strukture spletnega mesta, so standard za oblikovanje spletnega mesta. Nepravilno izbrane barve bodo prestrašile vsakega obiskovalca, ki je pravkar vstopil na spletno mesto, nepismena zasnova kategorij in elementov spletnega mesta pa mu ne bo omogočila krmarjenja in iskanja potrebnih informacij. Tem točkam je treba posvetiti največjo pozornost in, kot je navedeno zgoraj, na katero koli spletno mesto vedno gledajte z očmi obiskovalca in ne z očmi razvijalca.

Priporočena: