Содержание
Эта статья впервые появилась в 229-м номере журнала .net - самого продаваемого журнала для веб-дизайнеров и разработчиков.
Когда дело доходит до макета страницы в HTML / CSS, одна из самых важных вещей, на которых вы можете сосредоточиться, - это вертикальный ритм - визуальный паттерн, в который формируются блоки текста или строки текста при сканировании вниз по странице.
На этот ритм могут влиять и другие факторы, такие как заголовки, элементы списка, изображения и т. Д. Хороший вертикальный ритм имеет первостепенное значение, потому что он способствует удобочитаемости и возможности сканирования ваших страниц.
В Интернете есть довольно много отличных руководств (см., Например, здесь и здесь), где вы можете найти о том, как технически достичь правильного вертикального ритма, используя em для вашей высоты строки, и узнать о том, что поддерживает ваш тип «в фазе» средства.
Иерархия
Основные вещи, на которые следует обратить пристальное внимание, - это высота линии между элементами и общая визуальная иерархия на странице. Установка правильных пропорций линии и высоты может быть сложным дизайнерским упражнением, но с этим важно овладеть. Иерархия также важна, поскольку изображения и текстовые элементы должны визуально гармонировать друг с другом - наиболее важные элементы обычно крупнее и появляются на странице первыми.
Дизайнеры полиграфии сталкивались с идеей вертикального ритма в течение многих лет, и только в недавнем прошлом веб-дизайнерам пришлось по-настоящему вникнуть в этот материал. В связи с постоянно возрастающей необходимостью создавать веб-сайты с использованием макетов сетки и уделять внимание адаптивным реализациям для размещения экранов различной ширины, сейчас это более важно, чем когда-либо прежде, с точки зрения визуального дизайна, возможно, даже больше, чем просто с технической точки зрения.
Пять примеров для проверки
1. Элементы типографского стиля Эта книга Роберта Брингхерста является стандартом для изучения книгопечатания. Прочтите это, потребляйте, влейте в свой мозг любым возможным способом.
2. Фрэнк Чимеро Недавний редизайн личного веб-сайта дизайнера Фрэнка Чимеро не только в целом потрясающий, но и демонстрирует великолепный вертикальный ритм. Он использует эффект параллакса, чтобы вернуть ритм домой, когда вы прокручиваете страницу вниз.
3. Дэн Седерхольм Хороший пример отличного типографского вертикального ритма можно найти в блоге Дэна Седерхольма. Высота строки текста и заголовков находятся в идеальной пропорции.
4. Focus Lab Фирма по веб-дизайну и брендингу Focus Lab ловко использует иерархию, чтобы помочь донести до посетителя то, что наиболее важно.
5. Typofonderie Веб-сайт Typography Studio Typofonderie имеет отличный вертикальный ритм с изображениями и текстом. Расстояние между элементами пропорционально на всем сайте, а иерархия между основным изображением и второстепенными изображениями / разделами идеальна.
Откройте для себя 10 удивительных примеров экспериментального дизайна в Creative Bloq.
