Вы обращали внимание когда-нибудь на все те суперские узоры, фоны, идеи, возникавшие в веб-дизайне за прошедший (почти уже) год? Дизайнеры экспериментируют с красивыми, экстравагантными темными шаблонами, сочетают с насыщенным белым цветом, да еще умудряются добавлять неброскую анимацию. И знаете что? Это работает. Да, работает и привлекает посетителей; работает и представляет информацию в удобном виде; работает и способствует получению наград в веб-дизайне и прочая, и прочая.
Если рассмотреть анимацию детальнее, то она включает в себя все, начиная от простых движений, что самостоятельно парят на экране, до крутых кинематографических спецэффектов. Но почему же этот тренд, не сказать, что популярен на 200%, но имеет свой круг преданных веб-мастеров? Почему он работает и способен преобразить ваш проект, изменить его и его восприятие в интернете. Что таится в темных цветах с анимацией?
Тренд
Тенденция создания и использования «темной» анимации, в которой сочетаются два четких образа – как правило, представляет собой темный монохромный цвет и скромную однотипную анимацию. В результате же получается многогранная и многослойная конструкция, тонкая и кажущаяся капризной. Да, такие идеи воплотить непросто, да к тому же и мобильный UX привнесет свое «фи». Но, тем не менее, при всей насыщенности интерфейса посетители вынуждены обращать внимание именно на анимацию элементов и подсознательно задумываться над её значением.
Это все хорошо сказывается на работе проекта в целом, поскольку вызывает ощущение таинственности, а пользователи, в свою очередь, начинают испытывать желание раздать некую загадку, головоломку. Именно, так. Во всем этом существует некий элемент тайны, который двигает проектами, управляет взаимодействием с ними; тем моментом, когда пользователь начнет задумываться: а что будет дальше? И постепенно начнет ощущать происходящие изменения.
Как пример: weareimpero, FAST Foundation, Miranda Joan, Sun Drive и joaodealmeida
Каждая такая конструкция уникальна. Не существует какого-то конкретного типа анимации, который работает лучше, а какой-то чуть хуже. Нет определенного набора цветов. Но, тем не менее, веб-дизайнеры используют в большинстве случаев именно сочетание черного с белым или серым. В сочетании же с простыми парящими анимационными движениями выглядит все очень таинственно и, разумеется, красиво.
Почему это работает?
На самом деле ответить на этот вопрос и объяснить происходящее очень сложно. Когда каждый из нас задумывается об этом, не видя еще дизайн-проекта, мы полагаем, что темные элементы не будут хорошо смотреться и не сделают сайт успешным, да и заказчику он вряд ли понравится. Ну, что такое темные цвета по сравнению с яркими светлыми оттенками, радостными и энергичными. Мы думаем о том, что мало цветов в палитре, мало контраста, простые конструкции в целом.
Но, может быть, именно поэтому данный тренд действительно работает. Да, это нарушает многие правила по привлечению пользователей на сайт. Но… ведь… привлекает.
Другой фактор, также способствующий развитию UX – тайна, мистика, загадочность темноты. Люди любят тайны, как бы хорошо не пытались скрыть этого. Они будут искать и стараться увидеть скрытые элементы, решить головоломки, проблемы. Темные цветовые палитры вкупе с анимацией дают пользователям возможность раскрытия тайн.
На протяжении нашего материала мы представляем много разных проектов с темными цветами и анимацией, и все они вызывают разные эмоции, но все без исключения положительные. Тайна в том, что темные цвета по своей сути капризны, вариации с ними сложны и интересны для веб-дизайнера. Даже элемент глубины существует и его можно создать, но трудно представить, трудно прорисовать, хотя невероятно интересно наблюдать за развитием такой анимации.
Посмотрим, давайте, на Artistsweb, Elegant Seagulls, garden eight, intelligo, frontside.
А теперь просто объедините мысленно эмоции, что вы испытываете, глядя на многие тематические проекты, на тайны, скрывающиеся в них, и вы поймете, почему пользователи любят такие зрительные образы, почему любят данный тренд, отчего вспыхивает интерес к сайтам и изучению контента, желание прокрутить страницу.
Объяснить сложно, представить и ощутить самому – гораздо проще и нагляднее.
Всегда ли темный – черный?
Большинство дизайнов создаются с использованием черного основного цвета. Но это не является аксиомой и строгим требованием. Существует большое количество темных цветов и оттенков, которые также эффективны. Более того, они позволяют веб-дизайнерам создавать темный шаблон и одновременно с этим использовать цвета и палитру бренда.
Независимо от цвета, существует один ключ, который позволяет эффективно сочетать темные оттенки с анимацией и при этом иметь богатство выбора цветов. Это диапазон тонов (цвет + серый) и оттенки (цвет + черный), что изменяют монохромную цветовую палитру. Более наглядно представлено на проекте FedEx. Также уделите внимание refletcommunication, neematic, koniku, popsnn, zoomanity, lavochkamarket.
Контраст в данном случае не в центре внимания на некоторых проектах, но он все равно крайне важен для данного тренда. При монохромной палитре без контраста анимация попросту потеряется, растворится в фоне и разрушит всю конструкцию дизайна, сайта, проекта в целом.
Будем осторожны
Как следствие предыдущей мысли: тренд сочетания темной палитры и анимации не для всех дизайнеров и сайтов и его крайне сложно воплотить в действительность. Более того, узоры на темном фоне и анимация имеют свои недостатки:
- Не показываются на мобильных устройствах.
- Есть некоторые проблемы с доступностью даже в браузерах на РС.
- Представляют интерес не широкому кругу пользователей интернета.
- Подобрать расположение и разметить навигацию, кнопки призывов к действиям может стать сложной задачей.
- Условия окружающей среды, такие как, например, освещение в комнате или падающий свет на монитор, могут сделать анимацию на темном фоне трудно различимой и плохо видимой.
- Многие пользователи априори не «уважают» темные палитры в веб-дизайне и темные сайты.
- Темный дизайн, в целом, может быстро надоесть посетителям сайта и они быстро покинут проект. Возможно, повторно они уже не вернутся.
Советы по использованию темного анимированного тренда
Если вы не страшитесь проблем, которые могут возникнуть при работе с данной тенденцией и у вас есть некоторая модель контента, который хорошо подходит для темной цветовой палитры и анимации, то советуем вам придерживаться некоторых советов и помнить частные моменты. Благодаря им можно с некоторой долей легкости обеспечить в будущем успех вашим идеям.
Дизайн одной страницы. Слишком много темного и анимированного на сайте может стать настоящей проблемой для ориентирования пользователей. Если вы планируете поработать с данной концепцией, ограничьте её использование только на одной странице (домашней, как правило) или в одной из секций лэндинга.
Контрастные цвета. Белый текст исключительно и отлично смотрится на темном фоне и не обязательно на черном. И это относится ко всем прочим графическим элементам. Именно поэтому, важно уделить внимание тому, чтобы все элементы веб-дизайна (кнопочки, иконочки, полосочки и прочее) хороши были видны, читабельны. И если вы создаете серую анимацию на темном фоне или анимацию, которая едва различима, словно дымок или пар, элементы интерфейса должны быть четкими и яркими.
Простая анимация. Сложная анимация разрушает концепцию проекта. Лучше сделать просто, но качественно. Путь это будут стандартные волны или вихревое движение частиц. Не быстрое, возможно, даже слишком замедленное. Но такая анимация сделает свое дело: и внимание привлечет, и сайт преобразит.
Слоистый дизайн. Суть успеха концепции – проектирование в слоях. Поясним. Создавайте разделение между фоном и анимацией с тем, чтобы последняя ощущалась более реальной, тактильной, осязаемой. Слоистость шаблона также позволит вам распланировать распределение контраста, расположить элементы интерфейса, поработать и «поиграть» с ними независимо от фона и анимации.
Жирная типографика. Жирным шрифтом уместно будет написать почти все текстовые элементы. Но при этом сам шрифт должен быть смелым и сильным, он и без жирности должен, словно бы, выпрыгивать из всей концепции и дизайна, должен своеобразно кричать о себе. Жирность же в данном случае позволит акцентировать внимание пользователей на важных моментах. Кроме жирности попробуйте уделить внимание тиснению и простому начертанию. Не стоит выискивать витиеватые орнаментовые шрифты. При обычном написании они могут быть слишком тонкими для легкости чтения, а при жирности – буквы сольются или все слова создадут визуальную «кашу».
А дальше?
Как и любой тренд веб-дизайна, данная концепция и её эстетика будут еще долгое время развиваться. И мы не можем со всей уверенностью предсказать, что ждет нас в дальнейшем. Хотя существуют некоторые идеи и основные моменты того, что должно уж точно измениться и как.
Сочетание темного цвета и анимации уверенно и давно используется в приложениях виртуальной реальности VR. И несмотря на то, что VR по большей части это еще развлечение для детей и подростков (хотя наличие оборудования зависит от возможностей родителей), большинство интернет-сайтов используют виртуальную реальность или 3600 также на черном фоне или с контрастом темных цветов. И знаете что? Данная тенденция подходит для многих промо-проектов по видеоиграм или кинофильмам. Даже в туристическом аспекте, космическом или в архитектурном. Зависит многое именно от контента и уместности использования анимации в целом.
Посмотрите на blairwitch, loftec (анимация букв, фона, смены и прочее), operationsamusreturns, recursouniversum, volcan, cerboestudio, topnology
Выводы
Темные цветовые схемы были популярны и раньше, но сейчас они получили новое развитие при сочетании с цветами и анимацией. И это, как правило, одна из тех вещей, которую очень любят многие веб-дизайнеры. Или ненавидят из-за тех проблем, что возникают во время работы с трендом по обеспечению внятного UX.
Так или иначе, но данный стиль используется часто, и в 2018 году такое явление не изживет себя. Единственное, что действительно важно – тематика проектов. Зачастую, удобно смешивать разные конструкции. Например, создать анимированную домашнюю страницу или только страницу с портфолио, но не более. Полностью в темном цвете с анимацией везде, где только можно и удобно для восприятия, создают сайты веб-агентств или корпоративные уникальные авторские проекты.
С чего начать вам? Попробуйте с одного слайда или странички и понаблюдайте, что об этом думают пользователи и ваш заказчик. Если вы создаете для себя такой проект, то и тем более, сначала испытайте тренд, а только потом вкладывайте деньги и силу в создание шаблона и концепции сочетания темного цвета с анимацией. Существует очень много нюансов, вплоть до того, что априори черный фон страницы нравится не всем людям, или насыщенно фиолетово-сиреневый. А значит, вы потеряете часть пользователей. Если сделать только одну такую страницу, то это придаст своеобразную утонченность и изыск проекту в целом. Он не будет скучным и стандартным.
Таким образом, секрет дизайн-тренда прост – эксперименты и сочетания, поиск, что называется «золотой середины». Это, если, в общих словах.
