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

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

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

Чому дизайн став плоским?

Природно, що дизайнери в пошуках нового шляху для вираження своїх ідей часто вдаються до забутого старому. Наприклад, в стилі Bauhaus ми знаходимо витоки сучасного напрямку Flat web-design. В 30-е роки це напрямок проголосило рівність між естетикою і конструктивизмом, реализовав усi в мінімалістичному дизайні. Поліпшити взаємодія з людиною, розставити акценти з допомогою кольори і геометрії – ось головна ідея цього напрямку.

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

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

1. Позбавлення від графічних ефектів. 

Плоский дизайн – це двумерная основа, яка позбавлена всякого роду прикрас.
Тіні, скосы, градієнт, відблиски – всього цього ви не побачите в плоскому дизайні.
Навпаки, основу для дизайну в стилі Flat задають строгість форм, їх яскраво виражені обриси в геометричній ієрархії.
Такий підхід вельми вдалий при створенні дизайну під маленьке Дозвіл екрану (наприклад, для мобільних телефонів і планшетів, з яких надходить усi більше трафіку в мережі Інтернет). Зверніть увага, як з допомогою інтуїтивно зрозумілою графіки вирішується задача дизайну навігаційної системи. 

2. Прості элементы 

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

3. Акцент на цвет 

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

Використання чистого кольори

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

На сайті flatuicolors.com наведені самі популярні кольори для плоского дизайну.

Яскравість

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

Колір в стилі ретро

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

dribbble.com:

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

4. Типографика

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

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

З зарубками або без?

При виборі гарнітури першим справою слід вирішити, який тип шрифту використовувати. Дизайнери рекомендують для основного тексту використовувати шрифт без зарубок, типу Arial або Helvectica. Такий шрифт в достатньою міру простий і суворий, він добре читається на однотонному тлі. 

Ще одна тенденція нинішнього року – це використання нестандартних шрифтів для виділення інформації.

Використовуйте одну гарнітуру свого дизайну. Шрифтовое достаток порушить принцип плоского дизайну – простоту.

Поєднання кольори і шрифту

Колір і шрифт повинні працювати разом, вирішувати одну задачу, а не протистояти один одному.

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

Більше простору

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

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

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

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