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

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

The ISSLand

January Creative

Minimal Monkey

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

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

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

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

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

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

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

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

Flat Icon Pack

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

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

Популяризації плоского стилю у дизайні сприяв випуск операційної системи Windows 8 від Microsoft у стилі Metro, а також iOS 7, у якому компанія Appleтакож вибирає плоский стиль. Саме після цього і настає справжня епоха плоского дизайну. Незабаром на Flat-design переходять і великі пошукові послугиі програми - Google, Youtube, з'являється безліч сайтів, що використовують принципи плоского стилю у своєму дизайні. В останні роки дизайн у стилі flat є лідером у світових тенденціях дизайну сайтів.

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

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

5 принципів плоского дизайну сайтів

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

1 - Використання двомірних об'єктів

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

2 - Іконки та прості об'єкти

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

3 - Прості шрифти в стилі дизайну

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

4 - Гра кольору

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

5 - Мінімалізм

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

Існує таке поняття як майже плоский дизайн. Це одна з концепцій плоского дизайну, яка полягає у використанні простих елементівта двомірного простору. Прикладом цього може бути якісне фото, яке розмивається на задньому фоніабо затемняється. Це дозволяє створити глибину та перспективу об'єкта.

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

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

Не знаємо, помітили ви чи ні, але останнім часом (особливо в останній рік) у веб-дизайні по всьому світу почала простежуватись чітка тенденція до спрощення, жорсткого мінімалізму та візуального полегшення того, з чим ми як користувачі взаємодіємо щодня. Простіше кажучи, дизайн став «плоським»: на відміну від опуклих іконок часів бурхливого зростання соціальних мережі 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. Потім насичені текстурами та реалізмом інтерфейси. Як у Apple. Вся їхня робота полягала в копіюванні, оскільки не було оригінальної, єдиної та зручної для всіх концепції розвитку. Саме це завдання сьогодні вирішує flat design. Хоча мені здається неправильним називати його саме так. Добре, що не Microsoft його вигадала, і він формувався протягом десяти років до цифрової ери, у сфері publishing.

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

Останнім часом величезну популярність набув специфічний стиль в оформленні сайтів та інтерфейсів користувача, який через стилізацію його елементів отримав назву Flat.

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

Сьогодні все більше і більше дизайнерів застосовують цю тенденцію у своїх роботах, проте особливу популярність стиль Flat отримав із поширенням сучасних мобільних операційних систем Windows Phoneі iOS 7, оскільки вони є послідовниками цієї тенденції, хоч і не дотримуються ним повністю.

Наша компанія вже має досвід у створенні сайтів у стилі Flat, і ми з радістю допоможемо вам у створенні flat сайту!

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

Нижче ми проаналізуємо та наведемо приклади деяких сайтів, які використовують flat-стилістику.

1. Забираємо всі ефекти

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

У flat-дизайні ви не зустрінете елементи, які намагаються виглядати реалістично (скевоморфізм), 3D-анімацію, реалістичні піктограми тощо. Однак при цьому сам дизайн намагається залишатися аналогічним до традиційного, але тепер на передній план виходять написи, кнопки та навігація.

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

2. Використовуємо прості елементи

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

3. Зробимо акцент на друкарні

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

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

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

4. Привернем увагу кольором

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

Найбільш популярними кольорами є первинні та вторинні кольори. Тобто основні кольори (cyan, magenta, yellow, black) та отримані на основі їх змішування. Також дуже часто в кольоровому рішенні при створенні плоского дизайну використовуються ретро кольори, такі, як salmon (лососевий), purple (фіолетовий) і т.д.

5. Мінімалізм

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

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

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

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

Знайомство з flat дизайном

Російською мовою flat design перекладається як «плоский дизайн», а він став абсолютним фаворитом після презентації Apple ОС iOS. На чільне місце став мінімалістичний підхід до дизайну для юзабіліті. Ставка зроблена на комфорт користувача. Це яскраво виражений протест проти «сквеформізму» (візуалізація об'єктів, як у реальності). Вибір упав більш спрощені і навіть прості в естетичному плані рішення. Користувачі, що втомилися від реалістичних візуалізацій, із захопленням зустріли цей напрямок, і все більше веб-проектів переходять саме до цього формату.

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

"Плоский" дизайн не прагне передавати обсяги, тому в основі лежить двовимірна візуалізація. Це означає, що не побачите ні тіней, ні рефлексів, ні відблисків з текстурами (виняток становлять довгі тіні). Тільки передача контурів і нічого більше.

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

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

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

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

Плоский чи майже плоский? Шукаємо компроміс!

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

Також трендом 2017 року став Semi Flat Design – напівплоский дизайн. Під впливом Material Design він став трохи більш просторовим. З'являються легкі тіні, які роблять дизайн напівплоським. Флет-дизайн актуальний і сьогодні, за рахунок тіней він став глибшим і складнішим, але основна концепція не порушується.