У вас есть только один шанс произвести первое впечатление. Для большинства малых предприятий этот шанс — ваш сайт.
Но вам не нужен огромный бюджет или полная перестройка, чтобы выглядеть профессионально. Вам просто нужно исправить очевидные вещи.
Я просмотрела сотни сайтов малых предприятий, одни и те же проблемы постоянно повторяются.
Вот простой контрольный список наиболее распространенных ошибок визуального дизайна и простых способов их исправления, чтобы ваш сайт выглядел убедительно, понятно и профессионально уже сегодня.
1. Текст с низким контрастом
Ошибка: светло-серый текст на белом фоне. Или желтый текст на белом фоне. В теории это выглядит стильно, но на практике это невозможно прочитать.
Решение: высокий контраст — ваш друг.
Простое правило: если вы прищуриваетесь, глядя на экран, и текст размывается на фоне, измените цвет. Используйте темно-серый или черный текст на белом фоне.
Цветной фон: убедитесь, что текст выделяется. Для этого воспользуйтесь бесплатным онлайн-инструментом для проверки контраста.
2. «Море однообразия»: чрезмерно используемые стоковые фотографии
Ошибка: рукопожатие.
Оператор колл-центра в гарнитуре. Чрезмерно счастливая команда, смеющаяся за столом (который совсем не похож на ваш настоящий офис). Эти фотографии — визуальные клише, которые говорят посетителям: «Мы не приложили много усилий».
Решение: Аутентичность всегда лучше совершенства.
Если возможно, используйте реальные фотографии вашей команды, вашего магазина или вашей продукции. Не нужна дорогая камера — подойдет современный смартфон. Если вам необходимо использовать стоковые фотографии, избегайте поисковых запросов, связанных с «корпоративным» контентом. Ищите спонтанные, художественные снимки, которые вызывают определенные чувства, а не служат в качестве шаблонного заменителя.
3. Ящик для хлама: захламленные макеты
Ошибка: попытка разместить все «выше линии сгиба».
Слишком много кнопок, слишком много блоков, слишком много мигающих виджетов и всплывающее окно с новостной рассылкой, появляющееся через три секунды после загрузки страницы. Это создает ощущение хаоса и перегрузки.
Решение: Используйте пустое пространство. Не нужно заполнять каждый пиксель.
Приоритизация: Спросите себя: «Что я хочу, чтобы люди здесь сделали?» (Позвонили нам? Купили этот продукт? Прочитали эту историю?). Сделайте это главной целью.
Упрощение: Удалите один элемент с каждой страницы. Если виджет или графика не помогают пользователю, удалите их. Дайте вашему контенту «дышать».
4. Потерянный пользователь: запутанная навигация
Ошибка: Креативные названия меню.
«Продукты» становятся «Подарки». «О нас» становится «Наша история». Хотя это и креативно, это сбивает с толку пользователей, которые быстро просматривают информацию. Кроме того, 15 пунктов меню, втиснутых в заголовок.
Решение: Придерживайтесь стандарта.
Главная, О нас, Услуги/Продукты, Контакты. Это скучно, но работает. Если у вас много страниц, используйте выпадающие меню для их организации. Сделайте так, чтобы посетителю было легко найти то, что ему нужно, не задумываясь.
5. Дикий Запад: Непоследовательный брендинг
Ошибка: Каждая страница выглядит так, будто её разработал другой человек. На первой странице синие закругленные кнопки, на второй — зеленые квадратные. Один заголовок написан изысканным рукописным шрифтом, следующий — Arial.
Решение: Последовательность укрепляет доверие. Вам не нужен 50-страничный гид по бренду, достаточно нескольких правил:
- Выберите два шрифта (один для заголовков, один для основного текста) и используйте их везде.
- Выберите два или три цвета (основной, дополнительный и нейтральный) и придерживайтесь их.
- Сделайте все кнопки одинаковой формы и цвета. Одно это небольшое изменение уже придает сайту профессиональный вид.
6. Кошмар на мобильных устройствах: Слишком мелкий текст, на который трудно нажать
Ошибка: Вы создали свой сайт на компьютере, но забыли проверить его на телефоне. Текст очень мелкий, кнопки расположены близко друг к другу, а изображения обрезаются.
Решение: Всегда проверяйте свой сайт на своем телефоне. Если для чтения абзаца приходится использовать масштабирование жестом «щипок», значит, он не работает.
Размер шрифта: Основной текст на мобильных устройствах должен быть не менее 16 пикселей.
Кнопки: Сделайте их удобными для пользователей с большими пальцами. Кнопка должна быть достаточно большой, чтобы ее можно было легко нажать большим пальцем, не задевая случайно ссылку рядом с ней.
7. Тупик: Нет четкого следующего шага
Ошибка: Посетитель читает вашу прекрасную страницу «О нас»… и что дальше? Нет ни кнопки, ни ссылки, ни подсказки. Он просто смотрит на стену текста и уходит.
Решение: Всегда направляйте пользователя к следующему шагу. Это называется призывом к действию (CTA). Внизу каждой страницы или раздела укажите направление.
После прочтения статьи в блоге: «Читать другие советы» или «Свяжитесь с нами».
После просмотра товара: «Купить сейчас» или «Задать вопрос».
Никогда не оставляйте их в тупике.
Главный вывод:
Вам не нужно быть профессиональным дизайнером, чтобы создать профессионально выглядящий веб-сайт. Вам просто нужно устранить препятствия. Пройдитесь по этому контрольному списку. Улучшите читаемость, уберите лишнее и сделайте кнопки легкодоступными.
Ваши клиенты заметят разницу.
Мои статьи: https://dzen.ru/id/68a5cb2ba07a284d80fed155
Больше интересных и полезных статей можно посмотреть на моем канале https://t.me/astium_design или личном сайте https://astium-design.ru/blog в разделе Блог.
Мой сайт - https://astium-design.ru
А также, есть группа в ВК, там я выкладываю всё самое актуальное https://vk.com/astium
Подписывайтесь, будет интересно)