Jak se nesát na design, 5 minut průvodce pro non-návrhář.

Zásady dobrého designu se může naučit a uplatňovat kdokoli. Tato příručka vám poskytne základní znalosti praktických návrhových tipů, které můžete použít dnes (a zapůsobit na své přátele z designu).

Pokud si nemyslíte, že se můžete naučit design, pamatujte, co řekl náš legendární přítel David Eric Grohl o učení nových věcí:

Nikdy jsem se neučil hrát na bicí nástroje. Nikdy jsem se neučil hrát na kytaru. Jen jsem na to přišel. Myslím, že pokud jste něčím nadšeni a jste řízeni a jste zaměřeni, můžete v životě dělat cokoli, co chcete.
- Dave Grohl, Foo Fighters

Jste na mysli slova pana Grohlse, jste připraveni na kurz srážky? Připínáme máslo, jdeme v žádném zvláštním pořadí:

1. Použijte hodně kontrastu

Barva pozadí a písma by měla být dostatečně odlišná, aby nezpůsobovala únavu očí. Obvykle černý text na bílém pozadí bývá nejčitelnější. Drž se dál od světle šedé, žluté a zelené. Pokud musíte číst, pak víte, že máte problém.

Od: https://developer.apple.com/design/tips/

2. Téměř černá je lépe čitelná než černá

Pokud máte na výběr, zkuste pro svůj text použít barvu # 333333 RGB (51,51,51) místo čistě černé. Čistě černá na bílém chvění oka a ztěžuje zaměření písmen.

3. Nejdůležitější důležitý obsah

Nejdříve rozložte nejdůležitější informace, které jasně podporují primární případ použití aplikace nebo webu. Důležitý obsah by měl být viditelný bez přiblížení, posouvání nebo klepnutí.

Od: https://developer.apple.com/design/tips/

Umožňuje zobrazit některé příklady dobré vizuální hierarchie ve volné přírodě.

Instagram (níže, vlevo) klade jasné zaměření na fotografii / video zveřejněné uživatelem.

Pinterest (níže, vpravo) vytváří vizuální hierarchii tím, že připne vyhledávací lištu k hornímu okraji a následuje jejich pěkná mřížka níže. Pinterest je velmi záměrný, když má své vyhledávací pole jako první položku na stránce.

Hledání je hlavní funkcí aplikace, lidé používají Pinterest k objevování a procházení.

Podívejme se na další dva příklady

Spotify (dole, vlevo) jasně slaví umělecké dílo alba a název skladby první a hráč ovládá druhý. Přestože jsou ovládací prvky přehrávače sekundární, Spotify dává tlačítku přehrávání a pozastavení větší váhu při rychlém posunu vpřed a vzad.

Facebook (níže, vpravo), vypadající velmi podobně jako Instagram, se rozhodl dát obsah svého přítele dopředu a na střed.

4. Zarovnejte všechny věci

Nejrychlejší způsob, jak opravit něco, co se cítí off nebo janky, je zajistit, že zarovnání není vypnuto. Když designéři hovoří o nutnosti použít „mřížku“, snaží se tým upozornit na problém nesprávného zarovnání.

Oprava zarovnání je jedním z nejjednodušších vylepšení, které můžeme provést pro jakoukoli aplikaci nebo web, a okamžitě způsobí, že aplikace nebo web vypadají 10x lépe.

Od: https://developer.apple.com/design/tips/

Podívejme se na další příklad zarovnání, tentokrát z webu media.com

Tady je webové rozvržení, které jsem vylepšil z webu Medium.com - jak to na vás vypadá?

Vypadá vám něco z tohoto rozvržení?

Tip: všimněte si zarovnání na levém okraji. Jak to vypadá?

Vlevo jsem zvýraznil vizuální řeku způsobenou nesprávným zarovnáním, vpravo jsem jednoduše zarovnal všechny hlavní obsahové bloky.

Wonky zarovnání vlevo vytváří vizuální řeky, konzistentní zarovnání vpravoŠpatné zarovnání vlevo, Opravené zarovnání vpravo

5. Velikost textu s mezerami

Neurčíme pro mravence.

Zvětšení velikosti písma usnadní čtení a strávení obsahu ve spojení s některými liberálními řádky.

Dobrá velikost textu vs. špatná velikost textu od: https://developer.apple.com/design/tips/Dobrá mezera vs. špatná mezera od: https://developer.apple.com/design/tips/

6. Použijte zobrazení seznamu pro výsledky, pokud je pořadí důležité

Většina mobilních a webových aplikací má nějaký typ vyhledávání a mohou proběhnout nějaké zdravé debaty o tom, jak zobrazit výsledky.

Pokud je pořadí důležité, pak je zobrazení seznamu nejúčinnější.

Pokud na objednávce nezáleží a chtěli byste podpořit objev (jako Pinterest nebo AirBnB), pak zobrazení v mřížce povzbudí pohled na podporu objevu.

Jak uživatelé vidí výsledky vyhledávání prezentované v rozvržení tabulky? Autor: C. Siu & B. Chaparro

7. Nejprve v černé a bílé barvě, později přidejte barvu

Černobílé navrhování bude zaměřovat pozornost na řešení a navrhování základních zkušeností vaší aplikace.

Barva vyvolává silné emocionální reakce a často narušuje naši schopnost soustředit se na hlavní problém designu.

8. Vytvořte pohodlný design

Namáhání rukou je skutečný problém, zvažte následující obrázek z úžasného článku Luka Wroblewského: Responsive Navigation: Optimalizace pro Touch Across Devices.

Luke stanoví oblasti telefonu, které jsou nejsnadněji dosažitelné a použitelné (alespoň pro praváky) - Rád bych viděl, že aplikace mají nastavení, ve kterém můžete přepínat rozhraní z pravé ruky na dominantní z levé ruky.

Mnoho efektivních mobilních aplikací udržuje navigaci a základní akce ve spodní třetině telefonu.

Image Credit: Luke Wroblewski Responsive Navigation: Optimalizace pro dotykové napříč zařízeními

9. Půjčte si barevné palety

Barva je trochu nepolapitelné temné umění. Vřele doporučuji přejít na Dribbble a hledat „barevné palety“ nebo použít generátor barevných palet jako Coolors nebo Color Statement.

Ušetřete si hodiny nekonečné debaty a druhého hádání.

10. Používejte úmluvy Apple a Google OS

Apple a Google vytvořili neuvěřitelné zdroje pro kohokoli, kdo staví software pro Android nebo iOS.

Například specifikace Google Material obsahuje pokyny, zdroje, barvy, ikony a komponenty, které vám pomohou začít s návrhem aplikace.

Apple má HIG - jejich Pokyny pro lidské rozhraní, které nastiňují vše, co potřebujete vědět o tom, jak navrhnout aplikaci pro iOS.

Různé screenshoty z Google Material Design a Apple Human Interface Guidelines

Pamatujte, že design vyžaduje praxi

Výcvik vašeho oka hledat problémy s designem zabere trochu času a praxe, ale najdete výše uvedené tipy půjde dlouhá cesta k tomu, aby cokoli, co vytvoříte lépe navržené.

Pokud vám tento článek připadá užitečný, klepněte na nebo klikněte na „♥ ︎“ a doporučte jej a sdílejte jej s přítelem, který potřebuje pomoc s návrhem :)