Обновил портфолио: Notion → Framer

Давно хотел попробовать Framer как инструмент — смело рекомендую. Очень много бесплатных возможностей: порадовало, что нет ограничений по количеству страниц (по крайней мере, я в них не уперся), плюс можно бесплатно добавлять кастомный код (тот же Webflow таким похвастаться не может).
Еще один жирный плюс — понятный интерфейс и возможность легко делать анимации текста и других элементов, что добавляет сайту свою изюминку.
И при всем этом, даже с анимациями и контентом, сайт грузится достаточно быстро.

Как сделать портфолио и не сойти с ума? 🔫
1) Составляем список кейсов, которые хотим показать (желательно не больше 6)
2) Для каждого кейса пишем драфт: что именно хотим рассказать, в формате, подходящем под задачу. Тут юзаем метод STAR (Situation, Task, Action, Result)
3) Когда структура кейса готова — начинаем улучшать. Читаем несколько раз подряд и выкидываем весь текст без смысловой нагрузки, оставляем только реально важное
4) Подготавливаем картинки. Смотрим, как это делают другие (десктоп / мобила) и повторяем лучшие решения
5) Делаем сайт. Если нет идей для главной или сложно определиться — берем подходящий шаблон из библиотеки Framer и используем как основу. Дальше развиваем: добавляем элементы, меняем структуру под себя и т.д.
6) Оформляем кейсы уже на сайте, по ходу выкидывая все лишнее. При желании добавляем анимации на текст и картинки
7) Деплоим сайт, показываем маме и знакомым. Собираем обратную связь и шлифуем дизайн
8) Profit

Где подсмотреть оформление портфолио? 👀
Сейчас куча подборок портфолио, но большинство из них мне не зашло — слабые кейсы, много визуала на самом сайте, но мало смысла внутри. В итоге собрал свой список портфолио после жесткого отсеивания — на него и советую ориентироваться: смотреть структуру сайтов, подачу кейсов и подмечать мелкие, но важные детали

https://imbarinov.com/
https://www.charlieosborne.co/
https://hellodani.co/
https://mariyork.notion.site/f91f3e596424409088b90662901544c8
https://danial.si/
https://www.denisabdullin.com/
https://vladkalashnikov.framer.website/
https://lilyakhmetova.com/
https://beisembin.framer.website
https://serega.works/
https://bogdan.kz/
https://bibickl.cargo.site/
https://garri.design/

Мое портфолио здесь 👉

💬 Тултип

8 книг сеньора

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


Моя жизнь, мои достижения | Генри Форд
История о том, как Генри Форд подошёл к построению производства: постоянные улучшения, вырезание всего лишнего, максимум эффективности из каждого квадратного метра. Это и позволило ему сделать автомобиль доступным — до этого это был продукт только для очень богатых.
Много про автоматизацию, рост роли машин и снижение ручного труда. Легко провести параллель с тем, как сегодня ИИ забирает рутину. Тогда тоже боялись, что людей заменят — но, как мы знаем, всё оказалось сложнее.


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


Плохая стратегия, хорошая стратегия | Ричард Румельт
О чем книга ▶️


Сложные решения | Бен Хоровиц
Бен Хоровиц — предприниматель, венчурный инвестор и сооснователь Andreessen Horowitz, который активно инвестирует в технологические стартапы.

Это не классическая бизнес-книга, а разбор того, что делать, когда всё идёт не по плану и «правильных» решений просто нет.

Сильная мысль — про два типа CEO: мирного и военного времени. В «мирное» ты строишь культуру, масштабируешься и думаешь в долгую. В «военное» — режешь лишнее, принимаешь быстрые жесткие решения и фокусируешься на одном: выжить.

Много про культуру. Та самая идея, что «культура ест стратегию на завтрак», здесь раскрывается очень понятным образом: культура — это не ценности на стене, а то, как люди принимают решения, когда никто не смотрит.

Отчасти перекликается с «Радикальной прямотой»: много про честность лидера. Говорить правду, особенно плохую — обязанность. Любая попытка сгладить проблемы убивает доверие и тормозит команду.

Увольнять быстро и прямо, даже если это друзья. Нанимать под задачу, а не «лучших на рынке». Обучение команды — не опция, а часть работы.


От нуля к единице | Питер Тиль
О чем книга ▶️


Клиенты на всю жизнь | Карл Сьюэлл
О чем книга ▶️


Эффективный руководитель | Питер Друкер
О чем книга ▶️


Практика менеджмента | Питер Друкер
Тут Друкер раскладывает базу управленческого мышления:
1. Мыслить исходя из целей, а не задач. Сначала нужно понять чего мы хотим достичь, а потом уже спрашиваем себя «Как?»
2. Фокус — это всегда выбор, от чего мы сознательно отказываемся
3. Оцениваем результат, а не столько времени было потрачено. Это поможет правильно приоритизировать задачи и делать в первую очередь то, что приносит больше всего пользы при наименьших трудозатратах

Какие книги еще должны оказаться в этом списке? Поделитесь в комментах ⬇️

💬 Тултип

Концепт #6

Приложение для записи голосовых заметок

💬 Тултип

Сайт делает из svg или текста 3D объект у которого можно менять цвет, материал, освещение и даже анимацию.
Полученный результат можно загрузить как картинку, сделать видео или получить полноценный glb объект. И все это абсолютно бесплатно — приятный подгон ✌️

Попробовать тут

💬 Тултип

База знаний продуктового дизайнера (400+ ссылок)

Собрал в одном месте более 400 статей, видео, гайдов и инструментов для продуктового дизайнера. Обучение — это процесс, который не останавливается, поэтому буду регулярно дополнять свежими материалами 😌
Сохраняйте себе в закладки, делитесь с друзьями и т.д.

Посмотреть 🧐

💬 Тултип

Успешное тестовое в Звук

Витя Апасов поделился своим решением тестового задания, которое помогло ему стать частью команды

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

На тот момент арт-директором был Женя Филатов, который сейчас дизайн-директор ГигаЧата

Суть тестового — отрисовать как мог бы выглядеть детский режим в приложении. Нужно было показать глубину проработки этого режима: точки входа, корнер кейсы и прочее

Как я подходил к решению:
1. Определил сегменты
2. Проанализировал существующий флоу
3. Посмотрел что там у конкурентов
4. Собрал рефы для концепта
5. Задизайнил по флоу новые экраны и соединил их стрелками
6. Записал лум по экранам где рассказал о ходе решения задачи

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

📱 Смотреть фигму

Еще тестовые на канале:
Мое в BI платформу Insight
База тестовых заданий (50+)
Алиса
Альфа банк
Вкусвилл

💬 Тултип

Дизайн чек и технический чек

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

Технический чек — это уже другая история. Главный вопрос: достаточно ли информации, чтобы команда разработки реализовала решение без догадок?
Тут я насобирал несколько заметок на эту тему:
— Чеклист при финализации макетов: сетки, адаптивность, графика, анимации, UI-kit и все состояния компонентов
— Как правильно передавать макеты в разработку от Лемана Тех
— Ещё один взгляд на тему передачи макетов
— Пошаговый гайд от Selectel

Всё это одинаково полезно как при проверке чужого, так и при самопроверке своих творений

Есть ли у вас свой чеклист при проверке макетов? Делитесь в комментах 👀

💬 Тултип

Сделал виджет для фигмы

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

Механика простая: добавляете виджет в макет и проходите по чек-листу

Внутри две части:
Дизайн-чек — помогает проверить решение на логику и смысл, а также убрать все лишнее

Технический чек — помогает понять, насколько макет готов к разработке: состояния, компоненты, тексты, отступы, адаптив и вот это всё

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

Забирайте в свои макеты и делитесь фидбеком — буду докручивать ✍️

Посмотреть виджет 🖥

💬 Тултип

Еще один полезный плагин для работы — Изи спека. Выбираешь компонент и он составляет подробное описание его верстки и состояний для разработчика.

Есть несколько режимов: обычная спека для описания элемента, «Живая Спека» для быстрых замеров прямо на канвасе, «Апдейт» для сравнения состояния «до» и «после», «Заметки» для комментариев к элементам и «Замеры» для точечного описания отдельных параметров — например, ширины, высоты, отступов или расстояний между элементами

📱 Попробовать тут

💬 Тултип

Где искать скиллы для агентов?

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

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

mcpservers.org
skills.sh
officialskills.sh
skillsmp.com
skillsdirectory.com

Сохраняй себе и делись с другими ✨

💬 Тултип

Насколько твой макет грузит мозг?

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

Чекаем здесь

💬 Тултип

Делюсь приятной новостью

Уже 3 месяца я работаю в Альфа Банке ❤️ Тружусь над аналитическим продуктом Альфа Метрика

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

💬 Тултип

Как вайбкод помогает на работе | Часть 1

Первый поинт — это передача в разработку кастомных компонентов.

У нас в продукте есть нейропомощник, точка входа в него — кнопка в правом нижнем углу экрана. От пользователей пришла проблема: иногда она перекрывает контент и мешает работать с интерфейсом.

Начали искать решение и пришли к идее сделать кнопку подвижной: пользователь сможет перетащить её в удобное место, после чего она примагнитится к ближайшему краю экрана.

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

Раньше для такой задачи пришлось бы отдельно собирать анимацию в Lottie или Rive, а затем объяснять разработчикам, как всё должно работать. В этот раз я отрисовал концепты в Figma, а интерактивную версию собрал уже в Codex.
Вся анимация работает на чистом CSS, без сторонних библиотек.

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

💬 Тултип

Как вайбкодинг помогает на работе | Сложные прототипы

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

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

Прототип в Codex vs прототип в Figma:
1. Вы чаще задумываетесь над логикой решения, потому что своё решение приходится объяснять Кодексу. Так проще заметить разные нестыковки и корнер-кейсы.
2. Переделывание прототипа проходит очень быстро: все изменения можно просто наговорить Кодексу голосом и подождать, пока он их внесёт.
3. Можно реализовать максимально сложную логику с добавлением, редактированием и удалением различных сущностей.
4. Легче получить апрув от разработки на какие-то свистоперделки, потому что у вас уже есть рабочая реализация в коде, а логика решения выглядит более проработанной.
5. Можно накинуть Яндекс Метрику на прототип, отдать его пользователям на удалённое тестирование и смотреть результаты в Вебвизоре.

А вам вайбкодинг помогает в работе или пока что только развивает СДВГ? 🤪

💬 Тултип

400+ полезных ресурсов для дизайнеров на одной доске

Последние три года я собирал полезные материалы на огромной доске в Miro. По сути, это карта компетенций из пяти сфер: UX, UI, исследования, продукт и коммуникация.

Теперь я перенёс всё на отдельный сайт. Можно перемещаться по карте, заходить в разные направления и искать нужное среди кучи сайтов, сервисов, библиотек и статей 🥸

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

Смотреть доску 🖥

💬 Тултип

Как собрать качественную ленту в тг по дизайну?

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

В нашей ленте Ваня из Т Банка 💛устраивает дизайн-челленджи, Руслан из БКС 💎 рассказывает про прототипирование с помощью Claude Design, а Ксюша из Meta* — о том, на что обращает внимание при найме дизайнеров в корпорацию

Опытные дизайнеры из ❤️ 🌾 🧲 👍 и других топовых команд рассказывают про рабочие процессы, делятся опытом и лайфхаками

Каждый точно найдёт здесь что-то полезное для себя 😙

Добавить Дизайн Ленту



*Та самая, деятельность которой запрещена в РФ