Aké písma sú v plochom prevedení. Používame jednoduché prvky. Použitie 2D objektov

Flat design (plochý dizajn) je jedným z hlavných trendov súčasnosti, a to ako v oblasti webdizajnu, tak aj technológií na tvorbu užívateľských rozhraní. Najpozoruhodnejšie nedávne príklady zahŕňajú odvážny krok spoločnosti Microsoft týmto smerom s Windowsom 8 a novým Dizajn Google, s jasnou demonštráciou túžby ponoriť sa do minimalizmu.

Tu sú príklady definujúcich prvkov.

Život po Webe 2.0

V podobe zaoblených tvarov prvkov so všetkými druhmi efektov – 3D, tiene, zvýraznenia a odlesky, prechody, razba. Jedným slovom všetko, čo vytvára hĺbku a objem. Veľké, živé ovládacie prvky, lesk, textúry a ďalšie podobnými spôsobmi prejavy ustupujú jednoduchým, dvojrozmerným reprezentáciám vizuálnych objektov.

Plavákový dizajn

Typografia v srdci štýlu

Všimnite si, že toto je základ pre vybudovanie rovinatého pozemku. Jednoduchosť prvkov Flat dizajnu, ako aj princípy minimalizmu posilňujú hodnotu typografie. Textový obsah v zásade je možné nahradiť časť ťažkej grafiky alebo obrázkov. Dnes sa typografia stala dizajnom na mnohých stránkach. Prirodzene, keďže plochý dizajn je často minimalistický, potom treba ladiť s charakterom písma všeobecná schéma, štýl a kompozícia. Tak sa napríklad často používa veľké písmená pre prvky alebo nadpisy.

Coderwall

Prečítajte si tiež: 12 základných farieb a príklady ich vnímania používateľmi

Paleta farieb s plochým dizajnom

Plochý dizajn smeruje aj k rozširovaniu farebnej rozmanitosti. Weboví dizajnéri čoraz viac využívajú paletu farieb na implementáciu, možno, základného princípu dizajnu: stránka by sa mala líšiť od ich vlastného druhu.

Minimálna opica

Voľný priestor, veľké prvky

Od začiatku až do konca má minimalistický základ, čo znamená, že si osvojuje aj svoje základné princípy: veľké bloky obsahu, veľké prvky, voľný priestor, nedostatok zbytočného rozruchu a domýšľavosti.

Dizajn brady

Plochý dizajn ikony, tlačidlá, ilustrácie

Tlačidlá, ikony, ikony a ilustrácie tiež nadobúdajú 2D vzhľad. Mali by zodpovedať danému štýlu na všetkých stránkach webu, sprostredkovať náladu samotného webu a byť ľahko pochopiteľné pre každého používateľa.

Výber farby pre ikony, ako aj pre ikony samotné, nie je ľahká úloha. Môžete použiť plné farby. V snahe ozdobiť dizajn musíte premýšľať o tom, ako urobiť stránku užívateľsky príjemnou. Na jednej strane je dôležité neporušiť štýl a na druhej strane je potrebné zviditeľniť ikony. V ilustráciách sa snažíme o minimalizmus, vyhýbame sa predtým obľúbeným 3D efektom.

Prečítajte si tiež: 20+ inšpiratívnych webových stránok s plochými ilustráciami v dizajne

Príklady šablón webových stránok s plochým používateľským rozhraním

Príklady stránok v štýle Flat-design

identita

83 Kolektív dizajnu

Frunatic

Umbrella Group

Nadácia Slcl

Moja plsť

Behzad

Atlant

Jednoduché ako mlieko

rodina Weranda

V tomto článku vám predstavím plochý dizajn. Pravdepodobne ste už o tom niečo počuli, pretože byt 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, živého a citlivého dizajnu.

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

1. Čo je plochý dizajn?

Plochý dizajn - moderný štýl používateľské rozhranie ako aj grafický dizajn, charakteristický minimalizmom. Plochý dizajn sa vyznačuje použitím minima prvkov a absenciou rôzne efekty textúry, tiene a svetlá, napríklad: zmiešané farby, prechody, svetlá atď.

Plochý je protikladom skeuomorfizmu( skeuomorfizmus je princíp dizajnu, keď jeden výrobok dostane vzhľad iného, ​​t.j. kedy rôzne prvky rozhrania sú skopírované zo skutočných objektov - preklad cca.) ako aj bohatý dizajn.Treba však povedať, že flat 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 jednoduchším na používanie.

2. Trochu histórie

Je známe, že plochý dizajn existoval dávno predtým, ako sa stal globálnym trendom na webe. Plochý dizajn bol pomerne populárny v 80. rokoch, pretože technika ešte nebola dostatočne pokročilá, aby podporovala komplexné efekty, textúry a tiene. Avšak už vtedy sa dizajn snažil o skefomorfizmus 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ý udivuje svojou štýlovosťou 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 z raného produktu 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 vrchol v roku 2013, keď spoločnosť Apple vydala iOS 7 sa zásadne prezentuje nový dizajn s úplne prepracovanými prvkami používateľského rozhrania vrátane ikon a fontov. Apple vytvorené 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 Material Design... Google má dokonca celú sekciu venovanú tomuto štýlu, vrátane popisu cieľov webového dizajnu, jeho princípov a pokynov 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

Google Material Design

3. Pamätajte na čistotu

Plochý dizajn sa zrejme nazýva „plochý“ kvôli nedostatku 3D prvkov a realistické efekty ako sú: prechody, textúry, svetlá, 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 používa dokonca len silueta alebo obrysy objektu, t.j. len toľko, aby bol objekt rozpoznateľný, ale nepreťažoval ho 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 oku lahodiaci dizajn. Jednoduché tvary zrozumiteľnejšie a ľahšie pochopiteľné. Vďaka tomu je dizajn minimalistický, čistý, bez toho, aby mal rušný a chaotický vzhľad.

4. Dokonalosť

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

Program Adobe Photoshop tu je všetko jasné: funguje to rastrová grafika ktorý je založený na pixeloch.

Čo sa týka programu Adobe ilustrátor, potom 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 veľmi pohodlný program vytvárať pixelovo dokonalú grafiku. Dobré správy je to? najnovšie verzie Ilustrátor ocele skvelý nástroj vytvoriť dobrú grafiku.

To musím povedať Vektorová grafika v podstate znamená pracovať s jednoduchými, ploché tvary, čisté farby a mriežky. Adobe Illustrator je veľmi flexibilný v nastaveniach a umožňuje vám prispôsobiť mriežku vašim potrebám, zarovnať objekty a použiť Rôzne druhy 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ť kresbu v pixeloch pomocou Adobe Illustrator .

5. Farba

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

Farba v plochom prevedení sa vyznačuje jasom, sýtosťou a sýtosťou.Plochá farebná schéma sa neobmedzuje len 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 cukríkov alebo predmety v retro štýle v sofistikovanej retro palete.

Povedzme, že ste dizajnér rozhraní a ste dobrí vo farebných paletách, experimentujete s farebným pruhom Photoshop programy a Illustartor, miešanie farieb podľa ľubovôle. Tento proces je však dosť komplikovaný a vyžaduje si veľa intuície, skúseností a zručností. Tu je niekoľko nástrojov, ktoré vám môžu pomôcť vytvoriť si vlastnú paletu farieb.

Niektoré 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 cez webovú stránku 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 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 môžete korigovať, nechýba ani exportná funkcia.

Existuje niekoľko ďalších podobných služieb s vlastnými paletami, ktoré by sa vám mohli hodiť. Existuje však jeden nástroj vytvorený špeciálne pre plochý dizajn: FlatUIColors.com od Designmodo - 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é farebné riešenia pre dokonalé návrhy. Skús to!

A tiež nájdete širšiu škálu farieb a paliet Sprievodca Material Design od Google.

6. Dlhé tiene

Ako bolo uvedené vyššie, plochý dizajn sa vyznačuje jednoduchosťou, mnohými voľné miesto- preto flat odmieta použitie akýchkoľvek efektov. Je tu však jeden efekt typický pre plochý dizajn. Tento efekt sa stal trendom a charakteristický znak plochý.

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 spôsobuje, že objekt vyzerá viac trojrozmerne, no zároveň ho ponecháva v plochom dizajnovom kontexte.

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é typy písma, vďaka ktorým je celý dizajn ako celok čistý a čitateľný. Môžete ich nájsť veľa bezplatné fonty v Adobe Typekit, ak používate produkty Adobe. 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 komerčne.

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

Fonty používajte opatrne, pamätajte, že by mali zdôrazňovať a ladiť s dizajnom, nemali by sa zobrazovať ako samostatný prvok. To neznamená, že nemôžete používať pätkové fonty alebo ručne písané zložité fonty. Len to minimalizujte a udržujte 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

Napriek tomu, že plochý dizajn sa stal tak populárnym vďaka mnohým výhodám, stále má nevýhody, s ktorými sa dizajnéri stretávajú pri používaní tohto štýlu. Poďme sa pozrieť na výhody a nevýhody.

klady

Popularita

Flat dizajn sa stal trendom, ktorý zbiera č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é aplikácie: čistý dizajn s veľké gombíky využíva mobilné zariadenia perfektné.

Jas

Farba je ďalším skvelým plusom plochého dizajnu. Svetlé a nasýtené farby vyzerajú atraktívne a čisto a absencia 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.

nevýhody

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

Nereagovanie

Niekedy chýbajú dôležité detaily resp vizuálne efekty 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 považujú byt za pohodlný, 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 tlačou

Ako už bolo spomenuté, nie každé písmo sa hodí do plochého dizajnu. Niekedy takéto sýte, ostré písmo vyzerá naozaj vyvážene a štýlovo. Ak je však písmo zvolené nesprávne, môže to pokaziť celý dizajn. Musíte naozaj pochopiť, 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ôž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. Preto je veľmi ťažké odlíšiť svoje ikony alebo webové stránky od dizajnu niekoho iného, ​​pretože používate rovnaké zjednodušené formuláre, obmedzené farebné palety a podobné fonty. V dôsledku toho môže byť plochý dizajn časom nudný.

9. Budúce trendy plochého dizajnu

To však neznamená, že flat dizajn sa úplne sformoval a zastavil svojím vlastným spôsobom, možno práve pre jeho 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 posledný príklad plochý dizajn, môžete vidieť, že naozajpostupne od svojich prísnych nástrojov a začína pridávať jemné efekty ako: prechody, tiene, osvetlenie a iné vizuálne efekty.

Tieto maličkosti dodávajú plochému dizajnu určitú hĺbku bez preťaženia detailov, ako je napríklad skeuomorfný dizajn.Tieto drobné vylepšenia robia byt citlivejším a pohodlnejším a zároveň 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 to zlepší.

závery

Rozoberali sme teda niektoré fakty z histórie flat dizajnu, bavili sme sa o farbách, tvaroch a typografii. Preskúmali sme 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 naučili sami nové informácie z tohto článku, alebo ho aspoň zaujal. Ak ste tak ešte neurobili, musíte vyskúšať 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. 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 sa tiež môže stať dobré rozhodnutie... A čo je najdôležitejšie, nezabudnite, že dizajn je pre každý projekt iný, mal by vyjadrovať jeho ducha, účel, podstatu, pričom by mal zostať pohodlný a funkčný. Vpred!

Byt - dizajn (plochý dizajn) je populárny štýl v dizajne webových stránok a rozhraní, ako aj operačných systémov, puncčo je jednoduchosť, sofistikovanosť a minimalizmus. Plochý dizajn začal získavať na popularite v roku 2010 ako opak skeuomorfizmu.

Skeuomorfizmus- fyzická ozdoba alebo dizajnový prvok, ktorý je skopírovaný z tvaru iného predmetu, ale vyrobený z iných materiálov alebo inými metódami. Príklady zahŕňajú keramiku zdobenú imitáciou nitov, ktorá pripomína podobné nádoby vyrobené z kovu, alebo počítačový kalendár, ktorý simuluje vzhľad zošívanie strán papierového stolového kalendára (definícia z Wikipedia).

Uvoľnenie operačnej sály prispelo k popularizácii plochého štýlu v dizajne systémy Windows 8 od Microsoftu v štýle Metro, ako aj iOS 7, ktorý Apple tiež volí plochý štýl. Až potom sa začína skutočná éra plochý dizajn... Čoskoro veľké vyhľadávacie služby a aplikácie - Google, Youtube, existuje veľa stránok, ktoré pri svojom dizajne využívajú princípy plochého štýlu. V posledné roky flat design je lídrom v globálnych trendoch dizajnu webových stránok.

Výhody plochého dizajnu

1. Praktickosť- použitie plochého dizajnu umožňuje minimalizovať počet štýlov, skriptov a animácií, čo umožňuje rýchlejšie načítanie stránky.
2. Jednoduché prispôsobenie- Plochý dizajn je dostatočne jednoduchý na prispôsobenie rôznym rozlíšeniam obrazovky.
3. Pohodlie používania- vďaka zjednodušenému štýlu používatelia ľahšie vnímajú informácie na stránke.
4. krása- vonkajšia nestrannosť a jednoduché dizajny vám umožňujú zamerať sa na dizajn, ktorý skutočne zaujme.

5 princípov plochého dizajnu webových stránok

Plochý dizajn nie je vôbec nudný, ako by sa na prvý pohľad mohlo zdať. Dizajnové riešenia môžu byť vďaka svojej čistote a prepracovanosti štýlové a krásne, bez zbytočného hluku, čo vám umožní sústrediť sa na váš produkt alebo službu.

1 - Používanie 2D objektov

V plochom dizajne je vylúčené použitie prvkov, ktoré dodávajú objektu hĺbku a objem: tiene, prechody, svetlá, textúry, reflexy, animácie. Pri zobrazovaní objektu sa zobrazujú iba jeho obrysy.

2 - Ikony a jednoduché predmety

Použitie plochých ikon a jednoslabičných tvarov s jasnými obrysmi a jednou farbou pomáha udržiavať dizajn čo najjednoduchší a najľahší. Ovládanie je pre používateľa intuitívne a stimuluje interakciu.

3 - Jednoduché písma podľa štýlu dizajnu

Veľká pozornosť sa venuje typografii a fontom v plochom dizajne. Kurzíva sa tu nepoužíva, písmo harmonicky zapadá do dizajnu stránky, a to nielen obsahom, ale aj navigáciou. Dokonca aj v typoch písiem pre stránky sa odporúča minimalistický štýl.

4 - Hra farieb

Plochý dizajn obsahuje niekoľko základných farieb, ktoré vylučujú použitie plynulé prechody a prechody, ale môžu byť svetlé a navzájom kontrastné.

5 - Minimalizmus

Plochý dizajn zahŕňa využitie vizualizácie prvkov, využitie celej šírky obrazovky a zároveň minimalizáciu informácií.

Existuje niečo ako takmer plochý dizajn. Ide o jeden z konceptov plochého dizajnu, ktorý využíva jednoduché prvky a dvojrozmerný priestor. Príkladom toho by bolo kvalitná fotografia ktorý je rozmazaný na pozadie alebo stlmí. To vám umožní vytvoriť hĺbku a perspektívu objektu.

Príklady plochého dizajnu

Na internete, vrátane bieloruského segmentu, nájdete veľa príkladov vývoja webových stránok s plochým dizajnom v rôznych témach vrátane spravodajských zdrojov, portálov a dokonca aj internetových obchodov.

Webové stránky s plochým dizajnom vyzerajú ako jednoduchý geometrický blokový priestor s farebnými akcentmi (ikony, zvýraznenie v texte, infografika) s minimom grafických detailov a žiadnym prebytkom textové informácie... Ako sa hovorí, „minimalizmus“ a nič viac.

Ako nemôžete kresliť ploché ikony

„Plochý“ dizajn webových stránok sa stal módnym spolu s rozhraniami nové okná... Rastúca popularita tohto štýlu v Rusku bola uľahčená nárastom počtu webdizajnérov samoukov, ktorí nevedia, že rozhranie webovej stránky a rozhranie „prst“ (smartfónov) nie sú to isté (je ľahké rolujte prstom po stránke - a naopak, bude to vyžadovať veľa trpezlivosti a skutočného záujmu otočiť kolieskom myši nadol o 3-4 obrazovky). Na ruských plochých stránkach často nájdete tieto ikony:

Príklad je vzatý jednoducho svetlé farby nekonzistentné ikony + Zlá kvalita(vzal som si príklad z platený set, ale takmer vždy freelanceri používajú ikony stiahnuté zadarmo z rôzne sady, ktoré sa tiež navzájom nekombinujú).

Pre nemožnosť kresliť kvalitnú grafiku začínajúci dizajnéri ľahko využívajú príležitosť všetko zjednodušiť. Zároveň sa prehliada, že dizajn v štýle „minimalizmu“ predpokladá práve kvalitné spracovanie detailov rozhrania a nie len umiestnenie ikon stiahnutých z internetu na farebné štvorčeky v Windows štýl 8 (ktorý teraz možno nájsť na mnohých údajne „moderných vstupných stránkach“).

Príklad dobrých plochých ikon:

Farby a ikony by sa mali kombinovať nielen navzájom, ale mali by tiež tvoriť jeden celok.

Problémy nekvalitného plochého dizajnu

1. Navigácia a použiteľnosť

Web NIE JE skutočný priestor, preto na vytvorenie zmyslu pre realitu a pochopenie vašej polohy stránky používajú „ chlebové omrvinky“ A obrázky ikon sú blízko skutočných objektov pre rýchle pochopenie a jednoduchú navigáciu. Takže pri ikone domu je hneď jasné, že toto je „domov“, pri ikonách slúchadla – že toto je telefón, pri košíku – že je to košík (ako v supermarkete – všetko je jasné a jednoduché), ikona s obrázkom darčeka - darček atď. ...

Noví bytoví dizajnéri však často ikony príliš zjednodušujú. A čím ďalej som dizajnérom od intuitívnych obrázkov, tým ťažšie je pre používateľa ich neskôr interpretovať. Prílišné zjednodušenie niekedy sťažuje navigáciu. Akonáhle sa všetci vrhli na vytvorenie trendového plochého dizajnu stránok, snažiac sa napodobniť európskych dizajnérov, zabudli jednoduché pravidlá použiteľnosť.

2. Dlhé ploché miesta na nohy

Stránky sú natiahnuté o 3-4 obrazovky, pričom priestor nie je len ekonomicky využitý, ale naopak pribúda nadmerné množstvo „vzduchu“. Zároveň chýba vizuálna motivácia pre rolovanie – žiadne žetóny, žiadna animácia. Nie je jasné, ako vývojári plánovali zaujať návštevníkov, aby posúvali stránku nadol. V porovnaní so stránkami, kde je všetko kompaktné, stránky s nášľapnými plochami vyžadujú veľa energie na pohyb myši po obrazovke a posúvanie.

3. Nezrozumiteľné tlačidlá

Na plochých miestach už aktívne prvky nie sú zrejmé. S príchodom plochého dizajnu sa sploštili aj tlačidlá. Ale vizuálny obraz tlačidla pochádza zo skutočnosti fyzické tlačidlo a tiene a prechody len ukazujú, že „sem určite môžete kliknúť“.

4. Zle nakreslené ikony

Kvôli neopatrnej práci dizajnérov stratili ikony na stránkach (najmä na plochých stránkach) svoje predvídateľné obrázky. Buď kvôli obmedzeným rozpočtom na dizajn, alebo kvôli zlyhaniu samotných webdizajnérov, ale navigačné prvky na stránkach často nezodpovedajú primárnym asociáciám a sú pritiahnuté za vlasy.

Predpokladám, že práca na tvorbe ikon prebieha asi takto: podľa technickej špecifikácie je potrebná ikona „Individuálny prístup ku klientom“. Osobne mám obraz manažéra a dvoch klientov, z ktorých každého vedie šípka vlastnej farby (modrá šípka k modrému klientovi, červená šípka k červenému klientovi). Ak dizajnér nevie kresliť, bude hľadať ikonu v hotových súpravách (v lepšom prípade kúpiť vo fotobanke, v horšom stiahnuť z internetu) a použije tú, ktorá mu najlepšie vyhovuje. S najväčšou pravdepodobnosťou to bude ikona muža s kravatou alebo kufrom. Vo všeobecnosti to nie je ďaleko, ale v dizajne stránky bude jasné, že kufor pre „Individuálny prístup ku každému“ a Hodiny „10 rokov na trhu“ (mimochodom, naozaj som to videl !) - sfalšoval dizajnér.

5. Falošné zacielenie na obsah

Plochý dizajn stránok je orientovaný na obsah. No zrejme – ak sa dôraz nekladie na grafiku – tak na informácie. Ak sa však pozorne pozriete na „moderné“ vstupné stránky v plochom štýle, ktoré ponúkajú ruské webové štúdiá, obsahu sa venuje malá pozornosť. menovite:

• Text je prezentovaný náhodne. Nie je jasné, ako sú v nej umiestnené akcenty, čoho sa chytiť a čo je druhoradé.
• Neexistuje žiadny dizajn ako taký. Tabuľky, zoznamy s odrážkami, nadpisy, oznámenia často nie sú vôbec spracované.
• Často holý text. Neexistujú žiadne obrázky a ikony, ktoré by vizuálne posilnili textové bloky... Výsledkom je, že dôraz nie je kladený ani na grafiku, ani na text, ale na samotný „štýl“. V tomto prípade je spoločnosť so svojimi návrhmi stratená.

Je teda plochý dizajn pre webové stránky skutočne potrebný?

S dizajnom rozhraní pre smartfóny je všetko jasné – ľahké, nezaťažené, jednoduché na používanie. Ale s plochým dizajnom webových stránok mám osobne veľkú otázku - je to vôbec efektívne?

Väčšina zákazníkov nerozumie kvalite grafiky a pri schvaľovaní dizajnu stránky sa riadi svojim osobným vkusom (páči sa mi/nepáči sa mi). A tu hrá rolu móda.

Plochý dizajn webovej stránky môže byť cool. ALE! Pohodový dizajn predpokladá naozaj kvalitnú štúdiu použiteľnosti a grafických prvkov a prítomnosť kreatívnych kúskov a efektov. A ak chýbajú v dizajne, ak na stránkach nie je žiadna originalita, vyzerajú monotónne, prázdne a nudné. Vo všeobecnosti je to teraz na väčšine ruských stránok.

Príklad kvalitného plochého dizajnu:

Móda pre plochý dizajn je dočasná, rovnako ako každá iná móda. Niekto tvorí originál, kreatívne návrhy, a niekto ich štýlovo kopíruje a napodobňuje, lebo sa nevie vynájsť. A ako huby pribúdajú lacné „módne“ stránky...

Vývojár mobilnej aplikácie a webu nám napísal stĺpček a dal všetko do poriadku, čo sa týka plochého a materiálového dizajnu.

Celkovo je rozdiel medzi plochým dizajnom a materiálovým dizajnom jemný. Človeku, ktorý nemá hlboké poznanie v grafickom dizajne sa môžu skutočne zdať veľmi podobné. V tomto článku sa pokúsim „osvetliť“ niektoré rozdiely medzi nimi. Získate ďalšie vedomosti, ktoré sú tak potrebné, aby ste náhodou nezranili jemnú povahu dizajnéra.

Trochu histórie

Predtým, než začneme hovoriť o rozdieloch medzi dvoma najobľúbenejšími dizajnovými trendmi, poďme zistiť, odkiaľ pochádzajú. Predpokladá sa, že materiálové prevedenie je založené na plochom prevedení. Odkiaľ teda pochádza plochý dizajn?

Skeuomorfizmus

Ak hovoríme o používateľskom rozhraní a webovom dizajne, potom pojem skeuomorfizmus znamená prístup, ktorého hlavnou myšlienkou je imitácia. Bez toho, aby ste zachádzali do detailov, len si pamätajte Rozhrania Apple predtým vznik iOS 7 s ich „ realistické textúry, svetelné a náročné efekty “.

Snažím sa robiť digitálnych objektov podobne ako ich kolegovia z reálneho sveta bolo odôvodnené potrebou uľahčiť interakciu používateľa so zariadením. V skutočnosti je to preto, že všetky rozhrania s realistickými textúrami dominujú digitálnemu svetu už mnoho rokov. Skeuomorphic dizajn odviedol vynikajúcu prácu a pomohol používateľom bezproblémovo prejsť z reálneho sveta do digitálneho.

Avšak s kvitnutím mobilných technológií postupne je potrebné zamerať sa predovšetkým na pohodlie a jednoduchosť používania. Súhlasíte s tým, že v tejto oblasti je potrebné vytvoriť mobilné riešenia dostupné z rôzne zariadenia, výrazne narastá. A práve v tejto chvíli sa jednoduchosť stáva novým štandardom dizajnu.

Poznámka: Nikdy nepredpokladajte, že skeuomorfizmus úplne zmizol. Je široko používaný v hrách, kde je potrebné vytvoriť realistický svet a pomôcť hráčom cítiť svoju postavu, aby sa hlboko ponorili do herného procesu.

Plochý dizajn

Tento štýl je úplne bez akéhokoľvek 3D objekty... Zhruba povedané, plochému dizajnu chýbajú štylistické prvky ako vrhnuté tiene, textúry, prechody, no pozornosť je venovaná hre fontov a farieb a ikon. Ale prečo bolo toto všetko potrebné? Odpoveď je jednoduchá.

Po prvé, plochý dizajn výrazne skracuje časy načítania stránky. Absencia „ťažkých“ skeuomorfných detailov (len si predstavte: vrstvy, pätkové fonty, prechody) robí ploché dizajnové prvky „ľahšími“, čo následne výrazne zrýchľuje časy načítania. Ploché prvky navyše vyzerajú na obrazovkách rovnako atraktívne ako na s vysokým rozlíšením a nízka.

po druhé, jednoduché obrázky môžu používateľom sprostredkovať vašu správu rýchlejšie ako podrobné ilustrácie: sú útržkovité, a preto ľahko pochopiteľné.

A, samozrejme, ploché ikony s porovnateľne obyčajný typ môže upriamiť pozornosť používateľov na skutočne dôležitý obsah.

Dnes sa plochému dizajnu dostalo zaslúženého uznania, no stále to nebolo bezproblémové. Najzrejmejším príkladom takýchto problémov bolo vydanie systému Windows 8. spoločnosťou Microsoft... Tento operačný systém je považovaný za priekopníka plochého dizajnu a podporuje koncept Metro dizajnu. Problémy spôsoboval fakt, že spoločnosť považovala za potrebné venovať viac pozornosti tlačiarni ako samotnej grafike.

Test použiteľnosti systému Windows 8 od spoločnosti NN Group ukázal, že používatelia mali problém rozlíšiť objekty, na ktoré sa dá kliknúť a na ktoré sa nedá kliknúť. Používatelia sa sťažovali, že objekty, ktoré vyzerali staticky, boli v skutočnosti klikateľné. V dôsledku toho zlyhala hlavná misia spoločnosti – pomôcť používateľom správne interpretovať systém.

Ďalšou spoločnosťou často spájanou s plochým dizajnom je Apple. V mobilnej operačnej sále sa vzdialili od skeuomorfných dizajnových prvkov. systém iOS 7 vydaný v roku 2013. Tentokrát bol prechod vnímaný o niečo lepšie, najmä preto, že spoločnosť sa nesnažila úplne prerobiť koncept používateľského rozhrania, ale jednoducho pridala niekoľko zmien smerom k plochému dizajnu. To umožnilo používateľom používať produkt a zároveň stavať na ich predchádzajúcich skúsenostiach operačné systémy a webové stránky.

Materiálové prevedenie

Hneď si to vyjasnime: Material dizajn je skôr a značkový produkt než spontánne vznikajúci trend dizajnu, ktorý si získal široké uznanie. To ho v podstate odlišuje od plochého dizajnu.

Nazvaním dizajnového materiálu „korporátnym“ mám na mysli, že má celý rad jasne definovaných odporúčaní a zásad, ktorými sa riadi každý sebarešpektujúci dizajnér. Je celkom zrejmé, prečo Google predstavil svoj Material Design: vznikla potreba zjednotiť dizajn, aby aplikácie vyzerali rovnako na ktoromkoľvek z mnohých Android zariadení.

Aj keď je celkom funkčný, plochý dizajn sa považuje za ťažko pochopiteľný. Pravdou je, že ploché objekty na obrazovke môžu byť pre používateľov mätúce (najmä tých, ktorí nemajú skúsenosti s webom alebo mobilom). Dizajnový materiál sa preto snaží vrátiť prvky skeuomorfizmu, avšak vo veľmi zjednodušenej forme. Obrázky vyzerajú plocho, najmä keď prichádza o farbách, no stále sú viacrozmerné, vďaka prítomnosti osi Z.

Inými slovami, materiálový dizajn možno nazvať vylepšenou verziou plochého dizajnu so skeuomorfnými prvkami – animáciou, tieňmi a vrstvami. Produkt tak môžete urobiť intuitívnejším z hľadiska navigácie a vyhnúť sa zbytočnej zložitosti štýlu vo všeobecnosti.

Výhody a nevýhody plochého dizajnu

Nechajme za sebou históriu vývoja štýlov a prejdime k niečomu výraznejšiemu – vymenujeme silné a slabé stránky plochý dizajn.

• Minimalizmus a štýl
• Intuitívnosť. Bude pre vás jednoduchšie sprostredkovať váš nápad používateľom.
• Úspora času a zdrojov. Stránky sa načítavajú oveľa rýchlejšie s menšou spotrebou šírky pásma.
• Zamerajte sa na obsah. Rozhranie bez zbytočných detailov, ktoré dokáže odviesť pozornosť od skutočne cenných informácií.
• Vyzerá rovnako dobre rôzne zariadeniači už ide o počítačový prehliadač alebo smartfón.
• Urýchľuje proces návrhu webovej stránky alebo aplikácie tým, že sa zbavuje zbytočných úprav dizajnu.

• Minimalistický štýl.
• Ľahko pochopiteľné na intuitívnej úrovni. Materiálové prevedenie bude rovnako ľahko vnímateľné ako skúsených používateľov aj nováčikovia.
• Stredný skeuomorfizmus. Všetko vyzerá reálnejšie vďaka použitiu osi Z (jedinečný koncept Google).
• Existuje súbor sprievodcov, ktoré sa neustále aktualizujú. Preto sa na nich môže každý dizajnér vždy obrátiť, ak sa v procese práce vyskytnú ťažkosti.
• Podporuje sa animácia webových riešení. Netreba dodávať, ako veľmi ľudia milujú pohyb. Navyše, animácia robí rozhranie prehľadnejším a intuitívnejším.

• Vlastnené spoločnosťou Google. Akékoľvek otázky a návrhy na zlepšenie preto riešte s majiteľom.
• Kvôli osi Z môže proces návrhu trvať dlhšie.
• Animované prvky vyžadujú viac zdrojov.
• Dôsledné dodržiavanie pokynov môže obmedziť originalitu dizajnu.

Zhrnúť

V skutočnosti by sa nemalo predpokladať, že jeden zo spomínaných dizajnových prístupov má jasnú výhodu oproti druhému, pretože plochý a materiálový štýl idú vedľa seba. Obaja sú šialene populárni a obom chýba prílišná realizmus. Materiálové prevedenie je nástupcom plochého dizajnu, pričom samotné ploché prevedenie bolo reakciou na príliš ťažké a realistické rozhodnutia. Materialový dizajn pridal niečo, od čoho sa flat dizajn vždy snažil vzdialiť – trochu skeuomorfizmu. Jedna vec bude vždy rozlišovať medzi týmito prístupmi: materiálový dizajn je proprietárny produkt Google a plochý dizajn je výsledkom fúzie niekoľkých dizajnérskych postupov, ktoré sa snažia predovšetkým o celkovú jednoduchosť.

V skutočnosti sa plochý dizajn v posledných rokoch veľmi vyvinul, od úplne „plochého“ štýlu až po „poloplochý“ štýl. Teraz umožňuje používať vrstvy a slabé tiene, aby objekty vyzerali hlbšie, než sa predtým zdalo. Takže vy a ja sme šťastní súčasníci plochého dizajnu 2.0.

V neposlednom rade vám nič nebráni v tom, aby ste sa pokúsili spojiť tieto dva prístupy a vytvoriť skutočne funkčný a užívateľsky príjemný produkt. Nechajte sa teda inšpirovať gurumi plochého a materiálového dizajnu a pustite sa do práce!