Цвет и слой. Эта пара элементов дизайна является движущей силой многих тенденций в этом году. Поскольку за последнее время мы не увидели ничего радикально нового наподобие плоского дизайна, появившегося несколько лет назад, или совсем недавно возникшего Material Design, элементы обоих стилей подталкивают дизайнеров исследовать новые приемы.
Оба выбора — цвета и наслоений, кажется, коренятся в этих больших тенденциях и используются в дизайн-конструкциях даже без абсолютно плоской или материальной эстетики. Вот несколько трендов в дизайне, которые мы заметили в этом месяце:
1. Множество наслоенных элементов.
Слоистые элементы и трехмерные эффекты являются обязательным методом в веб-пространстве 2D. Благодаря забавным техникам, введенным в первую очередь Material Design, слоистые элементы появляются в веб-дизайне всех типов.
Что особенно приятно, это придает веб-сайтам более реалистичный вид. Пользователь может почти протянуть руку и захватить элементы на экране. Это просто здорово! Хитрость заключается в том, что каждый слой должен выглядеть реально освещенным, благодаря чему все вместе они выглядят естественно.
Вот несколько способов, чтобы начать экспериментировать со слоями в ваших дизайн проектах:
-«Подъем» элементов от фона с помощью простой тени или анимации. Olle делает это с несколькими элементами в разных плоскостях, но все они притягиваются и вместе выглядят естественно.
— Позволить элементам пересекаться. Текст может пересекать пространство, занимаемое изображением.
— Параллакс-прокрутки представляют собой интересный способ для создания слоистых элементов (передний план, движущийся над фоном), не будучи при этом слишком подавляющим.
— Использовать геометрические фигуры, анимацию и изменение цвета для имитации глубины в дизайне. Пользователи должны чувствовать, что они могут практически нырнуть в визуальные эффекты. Яркий пример такого дизайна представляет Delete Agency.
— Создание слоев, выходящих за рамки холста, с элементами, которые также выходят за пределы фона или края экрана.
— Разрешить элементам держаться поверх текстурированного фона, чтобы создать иллюзию разделения между верхним слоем (который пользователи могут представить себе как нечто, к чему можно прикоснуться) и фоновым слоем.
2. Темные цветовые схемы
Некоторое время казалось, что каждый веб-сайт стремится к минималистскому идеалу, включая контраст на белом фоне. Эта тенденция меняется с появлением все более темных цветовых схем.
И это происходит не случайно. Хорошая темная цветовая схема может притягивать внимание и быть не столь резкой для глаз пользователей, как в случае с ярким белым цветом. С другой стороны, работать с темной эстетикой немного более хлопотно, особенно если текст небольшой или его нужно разместить на небольших экранах (поэтому важно обратить особое внимание на то, как элементы визуализации смотрятся на мобильных устройствах).
Элементы, которые выигрышно выделяются на темных цветовых схемах – это классное видео и анимация, даже если она едва распознаваема; жирные белые шрифты, пучки яркого цвета, акцентирующие призывы к действию или важную информацию и соответствующие общему настроению.
Помните также, что темный не всегда означает черный. Темные цветовые схемы могут быть укоренены в различных оттенках — от красных до синих и зеленых. В то время как черные варианты являются наиболее распространенными, важно выбрать насыщенный черный цвет, который создан из различных цветовых комбинаций. Плоский черный (или » K black «, как его называют дизайнеры-полиграфисты) оставит желать лучшего в дизайне сайта.
При работе с темными цветовыми схемами лучше проявлять особую осторожность, чтобы убедиться в наличии надлежащего контраста между элементами. Важно, чтобы цвет и изображение не терялись внутри темной природы дизайна. Хорошим вариантом для контраста может быть белый, или любой другой из основных цветов с большим количеством яркости или насыщенности. Не забудьте подумать также и о размере текстового контента, для обеспечения его читаемости.
3. Градиенты возвращаются
Градиент, один из методов избегания плоской конструкции, возвращается (причем, даже при использовании основных плоских шаблонов).
Градиенты работают, потому что они делают то, чего, по мнению многих, не хватало плоскому дизайну — создают и устанавливают глубину. Новое в работе с градиентами – то, что они не используются бесцельно или для имитации текстуры. Сегодняшняя тенденция фокусируется на ярких цветовых градиентах, которые подчеркивают общее содержание сайта — от полноэкранных фоновых градиентов, до практически всего, что используется в дизайне, включая даже жирные шрифты.
Дизайнеры возвращают использование градиента несколькими различными способами:
— Градиент «flat color» смешивает две дизайнерские идеи для смелого решения, как на примере веб-сайта для WPcrew.
— Двухцветные градиенты представляют собой интересный прием наложения, добавляя интерес к фотографиям, которым не хватает глубины фона.
— Хотя многие из этих градиентов обычно используются в большом масштабе, они неплохо работают и в более мелких элементах: например, кнопках, привлекая внимание к более значимому контенту.
Есть еще несколько правил использования градиентов, заслуживающих внимания (если вы не хотите, чтобы ваш дизайн выглядел так, как будто он выпрыгнул прямо из 2012 года!):
— Будьте осторожны с малыми градиентами. Использовать их в иконках по-прежнему не рекомендуется.
— Не перегружайте содержание. Наложение градиента на фото может быть замечательным (просто подумайте о некоторых крутых эффектах, которые регулярно использует Spotify), но фото все равно должны быть различимым.
— Смелые цветовые градиенты, как правило, имеют легкий, веселый вид. Убедитесь, что это сочетается с вашим контентом.
— Обратите внимание на цветовые сочетания и контраст, когда речь идет о читаемости. Градиент в сочетании с белым текстом может представлять собой проблему. Убедитесь в том, что она не возникает на разных устройствах, где фон смещается (проблемы читаемости иногда могут появляться там, где вы этого не ожидали).
ВЫВОД
Когда дело доходит до дизайна, нет большего удовольствия, чем работа с цветом. Использование разных цветов – замечательная тенденция, потому что этот элемент вы можете добавлять практически к любому стилю дизайна без полномасштабной переделки. То же самое можно сказать и о слоистых элементах. Это метод, который может быть применен к любому дизайну для придания ему более современного вида.
А какие тенденции нравятся (или не нравятся) вам? Пишите в комментариях, обсудим!
