/designer

#снек 47. Как получить оффер. Инструменты, часть 2/3 Продолжаем серию про карьерные инструменты. Предыдущий выпуск — про резюме. 2. Сайт-портфолио — это крючок для дизайн-лидов. Его цель в том, чтобы тебя пригласили на интервью. Когда лиду в Хантфлоу прилетает кандидат, лид идёт смотреть его портфолио, задаваясь такими: «стоит ли тратить час своей жизни на этого человека и решает ли кандидат такие задачи, какие мне нужны в моей команде?» Больше всего выразительных возможностей даёт сайт, собранный на консрукторе. Сайт не должен показывать всё, это компактная демо-версия того, что ты расскажешь на интервью. Время просмотра такого портфолио — от 5 секунд до 10 минут. Если сразу видно, что кандидат не подходит, как правило нет смысла тратить время дальше. На один кейс — максимум 5 экранов, больше детализировать не надо. Это должны быть кейсы, которые показывают тебя как продуктового дизайнера, без лендингов, и всего остального лишнего. В кейсе важно продемонстрировать проблему, твоё решение и метод проверки. Про структуру поговорим позже. Идеальный вариант — бесплатный сайт на Framer или Tilda. Если хочется сделать круто, оплати подписку и прикрути домен. На худой конец это может быть в формате Notion, но у таких портфолио совсем уж бедные выразительные возможности, не настроишь анимации и стилистику нормально. Совсем плохой вариант это Behance. Если для портфолио графика это нормальный классический выбор, то для продуктового дизайнера это нежелательно. Продуктовый кейс это прежде всего текстовая история и в случае с Бехансом придётся запекать много текста в картинки. Следовательно, он может быть трудно читаемым на мобильных, либо ты слишком увлечёшься графикой. Желательно, чтобы текст был чётким и читаемым, потому что мы отсматриваем кандидатов когда есть время, иногда на бегу или по пути с работы, когда попросил HR. Сайт-портфолио не подходит для того, чтобы демонстрировать его на интервью, в нём слишком мало информации и этот формат неудобен для презентации. Понятно, что никто тебе не помешает открыть сайт на созвоне и рассказывать по нему, но так ты забиваешь гвозди вилкой вместо молотка. В заключительном посте серии поговорим про самое мощное и недооцененное оружие — презентацию. @slashdesigner #для_профи #карьера

Ищу актуальные темы для следующих постов, прошу обратной связи у читателей Давай синхронизируемся, какие вопросы про дизайн тебя интересуют прямо сейчас? Примеры близких мне тем: инструменты продуктового дизайнера, туториалы, методологии, визуал и моушн в UI, исследования, карьера, разборы портфолио, философия дизайна, AI для дизайна.

#UI_ревью 9. Interactive Login Form Работа: Outcrowd Сильная работа, которая вызывает вау-эффект, на деле довольно трудоёмкая для разработки, хотя выполнимая. + Без слов считываемая идея, что они следят за курсором, это даёт очень эмоциональный эффект «они меня видят». Такое уже было у Tunnelbear, но в этот раз выполнено более выразительно. + Эффект усиливается их реакцией на ситуацию: пароль неверный или видимый. Забавно отыграны такие эмоции как сочувствие, фрустрация, неловкость, и от этого мы начинаем сопереживать им обратно. + Мультяшный стиль с ярким применением принципов анимации Уолта Диснея. + Простые формы героев, при этом сами они все особенные благодаря исполнению лица, цветам и разнообразию форм. + Поскольку все движущиеся элементы локализованы в блоке слева, понятен механизм экспорта анимации Lottie из After Effects через Bodymovin. C анимацией по тригеру каждой ситуации проблем быть не должно. – Что будет сложно реализовать: движение каждой формы вроде зрачка, лица или рта придётся привязывать к курсору по отдельности, это существенная ручная работа. Дизайн настолько удачный, что его даже плагиатят. Если тебе понравился разбор, поддержи пост звездой, чтобы мне было понятно, что такой контент тебе нужен. По теме: Анимация приложения для горных прогулок @slashdesigner #первые_шаги #UI_анимация

#снек 47. Как получить оффер. Инструменты, часть 1/3 Важнная серия постов. Накину пользы для тех, кто отчаялся в поиске корпоративной работы. Я выделяю 3 основных формата, которые помогают дизайнеру найти работу. И даже крутые дизайнеры не всегда их используют. Вот форматы: 1. Резюме 2. Сайт-портфолио 3. Презентация Бывает так, что форматы путают, пытаются в резюме наводить красоту, а на сайт вываливают детальный кейс. А презентацией вообще не пользуются. 1. Резюме нужно для того, чтобы тебя занесли в ATS, оно нужно в основном HR, ну и чуть-чуть лидам. Резюме — это не портфолио, это формальный сухой и не слишком красивый документ на белом фоне, желательно на листе А4 и в PDF, не в Figma. Оно набрано мелковатым, но читаемым шрифтом, с официальным фото. Время просмотра резюме — до 1 минуты. В следующем посте этой серии — про сайт-портфолио и почему его не надо показывать на интервью. По теме: Гайд Анны. @slashdesigner #для_профи #карьера

#UI_ревью 8. Mail app Работа: Geex Arts Автор ревью: Любовь Жидких + Картинка почти во весь экран выглядит эффектно. Нравится, что часть элементов вынесена за пределы изображения, что позволяет не перекрывать его. + Нравится легкий градиент на фоне. Нейтральный цвет, не перетягивающий на себя внимание, но придающий стиля. + Интересный приём с таббаром без подложки, придает легкости. + На втором экране воздух в верхней части карточки помогает сбалансировать более перегруженную нижнюю часть. + Крупная типографика выглядит современно и придет стиля интерфейсу, чувствуется швейцарский стиль. – Прием с пролистыванием медиа не даёт представления о том, сколько фото приложено к письму, тут мог бы лучше сработать паттерн из сторис с линиями. Помимо отображения количества материалов, он бы помог еще больше разгрузить карточку. – Возможно получится перебор с рамками на экранах с фото. Телефон сам по себе имеет рамку + две рамки в интерфейсе. – Таббар без подложки ограничен в использовании. Для этого экран обязательно должен быть сделан так, чтобы отделять зону таббара. – Карусель в карточках может быть не самым удобным решением. Преимущество привычного списка в том, что можно охватить взглядом несколько писем сразу и выбрать нужное для прочтения письмо. Тут же придется долго листать одно за другим пока не найдешь нужное. Поэтому данный прием может быть использован в качестве дополнительного, но не основного. По теме: зачем делать дейли ревью, из чего состоит UI. @slashdesigner #первые_шаги #UI

Ранее проговорили про слепые зоны, что дизайнеру не видно полной картины. Сегодня продолжу перечислять причины, почему на старте дизайнеру вредно развиваться в одиночку. Может быть можно прокачаться, просто делая свою работу для заказчиков и они помогут тебе развиться как дизайнеру? Нет, это как правило не работает. Причина 2. Заказчики не могут тебя адекватно оценить и дать обратную связь, им нужен быстрый результат для их задачи Ты как фрилансер, который начинает брать заказы, едва освоив Фигму, в основном общаешься с заказчиками. Но они в принципе не должны тебя прокачивать, это не их цель, им надо бизнес двигать. А на старте при низком уровне дизайна тебе будут попадаться низкого уровня заказчики. Из-за этого в портфолио будут попадать хреновые работы. Попадаем в петлю бедности и неумения:

не умеем делать круто → не платят достаточно → нет денег учиться делать круто

Далее мы узнаем, как из неё выходить. @slashdesigner #первые_шаги #карьера

#снек 45. Слепые зоны В продолжение снека 38 — Дизайнер, не начинай с фриланса, у меня получилась серия о том, почему важно, чтобы рядом присутствовал опытный наставник. Причина 1. У тебя есть слепые зоны Ты не видишь полной картины о том, что в принципе возможно, какие виды дизайна бывают и какой тебе подходит. В итоге, ты делаешь то, что удалось осознать и изучить. Урвать. Неоткуда взяться кругозору. На его развитие нужны специальные усилия, но на старте как правило на это нет сил и денег. Пример: Если в школе кто-то делает аватары или визитки, ты можешь посмотреть на них и начать делать вот такой дизайн и называть себя дизайнером, не осознавая, что существует океан возможностей, огромный мир агентств, брендов и корпораций, специализаций, разные навыки и интересные инструменты, достойные бюджеты и вдохновение от творческой работы. Попасть в этот мир можно только за руку с наставником. В следующем посте серии: может быть заказчики помогут тебе развиться как дизайнеру? @slashdesigner #первые_шаги

#снек 44. Дизайн-система + AI = радикальное ускорение фронтенда Дисклеймер: этот пост — иллюстрация, насколько продуктовый дизайн в корпорациях не про дизайн, и какую роль в нём играют дизайн-системы. Самая горячая тема в разработке интерфейсов для меня сейчас — внедрение MCP-сервера, который предоставляет Figma на тарифе Organization. Что это даёт: Фронтендер выделяет экран в Figma и пишет запрос в AI: «сверстай этот экран». И AI верстает всё практически как человек, на базе всех требований и компонентов принятой дизайн-системы. Сборка типичного мобильного экрана занимает меньше минуты, вместо часов ручной работы. Есть оговорки: это не так просто, придётся заранее подготовить базовый контекст на сотни строк, а также связать MCP Figma, разобраться с ClaudeCode и написать свой MCP с нужными командами. Кроме того, чтобы это заработало, в компании должна быть хорошо развитая дизайн-система, которую сможет понять AI, чтобы ему не пришлось писать кастом. А ещё это накладывает более строгие требования к дизайн-макетам. Да, даже в этих условиях он иногда гонит и вместо таблицы может сверстать список ячеек, однако, с этим можно справляться. MCP-сервер — если очень округлять, это программа, которая умеет взаимодействовать с большой языковой моделью (LLM) и получать от неё ответ. MCP-сервер Figma умеет смотреть в макеты и выдаёт, что нужно верстать для фронта, затем, ClaudeCode верстает их по заданным правилам. ClaudeCode — это механизм определения контекста для запросов через командную строку, которому можно скормить директорию проекта и написанную людьми дизайн-систему. Конечно, всё это не делает фронтендеров ненужными, однако их фокус при таком методе работы будет смещается в вёрстку компонентов для дизайн-системы и фиксацию условий для AI в базовом контексте, потому что сам бизнес-сценарий по согласованному дизайну теперь может собирать и машина. В следующий раз можно порассуждать, о том, как дизайнерам можно генерировать макеты. Но пока о таком рабочем механизме я не слышал. Figma Make не в счёт, пока для серьёзной работы продуктового дизайнера не годится. @slashdesigner #для_профи #AI

Саша Окунев: ищу дизайнера систем Алматы, офис/гибрид Эта вакансия — редкая возможность прокачаться у меня в команде, ежедневно работая бок о бок над большой промышленной дизайн-системой, которая стала стандартом в нашей компании. Я не ищу старшего дизайнера, а в этот раз предпочёл бы пригласить проектировщика со средним опытом, но со стойким интересом к дизайн-системам и горящими глазами. Ранее я описал, чем именно мы занимаемся. Однако, это не вакансия для совсем начинающего джуниора. Пару лет проектирования и применения китов за плечами для старта мне всё-таки необходимы. Мне нужно уверенное умение создавать UI-киты, писать документацию, проводить ревью макетов по заданным критериям, добавлять свойства во варианты, держать в порядке обширные мастер-файлы. Чтобы откликнуться, тебе нужно оформить кейс в формате «проблема-решение», где ты на 10-20 слайдах и паре ссылок на Фигму сможешь показать, как привёл в порядок UI-кит в той компании, где работал ранее. Наша дизайн-система преимущественно мобильная, но будут задачи и для сборки десктопных компонентов, так что пригодится максимально разноплановый технический опыт. Багаж во фронтенде и гайдах (iOS, Android, Web) будет большим плюсом. Хорошие условия оплаты, обговорим отдельно на интервью. Есть возможность релокации в солнечный Алматы. Откликнуться @slashdesigner #для_профи #вакансия

#UI_ревью 7. Разбираем мобильное приложение, типичные ошибки в кейсе Пробую видео-формат для фидбэка, параллельно накидываю ценных идей: как должно выглядеть эффективное портфолио, какие задачи удобно решать, как подавать исследование, на что смотрю, а что не так важно. 📼 Смотреть 00:00 Привет! О рубрике 00:31 Кейс Анастасии 00:53 Общая картина. Форматы портфолио 02:40 F-паттерн 03:15 Задача 04:30 Про персоны 05:40 Язык портфолио 06:35 Анализ конкурента 08:12 Про Lo-Fi 09:11 Финальный UI и UX 15:36 Комментарии от участников группы 18:39 UI-кит 20:56 Уровень и что делать бальше Прислать дизайн на разбор @uireview. Пожалуйста, только не лендинги! Если не работает YouTube, используй Liberty VPN. @slashdesigner #первые_шаги

#снек 43. Навыки и знания дизайнера систем По просьбе HR расписал, чем дизайнер в команду дизайн-системы отличается от продуктового и кого ей искать. Дизайнер систем — это самый технический вид дизайнера из возможных. Многое из того, что есть в требованиях — это черты характера, а не приобретённые знания. 1. Cамое главное: жилка садовника, интерес к построению систем: формированию единых правил, описанию элементов, когда ты выращиваешь иерархическую систему как дерево от корней до листочков. Вряд ли такой работой сможет заниматься дизайнер рок-звезда из B2C, который не может усидеть на месте и фонтанирует идеями, как всё переделать. Дизайн-системы — это неторопливое вдумчивое занятие. 2. Стремление к каталогизации элементов с похожими свойствами. Хороший дизайнер систем — это коллекционер-библиотекарь. Кто-то любит собирать винил, кто-то монеты или марки. А мы коллекционируем полезные компоненты, из которых другие собирают финальные экраны. 3. Отсюда наша толерантность к нудной работе. Мы регулярно проводим ревью макетов от продуктовых дизайнеров, исправляем ошибки при сборке, фиксируем лучшие практики в гайдах. Мы анализируем, какие новые требования из макетов не покрыты нашей системой, добавляем их или оставляем кастом на проектах. 4. Исследовательский интерес к фронтенду: Web, iOS, Android с точки зрения правил и интерфейсных механик. Человек не просто должен интересоваться тем, как делать интерфейсы для людей, а стремиться погрузиться на технический уровень, исследовать как всё тикает на уровне кода. Для этого не нужно быть профессиональным фронтендером или мобильщиком, но идти в эту сторону очень ценно, потому что даёт полную картину системы как на ладони. 5. Интерес к автоматизации процессов: всё, что можно отдать машине, отдаём, чтобы не тратить время на неприятную ручную работу. Мы делаем компоненты, которые позволяют переиспользовать эталонные кусочки дизайна в разных местах интерфейсов и контролируем их из единого места. Это то, чего агентские дизайнеры с приставкой UX/UI после прохождения курсов по интерфейсам обычно не осознают, не в обиду им будет сказано. Им это просто не нужно в их работе, потому что в макетах приложения на 5 экранов просто нет такого количества повторяемых элементов. 6. Сильные софты: у нас много коммуникации с командами, к нам приходят дизайнеры из соседних команд и хотят исправить какое-нибудь ранее принятое сквозное решение, потому что оно им не нравится. Дизайн-система может ограничивать полёт фантазии и подрезать крылья, и наша задача в том, чтобы гасить такие конфликты. Здесь мы выступаем как переговорщики. Нужно уметь улаживать такие споры через компромиссы и разграничение ответственности. И так ДС незаметно вплетается в иерархию самой компании, в которой живёт. В команде дизайн-системы как правило не бывает увлекательного проектирования продуктов для конечных пользователей и наша функция в том, чтобы сгладить взаимодействие фронтенда и продуктового дизайна. По теме: Стрим про дизайн-системы — часть 1, часть 2. А как ты считаешь, что ещё должен уметь дизайнер систем? Напиши в комментариях. @slashdesigner #первые_шаги #дизайн_системы

#снек 42. Мои открытия после того, как провёл 150 личных менторских сессий 1. Главное: менторство — это не бизнес и не может быть масштабировано, потому что сильная экспертиза всегда штучная. Каждую сессию я беру чайную ложку и отскребаю кусок своего сердца, отдаю его за деньги и/или за возможность кому-то стать лучше. Если сессий много, очень быстро ты начинаешь чувствовать себя потраченным. Мне комфортно вести до 2 сессий в неделю. 2. На менторстве можно получать больше, чем на рекламе в телеграм-канале, не теряя доверие читателей и не сжигая просмотры в канале. Я рассматривал менторство как альтернативный источник дохода канала. Оно таковым не стало. Это был классный эксперимент, который близится к завершению, когда я доведу тех ребят, которых взял ранее. 3. Менторство в моём случае требует колоссальных эмоциональных и когнитивных ресурсов, когда я погружаюсь в жизнь и карьеру ранее незнакомого человека и честно иду с ним рука об руку к решению его запроса через любой бурелом, вместе с ним испытываю боль отказов или проектирую с ним такой вид дизайна, который делаю много лет. Это возможно делать только если деньги не являются единственной целью. 4. Вряд ли на менторстве для индивидуальных дизайнеров можно получать больше, чем работая дизайнером в корпорациях. Если говорить о менторстве, настоящие деньги в серийных корпоративных консультациях, когда помогаешь командам как внешний эксперт и тебе платит большая компания, а не одинокий джуник, желающий найти первую работу. Но эмоций от успеха этого джуника больше, чем от команд в компаниях. 5. В основном запросы дизайнеров типичны: как получить хорошую работу, улучшить условия и процессы в команде, как собрать эффективное портфолио, как улучшить автоматизацию, применить методологии, документировать задачи и внедрить аналитику. Вызов в том, чтобы уложить всё это в голову и в руки людям, чтобы они смогли пользоваться этим без меня. 6. Заранее поставить измеримую цель на самом старте работы — критически важно, без этого даже если ты вложился в человека на 100%, он может быть разочарован, потому что вовремя не договорились о том, куда идём. Заявлять, что ты ментор — огромная ответственность и риск для репутации. 7. Менторство дало мне пообщаться с классными дизайнерами, которыми я восхищаюсь. Никогда я не был ближе к своим читателям, чем на сессиях. 8. Рад, что узнал о методологии CELTA, благодаря которой понял, что на сессиях преимущественно должен рисовать и говорить менти, а не я. Менторская сессия — это не лекция для одного зрителя. 9. Я понял, что пока у меня нет больше ресурсов брать новых менти, потому что хочется дальше развиваться самому, идти из привычного продуктового дизайна в новые сферы и продолжать учиться. @slashdesigner #для_профи

#снек 41. Что такое гипотезы Гипотеза — базовый инструмент продуктового дизайнера. Гипотезы путают с идеями, но это нечто другое. Да, действительно, в гипотезе должна быть заложена идея изменения дизайна, однако, помимо этого должен быть метод проверки.

А давайте передвинем кнопку CTA из правого угла в левый

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

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

Теперь это полноценная гипотеза, когда мы можем научно достоверно понять, какое влияние дизайн-решение оказало на конверсию. Тогда мы сможем сделать вывод, стоит ли это решение оставить или надо откатывать предыдущую версию с кнопкой справа. Гипотеза — как гантель, состоит из двух равновесных частей: идеи действия и метода проверки. Эх, сколько же дизайн-решений, которые вышли в релиз, не были гипотезами! И сколько раз оунеры сами вредили своему бизнесу, включая эго и не ориентируясь на факты. Работать через гипотезы трудно, медленно и дорого, но это единственный способ хоть как-то снизить риски бизнеса от дизайн-решений, потому что выкатывать дичь и терять лояльность пользователей ещё дороже. @slashdesigner #первые_шаги

Саша Окунев: ищу сильного продуктового дизайнера в Kaspi.kz, офис/гибрид в Алматы Проекты: 70% CRM для десктопа, 30% дизайн-система Рассматриваю предложения от уровня Middle+ и Senior. Мне нужен крупнокалиберный UX-проектировщик, способный навести порядок в интерфейсе для колл-центров. Также будут задачи по поддержке нашей развитой дизайн-системы. Фокус в портфолио: Destkop Web, B2E/B2B, проектирование от задачи, этапность. В портфолио мне нужны плотно собранные внутренние сервисы для профессиональных пользователей. Подойдут системы аналитики, личные кабинеты, CRM, системы мониторинга. Важно показать работу с таблицами, фильтрами, графиками и базами данных, а также умение реализовать потребности наших пользователей силами текущего технического решения и проводить исследования самостоятельно. Должен быть очевиден акцент на проработку бизнес-логики в принятом ките, а не на маркетинг. Лендинги в портфолио для этой вакансии — красный флаг. Что предлагаем Достойный уровень оплаты, помощь в релокации, оформление по ТК, РВП. Хороший офис в центре города. Близкий контакт с пользователями и полная свобода исследований, команда со здоровой дружелюбной атмосферой. Подробности — по ссылке. Откликнуться @slashdesigner #для_профи

Комментарий к решению Правила — это точка кристаллизации любого сообщества. Если правила адекватны, понятны и справедливы, это даёт участникам ощущение безопасности. Если сообщество сравнить с государством, то правила — это его конституция. Правила как документ помогают определить, что в сообществе считается допустимым, позволяют модераторам действовать по понятной инструкции и не ломать голову, за что нужно банить участников. Мы исследуем, как модераторы информируют новых участников о правилах в чате и дорабатываем механику, по которой каждый новый участник должен согласиться с правилами этого чата перед тем как в него что-либо писать. Как и с различными лицензионными соглашениями, мы не можем проконтролировать, читают ли участники правила, это уже проблема модераторов в сообществах. Однако, можем переключать уровень доступа после события принятия правил и тем мы решим проблему индикации. Участники должны явно понимать, почему они не могут писать новые сообщения, и это может быть на уровне поля ввода. Сейчас основное поле ввода сообщения может быть в двух состояниях: 1. Можно писать, поле позволяет вводить текст 2. Нельзя писать, если у участника нет доступа, формулировка: «Администраторы ограничили вам доступ». Естественная реакция на такой статус — негатив и разборки в личных сообщениях, когда участник пытается выяснить, почему его забанили. Если появится третье состояние, в нём может быть формулировка вроде: «Чтобы участвовать в дискуссии, прочитайте правила сообщества» + кнопка Правила. Это будет работать более гладко, чем то, чего можно добиться через бот-модератор. Так мы избавим администраторов от настройки ботов, а также позволим им избежать изначально негативного тона, когда участник зашёл в чат и вместо приветствия сразу словил ограничение в правах без нормальной коммуникации, почему это произошло. В следующем посте рассмотрим, как можно улучшить механику закрепленных сообщений, чтобы они стали виднее. @slashdesigner #первые_шаги

#задача 4, ответ: доработка механики Telegram Исходная задача Решение 1 В прошлом посте мы рассмотрели, какие у нас есть уровни доступа для решения. В этом рассмотрим самое глобальное решение. Если у нас как у дизайнеров Telegram есть полный доступ к принятию решений, мы можем решать задачу поддержки сообществ, чтобы привлекать на платформу новых людей через рост качественных сообществ. Гипотеза: Если внедрить механику принятия правил в сообществах, после периода адаптации к фиче в 2 месяца это должно измеримо повысить показатель DAU в сегменте аудитории, состоящей в тематических сообществах. Внедрение правил облегчит механику онбординга в сообществах, но нельзя однозначно утверждать, приведёт ли оно к повышению или понижению количества сообщений. Методы проверки: 1. Предварительные исследования с администраторами сообществ, которые могут выявить необходимость в фиче. 2. После разработки — тестовый запуск на ограниченном числе сообществ. Замеры adoption для включения фичи в сообществах подтвердит, была ли такая необходимость у администраторов. 3. Мониторинг процента участников сообществ, которые согласились с правилами поможет понять, что от внедрения фичи нет отскока и негатива со стороны участников. 4. После периода адаптации (1-2 месяца после релиза) — мониторим DAU в выбранном сегменте, что покажет, что решение дало долгосрочный эффект. Figma Community: Макеты 1. Участник должен прочитать правила 2. Экран чтения правил + подтверждение 3. Обычное состояние работы с чатом @slashdesigner #первые_шаги #метрики