Школа
Вёрстка

Пытаюсь сделать шаблон вёрстки текста для статей про балет

Пытаюсь сделать шаблон вёрстки текста для статей про балет. Но то, что получается, совсем не устраивает меня. Шрифты смотрятся блёкло, вставка теряется и стилистически выбивается из общего оформления, выключка по формату смотрится довольно странно.

Что можно улучшить?

Третья часть. Настроение.

Игорь Стратийчук
23 авг 2017
👁 7115   🗩3
Вёрстка

Пытаюсь сделать шаблон вёрстки текста для статей про балет

Пытаюсь сделать шаблон вёрстки текста для статей про балет. Но то, что получается, совсем не устраивает меня. Шрифты смотрятся блёкло, вставка теряется и стилистически выбивается из общего оформления, выключка по формату смотрится довольно странно.

Что можно улучшить?

Третья часть. Настроение.

Игорь Стратийчук
23 авг 2017
👁 7115   🗩3
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

В первом совете я привёл в порядок изначальную вёрстку, а во втором — провёл быстрый культурный поиск:

Добавим настроение, основываясь на результатах поиска. Каллиграфический заголовок и основной текст Бюросерифом, который основан на старостильной антикве:

Загнутый хвостик у единички напоминает о движениях балерин

Загнутый хвостик у единички напоминает о движениях балерин

Усилим рукотворность шапки. Поменяем шрифт и наклоним заголовок. Верхнюю фотографию по дуге срежем снизу, чтобы намекнуть на театральную сцену:

Следующим шагом надо примерить получившееся решение на разные статьи и балеты, проверить длинные заголовки и понять, каких элементов недостаёт. Кстати, шрифт заголовка может меняться от балета к балету в зависимости от темы.

Принимайте эстафету.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеЯкорные объектыПравило внутреннего и внешнегоЧередование ритма
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Михаил, а как при таком решении будет работать слайдер с фотографиями? Анимация искажений с помощью трансформаций в CSS?

Огромное спасибо за такую фантастическую проделанную работу.

У меня сразу вопрос: а если есть необходимость вставить вместо слайдера с фотографиями слайдер с видео? Или допустимо использовать стандартную схему, или вставлять его, как фактоид?

P. S. Отдельное спасибо за сайт Австралийского балета — это что‑то. Про каждого артиста балета, включая кордебалет, есть отдельная страница, где указан какой‑нибудь интересный факт про него. Такая мелочь, но балетные были просто в восторге от этого, невероятное уважение к артистам :‑)

Игорь, маленькое видео выглядит насмешкой. Трудно даже понять, что это видео.

Для видео вполне можно придумать свой формат.

Кстати, я старался выравнивать содержимое боковых колонок по верху строчных текста в основной.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы