Маркетинг веб-сайта Навыки веб-дизайна практическая версия

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

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

1. Используйте цветные наложения на фотографиях с текстом

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

картина

2. Не злоупотребляйте негативным пространством

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

3. «Хватит говорить ерунду»

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

4. Сделайте макеты визуально привлекательными, даже если в них есть только текст

Текстовую часть целевой страницы может быть сложно разработать, особенно если у вас нет возможности или ресурсов оптимизировать страницу с помощью иллюстраций, изображений или фотографий.

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

5. Маленькие значки, большие иллюстрации

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

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

6. Уменьшите интервал между буквами.

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

7. Обратите внимание на длину раздела часто задаваемых вопросов.

Раздел часто задаваемых вопросов (FAQ) является важной частью многих веб-страниц, а оптимальная длина строки составляет от 45 до 75 символов, включая пробелы и знаки препинания.

8. Демонстрируйте социальную ценность

В этом примере настоящее ценностное предложение скрыто в подзаголовке, который едва заметен.

В этот момент вы можете повысить достоверность своего социального доказательства, добавив лица реальных пользователей.

9. Никто не любит мелкий текст.

В этом примере я использовал переменную типографику в CSS, чтобы создать основной текст размером 11 пикселей и навигационные ссылки размером 9 пикселей.

Размер шрифта браузера по умолчанию составляет 16 пикселей. Его уже 20 лет используют, используя современные шрифты, предназначенные для экранов, начните с размера текста 18–20 пикселей.

10. Используйте закон вероятности.

Сделайте так, чтобы макет страницы содержал нечетное количество элементов. Если вам нужно показать 4 точки, попробуйте объединить 2 из них и показать их с 3 точками.

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

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

11. Сделайте текст максимально коротким.

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

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

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

13. Проверьте контрастность серого текста.

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

Выше приведены 13 советов по маркетинговому веб-дизайну веб-сайта. Надеюсь, они будут вам полезны.