Шапка сайта: композиция и читаемость
Перед рисованием определите ширину страницы и высоту шапки. Дизайн должен оставлять место для названия, навигации и возможного переноса текста на узком экране.
Как сделать
- Создайте документ в ширине будущего макета и поставьте направляющие для логотипа, меню и свободных полей.
- Постройте фон из одного основного цвета и сдержанной фактуры. На фоне проверьте контраст букв.
- Разместите логотип ближе к началу чтения страницы, а меню — в предсказуемой горизонтальной линии.
- Не превращайте весь текст навигации в картинку: для рабочего сайта надписи лучше оставить HTML-текстом.
- Экспортируйте только декоративный фон или логотип, сравните качество и размер файла, затем проверьте макет на меньшей ширине.
Полезно помнить
Если шапка должна растягиваться, не делайте один широкий фон со встроенным текстом: он обрежется на мобильном экране.