Что-то закрутился с этим розыгрышем, совсем забыл всех поздравить с первыми днями весны

Задизайнил эту страницу календаря еще в октябре. Лежала, дожидалась своего часа, а я провафлил 😕

С весной!
забирайте к себе на стены, отмечайте дни без алкоголя

Отмечаем среду и ждём сегодня пост 🎉

Как подружить дизайнера и разработчика при проектировании макетов (многабукаф)

Как театр начинается с вешалки, так и разработка крупных проектов начинается с создания дизайн-документации. Учитываются базовые компоненты, которые точно будут в макетах: кнопки, элементы навигации, секции и т.д.

Вроде бы всё понятно и для дизайна, и для разработки, но есть одно НО

Основная проблема команд – отсутствие или недостаточность коммуникации между отделами/компетенциями

Из-за этого возникают ситуации, в которых дизайнер закладывал одно наименование, а разработка использовала другое. Отсюда беспорядок в системе, абсолютное непонимание, на что ссылаться. Даже при выходе нового сотрудника на проект это создаёт миллион проблем

Помогает в таких ситуациях семантика и общие договорённости

Например, дизайнер при проектировании дизайн-системы именует компоненты так, как они выглядят и используются, а разработчик адаптирует их под технические ограничения и соглашения в коде. Если между ними нет договоренности, то в макетах могут быть «Primary Button» и «Secondary Button», а в коде – MainButton и AltButton. В итоге, путаница, ошибки в сборке интерфейса и лишние вопросы

Чтобы этого избежать, важно заранее договориться о правилах именования. Вот несколько рабочих подходов:

/ Унификация названий
Дизайнеры и разработчики должны говорить на одном языке. Например, если дизайнер называет кнопку «Primary», то и в коде она должна быть PrimaryButton, а не MainButton или BtnMain

/ Система именования
Лучше заранее определить, как будут именоваться компоненты: по роли (Primary, Secondary), по функции (Action, Navigation), по контексту (HeaderButton, FooterLink). Это поможет сразу понимать, что к чему относится

/ Единая документация
Все термины и названия должны быть зафиксированы в дизайн-документации и глоссарии. Тогда даже новые сотрудники смогут быстро разобраться, что означает AlertMessage или SnackbarNotification

/ Совместные ревью
Регулярные встречи дизайнеров и разработчиков по вопросам дизайн-системы позволяют избежать разночтений и синхронизировать терминологию

/ Использование токенов
Если закладывать систему токенов (цвета, отступы, тени) с четкими названиями (primary-color, secondary-bg), то разработчики смогут легко применять их в коде без необходимости разбираться в макетах

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

Этот пост родился, когда я просматривал дизайн-систему Контура. Ребята настолько словили общий вайб, что назвали кнопку "Показать ещё" – ЕЩЁКАЛКОЙ 🤪
Важнее всего не то, как называется элемент, а то, насколько все понимают функкцию его работы)))

#дизайнсистемы

Напоминаю, что до конца розыгрыша остаётся всего 2 дня 📣

Не забывайте участвовать, ловить халяву и самообразовываться ❤️

Никогда бы не подумал, что в Пятёрочке будут играть нейро-треки)))
В таких треках голос чаще всего искажён, будто его прогнали через тысячу автотюнов

Так или иначе, не все слышат отличия, особенно, когда снуешь между торговых рядов или полок в ТЦ или магазине

Ниже прикреплю несколько классных примеров моих генераций. Создавал их в Suno в связке с ChatGPT (генерация текстов, описание тональностей, настроения, жанра и инструментов) 🎸

Всей мущинской аудиторией канала поздравляем прекрасных девочек

Спасибо за то, что сияете, вдыхаете жизнь в серое и скучное, дарите эмоции и просто существуете ❤️

С 8ой Мартой 🤵

🎉 Результаты розыгрыша:

🏆 Победители:
1. Vlaa (@nesokolovskaya)
2. Артём (@Artem_menyaylov)

✔️Проверить результаты

Я уже хотел похоронить ИИ возможности в Figma, но вчера на меня снизошло обновление, которое подарило мне блага цивилизации. Будто из каменного века вылез. Люди уже с прошлого лета пользуются всеми шикарными возможностями, а я сижу и залипаю на то, как программма автоматически переименовывает слои в драфтах. Чудо какое-то. А как эффектно ещё реализовано, с анимашками, всё, как мы любим 👀

Из приколов:

– Возможность генерировать изображения
– Автоматическое переименование слоёв
– Рерайт текстов (хорошо понимает русский)
– По запросу можно генерировать прототипы, различные флоу
– Автоматически создаёт интерракции между фреймами. ДЕЛАЕТ ИХ КЛИКАБЕЛЬНЫМИ

📎Вообще есть полноценный годовой давности release notes, который можно почитать тут

среда 📣

Всем прив!

Почти месяц я работаю в event-стартапе, мы разрабатываем уникальный для всех рынков продукт. Так как проект под NDA, я не могу полностью рассказать о продукте, но могу немного приоткрыть занавес внутренних работ, хотя бы теоретически

При создании дизайн-системы я руководствуюсь базовыми принципами. Например, при заведении цветов я их разделяю по типам, описываю их hex, rgb и hsl для фронтенда

Но мы решили прибегнуть к ещё одной цветовой модели, которая вносится в описание. И это OKLCH

Этот способ определять цвета появился в 2020 году, соответственно, ещё не получил широкого распространения


Ребята из Evilmartians написали статью, в которой по кусочкам разобрали преимущества. Если вкратце:

🟡OKLCH избавляет дизайнеров от необходимости вручную выбирать каждый цвет. Дизайнеры могут задать формулу, выбрать несколько цветов, и палитра будет сгенерирована автоматически
🟡OKLCH можно использовать для цветов с расширенным охватом Р3. Например, новые устройства (например, от Apple) могут отображать больше цветов, чем старые мониторы sRGB, и мы можем использовать OKLCH для определения этих новых цветов
🟡Благодаря предсказуемой лёгкости OKLCH обеспечивает лучшую производительность


Вот ещё несколько ссылок для самостоятельного ознакомления:
📎OKLCH в CSS: почему мы ушли от RGB и HSL
📎OKLCH – лучший формат для цвета в CSS
📎OK, OKLCH: колорпикер, помогающий вдумчиво подходить к выбору цвета
📎OKLCH in CSS: Consistent, accessible color palettes

#дизайнсистемы

Вчера в канале О величии в дизайне и продукте наткнулся на пост о виджетах на устройствах Apple

Автор канала делился своими мыслями о том, что для него виджеты потеряли какой-либо смысл. Но один виджет он всё таки упомянул. Когда я обнаружил, что то приложение снова пользуется спросом, моментально полетел его скачивать

Я перестал пользоваться Локетом полтора года назад из-за того, что оно просто перестало работать на территории РФ

Сама концепция до одури проста – делишься фотокарточками с людьми из контактов, которых ты добавил в приложение. И всё!
Но в этом я нашёл очень приятное занятие – замечать мелочи, забавные моменты, необычные ситуации и делиться ими с теми, кому это может быть интересно

Приглашаю желающих законнектиться и обмениваться моментами ❤️

ник в locket: averination

📎Скачать на iOS
📎Скачать на Android

#lovelyjubbly_product

С праздником великой среды, чюваки 😊