Revolúcia „plochého dizajnu“ od uvedenia na platforme Windows Phone v roku 2010 naďalej naberá na obrátkach. Nie je ťažké pochopiť prečo: rozhranie s týmto dizajnom sa zdá byť intuitívnejšie, je vhodné pre adaptívne prvky, moderné rámce a vyzerá atraktívne, keď je správne vykonané.
Plochý dizajn začal ako protiváha k všadeprítomnému skeuomorfnému štýlu, no odvtedy sa stal oveľa viac než len „možnosťou B“.

Byt bol spočiatku výlučne dvojrozmerný s úplným zameraním na minimalizmus. Modern flat 2.o využíva tiene, prechody a ďalšie prvky, aby vyzeral „takmer plocho“.

5 charakteristických komponentov moderného plochého dizajnu:

1. Dlhé tiene
Dlhé tiene dodávajú obrázkom hĺbku a rozmer bez toho, aby ste museli obetovať minimalistické detaily ikon, vďaka ktorým je rozhranie atraktívne.

2. Dynamické farby
Doplnenie riedkych vizuálov je jednoduché pomocou energických farieb, najmä svetlých odtieňov.
Rôzne farby pozadia v kontraste so základnou farbou prvkov robia stránku s dlaždicovým menu živšou.
Web Flat UI Colors obsahuje najefektívnejšie farebné vzory pre ploché.

3. Jednoduchá typografia
Výber plošného písma je založený na jednom kritériu: čitateľnosť. Typicky sa používajú bezpätkové písma s konštantnou šírkou ťahu.

4. Priehľadné tlačidlo
Jeden z trendových prvkov v modernom webdizajne. Dôvodom je, že nepúta príliš veľa pozornosti, ale je jasne rozpoznateľný ako tlačidlo.

5. Minimalizmus
Plochosť a minimalizmus idú ruka v ruke, využívajúc rovnaké princípy: jednoduchosť a zameranie na obsah.
Môže sa zdať, že použitie plochého dizajnu je univerzálnym riešením, ale minimalizmus je ťažké implementovať: čím menej pracovných prvkov, tým viac pozornosti vyžadujú.

Bez ohľadu na to, aký skvelý plochý dizajn sa môže zdať, neexistuje žiadna záruka, že bude fungovať pre vašu stránku. Pozrite si jeho hlavné výhody a zistite, či sa oplatí plánovať globálny redizajn.

Výhody:
používa sa v responzívnom rozhraní;
zjednodušuje používateľovi navigáciu;
jasná štruktúra a schematický vizuál zdôrazňujú vnútornú logiku stránky;
rýchle načítanie stránok vďaka jednoduchosti grafiky;
Známa typografia zlepšuje čitateľnosť.

Plochý dizajn je o jednoduchosti a minimalizme, čo na druhej strane sťažuje prenos vizuálne zložitých posolstiev. Preto skôr, ako sa bezhlavo vrhnete do zjednodušovania rozhrania, mali by ste dôkladne zvážiť interakciu medzi webom a používateľom.

Na základe knihy trendov webového dizajnu.

Dnes zameriame našu pozornosť na jednu z najobľúbenejších oblastí moderného grafického dizajnu, ktorá sa nazýva flat dizajn.

Slávny umelec Edgar Degas raz povedal: „Umenie nie je to, čo vidíš, ale to, čo dovolíš ostatným vidieť. To platí aj pre grafický dizajn, ktorý možno definovať aj ako umenie, ktoré rieši konkrétny problém. Grafický dizajn má schopnosť meniť náladu a posolstvo prostredníctvom najmenších zmien tvarov a odtieňov, písmen a medzier. Trendy v tejto oblasti, ktoré sa stali neoddeliteľnou súčasťou každodenného života, pretože ovplyvňujú rozhodovací proces a riešia problémy prezentácie moderného produktu a formujú aj vkus používateľov.

Dnes sa pojem „plochý dizajn“ používa v grafike na mnohé účely a úlohy, ktoré majú spoločné štylistické črty. Plochý dizajn je trend, ktorý vďaka lakonickému využívaniu vizuálnych výrazových prostriedkov našiel mnoho prejavov v oblasti digitálnych produktov.

V súčasnosti je tento výraz široko používaný ako opak „bohatého dizajnu“ kvôli harmonickej jednoduchosti, ktorá je základom tohto prístupu. Najpozoruhodnejšou vlastnosťou, ktorá dáva tomuto pohybu názov, je použitie plochých, dvojrozmerných vizuálnych detailov, na rozdiel od vysoko realistických a detailných skeuomorfných obrázkov. Plochý dizajn sa v posledných rokoch aktívne rozvíja a pokrýva čoraz viac oblastí grafického dizajnu, ktoré nachádzajú široké a rozmanité uplatnenie v oblasti digitálneho dizajnu pre webové a mobilné rozhrania. Tento prístup možno považovať za štýl, ktorý podporuje použiteľnosť a vizuálnu harmóniu v používateľských rozhraniach.

História plochého dizajnu

Je zrejmé, že plochý dizajn nevznikol len tak. Za jeho pôvod sa zvyčajne považuje švajčiarsky štýl. Švajčiarsky štýl, tiež známy ako medzinárodný typografický štýl alebo skrátene medzinárodný štýl, je hnutie, ktoré vzniklo v 20. rokoch 20. storočia, ale stretlo sa s veľkou kritikou a potom sa vo Švajčiarsku v 40. a 50. rokoch dramaticky znovu zrodilo v grafickom dizajne pevný základ grafického dizajnu polovice 20. storočia na celom svete. Zakladateľmi tohto tvorivého hnutia boli Joseph Müller-Brockmann a Armin Hofmann.

Podľa webovej stránky Design Is History je zhrnutie kľúčových vlastností tohto štýlu nasledovné: „...štýl zameraný na jednoduchosť, čitateľnosť a objektivitu. Dedičstvom tohto štýlu je používanie bezpätkových fontov, mriežok a asymetrických rozložení. Fotografie vynikajú aj ako prostriedok vizuálnej komunikácie. Hlavné vplyvné diela boli navrhnuté ako plagáty, ktoré sa považovali za najefektívnejší spôsob poskytovania informácií.“

Plagáty prezentované ako príklady ukazujú, že vyznávači tohto štýlu si obľúbili jednoduché tvary, výrazné a prísne fonty s vysokou mierou čitateľnosti, geometrické kombinácie detailov, ploché ilustrácie a jasnú vizuálnu hierarchiu. Švajčiarsky dizajn sa rýchlo stal čoraz populárnejším v rôznych krajinách a dostal nový život v umení začiatku 21. storočia.

Hoci tento štýl získal mnoho výrazov v oblasti vizuálneho dizajnu pre tlač: plagáty, známky, karty, obálky kníh, časopisy atď., výrazne rozšíril svoje obzory v ére digitálneho dizajnu, najmä v oblasti dizajnu používateľského rozhrania. .

Webové stránky a mobilné aplikácie otvorili úžasnú a plodnú perspektívu pre tento minimalistický a funkčný prístup k dizajnovým riešeniam. Štýl sa nazýval „plochý dizajn“, ktorý sa okamžite stal populárnym a začal nový smer v grafickom dizajne.

Prvý krok k zvýšeniu popularity plochého používateľského rozhrania v digitálnych produktoch urobila spoločnosť Microsoft, toto hnutie začalo na začiatku 21. storočia a v roku 2010 sa v produktoch výrazne rozvinulo, najmä vo vývoji mobilných rozhraní pre Windows Phone 7. Kľúčové vlastnosti flat dizajn, ako sú intuitívne jednoduché tvary, výrazná, jasná typografia, jasné kontrastné farby, dlhé tiene, nedostatok zložitých detailov a textúr, sa dobre udomácnil. Ďalší nárast popularity plochého dizajnu nastal v roku 2013, keď Apple vydal iOS 7 využívajúci princípy plochej grafiky ako základ pre pohodlné a intuitívne rozhrania. Dalo by sa tiež povedať, že niektoré z kľúčových princípov plochého dizajnu si našli cestu aj do Material dizajnu Google.

Takže hlavné črty plochého dizajnu sú:

• jednoduchosť foriem a prvkov;
• minimalizmus;
• funkčnosť;
• tučná a ľahko čitateľná typografia;
• jasná a prísna vizuálna hierarchia;
• kombinácia kontrastných farieb, ktorá poskytuje rýchle vizuálne vnímanie;
• vyhýbanie sa textúram, prechodom a zložitým tvarom;
• aplikácia princípov mriežky, geometrického prístupu a vizuálnej rovnováhy.

Výhody plochého dizajnu

Dizajn Fdat má množstvo výhod, ktoré určujú jeho popularitu a rozmanitosť v digitálnom dizajne. Medzi najvýznamnejšie:

• čitateľnosť;
• jasná vizuálna hierarchia pomocou tvarov, farieb a písma;
• efektívna organizácia rýchlej a intuitívnej navigácie vo webových a mobilných rozhraniach;
• jednoduchá škálovateľnosť pre responzívny dizajn;
• zanedbateľné zaťaženie pre digitálny systém.

So všetkým, čo bolo povedané, plochý dizajn poskytuje široké pole pre kreatívne skúmanie a štylistické koncepty.

Plochý dizajn - aplikácia v praxi

Rozmanitosť dizajnových štýlov dostupných a vyvíjajúcich sa v súčasnosti sa hodí k plochému dizajnu vďaka jeho flexibilite a umeleckej slobode.

Už v počiatočnej fáze plánovania celkovej dispozície, logiky a prechodov možno uplatniť princípy plochého dizajnu. Nástroje a softvér digitálneho dizajnu používané v tejto rozhodujúcej fáze umožňujú dizajnérom prezentovať klientom a tímom jednotné rozloženie všetkých obrazoviek aplikácie alebo webových stránok a dokonca aj toto základné rozloženie už má kľúčové vizualizačné funkcie typické pre plochý dizajn. V tejto fáze je ideálny na rýchle a efektívne zobrazenie dizajnových riešení v jednoduchom monochromatickom rozložení.

Dizajn používateľského rozhrania

Používateľské rozhrania sa určite stali širokým a priaznivým poľom pre plochý dizajn. Svoj vývoj našiel ako v abstraktných konceptoch interakcie používateľa, tak aj v množstve originálnych rozhraní, ikon, prvkov rozhrania a ilustrácií.

Tieto typy ilustrácií poskytujú dodatočnú podporu pre digitálne produkty a majú tendenciu byť zložitejšie z hľadiska detailov a uspokojujú estetické potreby používateľov, pričom zároveň okamžite vytvárajú spojenie s konkrétnou témou.

Tlačené ilustrácie

Rôznorodosť účelov moderného flat dizajnu a jeho rastúca popularita v digitálnych produktoch ovplyvnili aj iné oblasti dizajnu, najmä dizajn tlačených produktov, ako sú plagáty a obálky kníh, z ktorých tento prístup pochádza.

Branding

V súčasnosti brandový dizajn tiež úspešne uplatňuje princípy plochého dizajnu vďaka svojej flexibilite, pričom mnohé produkty sú prezentované na zariadeniach alebo získavajú digitálnu podporu online. Plochý dizajn v brandingu je často zastúpený v logách a ikonách aplikácií.

Všetky uvedené fakty a benefity o flat dizajne rozhodne neznamenajú, že tento štýl vyhral nad ostatnými dizajnovými prístupmi. Akýkoľvek štýl a smer dizajnu má svoje výhody a nevýhody. Plochý dizajn však otvoril nové perspektívy, najmä v oblasti vlastných riešení, ktoré predstavujú harmonickú rovnováhu krásy a funkčnosti.

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

Dnes sa pozrieme na to, čo je plochý dizajn, ako vznikol a čo potrebujete na vytvorenie čistého, svetlého a responzívneho 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 a 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ý je protikladom skeuomorfizmu( 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 - cca. , 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 budeme hovoriť o niečo neskôr.

Vo všeobecnosti ploché pomáha používateľovi sústrediť sa 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 jednoducho použiteľným.

2. Trochu histórie

Plochý dizajn, ako viete, existoval dávno predtým, ako sa stal globálnym trendom na webe. Plochý dizajn bol v 80. rokoch pomerne populárny, pretože technológia v tom čase ešte nebola dostatočne vyvinutá, aby podporovala komplexné efekty, textúry a tiene. Avšak už vtedy sa dizajn snažil o skeufomorfizmus a snažil sa, aby boli prvky rozhrania čo najrealistickejšie.

Plochý dizajn 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ý je pozoruhodný 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 predchádzajúcich produktov. Microsoft (Zune). Neskôr, inšpirovaný úspechom, Microsoft vydal operačný systém Windows 8 založený na rovnakom plochom štýle Metro.

Koniec koncov, plochý dizajn dosiahol svoj vrchol popularity v roku 2013, keď spoločnosť Apple vydala iOS 7 s úplne novým dizajnom 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 .

Čoskoro potom začal plochý štýl používať aj Google vo svojich aplikáciách a webových stránkach a nazval ho Material Design. Google má dokonca celú sekciu 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ď.

Odvtedy 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 spoločností, 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. Nezabudnite vyčistiť

Plochý dizajn sa zrejme nazýva „plochý“ kvôli nedostatku trojrozmerných prvkov a realistických efektov, ako sú prechody, textúry, zvýraznenia, poltó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 dokonca používa len silueta alebo kontúry objektu, t.j. len toľko, aby bol objekt rozpoznateľný, ale nepreťažoval ho drobnými detailmi.

Minimalizmus sa v súčasnosti stal globálnym trendom: jednoduchosť tvarov a použitie ostrých hrán vytvárajú čistý a príjemný dizajn. Jednoduché formuláre sú prehľadnejšie a ľahšie pochopiteľné. Vďaka tomu je dizajn minimalistický a čistý bez toho, aby pôsobil rušným a preplneným vzhľadom.

4. Doveďte to k dokonalosti

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.

Adobe Photoshop tu má jasno: 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ú špecifikované 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, čistými farbami a mriežkami. Adobe Illustrator je vo svojich nastaveniach 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ť kresbu v pixeloch pomocou Adobe Illustrator .

5. Farba

Jednou z najšpecifickejších vlastností plochého dizajnu je okrem tieňov použitie farby. 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í je svetlá, sýta a bohatá.Plochá farebná schéma nie je obmedzená na niekoľko špeciálnych farieb, obsahuje veľa odtieňov a ich výber závisí len od toho, čo zobrazujete, či už ide o ikony sladkostí alebo predmety v retro štýle v sofistikovanej retro palete.

Povedzme, že ste dizajnér používateľského rozhrania s dobrými znalosťami o farebných paletách a experimentujete s farebným panelom vo Photoshope a Illustartore a miešate farby podľa ľubovôle. Tento proces je však dosť zložitý 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 typy dizajnu a ilustrácie, nielen pre plochý dizajn. 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. Cooler je veľmi flexibilný nástroj, ktorý vám umožňuje vytvoriť si vlastnú paletu farieb alebo si vybrať z vlastnej palety z knižnice.

Ďalším jednoduchým a pohodlný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 - služba so sadou „plochých“ farieb, ktoré sú veľmi vhodné pre prácu. Táto stránka sa stala veľmi populárnou medzi dizajnérmi, ktorí hľadajú dobré farebné riešenia pre dokonalý dizajn. Skús to!

A môžete tiež nájsť väčšiu škálu farieb a paliet v Sprievodca Material Design od Google.

6. Dlhé tiene

Ako už bolo spomenuté vyššie, plochý dizajn sa vyznačuje jednoduchosťou a množstvom voľného priestoru – práve preto flat dizajn odmieta použitie akýchkoľvek efektov. Existuje však jeden efekt, ktorý je typický 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ý, konkrétne: 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 zachová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.

Ploché návrhy zvyčajne používajú jednoduché štýly písma, vďaka čomu je celý dizajn celkovo č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 máte v úmysle použiť písmo 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 striedmo, pamätajte na to, že by mali skôr dopĺňať a dopĺňať dizajn, než aby sa zobrazovali ako samostatný prvok. To neznamená, že nemôžete používať pätkové alebo ručne písané zložité písma. Len pamätajte na minimum a udržujte všetko v rovnováhe. Ploché však stále často 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, získava čoraz viac pozitívnych recenzií od dizajnérov a webdizajnérov a vôbec sa nezdá, že by strácal svoju pozíciu. 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. To platí aj pre rozhrania mobilných aplikácií: čistý dizajn s veľkými tlačidlami robí mobilný zážitok dokonalým.

Jas

Farba je ďalším skvelým plusom plochého dizajnu. Svetlé a bohaté 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 a prezentovateľnejším plochým dizajnom, ktorý 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šetkým používateľom vyhovuje flat, 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 byť vhodné pre plochý dizajn. Niekedy takéto bohaté písmo s ostrými hranami pôsobí naozaj vyvážene a štýlovo. Ak je však písmo zvolené nesprávne, môže to pokaziť celý dizajn. Mali by ste mať naozaj dobrý pocit, ktoré písma sú vhodné pre ploché a ktoré nie. Nedostatok skúseností sťažuje výber písma.

Slabý vizuál

Kvôli obmedzeniam v používaní efektov, farieb a fontov môžu ploché vzory vyzerať príliš jednoducho a chladne. Jeho hlavnou nevýhodou môže byť aj minimalizmus – ostatné ploché dizajny nakoniec vyzerajú úplne rovnako ako vy. 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 sa plochý dizajn úplne sformoval a zastavil sa. Možno je to kvôli jeho vyššie uvedeným nedostatkom, ktoré sa snažia o rozvoj a zmenu, získavanie nových funkcií a zvyšovanie vizuálnej expresivity.

Ak sa pozriete pozorne na posledný príklad plochého dizajnu, môžete si všimnúť, že je to naozaj takpostupne sa vzďaľuje od svojich prísnych nástrojov a začína pridávať jemné efekty, ako sú: prechody, tiene, osvetlenie a iné vizuálne efekty.

Tieto drobné úpravy dodávajú plochému dizajnu určitú hĺbku bez toho, aby bol príliš detailný ako skeuomorfné vzory. Tieto jemné vylepšenia robia byt citlivejším a pohodlnejším a tiež prinášajú svieži vzhľad, vďaka čomu je byt flexibilnejší a všestrannejší.

Byt tak nestráca svoje vlastnosti, ale stáva sa zaujímavejším a 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, zamerali sme sa na výhody a nevýhody bytu a naučili sme sa niektoré z hlavných princípov tvorby dobrého dizajnu.

Dúfam, že ste si z tohto článku odniesli nové informácie alebo vás aspoň zaujal. Ak ste to predtým neurobili, musíte sa pokúsiť vytvoriť plochý dizajn.

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

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

Je to trendy, ale ako pri každom grafickom štýle, neobmedzujte sa len na jednu techniku. To, že byt je trendy, neznamená, ž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. Hlavná vec je mať na pamäti, že dizajn je pre každý projekt iný, musí vyjadrovať jeho ducha, účel, podstatu, pričom musí zostať pohodlný a funkčný. Vpred!

Obrovskú obľubu si v poslednej dobe získal špecifický štýl v dizajne webových stránok a používateľských rozhraní, ktorý sa vďaka štylizácii svojich prvkov nazýva Flat.

Ak sa pozriete na webovú stránku vyrobenú podľa plochých pravidiel, neuvidíte žiadne prechody, žiadne tiene, ani najmenší náznak objemu alebo textúry. Základnými princípmi plochého štýlu sú jednoduchosť, stručnosť a minimalizmus. Hlavnými charakteristickými črtami sú tie veci, na ktoré sa môžete zamerať - svetlé neobvyklé farby, neštandardná typografia, grafické primitívy.

Dnes tento trend využíva vo svojej tvorbe čoraz viac dizajnérov, no Flat štýl si získal obľubu najmä s rozšírením moderných mobilných operačných systémov Windows Phone a iOS 7, keďže sú nasledovníkmi tohto trendu, hoci sa nedržia to úplne.

Naša spoločnosť už má skúsenosti s tvorbou web stránok v štýle Flat a radi vám pomôžeme s vytvorením plochého webu!

V tomto článku poukážeme na základné princípy flat dizajnu, ktoré by ste mali dodržiavať, ak chcete použiť flat ako hlavný štýl vášho projektu.

Nižšie analyzujeme a uvedieme príklady niektorých stránok, ktoré používajú plochý štýl.

1. Odstráňte všetky efekty

Základným princípom plochého dizajnu je vytvorenie dvojrozmerného obrazu, ktorý je už sám o sebe plochý. Zároveň sa musíte zbaviť všetkých prvkov, ktoré môžu dodať obrázku aspoň nejakú hĺbku: prechody, plynulé prechody, tiene, skosenia, objem, textúry atď. Všetky prvky obrázka majú tvrdé okraje a tiež nevystupujú alebo nemajú hĺbku v porovnaní s ostatnými prvkami obrázka.

V flat dizajne nenájdete prvky, ktoré sa snažia pôsobiť realisticky (skeuomorfizmus), 3D animácie, realistické ikony atď. Samotný dizajn sa však snaží zostať podobný tomu tradičnému, no teraz sa do popredia dostávajú štítky, tlačidlá a navigácia.

Web využívajúci Flat dizajn sa na prvý pohľad môže zdať príliš jednoduchý, aj keď v skutočnosti sa tento štýl vyznačuje jasnou hierarchiou prvkov, pohodlným umiestnením všetkých nástrojov interakcie s používateľmi, a preto má vysoké skóre použiteľnosti.

2. Používajte jednoduché prvky

Na dosiahnutie svojich cieľov v plochom dizajne používajú dizajnéri tlačidlá a ikony. Mali by byť čo najviac intuitívne a klikateľné. Rovnako ako všetky ostatné prvky rozhrania by mali byť ploché a jednoduché, bez ďalších efektov. Dizajnéri tiež často používajú jednoduché geometrické tvary – obdĺžniky, kruhy a štvorce, vďaka čomu je každý tvar samostatným objektom.

3. Venujme sa typografii

Keďže podľa predchádzajúceho princípu je grafika v flat dizajne jednoduchá, mimoriadne dôležitým prvkom je typografia – dizajn nápisov. V flat dizajne sa do popredia dostáva typografia spolu s tlačidlami.

Písma by mali byť čitateľné a samozrejme v súlade s dizajnom, keďže pri jednoduchom dizajne budú extrémne zdobené písma pôsobiť nevhodne. Nemali by ste však používať bežné písma, je lepšie experimentovať a vybrať si ten, ktorý upúta pozornosť používateľa.

Môžete zvážiť kombináciu jednoduchého bezpätkového písma s nejakým novým písmom, ktoré bude vnímané ako umelecký prvok. Písma by mali prispieť k jednoduchšiemu a prehľadnejšiemu dizajnu, zatiaľ čo tlačidlá a ďalšie prvky by mali slúžiť len na zvýšenie interaktivity.

4. Upútajme pozornosť farbou

Farba hrá v flat dizajne takmer hlavnú úlohu. Ak si pozorne preštudujete stránky vytvorené na základe tohto konceptu, prvá vec, ktorá vás upúta, je jasná farebná paleta. Zvyčajne pozostáva z niekoľkých kontrastných čistých (bez odtieňov) farieb, dvoch alebo troch, hoci tento počet môže dosiahnuť až osem. Okrem toho sa všetky tieto farby zvyčajne používajú rovnako.

Najobľúbenejšie farby sú primárne a sekundárne farby. Teda základné farby (azúrová, purpurová, žltá, čierna) a tie, ktoré sa získajú na základe ich zmiešania. Tiež veľmi často sa retro farby používajú vo farebnej schéme pri vytváraní plochého dizajnu, ako je lososová, fialová atď.

5. Minimalizmus

Plochý dizajn je vo svojej podstate jednoduchý a dobre sa hodí k minimalistickému prístupu.

V celkovom dizajne stránky sa musíte vyhnúť príliš veľkému množstvu zvončekov a píšťaliek. Samozrejme, jednoduché farby a text nemusia stačiť. Preto, ak chcete pridať vizuálne efekty, musíte zvoliť jednoduché fotografie. Niektoré maloobchodné produktové stránky používajú plochý dizajn na umiestnenie svojich produktov na jednoduché, nerušivé pozadie.

Treba si uvedomiť, že niektoré fotografie majú prirodzenú hĺbku, no celkovo to zapadá do celkovej roviny dizajnu

Od autora: Zdravím vás priatelia! Dnes si povieme, čo je to flat dizajn, alebo plochý dizajn webstránky. Tento termín si už dlho získal srdcia webdizajnérov a aj dnes je sebavedomo trendy. Najväčšie spoločnosti (Google, YouTube, Microsoft, Apple Inc. atď.) ho využívajú na dizajn svojich webových stránok a aplikácií. Ešte stále nepatríte do sekty priaznivcov dizajnu plochých webstránok? Potom ideme k vám!

Čo je podľa vás dôvodom takej divokej popularity flat dizajnu? Odpoviem vám v skratke: naozaj to funguje! V tomto článku vám vysvetlím, čo tento štýl je, poviem vám o jeho výhodách a nevýhodách a ukážem vám niekoľko vynikajúcich príkladov plochého dizajnu webových stránok, ktoré vás určite inšpirujú k veľkým veciam. Tak, poďme!

Všetko to začalo skeuomorfizmom

Pre tých, ktorí nevedia, skeuomorfizmus nie je špinavé slovo, ale iný štýl webdizajnu. Plochý dizajn je často prezentovaný ako opak skeuomorfizmu, čo podľa mňa nie je úplne správne. Ide skôr o zjednodušenie ako o antagonizmus.

Do roku 2010 bol skeuomorfizmus dominantným štýlom v dizajne rozhrania. Zobrazoval prvky tak, ako sa javili v skutočnosti, aktívne využíval textúry, tiene, odrazy a ďalšie atribúty trojrozmerného obrazu. Apple vynaložil v tomto ohľade mimoriadne úsilie a starostlivo skopíroval väčšinu softvérových objektov zo skutočných objektov.

Čoskoro pseudokonvexné ikony prestali priťahovať väčšinu používateľov a webových vývojárov, čo znamenalo začiatok éry plochého dizajnu webových stránok. Svet dospel k záveru, že je potrebné odstrániť všetky dekoratívne prvky a zostať by malo len to, čo je vhodné pre interakciu koncového používateľa.

“Najlepší dizajn je čo najmenší dizajn”

Ako sa do vody pozrel Dieter Rams - slávny priemyselný dizajnér, ktorý je proti rušivému dizajnu, animačným efektom atď. V júni 2013 Apple Inc. predstavil revolučný iOS 7, ktorý dostal všetky atribúty plochého štýlu webdizajnu. Lietadlo však okamžite „neporazilo“ realizmus a objem.

Používatelia dlho nemohli zabudnúť na kúzlo Steva Jobsa a ikony, „ktoré chcete lízať“. Mnohí sa dokonca rozlúčili s „úbohou Sedmičkou“ a prešli na „žiariaci Android“. Olej do ohňa prilialo veľké množstvo chýb prítomných v iOS 7 a belavý, priesvitný dizajn s paralaxou a animáciou „šmrncov“ pri otváraní aplikácií.

Tí, ktorí rezignovali na nevyhnutnú realitu a zostali pri operačnom systéme Apple, si nakoniec uvedomili, že plochý web dizajn nielen zaujímavo vyzerá, ale do všetkých aplikácií vnáša poriadok a jednotný vizuálny štýl.

Výhody a nevýhody plochého dizajnu

Výhody použitia tohto štýlu zahŕňajú:

jasnosť kompozície a stručnosť vizuálnych pomôcok. Responzívne rozhranie v štýle „nič nadbytočné“, vďaka ktorému si používatelia rýchlo uvedomia, čo im chceli sprostredkovať;

dôraz na dobrú typografiu. Obsah je na prvom mieste, čo je pri dnešnom množstve informácií mimoriadne dôležité;

menšia veľkosť webových stránok a rýchlejší výkon stránky vďaka minimálnemu počtu vizuálnych efektov. To je užitočné najmä pri vytváraní adaptívnych verzií, pretože čím sú formuláre jednoduchšie, tým ľahšie sa zobrazujú na malých obrazovkách mobilných zariadení.

Plochý web dizajn má aj svoje nevýhody:

obmedzenie fantázie webového dizajnéra na zjednodušené farby, typografiu a ikonografiu. Preto je riziko vytvorenia nudnej a nevýraznej webovej stránky vyššie;

nedostatok trojrozmernosti a tieňov niekedy sťažuje pochopenie toho, či na prvok možno kliknúť alebo nie;

nedostatok konkrétnych pevných pravidiel.

Ak ste sa rozhodli použiť na svojej stránke tento štýl, gratulujeme – svedčí to o tom, že vám záleží na používateľskom zážitku a kráčate s dobou. Ak s webovým dizajnérom len začínate a neviete, ako správne použiť plochý dizajn, aby vaša stránka vyzerala relevantne bez zjednodušovania, vyskúšajte tieto tipy:

Zabudnite na „tehlové steny“ a svetlé pozadie. Plochý webový dizajn má tendenciu používať na pozadí jednoduché, hladké a mäkké obrázky.

Moderné trendy a prístupy vo vývoji webu

Naučte sa algoritmus pre rýchly rast od nuly pri vytváraní webových stránok

Žiadne prechody, 3D ikony, animované prechody alebo iné špeciálne efekty. To všetko urobí váš web ťažším a pridá rozruch – potrebujete to?

Použite ploché ikony s jasnými obrysmi na zvýšenie pohodlia a funkčnosti.

Použite jasnú a bohatú paletu farieb. Teraz sú trendom tóny slnečného spektra: svetložltá, ružová a zelená. Hlavnou vecou nie je preháňať to - na stránke by nemali byť viac ako 3 farby.

Zamerajte sa na typografiu. V plochom dizajne sa uprednostňujú jasné, originálne nápisy, ktoré vytvárajú výzvu na akciu a poskytujú jednoduchú navigáciu po stránke. Aj tu je dôležité nepreháňať to. Zabudnite na „ručne písané“ a iné ozdobné fonty. Na zvýraznenie nadpisov možno použiť veľké písmená.

Nebojte sa použiť rôzne geometrické tvary. Štvorce, kruhy, čiary a iné tvary vylepšia nielen štruktúru webu, ale aj vytvoria prehľadnú hierarchiu a rozdelia obsah. Používatelia to ocenia, verte mi.

Zjednodušte navigačné menu a ďalšie prvky lokality čo najviac. Pre tlačidlá použite bežné obdĺžniky bez tieňov alebo zvýraznenia.

Webové stránky s plochým dizajnom sa tak v priebehu rokov stali štandardom, ktorý akceptuje úplne každý. Pozrite sa na väčšinu moderných webových stránok - sú ploché až do jadra.

Na záver uvediem sľúbené príklady vydareného plochého dizajnu, ktoré vám môžu poslúžiť ako inšpirácia pri vytváraní vlastných majstrovských diel.

1. Webová stránka http://dunked.com.

Populárna platforma na publikovanie portfólií, zameraná na zástupcov rôznych kreatívnych profesií. Minimalistický plochý web dizajn navodzuje pocit spoľahlivej a zrozumiteľnej služby, ktorá nerozptyľuje pozornosť zbytočnými špeciálnymi efektmi.

2. Rozhranie Microsoft.

Microsoft je jednou zo spoločností, ktoré urobili plochý štýl tak populárnym. Možno si pamätáte prehrávač Zune, konkurenta iPodu, ktorý Microsoft vydal v polovici 21. storočia? Dizajn tohto produktu sa teda výrazne líšil od väčšiny aplikácií tej doby, najmä vďaka veľkej typografii, plochým ikonám, veľkým a jasným tvarom.

Toto rozhranie, ktoré sa nazývalo Metro, neskôr migrovalo na osobné počítače (OS Windows 8), rozhranie Xbox 360 a ďalšie softvérové ​​produkty Mircosoft.

3. Webová stránka http://www.vox.com.

Tak čo, inšpirujete sa? Preč s pseudorealistickou 3D estetikou!

To je všetko. Prihláste sa na odber a zdieľajte naše články s priateľmi na sociálnych sieťach. Vysoké konverzie pre vás!

Moderné trendy a prístupy vo vývoji webu

Naučte sa algoritmus pre rýchly rast od nuly pri vytváraní webových stránok