Это испортит ваш сайт: 10 распространённых ошибок в веб-дизайне

На YouTube-канале Тильды регулярно проходят разборы ошибок в дизайне сайтов реальных бизнесов. Мы проанализировали их и собрали 10 самых частых промахов при создании сайтов. Делимся подборкой с вами, чтобы предостеречь и показать, как таких ошибок избежать.

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

А как надо? Используйте сетку, чтобы облегчить выравнивание элементов. Самая распространённая сетка в веб-дизайне состоит из 12 колонок. Чтобы лучше разобраться в теме и понять, как использовать сетку — прочитайте нашу статью про создание дизайна страницы на основе модулей.

Это испортит ваш сайт: 10 распространённых ошибок в веб-дизайне

Почему это плохо? Расположенные рядом друг с другом объекты мы воспринимаем как одну группу. Поэтому если расстояние между блоками делать меньше, чем расстояния между элементами внутри блока, пользователь может запутаться и неправильно понять, к какому разделу относится информация.

А как надо? Делайте отступы между блоками достаточно большим, чтобы они визуально отделялись друг от друга, и следуйте правилу: внутреннее должно быть меньше внешнего. Например, если внутри блока между заголовком и основным текстом 50px, значит расстояние до следующего блока должно быть больше этого значения.

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

А как надо? При использовании анимации убедитесь, что она действительно добавляет ценность для пользователей. Например, анимация может быть полезна для привлечения внимания к блоку со специальным предложением или для подсвечивания новых товаров на сайте.

Почему это плохо? Первое, что видит пользователь, заходя на сайт — главный экран. Он должен доносить ценность вашего продукта и убедить человека задержаться на сайте. Частая ошибка — не объяснить пользователю, что вы ему предлагаете, размыто сформулировать оффер и призыв к действию (CTA).

А как надо? Уделайте первому экрану особое внимание. Он должен передавать суть и настроение проекта и подталкивать к дальнейшему взаимодействию с сайтом. Укажите в заголовке, чем вы занимаетесь, например: «Делаем презентации на заказ за 2 дня», «Организовываем свадьбы под ключ». Добавьте кнопку с призывом к действию: посмотреть портфолио, оставить заявку, сделать предзаказ. Она должна быть контрастной и привлекать внимание. Не забудьте про цепляющую фотографию или иллюстрацию, которая покажет ваш продукт в лучшем свете.

Почему это плохо? Единый стиль кнопок, иконок, оформления заголовков и других элементов создаёт единообразие в дизайне и выглядит профессионально. Если на сайте элементы оформлены разрозненно, например, используются иконки то с заливкой, то без, это будет смотреться неопрятно.

А как надо? Одинаково оформляйте ключевые элементы дизайна страницы: кнопки, иконки, заголовки. Чтобы не запутаться в стилях, можно создать в графическом редакторе UI kit с набором основных компонентов дизайна.

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

А как надо? Структурируйте текст на сайте и расставляйте акценты, которые помогут человеку быстро просканировать контент и выделить важное. Для этого разбивайте текст на абзацы, добавляйте заголовки, сокращайте длину строки и используйте списки.

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

А как надо? Добавляйте эффекты при наведении для кликабельных элементов. Можно использовать различные приёмы: изменение цвета, размера, добавление тени и так далее. Посмотрите примеры эффектов и их реализацию на Тильде в бесплатном учебнике по анимации.

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

А как надо? Не используйте много стилей текста на сайте. Определитесь, какой шрифт, размер и начертание будут заданы для основных текстовых элементов: заголовков, основного текста, ссылок, текста на кнопках. Придерживайтесь выбранных стилей на всём сайте. Например, если вы решили, что основной текст будет набран Tilda Sans Regular размером 16px, значит такие параметры следует использовать на всей странице.

Почему это плохо? Цвет создаёт настроение, передаёт тон сообщения посетителям вашего сайта и помогает выделить важные элементы на странице, например, кнопки. Большое количество цветовых акцентов создает путаницу на странице: непонятно, что важнее.

А как надо? Используйте на сайте один основной цвет и ещё один-два дополнительных в качестве акцента. Подробнее о том, как использовать цветовой контраст в дизайне мы разбирали в статье.

Почему это плохо? Из-за большого количества конкурентных предложений люди привыкли видеть на сайтах фотографии хорошего качества. Если они сделаны при тусклом освещении, размыты и выглядят плохо, это негативно скажется на продажах. Ещё одна частая ошибка — делать хорошие фотографии, но не показывать товар в действии. Например, в интернет-магазине женских браслетов опубликовать фотографии украшений, но не показать, как они выглядят на руке.

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