Флэт-дизайн возник, как альтернатива некогда популярному скевоморфизму, и в соответствии с названием создавался полностью упрощённым и минималистичным. За последние несколько лет, однако, он развивался, подстраивался под меняющиеся вкусы пользователей и продвигал технологии вперёд.
Флэт в своём текущем состоянии, которое Райан Аллен называет «Флэт 2.0», одновременно и похож, и отличается от своего предшественника.
Источник изображения: iPhone iOS 6 и iPhone 6 Apps.
Вдохновлённый швейцарским дизайном и художественным минимализмом, флэт объединил приёмы из разных областей и эпох, собрав нечто совершенно уникальное.
В этой статье мы рассмотрим 7 наиболее узнаваемых признаков последней версии флэта.
Каждый из них имеет свое назначение и может использоваться как сам по себе, так и совместно с другими, для усиления эффекта «флэтовости». Но прежде чем вы начнёте «уплощать» ваш дизайн, важно обдумать все плюсы и минусы стиля.
Преимущества и недостатки флэта
Мы провели небольшой анализ плюсов и минусов флэта. Взгляните на него, чтобы понять, поможет ли флэт вашему сайту.
Преимущества:
- подходит для адаптива;
- прост в понимании и освоении навигации для пользователей;
- структурированный макет и чёткая картинка создают ощущение визуальной зрелости дизайна;
- быстрая загрузка страниц;
- простая типографика повышает читаемость.
Источник изображения: Christmas with Joy.
Недостатки:
- трудно сделать флэт действительно хорошо;
- упрощённый стиль может ослабить «указатели» (signifiers);
- высокий риск показаться скучным;
- недостаток индивидуальности из-за популярности стиля.
Теперь, когда вы определились с тем, что нужно вашему стилю, посмотрим на 7 техник применения флэта.
Тени
Как часть Флэта 2.0, тени добавляют глубину и сложность. Применение теней не жертвует минималистичными элементами, которые делают флэт привлекательным. Как утверждает Web Design Trends 2015 — 2016, шейдинг — новое веяние в флэт-дизайне, поскольку его ранние версии избегали подобных изысков.
Источник изображения: Duffy & Partners.
Если в последние годы мы наблюдали тренд удлинённых и нуарных теней, то позднее тренд сместился в сторону большей утончённости. На примере из Duffy & Partners (см. выше) тень и отражение продукта легки и ненавязчивы, но всё же добавляют некоторый визуальный интерес.
Динамичные цвета
Чтобы восполнить недостаток визуальных эффектов, флэт берёт на вооружение динамические цвета, особенно их яркие оттенки. Живые и возбуждающие цвета контрастируют друг с другом и не дают странице выглядеть уныло даже с небольшим количеством элементов .
Источник изображения: CSS Conference EU.
Яркие цвета во флэте с самого начала были его одной из самых отличительных черт. На сайте CSS Conference применяется традиционная флэт-палитра с мягкими и весёлыми цветами. Поскольку выбор цвета — это ключевой момент, на сайте Flat UI Colors вы найдёте самые эффективные цветовые паттерны.
Простая типографика
Что характерно, типографика во флэте остаётся простой и читаемой — всё благодаря шрифтам без засечек и единой ширине штрихов.
Источник изображения: Intercom.
На примере от Intercom, шрифт не привлекает к себе внимания, и слова легко читаются. Это перемещает фокус на достаточно интересную графику.
Благодаря акценту на читаемость флэт-типографика проникает даже в другие, менее минималистичные стили дизайна. Мы наблюдаем тот же плоский стиль текста в огромных заголовках (hero headers), сайтах с крупной типографикой или в чисто-шрифтовых сайтах.
Кнопки-призраки
Один из самых трендовых элементов в веб-дизайне за последнее время — кнопки-призраки. Они одинаково хорошо смотрятся на фонах с большими фотографиями (photo hero backgrounds) в окружении флэт-дизайна. Кроме того эти кнопки не привлекает к себе много внимания, но они по прежнему заметны, как кнопки.
Источник изображения: SCEATT.
В обычной типографике кнопки зачастую отвлекают на себя слишком много внимания. А минимальный отвлекающий фактор кнопок-призраков соответствует классической воздушности флэта и делает эти кнопки одной из наиболее характерных черт флэта. В отличие от других особенностей флэта в нашем списке, кнопку-призрак можно легко применить почти в любом стиле.
Минимализм
Флэт-дизайн и минимализм идут рука об руку, вместе разделяя взгляды на юзабилити и простоту.
Источник изображения: Pelican Books.
Несмотря на кажущуюся лёгкость, минимализм труднее реализовать, чем кажется. Меньшее количество элементов подразумевает более бережное к ним отношение.
Иконкографика
Имея только существенные элементы на экране, иконкам требуется быть более детализированными и своеобразными, чтобы дизайн оставался интересным.
Источник изображения: Stash Flat Icons.
Размер иконок растёт, чтобы вместить больше деталей, и таким образом иконки становятся опорным художественным элементом самовыражения сайта. Обратите внимание, как на сайте Stash Flat Icons каждая иконка сама по себе является концентрированным флэтом. В них есть яркие цвета, мултипликационный дизайн и достаточное количество деталей.
Акцент цветами
Традиционные яркие цветовые палитры флэта полностью никогда не выйдут из моды. Однако, стиль, похоже, смещается в сторону более стандартных цветовых гамм. В этом случае яркие цвета применяются только в акцентах.
Источник изображения: C2s.
Контраст ярких цветов с тусклым фоном и окружающими элементами позволяет дизайнеру лучше контролировать то, что должно быть замечено, а что нет. Этот приём особенно хорошо работает с базовыми цветами, в частности чёрным и белым, что выделяет яркие цвета ещё сильнее.
Заключение
Черты флэта постепенно проникают в другие стили веб-дизайна, и работы в смешанных стилях становятся такими же распространёнными, как и «чистокровный флэт». Не бойтесь использовать только одну или две из выше перечисленных черт, они не превратят ваш дизайн сразу в настоящий флэт. Эти приёмы могут часто успешно выполнять свои задачи и сами по себе, а также могут послужить дополнительным вдохновением для вашего собственного более инновационного стиля.
Чтобы узнать больше о новых техниках флэт-дизайна и ещё 9 последних трендах веб-дизайна, посмотрите нашу бесплатную 185-страничную электронную книгу Web Design Book of Trends 2015 — 2016. Вы найдёте 166 подобранных вручную примеров с сайтов компаний Adidas, Intercom, Apple, Google, Versace и других. В качестве ещё одного дизайн-помощника в книге есть специально отобранный список из 100 полезных ресурсов.