Webové stránky v štýle flat dizajnu vyzerajú ako jednoduchý geometrický blok s farebnými akcentmi (ikony, zvýraznenie textu, infografika) s minimom grafických detailov a bez prebytočných textových informácií. Ako sa hovorí, „minimalizmus“ a nič zbytočné.

Ako nekresliť ploché ikony

„Plochý“ dizajn webových stránok sa stal módnym spolu s novými rozhraniami Windows. 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óny) nie sú to isté (je ľahké posúvať sa prstom po stránke - a naopak, budete potrebovať veľa trpezlivosti a skutočného záujmu pri otáčaní kolieskom myši nadol o 3-4 obrazovky). Na ruských plochých stránkach často nájdete nasledujúce ikony:

Príkladom sú len svetlé farby, ktoré sa k sebe nehodia + ikony zlej kvality (vzal som príklad z platenej sady, ale takmer vždy freelanceri používajú voľne stiahnuté ikony z rôznych sád, ktoré sa tiež navzájom nezhodujú).

Začínajúci dizajnéri sa kvôli svojej neschopnosti kresliť kvalitnú grafiku ľahko chopia príležitosti všetko zjednodušiť. Zároveň sa prehliada, že dizajn v štýle „minimalizmu“ predpokladá precízne kvalitné spracovanie detailov rozhrania, a nie len umiestňovanie ikon stiahnutých z internetu na farebné štvorčeky v štýle Windows 8 (ktoré teraz nájdete na mnohých údajne „moderných vstupných stránkach“).

Príklad dobrých plochých ikon:

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

Problémy nekvalitného plochého dizajnu

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

Sieť NIE JE skutočným priestorom, preto na vytvorenie zmyslu pre realitu a pochopenie vašej polohy stránky používajú „strúhanku“ a obrázky ikon sú blízko skutočných objektov, aby sa dali rýchlo pochopiť a uľahčili navigáciu. Takže pri ikone domu je hneď jasné, že toto je „domov“, pri ikone slúchadla – že toto je telefón, pri košíku – že toto je košík (ako v supermarkete – všetko je jasné a jednoduché), ikona s obrázkom darčeka - darček atď.

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

2. Dlhé obaly na ploché nohy

Stránky sa roztiahnu o 3-4 obrazovky, pričom priestor je nielen šetrne 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. Ako vývojári plánovali zaujať návštevníkov posúvaním stránky nadol, nie je jasné. Koniec koncov, v porovnaní s webmi, kde je všetko kompaktné, vyžadujú weby na nohy veľa energie na pohyb myši po celej obrazovke a posúvanie.

3. Zmätočné tlačidlá

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

4. Zle nakreslené ikony

V dôsledku nekvalitnej práce dizajnérov stratili ikony na webových stránkach (to je viditeľné najmä na webových stránkach s plochým štýlom) svoje predvídateľné obrázky. Buď kvôli obmedzeným rozpočtom na dizajn, alebo kvôli neschopnosti samotných webdizajnérov, prvky navigácie 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 technických špecifikácií 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 inej farby (modrá šípka vedie 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 si ju kúpi vo fotobanke, v horšom si ju stiahne z internetu) a použite ten, ktorý je významovo najvhodnejší. S najväčšou pravdepodobnosťou to bude ikona muža s kravatou alebo kufrom. Vo všeobecnosti nezašiel veľmi ďaleko, ale aj tak v dizajne stránky bude jasné, že kufor pre „Individuálny prístup ku každému“ a Hodinky za „10 rokov na trhu“ (mimochodom, skutočne som videl to!) – návrhár podvádzal.

5. Falošné zameranie obsahu

Plochý dizajn webových stránok predpokladá zameranie na obsah. No jasné – ak nie je dôraz kladený 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 ňom umiestnené akcenty, čoho sa držať a čo je vedľajšie.
  • Neexistuje žiadny dizajn ako taký. Tabuľky, zoznamy s odrážkami, nadpisy, oznámenia často nie sú vôbec vypracované.
  • Často holý text. Neexistujú žiadne obrázky ani ikony, ktoré by vizuálne podporovali textové bloky. V dôsledku toho sa dôraz nekladie ani na grafiku, ani na text, ale na samotný „štýl“. Zároveň sa stráca spoločnosť a jej ponuky.

Je teda plochý dizajn pre webové stránky vôbec potrebný?

S dizajnom rozhraní pre smartfóny je všetko jasné – ľahké, nezaťažené, ľahko použiteľné. Ale s dizajnom webových stránok v plochom štýle 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 webovej stránky sa riadi svojim osobným vkusom (páči sa mi/nepáči sa mi). A tu hrá rolu móda.

Plochý dizajn webových stránok môže byť skvelý. ALE! Pohodový dizajn si vyžaduje naozaj kvalitné prevedenie použiteľnosti a grafických prvkov a prítomnosť kreatívnych funkcií a efektov. A ak v dizajne absentujú, ak stránkam chýba originalita, vyzerajú monotónne, prázdne a nudné. Vo všeobecnosti je to teraz k dispozícii na väčšine ruských stránok.

Príklad kvalitného plochého dizajnu:

Móda pre plochý dizajn webových stránok je dočasná, ako každá iná móda. Niektorí ľudia vytvárajú originálne, kreatívne návrhy, iní ich kopírujú a štýlovo napodobňujú, pretože sami nevedia, ako ich vymyslieť. A lacné „módne“ stránky rastú ako huby po daždi...

Ploché prevedenie resp plochý štýl existoval už v 80. rokoch a nemal žiadne alternatívy, pretože úroveň technológie neumožňovala prácu so zložitými textúrami. Postupom času sa objavili najprv jednoduché prvky skeuomorfizmu (napodobňovanie skutočných predmetov) a potom zložité prejavy vizuálnej pseudokonvexnosti.

Móda je cyklická a od roku 2010 si plochý dizajn rýchlo získal späť svoju popularitu, až kým sa v roku 2014 nestal novým štandardom počítačom podporovaného dizajnu.

Evolúcia plochého dizajnu

Plochý dizajn bol spočiatku koncipovaný ako presný opak skuemorfizmu. Tiene, prechody a akékoľvek náznaky objemu boli popreté. Microsoft bol prvý, kto implementoval tento koncept. Po testovaní použiteľnosti sa však ukázalo, že používatelia mali problém identifikovať niektoré prvky rozhrania. Takže cieľová skupina nemohla pochopiť, na ktorú ikonu sa dá kliknúť a na ktorú nie, pretože všetky boli ploché. Ešte väčšie problémy vznikli s klikateľnými štítkami, pretože vyzerali ako štandardný popis objektov.

V tomto smere sa objavila upravená verzia plochého dizajnu - flat 2.0 alebo half-flat prevedenie. Má nízky kontrast a jemné tiene, ktoré používateľovi ukážu, že na ikonu sa dá kliknúť. Keď ľudia hovoria o plochom dizajne, majú na mysli plochú verziu 2.0. S rozvojom tohto štýlu boli pseudotiene a svetelný kontrast opäť nahradené úplnou rovinou objektov. Zároveň sa na webe pre pojem klikateľnosť prvku začala používať jednoduchá zmena farby na kontrastnú v rovnakom plochom štýle bez použitia prechodov.

Princípy plochého dizajnu

1. Dvojrozmerná grafika.
Pri plochom prevedení sa kladie dôraz na obrysový obraz objektu. Dizajnér sa nesnaží o realizmus, jeho úlohou je sprostredkovať podstatu pomocou jednoduchých dvojrozmerných foriem.

2. Ikony.
Pomocou jednoduchých ikon s jasnou výzvou na akciu (ikona diskety alebo cloudového úložiska s výzvou na uloženie súboru) je rozhranie jednoduchšie a intuitívnejšie.

3. Jednoduché fonty.
Plochý štýl venuje veľkú pozornosť typografii vo všeobecnosti a fontom zvlášť. Plochý dizajn znamená, že minimalistické bezpätkové písmo a akékoľvek dekorácie sú zakázané. Charakter písma by mal dopĺňať koncept projektu a nevybočovať z celkového štýlu.

4. Hra s farbami.
Keďže plochý dizajn neumožňuje prechody gradientom, štýl vytvoreného prvku môže a mal by používať niekoľko základných farieb, ktoré sú často navzájom kontrastné.

5. Minimalizmus.
Plochý dizajn zahŕňa vizualizáciu objektov, využitie celej obrazovky, no zároveň minimalizáciu informácií. To znamená, že dizajnér sa nesnaží vyplniť všetok voľný priestor a nebojí sa prázdneho priestoru.

6. Jednoduché obrázky na pozadí.
Najlepšou voľbou je obyčajné pozadie. Na obrázky a la tehlové steny alebo leopardiu kožu môžete zabudnúť. Pokojné a sotva viditeľné farby pozadia na seba neupozorňujú a umožňujú návštevníkovi sústrediť sa na dôležité prvky rozhrania.

Vzhľadom na všetky tieto princípy existuje názor, že plochý dizajn sa dá ľahko vytvoriť. V skutočnosti je to plochý dizajn, ktorý venuje veľkú pozornosť detailom a prenosu pohybu a rytmu. Dizajnér stojí pred úlohou vytvoriť atraktívny, zrozumiteľný a úplný obraz pomocou výlučne jednoduchých foriem.

Výhody plochého dizajnu webovej stránky

1. Čitateľnosť textu.
Pri flat dizajne sa nekladie dôraz na grafiku, ale na text, ktorý zlepšuje jeho vnímanie. Okrem toho sa používajú jednoduché fonty, ktoré na seba neupozorňujú.

2. Čas načítania stránky.
Vďaka absencii ťažkej grafiky a zložitých prvkov sa stránky načítavajú rýchlo a nezamŕzajú. Dokonca aj stránka Google sa načítava rýchlejšie po tom, čo spoločnosť zmenila svoje logo na ploché a jednoduché písmo.

3. SEO optimalizácia.
Tento bod vyplýva z predchádzajúceho. Rýchlosť načítania stránky ovplyvňuje hodnotenie výsledkov vyhľadávania. Takže jednoduchou zmenou štýlu dizajnu môžete zvýšiť svoj zdroj vo výsledkoch vyhľadávania. Okrem toho Google teraz používa technológiu, ktorá označuje pomaly sa načítavajúce stránky špeciálnou ikonou. To znamená, že počet vašich návštevníkov môže klesnúť, ak neprispôsobíte dizajn svojej webovej stránky.

4. Vzhľad.
Ako dlho podľa vás trvá používateľovi, kým si vytvorí názor na zdroj? minúta? Možno 30 sekúnd? Správna odpoveď: 0,05 sekundy! Počas tejto doby nie je možné študovať obsah stránky, ale môžete naskenovať vzhľad a pochopiť, aké pocity vyvoláva. Plochý dizajn hovorí používateľom, že vaša stránka je moderná, že sa vyvíja, a to je už predpoklad na vytvorenie základnej dôvery.

Kde môžete použiť plochý dizajn?

Plochý dizajn je obzvlášť dôležitý pre vývoj mobilných aplikácií a responzívny dizajn webových stránok. Plochý štýl sa navyše postupne presúva z digitálneho sveta do toho skutočného.

Prvky firemnej identity, rôzne druhy tlačených produktov v „plochej“ úprave, pri správnom prevedení vyzerajú veľmi originálne. Stojí za zmienku, že veľmi zaujímavým riešením je použitie plochého lineárneho štýlu v dizajnových projektoch.

Súdiac podľa aktuálnych trendov, flat štýl sa čoskoro stane štandardom nielen pre digitálnu sféru. Takže možno stojí za to zvážiť zmenu značky a vytvorenie projektov plochého dizajnu už teraz?


Ak sa vám tento článok páčil alebo bol užitočný, budeme radi, ak dostaneme malé povzbudenie v podobe odkazu na sociálnych sieťach. Ak to chcete urobiť, kliknite na tlačidlo akejkoľvek sociálnej siete umiestnenej nižšie.

Byt - dizajn (plochý dizajn) je obľúbený štýl v dizajne webových stránok a rozhraní, ako aj operačných systémov, ktorých charakteristickými znakmi sú 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 rôznych materiálov alebo pomocou rôznych metód. Príklady zahŕňajú keramiku zdobenú imitáciami nitov, ktoré pripomínajú podobné hrnce vyrobené z kovu, alebo počítačový kalendár, ktorý napodobňuje vzhľad zošitých strán papierového stolového kalendára (definícia z Wikipedia).

Popularizáciu plochého štýlu v dizajne uľahčilo vydanie operačného systému Windows 8 od Microsoftu v štýle Metro, ako aj iOS 7, v ktorom Apple tiež volí plochý štýl. Až potom sa začína skutočná éra plochého dizajnu. Čoskoro veľké vyhľadávacie služby a aplikácie – Google, Youtube – prechádzajú na Flat-dizajn, objavuje sa množstvo stránok, ktoré vo svojom dizajne využívajú princípy plochého štýlu. V posledných rokoch je plochý dizajn 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. Jednoduchosť použitia- 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ý dizajn vám umožní zamerať sa na dizajn, ktorý vás skutočne chytí.

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

Plochý dizajn vylučuje použitie prvkov, ktoré dodávajú objektu hĺbku a objem: tiene, prechody, svetlá, textúry, odrazy, animácie. Keď je objekt zobrazený, zobrazia sa iba jeho obrysy.

2 - Ikony a jednoduché predmety

Použitie plochých ikon a jednoslabičných tvarov s jasnými obrysmi a rovnakou farbou vám umožňuje čo najviac zjednodušiť dizajn a urobiť ho ľahším. Ovládanie je pre používateľa intuitívne a podporuje interakciu.

3 - Jednoduché písma v dizajnovom štýle

Veľká pozornosť sa venuje typografii a fontom v plochom dizajne. Kurzíva sa tu nepoužíva, písmo harmonicky zapadá do dizajnu webovej stránky, a to nielen v obsahu, ale aj v navigácii. Dokonca aj v typoch písma pre stránky sa podporuje minimalistický štýl.

4 - Hra farieb

Plochý dizajn obsahuje niekoľko základných farieb, ktoré vylučujú použitie plynulých prechodov a prechodov, 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ý predstavuje využitie jednoduchých prvkov a dvojrozmerného priestoru. Príkladom môže byť kvalitná fotografia, ktorá rozmazáva pozadie alebo je stmavená. To vám umožní vytvoriť hĺbku a perspektívu objektu.

Príklady plochého dizajnu

Na internete, a to aj v bieloruskom segmente, 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.

Slovo "plochý" v preklade z angličtiny znamená "plochý". Takzvaný Flat dizajn si od svojho vzniku drží svoju pozíciu už niekoľko rokov a zaujíma popredné miesto na trhu.

Kde to všetko začalo

Webdizajn sa od svojho vzniku mnohokrát zmenil. Od jednoduchých a nudných prvkov prešla dlhú cestu k trojrozmerným, konvexným a takmer hmotným. Dobre to možno vidieť na príklade zmeny vzhľadu operačného systému Windows. Vizuálna zložka sa vyvíja súbežne s vývojom techniky. Jeho nové trendy však smerujú skôr k návratu k minimalizmu a jednoduchosti.

Od skeuomorfizmu k plochému dizajnu

Štýl, ktorý predchádzal flatu, bol skeuomorfizmus. Je to hlavný dizajnový trend už veľmi dlho. Skeuomorfizmus je pseudo-volumetrický štýl, ktorého všetky prvky napodobňujú vzhľad skutočných predmetov (notebook, budík), využívajúc tiene, prirodzené textúry a iné. Jeho pozoruhodné príklady boli nájdené v skorých rozhraniach smartfónov. Svoju pozíciu začala strácať po roku 2010, keď dizajnéri veľkých spoločností začali hľadieť na zjednodušenie a pri vývoji používateľských rozhraní sa začali zbavovať hlavnej črty skeuomorfizmu – trojrozmernosti.

Vynikajúcim vizuálnym príkladom rozdielu v štýloch je fotografia nižšie. Obrázok vľavo je plochý dizajn, zatiaľ čo obrázok vpravo je skeuomorfizmus.

Charakteristika plochého štýlu

Byt je dvojrozmerný štýl. Nemá absolútne žiadne vizuálne efekty, ako sú plynulé farebné prechody, tiene alebo trojrozmerné textúry. Jedným slovom všetko, čo robí obraz trojrozmerným.

Hlavný informačný obsah je obsiahnutý v ikonách (ikona plochého dizajnu). Pri aplikáciách pre smartfóny by mali byť pre používateľa čo najprehľadnejšie. Pre webové stránky sú ikony hlavnými prvkami, ktoré odrážajú ich špecifickosť a informačné posolstvo. Spravidla sú prezentované vo forme jednoduchých geometrických útvarov, kruhu alebo štvorca, s charakteristickým konvenčným obrazom.

Pri vývoji Flat dizajnu sa pozornosť venuje aj farebnej schéme. Mal by byť monotónny, nemal by rušiť a nerozptyľovať používateľa. Najčastejšie sa používa jedna čistá farba a niekoľko kontrastných odtieňov. Mimochodom, existuje veľa internetových služieb so sadami farieb plochého dizajnu, ktoré môžete použiť skopírovaním hexadecimálnych kódov farieb, ktoré sa vám páčia.

Nemenej dôležitá je aj taká vec ako typografia (text). Celkovou jednoduchosťou vyniká najmä textová zložka. To znamená, že by mal byť čitateľný a nemal by byť v rozpore so všeobecným štýlom. To bude závisieť od úspešného výberu písma a jeho farby.

Príklady plochého dizajnu

Začnime tým, že ikony mnohých známych internetových zdrojov a sociálnych sietí sa zmenili plošším spôsobom. Nie je to tak dávno, čo giganti Google a YouTube zmenili svoj dizajn na plochý. Operačný systém Windows počnúc osmičkou úplne opustil všetky znaky hlasitosti v ikonách, čo v predchádzajúcich verziách potešilo oči niektorých používateľov, a začal sa držať Flat dizajnu. Nasledovali vývojári mobilných aplikácií pre iOS a Android.

Jednostránkové weby (vstupné stránky) vo veľkej miere využívajú výhody Flat dizajnu, pri ktorom rozhodujúcu úlohu nehrá honosný vzhľad, ale funkčnosť a čitateľnosť.

Evolúcia plochého dizajnu

Plochý dizajn bol spočiatku skutočne úplne plochý, čo vytváralo určité ťažkosti pre používateľov zvyknutých na vypuklé tlačidlá. Ak pri skeuomorfizme bola klikateľnosť tlačidiel okamžite viditeľná, potom v prvých variáciách plochého dizajnu nebolo vždy možné určiť interaktivitu prvkov na prvýkrát.

Potom, čo spoločnosť Microsoft vydala Windows 8, navrhnutý v plochom štýle, nie všetci používatelia boli schopní okamžite zistiť nové rozhranie a na ktoré ikony môžu kliknúť. Vzhľad prvkov nijako nenaznačoval možnú interakciu s nimi. Tento dizajn bol vhodnejší pre mobilné aplikácie, ktoré tento nápad prevzali. A Apple bol prvý, kto to urobil so systémom iOS 7.

Flat dizajn však nestojí na mieste a vyvíja sa smerom k väčšej komplexnosti. Dnes čoraz viac vyzerá ako poloplochý dizajn alebo, ako sa tiež nazýva, Flat 2.0. Začali sa v ňom objavovať hĺbkové efekty, tiene a prechody. Hĺbka plochého dizajnu je dosiahnutá usporiadaním prvkov v rôznych úrovniach alebo pod uhlom.

Nech je to akokoľvek, štýl je na vrchole popularity a je veľmi žiadaný. Ak teda plánujete navrhnúť svoj web, pokojne sa môžete rozhodnúť pre plochý dizajn. A ak potrebujete nejaké chýbajúce prvky pre váš web, tak na internete nájdete obrovské množstvo Free flat design UI prvkov (zadarmo na stiahnutie), ako sú ikony, fonty, šablóny a ďalšie potrebné komponenty používateľského rozhrania.

Výhody a nevýhody štýlu

V dnešnom uponáhľanom živote je takýto diskrétny a informatívny štýl nepochybne pohodlnejší ako jeho predchodca. Plochý dizajn má množstvo nepopierateľných výhod.

Najdôležitejšou vecou je snáď rýchle načítanie webových stránok. Webové stránky, ktoré používajú plochý dizajn, sa otvárajú oveľa rýchlejšie ako tie, ktoré sú preťažené animáciami a inými ťažkými predmetmi. Čas načítania je dôležitý najmä pre SEO optimalizáciu a propagáciu webu na vrchol.

Zjednodušený vzhľad uľahčuje čítanie textu a umožňuje vám sústrediť sa na hlavný obsah.

Dizajn pôsobí harmonicky a celistvo, čo pôsobí celkovo príjemným dojmom.

Nič nemôže byť dokonalé a Flat dizajn nie je výnimkou. Napriek všetkej zdanlivej jednoduchosti nie je vývoj skutočne úspešného plochého webového dizajnu taký jednoduchý. Existuje možnosť, že to bude nudné a neatraktívne. Alebo to, naopak, prehnať s dizajnom a zabudnúť na funkčnosť. Hlavnou úlohou pri vývoji Flat dizajnu je zachovať dokonalú rovnováhu medzi krásou a jednoduchosťou použitia.

Nevieme, či ste si to všimli alebo nie, ale v poslednom čase (najmä v poslednom roku) je vo webovom dizajne na celom svete jasný trend k zjednodušeniu, drsnému minimalizmu a vizuálnemu zjednodušeniu toho, s čím my ako používatelia komunikujeme deň. Jednoducho povedané, dizajn sa stal „plochým“: na rozdiel od konvexných ikon z čias rýchleho rastu sociálnych sietí a webu 2.0 nás teraz čoraz viac vítajú jednoduché ikony nových služieb. To všetko dostalo svoj názov - plochý dizajn. Nie byt, ale byt.

Apple včerajšou prezentáciou nového mobilného OS iOS 7 konečne potvrdil rýchly rast popularity tohto trendu, ktorý už tradične potešil časť svojich priaznivcov, no stretol sa aj s výraznou nespokojnosťou skúsených používateľov a dizajnérov. Čo sa deje? Aké je využitie tohto plochého dizajnu a naozaj ho svet potrebuje? Rozhodli sme sa obrátiť na odborníkov z Ukrajiny a zahraničia.

Požiadali sme ich, aby odpovedali na tri hlavné otázky:

  • prečo sa svet začal uberať smerom k plochému dizajnu na webe a mobile a čo to je;
  • čo to dá Apple a iOS 7;
  • ako to ovplyvní dizajnérov na jednej strane a používateľov na strane druhej.

Denis Sudilkovský, Kyjev
Špecialista na interakčný dizajn, výrobca Prodesign.in.ua

„Kyvadlový efekt“ pri predpovedaní budúcnosti sa prejavuje v tom, že ak existujú dva extrémy v nejakej otázke, ľudstvo sa bude kývať z jednej strany na druhú. To nepochybne platí pre dizajn interaktívnych systémov. Plochý a nezaujímavo primitívny web sa svojho času zmenil na objemné webové tlačidlá. Vizualizácie rozhrania dosiahli svoj vrchol realizmu a kyvadlo letí opačným smerom - flat&simple.

Čo z toho Apple získa? Zachová si svoje miesto v trende a státisíce komentárov, že ich iOS sa stáva veľmi podobným Androidu.

Dizajnéri sa budú musieť vyvíjať (a nežartujte o tom, kedy plochý dizajn príde do strojárstva a dá nám ploché autá :). Keď nie je žiadna dekorácia, všetka práca pozostáva z vytvárania nálady s obsahom pre konkrétny scenár s používateľom. Toto povolanie bude mať čoraz viac spoločného s režisérom ako s umelcom. Používatelia naopak získavajú nové skúsenosti a nové dojmy. Osobne som bol 4 roky prívržencom iPhonu, no túto jar som zmenil telefón na Android z jediného dôvodu – omrzela ma monotónna idealita rozhrania Apple.

Daniel Bruce, Štokholm
Senior Digital Creative, danielbruce.se

V prvom rade by som rád upozornil, že nemám rád výraz „plochý dizajn“. Väčšina grafického dizajnu po stáročia bola „plochá“. Tiež si myslím, že to obmedzuje vašu schopnosť nechať dizajn vyniknúť, keď máte na výber medzi plochým a niečím iným. Dizajn môže byť oveľa viac. Veselé, svetlé, tmavé, pozitívne, minimalistické – nazvať to môžete ako chcete. Ale dnes len zriedkakedy počujem, že by niekto považoval dizajn za niečo viac ako plochý alebo skleromorfný. Je to trochu smutné.

Prečo sa web a mobil pomaly posúvajú smerom k plochému dizajnu? Ja to vidím tak, že je to len trend. Nikdy som nevidel články o výhodách plochého dizajnu v používateľských rozhraniach a stále o tom nie som presvedčený. Jednoduchý a jasný dizajn - áno, ale to nie je to isté ako „ploché“. Pozrite sa napríklad na Google. Nerobia úplne ploché návrhy, ale – a ja zdieľam tento názor – stále vidia potrebu určitej hĺbky a variácií.

Bol som veľmi prekvapený, keď sa Microsoft pred niekoľkými rokmi vybral týmto smerom pre seba a prezentoval slávny štýl Metro. V skutočnosti použili grafický dizajn pre veľké nápisy, na ktoré sa ľudia pozerajú z určitej vzdialenosti a nikdy neinteragujú s malými obrazovkami s významným počtom prvkov. Vyzerajú pekne, ale majú dobrú použiteľnosť?

To, čo som včera večer videl od Apple, bola len chabá kópia niekoľkých zaujímavých návrhov, ktoré sa za posledný rok objavili na stránkach ako Dribbble a Behance. Nevidel som nič nové - okrem toho, že toto je ďaleko od toho istého "starého Apple" Steva Jobsa. Spoločnosť ukázala, že nie je na špici dizajnu mobilných rozhraní. Samozrejme, uvidíme fanúšikov, ktorí si osvoja všetky tieto biele dizajny a kreatívne gradienty v priebehu niekoľkých nasledujúcich mesiacov, ale nemyslím si, že tento aspekt bude mať taký vplyv ako nedávne odstávky spoločnosti Google. Ale na druhej strane, nech je to ako chce, Apple bol vždy udávačom trendov a inšpiráciou pre mnohých ľudí vrátane mňa.

Pokiaľ ide o bežných používateľov, majú radi svetlé farby.

Ivan Klimenko, Kyjev
návrhár mobilného rozhrania, 5tak.com

Do značnej miery o tejto situácii fascinujúcej plochý styling trochu filozofujem. Nie je to prvýkrát, čo sa dizajnéri začali zaujímať o minimalizmus a umelé materiály. Všetko prechádza.

Éra Bauhausu v 20. – 30. rokoch priniesla obrovský prínos do dizajnu, no napriek tomu tónová tesnosť a umelosť nedokázali odolať túžbe a vnútornému nutkaniu ľudí existovať obklopení prirodzenejšími vecami.

Potom v 60. rokoch každý začal obdivovať plast.

Nábytok, riad a dokonca aj oblečenie sú vyrobené z plastu. Zdalo sa, že ide o novú nádej ľudstva, ale opäť nie – ľudia sa veľmi rýchlo vrátili k prírodným formám či kópiám prírodných materiálov.

Drsný kontrast foriem a minimalistická grafika vždy vyjadrovali hromadenie vnútorných konfliktov v rámci spoločnosti. Dizajn je len zrkadlo, ktoré ukazuje náš vnútorný svet. Deje sa toho príliš veľa. Život sa veľmi zrýchľuje a my jednoducho nemáme čas nič premýšľať a zvažovať. Často nemáme čas len tak žiť.

Minimalizmus a všetok tento elektronický hardvér sú len krokom na ceste k niečomu prirodzenejšiemu a ľudskejšiemu. Viac ako len ďalší počítač. Dokonca som smutný, že Apple, ktorý sa vedel pozerať do hĺbky, už neexistuje.

Olesya Grichina, Kyjev
Dizajnér používateľského rozhrania v Componentix, twitter: elendiel

Myslím si, že dizajnérov do značnej miery ovplyvnilo veľké množstvo gadgetov s rôznymi veľkosťami obrazovky a rozlíšením - pre túto rozmanitosť je jednoduchšie vytvoriť dizajn bez textúr, zložitých tieňov, ktoré správne zohľadňujú osvetlenie atď. Začali uvažovať viac v smere „ako to urobiť pohodlnejšie pre používateľa“, než „ako krásne kresliť“. Obsah je hlavná vec a pri našej práci je dôležité prezentovať ho čo najlepšie.

Zdá sa mi, že za vonkajšími zmenami (ploché používateľské rozhranie, ikony) si najmä nevšimli vážne zmeny v jednoduchosti používania a ako prisahajú na túto tému. Keď skontrolujú, že to funguje, začne hovoriť: "Ach, aké pohodlné a prečo to neurobili skôr?" Dúfam, že to ovplyvní dizajnérov takým spôsobom, že budú venovať viac pozornosti použiteľnosti rozhrania, a nie textúram a tieňom. Na záver bude možné zákazníkom vysvetliť, že ide o trend :)

Myslím si, že plochý dizajn používateľov nijako zvlášť neovplyvní – ak im bude vyhovovať tvorba a konzumácia obsahu, nájde sa veľa spokojných ľudí. Ale ikony na domovskej obrazovke sú stále kyslé :)

Pavel Grozyan, Kyjev
Product Designer v spoločnosti MacPaw, grozyan

"Jablko! A-ha-ha, prestaň! - kričia dizajnéri. - Hurá, bolo to jednoduchšie. - užívatelia skandujú." Rozumiem obom uhlom pohľadu. Dnes, po prezentácii z WWDC2013, sa mnohí moji kolegovia postavili a povedali: "Ser na túto profesiu! Takú hlúposť môže teraz nakresliť každý. A tieto ikony za 30 dolárov?!" A na prvý pohľad majú pravdu, ale ak sa pozriete hlbšie, zistíte, že existujú tisíce predmetov, ktoré sa od seba dlho líšili iba v scenári použitia, potom v tvare, potom vo farbe a až potom. v umeleckých detailoch si pamätám časy, keď všetci títo chlapci na svojich profiloch na LinkedIn dnes nervózne kopírovali efekt bielych tieňov na webové stránky ako Apple Then Celá ich práca bola kopírovaním, keďže neexistoval originálny, jednotný a pohodlný vývojový koncept pre každého. Práve túto úlohu dnes rieši plochý dizajn nevymyslel a vznikol desať rokov pred digitálnou érou v oblasti vydavateľstva.

Ploché – to nie je na klikanie, je na klikanie, ťukanie, ťukanie. Nedá sa to nazvať plochým - absencia „hrubých“ textúr a tieňov na tlačidlách to robí dosť zjednodušeným a bez vizuálnej agresie. A bez prechodov pre tlačidlá sa nezaobídete. Podporujem tento trend. Ak to nebude narúšať kvalitu používateľského zážitku, bude sa s ním ľahšie žiť všetkým. V prvom rade užívateľovi. Po druhé, pre tvorcu: bude to jednoduchšie v technickej implementácii, pohodlnejšie na klikanie (podčiarknutie odkazov - ahoj) a multiplatformové - spojenie webu, mobilu a desktopu do jedného zážitku. Pre Apple je to nepochybne odvážny krok. A len oni o tom môžu rozhodnúť. Ich príbeh má desiatky potvrdení, takže je pravdepodobnejšie, že uspejú, ako naopak.



Tento článok je dostupný aj v nasledujúcich jazykoch: thajčina

  • Ďalšie

    ĎAKUJEME za veľmi užitočné informácie v článku. Všetko je prezentované veľmi jasne. Zdá sa, že na analýze fungovania obchodu eBay sa urobilo veľa práce

    • Ďakujem vám a ostatným pravidelným čitateľom môjho blogu. Bez vás by som nebol dostatočne motivovaný venovať veľa času údržbe tejto stránky. Môj mozog je štruktúrovaný takto: rád sa hrabem do hĺbky, systematizujem roztrúsené dáta, skúšam veci, ktoré ešte nikto nerobil alebo sa na ne nepozeral z tohto uhla. Je škoda, že naši krajania nemajú čas na nákupy na eBay kvôli kríze v Rusku. Nakupujú na Aliexpress z Číny, keďže tam je tovar oveľa lacnejší (často na úkor kvality). Ale online aukcie eBay, Amazon, ETSY jednoducho poskytnú Číňanom náskok v sortimente značkových predmetov, historických predmetov, ručne vyrábaných predmetov a rôzneho etnického tovaru.

      • Ďalšie

        Na vašich článkoch je cenný váš osobný postoj a rozbor témy. Nevzdávaj tento blog, chodím sem často. Takých by nás malo byť veľa. Pošli mi email Nedávno som dostal email s ponukou, že ma naučia obchodovať na Amazone a eBayi. A spomenul som si na vaše podrobné články o týchto odboroch. oblasť Znovu som si všetko prečítal a dospel som k záveru, že kurzy sú podvod. Na eBay som ešte nič nekúpil. Nie som z Ruska, ale z Kazachstanu (Almaty). Zatiaľ však nepotrebujeme žiadne ďalšie výdavky. Prajem vám veľa šťastia a zostaňte v bezpečí v Ázii.

  • Je tiež pekné, že pokusy eBay rusifikovať rozhranie pre používateľov z Ruska a krajín SNŠ začali prinášať ovocie. Veď drvivá väčšina občanov krajín bývalého ZSSR nemá silné znalosti cudzích jazykov. Nie viac ako 5% populácie hovorí anglicky. Medzi mladými je ich viac. Preto je aspoň rozhranie v ruštine - to je veľká pomoc pre online nakupovanie na tejto obchodnej platforme. eBay sa nevydal cestou svojho čínskeho náprotivku Aliexpress, kde sa vykonáva strojový (veľmi nemotorný a nezrozumiteľný, miestami vyvolávajúci smiech) preklad popisov produktov. Dúfam, že v pokročilejšom štádiu vývoja umelej inteligencie sa kvalitný strojový preklad z akéhokoľvek jazyka do akéhokoľvek v priebehu niekoľkých sekúnd stane realitou. Zatiaľ máme toto (profil jedného z predajcov na eBay s ruským rozhraním, ale anglickým popisom):
    https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png