Шаблон договора на создание дизайна

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

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

Так что — рекомендую сохранить и сэкономить свое время на поиске или составлении этого крайне важного документа, который сэкономит ваши нервы и деньги в долгосрочной перспективе 🤝

Скачиваем тут ➡️

💬 Тултип

Редизайн интерфейса | Подборка статей

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

Редизайн интерфейса системы мониторинга пациентов в реанимации

Редизайн хэдэра в сложном продукте (цифровизация строительства)

Как обновляли интерфейс касс самообслуживания, которыми будут пользоваться покупатели в 150 тысячах магазинах | 2 часть

Кейс с редизайном деталей стратегии в Т-инвестициях (Как мы похоронили метрики и вновь оживили :)

💬 Тултип

Тестовое задание в Кинопоиск📱

Делюсь неплохо выполненным тестовым заданием для Кинопоиска от дизайнера Алины Устьянцевой. Кейс разбит на смысловые блоки — исследование, user flow, персоны и сами макеты. Особенно меня порадовали нарисованные макеты ручкой в тетради, выглядит интересно и может выделить вас среди других кандидатов (или нет)

📱Смотреть фигму
📝Читать кейс на VC

Другие тестовые на канале 👨‍💻
Альфа банк
Алиса
Вкусвилл
База (50+) тестовых заданий

💬 Тултип

Лучшее, что есть на VC

1. Заходим в приложение VC
2. Бесконечно нажимаем на иконку уведомлений
3. Узнаем историю колокольчика

Делитесь в комментах до какого момента удалось дойти. Я остановился на его размышлении о том, что я нажимаю на него, так как чувствую пустоту внутри и он меня понимает...😂

💬 Тултип

5 книг для дизайнера не про дизайн (а про бизнес)

Продуктовый дизайнер — это не только оператоp фигмы, но и стратегический партнер, который понимает, как его работа влияет на прибыль компании. А если вы планируете расти в тимлида или арт-директора, то без понимания бизнес-процессов вообще никуда. Хочу поделиться небольшой подборкой книг, которые помогут развить системной мышление и способность видеть общую картину

1. «От хорошего к великому» — Джим Коллинз
Автор проанализировал более 1000 компаний, что вывести для нас основной тезис — великие компании строят скромные трудоголики, которые сначала собирают команду мечты, а потом уже решают, что делать. Секретная формула проста: сначала «кто» (правильные люди в автобусе), потом «что» (куда ехать)

2. «TOYOTA. Путь к совершенству» — Цунёси Нодзи
История о том, как японская компания, которая начинала с ткацких станков, стала производить самые надежные машины в мире. Автор раскрывает 14 принципов Toyota, которые лежат в основе ее концепции бережливого производства. Как родилась методология Канбан и культура постоянных улучшений кайдзен (это очень близко с дизайном продукта)

3. «Клиенты на всю жизнь» — Карл Сьюэлл
Сьюэлл владеет автосалонами в Техасе и понял простую истину: машины у всех одинаковые, зато сервис может быть разным. Он начал мыть машины клиентам бесплатно, возить их на работу, пока идет ремонт, и устраивать шумные вечеринки для своих клиентов. Думаю, это близко к концепции 10-звездочного опыта Airbnb

4. «Эффективный руководитель» — Питер Друкер
Дедушка менеджмента учит, как не сойти с ума от дедлайнов. Книга от Питера Друкера — человека, который изобрел половину терминов менеджмента. В ней он рассказывает про эффективных руководителей, которые:
-Управляют временем — знают, куда уходят часы, и контролируют то немногое, что можно контролировать
-Фокусируются на результате — важны достижения вне стен офиса, а не просто «работа ради работы»
-Развивают сильные стороны — свои и команды, вместо бесконечной борьбы со слабостями
-Расставляют приоритеты — концентрируются на 2-3 ключевых задачах, которые дают максимум результата
-Принимают стратегические решения — думают о долгосрочной перспективе, а не тушат текущие пожары

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

Каких книг не хватает в этом списке? Делитесь в комментах👁

💬 Тултип

Как спроекировать лендинг для Tech продукта?

Дизайнер из Evil Martians проанализировал 100+ лендингов топовых инструментов (Linear, Vercel, Supabase) и выяснил, что реально работает в 2025. В качестве бонуса — готовый open source шаблон для быстрого запуска

Внутри:
Главный блок — 6 способов показать продукт (от анимированного UI до живых демо)

Нам доверяют — B2B логотипы vs цифры для соло-девелоперов, почему отзывы лучше встраивать прямо в фичи, а не в отдельный блок

Фичи — 5 способов рассказать историю продукта

Вспомогательные секции — когда нужен FAQ, стоит ли показывать цены на главной, и как интеграции добавляют веса продукту

Финальный CTA — последний шанс конвертнуть посетителя

Читать тут ➡️(VPN)

💬 Тултип

11 анимаций интерфейса в фигме

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

Забрать бриллианты 💎

💬 Тултип

База знаний дизайнера

Недавно я подготовил статью о том, как определить свои точки профессионального роста, как и куда двигаться дальше. Сегодня хочу дополнить её доской в Miro на которой я собираю полезные ссылки для роста дизайнера.
Я разбил доску компетенций на 5 крупных блоков — UI, UX, Исследование, Коммуникация и Продуктовое мышление. Сейчас заполнен блок UI, в нем уже 150+ ссылок и он регулярно пополняется. Здесь собраны статьи, полезные материалы и сервисы, которые помогут бустануть эффективность рабочего процесса 👨‍💻
Материалы разбиты по категориям — анимации, дизайн системы, илююстрации, шрифты и много чего еще. Сам регулярно залезаю на доску, когда нужно быстро найти пак иконок либо подсмотреть какую-нибудь дизайн систему

Сохраняйте себе, пользуйтесь и делитесь с корешами.
Знаете что-то огненное? Кидайте в комментарии — дополним коллекцию вместе 🔥

Смотреть доску ➡️

💬 Тултип

100+ часов вайбкодинга. Курсор начал лучше меня понимать

💬 Тултип

Библиотека UI элементов

Чекайте библиотеку всяких UI приколюх. Тут кнопки, инпуты, формы с прикольными анимациями. Все элементы можно забрать как компоненты на React, Tailwind или Html/CSS, а можно просто себе в фигму и там уже довести его до ума.
Мне кажется, неплохо, чтобы быстро найти вариант, как сделать свой концепт поживее и поинтереснее или вдохновиться на анимацию.
Этот ресурс уже на доске

Чекнуть ресурс ▶️

💬 Тултип

Анимации в интерфейсе

До анимаций в интерфейсе обычно доходят в последнюю очередь — когда кажется, что всё остальное уже доведено до идеала (никогда). Про анимации часто говорят, но действительно полезной информации о том, как их правильно использовать, не так уж много.
На русском языке внятных гайдлайнов я не нашёл, поэтому собрал подборку англоязычных источников. Эти материалы помогут разобраться:
· когда анимация действительно нужна;
· какой она должна быть, чтобы не мешать, а улучшать опыт пользователя;
· как корректно подготовить и передать анимацию разработчикам для продакшна

Как передают анимацию в разработку в Wise

Криптокошелек Family и про консистентность анимации в нем

Как устроены 2D,3D анимации и motion в Cash App

Material Design 3: Motion physics system

Animation/Motion дизайн токены от дизайнера LinkedIn

Дизайнер из IBM рассказывает про основные параметры анимаций

Если есть примеры русскоязычных статей про анимации в интерфейсах — жду ваши ссылки в комментах👁

💬 Тултип

Как делают вкусные сайты?

Недавно поймал себя на мысли: а как вообще делают все эти крутые 3D-анимации на сайтах, где можно покрутить модельку мышкой или подвигать что-то скроллом? Типа вот этого или вот этого

Расскажу, как сам это понял. В основе лежит WebGL — штука, которая напрямую общается с видеокартой и позволяет рисовать 3D прямо в браузере. Но в самом WebGL хер разберешься, поэтому обычно никто не пишет напрямую на нём. Вместо этого используют Three.js — такую библиотеку-надстройку. С ней уже всё проще: создал сцену, поставил камеру, закинул свет, подгрузил модель — и у тебя на экране готовая тридэшка.

Дальше встаёт вопрос: а как оживить эту сцену? Чтобы не просто стояло, а красиво двигалось, реагировало на скролл, меняло угол обзора при движении мышкой. Тут подключается GSAP — библиотека для анимаций. Она отвечает за плавность, тайминги и синхронизацию: камеры двигаются вместе со скроллом, объекты появляются и исчезают как по нотам, всё крутится и переливается.

И вот именно связка Three.js + GSAP даёт тот самый эффект, когда сайт не просто смотришь, а прям хочется «пощупать» и залипнуть. В общем, тот самый эмоциональный дизайн.

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

Покидайте в комменты сайты, которые вам настолько нравятся, шо прям не оторваться. Интересно будет глянуть 👁

💬 Тултип

Матрица DACI от Avito

В Avito заметили, что не все всегда понимают, кто и какую роль играет в задаче — это порождает хаос и замедляет принятие решений.
Чтобы навести порядок, ребята внедрили таблицу по модели DACI, где:

Driver — организатор, ведёт процесс и отвечает за результат.

Approver — заказчик, принимает и оценивает итоги.

Contributor — исполнитель, делает руками или консультирует.

Informed — информированный, просто в курсе.

Полезный инструмент, который поможет повысить прозрачность процессов и поможет организовать процессы в команде. Они еще и симпатичный лендос на эту тему подготовили

Смотреть таблицу 🔣

💬 Тултип

200 часов вайбкодинга | Первые результаты

Начну сначала. Мой друг в последнее время достаточно часто переезжал. В это период жизни он наиболее остро ощутил потребность в живом общении и как сложно, при нынешнем темпе жизни и с текущей тенденцией на уменьшение социальной активности, адаптироваться к новым местам, найти друзей, банально социализироваться и развивать нетворкинг. Одна из вещей которая помогла ему везде найти единомышленников это его велосипед)

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

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

После долгих размышлений было принято решение попробовать навайбкодить mvp сервиса. Целью было попробовать возможности вайбкодинга ну и, в идеале, создать работающий прототип, который позволит собрать обратную связь и понять че мы вообще хотим дальше.
Что сейчас можно сделать:
1. Зарегаться через гугл и заполнить свой профиль
2. Просматривать ивенты, добавлять их в избранное и делиться
3. Создать свой ивент и загрузить туда GPX маршрута, который отобразится в виде интерактивной карты

Такие дела. Потыкайте интерфейс и скажите как вам)
А я в следующий раз расскажу подробнее про процесс, поделюсь основными инсайтами после 3 месяцев проведенных с Курсором, а также про дальнейшие планы

Посмотреть че там ➡️

💬 Тултип

Правила вайбкодинга
За последние 3 месяца я провел 200 часов в Cursor и хочу поделиться мыслями, которые сэкономят вам нервы и время, если вы решились повайбкодить. Я буду рассматривать Cursor, но эти правила подойдут и для других аналогов

Cursor — это стажер
Представьте Курсор, как стажера, который готов стараться, но которого критически нельзя оставлять наедине со своими мыслями и нужно давать четкое направление что делать, каким образом либо наводить его на эти мысли. Без вашего направления он может, допустим, решить, что для того, чтобы поменять цвет у кнопки Primary он не будет переписывать стиль, а навесит сверху еще парочку, которые затем усложнят ваш код и жизнь

Вы должны знать, что вы хотите
Нельзя просто написать прост «сделай страницу как у Apple по братски, чтоб красиво было». Ну точнее можно, но результат вас неприятно удивит. Чем конкретнее промт — тем меньше итераций до нормального результата. Это как с дизайнером: скажете «сделай что-нибудь красивое» — получите что-нибудь

Начинаем с дизайн системы
Не буду рассказывать про преимущества использования дизайн системы. Это просто нужно сделать, иначе каждая кнопка будет вырисовываться каждый раз заново и ваш проект будет готов тогда, когда ИИ наши рабочие места. Я использовал Ant Design, потому что в ней есть все (или почти все), что вам нужно. Можно также подключить Shadcn — более современный вариант. Или Framework7, если делаете что-то мобильное.
Главное — выберите одну систему и скажите Cursor использовать только её. Пропишите это в rules или просто напоминайте в каждом промте: «Используй компоненты из Ant Design». Иначе он начнет импровизировать, и вы получите адскую мешанину из самописных компонентов, библиотечных и вообще непонятно откуда взявшихся

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

Постановка задач среднего размера и брейншторминг
После того как у вас наметился план, беритесь за дело и задавайте задачи среднего уровня. Например: «Спроектируй главную страницу. На ней должен быть хедер, фильтры, карточки — как в макете». Если на странице будут использованы новые компоненты, обязательно напишите, чтобы Cursor брал их из дизайн-системы (которую вы уже, надеюсь, подключили). Но самое важное — дайте ему поразмышлять. Дополните промт фразами типа: «Пока не пиши код, поразмышляй о том, что я не учел. Какие у тебя еще есть вопросы? Как мое решение сделать более проработанным?». Это работает хорошо. Cursor начинает задавать вопросы, на которые вы сами не подумали: «А как должны вести себя фильтры на мобилке?», «А нужна ли пагинация для карточек?», «А что показывать, если карточек нет?». В общем, продумавыет разные корнерсы
Доработка и постановка маленьких задач. Максимум конкретики
Когда будет готова страница, то вам нужно будет пройтись по каждому блоку и контейнеру, рассказать, что в нем не так и попросить исправить. Нужно будет прям заходить в инспектор кода, скринить оттуда проблемное место и описывать то, что вы хотите сделать, а еще лучше давать скрин макета с правильной версткой. Во время исправлений можно попробовать обматерить ИИ, тогда эффективность вырастает на 4-6%. Не могу заверить, что это так, но по ощущениям работает 😅

Это была первая часть моих мыслей от опыта вайбкдинга. С какими проблемами вы сталкивались в вайбкодинге и что вас бесит больше всего?

💬 Тултип

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

Когда оформляю кейсы, иногда использую 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 черной дырой с настраиваемыми параметрами, а также версией с музыкой из «Интерстеллара» для максимального погружения 👩‍🚀

💬 Тултип