Тренд: вёрстка лендингов в одну колонку
Подметил новый и набирающий популярность ход в дизайне лендингов. Их верстают в одну, часто узкую, колонку
Смотрится свежо, упрощает адаптацию к разным устройствам, проще управлять вниманием зрителя
Примеры, которые я нашёл:
— alexandersandberg.com/balance
— spoil.me
— sfcompute.com
— supertape.com (почти, но не совсем)
Если знаете другие примеры, присылайте в комментарии
#awd_web #awd_trend #awd_site
Подметил новый и набирающий популярность ход в дизайне лендингов. Их верстают в одну, часто узкую, колонку
Смотрится свежо, упрощает адаптацию к разным устройствам, проще управлять вниманием зрителя
Примеры, которые я нашёл:
— alexandersandberg.com/balance
— spoil.me
— sfcompute.com
— supertape.com (почти, но не совсем)
Если знаете другие примеры, присылайте в комментарии
#awd_web #awd_trend #awd_site
Как правильно реализовать эффект матового стекла на сайтах
Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами
Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS
Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости
В статье есть фрагменты готового кода и интерактивные примеры
В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter
#awd_article #awd_web
Популярный эффект матового или «замёрзшего» стекла почти на всех сайтах, что я встречал, реализован с заметными недостатками: дрожанием, мерцанием и тому подобными дефектами
Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS
Например, он показал, как сделать так, чтобы блюр захватывал элементы, находящиеся рядом с плашкой, как избежать мерцания, как сделать прозрачную фаску, как правильно добавить стеклу визуальной толщины и другие хитрости
В статье есть фрагменты готового кода и интерактивные примеры
В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter
#awd_article #awd_web
Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат
В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику
В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах
awdee.ru/11-ways-of-blurring
#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
11 оттенков размытия — Оди. О дизайне
Как выбрать нужное и заслужить благодарность разработчиков