Ukázky designu stránek

Obsah:

Ukázky designu stránek
Ukázky designu stránek
Anonim

Nezabírejme do čísel a výpočtů, protože není možné určit, kolik stránek již na internetu existuje. Každý den tisíce, ne-li statisíce stránek selžou a na jejich místě se objeví nové. Jaký je důvod neúspěchů? Proč lidé jdou na stránky a okamžitě je opouštějí? Odpověď je jednoduchá a přímo před vašima očima – takový je design stránek.

Efekt přitažlivosti

Souhlasím, každý má sadu určitých stránek, které denně navštěvuje. Jsem si jistý, že většina záložek jsou oblíbené stránky s filmy, knihami, zprávami, hrami atd. Proč po nalezení jedné stránky nezkusíme najít jinou podobnou, která může být ještě lepší? Odpověď je jednoduchá! Stránky, které si ukládáme do záložek, se pohodlně používají – takové stránky mají obvykle pohodlné uspořádání prvků, kategorií a příjemný design, který nedráždí oči. To je ten „efekt přitažlivosti“, návštěva správně navrženého webu jednou – opuštěníuž nechci.

Podívejme se na příklad dvou webů obchodní platformy:

Příklady webů
Příklady webů

Nepochybně a nesporně chce být lokalita číslo 1 uzavřena co nejdříve a lokalita číslo 2 naopak chce otálet. Proč se tohle děje? Na první stránce je kromě náhodně umístěného produktu také barevná přesycení, což se o druhé stránce říci nedá. Existuje takové nádherné přísloví: „Potkají se podle oblečení, ale vyprosí je rozum“, platí i pro stránky, jen místo oblečení je design a místo mysli navigační struktura. Návštěvník, který vstoupí na stránky, první věc, kterou uvidí, je barevné schéma a teprve poté věnuje pozornost vnitřní navigaci a struktuře webu.

Vnímání barev

Hlavním pravidlem při výběru barev je nepřehánět to. Někdy jsou dokonce dvě nebo tři správně vybrané barvy více než dost, názorným příkladem je web fb.ru. Mnoho webových designérů používá k návrhu svých html stránek tabulku „bezpečných“barev.

Tabulka bezpečných barev
Tabulka bezpečných barev

Bezpečný je nazýván z toho důvodu, že všechny zde zobrazené barvy budou přenášeny absolutně všemi uživateli stejným způsobem. O těchto barvách lze říci, že jsou standardem při vytváření designu na webu.

Kompatibilita barev

Každá barva má svou "přátelskou" barvu - to je barva, se kterou se nejlépe hodí. Není třeba znovu vymýšlet kolo a experimentovat s výběrem, vše už bylo dávno vynalezeno a je ve veřejné doméně. Barevná kolečka se používají k výběru barev. Itten. Obrázek níže ukazuje barevné kolo pro shodu 2 odpovídajících barev.

Doplňková barevná kombinace
Doplňková barevná kombinace

T. tj. opačná barva uvnitř kruhu je považována za nejvíce kompatibilní. Pokud potřebujete vybrat 3 odpovídající barvy, použije se také barevné kolečko, pouze linie uspořádání barev se již změní.

Triáda - kombinace 3 barev
Triáda - kombinace 3 barev

A takových kruhů je mnoho, můžete vybrat více odpovídajících barev. Například čtyři.

Tetrad - kombinace čtyř barev
Tetrad - kombinace čtyř barev

Výběrem barev tímto způsobem prostřednictvím Ittenových kruhů bude dosaženo maximální kombinace barev a vizuálně příjemného designu stránky. Další barevné kruhy lze nalézt online. Trochu odbočíme od hlavního tématu, protože vás chci informovat, že tato barevná kolečka Itten používají i profesionální návrháři ze světa módy, tedy při tvorbě značkového oblečení se používá právě tato metoda barevného sladění.

Vnitřní struktura webu

Pokud se s vnímáním barev víceméně vše vyjasnilo, pak zbývá ještě jeden důležitý ukazatel jako vnitřní struktura webu nebo jinými slovy - "použitelnost". Nestačí jen vybrat správné barvy na webu, jak ukazuje praxe - s krásným designem webu nedojdete daleko. Správná struktura webu je jako rám domu, pokud není správně naplánována, bude nepohodlné se kolem něj pohybovat.

Všechny navigační prvky je třeba předem promyslet a ještě lépe zapsat. StrukturaStránky by měly být pro návštěvníky především srozumitelné a pohodlné. Spousta stránek přichází o návštěvníky jen proto, že ti při vstupu na stránky nechápou, kde a co se nachází. Není třeba se zaplňovat množstvím tlačítek a věšet spoustu funkcí. Vždy je potřeba se dívat očima návštěvníka, pokud uživatel nějakou funkci nepotřebuje, tak je lepší ji odstranit. Opět jasným a správným příkladem designu webu je web Fb.ru, na kterém jsou všechny sekce umístěny způsobem, který je pro návštěvníka srozumitelný a pohodlný.

Největší chyba

Podle průměrné analýzy se uživatel, který nemůže na stránce najít potřebnou sekci nebo informace do 15–30 sekund, domnívá, že tato sekce nebo informace na stránce nejsou, a opustí zdroj. Ve většině případů navždy. Ukázkový příklad webu s hroznou navigací:

Špatná navigace na webu
Špatná navigace na webu

Myslíte si, že je možné najít potřebné informace o takovém zdroji tím, že nepřejdete z vyhledávání, ale jednoduše na hlavní stránku? Myslím, že ne. Opět sytost barev a množství nepochopitelné navigace, která uvede každého návštěvníka do strnulosti a zmatku. Aby k takovým chybám nedocházelo, je nutné seskupit všechny sekce a dát je do samostatného navigačního menu, které bude srozumitelné pro každého návštěvníka.

Registrační formulář

Dalším důležitým a děsivým faktorem na webu je registrační formulář. Někteří se snaží v registračním okně shromáždit téměř data praprababičky.

Špatný registrační formulář
Špatný registrační formulář

Takové registrační formulářebyly v módě dříve, kdy se internet začal objevovat pouze v domácnostech. Internetový uživatel chce dnes najít potřebné informace co nejdříve a dlouhé registrační formuláře i přes výborný design stránek s 99% pravděpodobností odpudí. Ideální registrační formulář podle dnešních standardů je zobrazen níže.

Správný registrační formulář
Správný registrační formulář

I když tyto informace nestačí, nikdo se neobtěžuje je od návštěvníka později po procesu registrace vyžadovat. Tento přístup je považován za loajálnější a přátelštější než registrační formulář, který je spíše jako formulář žádosti o zaměstnání.

Šablony webových stránek

Mnoho stránek se nyní vytváří na moderních systémech CMS, které poskytují bezplatný návrh stránek. Volný design (šablony) ale nenese žádný vizuální design, takže pokud se jej majitel webu nepokusí nijak změnit, pak takový web zmizí ve vyhledávání.

Za zmínku také stojí celé internetové portály, které na jejich základě nabízejí nasazení vlastních webových stránek. V tomto případě existují klady i zápory:

  • Prvním a možná jediným plusem je jednoduchost. Rámec webu je již zpravidla modelován na těchto zdrojích zkušenými designéry, design webu podléhá určitým požadavkům a pravidlům. Nezbývá než jej naplnit tematickým materiálem a počkat na první návštěvníky. Proto jednoduchost a pohodlí takových služeb přitahuje začátečníky. Ale pokud je stránka nastavena pro seriózní vývoj a konkurencitop-1 ve vyhledávačích, pak je lepší takovou službu odmítnout.
  • Z mínusů - poskytnuté šablony ve většině případů nelze upravovat ani měnit, budete muset neustále používat tu poskytnutou. Monotónnost je hlavní nevýhodou, o které jsme mluvili hned na začátku, protože každý web musí být individuální a vzhledově se od ostatních lišit. Spousta omezení, která nebude možné popsat, protože každá taková služba má své vlastní.

Konečná část

Vše, co je popsáno v tomto materiálu, nepředstírá "hlavní pokyn", vždy můžete a dokonce musíte dělat vše po svém - toto je jen soubor nejčastějších pravidel a chyb. Ale nejdůležitější body, zde popsané ve formě vnímání barev a vnitřní struktury webu, jsou standardem pro navrhování webu. Špatně zvolené barvy vyděsí každého návštěvníka, který právě vstoupil na stránky, a negramotný design kategorií a prvků webu mu neumožní navigaci a nalezení potřebných informací. Těmto bodům by měla být věnována maximální pozornost a jak již bylo zmíněno výše, na jakýkoli web byste se měli vždy dívat očima návštěvníka, nikoli očima vývojáře.

Doporučuje: