Plochý štýl čo. Čo je plochý dizajn a jeho základné princípy. Kompatibilita s responzívnym dizajnom

Plochý dizajn je kľúčovým trendom v dizajne na najbližšie roky, poďme sa teda naň pozrieť bližšie a dozvedieť sa o 5 základných princípoch, ktoré tvorili jeho základ.

Úvod do plochého dizajnu

V ruštine sa plochý dizajn prekladá ako „plochý dizajn“ a potom sa stal absolútne obľúbeným Prezentácie Apple iOS OS. Do centra pozornosti sa dostal minimalistický prístup k dizajnu pre použiteľnosť. Dôraz je kladený na užívateľský komfort. Ide o vyslovený protest proti „squeeformizmu“ (vizualizácii objektov, ako v skutočnosti). Voľba padla na zjednodušenejšie a zároveň esteticky jednoduché riešenia. Používatelia, ktorí sú unavení z realistických vizualizácií, tento smer nadšene vítali a čoraz viac webových projektov prechádza na tento formát.

Chcel by som poznamenať, že „plochý“ neznamená „nudný“. Ploché dizajnové riešenia môžu byť krásne, sú rafinovanejšie, čistejšie, bez nadbytočnosti čohokoľvek, menia sa na „ostrov pokoja“. Konečne robia obsah zrozumiteľným. Zostáva naučiť sa základné princípy, aby sme ich mohli uviesť do praxe.

„Plochý“ dizajn sa nesnaží sprostredkovať objemy, preto je základom dvojrozmerná vizualizácia. To znamená, že s textúrami neuvidíte žiadne tiene, odlesky ani zvýraznenia (výnimkou sú dlhé tiene). Iba prenos obrysov a nič viac.

V dizajne sa odporúča používať jednoslabičné figúry, ako aj sledovať jasnosť obrysov, ktorá je navrhnutá tak, aby zdôrazňovala ľahkosť a beztiažnosť. Okrem toho takéto stručné prvky dobre napodobňujú snímač a vytvárajú túžbu interagovať s objektom (výzva na stlačenie, dotyk). Jednoduchosť prvkov sa však nerovná jednoduchosti dizajnu ako celku – to platí len pre obrysy. Výsledkom je, že všetko, čo používateľ vidí, je mu jasné a môže to ľahko používať.

Plochý dizajn si vyžaduje mimoriadne starostlivú prácu s písmami. To znamená, že ich charakter musí dopĺňať schému dizajnu bez toho, aby jej odporoval. Navyše v plochom dizajne je písmo tiež kľúčovým navigačným prvkom.

Nielen typ, ale aj farba je nevyhnutnou súčasťou flat dizajnu. Prevažná väčšina paletiek je založená na 2-3 farbách, aj keď, samozrejme, existujú aj výnimky. Zvyčajne sa vyberajú šťavnaté a jasné, ale čisté farby. Ako bolo uvedené, neexistujú žiadne prechody ani zbytočné prechody.

Plochý dizajn je ukážkovým príkladom takého celosvetového trendu, akým je minimalizmus. Dizajnéri upúšťajú od zbytočných „zvončekov a píšťaliek“, odkláňajú sa od zložitých a implicitných prístupov k vizualizácii, čo prináša ovocie v podobe aktivity používateľov.

Plochý alebo takmer plochý? Hľadáte kompromis!

Na záver by som rád poznamenal, že dnes existuje synergia medzi plochým a neplochým dizajnom. Hovoríme o „takmer plochom“ prevedení. Toto je najbežnejšia aplikácia opísaného konceptu, keď spolu s jednoduchými a stručnými prvkami a dvojrozmerným priestorom používajú dizajnéri 1-2 triky na hĺbku a perspektívu.

Taktiež trendom roku 2017 bol Semi Flat Design – poloplochý dizajn. Vplyvom Material dizajnu sa stal o niečo priestornejším. Existujú svetlé tiene, ktoré robia dizajn poloplochým. Plochý dizajn je dnes stále aktuálny, kvôli tieňom sa stal hlbším a zložitejším, ale hlavný koncept nie je porušený.

V tomto článku vám poviem o plochom dizajne. O tom ste už určite niečo počuli, keďže byt sa za posledných pár rokov stal jedným z popredných trendov na webe.

Dnes pochopíme, čo je plochý dizajn, ako vzniká a čo potrebujete na vytvorenie čistého, svetlého a citlivého dizajnu.

môžeš nájsť dobré príklady plochý dizajn na http://market.envato.com/. Existuje množstvo rozložení, ikon a šablón, ktoré vám poskytnú jasnú predstavu o tom, ako vyzerá moderný dizajn. .

1. Čo je plochý dizajn?

Plochý dizajn - moderný štýl užívateľské rozhranie, ako aj grafický dizajn, vyznačujúci sa minimalizmom. Plochý dizajn sa vyznačuje použitím minima prvkov a absenciou rôznych efektov textúry, tieňa a svetla, napríklad: zmiešané farby, prechody, zvýraznenia a pod.

Ploché verzus skeuomorfizmus( Skeuomorfizmus je princíp dizajnu, keď jeden výrobok dostane vzhľad iného, ​​t.j. pri kopírovaní rôznych prvkov rozhrania zo skutočných objektov - približne preklad.) , ako aj bohatý dizajn.Je však potrebné povedať, že plochý dizajn nie je vôbec taký jednoduchý, ako sa na prvý pohľad zdá. Zahŕňa niektoré črty skeuomorfizmu, ale o tom si povieme trochu neskôr.

Ploché vo všeobecnosti pomáhajú udržať používateľa zameraného na obsah bez toho, aby ho rozptyľovali vizuálne prvky. Plochý dizajn zdôrazňuje jednoduchosť prvkov a zároveň robí rozhranie citlivejším, príjemnejším a ľahko použiteľným.

2. Trochu histórie

Plochý dizajn, ako viete, existoval dávno pred momentom, keď sa stal globálnym trendom na webe. Plochý dizajn bol v 80. rokoch pomerne populárny, pretože technika v tom čase ešte nebola dostatočne vyvinutá, aby podporovala komplexné efekty, textúry a tiene. Avšak aj vtedy sa dizajn snažil o skefomorfizmus a snažil sa urobiť prvky rozhrania čo najrealistickejšie.

Flat-design v podobe, v akej ho vidíme teraz, začal získavať na popularite po tom, čo Microsoft začal vyrábať produkty v takzvanom štýle metra. Metro je dizajn používateľského rozhrania od spoločnosti Microsoft, ktorý zaujme svojim štýlom a jednoduchosťou.

V roku 2010 Microsoft vydal Windows telefón 7, ktorý používal plochý dizajn s ostrými hranami a jednoduchou grafikou zdedenou od jedného z raných produktov Microsoft (Zune). Neskôr, inšpirovaný úspechom, Microsoft vydal operačný systém Windows 8 založený na rovnakom štýle Metro.

Koniec koncov, plochý dizajn dosiahol svoj vrchol v roku 2013, keď spoločnosť Apple vydala iOS 7 demonštruje zásadne nový dizajn s úplne prepracovanými prvkami používateľského rozhrania vrátane ikon a fontov. Apple vytvoril vizuálne princípy UI a dizajnu ikon .

Krátko nato spoločnosť Google začala používať plochý štýl vo svojich aplikáciách a webových stránkach a nazývala ho materiálové prevedenie. Google má dokonca celú časť venovanú tomuto štýlu, vrátane popisu cieľov webdizajnu, jeho princípov a návodov na vytváranie rôznych dizajnových objektov: ikon, rozložení atď.

Od tej doby sa flat stal kľúčovým trendom vo webdizajne, vďaka čomu sú webové stránky, aplikácie a prvky rozhrania elegantné, čisté a štýlové.

Existujú teda tri globálne príklady plochého dizajnu od firiem, bez ktorých je ťažké si ich predstaviť modernom svete technológie:

Dizajn Metro od spoločnosti Microsoft

Dizajn Apple iOS 7

Material Design spoločnosti Google

3. Pamätajte na čistotu

Plochý dizajn sa zrejme nazýva „plochý“ kvôli nedostatku 3D prvkov a realistických efektov, ako sú prechody, textúry, zvýraznenia, stredné tóny, tiene. Pamätajte, že plochý štýl je dvojrozmerný (plochý) spôsob zobrazenia predmetov.

Navyše v plochom dizajne sú predmety zobrazené veľmi zjednodušene a štylizovane.

A niekedy sa používa dokonca len silueta alebo kontúry objektu, t.j. len toľko, aby bol objekt rozpoznateľný, ale aby nebol preťažený drobnými detailmi.

Minimalizmus sa stal v súčasnosti globálnym trendom: jednoduchosť tvarov a použitie ostrých hrán vytvárajú čistý a príjemný dizajn. Jednoduché formuláre sú zrozumiteľnejšie a ľahšie pochopiteľné. To udržuje dizajn minimalistický, čistý a zabraňuje tomu, aby získal zaneprázdnený a chaotický vzhľad.

4. Perfektné

Vedzte, že pokiaľ ide o vytváranie plochých ikon a prvkov používateľského rozhrania, musíte ich vytvoriť ostré, elegantné a dokonalé v pixeloch, t.j. koľko to len pôjde. Navyše to platí pre rastrovú aj vektorovú grafiku.

S programom Adobe Photoshop tu je všetko jasné: pracuje s rastrovou grafikou, ktorá je založená na pixeloch.

Čo sa týka programu Adobe Illustrator, potom používa vektorovú grafiku, pozostávajúcu z kriviek a čiar, nazývaných vektory, ktoré sú dané matematickými vzorcami.

Kedysi nebol Adobe Illustrator nič moc pohodlný program vytvárať pixelovo dokonalú grafiku. Dobrá správa je, že najnovšie verzie Illustrator sa stal skvelým nástrojom na vytváranie dobrej grafiky.

To treba povedať Vektorová grafika väčšinou zahŕňa prácu s jednoduchými, plochými tvarmi, plnými farbami a mriežkami. Adobe Illustrator je veľmi flexibilný a umožňuje vám prispôsobiť mriežku vašim potrebám, zarovnať objekty a použiť odlišné typy praskanie. To uľahčuje vytvorenie dokonalého dizajnu, ktorý vyzerá čisto a štýlovo na akomkoľvek displeji. Ak sa chcete naučiť vytvárať dokonalú grafiku, mali by ste si prečítať článok: Ako vytvoriť pixel dokonalé umelecké dielo pomocou Adobe Illustrator .

5. Farba

Jednou zo špecifických vlastností plochého dizajnu, okrem tieňov, je použitie farieb. Väčšina farieb, ktoré flat dizajn používa vo svojich prvkoch, pozostáva len z niekoľkých základných farieb.

Farba v plochom prevedení sa vyznačuje jasom, sýtosťou, šťavnatosťou.Plochá farebná schéma sa neobmedzuje len na niekoľko špeciálnych farieb, obsahujú veľa odtieňov a ich výber závisí len od toho, čo zobrazujete, či ide o ikony sladkostí alebo predmety v retro štýle v sofistikovanej retro palete.

Povedzme, že ste dizajnér používateľského rozhrania a viete dobre s farebnými paletami a experimentujete s farebným pruhom vo Photoshope a Illustratore a miešate farby, ako sa vám páči. Tento proces je však dosť komplikovaný a vyžaduje si dobrú intuíciu, skúsenosti a zručnosti. Tu nájdete niekoľko nástrojov, ktoré vám pomôžu vytvoriť si vlastnú paletu farieb.

Niektoré z nich sú vhodné pre všetky druhy vzorov a ilustrácií, nielen pre ploché vzory. Napríklad Adobe Color CC, známejší ako Cooler. Dnes je k nemu prístup, a to ako cez webovú stránku, tak aj priamo cez produkty Adobe. Chladič je veľmi flexibilný nástroj, ktorý vám umožňuje vytvoriť si vlastnú farebnú paletu alebo si vybrať z vlastných paliet z knižnice.

Ďalším jednoduchým a praktickým generátorom farebnej palety je Coolors. Stačí stlačiť medzerník a program vygeneruje farebnú paletu, farby si môžete upraviť, nechýba ani exportná funkcia.

Existuje niekoľko ďalších podobných služieb s vlastnými paletami, ktoré môžu byť užitočné. Existuje však jeden nástroj vytvorený špeciálne pre plochý dizajn: FlatUIColors.com od Designmodo je služba so sadou „plochých“ farieb, s ktorou sa veľmi pohodlne pracuje. Táto stránka sa stala veľmi populárnou medzi dizajnérmi, ktorí hľadajú dobrý výber farieb pre dokonalé návrhy. Skús to!

A môžete nájsť viac rôznych farieb a paliet Sprievodca materiálovým dizajnom Google.

6. Dlhé tiene

Ako už bolo spomenuté vyššie, plochý dizajn sa vyznačuje jednoduchosťou, množstvom voľného priestoru - to je dôvod, prečo byt odmieta použitie akýchkoľvek efektov. Existuje však jeden efekt, ktorý je špecifický pre plochý dizajn. Tento efekt sa stal trendom a charakteristickým znakom bytu.

Teraz hovoríme o dlhých tieňoch. Majú niektoré typické vlastnosti, vďaka ktorým je tento efekt rozpoznateľný, a to: 45-stupňový sklon a veľká veľkosť(tieň môže byť niekoľkonásobne dlhší ako samotný objekt. Výsledkom je, že dlhé tiene dodávajú bytu určitý hĺbkový efekt.

Tento efekt robí objekt trojrozmernejším, no zároveň ho ponecháva v kontexte plochého dizajnu.

7. Práca s písmom

Typografia hrá veľkú úlohu v flat dizajne. Text sa často stáva hlavným prvkom kompozície.

Flat zvyčajne používa jednoduché štýly písma, vďaka ktorým je celý dizajn čistý a čitateľný. Ak používate produkty Adobe, v aplikácii Adobe Typekit nájdete veľa bezplatných písiem. Na Font Squirrel tiež nájdete veľa dobrých bezplatných písiem. Nezabudnite si však prečítať licenciu, ak budete font používať na komerčné účely.

Najčastejšie v plochom prevedení je zvykom používať veľké písmená a kontrastné farby, vďaka tomu je text čitateľnejší.

Písma používajte opatrne, pamätajte na to, že by mali zdôrazňovať a ladiť s dizajnom a nemali by vyzerať ako samostatný prvok. To neznamená, že nemôžete používať pätkové fonty alebo kurzívne zložité fonty. Len nezabudnite byť minimalistický a udržať všetko v rovnováhe. Ploché však stále častejšie používajú bezpätkové písma, pretože vyzerajú prísnejšie a úhľadnejšie.

8. Výhody a nevýhody plochého dizajnu

Aj keď sa plochý dizajn stal tak populárnym kvôli jeho mnohým výhodám, stále existujú určité nevýhody, s ktorými sa dizajnéri stretávajú pri používaní tohto štýlu. Pozrime sa na výhody a nevýhody.

klady

Popularita

Plochý dizajn sa stal trendom, ktorý si získava čoraz viac pozitívnych ohlasov od dizajnérov a webdizajnérov a vôbec sa nezdá, že by strácal pôdu pod nohami. Naopak, čoraz viac sa rozširuje, získava nové formy a črty, stáva sa čoraz kreatívnejším.

Jednoduchosť

Plochý dizajn je jednoduchý, minimalistický a čistý. Flat on the web pomáha používateľom sústrediť sa skôr na obsah, než aby ich rozptyľovali vizuálne prvky. Funguje to aj pre rozhrania mobilných aplikácií: využíva sa čistý dizajn s veľkými tlačidlami mobilné zariadenia perfektné.

Jas

Farba je ďalším skvelým plusom plochého dizajnu. Svetlé a nasýtené farby vyzerajú atraktívne a čisté a nedostatok prechodov robí dizajn štýlovým. Navyše, takéto čisté farby ho robia pozitívnejším, prezentovateľnejším, plochý dizajn vytvára správnu náladu.

Nedostatky

Byt má oveľa viac výhod, ale žiadny dizajn nie je dokonalý a nemôžeme si ho idealizovať. Tu je niekoľko nevýhod plochého dizajnu, ktoré musíme spomenúť:

Nereagovanie

Nedostatok dôležitých detailov alebo vizuálnych efektov niekedy sťažuje proces vytvárania užívateľsky prívetivého rozhrania, čo vo všeobecnosti spôsobuje, že celý dizajn nereaguje. Nie všetci používatelia sa cítia dobre s flat, pretože môže byť ťažké nájsť prvky na webovej stránke, na ktoré musíte kliknúť alebo klepnúť na obrazovku mobilný telefón pretože nie sú interaktívne.

Problémy s typografiou

Ako už bolo spomenuté, nie každé písmo môže vyhovovať plochému dizajnu. Niekedy takéto bohaté písmo s ostrými hranami pôsobí naozaj vyvážene a štýlovo. V prípade nesprávneho výberu písma to však môže zničiť celý dizajn. Musíte mať naozaj dobrý cit pre to, ktoré fonty sú vhodné na ploché a ktoré nie. Nedostatok skúseností sťažuje výber fontu.

Slabý vizuál

Kvôli obmedzeniam v používaní efektov, farieb a písma môže byt vyzerať príliš jednoducho a chladne. Jeho hlavnou nevýhodou môže byť aj minimalizmus – ostatné ploché dizajny nakoniec vyzerajú presne ako tie vaše. Je teda veľmi ťažké, aby vaše ikony alebo webové stránky vyzerali inak ako dizajn niekoho iného, ​​pretože používate rovnaké zjednodušené tvary, obmedzené farebné palety a podobné fonty. V dôsledku toho môže byť plochý dizajn časom nudný.

9. Budúce trendy plochého dizajnu

Nedá sa povedať, že by flat dizajn bol plne formovaný a zastavený svojím vlastným spôsobom, možno práve pre vyššie uvedené nedostatky má flat tendenciu sa vyvíjať a meniť, získavať nové črty a zvyšovať vizuálnu expresivitu.

Ak sa pozriete pozorne na posledný príklad plochého dizajnu, môžete vidieť, že je to naozaj takpostupne zo svojich prísnych nástrojov a začne pridávať jemné efekty, ako sú prechody, tiene, osvetlenie a iné vizuálne efekty.

Tieto drobné úpravy dodávajú plochým dizajnom určitú hĺbku bez toho, aby boli príliš podrobné, ako to robia skeuomorfné dizajny.Tieto drobné vylepšenia robia byt citlivejším a pohodlnejším, ako aj svieži vzhľad, vďaka čomu je plochý flexibilnejší a všestrannejší.

Byt tak nestráca svoje vlastnosti, ale stáva sa zaujímavejším, flexibilnejším- Naozaj sa zlepšuje.

závery

Rozoberali sme teda niektoré fakty z histórie flat dizajnu a hovorili o farbách, tvaroch a typografii. Pozreli sme sa na rôzne uhly pohľadu, zaoberali sme sa výhodami a nevýhodami bytu a naučili sme sa niektoré z hlavných princípov vytvárania dobrého dizajnu.

Dúfam, že ste sa nazbierali sami nové informácie z tohto článku, alebo ho aspoň zaujal. Mali by ste vyskúšať plochý dizajn, ak ste to ešte neurobili.

Veď čo ešte treba spomenúť na flat dizajn?

Ak máte naozaj radi ploché s jeho ostrými hranami, šťavnatými farbami a ostrým písmom, jeho čistotu a minimalizmus, potom smelo do toho!

Je to v trende, ale ako pri každom inom grafickom štýle, neobmedzujte sa len na jednu techniku. Ak je byt v trende, neznamená to, že vo svojom projekte nemôžete použiť iné štýly. Môže sa stať aj skeuomorfizmus s jeho drobnými detailmi a textúrami dobré rozhodnutie. A čo je najdôležitejšie, nezabudnite, že dizajn je pre každý projekt iný, musí vyjadrovať jeho ducha, účel, podstatu, pričom musí zostať pohodlný a funkčný. Vpred!

Plochý dizajn- relatívne nový trend, o ktorom neprestáva hovoriť celá dizajnérska komunita.

Niekto to má rád, niekto si na to absolútne nevie zvyknúť a dokonca to nenávidí.

Dobrý dizajn by mal v prvom rade vyriešiť podnikateľský problém klienta, akým spôsobom sa to dosiahne, je sekundárna otázka. Ak si dizajnér vybral ako štýl alebo nástroj - "plochý dizajn" - tak to bude! Ale nezabudnite, že tento štýl nie je vhodný pre všetky projekty.

Poďme si teda rozobrať, čo si musíte zapamätať, ak sa rozhodnete podľahnúť módnemu trendu a pracovať v štýle „flat design“.

Hlavné princípy plochého dizajnu sú:

1. Žiadne účinky

2. jednoduché prvky

3. Dôraz na typografiu

4. Dôraz na farbu

5. Minimalistický prístup

6. "Takmer" plochý dizajn

Teraz sa pozrime na každý z princípov plochého dizajnu podrobnejšie:

Žiadne účinky

V plochom dizajne sa najčastejšie nepoužívajú efekty ako tiene, skosenie, reliéf, prechody alebo iné techniky, ktoré pridávajú hĺbku a rozmer. Žiadne 3D efekty a prenos materiality, na rozdiel od štylistického odporcu „Skemorphism“. Každý prvok by mal zostať čitateľný, či už je to ikona, navigačná lišta alebo rámček, gombík a pod.

Plochý štýl má výrazný vzhľad bez pridané vlastnosti a prvky. Spolieha sa na silný zmysel pre kompozičnú hierarchiu a umiestnenie prvkov. Táto štruktúra uľahčuje vnímanie dizajnu a je intuitívna pre každého používateľa.

Jednoduché prvky

Plochý dizajn často využíva jednoduché prvky používateľského rozhrania, ako sú tlačidlá a ikony atď. Dizajnéri sa pri vytváraní týchto prvkov rozhrania držia jednoduchých tvarov (obdĺžnik, kruh, štvorec atď.) – to umožňuje, aby každý tvar stál samostatne.

Nezamieňajte si však jednoduché prvky s jednoduchým dizajnom, koncept plochého dizajnu môže byť rovnako zložitý ako akýkoľvek štýlovo odlišný druh konceptu dizajnu.

Dôraz na typografiu

Keďže plochý dizajn je založený na jednoduchých tvarových prvkoch bez objemu, typografia je mimoriadne dôležitým prvkom v plochej kompozícii.

Charakter písma sa musí zhodovať všeobecná schéma a kompozície - príliš zložité písmo môže na príliš zjednodušenom dizajne modelu vyzerať zvláštne a domýšľavo. Je vhodnejšie použiť jednoduché bezpätkové, tučné alebo polotučné písmo. Text by mal byť v súlade s jednoduchými formami.

Písmo by malo byť pomocným nástrojom, ktorý používateľom pomôže pri interakcii s naším rozhraním. Štítky na tlačidlách a iných prvkoch by nemali byť zložité.

Dôraz na farbu

Farba je dôležitou súčasťou dizajnu. Paleta plochého dizajnu je často oveľa jasnejšia a farebnejšia ako pri iných štýloch dizajnu. V porovnaní s konvenčným dizajnom, ktorý sa zameriava na 2-3 farby, plochý dizajn môže obsahovať 6 alebo dokonca 8 farebných odtieňov.

V tomto článku vám poviem o plochom dizajne. O tom ste už určite niečo počuli, keďže byt sa za posledných pár rokov stal jedným z popredných trendov na webe.

Dnes pochopíme, čo je plochý dizajn, ako vzniká a čo potrebujete na vytvorenie čistého, svetlého a citlivého dizajnu.

Dobré príklady plochého dizajnu nájdete na http://market.envato.com/. Existuje množstvo rozložení, ikon a šablón, ktoré vám poskytnú jasnú predstavu o tom, ako vyzerá moderný dizajn. .

1. Čo je plochý dizajn?

Plochý dizajn je moderný štýl používateľského rozhrania, ako aj grafického dizajnu, ktorý sa vyznačuje minimalizmom. Plochý dizajn sa vyznačuje použitím minima prvkov a absenciou rôznych efektov textúry, tieňa a svetla, napríklad: zmiešané farby, prechody, zvýraznenia a pod.

Ploché verzus skeuomorfizmus( Skeuomorfizmus je princíp dizajnu, keď jeden výrobok dostane vzhľad iného, ​​t.j. pri kopírovaní rôznych prvkov rozhrania zo skutočných objektov - približne preklad.) , ako aj bohatý dizajn.Je však potrebné povedať, že plochý dizajn nie je vôbec taký jednoduchý, ako sa na prvý pohľad zdá. Zahŕňa niektoré črty skeuomorfizmu, ale o tom si povieme trochu neskôr.

Ploché vo všeobecnosti pomáhajú udržať používateľa zameraného na obsah bez toho, aby ho rozptyľovali vizuálne prvky. Plochý dizajn zdôrazňuje jednoduchosť prvkov a zároveň robí rozhranie citlivejším, príjemnejším a ľahko použiteľným.

2. Trochu histórie

Plochý dizajn, ako viete, existoval dávno pred momentom, keď sa stal globálnym trendom na webe. Plochý dizajn bol v 80. rokoch pomerne populárny, pretože technika v tom čase ešte nebola dostatočne vyvinutá, aby podporovala komplexné efekty, textúry a tiene. Avšak aj vtedy sa dizajn snažil o skefomorfizmus a snažil sa urobiť prvky rozhrania čo najrealistickejšie.

Flat-design v podobe, v akej ho vidíme teraz, začal získavať na popularite po tom, čo Microsoft začal vyrábať produkty v takzvanom štýle metra. Metro je dizajn používateľského rozhrania od spoločnosti Microsoft, ktorý zaujme svojim štýlom a jednoduchosťou.

V roku 2010 Microsoft vydal Windows Phone 7, ktorý používal plochý dizajn s ostrými hranami a jednoduchou grafikou zdedenou z jedného z jeho skorých produktov. Microsoft (Zune). Neskôr, inšpirovaný úspechom, Microsoft vydal operačný systém systém Windows 8, založený na rovnakom štýle Metro flat.

Koniec koncov, plochý dizajn dosiahol svoj vrchol v roku 2013, keď spoločnosť Apple vydala iOS 7, ktorý ukazuje úplne nový dizajn s úplne prepracovanými prvkami používateľského rozhrania vrátane ikon a fontov. Apple vytvoril vizuálne princípy UI a dizajnu ikon .

Krátko nato spoločnosť Google začala používať plochý štýl vo svojich aplikáciách a webových stránkach a nazývala ho materiálové prevedenie. Google má dokonca celú časť venovanú tomuto štýlu, vrátane popisu cieľov webdizajnu, jeho princípov a návodov na vytváranie rôznych dizajnových objektov: ikon, rozložení atď.

Od tej doby sa flat stal kľúčovým trendom vo webdizajne, vďaka čomu sú webové stránky, aplikácie a prvky rozhrania elegantné, čisté a štýlové.

Existujú teda tri globálne príklady plochého dizajnu od firiem, bez ktorých je ťažké si predstaviť moderný svet technológií:

Dizajn Metro od spoločnosti Microsoft

Dizajn Apple iOS 7

Material Design spoločnosti Google

3. Pamätajte na čistotu

Plochý dizajn sa zrejme nazýva „plochý“ kvôli nedostatku 3D prvkov a realistických efektov, ako sú prechody, textúry, zvýraznenia, stredné tóny, tiene. Pamätajte, že plochý štýl je dvojrozmerný (plochý) spôsob zobrazenia predmetov.

Navyše v plochom dizajne sú predmety zobrazené veľmi zjednodušene a štylizovane.

A niekedy sa používa dokonca len silueta alebo kontúry objektu, t.j. len toľko, aby bol objekt rozpoznateľný, ale aby nebol preťažený drobnými detailmi.

Minimalizmus sa stal v súčasnosti globálnym trendom: jednoduchosť tvarov a použitie ostrých hrán vytvárajú čistý a príjemný dizajn. Jednoduché formuláre sú zrozumiteľnejšie a ľahšie pochopiteľné. To udržuje dizajn minimalistický, čistý a zabraňuje tomu, aby získal zaneprázdnený a chaotický vzhľad.

4. Perfektné

Vedzte, že pokiaľ ide o vytváranie plochých ikon a prvkov používateľského rozhrania, musíte ich vytvoriť ostré, elegantné a dokonalé v pixeloch, t.j. koľko to len pôjde. Navyše to platí pre rastrovú aj vektorovú grafiku.

S Adobe Photoshop je tu všetko jasné: pracuje s rastrovou grafikou, ktorá je založená na pixeloch.

Čo sa týka programu Adobe Illustrator, používa vektorovú grafiku pozostávajúcu z kriviek a čiar, nazývaných vektory, ktoré sú dané matematickými vzorcami.

Kedysi nebol Adobe Illustrator obzvlášť pohodlným programom na vytváranie pixelovo dokonalej grafiky. Dobrou správou je, že najnovšie verzie aplikácie Illustrator sa stali skvelým nástrojom na vytváranie dobrej grafiky.

Musím povedať, že vektorová grafika väčšinou zahŕňa prácu s jednoduchými, plochými tvarmi, plnými farbami a mriežkami.Adobe Illustrator je veľmi flexibilný a umožňuje prispôsobiť mriežku vašim potrebám, zarovnávať objekty a používať rôzne typy prichytávania. To uľahčuje vytvorenie dokonalého dizajnu, ktorý vyzerá čisto a štýlovo na akomkoľvek displeji. Ak sa chcete naučiť vytvárať dokonalú grafiku, mali by ste si prečítať článok: Ako vytvoriť pixel dokonalé umelecké dielo pomocou Adobe Illustrator .

5. Farba

Jednou zo špecifických vlastností plochého dizajnu, okrem tieňov, je použitie farieb. Väčšina farieb, ktoré flat dizajn používa vo svojich prvkoch, pozostáva len z niekoľkých základných farieb.

Farba v plochom prevedení sa vyznačuje jasom, sýtosťou, šťavnatosťou.Plochá farebná schéma sa neobmedzuje len na niekoľko špeciálnych farieb, obsahujú veľa odtieňov a ich výber závisí len od toho, čo zobrazujete, či ide o ikony sladkostí alebo predmety v retro štýle v sofistikovanej retro palete.

Povedzme, že ste dizajnér používateľského rozhrania a viete dobre s farebnými paletami a experimentujete s farebným pruhom vo Photoshope a Illustratore a miešate farby, ako sa vám páči. Tento proces je však dosť komplikovaný a vyžaduje si dobrú intuíciu, skúsenosti a zručnosti. Tu nájdete niekoľko nástrojov, ktoré vám pomôžu vytvoriť si vlastnú paletu farieb.

Niektoré z nich sú vhodné pre všetky druhy vzorov a ilustrácií, nielen pre ploché vzory. Napríklad Adobe Color CC, známejší ako Cooler. Dnes je k nemu prístup, a to ako cez webovú stránku, tak aj priamo cez produkty Adobe. Chladič je veľmi flexibilný nástroj, ktorý vám umožňuje vytvoriť si vlastnú farebnú paletu alebo si vybrať z vlastných paliet z knižnice.

Ďalším jednoduchým a praktickým generátorom farebnej palety je Coolors. Stačí stlačiť medzerník a program vygeneruje farebnú paletu, farby si môžete upraviť, nechýba ani exportná funkcia.

Existuje niekoľko ďalších podobných služieb s vlastnými paletami, ktoré môžu byť užitočné. Existuje však jeden nástroj vytvorený špeciálne pre plochý dizajn: FlatUIColors.com od Designmodo je služba so sadou „plochých“ farieb, s ktorou sa veľmi pohodlne pracuje. Táto stránka sa stala veľmi populárnou medzi dizajnérmi, ktorí hľadajú dobrý výber farieb pre dokonalé návrhy. Skús to!

A môžete nájsť viac rôznych farieb a paliet Sprievodca materiálovým dizajnom Google.

6. Dlhé tiene

Ako už bolo spomenuté vyššie, plochý dizajn sa vyznačuje jednoduchosťou, množstvom voľného priestoru - to je dôvod, prečo byt odmieta použitie akýchkoľvek efektov. Existuje však jeden efekt, ktorý je špecifický pre plochý dizajn. Tento efekt sa stal trendom a charakteristickým znakom bytu.

Teraz hovoríme o dlhých tieňoch. Majú niektoré typické vlastnosti, vďaka ktorým je tento efekt rozpoznateľný, a to: 45-stupňový sklon a veľké rozmery (tieň môže byť niekoľkonásobne dlhší ako samotný objekt. Výsledkom je, že dlhé tiene dodávajú bytu určitý hĺbkový efekt.

Tento efekt robí objekt trojrozmernejším, no zároveň ho ponecháva v kontexte plochého dizajnu.

7. Práca s písmom

Typografia hrá veľkú úlohu v flat dizajne. Text sa často stáva hlavným prvkom kompozície.

Flat zvyčajne používa jednoduché štýly písma, vďaka ktorým je celý dizajn čistý a čitateľný. Ak používate produkty Adobe, v aplikácii Adobe Typekit nájdete veľa bezplatných písiem. Na Font Squirrel tiež nájdete veľa dobrých bezplatných písiem. Nezabudnite si však prečítať licenciu, ak budete font používať na komerčné účely.

Najčastejšie v plochom prevedení je zvykom používať veľké písmená a kontrastné farby, vďaka tomu je text čitateľnejší.

Písma používajte opatrne, pamätajte na to, že by mali zdôrazňovať a ladiť s dizajnom a nemali by vyzerať ako samostatný prvok. To neznamená, že nemôžete používať pätkové fonty alebo kurzívne zložité fonty. Len nezabudnite byť minimalistický a udržať všetko v rovnováhe. Ploché však stále častejšie používajú bezpätkové písma, pretože vyzerajú prísnejšie a úhľadnejšie.

8. Výhody a nevýhody plochého dizajnu

Aj keď sa plochý dizajn stal tak populárnym kvôli jeho mnohým výhodám, stále existujú určité nevýhody, s ktorými sa dizajnéri stretávajú pri používaní tohto štýlu. Pozrime sa na výhody a nevýhody.

klady

Popularita

Plochý dizajn sa stal trendom, ktorý si získava čoraz viac pozitívnych ohlasov od dizajnérov a webdizajnérov a vôbec sa nezdá, že by strácal pôdu pod nohami. Naopak, čoraz viac sa rozširuje, získava nové formy a črty, stáva sa čoraz kreatívnejším.

Jednoduchosť

Plochý dizajn je jednoduchý, minimalistický a čistý. Flat on the web pomáha používateľom sústrediť sa skôr na obsah, než aby ich rozptyľovali vizuálne prvky. Funguje to aj pre rozhrania mobilných aplikácií: čistý dizajn s veľkými tlačidlami zaisťuje dokonalý mobilný zážitok.

Jas

Farba je ďalším skvelým plusom plochého dizajnu. Svetlé a nasýtené farby vyzerajú atraktívne a čisté a nedostatok prechodov robí dizajn štýlovým. Navyše, takéto čisté farby ho robia pozitívnejším, prezentovateľnejším, plochý dizajn vytvára správnu náladu.

Nedostatky

Byt má oveľa viac výhod, ale žiadny dizajn nie je dokonalý a nemôžeme si ho idealizovať. Tu je niekoľko nevýhod plochého dizajnu, ktoré musíme spomenúť:

Nereagovanie

Nedostatok dôležitých detailov alebo vizuálnych efektov niekedy sťažuje proces vytvárania užívateľsky prívetivého rozhrania, čo vo všeobecnosti spôsobuje, že celý dizajn nereaguje. Nie všetci používatelia bytov sa cítia pohodlne, pretože môže byť ťažké nájsť prvky na webovej stránke, na ktoré musíte kliknúť alebo klepnúť na obrazovke mobilného telefónu, pretože nie sú interaktívne.

Problémy s typografiou

Ako už bolo spomenuté, nie každé písmo môže vyhovovať plochému dizajnu. Niekedy takéto bohaté písmo s ostrými hranami pôsobí naozaj vyvážene a štýlovo. V prípade nesprávneho výberu písma to však môže zničiť celý dizajn. Musíte mať naozaj dobrý cit pre to, ktoré fonty sú vhodné na ploché a ktoré nie. Nedostatok skúseností sťažuje výber fontu.

Slabý vizuál

Kvôli obmedzeniam v používaní efektov, farieb a písma môže byt vyzerať príliš jednoducho a chladne. Jeho hlavnou nevýhodou môže byť aj minimalizmus – ostatné ploché dizajny nakoniec vyzerajú presne ako tie vaše. Je teda veľmi ťažké, aby vaše ikony alebo webové stránky vyzerali inak ako dizajn niekoho iného, ​​pretože používate rovnaké zjednodušené tvary, obmedzené farebné palety a podobné fonty. V dôsledku toho môže byť plochý dizajn časom nudný.

9. Budúce trendy plochého dizajnu

Nedá sa povedať, že by flat dizajn bol plne formovaný a zastavený svojím vlastným spôsobom, možno práve pre vyššie uvedené nedostatky má flat tendenciu sa vyvíjať a meniť, získavať nové črty a zvyšovať vizuálnu expresivitu.

Ak sa pozriete pozorne na posledný príklad plochého dizajnu, môžete vidieť, že je to naozaj takpostupne zo svojich prísnych nástrojov a začne pridávať jemné efekty, ako sú prechody, tiene, osvetlenie a iné vizuálne efekty.

Tieto drobné úpravy dodávajú plochým dizajnom určitú hĺbku bez toho, aby boli príliš podrobné, ako to robia skeuomorfné dizajny.Tieto drobné vylepšenia robia byt citlivejším a pohodlnejším, ako aj svieži vzhľad, vďaka čomu je plochý flexibilnejší a všestrannejší.

Byt tak nestráca svoje vlastnosti, ale stáva sa zaujímavejším, flexibilnejším- Naozaj sa zlepšuje.

závery

Rozoberali sme teda niektoré fakty z histórie flat dizajnu a hovorili o farbách, tvaroch a typografii. Pozreli sme sa na rôzne uhly pohľadu, zaoberali sme sa výhodami a nevýhodami bytu a naučili sme sa niektoré z hlavných princípov vytvárania dobrého dizajnu.

Dúfam, že ste sa z tohto článku dozvedeli niečo nové, alebo vás aspoň zaujal. Mali by ste vyskúšať plochý dizajn, ak ste to ešte neurobili.

Veď čo ešte treba spomenúť na flat dizajn?

Ak máte naozaj radi ploché s jeho ostrými hranami, šťavnatými farbami a ostrým písmom, jeho čistotu a minimalizmus, potom smelo do toho!

Je to v trende, ale ako pri každom inom grafickom štýle, neobmedzujte sa len na jednu techniku. Ak je byt v trende, neznamená to, že vo svojom projekte nemôžete použiť iné štýly. Skeuomorfizmus so svojimi drobnými detailmi a textúrami môže byť tiež dobrým riešením. A čo je najdôležitejšie, nezabudnite, že dizajn je pre každý projekt iný, musí vyjadrovať jeho ducha, účel, podstatu, pričom musí zostať pohodlný a funkčný. Vpred!

Relatívne nedávno sa stal populárnym taký dizajnový smer ako FLAT - dizajn alebo plochý dizajn.

Používatelia systému Windows 8 a novších už poznajú dizajn FLAT, pretože prvá vec, ktorú uvidia pri spustení systému, je táto obrazovka.

Samotný vznik FLAT dizajnu je spôsobený rozšírením mobilných aplikácií. A myslím si, že je to spôsobené tým, že dizajnové objekty FLAT sa vytvárajú pomocou vektorových objektov, a preto sa ľahšie prispôsobujú rôznym platformám gadgetov.

FLAT - dizajn má nasledujúce vlastnosti:

Úplné alebo čiastočné odmietnutie prechodov, zložitých textúr a tieňov čo ma osobne veľmi teší. K tieňom nemám žiadne výhrady a sám ich rád používam, no nech odídu večné problémy so zobrazením gradientu.

Do popredia sa dostáva typografia, geometria. Najmä pokiaľ ide o webdizajn.

Harmónia a. Dizajn používa obmedzený počet farieb. Tu je príklad obľúbenej dizajnovej palety FLAT.

Použitie kreatívnych informatívnych ikon.

Ako som už povedal, FLAT - dizajn sa stal veľmi populárnym v mobilných aplikácií, keďže jeho hlavnou črtou je jednoduchosť rozloženia a prispôsobivosť. FLAT dizajn má široké uplatnenie aj v infografike, keďže je založený na harmónii vnímania informácií prostredníctvom využitia konštruktívnych techník typografie a kolorovania.

Svojho času bol najpopulárnejším trendom webdizajnu Web 2.0. Teraz zaujal jeho miesto dizajn FLAT. Móda má tendenciu vracať sa k dobre zabudnutému starému, aby z nej vytvorila niečo nové. Ktovie, kedy FLAT vyjde z módy - dizajn, ale zatiaľ si užívajte jednoduchosť, harmóniu a informatívnosť súčasného trendu. Mimochodom, plochý dizajn bol populárny už v 80-tych rokoch, no vtedy to bolo na spadnutie technické vlastnosti, nemožnosť zobraziť tiene a prechody. A teraz väčšina popredných IT spoločností prešla na plochý dizajn.

No aj my sa prispôsobíme meniacemu sa svetu. V ďalšom článku vám ukážem, ako vytvárať ikony v štýle FLAT pomocou jednoduchých tvarov vo Photoshope.

Ak vás moje publikácie zaujímajú, navrhujem, aby ste si ich boli vedomí najnovšie aktualizácie stránky.

(Navštívené 2 635 krát, dnes 1 návštev)