Не знаємо, помітили ви чи ні, але останнім часом (особливо в останній рік) у веб-дизайні по всьому світу почала простежуватись чітка тенденція до спрощення, жорсткого мінімалізму та візуального полегшення того, з чим ми як користувачі взаємодіємо щодня. Простіше кажучи, дизайн став «плоським»: на відміну від опуклих іконок часів бурхливого зростання соціальних мереж та web 2.0, зараз нас все частіше зустрічають прості іконки нових сервісів. Все це отримало свою назву - flat design. Чи не квартирний, а плоский.

Своєю вчорашньою презентацією нової мобільної ОС, iOS 7, компанія Apple остаточно підтвердила стрімке зростання популярності цього напрямку, традиційно втішивши частину своїх фанатів, але й зустрівши значне невдоволення серед досвідчених користувачів та дизайнерів. У чому ж справа? У чому користь цього плоского дизайну і чи справді він потрібний світові? Ми вирішили звернутися до експертів з України та зарубіжжя.

Ми попросили їх відповісти на три головні питання:

• чому світ почав рухатися до flat design у інтернеті та мобайлі та що він являє собою;
• що це дасть Apple та iOS 7;
• як це вплине на дизайнерів – з одного боку, і на користувачів – з іншого.

Денис Судилковський, Київ
Interaction Design спеціаліст, продюсер Prodesign.in.ua

«Ефект маятника» у прогнозі майбутнього виявляється у тому, що й у якомусь питанні існують дві крайності - людство кидатиметься з одного боку на іншу. Безперечно, це справедливо і для дизайну інтерактивних систем. Плоский і нецікаво-примітивний Інтернет свого часу змінився на об'ємні вебдванольні кнопочки. Візуалізації інтерфейсів досягли свого апогею реалістичності і маятник летить у зворотний бік – flat&simple.

Що отримає від цього Apple? Збереже своє місце в тренді та сотні тисяч коментарів, що їх iOS стає дуже схожим на Android.

Дизайнерам доведеться еволюціонувати (і не жартувати на тему, коли flat-дизайн прийде в машинобудування і подарує нам плоскі автомобілі:). Коли немає декорацій – вся робота полягає у створенні настрою контентом для конкретного сценарію з користувачем. Ця професія матиме дедалі більше спільного з Режисером, ніж із Художником. Користувачі, навпаки - отримують новий досвід та нові враження. Особисто я 4 роки був адептом iPhone, але цієї весни змінив телефон на Android з єдиної причини - набридла однакова ідеальність яблучного інтерфейсу.

Daniel Bruce, Stockholm
Senior Digital Creative, danielbruce.se

Для початку, я хотів би відзначити, що я не люблю термін "плоский дизайн". Більшість графічного дизайну на протязі століть були «плоськими». Я також вважаю, що це обмежує вашу можливість зробити видатним дизайн, коли вибір стоїть між flat та чимось ще. Дизайн може бути чимось значно більшим, ніж це. Веселим, яскравим, темним, позитивним, мінімалістичним – його можна назвати як завгодно. Але сьогодні я рідко чую, щоб хтось вважав дизайн не лише плоским чи склероморфним. Це трохи сумно.

Чому веб та мобайл повільно йдуть до плоского дизайну? Я бачу це так – це просто тренд. Я ніколи не бачив статей про переваги плоского дизайну в інтерфейсах і досі не переконався в цьому. Простий і ясний дизайн - так, але це не те саме, що і «flat». Подивіться, наприклад, на Google. Вони не роблять повністю плоскі дизайни, вони – і я поділяю цей момент – досі бачать потребу у певній глибині та варіаціях.

Я був дуже здивований, коли Microsoft обрали для себе цей напрямок кілька років тому, презентувавши відомий стиль Metro. Фактично вони використовували графічний дизайн для великих знаків, на які люди дивляться з певних відстаней і ніколи не взаємодіють з маленькими екранами зі значною кількістю елементів. Це виглядає красиво, але чи мають вони гарне юзабіліті?

Те, що я побачив учора ввечері від Apple, було лише поганою копією кількох цікавих дизайнів, які з'являються на сайтах на кшталт Dribbble i Behance протягом останнього року. Я не побачив нічого нового – крім того, що це далеко не той самий «старий Apple» Стіва Джобса. Компанія показала, що вона не передовий дизайн мобільних інтерфейсів. Звичайно, ми побачимо і фанатів, які будуть успадковувати всі ці білі дизайни та креативні градієнти наступні кілька місяців, але я не думаю, що цей аспект буде настільки впливовим, як недавні припинення Google. Але з іншого боку, як би там не було, Apple завжди виступала законодавцем мод та натхненням для багатьох людей, включаючи мене.

Що стосується звичайних користувачів, то їм подобаються яскраві кольори.

Іван Клименко, Київ
дизайнер мобільних інтерфейсів, 5tak.com

Значною мірою я ставлюся до цієї ситуації із захопленням плоскими стилями трохи філософськи. Не вперше дизайнери захоплюються мінімалізмом та штучними матеріалами. Все проходить.

Епоха Баухауса 20-30-х років принесла величезний внесок у дизайн, але все ж таки тональна герметичність і штучність не витримала бажання і внутрішнього позову людей існувати в оточенні більш натуральних речей.

Потім у 60-х всі почали захоплюватись пластиком.

Меблі, посуд і навіть одяг - все із пластику. Здавалося, що це нова надія людства, але знову ні – люди дуже швидко повернулися до природних форм чи копій натуральних матеріалів.

Жорсткий контраст форм та мінімалістична графіка завжди виражали накопичення внутрішніх конфліктів усередині суспільства. Дизайн - лише дзеркало, яке показує наш внутрішній світ. Занадто багато всього довкола. Життя дуже прискорюється, і ми просто не маємо часу подумати і розглянути щось. У нас часто нема часу просто жити.

Мінімалістичність і всі ці електронні залізяки - лише крок на дорозі до чогось більш природного і людського. Більше, ніж просто ще один комп'ютер. Мені навіть шкода, що Apple, яка вміла дивитися глибоко, не існує.

Олеся Гричина, Київ
UI designer на Componentix, twitter: elendiel

Думаю, що на дизайнерів дуже вплинула велика кількість гаджетів з різними розмірами екрану та роздільною здатністю - для всієї цієї різноманітності легше створювати дизайн без текстур, складних тіней, які правильно враховують освітленість тощо. Більше стали думати в напрямку «як зручніше для користувача зробити», а не «як би красиво намалювати». Контент – це головне, і в нашій роботі важливо подати його якнайкраще.

Мені здається, що за зовнішніми змінами (flat UI, іконки) особливо і не помітили серйозних змін у зручності роботи, і того, як лаються на цю тему. Коли перевірять у роботі – почнеться «ооо, як зручно, і чомусь раніше так не зробили». На дизайнерів, сподіваюся, це вплине таким чином, що вони більше уваги приділятимуть зручності інтерфейсу, а не текстурам та тіням. Зрештою замовникам можна буде пояснювати, що це у тренді:)

На користувачів flat design, думаю, особливо не вплине – якщо їм зручно буде створювати та споживати контент, задоволених буде багато. Але іконки на домашньому екрані все ж таки кислотні:)

Павло Грозян, Київ
Product Designer на MacPaw, grozyan

«Apple! А-ха-ха, припини! – кричать дизайнери. - Ура, стало простіше. - скандують користувачі". Розумію обидві точки зору. Сьогодні, після презентації з WWDC2013, багато хто з моїх колег встав і сказав «та ну її, цю професію! Хто завгодно тепер таку дурість намалювати зможе. А ці іконки за $30?!». на перший погляд, вони мають рацію, але якщо копнути глибше, розумієш, що є тисячі предметів, які довгий час відрізнялися один від одного лише сценарієм використання, потім формою, потім кольором, і тільки потім – художніми деталями. хлопці в LinkedIn профілях яких сьогодні написано UX, UI Designer, нервово копіювали ефект білої тіні у літер.. Як у Apple. Потім світлі та легкі сайти. Як у Apple. копіюванні, оскільки не було оригінальної, єдиної та зручної для всіх концепції розвитку. Саме це завдання сьогодні вирішує flat design.Хоча мені здається неправильним називати його саме так.Добре, що не Microsoft його придумала, і він формувався протягом десяти років до цифрової ери , у сфері publishing.

Flat – він не для кліків, він для натискань, тапів, taps. Плоським його не назвеш - відсутність «товстих» текстур і тіней у кнопок робить його швидше спрощеним, і без візуальної агресії. І без градієнтів до кнопок не обійтись. Я підтримую цю тенденцію. Якщо це не заважатиме якості досвіду використання, але з ним усім буде легше жити. Насамперед користувачеві. По-друге - творцеві: буде простіше в технічній реалізації, зручніше для натискання (підкреслення посилань - привіт), і мультиплатформенно - поєднуючи веб, мобайл та декстоп в один єдиний досвід. Безперечно, для Apple це сміливий крок. І тільки вони можуть на нього наважитися. Їхня історія має десятки підтверджень, тому їм це швидше вдасться, ніж навпаки.

Від автора:Вітаю вас, друзі! Сьогодні ми поговоримо про те, що таке flat design або плоский дизайн сайтів. Цей термін вже давно підкорив серця веб-дизайнерів і впевнено тримається в тренді досі. Найбільші компанії (Google, YouTube, Microsoft, Apple Inc. тощо) використовують його для оформлення своїх сайтів та додатків. Ви ще не в секті прихильників плоского дизайну сайту? Тоді ми йдемо до вас!

Як ви думаєте, у чому причина такої шаленої популярності flat дизайну? Відповім вам у двох словах: він реально працює! У цій статті я поясню вам, що це за стиль, розповім про його плюси та мінуси, покажу вам кілька чудових прикладів flat дизайну сайтів, які напевно надихнуть вас на подвиги. Тож поїхали!

Все починалося зі скевоморфізму

Для тих, хто не в курсі, скевоморфізм – це не лайливе слово, а ще один стиль веб-дизайну. Flat design часто представляють як протилежність скевоморфізму, що, як на мене, не зовсім правильно. Це швидше його спрощення, ніж антагонізм.

До 2010 року скевоморфізм був домінуючим стилем у дизайні інтерфейсів. Він відображав елементи такими, якими вони виглядали насправді, активно використовуючи текстури, тіні, відображення та інші атрибути тривимірного зображення. Особливо намагалася в цьому плані компанія Apple, яка ретельно змалювала більшість софтверних об'єктів із реально існуючих предметів.

Незабаром псевдовипуклі іконки перестали залучати більшість користувачів та веб-розробників, що започаткувало еру flat дизайну сайтів. Світ дійшов висновку, що всі декоративні елементи потрібно прибрати, а залишити лише те, з чим зручно взаємодіяти кінцевому користувачеві.

«Кращий дизайн - це якнайменше дизайну»

Як у воду дивився Дітер Рамс - відомий промисловий дизайнер, який виступає проти нав'язливого дизайну, анімаційних ефектів тощо. У червні 2013 року Apple Inc. представила революційну iOS 7, яка отримала всі атрибути у стилі flat веб-дизайну. Однак, площина далеко не відразу «перемогла» реалізм та обсяг.

Користувачі довго не могли забути магію Стіва Джобса та іконки, які хочеться лизнути. Багато хто навіть розпрощався з «убогою сімкою» і перейшов на «променистий Android». Підливало олію у вогонь і велику кількість багів, що були присутні в iOS 7, і білястий, напівпрозорий дизайн з паралаксом та анімацією у вигляді «соплі» при відкритті додатків.

Ті ж, хто змирився з неминучою реальністю і залишився з «яблучною» операційною системою, зрештою, усвідомили, що плоский веб-дизайн не тільки цікаво виглядає, але й привносить у всі додатки порядок і єдиний візуальний стиль.

Плюси та мінуси плоского дизайну

До переваг використання цього стилю можна віднести:

ясність композиції та лаконічність візуальних засобів. Чуйний інтерфейс у стилі «нічого зайвого», завдяки чому користувачі швидше усвідомлюють, що до них хотіли донести;

акцент на гарній друкарні. Контент на першому місці, що надзвичайно важливо у сучасному достатку інформації;

менший розмір веб-сторінок та прискорення роботи сайту за рахунок мінімальної кількості візуальних ефектів. Особливо це корисно при створенні адаптивних версій, адже чим простіше форми, тим легше їх відображати на невеликих екранах мобільних пристроїв.

Є у flat веб-дизайну і недоліки:

обмеження фантазії веб-дизайнера спрощеними кольорами, типографікою та іконографікою. Тому ризик створити нудний та невиразний сайт вищий;

відсутність тривимірності та тіней іноді не дозволяє зрозуміти, клікабельний елемент чи ні;

відсутність конкретних закріплених правил.

Якщо ви вирішили використати цей стиль на вашому сайті, вітаю - це свідчить про те, що ви дбаєте про зручність користувачів і йдете в ногу з часом. Якщо ви починаєте кар'єру веб-дизайнера і не знаєте, як правильно використовувати плоский дизайн, щоб ваш сайт виглядав актуальним, але не примітивним, скористайтеся наступними порадами:

Забудьте про «цегляні стіни» та яскраві фони. В плоскому веб-дизайні прийнято використовувати прості, гладкі, неяскраві зображення для фону.

Жодних градієнтів, об'ємних іконок, анімованих переходів та інших спецефектів. Все це ускладнить ваш сайт і принесе суєту - воно вам потрібне?

Використовуйте плоскі іконки з чіткими контурами, що додають зручності та функціональності.

Використовуйте яскраву, соковиту палітру кольорів. Зараз у тренді тону сонячного спектру: світлі жовті, рожеві та зелені. Головне, не переборщіть - квітів на сторінці має бути не більше 3-х.

Зосередьтеся на типографіці. У плоскому дизайні перевага надається яскравим, оригінальним написам, які створюють заклик до дії та забезпечують зручну навігацію сайтом. Тут також важливо не перестаратися. Забудьте про «рукописні» та інші химерні шрифти. Для виділення заголовків можна використовувати великі літери.

Не соромтеся використовувати різноманітні геометричні форми. Квадрати, кола, лінії та інші фігури допоможуть не лише покращити структуру веб-сайту, але й створити чітку ієрархію та розділити контент. Користувачі це оцінять, повірте.

Максимально спростіть навігаційне меню та інші елементи сайту. Як кнопки використовуйте звичайні прямокутники без тіней і підсвічування.

Таким чином, за минулі роки сайти з плоским дизайном стали стандартом, прийнятим усіма. Подивіться більшість сучасних сайтів - вони плоскі «до мозку кісток».

Насамкінець, наведу обіцяні приклади вдалого flat дизайну, які можуть послужити вам натхненням для створення власних шедеврів.

1. Сайт http://dunked.com.

Популярний майданчик для публікації портфоліо, орієнтований на представників різноманітних творчих професій. Мінімалістичний плоский веб-дизайн викликає відчуття надійного та зрозумілого сервісу, що не відволікає зайвими спецефектами.

2. Інтерфейс Microsoft.

Microsoft – це одна з компаній, яка зробила flat style таким популярним. Може, пам'ятаєте плеєр Zune – конкурента iPod, який Microsoft випустила в середині 2000-х? Так от дизайн цього продукту різко відрізнявся від більшості додатків того часу, багато в чому завдяки великій друкарні, плоским іконкам, великим і яскравим формам.

Цей інтерфейс, який назвали Metro, пізніше перекочував на персональні комп'ютери (Windows 8), інтерфейс Xbox 360 та інші програмні продукти Mircosoft.

3. Сайт http://www.vox.com.

Ну що, надихнулися? Геть псевдореалістичну 3D естетику!

На цьому все. Підписуйтесь, ділитеся нашими статтями з друзями у соціальних мережах. Високих вам конверсій!

Слово "flat" у перекладі з англійської означає "плоский". З моменту появи так званий Flat design вже протягом кількох років продовжує утримувати свої позиції, займаючи лідируючі місця на ринку.

З чого все починалося

Веб-дизайн з часів своєї появи змінювався багато разів. Він пройшов довгий шлях від простих та нудних елементів до тривимірних, опуклих та майже матеріальних. Це легко можна побачити на прикладі зміни зовнішнього вигляду операційної системи Windows. Візуальна складова розвивається паралельно із розвитком технологій. Але її нові тенденції вказують, швидше, на повернення до мінімалізму та простоти.

Від скевоморфізму до Flat design

Стилем, що передував плоскому, був скевоморфізм. Він дуже довгий час був основним трендом у дизайні. Скевоморфізм - це псевдооб'ємний стиль, всі елементи якого імітують зовнішній вигляд реальних предметів (записник, будильник), за допомогою тіней, натуральних текстур та іншого. Його яскраві приклади зустрічалися у ранніх інтерфейсах смартфонів. Він почав втрачати свої позиції після 2010 року, коли дизайнери великих компаній стали дивитися у бік спрощення і при розробці інтерфейсів почали позбавлятися головної риси скевоморфізму - тривимірності.

Відмінним наочним прикладом відмінності стилів, може бути фото, наведене нижче. Зображення ліворуч є плоским дизайном, а праворуч - скевоморфізмом.

Характерні риси плоского стилю

Flat є двомірним стилем. У ньому відсутні візуальні ефекти, такі як плавні переходи кольору, тіні, об'ємні текстури. Одним словом, все, що робить зображення тривимірним.

Основну інформативність несуть у собі іконки (Flat design icon). Вони повинні бути максимально зрозумілі користувачеві, якщо йдеться про програми для смартфонів. Для сайтів іконки є головними елементами, що відображають його специфіку та інформаційний посил. Як правило, вони представлені у вигляді простих геометричних фігур, кола або квадрата з характерним умовним зображенням.

При розробці Flat-дизайну увага приділяється і кольоровій гамі. Вона має бути монотонна, не нав'язлива і не відволікає користувача. Найчастіше використовується один чистий колір та кілька контрастних відтінків. До речі кажучи, є безліч інтернет-сервісів з наборами Flat design colors, які можна використовувати, скопіювавши hex-коди квітів, що сподобалися.

Не менш важлива і така річ, як друкарня (текст). За рахунок загальної спрощеності текстова складова особливо вирізняється. Отже, вона має бути читабельною та не суперечити загальній стилістиці. Це залежатиме від вдалого вибору шрифту та його кольору.

Приклади Flat design

Почнемо з того, що в пласку сторону змінилися значки багатьох відомих інтернет-ресурсів і соціальних мереж. Нещодавно гіганти Google і YouTube теж змінили своє оформлення на плоске. Операційна система Windows, починаючи з вісімки, повністю відмовилася від усіх ознак обсягу в іконках, які тішили око деяких користувачів у попередніх версіях, і почала дотримуватися Flat design. Її приклад наслідували і розробники мобільних додатків для iOS та Android.

Широко використовують переваги Flat дизайну односторінкові сайти (лендинги), для яких вирішальну роль відіграє не химерний зовнішній вигляд, а функціонал та читабельність.

Еволюція плоского дизайну

Спочатку Flat design справді був абсолютно плоским, що створювало певні труднощі для користувачів, які звикли до опуклих кнопок. Якщо в скевоморфізм клікабельність кнопок була відразу помітна, то в перших варіаціях плоского дизайну визначити інтерактивність елементів не завжди виходило з першого разу.

Після того, як компанія Microsoft випустила Windows 8, оформлену в плоскому стилі, не всі користувачі змогли відразу розібратися з новим інтерфейсом і на які іконки можуть клікнути. Зовнішній вигляд елементів ніяк не вказував на можливу взаємодію з ними. Такий дизайн був зручним, скоріше, для мобільних додатків, які й підхопили цю ідею. І першими це зробила компанія Apple у оформленні iOS 7.

Однак Flat design не стоїть на місці та розвивається у бік ускладнення. На сьогодні він все частіше виглядає як напівплоский дизайн або, як його ще називають, Flat 2.0. У ньому почали з'являтися ефекти глибини, тіні, градієнти. Глибина у плоскому дизайні досягається шляхом розташування елементів на різному рівні або під кутом.

Як би там не було, стиль на піку популярності і дуже популярний. Отже, якщо ви плануєте оформляти свій сайт, можете сміливо робити вибір на користь Flat дизайну. А якщо вам необхідні якісь елементи для вашого сайту, то в інтернеті ви зможете знайти величезну кількість Free flat design UI-елементів (безкоштовні для скачування), наприклад іконки, шрифти, шаблони та інші необхідні складові інтерфейсу користувача.

Плюси та мінуси стилю

Поза всякими сумнівами, у сучасному стрімкому ритмі життя такий непомітний інформативний стиль зручніший, ніж його попередник. Flat дизайн має низку незаперечних переваг.

Найголовніше, мабуть, відноситься швидке завантаження веб-сторінок. Сайти, що використовують плоский дизайн, відкриваються набагато швидше, ніж ті, що перевантажені анімацією та іншими важкими об'єктами. Особливо важливим є час завантаження для SEO-оптимізації та просування сайту в топ.

Спрощений зовнішній вигляд сприяє читабельності тексту та дозволяє концентрувати увагу на основному контенті.

Оформлення виглядає гармонійним та цілісним, що створює загальне приємне враження.

Ніщо не може бути ідеальним і Flat design не є винятком. При всій своїй простоті розробити дійсно вдалий плоский веб-дизайн не так то просто. Є можливість зробити його нудним і непривабливим. Або навпаки, перемудрити з оформленням та забути про функціональність. Головне завдання при розробці Flat-дизайну, це витримати ідеальний баланс між красою та зручністю користування.

Плоский дизайн став останнім часом популярним для додатків та веб-сайтів. Не можна сказати, що всім всім подобається цей стиль, але точно він не підходить для всіх додатків і сайтів. Якщо багато переваг плоскої конструкції, такі як простота та мінімалізм, що спрощує використання. Для деяких програм плоский дизайн може бути дуже простим. Тобто варто додати трохи тіней або градієнтів, щоб виглядало краще.

Багато хто стверджує, що плоский веб-дизайн є ефективним дизайном. Мовляв, це спосіб зробити проект максимально user-friendly. Ось кілька прикладів, що надихають, плоских проектів з плоским дизайном. Ця добірка з різних портфоліо чудово допомагає зрозуміти плоскі конструкції, які справді працюють.

The ISSLand

January Creative

Minimal Monkey

Що таке дизайн?

• Плоский дизайн сфокусовано на користувачеві
• Плоский дизайн простий
• Плоский дизайн - менше градієнтів
• Плоский дизайн включає прямі лінії і квадратні кути.
• Зазвичай використовують сильний колірний контраст
• У плоскому дизайні немає тіней, скосів, текстур або того, що виглядає 3D
• Плоский дизайн існує лише у 2 вимірах
• Плоский дизайн - тренд до простоти та мінімалізму.
• Плоский дизайн – не використовуйте додаткові ефекти
• Немає жодних доповнень
• Плоский дизайн - менше кнопок і «обваження»
• Плоский дизайн означає фокус на шрифтах
• Колірні комбінації, контрастні кольори та цікаві колірні варіації – важливі складові плоского дизайну
• Плоский дизайн - один із багатьох дизайнів. Він підходить для одних проектів, а інших немає.

Що не є плоским дизайном

• Плоский дизайн це не скевоморфізм чи дизайн, який емулює форму та контури «реальності».
• Плоский дизайн не включає блискучі кнопки
• Плоский дизайн не включає прикраси
• У плоскому дизайні не знайдете традиційні уявлення про «глибину»
• Плоский дизайн не підходить усім проектам

Плоский дизайн просто ефективна конструкція?

Деякі вважають, плоский дизайн сам по собі є ефективною конструкцією. Тобто він спрощує використання сайтів та додатків, дозволяє знайти необхідну інформацію, не відволікаючись. Звичайно ж, плоский дизайн не єдиний, який спрощує пошук інормації. Якщо все зроблено добре, проблем у користувачів не виникне. Проект має бути простим і легким для тих, хто може його використовувати. Хтось вважає за краще використовувати плоский дизайн, а хтось інший стиль дизайну.

Елементи для плоского дизайну

Подобається плаский дизайн? Ось кілька елементів, які можна використовувати для «плоського» проекту

Flat Icon Pack

Сьогодні ми зосередимо нашу увагу на одному з найпопулярніших напрямків сучасного графічного дизайну, який має назву флет дизайн.

Відомий художник Едгар Дега одного разу сказав: "Мистецтво - це не те, що ви бачите, але те, що ви даєте побачити іншим". Це стосується і графічного дизайну, який також можна визначити як мистецтво, яке вирішує конкретне завдання. Графічний дизайн здатний змінювати настрій та повідомлення через найменші зміни форм та відтінків, літер та інтервалів. Тенденції у цій сфері стали невід'ємною частиною повсякденного життя, оскільки вони впливають на процес прийняття рішень та вирішення проблем представлення сучасного продукту, а також формують смаки користувачів.

Сьогодні термін «флет дизайн» застосовується у графіку для безлічі цілей та завдань, які мають загальні стилістичні особливості. Флет дизайн - це напрям, який знайшов безліч проявів у сфері діджитал продуктів завдяки лаконічному використанню візуальних виразних засобів.

В даний час цей термін широко використовується як протилежність «багатому дизайну» через гармонійну простоту, взяту за основу цього підходу. Найбільш помітною особливістю, яка дала назву цьому напрямку, є застосування плоских (flat) двовимірних візуальних деталей, на противагу високореалістичним та деталізованим скевоморфним зображенням. Плоский дизайн активно розвивається протягом останніх років, охоплюючи все більше і більше областей графічного дизайну, які знаходять широке та різноманітне застосування в галузі цифрового дизайну для веб- та мобільних інтерфейсів. Такий підхід можна розглядати як стиль, що сприяє підвищенню зручності використання та візуальної гармонії інтерфейсів користувача.

Історія флет дизайну

Очевидно, що флет дизайн не з'явився із повітря. Його початком зазвичай вважають швейцарський стиль. Швейцарський стиль, також відомий під назвою International Typographic Style або коротше — міжнародний стиль, — це напрям, який зародився в 1920-х роках, але був зустрінутий дуже критично, а потім отримав яскраве переродження в графічному дизайні в Швейцарії 1940-50-х років, що стали міцною основою графічного дизайну середини 20 століття у всьому світі. Основоположниками цього творчого руху були Йозеф Мюллер-Брокманн та Армін Хофманн.

Відповідно до сайту Design Is History, короткий опис ключових особливостей цього стилю полягає в наступному: «…стиль орієнтувався на простоту, легко читання та об'єктивність. Спадщина цього стилю – використання шрифтів без засічок, сіток та асиметричних макетів. Також виділяється і фотографії як засобу візуальної комунікації. Основні впливові роботи було розроблено як плакати, які вважалися найефективнішим засобом надання інформації».

Плакати, представлені як приклади, показують, що прихильникам цього стилю подобалися прості форми, сміливі і строгі шрифти з високим ступенем легкочитання, геометричні комбінації деталей, плоскі ілюстрації та чітка візуальна ієрархія. Швейцарський дизайн швидко ставав все більш популярним у різних країнах і здобув нове життя у мистецтві початку XXI століття.

Хоча цей стиль отримав безліч виразів у галузі візуального дизайну для друку: плакати, штампи, листівки, обкладинки книг, журнали і т. д., він значно розширив свої горизонти в епоху цифрового дизайну, особливо в області дизайну інтерфейсів.

Веб-сайти та мобільні програми відкрили дивовижну та плідну перспективу для цього мінімалістичного та функціонального підходу до дизайнерських рішень. Стиль отримав назву «флет дизайн», який став одразу популярним і розпочав новий напрямок у графічному дизайні.

Перший крок до підвищення популярності плоского UI у цифрових продуктах було зроблено Microsoft, цей рух розпочався на початку 2000-х років і широко розвинувся у продуктах 2010 року, зокрема у розробці мобільних інтерфейсів для Windows Phone 7. Основні особливості плоского дизайну, такі як інтуїтивні прості форми, жирна чітка друкарня, яскраві контрастні кольори, довгі тіні, відсутність складних деталей та текстур добре прижилися. Наступний стрибок популярності флет дизайну відбувся у 2013 році, коли Apple випустила iOS 7 на основі принципів плоскої графіки як основу для зручних інтуїтивно зрозумілих інтерфейсів. Можна також сказати, що деякі ключові принципи плоского дизайну знайшли своє вираження у Material Design від Google.

Так основними особливостями плоского дизайну стали:

• простота форм та елементів;
• мінімалізм;
• функціональність;
• жирна і добре читається друкарня;
• чітка та строга візуальна ієрархія;
• комбінація контрастних кольорів, що забезпечує швидке візуальне сприйняття;
• уникнення текстур, градієнтів та складних форм;
• застосування принципів сіток, геометричний підхід та візуальний баланс.

Переваги плоского дизайну

Фдат дизайн має ряд переваг, що визначили його популярність та різноманітність у цифровому дизайні. Серед найбільш значних:

• зручність читання;
• чітка візуальна ієрархія за допомогою форм, кольорів та шрифтів;
• ефективна організація швидкої та інтуїтивно зрозумілої навігації у веб- та мобільних інтерфейсах;
• легка масштабованість для адаптивного дизайну;
• незначне навантаження для цифрової системи.

З усім вищесказаним, плоский дизайн забезпечує широке поле для творчого пошуку та стилістичних концепцій.

Флет дизайн - застосування на практиці

Різноманітність напрямків дизайну, доступних та розвиваються в наші дні, добре підходять для застосування флет дизайну через його гнучкість та художню свободу.

Навіть на початковому етапі планування загального компонування, логіки та переходів можуть застосовуватися принципи плоского дизайну. Інструменти та програмне забезпечення для цифрового дизайну, що використовуються на цьому вирішальному етапі, дозволяють дизайнерам уявити клієнтам та команді єдину схему всіх екранів програм або веб-сторінок, і навіть ця базова схема вже має ключові риси візуалізації, типові для плоского дизайну. На цьому етапі він ідеально підходить для швидкого та ефективного відображення дизайнерських рішень, наведених у простій монохромній схемі.

Дизайн інтерфейсу користувача

Інтерфейси користувача стали широким і сприятливим полем для плоского дизайну. Він знайшов свій розвиток як в абстрактних концепціях взаємодії з користувачем, так і в багатьох оригінальних інтерфейсів, іконках, елементів інтерфейсу та ілюстраціях.

Подібні ілюстрації забезпечують додаткову підтримку цифрових продуктів і, як правило, складніші з точки зору деталізації та задоволення естетичних потреб користувачів, водночас миттєво встановлюючи зв'язок із конкретною темою.

Друковані ілюстрації

Різноманітність цілей сучасного флет дизайну та його зростаюча популярність у цифрових продуктах також вплинули і на інші галузі дизайну, зокрема на дизайн для друкованих виробів, таких як плакати та обкладинки книг, з яких цей підхід брав колись свій початок.

Брендінг

В наші дні бренд-дизайн також успішно застосовує принципи плоского дизайну завдяки його гнучкості, оскільки багато продуктів представлені на пристроях або отримують цифрову підтримку в Інтернеті. Флет дизайн у брендингу часто представлений у логотипах та іконках додатків.

Всі факти та переваги, згадані про флет дизайн, безумовно, не означають, що цей стиль переміг інші підходи до дизайну. Будь-який стиль та напрямок дизайну мають свої переваги та недоліки. Тим не менш, плоский дизайн відкрив нові перспективи, особливо в області користувальницьких рішень, які представляють гармонійний баланс краси та функціональності.