Revoluce „plochého designu“ od uvedení na platformě Windows Phone v roce 2010 stále nabírá na síle. Není těžké pochopit proč: rozhraní s tímto designem se zdá intuitivnější, dobře se hodí pro adaptivní prvky, moderní rámce a při správném provedení vypadá atraktivně.
Plochý design začal jako protiváha všudypřítomného skeuomorfního stylu, ale od té doby se stal mnohem víc než jen „možností B“.

Byt byl zpočátku výhradně dvourozměrný s celkovým zaměřením na minimalismus. Moderní flat 2.o využívá stíny, přechody a další prvky, aby vypadal „téměř plochý“.

5 charakteristických součástí moderního plochého designu:

1. Dlouhé stíny
Dlouhé stíny dodávají obrázkům hloubku a rozměr, aniž byste museli obětovat minimalistické detaily ikon, které činí rozhraní atraktivním.

2. Dynamické barvy
Doplnění řídkých vizuálů je snadné pomocí energických barev, zejména světlých odstínů.
Různé barvy pozadí v kontrastu se základní barvou prvků činí stránku s dlaždicovou nabídkou živější.
Web Flat UI Colors obsahuje nejúčinnější barevné vzory pro ploché.

3. Jednoduchá typografie
Volba plošného písma je založena na jednom kritériu: čitelnosti. Obvykle se používají bezpatková písma s konstantní šířkou tahu.

4. Průhledné tlačítko
Jeden z trendů v moderním webdesignu. Důvodem je, že nepřitahuje příliš mnoho pozornosti, ale je jasně rozpoznatelný jako tlačítko.

5. Minimalismus
Plochost a minimalismus jdou ruku v ruce a využívají stejné principy: jednoduchost a obsahové zaměření.
Může se zdát, že použití plochého designu je univerzální řešení, ale minimalismus je obtížné implementovat: čím méně pracovních prvků, tím více pozornosti vyžadují.

Bez ohledu na to, jak skvělý plochý design se může zdát, neexistuje žádná záruka, že bude na vašem webu fungovat. Podívejte se na jeho hlavní výhody a zjistěte, zda se vyplatí plánovat globální redesign.

výhody:
používá se v responzivním rozhraní;
zjednodušuje uživateli navigaci;
jasná struktura a schematický vizuál zdůrazňují vnitřní logiku stránky;
rychlé načítání stránek díky jednoduchosti grafiky;
Známá typografie zlepšuje čitelnost.

Flat design je o jednoduchosti a minimalismu, což na druhou stranu ztěžuje předávání vizuálně složitých sdělení. Než se tedy bezhlavě vrhnete do zjednodušování rozhraní, měli byste pečlivě zvážit interakci mezi webem a uživatelem.

Na základě knihy trendů webového designu.

Dnes zaměříme svou pozornost na jednu z nejoblíbenějších oblastí moderního grafického designu, která se nazývá flat design.

Slavný umělec Edgar Degas kdysi řekl: „Umění není to, co vidíte, ale to, co necháte vidět ostatní. To platí i pro grafický design, který lze také definovat jako umění, které řeší konkrétní problém. Grafický design má schopnost změnit náladu a sdělení prostřednictvím sebemenších změn tvarů a odstínů, písmen a mezer. Trendy v této oblasti, které se staly nedílnou součástí každodenního života, protože ovlivňují rozhodovací proces a řeší problémy prezentace moderního produktu a také formují vkus uživatelů.

Dnes se termín „plochý design“ používá v grafice pro mnoho účelů a úkolů, které mají společné stylistické rysy. Flat design je trend, který našel mnoho projevů v oblasti digitálních produktů, díky lakonickému použití vizuálních výrazových prostředků.

V dnešní době je termín široce používán jako opak „bohatého designu“ kvůli harmonické jednoduchosti, která je základem tohoto přístupu. Nejpozoruhodnějším rysem, který dává tomuto pohybu jméno, je použití plochých, dvourozměrných vizuálních detailů, na rozdíl od vysoce realistických a detailních skeuomorfních obrázků. Flat design se v posledních letech aktivně rozvíjí a pokrývá stále více oblastí grafického designu, které nacházejí široké a rozmanité uplatnění v oblasti digitálního designu pro webová a mobilní rozhraní. Tento přístup lze považovat za styl, který podporuje použitelnost a vizuální harmonii v uživatelských rozhraních.

Historie plochého designu

Je zřejmé, že plochý design nevznikl ze vzduchu. Za jeho původ je obvykle považován švýcarský styl. Švýcarský styl, také známý jako mezinárodní typografický styl nebo zkráceně mezinárodní styl, je hnutí, které vzniklo ve 20. letech 20. století, ale setkalo se s velkou kritikou a poté prošlo ve Švýcarsku ve 40. a 50. letech dramatickým přerodem v grafickém designu, který se stal pevný základ grafického designu poloviny 20. století po celém světě. Zakladateli tohoto tvůrčího hnutí byli Joseph Müller-Brockmann a Armin Hofmann.

Podle webu Design Is History je souhrn klíčových vlastností tohoto stylu následující: „...styl zaměřený na jednoduchost, čitelnost a objektivitu. Dědictvím tohoto stylu je použití bezpatkových písem, mřížek a asymetrických rozvržení. Fotografie vynikají také jako prostředek vizuální komunikace. Velká vlivná díla byla navržena jako plakáty, které byly považovány za nejúčinnější způsob poskytování informací.“

Plakáty prezentované jako ukázky ukazují, že vyznavači tohoto stylu si oblíbili jednoduché tvary, výrazné a striktní písmo s vysokou mírou čitelnosti, geometrické kombinace detailů, ploché ilustrace a jasnou vizuální hierarchii. Švýcarský design se rychle stal stále populárnějším v různých zemích a získal nový život v umění počátku 21. století.

Přestože tento styl získal mnoho výrazů v oblasti vizuálního designu pro tisk: plakáty, známky, karty, obálky knih, časopisy atd., výrazně rozšířil své obzory v éře digitálního designu, zejména v oblasti designu uživatelského rozhraní. .

Webové stránky a mobilní aplikace otevřely úžasnou a plodnou perspektivu pro tento minimalistický a funkční přístup k návrhovým řešením. Styl se nazýval „plochý design“, který se okamžitě stal populárním a zahájil nový směr v grafickém designu.

První krok ke zvýšení popularity plochého uživatelského rozhraní v digitálních produktech učinil Microsoft, toto hnutí začalo na počátku 21. století a v roce 2010 se široce rozvinulo v produktech, zejména ve vývoji mobilních rozhraní pro Windows Phone 7. Klíčové vlastnosti flat design, jako jsou intuitivní jednoduché tvary, výrazná, jasná typografie, jasné kontrastní barvy, dlouhé stíny, nedostatek složitých detailů a textur, se dobře ujal. K dalšímu nárůstu popularity plochého designu došlo v roce 2013, kdy Apple vydal iOS 7 využívající principy ploché grafiky jako základ pro pohodlné a intuitivní rozhraní. Dalo by se také říci, že některé z klíčových principů plochého designu si našly cestu do Material Designu Google.

Hlavní rysy plochého designu jsou tedy:

• jednoduchost forem a prvků;
• minimalismus;
• funkčnost;
• tučná a snadno čitelná typografie;
• jasná a přísná vizuální hierarchie;
• kombinace kontrastních barev, která poskytuje rychlé vizuální vnímání;
• vyhýbání se texturám, přechodům a složitým tvarům;
• aplikace principů mřížky, geometrického přístupu a vizuální rovnováhy.

Výhody plochého designu

Fdat design má řadu výhod, které určují jeho popularitu a rozmanitost v digitálním designu. Mezi ty nejvýznamnější:

• čitelnost;
• jasná vizuální hierarchie pomocí tvarů, barev a písem;
• efektivní organizace rychlé a intuitivní navigace ve webových a mobilních rozhraních;
• snadná škálovatelnost pro responzivní design;
• zanedbatelné zatížení pro digitální systém.

Se vším, co bylo řečeno, plochý design poskytuje široké pole pro kreativní zkoumání a stylistické koncepty.

Ploché provedení - aplikace v praxi

Rozmanitost designových stylů dostupných a vyvíjejících se v dnešní době se dobře hodí k plochému designu díky jeho flexibilitě a umělecké svobodě.

Již v počáteční fázi plánování celkové dispozice, logiky a přechodů lze uplatnit principy flat designu. Digitální designové nástroje a software používané v této klíčové fázi umožňují návrhářům prezentovat klientům a týmům jednotné rozvržení všech obrazovek aplikace nebo webových stránek, a dokonce i toto základní rozvržení již má klíčové vizualizační funkce typické pro plochý design. V této fázi je ideální pro rychlé a efektivní zobrazení návrhových řešení v jednoduchém monochromatickém uspořádání.

Návrh uživatelského rozhraní

Uživatelská rozhraní se rozhodně stala širokým a příznivým polem pro plochý design. Svůj vývoj našel jak v abstraktních konceptech uživatelské interakce, tak v různých originálních rozhraních, ikonách, prvcích rozhraní a ilustracích.

Tyto typy ilustrací poskytují dodatečnou podporu digitálním produktům a bývají složitější z hlediska detailů a uspokojují estetické potřeby uživatelů a zároveň okamžitě navazují spojení s konkrétním tématem.

Tištěné ilustrace

Různorodost účelů moderního flat designu a jeho rostoucí obliba v digitálních produktech ovlivnily i další oblasti designu, zejména design tištěných produktů, jako jsou plakáty a obálky knih, ze kterých tento přístup vzešel.

Branding

V současné době design značky také úspěšně uplatňuje principy plochého designu díky své flexibilitě, přičemž mnoho produktů je prezentováno na zařízeních nebo získává digitální podporu online. Plochý design v brandingu je často reprezentován logy a ikonami aplikací.

Všechna uvedená fakta a výhody o flat designu rozhodně neznamenají, že tento styl zvítězil nad ostatními designovými přístupy. Jakýkoli styl a směr designu má své výhody a nevýhody. Plochý design však otevřel nové perspektivy, zejména v oblasti zakázkových řešení, která představují harmonickou rovnováhu krásy a funkčnosti.

V tomto článku vám povím o plochém designu. Pravděpodobně jste o tom již něco slyšeli, protože byt se v posledních letech stal jedním z hlavních trendů na webu.

Dnes se podíváme na to, co je plochý design, jak vznikl a co potřebujete k vytvoření čistého, světlého a responzivního designu.

Dobré příklady plochého designu najdete 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?

Flat design je moderní styl uživatelského rozhraní a grafického designu, 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ý je protikladem skeuomorfismu( 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á uživateli soustředit se na obsah, aniž by byl rušen vizuálními 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. Trochu historie

Plochý design, jak víte, existoval dlouho předtím, než se stal globálním trendem na webu. Plochý design byl v 80. letech poměrně populární díky tomu, že tehdejší technologie ještě nebyla dostatečně vyvinutá, aby podporovala komplexní efekty, textury a stíny. Nicméně i tehdy design usiloval o skeufomorfismus a snažil se vytvořit prvky rozhraní co nejrealističtější.

Plochý 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 Phone 7, který používal plochý design s ostrými hranami a jednoduchou grafiku zděděnou od jednoho z jeho dřívější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 popularity v roce 2013, kdy Apple vydal iOS 7 se zcela novým designem 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 .

Brzy poté začal plochý styl používat ve svých aplikacích a webových stránkách také Google a nazýval jej Material Design. 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 plochého designu od společností, bez kterých je obtížné si představit moderní svět technologií:

Design Metro od Microsoftu

Design Apple iOS 7

Material Design společnosti Google

3. Nezapomeňte být čistý

Plochému designu se zřejmě říká „plochý“ kvůli nedostatku trojrozměrných prvků a realistických efektů, jako jsou přechody, textury, světla, polotó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 kontury objektu, tzn. jen tolik, aby byl objekt rozpoznatelný, ale nepřetěžoval jej 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 přehlednější a srozumitelnější. Díky tomu je design minimalistický a čistý, aniž by mu dodal rušný a přeplněný vzhled.

4. Doveďte to k dokonalosti

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.

Adobe Photoshop zde má jasno: pracuje s rastrovou grafikou, která je založena na pixelech.

Pokud jde o program Adobe Illustrator, používá vektorovou grafiku složenou z křivek a čar nazývaných vektory, které jsou specifikovány matematickými vzorci.

Kdysi nebyl Adobe Illustrator nijak zvlášť pohodlným programem pro tvorbu pixelově dokonalé grafiky. Dobrou zprávou je, že nejnovější verze Illustratoru se staly skvělým nástrojem pro tvorbu dobré grafiky.

Musím říci, že vektorová grafika většinou zahrnuje práci s jednoduchými, plochými tvary, čistými barvami a mřížkami.Adobe Illustrator je velmi flexibilní ve svém nastavení a umožňuje přizpůsobit mřížku vašim potřebám, zarovnávat objekty a používat různé typy přichytává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 kresbu v pixelech pomocí Adobe Illustratoru .

5. Barva

Jednou z nejspecifičtějších vlastností plochého designu je kromě stínů 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í je jasná, sytá a sytá.Ploché barevné schéma není omezeno na několik speciálních barev, obsahuje mnoho odstínů a jejich výběr závisí pouze na tom, co zobrazujete, ať už jde o ikony sladkostí nebo předměty v retro stylu v sofistikované retro paletě.

Řekněme, že jste návrhář uživatelského rozhraní, který dobře rozumí paletám barev, a experimentujete s panelem barev ve Photoshopu a Illustartoru a mícháte barvy, jak chcete. Tento proces je však poměrně složitý 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 typy designu a ilustrace, nejen pro plochý design. 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. Cooler je velmi flexibilní nástroj, který vám umožňuje buď vytvořit vlastní paletu barev, nebo si vybrat z vlastní palety z knihovny.

Dalším jednoduchým a pohodlný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 - služba se sadou „plochých“ barev, velmi vhodná pro práci. Tato stránka se stala velmi oblíbenou mezi designéry, kteří hledají dobrá barevná řešení pro dokonalý design. Zkus to!

A také v něm najdete větší škálu barev a palet Průvodce Material Design od Googlu.

6. Dlouhé stíny

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

Teď mluvíme o dlouhých stínech. Mají některé typické vlastnosti, díky kterým je tento efekt rozpoznatelný, jmenovitě: sklon 45 stupňů a velké rozměry (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 činí objekt trojrozměrnějším, ale zároveň jej zachová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.

Ploché návrhy obvykle používají jednoduché styly písma, díky čemuž je celý návrh celkově čistý a čitelný. Pokud používáte produkty Adobe, můžete v Adobe Typekit najít mnoho bezplatných písem. Na Font Squirrel také najdete spoustu dobrých bezplatných písem. Nezapomeňte si ale přečíst licenci, pokud hodláte písmo používat pro komerční účely.

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

Používejte písma střídmě, pamatujte na to, že by měla spíše doplňovat a doplňovat design, než aby se objevovala jako samostatný prvek. To neznamená, že nemůžete používat patkové nebo ručně psané složité fonty. Jen nezapomeňte být minimální a udržovat vše v rovnováze. Ploché však stále často 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.

klady

Popularita

Plochý design se stal trendem, získává stále více pozitivních recenzí od designérů a webdesignérů a nezdá se, že by své postavení vůbec ztrácel. 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 na obsah, nikoli být rozptylováni vizuálními prvky. To platí také pro rozhraní mobilních aplikací: čistý design s velkými tlačítky dělá mobilní zážitek dokonalým.

Jas

Barva je dalším skvělým plusem plochého designu. Jasné a syté barvy vypadají atraktivně a čistě a díky absenci přechodů je design stylový. Navíc je díky těmto čistým barvám pozitivnější a prezentovatelnější, plochý design vytváří tu 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ůsobuje, že celý návrh nereaguje. Ne všem uživatelům vyhovuje flat, protože může být obtížné najít prvky na webové stránce, na které musíte kliknout nebo klepnout na obrazovce mobilního telefonu, protože nejsou interaktivní.

Problémy s typografií

Jak již bylo zmíněno dříve, ne každé písmo může být vhodné pro plochý design. Někdy vypadá takto bohaté písmo s ostrými hranami opravdu vyváženě a stylově. Pokud je však písmo zvoleno nesprávně, může to zničit celý design. Měli byste mít opravdu dobrý pocit, 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 mohou ploché návrhy vypadat příliš jednoduše a chladně. Jeho hlavní nevýhodou může být také minimalismus – ostatní ploché designy nakonec vypadají úplně stejně jako vy. 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 se flat design plně zformoval a zastavil ve svých kolejích, možná je to kvůli jeho výše zmíněným nedostatkům, flat design se snaží o vývoj a změnu, získává nové rysy a zvyšuje vizuální expresivitu.

Pokud se pozorně podíváte na poslední příklad plochého designu, můžete si všimnout, že je to skutečně takpostupně se vzdaluje 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ému designu určitou hloubku, aniž by byl příliš detailní jako skeuomorfní vzory. Tato jemná vylepšení činí byt citlivějším a pohodlnějším a také 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 a 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, zaměřili jsme se na výhody a nevýhody bytu a naučili jsme se některé z hlavních principů tvorby dobrého designu.

Doufám, že jste z tohoto článku získali nové informace nebo vás alespoň zaujal. Pokud jste to ještě neudělali, dlužíte si vytvořit plochý design.

Ostatně, co ještě zmínit o plochém designu?

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

Je to trendy, ale jako u každého grafického stylu se neomezujte pouze na jednu techniku. To, že byt je trendy, neznamená, že ve svém projektu nemůžete použít jiné styly. Skeuomorfismus se svými drobnými detaily a texturami může být také dobrým řešením. Hlavní věc je mít na paměti, že design je pro každý projekt jiný, musí vyjadřovat jeho ducha, účel, podstatu a zároveň zůstat pohodlný a funkční. Vpřed!

Obrovskou oblibu si v poslední době získává specifický styl v designu webových stránek a uživatelských rozhraní, který se díky stylizaci svých prvků nazývá Flat.

Pokud se podíváte na web vytvořený podle plochých pravidel, neuvidíte žádné přechody s přechodem, žádné stíny, ani sebemenší náznak objemu nebo textury. Základními principy plochého stylu jsou jednoduchost, stručnost a minimalismus. Hlavní charakteristické rysy jsou ty věci, na které se můžete zaměřit - světlé neobvyklé barvy, nestandardní typografie, grafické primitivy.

Dnes tento trend využívá ve své práci stále více designérů, ale Flat styl si získal oblibu zejména s rozšířením moderních mobilních operačních systémů Windows Phone a iOS 7, protože jsou následovníky tohoto trendu, i když se nedrží to úplně.

Naše společnost již má zkušenosti s tvorbou webových stránek ve stylu Flat a rádi vám s vytvořením plochého webu pomůžeme!

V tomto článku zdůrazníme základní principy plochého designu, které byste měli dodržovat, pokud chcete použít flat jako hlavní styl vašeho projektu.

Níže analyzujeme a uvedeme příklady některých webů, které používají plochý styl.

1. Odstraňte všechny efekty

Základním principem flat designu je vytvoření dvourozměrného obrazu, který je již sám o sobě plochý. Zároveň se musíte zbavit všech prvků, které dokážou snímku přidat alespoň nějakou hloubku: přechody, plynulé přechody, stíny, zkosení, objem, textury a tak dále. Všechny prvky obrázku mají tvrdé okraje a také nevyčnívají nebo nemají hloubku vzhledem k ostatním prvkům obrázku.

V flat designu nenajdete prvky, které se snaží vypadat realisticky (skeuomorfismus), 3D animace, realistické ikony atd. Samotný design se však snaží zůstat podobný tomu tradičnímu, nyní se však do popředí dostávají popisky, tlačítka a navigace.

Na první pohled se web využívající Flat design může zdát příliš jednoduchý, ačkoli ve skutečnosti se tento styl vyznačuje jasnou hierarchií prvků, pohodlným umístěním všech nástrojů pro interakci s uživatelem, a proto má vysoké skóre použitelnosti.

2. Používejte jednoduché prvky

K dosažení svých cílů v plochém designu používají designéři tlačítka a ikony. Měly by být co nejvíce intuitivní a klikatelné. Stejně jako všechny ostatní prvky rozhraní by měly být ploché a jednoduché, bez dalších efektů. Návrháři také často používají jednoduché geometrické tvary – obdélníky, kruhy a čtverce, což umožňuje, aby každý tvar byl samostatným objektem.

3. Zaměřme se na typografii

Vzhledem k tomu, že podle předchozího principu je grafika v plochém designu jednoduchá, je mimořádně důležitým prvkem typografie - design nápisů. V flat designu se spolu s tlačítky dostává do popředí typografie.

Písma by měla být čitelná a samozřejmě v souladu s designem, protože u jednoduchého designu budou extrémně zdobená písma vypadat nepatřičně. Neměli byste však používat běžná písma, je lepší experimentovat a vybrat si to, které přitáhne pozornost uživatele.

Můžete zvážit kombinaci jednoduchého bezpatkového písma s nějakým novým písmem, které bude vnímáno jako umělecký prvek. Písma by měla pomoci k jednoduššímu a přehlednějšímu designu, zatímco tlačítka a další prvky by měly sloužit pouze ke zvýšení interaktivity.

4. Upoutejme pozornost barvou

Barva hraje v flat designu téměř hlavní roli. Pokud pečlivě prostudujete stránky vytvořené na základě tohoto konceptu, první věc, která vás upoutá, je jasná barevná paleta. Obvykle se skládá z několika kontrastních čistých (bez odstínů) barev, dvou nebo tří, i když tento počet může dosáhnout až osmi. Kromě toho se všechny tyto barvy obvykle používají stejně.

Nejoblíbenější barvy jsou primární a sekundární barvy. Tedy primární barvy (azurová, purpurová, žlutá, černá) a ty získané na základě jejich smíchání. Velmi často se také retro barvy používají v barevném schématu při vytváření plochého designu, jako je lososová, fialová atd.

5. Minimalismus

Plochý design je ve své podstatě jednoduchý a dobře se hodí k minimalistickému přístupu.

V celkovém designu stránek se musíte vyhnout přílišnému množství zvonků a píšťalek. Jednoduché barvy a text samozřejmě nemusí stačit. Proto, pokud chcete přidat vizuální efekty, musíte zvolit jednoduché fotografie. Některé maloobchodní produktové stránky používají plochý design k umístění svých produktů na jednoduché, nerušivé pozadí.

Je třeba poznamenat, že některé fotografie mají přirozenou hloubku, ale obecně zapadá do celkové roviny designu

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 získal srdce webových designérů a dodnes 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 divoké 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 vynikajících příkladů plochého designu webových stránek, které vás jistě inspirují k velkým věcem. 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é. To je spíše zjednodušení než antagonismus.

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

Pseudokonvexní ikony brzy přestaly přitahovat většinu uživatelů a webových vývojářů, což znamenalo začátek éry plochého designu webových stránek. Svět dospěl k závěru, že je třeba odstranit všechny dekorativní prvky a zůstat by mělo jen to, co je pro koncového uživatele vhodné pro interakci.

„Nejlepší design je co nejmenší design“

Jak se do vody podíval Dieter Rams – slavný 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 plochého stylu webdesignu. Letadlo však okamžitě „neporazilo“ realismus a objem.

Uživatelé dlouho nemohli zapomenout na kouzlo Steva Jobse a ikon, „které chcete lízat“. Mnozí se dokonce rozloučili s „ubohou Sedmou“ a přešli na „zářivý Android“. Olej do ohně přilévalo velké množství chyb přítomných v iOS 7 a bělavý, průsvitný design s paralaxou a animací „snot“ při otevírání aplikací.

Ti, kteří rezignovali na nevyhnutelnou realitu a zůstali u operačního systému Apple, si nakonec uvědomili, že plochý 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ří:

přehlednost kompozice a stručnost vizuálních pomůcek. Responzivní rozhraní ve stylu „nic nadbytečného“, díky kterému si uživatelé rychle uvědomí, co jim chtěli sdělit;

důraz 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 rychlejší výkon webu díky minimálnímu počtu vizuálních efektů. To je užitečné zejména při vytváření adaptivní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é své nevýhody:

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

nedostatek trojrozměrnosti a stínů někdy ztěžuje pochopení, zda lze na prvek kliknout nebo ne;

nedostatek konkrétních pevných pravidel.

Pokud jste se rozhodli tento styl na svém webu použít, gratulujeme – ukazuje to, že vám záleží na uživatelském dojmu a držíte krok s dobou. Pokud s webovým designérem teprve začínáte a nevíte, jak správně používat plochý design, aby váš web vypadal relevantně, aniž byste byli zjednodušující, vyzkoušejte tyto tipy:

Zapomeňte na „cihlové zdi“ a světlé pozadí. Plochý web design má tendenci používat na pozadí jednoduché, hladké a měkké obrázky.

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

Žádné přechody, 3D ikony, animované přechody nebo jiné speciální efekty. To vše ztíží váš web a přidá rozruch – potřebujete to?

Použijte ploché ikony s jasnými obrysy pro zvýšení pohodlí a funkčnosti.

Použijte jasnou a bohatou 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. V plochém designu jsou preferovány jasné, originální nápisy, které vytvářejí výzvu k akci a umožňují snadnou navigaci po webu. I zde je důležité to nepřehánět. Zapomeňte na „ručně psané“ a další ozdobná písma. Pro zvýraznění nadpisů lze použít velká písmena.

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

Co nejvíce zjednodušte navigační nabídku a další prvky webu. Pro tlačítka použijte běžné obdélníky bez stínů nebo zvýraznění.

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 webových stránek – jsou ploché až do základu.

Na závěr uvedu slíbené příklady zdařilého flat designu, které vám mohou posloužit jako inspirace k vytvoření vlastních mistrovských děl.

1. Webové 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á nerozptyluje 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. Možná si vzpomínáte na přehrávač Zune, konkurenta iPodu, který Microsoft vydal v polovině 2000? Design tohoto produktu se tedy výrazně lišil od většiny aplikací té doby, a to 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 (OS Windows 8), rozhraní Xbox 360 a další softwarové produkty společnosti Mircosoft.

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 a sdílejte naše články s přáteli na 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