Видеоурок

Алексей Бычков

Время чтения 5 минут

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

Не делайте элементы гигантскими

Одна из самых частых ошибок начинающих — слишком крупные элементы.

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

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

Размер элемента должен зависеть не от желания сделать дизайн «вау», а от его роли в композиции и количества информации, которую нужно показать.

Сетка и выравнивание

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

Проверяйте:

• совпадают ли края блоков;
• находятся ли элементы на одной сетке;
• одинаковы ли повторяющиеся отступы;
• логично ли распределено свободное пространство.

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

Отступы должны быть системными

Случайные расстояния между элементами сразу создают ощущение небрежности.

Если два одинаковых блока имеют разные отступы без причины, пользователь считывает это как ошибку.

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

Контраст помогает расставлять акценты

Контраст нужен не только между текстом и фоном. Он помогает определить, что пользователь должен заметить в первую очередь.

Если все элементы имеют одинаковый визуальный вес, интерфейс становится плоским.
Можно работать с контрастом:

• размера;
• цвета;
• начертания;
• насыщенности;
• расположения.

Главное — не создавать контраст ради контраста. Он должен помогать пользователю ориентироваться в интерфейсе.

CTA должна быть заметной

На коммерческой странице пользователь должен понимать, что ему предлагают сделать.

Если основное действие — оставить заявку, купить, заказать или связаться с компанией, CTA-кнопка должна быть заметной и находиться в логичном месте.

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

Кнопка не обязательно должна быть огромной. Важнее её визуальный приоритет и понятный текст.

Не прячьте важные контакты

Контактная информация — одна из ключевых частей коммерческого сайта.

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

Убирать контакты только ради минимализма — плохое решение: эстетика не должна мешать основной задаче сайта.

Длинные строки ухудшают чтение

Одна из типографических ошибок — растягивать небольшой текст на всю ширину экрана.

Чем длиннее строка, тем сложнее глазу переходить к следующей. Особенно это заметно на больших мониторах.

Текстовые блоки лучше ограничивать по ширине и выравнивать относительно общей сетки. Это делает страницу визуально аккуратнее и повышает комфорт чтения.

Бургер-меню не всегда нужно

На мобильном устройстве бургер — привычный способ спрятать навигацию. Но на десктопе свободного пространства обычно достаточно, чтобы показать основные разделы сразу.

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

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

Показывайте интерактивные состояния

Макет сайта — это не только статичная картинка.
Для интерактивных элементов нужно предусматривать состояния:

• Default;
• Hover;
• Active;
• Focus;
• Disabled.

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

Поэтому ховер — не декоративная мелочь, а часть дизайна интерфейса.

Изображения должны работать на задачу

Даже качественная фотография может испортить дизайн, если она неправильно подобрана или обработана.

Обращайте внимание на:

• качество изображения;
• кадрирование;
• соответствие теме;
• положение объекта;
• читаемость текста поверх фотографии.

Не стоит использовать картинку просто потому, что она красиво выглядит. Изображение должно поддерживать содержание страницы и помогать передавать нужное настроение или информацию.

Убирайте визуальный шум

Иконки, пиктограммы и декоративные элементы легко начать добавлять «для красоты». В результате интерфейс становится перегруженным.

Если каждый блок сопровождается иконкой, стрелочкой, рамкой и дополнительным декоративным элементом, внимание пользователя рассеивается.

Хороший вопрос при проверке макета:
«Если я уберу этот элемент, дизайн станет хуже или просто пустее?»

Если он ничего не добавляет — возможно, его действительно стоит убрать.