Základní principy harmonického webového designu

Sonja Hoffmann Aktualizováno 21.
7 min.
Webový design Základní principy
Naposledy aktualizováno 21.

Jak se říká, neexistuje druhá šance na první dojem. Navštívíte neznámé webové stránky a během několika vteřin posoudíte, zda je tato stránka "dobrá" nebo "špatná". Zvláště u vlastních výtvorů je nekonečně obtížné objektivně analyzovat. Naštěstí existují ověřené konstrukční principy, podle kterých se můžete orientovat. Přehled.

Co vůbec je "dobrý" webový design?

Webový design je poměrně složitý: Potřebujete víc než jen smysl pro dobrou typografii a přitažlivé vizuální uspořádání. Webový design nabízí neuvěřitelně všestranný způsob, jak se kreativně vyjádřit. Ale zároveň nabízí alespoň přesně tolik příležitostí, jak se v procesu návrhu ztratit. Zvláště když se nacházíte hluboko v procesu návrhu, je snadné nevidět pro stromy les. Výsledkem může být návrh, který považujeme za "špatný".

Naše hodnocení je často intuitivní, takže je těžké vysvětlit, proč se stejný designový prvek dokonale hodí na jednu webovou stránku a zároveň se ale nehodí na druhou.

Co dělá webovou stránku úspěšnou?

Dobré webové stránky poskytují informace jasně a efektivně, takže se uživatelé intuitivně na stránce vyznají. Ve většině případů uživatelsky orientované webové stránky uspějí prostřednictvím dobře vyvážené souhry typografie, interaktivních prvků a vizuálního tuningu. 

A jako by to nebylo už tak dost složité, jsme také omezeni tím, co prohlížeče našich potenciálních uživatelů vůbec mohou zobrazit. Popřípadě také technickými dovednostmi vývojáře nebo nástrojemi, které k vytvoření příslušné webové stránky používáme. 

Kromě toho byste měli vzít v úvahu aktuální trendy a také firemní identitu vašeho zákazníka. Webový design je v podstatě součet designu UX, UI a grafiky, CI a současných trendů s přihlédnutím k technickým podmínkám.

Vytvoření webové stránky je docela velký projekt. Není divu, že za tím obvykle stojí celý tým. Často jednotlivci (a bohužel i týmy) mají tendenci věnovat větší pozornost oblastem, ve kterých se obzvláště vyznají. Zatímco jiným oblastem je věnováno méně pozornosti – a v extrémních případech žádná. To vytváří nerovnováhu, kvůli které by na vás stránka mohla působit jako méně kvalitativní a neharmonická.

"Dobrý" webový design je výsledkem rovnováhy mezi různými konstrukčními oblastmi a technickými podmínkami.

Vzhledem k tomu, že by podrobné zkoumání všech oblastí přesahovalo rámec tohoto článku, se dnes budu věnovat především vizuálnímu designu. 

Kontrast, bílý znak a barvy

Kontrast je často kombinován s volbou primárních barev designu, stejně jako bílými znaky (whitespace) v kompozici. ''Bílý znak'' však znamená prostor, který je zanechán bíle. Spíše se odkazuje na mezery mezi prvky. Tento prostor se také nazývá "negativní prostor" a může být i přesto barevný.

Díky hodně bílým znakům se stránka obvykle zdá čistší a jasnější. Tento přístup jde často ruku v ruce s minimalismem. To znamená důsledné odstranění všeho z rozložení stránky, co není nezbytné a nepřináší designu žádnou zřetelně přidanou hodnotu. Ať už jde o text, dekorativní prvky nebo CTA.

Tip

Při plánování kontrastu a barev mějte na paměti následující: Těžko čtitelný obsah může způsobit, že lidé se zrakovým postižením (například rozpoznávání barev) jej nemůžou vnímat.

Zvláště s trendem vyplňování záhlaví webových stránek velkými panoramatickými obrázky často najdeme textové překryvy, které je obtížné rozluštit.

Úspěšný příklad bílých znaků a kontrastu

Základní principy harmonického webového designu
Základní principy harmonického webového designu

https://aiven.io/

Špatný příklad kontrastu

Zde je příklad kontrastního problému v mobilní verzi. Výzva k akci se v neklidném pozadí zcela ztratí.

proč-ux-selže
https://www.opitz-consulting.com/

Někdy to pro designéry není tak snadné, najít správné barvy pro design. Naštěstí existují také možné nástroje, které nám umožňují rychle testovat různé kombinace - než strávíme spoustu času vytvářením nákladného uspořádání.

Teorie barev: tyto nástroje vám pomohou vybrat si barvu

Material Design Color Tool

Material Design Color Tool vytvoří Low Fidelity Wireframes se dvěma základními barvami.

materiál-design-color-nástroj

Adobe Color Wheel

Adobe Color Wheel nepomáhá jen vytvářet různé palety barev, ale také extrahuje palety barev ze stávajících návrhů. Nově je to také možné z barevných přechodů.

adobe-color-wheel

Při výběru vhodných barev stojí za to se intenzivně podívat na značku zákazníka: Které barevné palety se již používají? Do jaké míry se od toho mohu odchýlit?

Základy teorie barev jsou nevyhnutelné: Podle příslušného odvětví vašeho zákazníka lze zvolit barvu s vhodným psychologickým účinkem. Není náhoda, že modrá je často používána ve spíše seriózních odvětvích – jako u pojišťoven, poradenství a srovnávacích webových stránkách. Modrá vzbuzuje důvěru a má uklidňující účinek. Ale nesmí se to brát příliš obecně, protože i nuance stejné barvy mohou vyvolat velmi odlišné emoce.

Znáte pravidlo 60-30-10?

To se doporučuje jako zlaté pravidlo pro použití barevných palet. Zde je použitý princip: hlavní barva tvoří asi 60 procent rozvržení, doplňková barva obsahuje 30 procent a třetí barva nastaví další zvýraznění s 10 procenty. Toto uspořádání na uživatele působí obzvláště vyváženě.

Symetrické nebo asymetrické uspořádání konstrukčních prvků

Ve svém článku “The Principles of Design and Their Importance” vysvětluje autorka a designérka Cameron Chapman svoje dva nejdůležitější přístupy k rovnováze webového designu. Rozlišuje obsah podle jeho nápadnosti – tedy zda je poutavější nebo méně nápadný. 

Následující výzvou je tedy uspořádání obsahu tak, aby vyjadřoval pocit rovnováhy. Rozhodnutí o návrhu může ulehčit "uspořádání symetrické nebo asymetrické".

Jak oba přístupy fungují?

U symetrického přístupu jsou prvky uspořádány společně s podobným postavením. U asymetrického přístupu se oproti tomu uspořádá výraznější a méně nápadný obsah. 

Například rozložení může být udržováno čisté. Přitom jsou prvky od sebe jasně odděleny, jako je tomu v případě Couro Azul . Často je takový obsah umístěn mírně decentralizovaně, aby slabší prvek získal trochu více prostoru a vytvořil rovnováhu.

Couro Azu

Zero oproti tomu používá stejný princip, ale s volným uspořádáním. Díky vysokému využití bílých znaků vypadá elegantně a moderně.

Tento přístup funguje velmi dobře na větších obrazovkách (od velikosti tabletu). Menší zařízení, jako jsou smartphony, naopak těží z jasně oddělených, vzájemně uspořádaných modulů.

Definování a stanovení priorit

Než začneme navrhovat webovou stránku, mělo by být jasně definováno, kterou zprávu má komunikovat. Srozumitelnost marketingového konceptu často také přináší jasnost v uspořádání návrhu.

Jakmile jsou klíčová sdělení určena, je důležité je zvýraznit pomocí barvy a/nebo typografie.

Zde můžete vidět, jak mohou oba v kombinaci vypadat:

Kovboj
https://cowboy.com

Existuje však mnoho způsobů implementace. Protože obsah může být zvýrazněn nejen velkou a tučnou typografií a barvou. Také prostřednictvím obrázků - stejně jako u restaurace Jamieho Olivera – a prostřednictvím souhry různých principů se zaměřujete na vybraný obsah.

restaurace Jamieho Olivera

Proporce, jednotnost a hierarchie

Obsah stránky by měl být prezentován tak, aby měl smysl v její hierarchii. To nejdůležitější umístíte nahoru. S klesajícím významem byste se měli propracovat dolů. Takže byste si měli ujasnit: Které informace jsou nejdůležitější pro návštěvníka mých stránek? Co jsou pouze další informace? 

To je také důvod, proč je navigační nabídka ve většině případů nahoře. Kromě toho, že je to UI Pattern, je to prostě jeden z nejdůležitějších aspektů stránky. Koneckonců, menu není nic jiného než přehled základního obsahu, který tam nabízíte. Svým způsobem obsah vašich webových stránek.

Vizuální hierarchie: Co je opravdu důležité

Hierarchii lze vytvořit i takzvaným pohybem. Přitom zajistíme obsah stránky tak, abysme jí návštěvníka provedli. Toho lze dosáhnout například pomocí tvarů a uspořádání. Toto portfolio je zajímavým příkladem toho, jak by něco takového mohlo vypadat:

portfolio

Oko je vedeno obrazovkou zleva doprava. Bod 01 zde má jednoznačně největší hierarchii – i když všechny prvky mají stejnou velikost a prozatím se zdají být rovnocenné. 

Proporce také hraje roli: prvky stejné velikosti, barvy a tvaru nám v podstatě dávají pocit sounáležitosti a mají stejnou funkci. To je důležité zejména pro interaktivní prvky.

Výše uvedený příklad ukazuje, že konzistentní design může do značné míry přispět k vizuální harmonii: 

  1. pro všechny obrázky se použijí jednotné tvary,
  2. všechny obrazy jsou barevně v souladu, 
  3. celkem se používají pouze dvě různá písma a velikosti, 
  4. pro typografii a separátory se používá pouze jedna barva,
  5. separátory jsou opakující se prvek designu – a vizuálně kombinují obraz a dva nadpisy.

Základní principy webového designu - Závěr

Navzdory všem výše uvedeným základním zásadám je třeba porušovat pravidla. To je jediný způsob, jak vytvořit zajímavý, nový design!

Přístupy, které jsem zde stručně představil, samozřejmě nejsou nové. Spíše jsou to variace vědeckého a / nebo psychologického výzkumu, které byly převedeny do našich moderních komunikačních médií. Já osobně považuji za důležité znát tyto teorie a metody. Často implementujeme pravidla tak jako tak intuitivně, protože naše tvůrčí oko se to takto "naučilo".

Kromě toho znalost různých přístupů v designu pomáhá vyhodnotit vaše vlastní projekty. Vnímejte to jako kontrolní seznam, na který se můžete podívat, když si uvědomíte, že něco ještě vizuálně nefunguje. Často nenajdeme potřebnou dálku k vlastnímu projektu, abychom ho objektivně posoudili. 

Zde uvedené principy návrhu nejsou zdaleka úplné. Pokud byste se chtěli ponořit hlouběji do tématu, jste vítáni, abyste se podívat na tyto články a e-booky: 

Jaký je váš názor na principy designu? Na co se chcete Sonjy zeptat? Použijte funkci komentáře. Chcete být informováni o nových příspěvcích k webovému designu a vývoji pro agentury a freelancery? Tak nás sledujte na TwitterFacebook nebo přes náš Bulletin.

Po studiu game designu a creative writingu v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamification a výzkum motivace uživatelů a jejích zkušeností, spolu s vášní a zvědavostí pro technologické trendy.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena * .