Опубликовали видео с Alfa Design Meetup 23 ноября 2023 года:

1. Вячеслав Киржаев, Альфа-Банк — AI в руках дизайнера цифровых продуктов: как мы делегируем рутину дизайнера нейросетям

2. Кирилл Викентьев, Альфа-Банк — Скайнет на страже пользовательских ценностей: как мы используем AI в командах роста

3. Ольга Петроченко, Альфа-Банк — Почему я так придираюсь к вёрстке: на что дизайнеры часто не обращают внимание при вёрстке макетов, и как этого избежать

4. Геннадий Мохов, mos.ru — Чем занят дизайн-директор: фреймворки, подходы и ритуалы при управлении командой любого масштаба

#ai #figma #layout #management

Аврора Харли написала о принципе общей области.

— Это один из гештальт-принципов, согласно которому элементы внутри границы воспринимаются как группа и имеют общие характеристики и функции;
— Границу формируют рамкой или фоном;
— Помогает быстро понять структуру интерфейса, какие элементы связаны между собой;
— Контрастным фоном на сайтах часто выделяют закреплённое сверху меню и большой футер со ссылками;
— Общую область часто используют в аккордеонах, чтобы сгруппировать содержимое раскрытой секции;
— Это более сильный способ группировки, чем близость или сходство. Подходит, когда надо сгруппировать разные типы элементов и нельзя регулировать отступы. Или когда уже задействованы другие способы, например, в таблице близостью группируются столбцы;
— Чрезмерное использование фонов и рамок создаёт визуальный шум. Иногда полезно убрать лишние рамки и подложки;
— Блоки с контрастным фоном во всю ширину окна могут вызывать ложное ощущение футера на странице, из-за чего пользователи могут закончить прокручивать страницу;
— Прежде, чем добавить рамки и фон, подумайте, необходимы ли они для понимания группировки элементов?

In English. #layout

Игорь Штанг написал об однородности списка.

— Идеальный список должен быть однородным по смыслу и грамматике;
— Смысл: собирать вместе нужно логически связанные вещи;
— Грамматика: формулировать пункты нужно однотипно, по крайней мере, ведущие слова в каждом пункте должны быть выражены одной частью речи в одной форме;
— Пример списка: «Типичные ошибки и проблемы: позволять себе проваливаться в эмоции (главное слово — глагол), самогаллюцинирование (существительное), не держать концентрацию (гл. с отрицанием), нет процесса (сущ. с отрицанием)»;
— Если заменить главные слова на глаголы, по возможности без отрицания: «Типичные ошибки и проблемы: позволять себе проваливаться в эмоции, галлюцинировать в одиночку, терять концентрацию, подолгу не обнаруживать отсутствия процесса»;
— Теперь заголовок и пункты списка можно прочитать одним предложением, и оно будет согласованным;
— Но иногда удобно объединить в один список разные вещи, чтобы не плодить лишних сущностей и лишнего оформления.

Канал Игоря. #writing #layout

Интересная верстка CV-портфолио.

• Можно использовать как в вебе, так и на печатке

#Templates #Layout

Открыть в Figma

👨 Дизайн-телега

Многоуровневое расписание на современном CSS. Нильс Биндер показывает, как с помощью grid, subgrid, round() и mod() построить расписание, где время точно ложится в строки, потоки остаются выровненными, а индикаторы времени и заголовки работают со скролл-анимацией. Подробный разбор структуры, вычислений и приёмов для сложных таймлайнов. #css #layout

https://9elements.com/blog/building-a-multi-stage-timetable-with-modern-css-using-grid-subgrid-round-and-mod/

Новые идеи для раскладок с CSS-сабгридами. Джош Комо объясняет, как сабгриды позволяют вложенным элементам делить родительскую сетку, чтобы карточки, портфолио и тарифы выравнивали изображения и текст по соседям, а не по отдельным сеткам. Подводные камни, вроде резервирования строк, нумерация линий, ограничения гибких сеток и фолбеки для старых браузеров. #css #layout

https://www.joshwcomeau.com/css/subgrid/

Представляем CSS grid lanes. Команда WebKit рассказывает о следующем большом шаге в раскладках для веба: CSS grid lanes добавляет раскладку в стиле masonry в CSS. Первая реализация уже доступна в Safari Technology Preview 234 и позволяет создавать гибкие и доступные раскладки контента и интерфейсов без JavaScript, используя новое свойство item-tolerance и все возможности CSS-гридов. #css #layout

https://webkit.org/blog/17660/introducing-css-grid-lanes/

Слишком ранний брейкпоинт. Ахмад Шадид объясняет, почему многие сайты переключаются на мобильную раскладку слишком рано. На примерах Time и TechCrunch он показывает, как дизайн ломается в сплитах, на планшетах и в превью ссылок iOS. Решение: промежуточные брейкпоинты, выражения от контейнера и гибкие раскладки на гридах и флексах, которые подстраиваются под доступное пространство. #css #layout

https://ishadeed.com/article/too-early-breakpoint/

Introducing masonry-gridlanes-wc — нативный веб-компонент для masonry раскладки. Скалк Нитлинг создал веб-компонент для masonry-раскладки в соответствии с display: grid-lanes из спецификации CSS Grid Level 3. В браузерах с нативной поддержкой grid lanes компонент полностью уступает место браузеру. В остальных случаях используется JavaScript-фолбек для раскладки по колонкам и строкам с настраиваемыми отступами и шириной колонок. #webcomponents #layout

https://schalkneethling.com/posts/introducing-masonry-gridlanes-wc-a-native-first-masonry-web-component/