Принципы Flat (плоского) дизайна
http://workdone.ru/blog/wp-content/u...sign-cover.png
Плоский дизайн (Flat design) — сравнительно новый тренд, о котором не перестает говорить все дизайн сообщество.
Кому-то он нравится, кто-то абсолютно не может к нему привыкнуть и даже ненавидит.
Хороший дизайн в первую очередь должен решать бизнес задачу клиента, какими средствами это будет достигнуто вопрос вторичный. Если дизайнер выбрал как стиль или инструмент — «плоский дизайн» — да будет так! Но не стоит забывать что такая стилистика подходит далеко не для всех проектов.
Так давайте же проанализируем, о чем нужно не забывать если вы решили поддаться модной тенденции и поработать в стилистике «плоского дизайна».
Отсутствие эффектов.
http://workdone.ru/blog/wp-content/u...eenshot_15.png
http://workdone.ru/blog/wp-content/u...eenshot_14.png
В плоском дизайне чаще всего не используются такие эффекты как: тень, скосы, тиснение, градиенты или другие приемы, которые добавляют глубину и объем. Никаких 3D эффектов и передачи материальности в отличие от стилистического оппонента «Скеморфизма». Каждый элемент должен оставаться четким, будь то иконка, навигационная панель или рамка, кнопка и тд.
Плоская стилистика имеет ярко выраженный внешний вид без дополнительных возможностей и элементов. Она опирается на четкое чувство композиционной иерархии и размещения элементов. Данная структура помогает легче воспринимать дизайн и быть интуитивно понятной для каждого пользователя.
Простые элементы.
http://workdone.ru/blog/wp-content/u...-by-career.png
http://workdone.ru/blog/wp-content/u...ksana-Nick.jpg
Плоский дизайн часто использует простые элементы пользовательского интерфейса, такие как кнопки и иконки и тд. Дизайнеры при создании этих элементов интерфейса придерживаются простых фигур (прямоугольник, круг, квадрат и т.д.) — это позволяет каждой форме быть самостоятельной.
Но не следует путать простые элементы с простым дизайном, плоская дизайн концепция может быть столь же сложной, как любой стилистически иной вид дизайн концепции.
Акцент на типографике.
http://workdone.ru/blog/wp-content/u...reenshot_9.png
http://workdone.ru/blog/wp-content/u...reenshot_3.png
Так как плоский дизайн строится на элементах простой фо рмы без объема, типографика является чрезвы чайно важным элементом в плоской композиции.
Характер шрифта должен соответствовать общей схеме и композиции — слишком сложный шрифт может выглядеть странно и вычурно на чересчур упрощенной дизайн модели. Предпочтительно использовать простой шрифт без засечек, жирного или полужирного начертания. Текст должен гармонировать с простыми формами.
Шрифт должен быть вспомогательным инструментом, помогать пользователям взаимодействовать с нашим интерфейсом. Надписи на кнопках и других элементах не должны быть замысловатыми.
Акцент на цвете.
http://workdone.ru/blog/wp-content/u...9d69e6d53e.jpg
http://workdone.ru/blog/wp-content/u...ecec036f8d.jpg
Цвет немаловажная часть дизайна. Палитра плоского дизайна, часто намного ярче и красочнее, чем для других дизайн стилей. По сравнению с обычным дизайном, который фокусируется на 2-3 цветах, плоский дизайн может включать 6 или даже 8 цветовых оттенков.
Палитра, как правило, яркая — в основном чистые цвета. Тренд для плоского дизайна это ретро цвета — включая лососевый, фиолетовый, зеленый и синий.
Минималистский подход.
http://workdone.ru/blog/wp-content/u...eenshot_10.png
http://workdone.ru/blog/wp-content/u...9e395bc9d1.jpg
Плоский дизайн использует концепцию простоты, по-этому следует отказаться от навороченных, перегруженных композиций в дизайне интерфейса. Если же вы все таки хотите добавить какой-либо визуальный эффект или элемент, то следует выбирать простые картинки или фотографии. С этой задачей хорошо справились некоторые ритэйл сайты, такие например как Svpply.
«Почти» плоский дизайн
http://workdone.ru/blog/wp-content/u...9b18675a0a.png
http://workdone.ru/blog/wp-content/u...eenshot_12.png
Многие дизайнеры используют метод «почти» плоского дизайна. Это значит, что они придерживаются минималисткого подхода, но с добавлением некоторых эффектов. Кнопки, например, могут содержать градиент или тень. Обычно это один или два эффекта. Данный прием позволяет достичь некоторой гибкости, глубины и текстуры в вашем проекте.
Автор статьи: WorkDone
Оформил: Koteyka