29.07.2020
Как улучшить дизайн сайта
Мы часто делаем дизайн-аудит сайтов и посадочных страниц. Находим одинаковые ошибки и даём одинаковые советы. Ниже подборка топовых ляпов, чтобы проверить себя или своего дизайнера.
ПРОСТЫЕ ШРИФТЫ
Не мудрите со шрифтами. Если плохо разбираетесь в типографике, возьмите одну гарнитуру. Используйте болд для заголовков и регуляр для текста, про наклонный забудьте навсегда. Главному заголовку H1 задайте фонтсайз 44−52 пикселя, второстепенным H2 — 32−40px. Обычному тексту — 16−18px, а важному — 20−24px.
КОРОТКИЕ СТРОКИ
Никогда не растягивайте тексты на всю ширину страницы. Длинные строки тяжело читать, особенно если текст объёмный и нужно постоянно переводить глаз на начало следующей строки. Сделайте так, чтобы в одну строку влезало 70−80 символов. Это устойчивый стандарт, который используется в вебе и в печати.
МИНИМУМ ЦВЕТА
Не каждый дизайнер способен грамотно миксовать цвета, а когда за дело берётся дилетант, гарантированно получается цыганская свадьба. Возьмите простой светлый фон (белый, бежевый, светло-голубой) и пару акцентных цветов для заливки кнопок и выделения ключевых блоков. Этого будет более чем достаточно.
БОЛЬШЕ ВОЗДУХА
Не старайтесь запихать побольше информации в один экран. Страница становится шумной и отталкивает посетителя. Люди давно привыкли скроллить и читать по заголовкам. Оставляйте достаточно пространства между объектами, чтобы они не слипались и не превращали ваш сайт в кашу.
МЕНЬШЕ КАРУСЕЛЕЙ
Горизонтальные слайдеры — почти всегда плохо. Они подходят, если вам нужно уместить на страницу много второстепенной информации: отзывов, иллюстраций, товарных карточек. Если запихаете в слайдер что-то важное — этого никто никогда не увидит. Лучше расположите вертикально в несколько столбиков.
ЧЁТКИЕ КАРТИНКИ
В 2020 году все картинки должны быть оптимизированы под ретина-экраны. Это совсем несложно — нужно всего лишь залить изображение в 2х и по возможности использовать векторную графику в SVG. А чтобы это не влияло на время загрузки сайта, достаточно прогнать все картинки через сервис TinyPNG.
ОДИНАКОВЫЕ ИКОНКИ
Ставить рядом иконки и иллюстрации из разных наборов — не круто. У них будет разный стиль и толщина линий. На первый взгляд ничего страшного, но общую картину портит. Скачайте один комплект иконок — это проще и лучше.
ХОВЕР-ЭФФЕКТЫ
Кнопки, ссылки и другие интерактивные элементы должны обязательно реагировать на курсор. Можно менять цвет, размер или добавлять небольшую анимацию. Тогда пользователю будет проще понять, куда нужно кликнуть.
Не мудрите со шрифтами. Если плохо разбираетесь в типографике, возьмите одну гарнитуру. Используйте болд для заголовков и регуляр для текста, про наклонный забудьте навсегда. Главному заголовку H1 задайте фонтсайз 44−52 пикселя, второстепенным H2 — 32−40px. Обычному тексту — 16−18px, а важному — 20−24px.
КОРОТКИЕ СТРОКИ
Никогда не растягивайте тексты на всю ширину страницы. Длинные строки тяжело читать, особенно если текст объёмный и нужно постоянно переводить глаз на начало следующей строки. Сделайте так, чтобы в одну строку влезало 70−80 символов. Это устойчивый стандарт, который используется в вебе и в печати.
МИНИМУМ ЦВЕТА
Не каждый дизайнер способен грамотно миксовать цвета, а когда за дело берётся дилетант, гарантированно получается цыганская свадьба. Возьмите простой светлый фон (белый, бежевый, светло-голубой) и пару акцентных цветов для заливки кнопок и выделения ключевых блоков. Этого будет более чем достаточно.
БОЛЬШЕ ВОЗДУХА
Не старайтесь запихать побольше информации в один экран. Страница становится шумной и отталкивает посетителя. Люди давно привыкли скроллить и читать по заголовкам. Оставляйте достаточно пространства между объектами, чтобы они не слипались и не превращали ваш сайт в кашу.
МЕНЬШЕ КАРУСЕЛЕЙ
Горизонтальные слайдеры — почти всегда плохо. Они подходят, если вам нужно уместить на страницу много второстепенной информации: отзывов, иллюстраций, товарных карточек. Если запихаете в слайдер что-то важное — этого никто никогда не увидит. Лучше расположите вертикально в несколько столбиков.
ЧЁТКИЕ КАРТИНКИ
В 2020 году все картинки должны быть оптимизированы под ретина-экраны. Это совсем несложно — нужно всего лишь залить изображение в 2х и по возможности использовать векторную графику в SVG. А чтобы это не влияло на время загрузки сайта, достаточно прогнать все картинки через сервис TinyPNG.
ОДИНАКОВЫЕ ИКОНКИ
Ставить рядом иконки и иллюстрации из разных наборов — не круто. У них будет разный стиль и толщина линий. На первый взгляд ничего страшного, но общую картину портит. Скачайте один комплект иконок — это проще и лучше.
ХОВЕР-ЭФФЕКТЫ
Кнопки, ссылки и другие интерактивные элементы должны обязательно реагировать на курсор. Можно менять цвет, размер или добавлять небольшую анимацию. Тогда пользователю будет проще понять, куда нужно кликнуть.
Давайте дружить
Обсудим ваши задачи и предложим хорошие решения.
