Флэт превращается в «Почти Флэт»

Флэт-дизайн возник, как альтернатива некогда популярному скевоморфизму, и в соответствии с названием создавался полностью упрощённым и минималистичным. За последние несколько лет, однако, он развивался, подстраивался под меняющиеся вкусы пользователей и продвигал технологии вперёд.

Флэт в своём текущем состоянии, которое Райан Аллен называет «Флэт 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 полезных ресурсов.