Plochý a minimalistický design

V několika posledních letech jsme viděli významný přechod v designu softwaru a aplikací od 3D a skeuomorfismu k plochému designu a minimalismu. I když se tento trend stal všudypřítomným, pojďme na chvíli popřemýšlet o tom, jak se sem dostal a jaký vliv má na design jako celek. Navíc se podíváme i na nějaké tipy a úvahy, co je dobré k návrhu plochého designu použít.

Co se stalo?

Tak jak se přehoupla ta houpačka z textur a prostorového zpracování k jednobarevnému zpracování a jednoduché typografii? Tento přechod vyvolalo mnoho faktorů, ale je zde několik významnějších.

mobile_os_mini

Uživatelské rozhraní Windows Phone 8 a iOS 7.

Informační přetížení

Díky tomu, že jsme neustále připojeni, jsme ohroženi nikdy nekončícím tokem informací. Některé z nich jsou důležité a relevantní, ale většina ne. My je musíme neustále hodnotit a filtrovat, což je samozřejmě značně vyčerpávající. Navíc se mnoho obsahu přestěhovalo do zařízení s malými obrazovkami, od kterých se nehneme opravdu ani na krok, tudíž to jenom prohloubilo pocit přetížení. Stát se zahlceným informacemi je příliš snadné a snížení nepořádku v uživatelském rozhraní to může aspoň trochu vylepšit.

geckoboard_mini

Bez vizuálního nepořádku: Vizualizace Geckoboard jsou navrženy tak, aby byly klíčové údaje snadno interpretované na první pohled.

V jednoduchosti je krása

V podobném trendu se nese spousta webových aplikací a služeb, které nabízejí vysoce zaměřené nástroje s velmi omezenými funkcemi. Zatímco tradiční vývojáři mají tendenci nacpat své produkty nadbytkem funkcí, které by ospravedlnily vysoké cenovky, posun směrem k mikro aplikacím upřednostňuje před množstvím funkcí spíše jednoduchost. A jednodušší aplikace znamená jednodušší rozhraní.

Krásné a minimalistické: Aplikace Blue weather od Oak.

Krásné a minimalistické: Aplikace počasí Blue od Oak.

Nejdůležitější je obsah

Často se stává, že se vstupem nových zařízení a technologií na trh jsme fascinováni tím, co se s nimi dá dělat. Toto šílenství ohledně uživatelského rozhraní obvykle jednou skončí a je následováno návratem k zaměření na obsah. Obsah, ať už textový, audio nebo video, je pravděpodobně to, čím se chceme na většině našich zařízení zabývat, a GUI potřebujeme jen pro to, abychom se k tomu dostali.

Technologická gramotnost

Jak postupně na trh pronikly smartphony a tablety, snížily se všechny obavy uživatelů o samozřejmost možnosti kontroly a ovládání. Zatímco kdysi jsme se obávali, že by uživatelům mohla chybět některá tlačítka, kdyby nebyla pevně na svém místě, dnes jsme ochotni zkoumat i jemnější interakce.

Nástěnka Fitbit je jasná, jednoduchá  a snadno přístupná.

Nástěnka Fitbit je jasná, jednoduchá a snadno přístupná.

Vliv technologií

Většina softwaru je omezena na platformu, na které běží. Rozlišení obrazovky a počet bodů na palec jsou důležité faktory hardwaru. Minimalistické rozhraní vyžaduje jen velmi malou designovou paletu, funkčnost a estetiku plochého designu do značné míry určuje typografie a tloušťka fontu.
Pokud vaše cílová zařízení nejsou schopna zobrazit danou úroveň nuance, máte smůlu. Jak se neustále zvětšuje velikost obrazovky a zvyšuje hustota pixelů na mobilních zařízeních, stále tenčí a menší fonty jsou lépe čitelné.

Wallmob sleduje prodeje živě z jakéhokoliv zařízení, které má prohlížeč.

Wallmob sleduje prodeje živě z jakéhokoliv zařízení, které má prohlížeč.

Responzivní design

S nárůstem zařízení různých velikostí, se muselo uživatelské rozhraní stát více pružným. Dalo by se tedy i argumentovat, že plochý design se přizpůsobuje lépe než jakýkoliv jiný. Další výhodou minimalistického designu je snížení velikosti stránky a zkrácení doby načítání.

Onsite: Dodržuje snad všechny zásady plochého designu.

Onsite: Dodržuje snad všechny zásady plochého designu.

Nejlepší tipy

Fajn, ale dost teorie. Pojďme se podívat na nějaké praktické úvahy. Vytvoření účinného minimalistického designu je překvapivě náročné. Když si odmyslíme všechny ty prvky jako stíny, zkosené hrany, textury apod., rychle si uvědomíte, jak důležitých je těch pár zbývajících prvků. Následující tipy jsou většinou použitelné univerzálně, ale zejména důležité jsou pro tvorbu plochého GUI.

Než začnete

Stejně jako u každého projektu je prvním krokem zajistit, aby váš zvolený styl dával smysl. Před tím, že se pustíte do plochého designu, se ujistěte, že se s ním vaši cíloví uživatelé, cílová platforma a zařízení vyrovnají. Následovat to, co je nyní in, je zbytečné, pokud se to nehodí pro váš projekt.

Proces

Proces, který provádíte, je dost důležitý bez ohledu na to, jakým stylem se řídí. Tady jsou některé nápady, které je třeba mít na paměti při snaze o jednoduchost.

  • Při navrhování minimalistického rozhraní můžete často hledat inspiraci v éře začátku počítačů, kdy designéři a umělci udělali více s méně prostředky. To je ideální příležitost, jak zhodnotit některé designové velikány jako jsou Josef Müller-Brockmann nebo Wim Crouwel.
  • Užitečné je taky, když si občas dáte pauzu. Plochý a minimalistický design je především o nuanci. Takže když si dáte přestávku, pak se vrátíte a podíváte se na věc novýma očima, je to často účinnější.
  • Porovnávat dvě verze vedle sebe je rovněž užitečné. Po dvacetiminutovém přesouvání textu o pět pixelů nahoru a zpět dolů vás možná také napadne vzít obě dvě verze, dát je vedle sebe a porovnat.
  • Vzhledem k tomu, jak důležitou roli hraje responzivita návrhu, zkontrolujte koncept na různých cílových zařízeních, aby se potvrdilo, že funguje.
  • Během práce se pořád ptejte: ‚Opravdu tohle potřebuji?‘ Vždy musíte hledat, v čem můžete řešení zjednodušit.
Global Closet: Interaktivní hra vytvořená pro National Geographic Education.

Global Closet: Interaktivní hra vytvořená pro National Geographic Education.

Mřížka

Mřížka hraje klíčovou roli snad ve všech uživatelských rozhraních. Pokud se chcete pokusit nastolit pořádek a navrhnout intuitivní rozhraní s omezeným množstvím vizuálních prvků v duchu minimalismu, přijde vám vhod mřížka.

  • Mřížka vytváří více než jen vizuální uspořádání. Používá se k definování obsahu a funkčních skupin. Pak už nepotřebujete žádné čáry nebo boxy, abyste seskupili sadu objektů. Zarovnání a mezery mohou uživatelům pomoci pochopit strukturu rozhraní.
  • Zkuste do mřížky nejdříve napěchovat prvky, které jsou zvlášť důležité, a to tak, aby skutečně upoutaly pozornost uživatele.
  • Experimentujte s hustší sítí, než jste zvyklí pracovat. Když se dramaticky sníží vizuální paleta, zjistíte možná, že můžete použít složitější strukturu, aniž byste dosáhli chaotického vzhledu.
iPad aplikace Live School od Rossul Design.

iPad aplikace Live School od Rossul Design.

Barva

Je zřejmé, že barva je vždy klíčovým prvkem vizuálního stylu. U minimalistického rozhraní je ještě důležitější.

  • Zvažte širší barevnou paletu. Možná máte pocit, že užší barevná paleta obvykle vede k funkčnějšímu rozhraní. Ale s malým množstvím prvků si můžete dovolit širší paletu barev.
  • Při vybírání palety vyzkoušejte vámi vybrané barvy v širokém spektru různých odstínů, abyste získali přehled o tom, jak vypadají světlejší a tmavší verze.
  • Pravděpodobně byste měli experimentovat i se sytostí barvy. Experimentujte tak dlouho, dokud nezjistíte, že máte dostatečně jemné i kontrastní prvky.
Vizuální design TriplAgent využívá ohromující barevné palety.

Vizuální design TriplAgent využívá ohromující barevné palety.

Typografie

Pokud jde o weby, na kterých je důležitý obsah, je zvolený font snad nejdůležitějším prvkem.

  • Písma typu serif jsou jistě dobrá, ale písma San Serifs vypadají obvykle čistěji a k minimalismu se více hodí.
  • Podívejte se na fonty široké škály tloušťky a stylů. Určitě nemusíte použít všechny, ale široký výběr vám pomůže lépe zjistit, jaké písmo se do vašeho prostředí hodí.
  • Nebojte se použít dvě písma s extrémními rozdíly ve velikosti. Zkuste zkombinovat nadrozměrné ultra tenké písmo pro nadpisy a malé středně tlusté písmo pro obyčejný text.
  • Dejte si pozor na čitelnost písma. Zní to hloupě, asi každý se na to přece dívá, ale ujistěte se, že písmo bude čitelné v každém měřítku.
Čistá a čitelná typografie na Siteleaf.

Čistá a čitelná typografie na Siteleaf.

Interakce

V plochém designu je určení toho, zda je prvek interaktivní, docela obtížné. Zde je však několik tipů, na které se můžete spolehnout.

  • Klíčový je kontrast. Pokud je většina layoutu bílá, dejte interaktivním prvkům nějakou výraznou barvu. Pokud se v designu objevuje hodně textu, pak byste mohli použít jednoduché ikonky. V případě, že nadpisy jsou velké a všechno ostatní malé, byste mohli odkazy udělat malé a velkými písmeny. Přemýšlejte.
  • Stejně pomáhá i konvenční umístění. Pokud používáte pro pohyb zpět šipku, mohli byste ji například umístit do levého horního rohu, protože právě tam by uživatelé očekávali tlačítko Zpět.
  • Pokud dáte na jednu stránku více funkcí, nemělo by smysl udělat, aby všechny interaktivní prvky vypadaly jako tlačítka. Rozhraní by mělo být tak intuitivní, jak jen je to možné, ale v případě, že je interakce obzvlášť složitá nebo neočekávaná, udělejte ji tak, aby bylo snadné dostat se zpět či zopakovat chybný krok.
  • Realizace rozevíracích prvků, vyskakujících oken a ostatních vrstvených prvků může být v plochém designu docela problematická. Využijte ostrý kontrast, okraje nebo vizuální tónování, abyste oddělili úroveň interakce.
Taasky: Designové prvky v jednoduchém uspořádání a optimálním kontrastu.

Taasky: Designové prvky v jednoduchém uspořádání a optimálním kontrastu.

Nakonec byste si ale měli uvědomit, že v dnešním vysoce propojeném, informačně bohatém a funkcemi nabitém digitálním světě, ve kterém žijeme, je rozšíření minimalistického designu osvěžující. Ale v žádném případě to není styl vhodný pro všechno, musíte ho využívat pouze přiměřeně a promyšleně. Teprve to z něj totiž dělá vysoce použitelný a příjemný digitální zážitek.

Zdroj: Smashing Magazine

Komentáře

  • jimmy design

    Super článek :)

Nahoru