Антитренды в веб-дизайне: оставьте это в прошлом

В этой статье

Плоский дизайн

В 2015 году флэт стал откровением. Плоские иллюстрации были буквально везде. Google разработал огромные гайды по material design и научил всех упрощать. Из интерфейсов пропала чрезмерная детализация, и всё стало максимально понятным. Но на дворе уже 2021 — прошло 6 лет, и пора убирать флэт-картинки до нового витка моды.

Что делать

Сейчас набирает популярность неоморфизм — в нём объём и реалистичность достигаются за счёт теней на однотонном минималистичном фоне. По сути, это что-то среднее между плоским дизайном и детализированными иллюстрациями: акценты есть, но их не слишком много, чтобы не перегружать интерфейс.

Видео на фоне

Боль всех фронтендеров и UX-еров. Видео на фоне раньше было у каждого второго сайта. И не важно, про что он был — про новую модель смартфона или рис из Италии. Считается, что видео добавляет динамики, передаёт атмосферу бренда. Но есть сразу много «но». Во-первых, быстродействие — видео сильно тормозит все процессы на сайте. Во-вторых, скука — если делать видео меньше, оно повторяется чаще и быстро надоедает. В-третьих, адаптивность — видео на мобильных устройствах часто не грузится или отображается неправильно.

Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*

Как получить измеримые результаты в фарммаркетинге.

Показываем на примерах →

Спецпроект

Что делать

Если очень хочется поставить фоновое видео, пусть это будет не первый экран, а, например, раздел про бенефиты, где это будет в тему. Для первых экранов хорошо заходят микровзаимодействия или интерактивные детали. Но обязательно тестируйте UX, чтобы не получить высокий процент отказов из-за тяжёлой странички.

Стоковые фото

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

Что делать

Лучше использовать свои фотографии: продукта, клиентов, услуг. Нет времени на фотосессию или это просто невозможно? Используйте иллюстрации: чертежи, схемы, картинки для разных ситуаций. И старайтесь делать их оригинальными — такое всегда запоминается.

Часто стоки используют как временные «заглушки»: это быстрое и удобное решение. Но в таких случаях нужно подбирать максимально оригинальные изображения или адаптировать их с дизайнером — добавлять новые элементы, встраивать их в общий визуальный стиль.

Горизонтальный скролл

Горизонтальный скролл — классное и неожиданное решение, но на практике не всегда очевидное. Многие пользователи теряются на переходе к следующему шагу и часто просто уходят.

Есть, правда, элементы, для которых горизонтальный скролл будет в самый раз: например, если это портфолио фотографа или модели. Или блок со сториз-форматом. А вот сайт-визитку местного молокозавода лучше оформить в классическом варианте.

Что делать

Тренд последних лет, который не сдаёт позиций, — параллакс! Это анимация по скроллу. Выглядит эффектно, восприятию информации не мешает, UX не ухудшает. Идеально!

Яркие цвета

Кислотно-неоновые гаммы лучше оставить тем, кто плачет на техно. Яркие цвета кричат нашему древнему мозгу: «Внимание! Опасность!». Во-первых, это отвлекает от информации на сайте, даже если её там немного. А во-вторых, наш мозг за последний год уже настрессовал — пандемия и самоизоляция ни для кого не прошли бесследно.

Что делать

В моде естественность и натуральность, в том числе, в цветовых решениях. Акценты можно расставить с помощью контрастных, но не кричащих оттенков.

Экстремальный минимализм

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

Что делать

Не нужно отказываться от минимализма, просто нельзя бросать посетителя один на один с сайтом: нужны детали, намёки и подсказки, чтобы человек понял, что нужно доскроллить или щёлкнуть. А лучше вообще не ударяться в таинственность и загадочность и общаться по-человечески.

Гамбургер-меню

Гамбургер-меню, то есть меню сайта, скрытое под стандартной иконкой из трёх горизонтальных линий — тема достаточно сложная. На десктопе это решение смотрится не очень: нужно его найти, раскрыть, выбрать нужный пункт. Слишком много действий для современного пути пользователя.

На мобильных версиях использование «бургеров» оправдывают экономией места и простой адаптивностью. Но если такое меню раскрыть, оно как раз закроет весь контент. А если есть несколько уровней вложенности, то переход по ним может быть затруднён.

Что делать

Решений много, но универсального среди них нет. Можно, например, вывести пункты меню на страницу и сделать их элементом дизайна. Использовать нижнюю панель вкладок, как сейчас модно в приложениях. Или придумать что-то своё. Главное — отталкиваться от задач и функционала сайта.

Антитренды, конечно, понятие спорное — то, что было в моде 5 лет назад, может снова вернуться, и все мы снова будем рисовать во флэте. На самом деле, главное — использовать те приёмы в дизайне, которые помогут пользователю решить его проблему, а сайту — выполнить свою задачу.