Текущие тенденции в веб-дизайне прогнозируют захватывающие изменения, которые ожидают нас 2018 году: появление нового визуального языка со смелыми цветами и мощной типографикой, асимметричными макетами; сайты-бруталисты и более интенсивное использование интерактивности. Все будет находиться в движении, и обращаться к вниманию зрителя, завоевывая его доверие.
Являются ли новые тенденции веб-дизайна противодействием минимализму, симметрии и квадратно-прямоугольным макетам? Будут ли они отражением, так называемой культуры призыва, которая тяготеет к мейнстриму? Намерены ли они бороться с сокращением вниманием веб-пользователей? После прочтения этой статьи вы можете сделать свою собственную гипотезу, но одно можно сказать наверняка: в мире веб-дизайна появилась острая потребность в изменениях.
Асимметричные макеты
Асимметричные макеты уже завоевали популярность в 2017-м, и можно ожидать, что эта тенденция сохранится и в следующем году. Поскольку модуль компоновки сетки CSS получает больше поддержки браузера, становится проще внедрять необычные макеты и создавать веб-сайты с менее рамочным дизайном.
Домашняя страница TechStyle Fashion Group — хороший пример асимметричного макета. Когда вы прокручиваете страницу вниз — кажется, что на самом деле ничего не происходит, но страница все еще передает информацию убедительным образом. И, что так же важно, асимметричный макет помогает бренду выделиться из толпы и оставить незабываемое впечатление у посетителя.
Асимметричные разделительные экраны
Сплит-экраны и раньше присутствовали в дизайне, но теперь они еще и смешиваются с асимметрией. В 2018 году мы входим в мир асимметричных разделенных экранов.
Недавний редизайн Dropbox использует эту технику на своей целевой странице. Как вы можете видеть ниже, знаменитый минималистский и скромный дизайн Dropbox ушел в прошлое. Новый дизайн пытается привлечь внимание посетителей гораздо более сильным и надежным способом.
Асимметричные элементы дизайна
Мы можем не только использовать асимметрию в макетах на уровне страниц, но и в небольших элементах дизайна.
Взгляните, например, на сетку фотографий на обновленном веб-сайте Experience Olympia. Отсутствие вертикальной симметрии заставляет галерею выглядеть так, как будто фотографии разложили вручную — визуальный эффект, который вызывает чувство подлинности и честности.
Интенсивные цветовые схемы
Интенсивные и яркие цветовые схемы станут одним из самых важных направлений веб-дизайна в 2018 году. То, что Pantone выбрала Ultra Violet для цвета года 2018 года вряд ли является случайностью.
Редизайн банка Shawbrook — отличный пример того, как разумно использовать смелые краски даже на веб-сайте финансовой компании, который традиционно ассоциируется с «разумными», деловыми цветами.
Hero — типографика
Еще одна тенденция веб-дизайна, которая уже завоевала популярность в 2017 году, и мы можем ожидать еще большего от нее в следующем году. Огромные, жирные буквы отлично сочетаются с вышеупомянутыми тенденциями: интенсивными цветовыми палитрами и асимметричными макетами.
Команда дизайнеров Paradiso использует такой тяжелый шрифт для логотипа и заголовков, который мгновенно захватывает внимание и повышает осведомленность о бренде командами.
Веб-сайты — бруталисты
Бруталистские сайты, вероятно, являются самой крутой тенденцией, которую мы можем ожидать в 2018 году. Но действительно ли это то, что подразумевает их название? Согласно определению Brutalist Websites – это достаточно прочные и беззаботные сайты, которые выглядят комфортно и легко. Буртализм можно рассматривать как реакцию молодого поколения на легкость, оптимизм и легкомыслие современного веб-дизайна.
Хотите пример? Посетите веб-сайт Designer That Reads. Как видите – никакой изощренности. Бруталистские сайты целенаправленно шокируют и содержат отталкивающую эстетику, но как раз этим и привлекают внимание пользователя, готовя его к радикальным изменениям в веб-дизайне.
Пояснительные иллюстрации
В эпоху, когда все беспокоятся о фейковых новостях, люди действительно хотят понять, что происходит и почему. Пояснительные иллюстрации, показывающие, как работает услуга или продукт — отличный способ завоевать доверие посетителей. Поэтому неудивительно, что эта тенденция развивается по нарастающей в наступившем году.
Slack — одна из крупных компаний, которые используют на своем веб-сайте пользовательские пояснительные иллюстрации. Приведенная ниже иллюстрация — блестящее решение, так как оно сочетает в себе иконку со скриншотом конечного продукта. В то же время иллюстрация визуально объясняет, как использовать функцию поиска в приложении.
Фокусировка на данных
Размещение данных на дисплее теперь предлагает другое решение для завоевания доверия веб-пользователей.
Neematic, производитель электрических велосипедов, отлично использует эту тенденцию на своем новом сайте. Вместо того чтобы писать длинный текст, в котором подробно описаны преимущества продукта, он просто показывает четыре более важные части данных об электрическом велосипеде, которые необходимо знать клиентам.
Длинные скроллы
Веб-пользователи, похоже, устали от бесконечной прокрутки – особенно это неудобно при использовании мобильных устройств. Тем не менее, длинный скроллинг принимается как оптимальное решение между короткой и бесконечной прокруткой, и становиться важной тенденцией веб-дизайна. Длинные прокрутки отлично дополняют объемный контент, который недавно приобрел серьезную популярность в Интернете.
Наличие функции длинной прокрутки обычно обозначается различными визуальными подсказками. Пример – новый веб-сайт Season fashion brand, на котором команда дизайнеров поместила значок со стрелкой вниз с вертикальной меткой «Scroll» в левом нижнем углу. Этот крошечный, но видимый элемент подготавливает зрителей к присутствию данной функции и способствует значительно лучшему UX.
Целенаправленная анимация
Как мы уже напоминали в начале статьи, движение станет одной из самых важных тенденций веб-дизайна в 2018 году. Анимации и эффекты зависания присутствуют повсюду. Анимация, конечно, не новая вещь, но теперь дизайнеры создают их с определенной целью — показать пользователям, как работает процесс или продукт.
Bloom Inclusive Credit интегрирует анимацию на свой сайт невероятно умным образом. Здесь так много анимированных движущихся элементов, от которых создается впечатление, что вся страница движется. Удивительно, но это отвлекает от контента не так сильно, как может показаться, поскольку каждая анимация имеет свою собственную цель — помочь пользователям понять, как использовать продукцию.
Интерактивные и частичные фоны
Полноэкранные видео файлы были популярны в последнее время, и ожидается, что они останутся таковыми и в 2018 году. Тем не менее, в Интернете появились две новые фоновые тенденции: интерактивные и частичные фоны.
Частичные фоны обеспечивают ресурсосберегающую альтернативу видео файлам. Они загружаются намного быстрее, поскольку используют легкий JavaScript, но все-таки добавляют странице ощущение движения. Интерактивные фоны позволяют пользователям взаимодействовать с веб-сайтом, что оставляет незабываемое впечатление у большинства пользователей.
Creative Wallonia — лучший пример этой тенденции. В приведенном ниже примере вы можете видеть движущиеся красочные частицы в фоновом режиме. Хотя это движение не контролируется зрителем, все же оно добавляет дизайну интерактивности.
Пользователь может рисовать каракули в фоновом режиме, перемещая мышь вокруг страницы. Дизайн поощряет действия и креативность и является отличным способом привлечения пользователей.
Органические фигуры (Blobs) и градиенты
Органические формы уже появились в сети, и мы можем ожидать увеличения их использования в 2018 году.
Blob служит для создания иллюзии движения и динамизма на веб-странице. Примерно в 90% случаев Blob заполняется градиентом и находится на нижнем слое дизайна. Его взаимоотношение с брендом или продукцией обычно неоднозначно, однако — это простой и не слишком блочный способ перехода между различными типами информации.
Новый тренд использования Blob становится причиной использования градиентов в веб-дизайне.
Отличный пример данной тенденции – веб-сайт UnLeash 18 Conference.
И в заключение…
Суммируя все это, можно сказать, что 2018 год принесет нам яркие цвета и смелую типографику, большую асимметрию и повышенную брутальность, возрождение градиентов, тяжелый контент и множество движений в виде хитроумных анимацией. Чтобы подготовиться к предстоящим изменениям, дизайнерам стоит вспомнить основы теории цвета, практику эффективного использования градиентов и анимацией. Следите за нашими советами в последующих статьях.
Давайте создадим что-нибудь крутое вместе!
