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.
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í.
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.
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.
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.
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.
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.
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.
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 :)
