Влияние печатных макетов на веб-макеты

От автора: Джен Симмонс выступила с довольно убедительной речью (видео), где она призывает веб-дизайнеров отойти от доминирующего шаблона проектирования «хедер, контент, сайдбар, футер», с которым мы все хорошо знакомы. Несмотря на все разговоры о том, что полиграфический дизайн мертв или стремительно теряет свои позиции, он все еще намного лучшего качества, чем веб-дизайн, и в нем намного больше разнообразных макетов. И естественно, что нам есть чему поучиться из дизайна печатных журналов, так ведь? В данной статье мы рассмотрим влияние печатных макетов на веб-макеты.

Есть ли в сети специальные инструменты для этого?

Я отвечу да, есть. Смысл в том, что нет необходимости разучивать невероятные трюки с CSS стилями, чтобы делать более интересные макеты, чем сейчас. При помощи старых средств типа обтеканий и абсолютного позиционирования можно делать по-настоящему крутые вещи. Особенно в купе с более современными технологиями, которые сегодня можно запросто изучить, такие как веб-шрифты, медиа запросы и flexbox.

Какие современные инструменты могут нам помочь?

CSS фигуры –просто замечательный инструмент! Разван Калимэн написал целую статью об этих свойствах. Текст можно поместить внутрь фигуры или заставить его огибать ее грани. В качестве граней могут выступать эллипсы, многоугольники или даже маски изображений.

Сара Суидан также написала статью по этому поводу для сайта A List Apart. Не остался в стороне и Чэнь Хуэй Цзин, можете посмотреть его демо:

Посмотрите, как текст хорошо становится на место при отключении свойства.

Для печатных макетов очень подходят vw единицы измерения. С их помощью очень просто, к примеру, задать точный размер контейнера по размерам экрана:

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

За что нам должно быть стыдно?

Больше всего стыдно должно быть за «CSS области», которые имели почти все для успеха. Adobe долго работали над этой идеей, были представлены способы применения (в макетах журнала, как один из наиболее сильных примеров), были разработаны полифилы. Полифилы позволяли тексту обтекать элементы. Элементы же можно было позиционировать и стилизовать как угодно, очень круто.

А затем саму концепцию разбили в пух и прах (несправедливо, как по мне), и движок Blink прекратил поддержку CSS областей. Сара Суидан в своей статье CSS Regions Matter проделала большую работу и показала их важность, но увы, данная концепция оказалась на свалке истории. Я бы вообще сказал, что нам крайне не хватает свойства :nth-everything.

Появятся ли в скором будущем соответствующие инструменты?

Возможно:

Спецификация The CSS Page Floats, кажется, разработана для полиграфических макетов! «В спецификации описывается, как элементы, которые обычно можно увидеть в печатных изданиях – например, таблицы, фотографии с подписями и цитаты — можно форматировать при помощи CSS.»

А в спецификации The overflow, кажется, описывается именно тот принцип, который был заложен в CSS области (направление контента) :

«Свойства продолжения текста дают возможность авторам не вмещать контент в определенный блок целиком, а задать другое место для продолжения контента.»

…тем не менее, не думайте, что вы сможете подстроить любой элемент под контент.

Хотите попрактиковаться? Купите или одолжите у кого-нибудь журнал и пробуйте.

На скриншоте ниже моя работа на выходных. Я купил журнал Gourmet и скопировал один из макетов, который нашел.

Это абсолютно не значит, что нужно тут же забыть все, чему вас научил интернет. Универсальность доступа, адаптивность, все это нужно знать. В своем демо я использовать flexbox для упрощения макета и придания ему жесткости. Чтобы гамбургеры занимали площадь наилучшим образом я добавил свойство background-size: cover;. Сверху еще парочка медиа запросов, и наш макет очень хорошо переключается под разные размеры.

Еще больше примеров

Ниже еще один мой пример:

Статья из журнала Scientific American:

Там даже есть техника SVG type lockup.

Стюарт Робсон создал макет по статье, которую он увидел в журнале Lagom:

Хелен В. Холмс тоже поняла идею:

И она права относительно журнала The Great Discontent:

Вот еще один пример от Барта Венемана:

Это что-то вроде «режиссерских статей»?

В каком-то смысле. Я размышлял о тех одноразовых статьях, которые каждая как намеренно отличались друг от друга. Это похоже на тенденцию, но если оглянуться на 5-6 лет назад, понимаешь, что, скорее всего, веб-дизайнеры просто проспали этот момент.

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

Некоторые вообще не согласны с этой идеей

Некоторым прямо не нравится эта идея. Ну хорошо, всех ведь не убедишь.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: