Plochý design je klíčovým trendem v designu pro nadcházející roky, pojďme se na něj tedy podívat blíže a seznámit se s 5 základními principy, které tvořily jeho základ.

Úvod do plochého designu

V ruštině se plochý design překládá jako „plochý design“ a poté se stal absolutním favoritem Apple prezentace iOS OS. Do centra pozornosti se dostal minimalistický přístup k designu pro použitelnost. Důraz je kladen na uživatelský komfort. Jde o vyslovený protest proti „squeeformismu“ (vizualizace objektů jako ve skutečnosti). Volba padla na zjednodušenější a zároveň esteticky jednodušší řešení. Uživatelé, kteří jsou unaveni realistickými vizualizacemi, tento směr nadšeně zdravili a stále více webových projektů přechází na tento formát.

Rád bych poznamenal, že „plochý“ neznamená „nudný“. Plochá designová řešení mohou být krásná, jsou rafinovanější, čistší, bez nadbytečnosti čehokoli, mění se v „ostrov klidu“. Konečně činí obsah srozumitelným. Zbývá naučit se základní principy, abychom je mohli uvést do praxe.

"Plochý" design se nesnaží předávat objemy, takže základem je dvourozměrná vizualizace. To znamená, že s texturami neuvidíte žádné stíny, odlesky ani světla (výjimkou jsou dlouhé stíny). Pouze přenos obrysů a nic víc.

V návrhu se doporučuje používat jednoslabičné postavy a také sledovat jasnost obrysů, která je navržena tak, aby zdůrazňovala lehkost a stav beztíže. Kromě toho takové stručné prvky dobře napodobují senzor a generují touhu interagovat s objektem (výzva pro stisknutí, dotyk). Jednoduchost prvků se však nerovná jednoduchosti designu jako celku – to platí pouze pro obrysy. Díky tomu je mu vše, co uživatel vidí, jasné a může to snadno používat.

Plochý design vyžaduje extrémně pečlivou práci s písmy. To znamená, že jejich charakter musí doplňovat návrhové schéma, aniž by mu odporovaly. Navíc v plochém designu je písmo také klíčovým navigačním prvkem.

Nejen typ, ale i barva je nezbytnou součástí flat designu. Drtivá většina paletek je založena na 2-3 barvách, i když samozřejmě existují výjimky. Obvykle šťavnaté a světlé, ale jsou vybrány čisté barvy. Jak bylo uvedeno, neexistují žádné přechody nebo zbytečné přechody.

Plochý design je ukázkovým příkladem takového celosvětového trendu, jakým je minimalismus. Designéři opouštějí zbytečné „zvonky a píšťalky“, odklánějí se od složitých a implicitních přístupů k vizualizaci, což přináší ovoce v podobě aktivity uživatelů.

Plochý nebo téměř plochý? Hledá se kompromis!

Závěrem bych rád poznamenal, že dnes existuje synergie mezi plochým a neplochým provedením. Mluvíme o „téměř plochém“ provedení. Jedná se o nejčastější aplikaci popsaného konceptu, kdy spolu s jednoduchými a výstižnými prvky a dvourozměrným prostorem používají designéři 1-2 triky pro hloubku a perspektivu.

Také trendem roku 2017 byl Semi Flat Design - poloplochý design. Vlivem Material Designu se stala o něco prostorovější. Jsou zde světlé stíny, díky kterým je design poloplochý. Plochý design je dnes stále aktuální, kvůli stínům se stal hlubším a složitějším, ale hlavní koncept není narušen.

která se vyvíjí mobilní aplikace a webové stránky, napsal pro nás sloupek a dal vše na své místo, pokud jde o plochý a materiálový design.

Celkově je rozdíl mezi plochým designem (Flat design) a materiálovým designem (Material Design) nepatrný. Člověku, který nemá hluboké znalosti grafického designu, se skutečně mohou zdát velmi podobné. V tomto článku se pokusím osvětlit některé rozdíly mezi nimi. Získáte další znalosti, které jsou tak nezbytné, abyste náhodou neublížili jemné povaze návrháře.

Trocha historie

Než začneme mluvit o rozdílech mezi dvěma nejoblíbenějšími designovými trendy, pojďme zjistit, odkud pocházejí. Existuje názor, že materiálový design je vytvořen na základě bytu. Kde se pak flat design vzal?

Skeuomorfismus

Pokud jde o uživatelské rozhraní a webdesign, pojem skeuomorfismus odkazuje na přístup, jehož hlavní myšlenkou je imitace. Aniž bychom zacházeli do přílišných detailů, vzpomeňme si jen na rozhraní Applu před iOS 7 s jejich „realistickými texturami, osvětlením a okázalými efekty“.

Pokus o to, aby digitální objekty vypadaly jako jejich skutečné protějšky, byl odůvodněn potřebou usnadnit interakci uživatele se zařízením. Ve skutečnosti je to proto, že všechna rozhraní s realistickými texturami dominují digitálnímu světu po mnoho let. Skeuomorfní design odvedl skvělou práci a pomohl uživatelům hladce přejít z reálného světa do digitálního světa.

Nicméně s nárůstem mobilní technologie postupně je potřeba zaměřit se především na pohodlí a snadnost použití. Souhlasíte, v této oblasti je třeba tvořit mobilní řešení dostupný z různá zařízení, roste exponenciálně. Právě v tuto chvíli se jednoduchost stává novým designovým standardem.

Poznámka: V žádném případě si nemyslete, že skeuomorfismus úplně zmizel. Je široce používán ve hrách, kde je nutné vytvořit realistický svět a pomoci hráčům cítit svou postavu, aby se mohli ponořit do herního procesu.

design bytu

Tento styl je zcela prostý jakýchkoli trojrozměrných objektů. Zhruba řečeno, v plochém designu nejsou žádné takové stylistické prvky jako vržený stín, textury, přechody, ale pozornost je věnována hře písem a barev a ikon. Ale proč to všechno bylo nutné? Odpověď je jednoduchá.

Za prvé, plochý design výrazně zkracuje dobu načítání stránky. Absence „těžkých“ skeuomorfních detailů (jen si představte: vrstvy, patky, přechody) dělá ploché designové prvky „lehčími“, což zase výrazně zrychluje dobu načítání. Ploché prvky navíc vypadají na obrazovkách stejně atraktivně jako u vysoké rozlišení a nízké.

Za druhé, jednoduché obrázky mohou uživatelům předat váš nápad rychleji než podrobné ilustrace: jsou útržkovité, a proto jsou docela snadno pochopitelné.

A samozřejmě ploché ikony s relativně jednoduché písmo může nasměrovat pozornost uživatelů na skutečně důležitý obsah.

V dnešní době se plochému designu dostalo zaslouženého uznání, přesto se neobešlo bez problémů. Nejviditelnějším příkladem takových problémů bylo vydání systému Windows 8 společností Microsoft. Tento operační systém je považován za průkopníka plochého designu a podporuje koncept Metro designu. Problémy vedlo k tomu, že společnost zjistila, že je nutné věnovat více pozornosti typografii než samotné grafice.

Výsledky testu použitelnosti Windows 8, který provedla společnost NN Group, ukázaly, že uživatelé měli potíže s rozlišením objektů, na které lze kliknout, od těch, na které nelze kliknout. Uživatelé si stěžovali, že objekty, které vypadají staticky, jsou ve skutečnosti klikatelné. V důsledku toho selhalo hlavní poslání společnosti – pomoci uživatelům správně interpretovat systém.

Další společností, která je často spojována s plochým designem, je Apple. Ustoupili od skeuomorfních designových prvků v mobilním operačním systému iOS 7, vydaném v roce 2013. Tentokrát byl přechod přijat o něco lépe, a to především díky tomu, že se společnost nesnažila koncept kompletně aktualizovat. uživatelské rozhraní, ale jen přidal několik změn směrem k plochému designu. Uživatelé tak měli možnost používat produkt a spoléhat se na své předchozí zkušenosti s operačními systémy a webovými stránkami.

materiálové provedení

Ujasněme si to hned: materiálový design je spíše značkovým produktem než spontánním designovým trendem, který si získal široké uznání. To je to, co jej v podstatě odlišuje od plochého designu.

Označením materiálového designu „podpis“ mám na mysli, že má celý soubor jasně definovaných doporučení a zásad, kterými se řídí každý seberespektující designér. Je celkem zřejmé, proč Google představil svůj Material Design: bylo potřeba sjednotit design, aby aplikace vypadaly stejně na kterémkoli z mnoha Android zařízení.

Přestože je plochý design docela funkční, je stále považován za obtížně pochopitelný. Pravdou je, že ploché objekty na obrazovce mohou uživatele zmást (zejména ty, kteří nemají zkušenosti s mobilním a webovým rozhraním). Materiálový design se proto snaží vrátit prvky skeuomorfismu, ovšem ve značně zjednodušené podobě. Obrázky vypadají ploché, zejména pokud jde o barvy, ale stále jsou vícerozměrné díky přítomnosti osy z.

Jinými slovy, materiálový design lze nazvat vylepšenou verzí plochého designu s prvky skeuomorfismu – animací, stíny a vrstvami. Tímto způsobem můžete produkt učinit intuitivnějším, pokud jde o navigaci, a vyhnout se zbytečné složitosti z hlediska stylu obecně.

Výhody a nevýhody plochého provedení

Nechme za sebou historii evoluce stylů a přejděme k něčemu významnějšímu – uvádíme přednosti a slabé stránky design bytu.

• Minimalismus a styl
• Intuitivnost. Bude pro vás snazší předat svůj nápad uživatelům.
• Úspora času a zdrojů. Stránky se načítají mnohem rychleji s menší spotřebou šířky pásma.
• Zaměřte se na obsah. Rozhraní bez zbytečných detailů, které může odvádět pozornost od opravdu cenných informací.
• Vypadá stejně dobře různá zařízení, ať už jde o prohlížeč na PC nebo chytrém telefonu.
• Urychluje proces návrhu webové stránky nebo aplikace tím, že se zbaví zbytečných úprav návrhu.

• Minimalistický styl.
• Poměrně intuitivní. Material design bude stejně snadné vnímat jako zkušení uživatelé stejně jako nováčci.
• Střední skeuomorfismus. Vše vypadá realističtěji díky použití osy Z (jedinečný koncept Googlu).
• Existuje sada manuálů, které jsou neustále aktualizovány. Proto se na ně může každý návrhář vždy obrátit, pokud se v procesu práce vyskytnou potíže.
• Podporuje se animace webových řešení. Není třeba připomínat, jak lidé milují pohyb. Animace vám navíc umožňuje učinit rozhraní srozumitelnějším a intuitivnějším.

• Má majitele ( Google). Případné dotazy a návrhy na zlepšení proto směřujte na majitele.
• Vzhledem k přítomnosti osy Z může proces návrhu trvat déle.
• Animované prvky vyžadují více zdrojů.
• Přísné dodržování pokynů může omezit originalitu návrhu.

Shrnout

Ve skutečnosti by jeden z uvažovaných designových přístupů neměl být považován za jednoznačnou výhodu oproti druhému, protože plochý a materiálový styl jdou vedle sebe. Oba jsou šíleně populární a oba postrádají přílišný realismus. Material design je nástupcem flatu, zatímco flat design samotný byl reakcí na příliš těžká a realistická řešení. Material design přidal něco, od čeho se flat design vždy snažil vzdálit – trochu skeuomorfismu. I když jedna věc se mezi těmito přístupy bude vždy lišit: materiálový design je patentovaný produkt společnosti Google a plochý design je výsledkem spojení několika designových postupů, které se snaží především o celkovou jednoduchost.

Ve skutečnosti se plochý design v posledních letech hodně vyvinul, od zcela „plochého“ stylu až po „poloplochý“. Nyní umožňuje použití vrstev a jemných stínů, aby objekty vypadaly hlouběji, než se dříve zdály. Jsme tedy šťastnými současníky plochého designu 2.0.

A konečně, nic vám nebrání pokusit se tyto dva přístupy zkombinovat a vytvořit skutečně funkční a uživatelsky přívětivý produkt. Nechte se tedy inspirovat guru plochého a materiálového designu a pusťte se do práce!

Pokud najdete překlep - zvýrazněte jej a stiskněte Ctrl + Enter! Chcete-li nás kontaktovat, můžete použít .

Od autora: Zdravím vás, přátelé! Dnes si povíme, co je flat design, neboli plochý design webových stránek. Tento termín si již dlouho podmanil srdce webových designérů a stále je sebevědomě trendy. Největší společnosti (Google, YouTube, Microsoft, Apple Inc. atd.) jej využívají k návrhu svých webových stránek a aplikací. Ještě stále nepatříte do sekty příznivců plochého designu webových stránek? Pak jdeme k vám!

Co je podle vás důvodem tak šílené popularity flat designu? Odpovím vám ve zkratce: opravdu to funguje! V tomto článku vám vysvětlím, co tento styl je, řeknu vám o jeho výhodách a nevýhodách a ukážu vám několik skvělých příkladů plochého designu webových stránek, které vás jistě inspirují k exploitům. Tak pojďme!

Všechno to začalo skeuomorfismem

Pro ty, kteří nevědí, skeuomorfismus není sprosté slovo, ale jiný styl webdesignu. Flat design je často prezentován jako opak skeuomorfismu, což dle mého názoru není úplně správné. Jde spíše o zjednodušení než o antagonismus.

Až do roku 2010 byl skeuomorfismus dominantním stylem v designu rozhraní. Zobrazoval prvky tak, jak vypadaly ve skutečnosti, aktivně využíval textury, stíny, odrazy a další atributy trojrozměrného obrazu. V tomto ohledu jsem se obzvláště snažil. Apple společnost, který pečlivě zkopíroval většinu softwarových objektů ze skutečných objektů.

Pseudozvednuté ikony brzy přestaly oslovovat většinu uživatelů a webových vývojářů, což zahájilo éru plochého designu webových stránek. Svět dospěl k závěru, že všechny dekorativní prvky by měly být odstraněny a mělo by zůstat pouze to, co je vhodné pro interakci koncového uživatele.

"Nejlepší design je co nejmenší design"

Jak se do vody podíval Dieter Rams – známý průmyslový designér, který se staví proti vlezlému designu, animačním efektům atd. V červnu 2013 Apple Inc. představil revoluční iOS 7, který dostal všechny atributy ve stylu plochého webdesignu. Letadlo však hned „neporazilo“ realismus a objem.

Uživatelé po dlouhou dobu nemohli zapomenout na kouzlo Steva Jobse a ikon, "které chcete lízat." Mnozí se dokonce rozloučili s „ubohou sedmičkou“ a přešli na „zářivý Android“. Přilil olej do ohně a velké množství chyb, které byly v iOS 7 přítomny, a bělostný, průsvitný design s paralaxou a animací v podobě „šmejdění“ při otevírání aplikací.

Ti, kteří rezignovali na nevyhnutelnou realitu a zůstali u „jablečného“ operačního systému, si nakonec uvědomili, že flat web design nejen zajímavě vypadá, ale také přináší řád a jednotný vizuální styl do všech aplikací.

Výhody a nevýhody plochého designu

Mezi výhody použití tohoto stylu patří:

jasnost kompozice a stručnost vizuálních prostředků. Responzivní rozhraní ve stylu „nic víc, aby si uživatelé rychle uvědomili, co jim chtěli sdělit;

zaměřit se na dobrou typografii. Obsah je na prvním místě, což je v dnešním množství informací nesmírně důležité;

menší velikost webových stránek a zrychlení webu díky minimálnímu počtu vizuální efekty. To je užitečné zejména při vytváření responzivních verzí, protože čím jednodušší formuláře, tím snadněji se zobrazují na malých obrazovkách mobilních zařízení.

Plochý web design má také nevýhody:

omezení fantazie webdesignéra na zjednodušené barvy, typografii, ikonografii. Proto je riziko vytvoření nudného a nevýrazného webu vyšší;

nedostatek trojrozměrnosti a stínů vám někdy neumožňuje pochopit, zda lze na prvek kliknout nebo ne;

nedostatek konkrétních pevných pravidel.

Pokud jste se rozhodli použít tento styl na svých stránkách, gratulujeme – to naznačuje, že vám záleží na pohodlí uživatelů a držíte krok s dobou. Pokud s webovým designérem teprve začínáte a nevíte, jak používat plochý design tím správným způsobem, aby váš web vypadal relevantní, ale ne primitivní, zde je několik tipů:

Zapomeňte na „cihlové zdi“ a světlé pozadí. V plochém designu webu je běžné používat jednoduché, hladké, měkké obrázky na pozadí.

Moderní tendence a přístupy k vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

Žádné přechody, 3D ikony, animované přechody nebo jiné speciální efekty. To vše způsobí, že váš web bude těžký a neklidný – potřebujete to?

Používejte ploché ikony s jasnými obrysy, které zvyšují pohodlí a funkčnost.

Použijte jasnou, šťavnatou paletu barev. Nyní jsou trendem tóny slunečního spektra: světle žluté, růžové a zelené. Hlavní věc není přehánět - na stránce by neměly být více než 3 barvy.

Zaměřte se na typografii. Plochý design upřednostňuje jasné, originální štítky, které vytvářejí výzvu k akci a umožňují snadnou navigaci na webu. I zde je důležité to nepřehánět. Zapomeňte na „ručně psané“ a jiné efektní fonty. Můžete použít ke zvýraznění záhlaví. velká písmena.

Nebojte se použít různé geometrické tvary. Čtverce, kruhy, čáry a další tvary pomohou nejen zlepšit strukturu webu, ale také vytvořit jasnou hierarchii a samostatný obsah. Uživatelé to ocení, věřte mi.

Usnadněte si to co nejvíce navigační menu a další prvky webu. Jako tlačítka použijte běžné obdélníky bez stínů a světel.

Webové stránky s plochým designem se tak během let staly standardem, který akceptuje naprosto každý. Podívejte se na většinu moderních stránek – jsou ploché „až na kost“.

Nakonec uvedu slíbené příklady povedeného plochého designu, které vám mohou posloužit jako inspirace k vytvoření vlastních mistrovských děl.

1. Stránky http://dunked.com.

Oblíbená platforma pro publikování portfolií, zaměřená na zástupce různých kreativních profesí. Minimalistický plochý web design navozuje pocit spolehlivé a srozumitelné služby, která neodvádí pozornost zbytečnými speciálními efekty.

2. Rozhraní Microsoft.

Microsoft je jednou ze společností, díky kterým se plochý styl stal tak populárním. Pamatujete si Zune, konkurenta pro iPod, kterého Microsoft vydal v polovině 2000? Design tohoto produktu se tedy velmi lišil od většiny aplikací té doby, především díky velké typografii, plochým ikonám, velkým a jasným tvarům.

Toto rozhraní, které se nazývalo Metro, později migrovalo na osobní počítače(Windows 8), rozhraní Xbox 360 a další softwarových produktů Microsoft.

3. Webové stránky http://www.vox.com.

Tak co, inspirujete se? Pryč s pseudorealistickou 3D estetikou!

To je vše. Přihlaste se k odběru, sdílejte naše články s přáteli v sociálních sítích. Vysoké konverze pro vás!

Moderní trendy a přístupy ve vývoji webu

Naučte se algoritmus pro rychlý růst od nuly při vytváření webových stránek

V tomto článku vám povím o plochém designu. Určitě jste o tom už něco slyšeli, protože byt se v posledních letech stal jedním z předních trendů na webu.

Dnes pochopíme, co je plochý design, jak vzniká a co potřebujete k vytvoření čistého, světlého a responzivního designu.

můžeš najít dobré příklady plochý design na http://market.envato.com/. Existuje spousta rozvržení, ikon a šablon, které vám poskytnou jasnou představu o tom, jak vypadá moderní design. .

1. Co je plochý design?

Design bytu - moderní styl uživatelské rozhraní, stejně jako grafický design, vyznačující se minimalismem. Plochý design se vyznačuje použitím minima prvků a absencí různých efektů textury, stínu a světla, například: smíšené barvy, přechody, zvýraznění a tak dále.

Plochý versus skeuomorfismus( Skeuomorfismus je princip designu, kdy jeden výrobek dostává vzhled jiného, ​​tzn. při kopírování různých prvků rozhraní ze skutečných objektů - přibližně překlad.) , stejně jako bohatý design.Nicméně stojí za to říci, že flat design není vůbec tak jednoduchý, jak se na první pohled zdá. Obsahuje některé rysy skeuomorfismu, ale o tom si povíme trochu později.

Obecně platí, že ploché pomáhá udržet uživatele zaměřené na obsah, aniž by ho rozptylovaly vizuální prvky. Plochý design zdůrazňuje jednoduchost prvků a zároveň činí rozhraní citlivějším, příjemnějším a snadno použitelným.

2. Trocha historie

Flat design, jak víte, existoval dávno před okamžikem, kdy se stal globálním trendem na webu. Plochý design byl v 80. letech poměrně populární díky tomu, že technika v té době ještě nebyla dostatečně vyvinuta, aby podporovala komplexní efekty, textury a stíny. Nicméně i tehdy se design snažil o skefomorfismus a snažil se vytvořit prvky rozhraní co nejrealističtější.

Flat-design v podobě, v jaké jej vidíme nyní, začal získávat na oblibě poté, co Microsoft začal vyrábět produkty v tzv. metro stylu. Metro je návrh uživatelského rozhraní od společnosti Microsoft, který zaujme svým stylem a jednoduchostí.

V roce 2010 Microsoft vydal Windows telefon 7, který používal plochý design s ostrými hranami a jednoduchou grafiku zděděnou od jednoho z raných produktů Microsoft (Zune). Později, inspirován úspěchem, Microsoft vydal operační systém Windows 8 založený na stejném plochém stylu Metro.

Plochý design koneckonců dosáhl svého vrcholu v roce 2013, kdy Apple vydal iOS 7 se zásadně demonstruje Nový design se zcela přepracovanými prvky uživatelského rozhraní, včetně ikon a písem. Apple vytvořil vizuální principy UI a designu ikon .

Krátce poté Google také začal používat plochý styl ve svých aplikacích a webových stránkách a nazýval jej materiálové provedení. Google má dokonce celou sekci věnovanou tomuto stylu, včetně popisu cílů webdesignu, jeho principů a návodů na vytváření různých designových objektů: ikon, rozvržení a tak dále.

Od té doby se flat stal klíčovým trendem ve webovém designu, díky němuž jsou webové stránky, aplikace a prvky rozhraní elegantní, čisté a stylové.

Existují tedy tři globální příklady flat designu od firem, bez kterých si to lze jen těžko představit moderní svět technologie:

Design Metro od Microsoftu

Design Apple iOS 7

Material Design společnosti Google

3. Pamatujte na čistotu

Plochému designu se zřejmě říká „plochý“ kvůli nedostatku 3D prvků a realistických efektů, jako jsou přechody, textury, světla, střední tóny, stíny. Pamatujte, že plochý styl je dvourozměrný (plochý) způsob zobrazování objektů.

V plochém designu jsou navíc objekty zobrazeny velmi zjednodušeně a stylizovaně.

A někdy se používá i jen silueta nebo obrysy předmětu, tzn. jen tolik, aby byl objekt rozpoznatelný, ale aby nebyl přetížen drobnými detaily.

Minimalismus se stal v dnešní době celosvětovým trendem: jednoduchost tvarů a použití ostrých hran vytváří čistý a líbivý design. Jednoduché formuláře jsou srozumitelnější a srozumitelnější. To udržuje design minimalistický, čistý a zabraňuje tomu, aby získal rušný a chaotický vzhled.

4. Perfektní

Vězte, že pokud jde o vytváření plochých ikon a prvků uživatelského rozhraní, musíte je vytvořit ostré, úhledné a dokonalé v pixelech, tzn. co nejvíc to půjde. Navíc to platí pro rastrovou i vektorovou grafiku.

S programem Adobe Photoshop zde je vše jasné: pracuje s rastrovou grafikou, která je založena na pixelech.

Co se týče programu Adobe Illustrator, pak využívá vektorovou grafiku, složenou z křivek a čar, nazývaných vektory, které jsou dány matematickými vzorci.

Kdysi nebyl Adobe Illustrator zrovna pohodlným programem pro tvorbu pixelově dokonalé grafiky. Dobrá zpráva je, že nejnovější verze Illustrator se stal skvělým nástrojem pro tvorbu dobré grafiky.

Musím to říct Vektorová grafika zahrnuje především práci s jednoduchými plochými tvary, plnými barvami a mřížkami. Adobe Illustrator je velmi flexibilní a umožňuje přizpůsobit mřížku vašim potřebám, zarovnávat objekty a používat odlišné typy praskání. To usnadňuje vytvoření dokonalého designu, který vypadá čistě a stylově na každém displeji. Pokud se chcete naučit vytvářet dokonalou grafiku, měli byste si přečíst článek: Jak vytvořit pixel perfektní kresbu pomocí Adobe Illustratoru .

5. Barva

Jedním ze specifičtějších rysů plochého designu, kromě stínů, je použití barev. Většina barev, které flat design používá ve svých prvcích, se skládá pouze z několika základních barev.

Barva v plochém provedení se vyznačuje jasem, sytostí, šťavnatostí.Ploché barevné schéma není omezeno na několik speciálních barev, obsahují mnoho odstínů a jejich výběr závisí pouze na tom, co zobrazujete, zda se jedná o ikony sladkostí nebo předměty v retro stylu v sofistikované retro paletě.

Řekněme, že jste návrhář uživatelského rozhraní a umíte dobře pracovat s barevnými paletami a experimentujete s barevným pruhem ve Photoshopu a Illustratoru a mícháte barvy, jak chcete. Tento proces je však poměrně komplikovaný a vyžaduje dobrou intuici, zkušenosti a dovednosti. Zde najdete některé nástroje, které vám pomohou vytvořit si vlastní paletu barev.

Některé z nich jsou vhodné pro všechny druhy vzorů a ilustrací, nejen pro ploché vzory. Například Adobe Color CC, lépe známý jako Cooler. Dnes je k němu přístup, a to jak přes webové stránky, tak přímo přes produkty Adobe. Chladič je velmi flexibilní nástroj, který vám umožňuje buď vytvořit vlastní paletu barev, nebo si vybrat z vlastních palet z knihovny.

Dalším jednoduchým a praktickým generátorem palety barev je Coolors. Stačí stisknout mezerník a program vygeneruje barevnou paletu, barvy si můžete upravit, nechybí ani exportní funkce.

Existuje několik dalších podobných služeb s vlastními paletami, které mohou být užitečné. Existuje však jeden nástroj vytvořený speciálně pro plochý design: FlatUIColors.com od Designmodo je služba se sadou „plochých“ barev, se kterou se velmi pohodlně pracuje. Tato stránka se stala velmi oblíbenou u návrhářů, kteří hledají dobré barevné volby pro dokonalé návrhy. Zkus to!

A můžete najít více různých barev a palet Průvodce materiálovým designem Google.

6. Dlouhé stíny

Jak již bylo zmíněno výše, plochý design se vyznačuje jednoduchostí, spoustou volného prostoru – proto flat odmítá použití jakýchkoliv efektů. Existuje však jeden efekt, který je specifický pro plochý design. Tento efekt se stal trendem a charakteristický rys byt.

Nyní mluvíme o dlouhých stínech. Mají nějaké typické vlastnosti, díky nimž je tento efekt rozpoznatelný, konkrétně: sklon 45 stupňů a velká velikost (stín může být několikrát delší než samotný objekt. Výsledkem je, že dlouhé stíny dodávají bytu určitý hloubkový efekt.

Tento efekt dělá objekt trojrozměrnějším, ale zároveň jej ponechává v kontextu plochého designu.

7. Práce s fonty

Typografie hraje v flat designu velkou roli. Hlavním prvkem kompozice se často stává text.

Flat obvykle používá jednoduché styly písma, díky nimž je celý design čistý a čitelný. Pokud používáte produkty Adobe, můžete v Adobe Typekit najít mnoho bezplatných písem. Na Font Squirrel můžete také najít mnoho dobrých bezplatných písem. Nezapomeňte si ale přečíst licenci, pokud budete font používat pro komerční účely.

Nejčastěji v plochém provedení je obvyklé používat velká písmena a kontrastní barvy, díky tomu je text čitelnější.

Používejte písma opatrně, pamatujte na to, že by měla zdůrazňovat a ladit s designem a neměla by vypadat jako samostatný prvek. To neznamená, že nemůžete používat patková písma nebo složitá kurzívní písma. Jen nezapomeňte být minimalistický a udržet vše v rovnováze. Ploché však stále častěji používají bezpatková písma, protože vypadají přísněji a úhledněji.

8. Klady a zápory plochého designu

I když se plochý design stal tak populárním díky svým mnoha výhodám, stále existují určité nevýhody, kterým návrháři při používání tohoto stylu čelí. Pojďme se podívat na klady a zápory.

profesionálové

Popularita

Flat design se stal trendem, získává stále více pozitivních ohlasů od designérů a webdesignérů a vůbec nevypadá, že by ztrácel půdu pod nohama. Naopak se stále více rozšiřuje, získává nové formy a rysy, stává se stále kreativnějším.

Jednoduchost

Plochý design je jednoduchý, minimalistický a čistý. Flat on the web pomáhá uživatelům soustředit se spíše na obsah, než aby je rozptylovaly vizuální prvky. To také funguje pro rozhraní mobilních aplikací: čistý design s velká tlačítka umožňuje dokonalé používání mobilních zařízení.

Jas

Barva je dalším skvělým plusem plochého designu. Jasné a syté barvy vypadají atraktivně a čistě a nedostatek přechodů dělá design stylovým. Navíc takové čisté barvy dělají to pozitivnější, prezentovatelnější, plochý design vytváří správnou náladu.

Nedostatky

Byt má mnohem více výhod, ale žádný design není dokonalý a nemůžeme si ho idealizovat. Zde jsou některé nevýhody plochého designu, které musíme zmínit:

Necitlivost

Někdy nedostatek důležitých detailů nebo vizuálních efektů ztěžuje proces vytváření uživatelsky přívětivého rozhraní, což obecně způsobí, že celý design nereaguje. Ne všichni uživatelé se s flatem cítí dobře, protože může být obtížné najít prvky na webové stránce, na které musíte kliknout nebo klepnout na obrazovku. mobilní telefon protože nejsou interaktivní.

Problémy s typografií

Jak již bylo zmíněno, ne každé písmo může vyhovovat plochému designu. Někdy vypadá takto bohaté písmo s ostrými hranami opravdu vyváženě a stylově. V případě špatného výběru písma to však může zničit celý design. Musíte mít opravdu dobrý cit pro to, která písma jsou vhodná pro plochá a která ne.Nedostatek zkušeností činí výběr písma velmi obtížným.

Slabý vizuál

Kvůli omezením v použití efektů, barev a písem může byt vypadat příliš jednoduše a chladně. Jeho hlavní nevýhodou může být také minimalismus – ostatní ploché designy nakonec vypadají přesně jako ty vaše. Je tedy velmi obtížné, aby vaše ikony nebo webové stránky vypadaly odlišně od designu někoho jiného, ​​protože používáte stejné zjednodušené tvary, omezené barevné palety a podobná písma. V důsledku toho může být plochý design časem nudný.

9. Budoucí trendy plochého designu

Nedá se říci, že by flat design byl svým způsobem plně formován a zastaven, možná právě kvůli výše zmíněným nedostatkům má flat tendenci se rozvíjet a měnit, získávat nové rysy a zvyšovat vizuální expresivitu.

Pokud se pozorně podíváte na poslední příklad plochého designu, můžete vidět, že tomu tak skutečně jepostupně od svých přísných nástrojů a začíná přidávat jemné efekty, jako jsou přechody, stíny, osvětlení a další vizuální efekty.

Tyto drobné úpravy dodávají plochým designům určitou hloubku, aniž by byly příliš detailní, jako to dělají skeuomorfní návrhy. Tato drobná vylepšení činí byt citlivějším a pohodlnějším a zároveň přinášejí svěží vzhled, díky němuž je byt flexibilnější a všestrannější.

Byt tak neztrácí své vlastnosti, ale stává se zajímavějším, flexibilnějším- Opravdu se zlepšuje.

závěry

Probrali jsme tedy některá fakta z historie flat designu a bavili se o barvách, tvarech a typografii. Podívali jsme se na různé úhly pohledu, pozastavili jsme se nad výhodami a nevýhodami bytu a naučili jsme se některé z hlavních zásad pro vytváření dobrého designu.

Doufám, že jste se z tohoto článku dozvěděli něco nového, nebo vás alespoň zaujal. Pokud jste to ještě neudělali, měli byste zkusit plochý design.

Ostatně, co dalšího je třeba zmínit o flat designu?

Pokud máte opravdu rádi ploché s jeho ostrými hranami, šťavnatými barvami a ostrým písmem, jeho čistotu a minimalismus, pak směle do toho!

Je to v trendu, ale jako u každého jiného grafického stylu se neomezujte na jednu techniku. Pokud je byt v trendu, neznamená to, že nemůžete ve svém projektu použít jiné styly. Skeuomorfismus se svými drobnými detaily a texturami se také může stát dobré rozhodnutí. A co je nejdůležitější, nezapomeňte, že design je pro každý projekt jiný, musí vyjadřovat jeho ducha, účel, podstatu a přitom zůstat pohodlný a funkční. Vpřed!

Co je plochý design? Tento designový směr je jedním z nejdiskutovanějších na internetu. Flat design je zkrátka extrémně zjednodušený styl, jehož kořeny sahají až k minimalismu. Ale to není zrovna minimalismus, protože daný styl může mít různé podoby v závislosti na požadavcích na design. Abyste lépe pochopili, co plochý design je, je nejlepší vrátit se zpět a definovat, co přesně není.

Toto není 3D. 3D grafika sama o sobě umožňuje získat velmi realistické, ale zároveň dvourozměrné obrázky. Na rozdíl od 3D plochý design nevěnuje velkou pozornost detailům, které vytvářejí hloubku a rozměr, jako jsou stíny, světla a textury.

Toto není skeuomorfismus. Plochý design se objevil jako alternativa k pseudodimenzionálním designovým prvkům, které napodobovaly skutečné objekty nebo procesy. Skeuomorfismus zahrnuje aktivní použití různých efektů: stíny, odrazy, odrazy a realistické textury. V plochém provedení nic z toho není a nemůže být.

Poprvé se o plochém designu začalo mluvit v letech 2012-2013, kdy se tento styl poprvé objevil. Tento trend byl velmi patrný a nadělal spoustu hluku, protože jedním z prvních, kdo začal tento směr rozvíjet, byl Microsoft. Vydání Windows 8 s novým rozhraním navždy změnilo design a do značné míry předurčilo vývojový vektor webu, alespoň jeho vizuální složky.

Stranou nezůstal ani Apple, který také opustil pseudovolumetrické prvky v designu rozhraní svých zařízení. Microsoft a Apple vytvořili novou realitu, kde zastaralé webové stránky neměly místo. Apple se přitom nechoval tak radikálně jako jeho věčný konkurent a postupně se zbavil prvků skeuomorfismu.

Plochý design sám o sobě není ani špatný, ani dobrý, webdesignéři ho dělají pohodlným nebo nepohodlným. Ale abych byl upřímný, plochý design ve svých extrémech není příliš estetický. Sladká tečka je v tomto případě pravděpodobně někde uprostřed mezi plochými a pseudoobjemovými prvky.

Je docela možné, že dominantní pro několik v posledních letech trend k extrémnímu zjednodušování bude nahrazen něčím jiným. Existují pro to určité předpoklady – například směr Material Design, který vytvořili designéři společnosti Google Corporation.

KOMPATIBILNÍ S ADAPTIVNÍM DESIGNEM

Odklon Microsoftu a Applu od skeuomorfismu v designu rozhraní měl velké důsledky. Nový styl byl téměř okamžitě přijat jako nový přístup k UX. Od té doby se plochý design stal dominantním trendem, který je stále aktuální. Ploché prvky jsou dnes všudypřítomné, vidíme je na webových stránkách, v aplikacích i na displejích různých zařízení.

Principy plochého designu se vztahují na širokou škálu kategorií designu, ale jeho přísné mřížky a zjednodušená grafika se nejlépe zobrazují na zařízeních s malou obrazovkou.

Trend k minimalismu výrazně zjednodušil práci designérům – bylo pro ně jednodušší navrhovat rozhraní, která se správně zobrazují na jakémkoli typu zařízení. V případě pseudo-3D prvků tomu tak nebylo – občas se rozhraní, které vypadalo na ploše desktopu úžasně, na mobilním zařízení změnilo v dýni čehosi nevýrazného.

Jednou z hlavních výhod plochého designu je jeho škálovatelnost. Ploché prvky vypadají dobře bez ohledu na velikost a pracuje se s nimi mnohem snadněji než s návrhy s dokonalými pixely.

FLEXIBILNÍ PLATFORMA

Plochý design ve snaze o jednoduchost se vyznačuje dobrou flexibilitou: všechny prvky jsou obvykle vytvořeny z jednotných geometrických tvarů, což usnadňuje vytvoření vyváženého uspořádání, kde má každý modul nebo blok své místo. Všechny prvky jsou přitom snadno odlišitelné a co je důležité, lze je za provozu rychle prohodit, aniž by došlo k porušení původního nastavení.

Mřížky mají také flexibilní strukturu, kterou lze prezentovat v různých konfiguracích. To umožňuje návrhářům vytvářet nejoptimálnější přístupy, které nejlépe předvedou obsah, který mají k dispozici. Absence omezení a nutnost úpravy gridu v případě změn či doplnění nových prvků výrazně zrychluje workflow.

ČITELNÁ TYPOGRAFIE

Plochý design zásadně změnil způsob, jakým designéři přemýšlejí o typografii. Nový styl vyžadoval jiný přístup k volbě písem a ke kvalitě rozvržení. Díky absenci stínů a různých efektů byly texty čitelnější.

Plochý design inklinuje k rozsáhlému použití bezpatkových prvků, to však není kisome a patky mohou také vypadat dobře, když jsou spárovány s plochými prvky. Patkové fonty budou docela vhodné jako nadpis a lze je použít i v hlavním textu, pokud typografie nenarušuje kompoziční jednotu.

MÍNUSY

Může se zdát, že plochý design nemá chyby, ale není tomu tak. Ve snaze zdůraznit čisté linie a tvary někteří designéři upadnou do pasti zaměřené na estetiku a přitom zapomínají na použitelnost. Jednoduchý a krásný design, ve kterém není nic zbytečného, ​​není vždy pohodlný a takové chyby jsou zvláště výrazné při používání mobilních zařízení.

V plochém designu je často obtížné určit, který prvek je interaktivní a který ne. Vše je stejné, nejsou zde žádné zjevné rozdíly, všechny prvky leží ve stejné rovině. Ve snaze o jednoduchost mohou návrháři nechtěně skrýt nebo nevědomky zamaskovat důležité funkce nebo akce a uživatel, který nevidí obvyklé výzvy, může ztratit orientaci na webu.

Vezměme si tento web jako příklad. Jaké prvky v něm jsou interaktivní. Všechno? Nebo jen některé? Nejasný. To lze zjistit pouze „metodou poke“, ale to už jsou pohyby navíc, což je nežádoucí.

ZTRÁTA INDIVIDUALITY

Pro každou značku, obchod nebo designový projekt je jedinečnost nanejvýš důležitá. Ať už se jedná o web, aplikaci, booklet, plakát nebo vizitku, design musí být originální a dobře rozpoznatelný.

Jednou z nevýhod flat designu je jeho vizuální styl. Použití jednoduchých geometrických tvarů často vede ke dvěma zcela odlišným designům, které jsou si navzájem velmi podobné. Designéři, kteří používají ploché prvky, jsou omezeni v tom, co mohou dělat, protože toho moc nemají velký výběr přijatelné možnosti. V poslední době můžete na internetu vidět spoustu klonovacích stránek, které ve skutečnosti klony nejsou. Je to jen náhoda. Kromě toho je náhoda nepříjemná, protože stránka ztrácí svou tolik potřebnou individualitu a ztrácí se na pozadí jiných zdrojů s podobným designem.

Někdy to přijde směšné. Při pohledu na tyto obrázky si možná myslíte, že máme různé sekce stejné aplikace. Ale ne, návrháři Marco La Mantia a Simone Lippolis pracovali nezávisle. Jako hlavní designové prvky jsou použity základní geometrické tvary a bílé bezpatkové písmo - řešení je více než logické. Výsledek je ale žalostný – stejné barevné řešení zcela připravilo design o jedinečnost. A takových případů je mnoho.

CHASING FASHION

Plochý design zůstane ještě dlouho jedním z nejžhavějších trendů, jednoduše proto, že vypadá dobře na displejích mobilních zařízení. Ale mnoho návrhářů si vybírá ploché nejen proto, že vám umožňuje rychle vyřešit většinu úkolů, ale také kvůli jejich touze vytvořit něco moderního a módního.

Při honbě za módou však může člověk udělat vážnou chybu: pokud bezmyšlenkovitě sledujete všechny trendy, je docela možné zapomenout na užitečnost designu. Byt může být velmi krásný, elegantní a dokonce půvabný, ale přesto by výběr designéra měl být určován funkčností a ne touhou po kráse. Někdy touha „strčit“ do designu něco módního jen bolí, například dlouhé stíny, jeden z nejznámějších plochých designových čipů.

Před námi jsou práce designérů Alexandra Lototského a Erika Malmskelda. To jsou typické příklady použití dlouhých stínů v designu. Teď už tím nikoho nepřekvapíte, ale svého času, a obě díla vznikla už v roce 2013, kdy flat design teprve přicházel do módy, byl nový vizuální styl velmi zajímavý a atraktivní. Ve výsledku je podobných ikon tolik, že dnes je použití stínů vzorovým a nezajímavým řešením. Dříve to bylo v módě, ale už ne. Stíny jsou jako stíny. Nemají žádný význam, ne užitečná funkce nevystupují.

ŠPATNÝ VÝBĚR PÍSMA

Každý designér sní o tom, že vytvoří něco krásného a zároveň funkčního. Ale ve snaze o estetiku můžete udělat špatná rozhodnutí, která ovlivní použitelnost. Příkladem je šílenství po tenkých a světlých fontech. Tento typ typografie vypadá čistě a lehce, ale špatně se čte.

Někdy je volba tenkého písma oprávněná – například pro použití v nadpisech. Ale když je hlavní text napsán stejným fontem, je často nemožné jej přečíst. Takové chyby jsou zvláště patrné v mobilní zařízení – malá velikost obrazovka dramaticky snižuje čitelnost obsahu.

PLOCHÝ 2.0

Během posledních let designéři experimentovali s plochými prvky a přinesli do flat designu spoustu nových věcí. Styl je plně formován a jako každý jiný zavedený styl má své klady a zápory.

Na úsvitu svého vzhledu se byt vyznačoval přísnou vizuální jednoduchostí, nebyl v něm žádný náznak stínů a struktur. Dokonce ani gradienty se netěšily velké úctě, přestože neodporují zásadám plochého designu.

Ale postupně se od nich začali vzdalovat i designéři jednoduchá řešení, snažící se najít nějaké kompromisní řešení mezi plochým a skeuomorfismem. Výsledkem je nový styl, který někteří návrháři nazývají Flat 2.0. V designových prvcích se postupně začaly objevovat stíny, přechody a dokonce i lehké, téměř neznatelné struktury. Plochému designu zjevně chybí hloubka a designéři začali využívat hybridní přístupy. Například vizuálně uspořádat prvky na různé úrovně, experimentujte s odstíny a stíny. Dalším často používaným příkladem hybridního přístupu je použití nejen ikon a plochých vektorových ilustrací v bytě, ale i fotografií.

Google udělal hodně pro propagaci Flat 2.0. Material Design Guideline je pokusem o vytvoření nového vizuálního jazyka, který kombinuje ploché a trojrozměrné designové prvky. Doporučení Google jsou velmi podrobná a snadno se řídí. Google přitom netrvá na přísném dodržování všech pravidel uvedených v pokynu – designéři mohou experimentovat při vytváření vlastních originálních projektů, kde lze kombinovat nejrůznější prvky.

ZÁVĚR

Dnes je Flat 2.0 v plenkách, ale směr, kterým se tento styl bude vyvíjet, je již docela patrný. Výrazné změny se neočekávají – tvůrci trendů Google, Apple a Microsoft byt neopustí. Pokud dojde k nějakým změnám, budou drobné – objeví se nové přístupy, někdo přijde se zajímavým „čipem“, pokusy budou nadále brát to nejlepší ze skeuomorfismu. V globálním pojetí by se ale nemělo čekat nic opravdu nového – plochý design je dlouhodobý trend a jen styl, který nejlépe vyhovuje novým technologiím, které ještě neexistují, jej může posunout z vybojovaných pozic.