RU EN

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

В последнее время появилось новое стилевое решение, которое принято называть flat (плоским) дизайном. Его основная задача ― упростить распознавание различных объектов и визуальное считывание. В нем не используется «жирная» и тяжелая графика, например, градиенты, текстуры, блики, тени. В плоском дизайне преобладает однородный контент, где все важные элементы выделяются с помощью цвета. При этом особое внимание уделяется модульной сетке и типографике. Их используют для акцентирования элементов и разделения модулей визуально.

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

Для того, чтобы вы могли легко и без усилий создать собственный flat дизайн, Вам необходимо узнать о его пяти основных характеристиках.

flat-03.jpg

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

Для создания интерфейсов в flat дизайне используются иконки и кнопки, которые являются простыми элементами. Кроме этого, дизайнеры привыкли использовать всевозможные фигурки (простые), например, квадраты, ромбы, круги, прямоугольники и другие. Благодаря этому каждая фигура превращается в отдельный и самостоятельный блок. В некоторых случаях края получают некую кривизну, но зачастую они ровные.

flat-04.jpg

2 принцип – минимум эффектов
Название «плоский» дизайн получил благодаря формам, которые в нем используются. Его основу составляют двумерные изображения. Основная задача дизайнера состоит в том, чтобы убрать ненужные и усложняющие элементы дизайна, такие как градиенты, рельефы, скосы, тени и другие элементы.

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

flat-02.jpg

3 принцип – акцентирование внимания на типографике
В плоском дизайне большое значение имеет типографика. Общий стиль дизайна должен совпадать со шрифтовым решением. Если в дизайне будут использоваться сложные шрифты, то рядом с плоским дизайном они будут смотреть нелепо. Лучше всего использовать легкочитаемые, простые и элегантные шрифты, например, гротески.

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

flat-01_02.png

4 принцип – акцентирование внимания на цвете
Цвет имеет большое значение для плоского дизайна. В нем используются более яркие и насыщенные цветовые палитры, которые объединяют разные оттенки. Как правило, в них преобладают два или три цвета, однако в некоторых случаях используется сразу шесть или восемь цветов. Каждый из них используется в равном процентном соотношении. Яркие цвета чаще всего используются без тонов и оттенков. Как правило, это 4 цвета цветового круга. Большой популярностью в настоящее время пользуются вторичные и первичные цвета. Кроме этого, во время создания flat дизайна при цветовом решении широко используются цвета ретро, например, синий, зеленый, фиолетовый и лососевый.

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

Чтобы легко сравнить эти дизайны возьмем новый iOS7 и старую стилистику iOS, в которой используется глянцевый дизайн. 


Прежняя стилистика iOS Новый iOS7
Типографика Стильный шрифт Helvetica Helvetica Аккуратные и тонкие шрифты Helvetica Neue Ultra Light
Цвета Более темные с преобладающим градиентом Яркие пастельные оттенки
Эффекты Скевоморфизм (трехмерность, реалистичные иконки) Минимализм и простота
Элементы Объемный интерфейс Схематичность, размер иконок увеличился по диагонали

«Почти плоский» дизайн

Это один из стилей плоского дизайна, который сегодня используют некоторые дизайнеры. В нем применяются техники flat дизайна, но некоторые элементы имеют свои эффекты. К примеру, кнопки могут содержать легкие тени и градиенты. Чаще всего дизайнеры используют один эффект к разным элементам. «Почти плоский» дизайн предпочитают использовать разработчики, ведь он обладает дополнительной глубиной и текстурой. Что касается пользователей, то им тоже нравится такой стиль дизайна. Он может способствовать взаимодействию и не выделяется резкостью. Однако этот дизайн имеет свои недостатки. Использование двух разных стилей мешает определить один свой стиль.