Як розпочати своє портфоліо флет дизайн. Флет-дизайн: минуле, сьогодення та майбутнє. Що не є плоским дизайном

Що таке флет-дизайн? Даний напрямок дизайну є одним із найбільш обговорюваних в інтернеті. Якщо коротко, то флет-дизайн це гранично спрощений стиль, коріння якого сягає мінімалізму. Але це не зовсім мінімалізм, тому що даний стиль може приймати різні форми в залежності від вимог до дизайну. Щоб краще зрозуміти, що ж являє собою плоский (flat) дизайн, краще піти від зворотного та визначити, чим він точно не є.

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

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

Вперше про плоский дизайн заговорили у 2012-2013 роках, коли цей стиль лише з'явився. Тренд був дуже помітний і наробив багато шуму, оскільки одним із перших, хто почав розвивати цей напрямок, була компанія Microsoft. Вихід Windows 8 з новим інтерфейсом назавжди змінив дизайн і значною мірою визначив вектор розвитку Інтернету, принаймні його візуальної складової.

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

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

Цілком можливо, що домінуючий протягом кількох останніх років тренд на граничне спрощення зміниться чимось іншим. Деякі передумови для цього існують – наприклад, напрямок Material Design, створений дизайнерами корпорації Google.

СУМІСНІСТЬ З АДАПТИВНИМ ДИЗАЙНОМ

Відмова Microsoft і Apple від скевоморфізму в дизайні інтерфейсів викликала великі наслідки. Новий стиль був практично відразу прийнятий як новий підхід до UX. З тих пір флет-дизайн перетворився на домінуючий тренд, який залишається актуальним. Сьогодні плоскі елементи зустрічаються повсюдно, ми бачимо їх на сайтах, додатках і на дисплеях різних пристроїв.

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

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

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

ГНУЧКА ПЛАТФОРМА

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

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

ЧИТАННА ДРУКАРНЯ

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

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

МІНУСИ

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

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

Візьмемо для прикладу цей сайт. Які елементи у ньому є інтерактивними. Всі? Або лише деякі? Не зрозуміло. З'ясувати це можна лише «методом тику», але це вже зайві рухи, що небажано.

ВТРАТИ ІНДИВІДУАЛЬНОСТІ

Для будь-якого бренду, бізнесу чи дизайн-проекту величезне значення має унікальність. Будь то сайт, програма, буклет, плакат або візитка – дизайн повинен бути оригінальним і добре впізнаваним.

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

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

ПОГОНЯ ЗА МОДОЙ

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

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

Перед нами роботи дизайнерів Олександра Лотоцького та Еріка Мальмскельда. Це типові приклади використання довгих тіней у дизайні. Зараз цим нікого не здивуєш, але свого часу, а обидві роботи були створені ще в 2013 році, коли флет-дизайн тільки-но входив у моду, новий візуальний стиль був дуже цікавим і привабливим. В результаті з'явилася така кількість схожих іконок, що сьогодні використання тіней є шаблонним та нецікавим рішенням. Колись було модно, але вже ні. Тіні як тіні. Сенсу в них немає жодного, жодної корисної функції вони не виконують.

Невдалий вибір шрифтів

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

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

FLAT 2.0

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

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

Але поступово дизайнери почали уникати надто простих рішень, намагаючись знайти якесь компромісне рішення між флетом і скевоморфізмом. В результаті з'явився новий стиль, який деякі дизайнери називають Flat 2.0. В елементах дизайну поступово почали з'являтися тіні, градієнти і навіть легкі майже непомітні структури. Плоскому дизайну явно не вистачає глибини, і дизайнери почали використовувати гібридні підходи. Наприклад, візуально розташовувати елементи різних рівнях, експериментувати з відтінками і тінями. Іншим часто використовуваним прикладом гібридного підходу є використання у флеті як значків і плоских ілюстрацій «під вектор», а й фотографій.

Дуже багато для просування Flat 2.0 зробила компанія Google. Гайдлайн Material Design – це спроба створити нову візуальну мову, що поєднує плоскі та об'ємні елементи дизайну. Рекомендації Google дуже докладні і слідувати їм легко та просто. При цьому Google не наполягає на жорсткому дотриманні всіх правил, викладених в гайдлайні - дизайнери можуть експериментувати, створюючи свої оригінальні проекти, де можуть поєднуватися різні елементи.

ВИСНОВОК

Сьогодні Flat 2.0 знаходиться на стадії формування, але вже цілком помітний напрямок, в якому розвиватиметься цей стиль. Суттєвих змін не передбачається – законодавці мод Google, Apple та Microsoft не збираються відмовлятися від флету. Якщо зміни і будуть, то незначні – з'являться нові підходи, хтось вигадає цікаву «фішку», продовжаться спроби взяти найкраще зі скевоморфізму. Але в глобальному сенсі чекати чогось дійсно нового не доводиться - плоский дизайн тренд довготривалий і змістити його з здобутих позицій зможе тільки стиль, що найкраще відповідає новим технологіям, яких поки що немає.

Порівняно нещодавно популярним став такий напрямок дизайну як FLAT – дизайн або плоский дизайн.

Користувачі Windows 8 і пізніших версій вже знайомі з FLAT - дизайном, тому що перше, що зустрічає їх при завантаженні системи - це такий екран.

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

FLAT – дизайн має такі особливості:

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

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

Гармонія та . У дизайні використовується обмежена кількість кольорів. Ось приклад популярної палітри FLAT – дизайну.

Використання креативних інформаційних ікон.

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

Свого часу найпопулярнішим напрямком у web-дизайні був Web 2.0. Тепер його місце зайняв FLAT-дизайн. Мода має звичай повертатися до добре забутого старого, щоб зробити з нього нове. Хто знає, коли вийде з моди FLAT – дизайн, а поки що насолоджуйтесь простотою, гармонією та інформативністю поточного віяння. До речі, плоский дизайн вже був популярний у 80-ті роки, але тоді це було зумовлено технічними особливостями, неможливістю відображення тіней та градієнтів. Нині вже більшість провідних IT компанії перейшли на Flat — дизайн.

Ну що ж, і ми будемо підлаштовуватися під мінливий світ. У наступній статті я покажу вам, як за допомогою простих фігур у Photoshop можна створити іконки у стилі FLAT – дизайну.

Якщо мої публікації зацікавили вас, то пропоную бути в курсі останніх оновлень на сайті сайт.

(Visited 2 384 times, 1 visits today)

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

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

Трохи історії

Перш ніж ми почнемо міркувати про відмінності між двома найпопулярнішими напрямками в дизайні, з'ясуємо, звідки вони беруть свій початок. Існує думка, що матеріал дизайн створений на основі плоских. Звідки ж у такому разі взявся плоский дизайн?

Скевоморфізм

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

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

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

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

Плоский дизайн

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

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

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

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

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

Результати юзабіліті тесту Windows 8, проведеного NN Group, показали, що користувачі важко відрізняли клікабельні об'єкти від неклікабельних. Користувачі скаржилися, що об'єкти, які виглядають статичні, насправді виявлялися клікабельними. В результаті основна місія компанії - допомогти користувачам коректно інтерпретувати систему, була провалена.

Ще одна компанія, яка часто асоціюється з плоским дизайном – це Apple. Вони відійшли від елементів скевоморфічного дизайну у мобільній операційній системі iOS 7, випущеній у 2013 році. На цей раз перехід був сприйнятий трохи краще, в основному через те, що компанія не намагалася повністю оновити концепцію інтерфейсу користувача, а просто додала кілька змін у бік плоского дизайну. Це дало користувачам можливість користуватися продуктом, покладаючись на свій попередній досвід роботи з операційними системами та веб-сайтами.

Матеріал дизайн

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

Називаючи матеріал дизайн "фірмовим", я маю на увазі, що він має цілий набір чітко прописаних рекомендацій і принципів, яким слідує кожен поважаючий себе дизайнер. Цілком очевидно, навіщо Google представив свій Material Design: виникла необхідність уніфікувати дизайн, щоб програми виглядали однотипно на будь-якому з багатьох пристроїв Android.

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

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

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

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

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

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

Має власника (компанія Google). Тому будь-які питання та пропозиції щодо покращення мають бути адресовані з власнику.
Через наявність осі Z на процес створення дизайну може знадобитися більше часу.
Анімовані елементи потребують більше ресурсів.
Неухильне дотримання посібників може обмежувати оригінальність дизайну.

Підведемо підсумок

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

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

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

Якщо ви знайшли помилку - виділіть її та натисніть Ctrl+Enter! Для зв'язку з нами можна використовувати .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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