13 советов, которые сделают лучше вашу целевую страницу

01 / Используйте наложение цвета на изображения с текстом

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

02 / Не переусердствуйте с негативным пространством

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

03 / Никто не любит пробираться через поток сознания

Любой, кто знаком с аналитикой сайтов, скажет, что у вас очень мало времени, чтобы привлечь чье-то внимание. Ближе к делу.

04 / Даже текстовые макеты должны быть визуально привлекательными

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

05 / Маленькие иконки, большие иллюстрации

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

06 / Не увлекайтесь межбуквенным интервалом

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

07 / Следите за длиной строки в FAQ

Раздел FAQ, вероятно, займет первое место в рейтинге вопиющей длины строк в интернете. Оптимальная длина строки составляет от 45 до 75 символов — вместе с пробелами и знаками препинания.

08 / Покажите ценность

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

09 / Никто не любит крошечный текст

А в этом примере в CSS использовали переменные шрифты, создавая сценарии, при которых размер основного текста составлял 11 пикселей, а ссылок — 9 пикселей. Установленным по умолчанию в браузере размерам 16 пикселей уже лет двадцать, используйте современные шрифты, начиная с 18-20 для основного текста

10 / Применяйте правило шансов

Макеты с нечетным количеством элементов вызывают больше эмоций у пользователей. Если у вас на странице 4 элемента, попробуйте объединить два из них, чтобы получилось 3. Никак? Тогда расставьте приоритеты и уберите самый слабый. Будьте осторожны, используя 5 элементов — это может вызвать когнитивную перегрузку.

11 / Управление когнитивной перегрузкой

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

12 / Используйте яркие цвета в качестве акцента

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

13 / Всегда проверяйте контраст серого текста

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

Вуаля! Все готово.