10 факторов правильного дизайна сайта

Экспертное мнение веб-дизайнера «ТопМарки» Ксении Киселевой

«Дизайн – не искусство, но в нем есть творчество» — очень верное утверждение, на мой взгляд. Веб-дизайн — это не только про эстетику. Он прямо и косвенно влияет на позицию сайта в поисковиках. И чтобы создать качественный коммерческий ресурс, нужно следовать четким правилам. Каким? Рассказываю в моей статье.

1. Привлекательное удобство (UI+UX)

Иногда смотришь на сайт — «пушка». Сочетание цветов, редкие шрифты, оригинальная структура. Начинаешь искать информацию — беда. Причина проста: дизайнер сфокусировался на UI правилах, и пренебрег UX (опыт пользователя).

UX-дизайн — это составление структуры сайта с учетом ожиданий юзеров: значок «Главная страница» в верхнем левом углу экрана, «Контакты» последним пунктом в «Меню» или в «подвале» и т.п. Если навигация сложная, то посетитель, скорее всего, уйдет. Бизнес потеряет клиента, а ресурс позиции в рейтинге.

Поэтому первое: интерфейс должен быть интуитивно понятным и логичным. Любой раздел должен быть доступен максимум в три клика.

2. Шрифты

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

Отдельная тема — заголовки. Они связаны с SEO. Можно наставить их рандомно, но это не даст сайту двигаться в поисковых запросах.

3. Заголовки

Чтобы сайт понравился поисковым машинам нужно правильно использовать заголовки. Самый крупный h1 желательно использовать только один раз на странице, h2 — 2-3 и т.д.

Еще один совет: придерживайтесь единого стиля заголовков на всем сайте. Иначе будет «грязно».

4. Цвет

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

Сегодня популярны пастельные тона. Но и темные, и экзотические цвета смотрятся стильно. Главное грамотно подобрать структуру и визуальное оформление (графические элементы, иллюстрации, фото и видео). Для наглядности несколько удачных примеров.

5. Скорость загрузки или «вектор VS растр»

Сайт должен «летать». Иначе клиенты уйдут к более шустрому конкуренту.

Задача веб-дизайнера — максимально снизить нагрузку. Для этого нужно использовать правильные изображения.

• Размер. Оптимальное разрешение для сайтов 72 dpi (точек на дюйм). Есть сервисы (например, photoresizer.com), которые «скидывают» вес файла, сохраняя качество.

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

• Формат. Лучше использовать векторные(.svg) изображения, а не растровые (.png). Первые и грузятся быстрее, и смотрятся лучше. Особенно это важно, когда на сайте много иконок и логотипов.

6. Мобильная версия

Адаптивность к разным устройствам (компьютер, планшет, смартфон) напрямую влияет на продажи и уровень удовлетворенности клиентов. По данным последних исследований, более 95% жителей планеты (в возрасте от 16 до 64 лет) пользуются смартфонами. Они проводят в гаджете 5 часов ежедневно (данные отчета Digital 2022 Global Overview Report): общаются, совершают покупки, смотрят видео, читают статьи и книги. В этих условиях адаптивность — базовое конкурентное преимущество.

В «ТопМарке» новые сайты мы верстаем сразу с учетом адаптивности. Всегда советуем клиентам выбрать такой вариант структуры и дизайна, даже если компания планирует запускать пока только веб-версию. Ключевой аргумент: доработать такой ресурс под новые задачи проще и дешевле.

7. Структура и долговечность

Ничто не вечно! Самый стильный дизайн устаревает. В среднем полное обновление нужно проводить раз в 5-6 лет. Объем работ зависит от исходных данных. Если структура сайта качественная, потребуется лишь небольшой редизайн. Освежить, так сказать.

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

8. Релевантность отрасли

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

9. Фишки

Чем дольше посетитель находится на сайте, тем лучше. Поисковые системы оценивают такие площадки, как полезные. Увеличить среднее время пребывания помогают различные «залипательные» или игровые элементы. Это может быть сквозная анимация, или эффект, который «бегает» за курсором (как на нашем сайте, например) и т.п. Такие штуки делают сайт более дружелюбным и менее официальным. Но подходит это не всем.

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

10. Единство стиля

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

Бонусный фактор: профессионализм

Еще несколько лет назад основными программами для веб-дизайна были Photoshop и Adobe Illustrator. Сегодня все чаще специалисты отдают предпочтение Figma. Главное ее преимущество — простота. Освоить программу можно за несколько дней. Почитал, посмотрел обучающие видео и вперед создавать прототипы. Даже профильного образования не нужно. И это очень неоднозначный момент.

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

Это очень спорный и неоднозначный вопрос. К кому обратиться — зависит от клиента. Кому-то нужны гипер-новые идеи и полет фантазии, а кому-то — эффективный коммерческий дизайн, который сделан четко по правилам. В любом случае стоит подобрать специалиста или компанию с опытом и репутацией. Потому что ничто так не развивает дизайнера, как 50+ созданных дизайна.