Мокап за пару мин

Когда оформляю кейсы, иногда использую Shots — удобный сервис для быстрой упаковки вашего дезигна в устройства. Выбираешь айфон, айпэд или другой девайс, закидываешь скрины, настраиваешь фон, тени и композицию — затем быстренько все это экспортируешь

Много бесплатных возможностей, жаль только, что экспорт в 2x разрешении убрали из бесплатных плюшек, но всё равно сервис остается одним из самых быстрых решений для презентации работ.

Если нужно быстро собрать визуал для портфолио или показать клиенту концепт в красивой обертке — рекомендую попробовать 👊

Заценить че там ▶️

💬 Тултип

10 плагинов Figma

С тех пор, как в фигму накатили нейронку смысл многих плагинов исчез, но есть некоторые, которыми я пользуюсь до сих пор

HTML to Figma
Позволяет вставить ссылку на страницу сайта и перенести всю эту страницу в виде макетов в фигму с сохранением лэйаутов, всех свгэшек и так далее

Unsplash
Это незаменимый плагин, если нужно быстро и самое главное, качественно вставить профессиональные фото в свой дизайн. Самое интересно, что в Unsplash есть платные и бесплатные фото, но этот плагин дает вставлять фото даже из платных коллекций. Баг или фича?

Animate on path
Если очень нужно проанимировать элемент по определенной траектории и когда не помогает smart animate

Isometric
Сделать из фотографии или вектора изометричное изображение

I 3D
Когда нужно сделать 3D из вектора

Image tracer
Делает из фотографии вектор. Лучше всего работает с простыми формами

Figmoji
Добавляет векторые эмодзи в проект

Design Kit Pro
1200 3D объектов в разных стилях в качестве 4K для ваших дизайнс. Пока бесплатно. Не сильно успел его попробовать, но выглядит неплохо

Propstar
Очень полезно, если вы хотите создать полноценный UI Kit. Берет компонент и создает таблицу в которой показывает все его возможные состояния, размеры и другие настройки

Lazy load
За 5 сек делает скелетоны макета. Минус в том, что их нельзя кастомизировать

Вот такой набор. Если знаете что-то еще полезное — кидайте в комменты, всегда рад новым инструментам 👁

💬 Тултип

Шел 6 рабочий день

Любуемся интерактивной WebGL черной дырой с настраиваемыми параметрами, а также версией с музыкой из «Интерстеллара» для максимального погружения 👩‍🚀

💬 Тултип

Дизайн система Мегафон

Хорошо упакованная дизайн система от Мегафона. Меня зацепило, что есть гайдлайны по созданию 3D и иллюстраций — интересно было посмотреть на подход. Компоненты в фигме можно было и получше проработать, конечно

📱 Смотреть сайт
📱 Фигма файл

💬 Тултип

Привила работы с Курсор | Часть 2

Продолжаю делиться инсайтами, которые я сделал после продолжительного (и не всегда приятного) общения с Курсор ☺️

Похожие ошибки
Если в процессе написания кода возникает ошибка, которая уже ранее была успешно решена в другом месте проекта, скажите Курсору, чтобы он посмотрел, как он уже решал её до этого. Это значительно сократит время на поиск решения и снизит риск новых ошибок.
В идеале попросите Курсор завести memorybank, где он запишет ошибку и найденное решение — так к ним будет легче возвращаться в будущем.
Пример: у меня в интерфейсе есть форма создания мероприятия и форма редактирования. И там, и там есть инпут с вводом локации, но в одной форме он отрабатывал правильно — при вводе показывал список потенциальных мест, а в другой список вообще не появлялся. Если просто сказать Курсору решить эту проблему, появляется куча рисков. Куда проще дать конкретную инструкцию: «Сходи в форму создания, посмотри как там это реализовано, найди отличия и примени то же решение здесь»

Правильные решения
Можно решить потенциальные проблемы ещё на этапе написания промта. Если у вас в интерфейсе уже есть решение, которое вас устраивает, просто скажите, чтобы при написании кода Cursor ориентировался на него.
Пример: на одной странице у вас есть красивый скелетон, а на другой просто крутится лоадер при загрузке. Если вы скажете сделать скелетон на другой странице, Cursor будет заново придумывать реализацию. Вместо этого лучше сказать: «Посмотри, как сделано на странице X, и реализуй так же». Таким образом вы избавите Cursor от лишних размышлений, а себя — от его возможных ошибок.

Следите за тем, что он делает
Вайбкодинг не такой уж и вайбовый. У меня ещё ни разу не получалось посмотреть ютубчик в этом процессе, потому что я всегда наблюдаю за тем, не пишет ли он лишний код, не нагромождает ли избыточные CSS-правила или вообще не сносит ли половину сервиса.
Однажды, пока я отвлёкся, Cursor долго не мог поменять стиль шрифта у заголовка на свёрстанной странице — и в этот момент решил, что легче удалить всю страницу и переписать её заново. По итогу, он удалил страницу и не смог заново её написать. Я попытался сделать бэкап в самом Cursor'е, но не получилось. А так как проект не был синхронизирован с репозиторием на GitHub, пришлось делать всё заново. Из этой истории логично исходит следующий пункт.

Заведите репозиторий на GitHub
Это позволит вам создавать облачные версии своего проекта и в случае чего откатиться к рабочей версии. Также последующий деплой будет делаться через него.
Разберитесь с понятиями: мердж, ветка, коммит и основными командами для Git. Таким образом вы не потеряете прогресс и будете лучше понимать, где искать ошибку.

Наберитесь терпения
Будьте готовы к тому, что ничего и никогда не получится сделать с первого раза. А если получится — значит, вы просто пока не заметили ошибку.

А что случалось с вами во время вайбкодинга? Пишите в комментах свои инсайты, лайфхаки или просто истории про вайбкодинг — будет интересно глянуть 👁

Кстати, я немного причесал UI и поработал над навигацией, так что заходите посмотреть

💬 Тултип

DODO дропнули свои гайды в открытый доступ

Будет полезно тем, кто хочет прокачать написание текстов в интерфейсе, а также узнать про подход ребят к созданию креативов для своего бренда — видео, фото, сторис, баннеры и тд.
Получилось со вкусом 🍽

Заценить

💬 Тултип

Бесплатные библиотеки компонентов

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

coss.com/ui
basecn.dev
ui.shadcn.com
smoothui.dev
hextaui.com
tailark.com
uxeui.com
magicui.design
heroui.com
shoelace.style
animate-ui.com
8bitcn.com

💬 Тултип

Как понять дизайн системы?

Одной из первых задач на моей текущей работе было собрать и описать все компоненты, которые используются в продукте, попутно дополняя и улучшая детали. То есть, по сути, создать Figma-файл с дизайн-системой, который впоследствии будет перенесен в код.
В первую очередь я задался поиском качественных примеров, чтобы спиздить переиспользовать лучшие практики. Сегодня хочу поделиться своим топом дизайн-систем, реализованных в Figma, на которые стоит посмотреть, если вы хотите понять, как грамотно выстроить свой Figma-файл так, чтобы все, кто туда заходят, сразу понимали, что к чему 🚬

Atomaro
Тут постарались ребята из Ростелекома. Отдельный лайк за классно выстроенную цветовую схему на variables, которая позволяет, меняя один цвет, переключать все связанные с ним цвета. Например, таким образом можно в один клик поменять брендовый цвет и всю структуру цвета Primary..
Также хочу отметить концепцию с слотами внутри компонентов. Слот — это пустой контейнер у которого внутри свойство swap instance. Если у вас есть компоненты с произвольным контентом (например, карточка), то с помощью слота вы сможете размещать внутри произвольный контент, не детача компонент

Taiga UI
Дизайн система от Т Банка. Есть светлая и темная тема, а также крутой сторибук в котором намного больше компонентов и все можно потыкать

EPAM UUI
Очень структурный подход от команды EPAM. Почти у всех компонентов есть ссылка на гайдлайны использования и, помимо этого, есть отдельный файл с паттернами Радует то, что дизайн система не прекращает развиваться, совсем недавно вышло свежее обновление

А какие дизайн-системы вы считаете эталонными? Поделитесь своими находками 🤨

💬 Тултип

Зачем продуктовому дизайнеру учить After Effects

Круто, когда ты можешь не просто показать свои макеты, но и вдохнуть в них жизнь💞 Например, с помощью After Effects. Почему именно Афтер эффектс, а не Jitter или еще какой-нибудь аналог? Обычная история для подобных сервисов, это взять урезанный функционал афтера, накинуть пресетов, выкатить в онлайн и просить деняк. Возможностей они дают намного меньше, а реальные плюсы размыты.

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

1) Интерфейс. За что отвечает каждая из панелей. Как устроена рабочая область (сетка, направляющие) и таймлайн
2) Ключевые кадры. Это база
3) Изинги, работа с графиком скорости и силы анимации
4) Маски. Как и в каких случаях применять
5) 3D объекты. Как вставить 3D объект в сцену, покрутить его. Как сделать 3D мокап
6) Камера. Для чего она нужна, как менять её позицию и тд
7) Expressions (bounce, wiggle), которые дают эффект пружинистости в конце анимации
8) Морфинг (когда один объект принимает форму другого)
9) Анимация текста и цифр
10) Как импортировать дизайн из Figma в After Effects
11) Экспорт проекта. Bodymovin для векторных анимаций
12) Как вставить в интерфейс анимированный стикер из телеги (Не обязательно, но прикольно)

Эти знания можно получить за 2-3 месяца практики, советуясь с чатгпт и смотря туториалы на ютубе. Таким образом вы сможете вывести навык презентации на новый уровень и украсить портфолио всякими свистоперделкам. Но, главный профит в том, что при проектировании решений вы начнете чаще думать про анимацию, так как будете понимать как это можно реализовать 🤔

Хочу сделать серию постов, где подробнее расскажу про каждый из пунктов и прикреплю видосы, которые помогли мне в понимании этих основ. А пока что делюсь тем, что получилось после просмотра часового видео от индуса на ютубе

А вы делали анимации в After Effects или других инструментах? Если да — кидайте свои работы, интересно посмотреть ☺️

💬 Тултип

Необычные (но полезные) подборки

Найти иллюстрацию, иконку или 3D-модель сейчас несложно (если опустить вопрос качества 🤦‍♀️). Но есть вещи, о которых не часто вспоминаешь, пока не столкнешься в работе.

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

Email Love — галерея email-рассылок. Когда нужно придумать структуру письма и посмотреть, как другие делают баннеры, кнопки и оформление

Pushkeen — коллекция пуш-уведомлений

Logggos Club — логотипы, разбитые по категориям. Удобно, когда ищешь вдохновение или хочешь понять, как работают визуальные паттерны в разных нишах

Rebrand Gallery — айдентика брендов с шоурилами. Можно сказать rare item

Это не инструменты на каждый день. Но когда они нужны — они очень нужны

💬 Тултип

Telegram Design Contest

Две недели работы — и вот я готов поделиться своим решением конкурсного задания от Телеги 📱

Задание получилось довольно объемным: нужно было с нуля создать новую экосистему Nodes внутри сервиса и адаптировать решение под iOS и Android в светлой и темной темах.

Начал я с понимания того, что такое ноды и зачем пользователю выбирать их, а не обычные группы. Для этого изучил, как устроены серверы в Discord — в чем их суть и принципиальные отличия от привычных чатов. В задании также говорилось, что решение должно быть ready for dev, то есть нужно по максимуму использовать то, что уже есть, и не изобретать велосипед. Поэтому из основных фич нодов я выделил несколько, близких к уже реализованным:

1) Интеграция ботов, в том числе ИИ, которые могут использоваться участниками нодов и модерировать каналы и треды

2) Треды. Если в канале появляется side talk, не относящийся к теме, его можно перенести в тред, чтобы поддерживать порядок в беседе

3) Интеграция аппов в видеозвонки. Пользователи смогут использовать встроенные аппы Телеги как для рабочих задач (транскрибация беседы, доска для мыслей), так и для развлечений (квизы и другие совместные игры)

4) Приложения в каналах. Можно добавить приложение в канал и, например, вместе с другими участниками зарубиться в Веселого фермера 😀

В своем решении я ограничил пользователя одним Node-профилем на аккаунт. Внутри этого профиля он может создавать сколько угодно нодов на разные тематики — работа, друзья и так далее.
Присоединиться к ноду можно по пригласительной ссылке или найдя его в общем поиске, если нод публичный. Также сама Телега будет рекомендовать ноды по схожим тематикам.

Поиск точки входа
Затем перешел к поиску точки входа. Первая идея — разместить ее в шапке и переключаться между чатами и нодами. Но я быстро отказался от этого решения, потому что:
— Ноды — это не вид чатов, а отдельный сервис со своим профилем, сообщениями, контактами и звонками.
— В шапке и так много навигации, которую нельзя трогать, так как она связана со сторис и эмодзи-статусом — фичами, важными для конвертации обычных юзеров в премиум.
В общем, после нескольких заходов я решил, что лучше всего оставить навигацию в нескольких точках:
— Долгое нажатие на кнопку настроек раскрывает все аккаунты и связанные Node-профили.
— В Node-профиль можно перейти из раздела «Настройки».
— Двойной тап по кнопке настроек переключает пользователя с основного аккаунта на Node-профиль. Такое же решение используется в Инстаграме, поэтому подумал, что для пользователя это не будет чем-то из ряда вон.

Проектирование экрана нодов
После определения точки входа перешел к проектированию самого экрана нодов. В задании было несколько моментов, которые нужно учесть. Во-первых, упоминалось, что навигацию в нодах предлагается реализовать в виде левого сайд-меню, через которое можно вернуться в основной профиль и переключаться между нод-профилями. Ну и что идею можно подсмотреть в Discord.

При создании решения для IOS я уже знал, что навигация в андроидовской Телеге отличается кардинально, поэтому это не стало сюрпризом. Спасибо ребятам из Свеженьких, которые поделились скринами. Затем на помощь пришел мой старенький Meizu, на котором я продолжил изучать структуру андроидовского решения.

Финальный босс
В конце меня ждал финальный босс — анимация решения в After Effects. Изначально я выделял на это минимум два дня, но со всеми темными и светлыми темами у меня остался всего один день. Когда я сел за анимацию, стало понятно, что этого точно не хватит. А без анимации все 100500 макетов можно выкидывать. Я начал переживать, но тут повезло — срок сдачи продлили на день, и это помогло доделать решение (даже получилось жидкое стекло сделать)

Итоги
Результаты будут позже, но уже сейчас могу сказать, что вынес много полезного из всего процесса.
📱 Фигма-файл, макеты и 📷 превью можно посмотреть в специальном конкурсном канале

💬 Тултип

Внутренняя кухня Домклика

Сегодня делюсь подборкой интересного чтива 🧐 про то, как устроены внутренние процессы у ребят в Домлике

Как выстроить работу команды продуктовых дизайнеров, не привлекая внимания санитаров
Делятся практическими форматами работы дизайн-отдела (ревью, синки, проектные встречи) и микрокультурами, которые реально улучшают продуктивность и коммуникацию в команде. И всё это подано через живые кейсы и форматы, делающие работу менее рутинной. Например, решение ребуса в начале дня для настройки нестандартного мышления или написания эссе о проделанной работе от лица героев Звездных Воин

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

Как понять, что продуктовый дизайнер работает неэффективно
Описывают признаки слабой эффективности (нет влияния на метрики, плохие решения, отсутствие инициативы) и дают конкретный план исправления через KPI, обратную связь и PIP. И в конце — когда пора принимать жёсткие решения 🔫

А какие интересные фишки в устройстве рабочего процесса есть у вас в компании?
Поделитесь в комментариях — всегда интересно посмотреть, как это устроено у других 👁

💬 Тултип

Lab UI

Врываемся в новый год с красивым UI Kit от Дани из Лабпикс

— Токены, основанные на семантике
— Режимы с Liquid glass, Ambient-материалы с solid-поверхностями
— Прогрессивные тени и размытия, Blur'ы
— Авто-адаптивы на мобилки
— Тёмная и светлая темы
— 30+ UI-компонентов
— 400+ авторских иконок (мне прям зашли)
— Флаги всех стран мира

Мне понравилось оформление UI Kit, прям по дизайнерски сделано 😌, а также грамотно выстроенная структура кита. Отдельный респект за внимание к деталям — описание компонентов и их превьюшки 💪

Заценить кит

💬 Тултип