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

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

С каждым днем интернет-пространство наполняется креативными новинками, плоским дизайном. Можно сказать, что плоский дизайн — это отсутствие эффектов, но, как обычно, все несколько сложнее, чем могло показаться вначале. В этой статье мы попытаемся выделить основные черты, которые характерны этому направлению в дизайне, а также дать несколько практических советов по его созданию.

Почему дизайн стал плоским?

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

Бытует мнение, что о плоском дизайне заговорили только после выхода IOS7. Но на самом деле новый дизайн, основанный на старой тенденции, пришел из Google и Windows 8, которые оставили позади градиент и тени, превратившись в почти плоский стиль.

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

1. Избавление от графических эффектов. 

Плоский дизайн – это двумерная основа, которая лишена всякого рода украшений.
Тени, скосы, градиент, блики – всего этого вы не увидите в плоском дизайне.
Напротив, основу для дизайна в стиле Flat задают строгость форм, их ярко выраженные очертания в геометрической иерархии.
Такой подход весьма удачен при создании дизайна под маленькое разрешение экрана (например, для мобильных телефонов и планшетов, с которых поступает все больше трафика в сети Интернет). Обратите внимание, как с помощью интуитивно понятной графики решается задача дизайна навигационной системы. 

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

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

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

При минималистичной графике и отсутствии эффектов на первый план выходит цвет. Привычно дизайнеры использовали до трех основных цветов, сейчас этот диапазон увеличился больше чем в два раза. Давайте рассмотрим этот вопрос более подробно. Итак, основные тенденции цветовой гаммы плоского дизайна:

Использование чистого цвета

Для того чтобы грамотно сочетать несколько чистых цветов, необходимо выбирать их одной насыщенности и яркости.

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

Яркость

Еще один популярный тренд, который стал неотъемлемой частью плоского дизайна. Популярные цвета: синий, фиолетовый и зеленый.

Цвет в стиле ретро

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

dribbble.com:

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

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

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

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

С засечками или без?

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

Еще одна тенденция нынешнего года – это использование нестандартных шрифтов для выделения информации.

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

Сочетание цвета и шрифта

Цвет и шрифт должны работать вместе, решать одну задачу, а не противостоять друг другу.

Гармонично впишите типографику в общий дизайн. Посмотрите, как это делают гуру дизайна:

Больше пространства

Используйте пустое пространство для привлечения внимания к словам.

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

Благодаря простоте восприятия плоский дизайн хорошо работает с небольшими экранами, поэтому отлично подходит для мобильных приложений. С одной стороны может показаться, что реализовать такое направление значительно проще. Но на самом деле отсутствие эффектов компенсируется повышенным требованием к проработке деталей, ведь все внимание будет обращено на них.

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