КУРС ПО FLAT DESIGN
Серия видеоуроков расскажет об основных принципах плоского дизайна и научит эффективным техникам его создания на примере разработки веб-сайта в фотошопе.
Шесть главных законов плоского дизайна:
● АКЦЕНТ НА ТИПОГРАФИКЕ
Так как элементы в плоском дизайне имеют простой характер, чрезвычайно важной является типографика.
Шрифты должны соответствовать общей схеме дизайна — чрезмерно украшенные шрифты могут смотреться странно возле супер-простого дизайна. Шрифты должны быть смелыми, простыми и легкопонятными. Можно рассмотреть сочетание простого шрифта без засечек в небольшим количеством дополнений, внесенных в настройки, с каким-либо новым шрифтом, который будет восприниматься как арт-элемент. Но с использованием специальных шрифтов нужно быть очень осторожным.
Шрифты должны помогать дизайну быть более простым и понятным, а кнопки и другие элементы должны служить только для повышения интерактивности.
● «НЕТ» ДОБАВЛЕНИЮ ЭЛЕМЕНТОВ
Flat дизайн получил свое название от форм, которые он использует. В его основу ложится двумерный стиль, который уже изначально является плоским. Идея заключается в том, чтобы убрать дополнительные элементы -тени, скосы, рельефы, градиенты и другие инструменты, с помощью которых можно добавить глубину. Каждый элемент или блок, начиная от картинок и заканчивая элементами навигации, например кнопками, достаточно жесткий и не имеет дополнительных элементов на краях, например, теней.
В плоском дизайне вы не увидите никаких техник, что позволяют элементам быть более реалистичными, и которые мы так активно использовали в дизайна с эффектами 3d. Составляющие, что были использованы в других дизайнах, остаются аналогичными, но уже на передний план выходят кнопки, текст и инструменты навигации,а не текстуры и бэкграунды.
Так что же делает его рабочим? Плоский дизайн имеет ярко выраженный внешний вид без каких-либо дополнений. Он базируется на четкой иерархии элементов в дизайне и размещении элементов, которое поспособствует к более легкому взаимодействию между пользователями. Хотя сегодня все больше и больше сайтов начинают использовать плоский дизайн, нельзя недооценивать также его роль в мобильных приложениях. При достаточно небольших экранах и небольшом количеством кнопок и опций использование плоского дизайна может быть выигрышным вариантом.
● ПРОСТЫЕ ЭЛЕМЕНТЫ
В плоском дизайне для создания интерфейсов используются простые элементы, такие как кнопки и иконки. Дизайнеры часто используют простые фигуры, такие как прямоугольники, круги, квадраты, и позволяют каждой форме быть самостоятельным объектом. Края могут иметь ровную форму, либо быть с некой кривизной.
Каждый элемент пользовательского интерфейса должен быть легким по восприятию и кликабельности. Взаимодействие с такими элементами должно интуитивно быть понятным для пользователей.
К дополнению к простому стилю с целью упрощения пользования мы можем увидеть смелое цветовое решение. Но здесь очень важно не путать простые элементы и простой дизайн — плоские концепции дизайна могут быть достаточно сложными, как в принципе и любой другой вид дизайна.
● АКЦЕНТ НА ЦВЕТЕ
Очень большую роль в плоском дизайне играет цвет. Такие цветовые палитры более яркие и красочные по сравнению с другими сайтами.
Цветовые палитры в плоском дизайне часто объединяют различные оттенки. В большинстве случаев в таких палитрах фигурирует два-три цвета, но иногда такой дизайн может включать 6-8 цветов, которые используются в равной степени.
Цвета, как правило, яркие — используются в основном чистые цвета цветового круга — без оттенков и тонов. Очень популярны первичные и вторичные цвета. Также очень часто в цветовом решении при создании плоского дизайна используются цвета ретро, такие, как salmon (лососевый), purple (фиолетовый), green (зеленый) и blue (синий) — тоже достаточно популярны.
● МИНИМАЛИСТИЧНЫЙ ПОДХОД
Плоский дизайн по своей натуре прост, и он хорошо сочетается с минималистичным подходом.
В общем дизайне сайта нужно избегать слишком больших наворотов. Конечно, простых цветов и текста может быть недостаточно. Поэтому, если вы хотите добавить визуальных эффектов, нужно выбирать простые фотографии. Некоторые сайты с предложением о продаже розничных товаров используют плоский дизайн для того, чтобы разместить свои продукты на простом не отвлекающем фоне. (Нужно отметить, что фотографии имеют некоторые природную глубину, но в целом она вписывается в общую плоскость дизайна)
● «ПОЧТИ ПЛОСКИЙ» ДИЗАЙН
Также можно выделить такой стиль некоторых дизайнов, как «почти плоский» дизайн. В «почти плоском» дизайне используются техники плоского дизайна, но к некоторым элементам добавляются дополнительные эффекты. Например, кнопки содержат дополнительные градиенты или тени. Дизайнеры, как правило, выбирают какой-либо эффект и применяют ко всем элементам «почти плоского» дизайна.
Такой дизайн нравится разработчикам, так как он имеет дополнительные текстуры и глубину, а пользователям — так как является не таким резким и может способствовать взаимодействию. Но с другой стороны, такой дизайн имеет и негативные отзывы, так как использования двух стилей может помешать определению собственного стиля.
ПРИМЕРЫ ПЛОСКОГО ДИЗАЙНА:
http://builtbybuffalo.com/
http://untypicalmarketing.com/
http://sputnikcreative.com/#!/logbook
http://mathieurobert.fr/
http://www.alchemy-digital.co.uk/
http://sapmobileconsumertrends.com/
http://www.fostr.com/
https://freeholdr.com/
http://www.poisoncenterapp.com/
http://tribalmedia.co.uk/
http://madebyfieldwork.com/
http://fixedagency.com/
http://www.teamgeek.co.za/
http://everylastdrop.co.uk/
http://combadi.com/
http://www.soleilnoir.net/believein/#/soleilnoir
http://seanhalpin.io/
http://www.caramelbudgie.com/
http://januarycreative.com/