Špatný design je jako nepohodlná židle. Může to vypadat docela normálně, ale cítíte, že něco není v pořádku. V tomto článku se podíváme na to, co je v designu „špatné“ a jakými znaky to lze určit.V mnoha ohledech je design subjektivní věcí. Existuje však řada velmi obecných a zřejmých znaků, podle kterých lze vysoce kvalitní design odlišit od hackworku.
Složení a rozložení
Kompozice je harmonická kombinace všech prvků stránky (obrázků, bloků textu, ikon atd.). Určuje, jak jsou prvky umístěny vůči sobě navzájem a jak jsou kombinovány do jednoho celku. Správná kompozice pomáhá čtenáři rychle pochopit, co se na stránce říká a co je tam nejdůležitější.
Obvykle studujeme stránku jako je tato:
- Nejprve se podíváme na obrázek, pak na text;
- Naskenujeme stránku zleva doprava nebo shora dolů. Trajektorie pohledu připomínají písmena F nebo Z.
Takto směr pohledu sleduje Z-trajektorii
Dobrý návrhář nakreslí rozvržení stránky tak, že při rychlém čtení stránky člověk uchopí informace v logickém sledu. To mu pomáhá vytvořit si úplný obrázek o tom, co mu chceme sdělit.
Vizuální hierarchie
Vizuální hierarchie je hlavní složkou kompozice. Jeho úkolem je ukázat uživateli, které prvky na stránce jsou hlavní a které vedlejší. Návrhář může vytvořit hierarchii pomocí velikosti prvků, jejich barvy, sytosti a tvaru.
Zde je příklad, kdy je vše v pořádku s vizuální hierarchií:
- Nejprve se podíváme na fotografii;
- Pak obrátíme zrak k nadpisu, zvýrazněnému tučně;
- Pak se podívejte na popis a přihlášku níže. Cílové tlačítko je zvýrazněno červeně, takže hned zaujme. Mluvčí na hlavní fotografii na ni navíc ukazuje rukou.
V horní a dolní části stránky jsou další prvky – textová pole o datu, ceně, online vysílání. Nejsou tak důležité a pravděpodobně se na ně podíváme až poté, co se podíváme na to hlavní.
Dobrý návrhář staví hierarchii správně. Špatný chlap nechápe její principy a dává všechno na stránku. V důsledku toho se prvky vzájemně střetávají a celá stránka vypadá nedbale a chaoticky.
Vizuální hierarchie je porušena – je těžké vědět, kam se dívat a na co kliknout
Kotevní předměty
Kotevní objekty jsou klíčové a nejviditelnější prvky na stránce. „Kotvy“ mohou být ilustrace, loga, ikony, nadpisy a dokonce i bloky textu.
V dobrém designu tvoří kotvy jasnou strukturu – rámec stránky. Obvykle se jedná o konstrukci ve tvaru klasického obdélníku. Kotevní objekty v takovém obdélníku jsou připevněny buď k bodům v rozích a ve středu, nebo ke stranám. Zde jsou dvě typická schémata:
V prvním případě jsou kotvy vázány na rohy a střed. Ve druhém – do stran
Variace jsou možné. Takto například vypadá stránka se čtyřmi kotvami:
Je zde centrální objekt (foto smartphonů) a 3 sekundární kotvy – v obou horních rozích a uprostřed dole. Tvoří obdélníkový rám (označený tečkovanou čarou)
A to je designově složitější stránka. Zde je více kotev, ale obdélník je vidět stejně jasně:
Kotevní objekty jsou jasně viditelné ve středu, v rozích a na pravé straně
Bez „kotev“ se stránka stává amorfní a smysl pro organizaci a rovnováhu mizí:
Kompozice je zde rozbitá, nejsou zde žádné kotvy, hlavní prvek není zvýrazněn, designér nepromyslel posloupnost vnímání
Cítíme se pohodlně, když cítíme vzor v uspořádání prvků. Proto je tak důležité, aby byly kotvy umístěny správně (a aby vůbec existovaly).
ovzduší
“Vzduch” je volný prostor kolem prvků. Místo, kde je kompozice řídká a kolem objektů je dostatek prázdného prostoru („vzduchu“), působí klidně a krásně. Minimalismus dělá rozdíl. Zde je příklad:
Bloky textu a filmové plakáty obklopené mezerami
Zde je ještě více volného místa – a to je oprávněné:
Taková stránka je snadno čitelná – jen pár informačních bloků, hodně „vzduchu“ a jasně označené „kotvy“
Zde je typická přetížená stránka:
Obrázky, tlačítka zpětného volání a položky nabídky jsou slepené dohromady a poblíž jsou světlé reklamní bloky. Zdá se, že stránka na nás zaútočí, jakmile na ni vstoupíme. To je důvod, proč nechci jít podruhé – je těžké utřídit si takovou změť.
Intimita, vnitřní i vnější
Objekty umístěné blízko sebe jsou vnímány jako spojené. Dobrý designér rozumí tomu, které prvky umístit vedle sebe a které oddělit odsazením. Nejjednodušším příkladem je vztah mezi nadpisem a textem:
Zde nadpis „Vozový park“ odkazuje na spodní blok. Ale vzdálenost ke spodnímu bloku (vnitřnímu prostoru) je větší než k hornímu bloku (vnějšímu prostoru). Bylo nutné udělat opak.
Podle teorie blízkosti by vnitřní okraje měly být menší než vnější:
vnitřní ≤ vnější
To platí pro všechny prvky na stránce. Podívejte se na domovskou stránku YouDo:
Vypadá kompaktně a hezky, protože se dodržuje pravidlo vnitřní a vnější. Výplň uvnitř každého bloku je menší než mezi bloky:
Pokud návrhář poruší teorii blízkosti, bude stránka vypadat nelogicky. Čtenář je nucen přijít na to, co je co.
Zarovnání prvků
V dobrém uspořádání, které respektuje princip blízkosti, jsou všechny prvky vzájemně zarovnány. To znamená, že odsazení je jednotné, informační bloky symetrické a fotografie se nerozlévají do okrajů. Pokud jsou proporce mimo, je design neprofesionální.
Kompozice často trpí tím, že prvky jsou uspořádány v náhodném pořadí. Zde návrhář umístil ikony nesprávně:
Zdá se, že spodní řádek je převrácený vzhledem k hornímu. V horním řádku jsou nápisy nad ikonami, ve spodním řádku – pod ikonami. Takovou mozaiku je těžké vnímat
Je mnohem lepší udělat toto:
Správné barevné kombinace
- Žlutá je pozitivní, teplá, slunečná barva;
- Červená – energická, vůdčí;
- Modrá symbolizuje klid a harmonii, svěžest a čistotu;
- Zelená uklidňuje a vytváří pocit otevřenosti a bezpečí.
Dobrý design využívá barev a barevných kombinací k vytvoření správného dojmu. Například není náhoda, že dětský web FC Zenit je navržen ve žluté a modré barvě:
Kombinace modré a žluté dává pocit síly, otevřenosti, vzájemné podpory a touhy vyhrát – ideální řešení pro děti
V designu existuje teorie barevného kola. Vysvětluje, jak vytvořit harmonické barevné kombinace:
To není dogma. Pomocí jiných schémat lze vytvořit zajímavé kombinace. Ale teorie barevného kruhu je dobrým pomocníkem, protože eliminuje zcela okouzlující barevné kompozice. Ale špatný design stále obsahuje červená tlačítka na růžovém pozadí a toxické barvy.
Typografie
Typografie v designu je soubor pravidel, podle kterých je text formátován. Dobrý designér ví, jak vybrat písmo, řádkování a desítky dalších detailů, aby byl text dobře čitelný. A špatná typografie na webu ničí celý design.
Písmo
U písma jde především o čitelnost a emocionální dojem.
Standardní, široce používaná písma jsou obvykle čitelnější než vzácná, svérázná.
V prvním případě se text čte lépe než ve druhém. To je zásluha písma
Měkká, plynulá písma vyjadřují lehkost, klid a radost. Pro obchodní sdělení a vážná témata jsou ale vhodnější písma s tuhým, seříznutým tvarem.
Ukázka světlého, splývavého písma na webu dětského centra
Je důležité vybrat písmo, které vypadá dobře v různých velikostech – na velkých i malých obrazovkách.
Dobrý design používá fonty smysluplně a vkusně. Ne více než 1-2 fonty na jedné stránce. Velikosti písma – ne více než 3-4 (například 18 bodů pro nadpis, 16 bodů pro podnadpisy a 12 bodů pro hlavní text).
Velikost bodu a řádkování
Velikost bodu je výška písmene. Pokud je na stránce více než jedno písmo, měla by mít všechna přibližně stejnou velikost. Je lepší nezmenšovat písmo, aby čtenář nemusel nahlížet do drobných písmenek. Optimální hodnota je 14-18 bodů a rozhodně ne méně než 12 bodů.
Jednoduchá, středně velká písma vypadají pěkně a jsou dobře čitelná
Mezery mezi řádky (provozní) by měly být o 20-30 % větší než výška písmen. Pokud je interval příliš malý, řádky se spojí a text se změní na „list“. Pokud je příliš velký, je v něm příliš mnoho místa navíc.
Délka řádku a zarovnání textu
Optimální délka řádku není větší než 700-1000 px. To je přibližně 60–80 znaků na řádek (pro mobilní zařízení potřebujete ještě méně – 30–40 znaků).
Text, který se rozprostírá od okraje k okraji obrazovky, je obtížně čitelný a snadno ztratíte další řádek
Zarovnání v textových blocích by mělo být zarovnáno pouze doleva. Na šířku, uprostřed a vpravo – špatně, protože je hůře čitelný.
Výběr textu
Psát text velkými písmeny je špatný nápad, protože se okamžitě snižuje jeho čitelnost. Pokud potřebujete zvýraznit větu v textu, je lepší ji napsat malými písmeny a zvýraznit tučně.
Podívejte se na tento příklad špatné typografie:
Text psaný velkými písmeny se hůř čte
Obsah
Obsah je obsah webu: fotografie, ilustrace, videa, text. Nízká kvalita obsahu může vizuálně zničit web, i když je celkový design dobrý.
Skutečné a fotografie
Nejlepší fotky jsou skutečné fotky. Webové stránky lékařské kliniky by měly obsahovat fotografie lékařů, ordinací a vybavení. V internetovém obchodě jsou obrázky přesně toho zboží, které se tam prodává. To vytváří důvěru. Lidé vidí, že vše je spravedlivé.
To jsou skuteční lékaři, ne profesionální modely
Naopak, stock obrázky zabíjejí důvěru návštěvníků. Internet je plný stránek s takovými obrázky – dokonalé modelky se usmívají a podnikatelé v bezvadných oblecích si podávají ruce. Takové fotky nemají nic společného s realitou. A návštěvníci to chápou.
A tohle je muž z fotografie, která visí na stovkách webů
Kvalitní i nekvalitní fotografie
Fotografie pro web by měl pořídit fotograf pomocí profesionálního fotoaparátu. Takto vypadají skutečné fotky, na které je hezké se dívat:
Vysoce kvalitní fotografie farmářských produktů. Jsou skutečné, ale zároveň krásné.
Neprofesionální fotografie vypadají nedbale. Fotografie pořízené v nízkém rozlišení, při špatném osvětlení nebo se špatnou kompozicí zkazí dojem.
Fotka je rozmazaná, matná, nízké rozlišení
Design je pohodlí
Dobrý design je víc než jen pěkný obrázek. Jde především o starost návštěvníka webu: správná kompozice dělá stránku jednoduchou a srozumitelnou, typografie a rozvržení přidává na čitelnosti a dobrý obsah motivuje člověka zůstat. Důvěřujte svým pocitům, hodnoťte design podle zásad, které jsme popsali – a nejeden laický designér vás nepodvede.
