пространства
1. Белое пространство (пространство и дыхание в дизайне)
- Используйте равномерный вертикальный интервал между блоками (например, 24-48px).
- Обратите внимание на увеличенный внутренний интервал (padding) вокруг важных блоков, таких как секции героев.
- Не используйте слишком маленькие пробелы - они визуально “сжимают” страницу и затрудняют чтение.
- Используйте большие интервалы для разделов с разным фоном, чтобы создать естественные переходы между разделами.
- Помните об “иерархии белого пространства”: чем важнее элемент, тем больше места вокруг него.
цвета
2. Цвета (Цвета)
- Используйте не более 3-5 основных цветов во всем проекте.
- Определяется палитра бренда: основной, дополнительный и акцентный цвет.
- Ограничьте яркие цвета для кнопок CTA или важных элементов.
- Для фона предпочтительны светлые или очень темные оттенки, чтобы обеспечить высокий контраст с текстом.
- Убедитесь, что цветовой контраст соответствует требованиям WCAG (4,5:1 для текста).
- Используйте один и тот же цветовой тон для всех иконок или иллюстраций.
3. Типографика (шрифты и размер шрифта)
- Выберите 1 основной шрифт для текста и 1 акцентный шрифт для заголовков (если необходимо).
- Создает последовательную иерархию (пример):
- H1: 40-60px
- H2: 28-40px
- H3: 22-28px
- Тело: 16-18px
- Маленький текст: 14px
- Минимальная высота линии - 1,4-1,6.
- Не используйте более 2-3 разных начертаний шрифта на всей странице.
- Убедитесь, что размер шрифта достаточен для мобильного просмотра (не менее 15-16px для обычного текста).