продвижение в регионах
SEO-продвижение сайта в регионах: советы
14.05.2018
ангсео
Эффективные способы продвижения в англоязычном SEO
28.05.2018

Тренды Web и UI-дизайна 2018 года

обложкатренды
Оформить интернет-магазин профессионально
Вышлем индивидуальное предложение на редизайн за 8 секунд


"2018-й год уже плотно вошел в свои права, и пора определиться, к чему стремиться, что изучать, и как еще можно удивлять пользователей в новом году. В этой статье будет раскрыто несколько главных трендов веб и UI-дизайна на ближайший год".

Сергей Рогов, веб-дизайнер Cart-Power


Большое меню

Это было трендом. Для многих это musthave, но сейчас уже есть те, кто считает это моветоном. После появления бургеров все начали прятать меню под одну кнопку, что вызывало много споров. Сейчас большое меню стало фетишем мировых студий, как раньше была страница 404. Дизайнеры начали придумывать в нем композицию элементов, добавлять ховеры и дополнительную информацию. Оно не только добавляет эстетики сайту, но и за счет размеров расширяет функциональность.


Brand in lifestyle

Бренды переходят в другое, живое взаимодействие с аудиторией. Дизайн должен приспосабливаться. Раньше для создания хорошего каталога достаточно было качественного фото-продакшена, пост-продакшена: сфотографировали, разместили, хватит. Но уже недостаточно просто разместить хорошее видео на лендинге, нужно все ассоциировать с эмоциями. Это заявление отлично подтверждается успехом продаж через Instagram. Вы видите красивое пальто на девушке и влюбляетесь. Вам кажется, что вы покупаете пальто, на самом деле, вы покупаете этот образ девушки в нем.

Пример: Adidas запустил новую коллекцию, и она сразу начала ассоциироваться с новыми паттернами и цветами. Но самое крутое – скролл вниз, комбинация рваной верстки, видео и фото. Акцент уходит с обуви на людей и их ощущения в одежде, и после того, как вы увидите их в движении и почувствуете эмоционально, возможно, и захотите приобрести пару.

Интерактивный скролл

Курсор у нас обозначается стрелкой. Она либо превращается в палец для кликанья, могут появляться ховеры. Сейчас курсором может быть элемент. Под ним высвечивается переход на страницу, могут меняться элементы или вступать во взаимодействие с курсором. Сайт Volcan — удачный пример. Ромб-курсор становится подсказкой, что тебя ожидает при нажатии, присутствует элемент интерактива. В итоге ховер не нужен, его роль выполняет курсор.


SVG маски

С их помощью можно сделать космические переходы: в разработке несложные, зато развязывают руки дизайнерами. На сайте Rich Brown используется крест в качестве перехода, но это может быть любая форма.

Фотоконтент

Останется актуальным в 2018 подход к фото контенту на сайтах e-commerce, уход от одинаковых изображений в магазинах в сторону уникальных авторских фотографий. Что любопытно, все предпосылки налицо: больше 60% пользователей считают, что решающим фактором покупки выступают фотографии, поэтому магазины уделяют им максимум внимания. Пользователи больше не верят в постановочные фотографии с радостными и веселыми людьми, которые вы качаете на фотостоках. В 2018 году популярность будут набирать профессиональные фотостоки, такие как Unsplash. Качественные профессиональные и «живые» фотографии — вот что тренд в 2018 году.

Яркие цвета

Добавляем яркие цвета и мы смело заявляем о себе! Material дизайн и flat дизайн отлично сочетаются с сочными красками. Цветовые переходы - один из трендов современного дизайна. Это тренд 2017 года, и мы видим, что он сохранится и в 2018. Здесь главное правильно сочетать цвета и не выглядеть кричащим. Градиенты снова на пике популярности: чистые, плавные, с использованием ярких цветов, создающими dual tone эффект. На самом деле выглядит завораживающе.


Duotones

Еще одна разновидность градиентов — Doutones, возможно наберет популярности в 2018 году. С помощью этой техники можно сделать свой дизайн запоминающимся.


Semi-flat design

Эволюционировал из flat-дизайна. Плоские решения «приелись» глазу пользователей, поэтому в 2018 году стоит переходить на полу-плоский дизайн. Добавляйте немного глубины в своем дизайне, использование мягких теней поможет добиться нужного результата.


2-в-1

Информации становится все больше, и неплохим вариантом становится использование так называемого split screen дизайна. Страница делится на две части, что позволяет разместить больше информации. Таким образом можно удобно организовать подачу информации.


Полезная анимация

Прошли времена добавления анимации по принципу "чтобы было". Нужно понимать, для чего она используется, должна быть четкая цель. Анимация теперь должна помогать пользователю, делать акцент на чем-то конкретном. Одним из трендов становятся синемаграфы. Синемаграф — использование статической картинки, с анимацией отдельного элемента. Это позволяет создать ощущение просмотра видео, но при этом гораздо меньше влияет на скорость загрузки.

Адаптивные и анимированные логотипы

Адаптивность логотипов становится все более актуальной. Как я уже говорил, мобильные устройства все больше становятся частью нашей жизни. Масштабируемых логотипов уже недостаточно для отображения на различных платформах, актуальность приобретают адаптивные логотипы, и стоит этим пользоваться. Еще одна тенденция, которая в 2018 году может получить развитие — анимированные логотипы.

Цвет года (от Pantone)

Это, конечно, не самый однозначный тренд, тем не менее в Pantone решили, что цветом этого года должен стать ультрафиолетовый (PANTONE 18-3838 Ultra Violet).

Подводя итог

Сейчас невозможно определить один трендовый набор шрифтов или цветовую гамму. Вроде как пастельные цвета начинают набирать тренд, но потом смотришь на эти яркие взрывные сайты, и понимаешь, что нет. Я бы советовал обыгрывать подачу компонента с помощью паттернов в любом случае, так контент будет выглядеть дороже и интересней: обычный полупрозрачный и легкий паттерн уже придаст статус вашему сайту. Косые линии, ломанные элементы — это не так сложно и не требует подключения разработчика.

И не забывать об иллюстрациях. Пролетающая через страницу ракета легко оживит серьезный скучный сайт инвестиционного фонда.


Остались вопросы?
Ответим на любой!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>