Flat design или Назад к минимализму

Подписаться Редактировать статью

Слово "flat" в переводе с английского означает "плоский". С момента появления так называемый Flat design вот уже на протяжении нескольких лет продолжает удерживать свои позиции, занимая лидирующие места на рынке.

С чего все начиналось

Веб-дизайн со времен своего появления менялся большое количество раз. Он прошел длинный путь от простых и скучных элементов до трехмерных, выпуклых и почти материальных. Это легко можно заметить на примере изменения внешнего вида операционной системы Windows. Визуальная составляющая развивается параллельно с развитием технологий. Но ее новые тенденции указывают, скорее, на возврат к минимализму и простоте.

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

От скевоморфизма к Flat design

Стилем, предшествующим плоскому, был скевоморфизм. Он очень долгое время являлся основным трендом в дизайне. Скевоморфизм - это псевдообъемный стиль, все элементы которого имитируют внешний вид реальных предметов (записная книжка, будильник), с помощью теней, натуральных текстур и прочего. Его яркие примеры встречались в ранних интерфейсах смартфонов. Он начал утрачивать свои позиции после 2010 года, когда дизайнеры крупных компаний стали смотреть в сторону упрощения и при разработке пользовательских интерфейсов стали избавляться от главной черты скевоморфизма - трехмерности.

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

Флэт против скевоморфизма

Характерные черты плоского стиля

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

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

При разработке Flat-дизайна внимание уделяется и цветовой гамме. Она должна быть монотонна, не навязчивая и не отвлекающая пользователя. Чаще всего используется один чистый цвет и несколько контрастных оттенков. Кстати говоря, есть множество интернет-сервисов с наборами Flat design colors, которые можно использовать, скопировав hex-коды понравившихся цветов.

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

Не менее важна и такая вещь, как типографика (текст). За счет общей упрощенности текстовая составляющая особенно выделяется. Значит, она должна быть читабельной и не противоречить общей стилистике. Это будет зависеть от удачного выбора шрифта и его цвета.

Примеры Flat design

Начнем с того, что в плоскую сторону поменялись значки очень многих известных интернет-ресурсов и социальных сетей. Не так давно гиганты Google и YouTube тоже поменяли свое оформление на плоское. Операционная система Windows, начиная с восьмерки, полностью отказалась от всех признаков объема в иконках, которые радовали глаз некоторых пользователей в предыдущих версиях, и стала придерживаться Flat design. Ее примеру последовали и разработчики мобильных приложений для iOS и Android.

Широко используют преимущества Flat дизайна одностраничные сайты (лендинги), для которых решающую роль играет не вычурный внешний вид, а функционал и читабельность.

Flat design icons

Эволюция плоского дизайна

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

После того как компания Microsoft выпустила Windows 8, оформленную в плоском стиле, не все пользователи смогли сразу разобраться с новым интерфейсом и на какие иконки они могут кликнуть. Внешний вид элементов никак не указывал на возможное взаимодействие с ними. Такой дизайн был удобным, скорее, для мобильных приложений, которые и подхватили эту идею. И первыми это сделала компания Apple в оформлении iOS 7.

Пример Windows 8

Однако Flat design не стоит на месте и развивается в сторону усложнения. На сегодня он все чаще выглядит как полу-плоский дизайн или, как его еще называют, Flat 2.0. В нем стали появляться эффекты глубины, тени, градиенты. Глубина в плоском дизайне достигается путем расположения элементов на разном уровне или под углом.

Как бы там ни было, стиль на пике популярности и очень востребован. Так что, если вы планируете оформлять свой сайт, можете смело делать выбор в пользу Flat дизайна. А если вам необходимы какие-то недостающие элементы для вашего сайта, то в интернете вы сможете найти огромное количество Free flat design UI-элементов (бесплатные для скачивания), например иконки, шрифты, шаблоны и другие необходимые составляющие пользовательского интерфейса.

Плюсы и минусы стиля

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

К самому главному, пожалуй, относится быстрая загрузка веб-страниц. Сайты, использующие плоский дизайн, открываются гораздо быстрее, чем те, которые перегружены анимацией и другими тяжелыми объектами. Особенно важно время загрузки для SEO-оптимизации и продвижения сайта в топ.

Упрощенный внешний вид способствует читабельности текста и позволяет концентрировать внимание на основном контенте.

Оформление выглядит гармоничным и целостным, что создает общее приятное впечатление.

Ничто не может быть идеальным и Flat design не исключение. При всей своей кажущейся простоте разработать действительно удачный плоский веб-дизайн не так то просто. Есть вероятность сделать его скучным и непривлекательным. Или наоборот, перемудрить с оформлением и забыть о функциональности. Главная задача при разработке Flat-дизайна, это выдержать идеальный баланс между красотой и удобством пользования.


Шоу с крокодилами: китаец упал в бассейн с рептилиями
Окружающая среда
В Индии поезд врезался в толпу людей, более 50 погибших
Окружающая среда
Каких святых вспоминают 20 октября?
Праздники
Следите за изменениями: что произойдет, если вы начнете есть имбирь каждый день
Здоровое питание
Ломаченко - к Майки Гарсиа через Педрасу
Боевые искусства
7 головоломок, которые повысят ваш умственный потенциал
Психология