Вплив друкованих макетів веб-макети

37

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

Є в мережі спеціальні інструменти для цього?

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

Які сучасні інструменти можуть нам допомогти?

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

.element {
shape-outside: polygon(0 0, 0 300px, 300px 600px);
}

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

Вплив друкованих макетів веб-макети

Подивіться, як текст добре стає на місце при відключенні властивості.

Вплив друкованих макетів веб-макети

Для друкованих макетів дуже підходять vw одиниці вимірювання. З їх допомогою дуже просто, наприклад, поставити точний розмір контейнера за розмірами екрану:

header.full-screen-hero {
height: 100vh;
background: url(/images/supergirl.jpg);
background-size: cover;
}

Звичайно, не будемо згадувати про кращого друга дизайнерів макетів, flexbox. Якщо витратити трохи часу на вивчення flexbox, я думаю, ви отримаєте суперздатності, за допомогою яких ви зможете в голові подати макет будь-якої складності.

За що нам має бути соромно?

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

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

Чи з’являться в недалекому майбутньому відповідні інструменти?

Можливо:

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

Вплив друкованих макетів веб-макети

А в специфікації The overflow, здається, описується саме той принцип, який був закладений в CSS області (напрямок контенту) :

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

…тим не менш, не думайте, що ви зможете налаштувати будь-який елемент під контент.

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

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

Вплив друкованих макетів веб-макети

Це абсолютно не означає, що потрібно тут же забути все, чому вас навчив інтернет. Універсальність доступу, адаптивність, все це потрібно знати. У своєму демо я використовувати flexbox для спрощення макета і додання йому жорсткості. Щоб гамбургери займали площу найкращим чином я додав властивість background-size: cover;. Зверху ще парочка медіа запитів, і наш макет дуже добре перемикається під різні розміри.

Вплив друкованих макетів веб-макети

Ще більше прикладів

Нижче ще один мій приклад:

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

Вплив друкованих макетів веб-макети

Там навіть є техніка SVG type lockup.

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

Вплив друкованих макетів веб-макети

Хелен Ст. Холмс теж зрозуміла ідею:

Вплив друкованих макетів веб-макети

І вона права щодо журналу The Great Discontent:

Вплив друкованих макетів веб-макети

Ось ще один приклад від Барта Венемана:

Це щось на кшталт «режисерських статей»?

У якомусь сенсі. Я думав про тих одноразових статтях, які кожна як навмисно відрізнялися один від одного. Це схоже на тенденцію, але якщо озирнутися на 5-6 років назад, розумієш, що, швидше за все, веб-дизайнери просто проспали цей момент.

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

Деякі взагалі не згодні з цією ідеєю

Деяким просто не подобається ця ідея. Ну добре, адже всіх не переконаєш.