Ukážky dizajnu stránok

Obsah:

Ukážky dizajnu stránok
Ukážky dizajnu stránok
Anonim

Nezachádzajme do čísel a výpočtov, pretože nie je možné určiť, koľko stránok už na internete existuje. Každý deň zlyhajú tisíce, ak nie státisíce stránok a na ich mieste sa objavia nové. Aký je dôvod neúspechov? Prečo ľudia chodia na stránku a okamžite ju opúšťajú? Odpoveď je jednoduchá a priamo pred vašimi očami – toto je dizajn stránky.

Efekt príťažlivosti

Súhlasím, každý má súbor určitých stránok, ktoré navštevuje deň čo deň. Som si istý, že väčšina zo záložiek sú obľúbené stránky s filmami, knihami, novinkami, hrami atď. Prečo sa po nájdení jednej stránky nesnažíme nájsť ďalšiu podobnú, ktorá môže byť ešte lepšia? Odpoveď je jednoduchá! Stránky, ktoré si dávame do záložiek, sa pohodlne používajú – takéto stránky majú zvyčajne pohodlné usporiadanie prvkov, kategórií a príjemný dizajn, ktorý nedráždi oči. Toto je "efekt príťažlivosti", návšteva správne navrhnutej stránky raz - opustenieuž nechcem.

Pozrime sa na príklad dvoch stránok obchodnej platformy:

Príklady stránok
Príklady stránok

Nepochybne a nepopierateľne, lokalita číslo 1 chce byť zatvorená čo najskôr a lokalita číslo 2 naopak chce otáľať. Prečo sa to deje? Na prvej stránke je okrem náhodne umiestneného produktu aj presýtenie farieb, čo sa o druhej stránke povedať nedá. Existuje také úžasné príslovie: „Stretávajú sa podľa oblečenia, ale odvádzajú ich mysľou“, platí aj pre stránky, len namiesto oblečenia je dizajn a namiesto mysle je navigačná štruktúra. Návštevník, ktorý vstúpi na stránku, prvá vec, ktorú uvidí, je farebná schéma a až potom venuje pozornosť vnútornej navigácii a štruktúre stránky.

Vnímanie farieb

Hlavným pravidlom pri výbere farieb je nepreháňať to. Niekedy sú dokonca dve alebo tri správne vybrané farby viac ako dosť, názorným príkladom je stránka fb.ru. Mnoho webových dizajnérov používa pri navrhovaní svojich html stránok tabuľku „bezpečných“farieb.

Tabuľka bezpečných farieb
Tabuľka bezpečných farieb

Bezpečné sa to nazýva z toho dôvodu, že všetky tu zobrazené farby budú prenášať úplne všetci používatelia rovnakým spôsobom. O týchto farbách sa dá povedať, že sú štandardom pri vytváraní dizajnu na stránke.

Kompatibilita farieb

Každá farba má svoju "priateľskú" farbu - s touto farbou sa najlepšie hodí. Nie je potrebné znovu vynájsť koleso a experimentovať s výberom, všetko je už dávno vynájdené a je vo verejnej sfére. Na výber farieb sa používajú farebné kolieska. Itten. Na obrázku nižšie je zobrazené farebné koliesko na zladenie 2 zhodných farieb.

Doplnková farebná kombinácia
Doplnková farebná kombinácia

T. tj opačná farba vo vnútri kruhu sa považuje za najkompatibilnejšiu. Ak potrebujete vybrať 3 zodpovedajúce farby, použije sa aj farebné koliesko, iba čiara usporiadania farieb sa už zmení.

Triáda - kombinácia 3 farieb
Triáda - kombinácia 3 farieb

A takýchto kruhov je veľa, môžete si vybrať viac zodpovedajúcich farieb. Napríklad štyri.

Tetrad - kombinácia štyroch farieb
Tetrad - kombinácia štyroch farieb

Výberom farieb týmto spôsobom cez Ittenove kruhy sa dosiahne maximálna kombinácia farieb a vizuálne príjemný dizajn stránky. Viac farebných kruhov nájdete online. Odbočme trochu od hlavnej témy, pretože vás chcem informovať, že tieto farebné kolieska Itten používajú aj profesionálni dizajnéri zo sveta módy, t.j. pri tvorbe značkového oblečenia sa používa práve tento spôsob zladenia farieb.

Vnútorná štruktúra webu

Ak sa pri vnímaní farieb viac-menej všetko vyjasnilo, potom zostáva ešte jeden dôležitý ukazovateľ, akým je vnútorná štruktúra stránky alebo inými slovami – „použiteľnosť“. Nestačí len vybrať správne farby na webe, ako ukazuje prax - s krásnym dizajnom stránky ďaleko nezájdete. Správna štruktúra stránky je ako rám domu, ak nie je správne naplánovaná, bude nepohodlné sa po nej pohybovať.

Všetky prvky navigácie si treba vopred premyslieť a ešte lepšie si ich zapísať. ŠtruktúraStránka by mala byť v prvom rade zrozumiteľná a pohodlná pre návštevníkov. Mnoho stránok stráca svojich návštevníkov len preto, že pri vstupe na stránku nerozumejú, kde a čo sa nachádza. Nie je potrebné zapratať sa množstvom gombíkov a zavesiť veľa funkcií. Vždy sa treba pozerať očami návštevníka, ak používateľ nepotrebuje nejakú funkciu, tak je lepšie ju odstrániť. Opäť jasným a správnym príkladom dizajnu webovej stránky je webová stránka Fb.ru, na ktorej sú všetky sekcie umiestnené spôsobom, ktorý je pre návštevníka zrozumiteľný a pohodlný.

Najväčšia chyba

Podľa priemernej analýzy sa používateľ, ktorý nemôže nájsť potrebnú sekciu alebo informácie na stránke do 15-30 sekúnd, domnieva, že táto sekcia alebo informácie sa na stránke nenachádzajú a opúšťa zdroj. Vo väčšine prípadov navždy. Skvelý príklad stránky s hroznou navigáciou:

Zlá navigácia na stránke
Zlá navigácia na stránke

Myslíte si, že je možné nájsť potrebné informácie o takomto zdroji tak, že neprejdete z vyhľadávania, ale jednoducho na hlavnú stránku? Myslím, že nie. Opäť sýtosť farieb a množstvo nepochopiteľnej navigácie, ktorá privedie každého návštevníka do strnulosti a zmätku. Aby sa predišlo takýmto chybám, je potrebné všetky sekcie zoskupiť a umiestniť do samostatného navigačného menu, ktoré bude zrozumiteľné pre každého návštevníka.

Registračný formulár

Ďalším dôležitým a odstrašujúcim faktorom na stránke je registračný formulár. Niektorí sa snažia v registračnom okne zhromaždiť takmer údaje praprababičky.

Nesprávny registračný formulár
Nesprávny registračný formulár

Takéto registračné formuláreboli módne skôr, keď sa internet začal objavovať len v domácnostiach. Používateľ internetu chce dnes nájsť potrebné informácie čo najskôr a dlhé registračné formuláre aj napriek výbornému dizajnu stránky s 99% pravdepodobnosťou odpudia. Ideálny registračný formulár podľa dnešných štandardov je zobrazený nižšie.

Správny registračný formulár
Správny registračný formulár

Aj keď tieto informácie nestačia, nikto sa neobťažuje ich vyžiadať od návštevníka neskôr, po procese registrácie. Tento prístup sa považuje za lojálnejší a priateľskejší ako registračný formulár, ktorý je skôr ako formulár žiadosti o zamestnanie.

Šablóny webových stránok

Mnoho stránok sa teraz vytvára na moderných systémoch CMS, ktoré poskytujú bezplatný dizajn stránok. Voľný dizajn (šablóny) však nenesie žiadny vizuálny dizajn, takže ak sa ho vlastník stránky nepokúsi nijako zmeniť, potom takáto stránka zmizne vo vyhľadávaní.

Za zmienku stoja aj celé internetové portály, ktoré na ich základe ponúkajú nasadenie vlastnej webovej stránky. V tomto prípade existujú výhody aj nevýhody:

  • Prvým a možno jediným plusom je jednoduchosť. Rám stránky je už spravidla modelovaný na takýchto zdrojoch skúsenými dizajnérmi, dizajn stránky podlieha určitým požiadavkám a pravidlám. Zostáva ho len naplniť tematickým materiálom a čakať na prvých návštevníkov. Preto jednoduchosť a pohodlie takýchto služieb priťahuje začiatočníkov. Ale ak je stránka nastavená na seriózny vývoj a konkurenciutop 1 vo vyhľadávačoch, potom je lepšie takúto službu odmietnuť.
  • Mínusy – poskytnuté šablóny sa vo väčšine prípadov nedajú upravovať ani meniť, budete musieť stále používať tú poskytnutú. Monotónnosť je hlavnou nevýhodou, o ktorej sme hovorili hneď na začiatku, pretože každá lokalita musí byť individuálna a odlišovať sa od ostatných vzhľadom. Množstvo obmedzení, ktoré nebude možné opísať, keďže každá takáto služba má svoje vlastné.

Záverečná časť

Všetko, čo je popísané v tomto materiáli, nepredstiera, že je to „hlavná inštrukcia“, všetko môžete a dokonca musíte robiť po svojom – toto je len súbor najbežnejších pravidiel a chýb. Ale najdôležitejšie body, ktoré sú tu opísané vo forme vnímania farieb a vnútornej štruktúry stránky, sú štandardom pre návrh stránky. Nesprávne zvolené farby odstrašia každého návštevníka, ktorý práve vstúpil na stránku, a negramotný dizajn kategórií a prvkov stránky mu neumožní navigovať a nájsť potrebné informácie. Týmto bodom by ste mali venovať maximálnu pozornosť a ako už bolo spomenuté vyššie, na každú stránku by ste sa mali vždy pozerať očami návštevníka, a nie očami vývojára.

Odporúča: