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