Веб-дизайн развивается со скоростью света. То, что было трендом вчера, сегодня уже вызывает недоумение, а завтра — раздражение. Мы цепляемся за старые привычки, потому что они знакомы и кажутся безопасными. Но пора признать: некоторые подходы не просто устарели, они вредят пользовательскому опыту, конверсии и репутации вашего сайта. Давайте выбросим этот хлам и освободим место для современного, чистого и эффективного дизайна.
Хотя если заказчик считает нужным использовать устаревшее решение — это его святое право. Сильно сопротивляться не будем😶
Хотя если заказчик считает нужным использовать устаревшее решение — это его святое право. Сильно сопротивляться не будем😶
1. Гигантские шапки сайта
Пора прибираться в шапках с логотипом, гигантским меню (не забыть про второй уровень), телефоном, электронной почтой, формой поиска, призывом к действию и, конечно же, акцией. Они съедают половину экрана и заставляют пользователя бесконечно скроллить, чтобы увидеть хоть что-то полезное. Добавьте к этому интерфейс браузера и полоску операционной системы. Пользователю приходится изучать сайт через игольное ушко. Это пережиток эпохи, когда мы пытались запихнуть всё и сразу на первый экран.
Чем заменить: Придерживайтесь принципа «чем меньше, тем лучше». Используйте компактную, «липкую» (sticky) шапку, которая остается наверху при скролле. Оставьте только самое важное: логотип, навигацию по ключевым разделам и, возможно, одну кнопку-призыв. Всё остальное — в футер или выпадающие меню.
Чем заменить: Придерживайтесь принципа «чем меньше, тем лучше». Используйте компактную, «липкую» (sticky) шапку, которая остается наверху при скролле. Оставьте только самое важное: логотип, навигацию по ключевым разделам и, возможно, одну кнопку-призыв. Всё остальное — в футер или выпадающие меню.
2. Кнопка «Главная» в меню
Отдельная кнопка «Главная» в основном меню — это атавизм, пережиток тех времен, когда навигация была сложной и непонятной. Это костыль, который мы используем, когда не уверены, что пользователь сориентируется на сайте самостоятельно. Эту же функцию всегда выполняет логотип.
Чем заменить: Сделайте ваш логотип в левом верхнем углу кликабельным. Это должен быть самый очевидный и предсказуемый элемент на странице. Убедитесь, что область клика достаточно большая. Этот паттерн хорошо закрепился в современном интернете, освободив дополнительное место в меню.
Чем заменить: Сделайте ваш логотип в левом верхнем углу кликабельным. Это должен быть самый очевидный и предсказуемый элемент на странице. Убедитесь, что область клика достаточно большая. Этот паттерн хорошо закрепился в современном интернете, освободив дополнительное место в меню.
3. Водяные знаки на каждом фото
Накладывать гигантские, полупрозрачные логотипы на все изображения товаров — это лучший способ убить любое желание их купить. Это выглядит дешево, параноидально и крадет у пользователя возможность рассмотреть продукт.
Чем заменить: Качественными фото в высоком разрешении без знаков. Нейросети уже научились убирать почти любые водяные знаки. От воровства контента не убежать. Доверие и эстетика важнее.
Чем заменить: Качественными фото в высоком разрешении без знаков. Нейросети уже научились убирать почти любые водяные знаки. От воровства контента не убежать. Доверие и эстетика важнее.
4. Кнопка «Купить» в каталоге
Никто не покупает сразу из каталога на неизвестном сайте. Каждый посетитель сначала зайдет в карточку, а уже потом добавит товар в корзину. Еще хуже, если сделать эту кнопку яркой. Тогда она будет отвлекать пользователя от товара.
Чем заменить: Достаточно сделать кликабельной карточку товара целиком, а кнопки перенести внутрь карточки.
Чем заменить: Достаточно сделать кликабельной карточку товара целиком, а кнопки перенести внутрь карточки.
5. Модальные окна, которые атакуют на входе
Представьте: вы только что перешли на сайт по ссылке из статьи, в поисках рецепта или отзывов на товар. Вы еще не увидели ни строчки контента, не поняли, кто эти люди и что они предлагают. И вдруг весь экран затемняется, и перед вами вырастает гигантское объявление «подпишитесь на рассылку». Это цифровой аналог приставалы в торговом центре.
Чем заменить: Показывайте модальные окна с подпиской или призывом к регистрации по кнопкам. Сделайте статичный, но привлекательный блок подписки в конце страницы.
Чем заменить: Показывайте модальные окна с подпиской или призывом к регистрации по кнопкам. Сделайте статичный, но привлекательный блок подписки в конце страницы.
6 . Тексты в стиле «Мы — динамично развивающаяся компания»
Вы читаете: «Наша компания — это надежный партнер, ориентированный на инновации и клиентоориентированный подход. Мы используем индивидуальные решения и гибкую ценовую политику...» Звучит знакомо? Поздравляем, вы только что стали жертвой корпоративного словоблудия — бессмысленного набора слов, который не говорит ровным счетом ни о чем. Эти фразы-зомби уже давно потеряли всякий смысл и служат лишь одним целям: занять место и усыпить бдительность посетителя.
Чем заменить:
- Вместо: «Мы клиентоориентированная компания».
- Говори: «Бесплатно проконсультируем и подберем решение под ваш бюджет за 15 минут». или «Даем пожизненную гарантию на все наши услуги».
- Вместо: «Мы используем инновационные технологии».
- Говори: «Наше ПО автоматически формирует отчеты за 5 секунд, экономя вам 3 рабочих часа в день».
- Вместо: «Мы надежный партнер».
- Говори: «Работаем с 2010 года, 95% клиентов приходят к нам по рекомендации».
- Вместо: «Мы лидеры на рынке».
- Говори: «Ежемесячно наши услуги помогают 10 000 предпринимателей увеличивать продажи».
7. Декор ради декора
Летающие шарики, мигающие линии, сложные фоновые паттерны, которые рябят в глазах, анимированные разделители, которые отвлекают от текста... Создается впечатление, что дизайнер попал в лавку украшений для новогодней елки и не смог остановиться. Такой декор — это визуальный шум, который кричит: «Смотри, как я умею!», но забывает спросить: «А зачем?».
Чем заменить: Фотографиями, видео, да и вообще любым контентом. Превратите своего внутреннего декоратора в функционального дизайнера. Прежде чем добавить очередной визуальный элемент, спросите себя: «Какую задачу он решает? Что будет, если я его удалю?». Если ответ — «станет просто пусто» или «чтобы было красиво», смело выбрасывайте этот элемент. Ваш сайт — это инструмент, а не арт-объект. Его красота должна рождаться из ясности, простоты и целесообразности, а не из количества блесток на нем.
Чем заменить: Фотографиями, видео, да и вообще любым контентом. Превратите своего внутреннего декоратора в функционального дизайнера. Прежде чем добавить очередной визуальный элемент, спросите себя: «Какую задачу он решает? Что будет, если я его удалю?». Если ответ — «станет просто пусто» или «чтобы было красиво», смело выбрасывайте этот элемент. Ваш сайт — это инструмент, а не арт-объект. Его красота должна рождаться из ясности, простоты и целесообразности, а не из количества блесток на нем.
8 . Шрифтовой перегруз
Жирный, курсив, подчеркнутый, зачеркнутый, цветной, в рамочке, с тенью, в CAPS LOCK. И это всё в одном экране! Это не выразительность, это паника. Дизайнер, не умеющий выстроить иерархию с помощью размера и отступов, пытается криком выделить всё сразу. В итоге текст превращается в визуальную помойку, где нет главного, а есть только общий крик.
Чем заменить: Выстроить четкую иерархию:
Сила — в сдержанности. Перестаньте кричать на посетителя всеми стилями сразу. Доверьтесь размеру, воздуху и контрасту насыщенности. Пусть ваш текст дышит, а не задыхается в тисках собственного "оформления". Помните: если хочется выделить еще один кусок текста — значит, пора пересмотреть саму структуру контента, а не пихать в него очередной костыль в виде полужирного курсива.
- h1 - главный заголовок, самый большой на сайте;
- h2 - заголовок второго уровня, поменьше, для названий пунктов;
- h3 - заголовок для под пунктов, еще поменьше, но того же цвета и шрифта, что и h2;
- div - весь остальной текст.
Сила — в сдержанности. Перестаньте кричать на посетителя всеми стилями сразу. Доверьтесь размеру, воздуху и контрасту насыщенности. Пусть ваш текст дышит, а не задыхается в тисках собственного "оформления". Помните: если хочется выделить еще один кусок текста — значит, пора пересмотреть саму структуру контента, а не пихать в него очередной костыль в виде полужирного курсива.
Современный дизайн — это дизайн-невидимка.
За каждым из этих устаревших приемов стоит одна и та же простая истина: веб-дизайн окончательно повзрослел. Он больше не про то, чтобы удивить, ошеломить или продемонстрировать все технические возможности. Он стал про другое.
Современный дизайн — это дизайн-невидимка. Это элегантный и предсказуемый интерфейс, который не заставляет пользователя думать о самом интерфейсе. Он уважает его время, его цели и его нервные клетки. Он не кричит «Смотри, что я могу!», а уверенно говорит: «Я помогу тебе сделать то, зачем ты пришел».
Современный дизайн — это дизайн-невидимка. Это элегантный и предсказуемый интерфейс, который не заставляет пользователя думать о самом интерфейсе. Он уважает его время, его цели и его нервные клетки. Он не кричит «Смотри, что я могу!», а уверенно говорит: «Я помогу тебе сделать то, зачем ты пришел».