Айдентика телевизионной индустрии и новый подход к дизайну адаптивности веб-сайтов. Журналус Лайт №18
Шесть интересных и полезных материалов для дизайнеров из свежего выпуска Журналуса.
Google Maps API x Houdini. Эффектные визуализации городских пейзажей, созданные в Houdini на базе 3D-данных из API Google Maps. Автор — Роберт Ходжин, дизайнер из США.
Возможность использовать данные из Google Maps появились недавно, поэтому Роберт не только решил с ними поэкспериментировать, но и описал в статье техническую сторону проекта, которая позволит создать нечто похожее.
Too Much To Watch. Свежая и современная айдентика конференции, посвящённой телевизионной индустрии.
Стиль полностью построен вокруг вариативной анимированной типографики, которая, надуваясь и сталкиваясь между собой, заполняет пространство кадра. Такой приём позволил адаптировать айдентику под любые форматы.
Аида Пачева написала о подходе в проектировании, который позволяет создавать более гибкие адаптивные сайты. Вместо упора на адаптивность всей страницы целиком, она предлагает использовать современные возможности CSS и делать адаптивными отдельные компоненты, чтобы браузер мог самостоятельно решать, когда менять их внешний вид. Таким образом можно создавать страницы, которые будут максимально гибко работать на любом девайсе.
Главные мысли из статьи:
- Люди используют 2300+ вариантов ширины браузера, а значит оптимального вьюпорта не существует и адаптивность должна быть гибкой
- Для достижения гибкости не нужно создавать брейкпоинты под каждую ширину. Вместо этого можно использовать запросы min(), max() и clamp(), чтобы адаптировать отдельные компоненты
- Некоторым компонентам не нужно прописывать состояния под каждый брейкпоинт. Например, хедеру может хватить двух состояний: навигация, свёрнутая в бургер и развёрнутая
- При адаптации отдельных элементов возрастёт количество брейкпоинтов, но общее количество состояний объектов, которые придётся проектировать, станет меньше
- Если компоненты изменяются на близких значениях ширины (например, 995px и 1000px), то стоит их синхронизировать
- Чтобы независимые компоненты сходились вместе по вертикальным направляющим, нужно использовать глобальные правила для сетки и шрифтовых стилей, которые будут работать в конкретных диапазонах брейкпоинтов
- Адаптивность также может быть многоуровневой. Например, при изменении ширины браузера может меняться блок с карточками, а уже при изменении ширины карточки в этом блоке будет перестраиваться её содержимое
Дружелюбное псевдовинтажное оформление консервированной фасоли Heyday Canning Co, выполненное в духе упаковок середины 20-го века. Дизайн построен на смягчённых оттенках, лаконичных стилизованных иллюстрациях, а также на крупной типографике в стиле ар-деко.
Ещё десятки материалов в полной версии выпуска (доступна подписчикам):