/designer
15.7K subscribers
405 photos
26 videos
24 files
431 links
Канал про продуктовый дизайн, инструменты и практику. Рекламы нет.

Рубрики: #первые_шаги #для_профи #Figma #майндсет #UX_задача #UI_ревью #дизайн_системы #помоги_беженцам #эмиграция

Форматы: #снек #статья #видео #анонс #видео #подкаст

Автор: @okunev
Download Telegram
Перезапускаем рубрику #UI_ревью

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


Как это работает:

1. У нас есть чат @uireview, в котором можно публиковать предложения на разбор. Все желающие могут постить ссылки на Figma и UI-картинки, с хэштегом #ревью. Можно предлагать свои макеты или любой понравившийся дизайн интерфейсов. Там есть несложные требования.

2. В чате есть откликнувшиеся дизайнеры-волонтёры, которые могут оставлять фидбек на эти работы в виде комментариев в Figma или в чате. Волонтёром может стать любой уверенный в своих силах участник @uireview. Они могут потренировать свой навык анализировать дизайн-решения и давать обратную связь по дизайну. Почему важно делать Daily UI Review каждый день.

3. Отобранные вручную заявки на ревью из чата беру в рубрику #UI_review на @slashdesigner в таком формате. Здесь планирую разбирать работы, которые нахожу особенно полезными для разбора в канале. Также хорошая новость в том, что теперь такое ревью будет бесплатным. Это отличный механизм, чтобы подумать в мою голову и получить качественный фидбек.

Для читателей канала ревью это оригинальный формат, в котором я подаю обучающий контент про UI.

@slashdesigner #первые_шаги #для_профи #техническое
#снек 11. Найм через инсайдера

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

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

В этом случае процесс найма будет более управляемым:

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

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

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

В следующем снеке мы поговорим, где же брать инсайдеров.

@slashdesigner #первые_шаги #майндсет #карьера
#снек 12. Где мне брать инсайдеров?

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

Итак, как же сделать так, чтобы тебя звали и раскрывали тебе все карты, лишь бы ты пришёл?

Во-первых, быть ценным. Когда люди приглашают своих знакомых вместе работать, обычно они делают это не из благотворительности, а из того, что потенциальный коллега облегчит их жизнь своей профессиональной работой. Нужно беречь свою репутацию и старательно работать, желательно от полугода на одном месте. Особенно этот негласный период критично соблюдать в продуктовых командах, где за меньшее время трудно вникнуть в продукт, проявить себя и измеримо повлиять на него. Если дизайнер хочет устроиться на фултайм и до этого работал по 2 месяца в 5 компаниях за последний год, это красный флаг для HR, потому что очевидно: он не удержится. Такие факты карьерного пути лучше не раскрывать.

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

Если ты демонстрируешь работоспособность, умение и адекватность, то когда тебе потребуется искать работу, ты об этом бросишь клич на LinkedIn. Те люди, которые тебе доверяют и работали с тобой, обязательно репостнут его. Они ещё не инсайдеры, но через них мы повышаем шансы быть замеченным. И тогда, если предыдущие два пункта в наличии, к тебе постоянным потоком пойдут предложения от рекрутёров и бывших коллег. Когда делишься ценным и редким специалистом с хорошей репутацией — это увеличивает и твою ценность тоже. Так люди помогают своему окружению закрывать вакансии.

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

В-третьих, быть видимым и формировать вокруг себя инфополе из единомышленников. Вести блог эксперта в соцсети по твоему вкусу. Нахожу наиболее эффективными для этого Telegram, LinkedIn YouTube или TikTok. Именно для этого люди выступают на конференциях или хотя бы ходят на них в качестве участников. Недавний пост по теме: В чём прикол ходить на дизайн-конференции? Нужно заводить новые знакомства и увеличивать свой социальный капитал. Люди, с которыми у тебя общие интересы и хорошие отношения, с большей вероятностью придут на помощь, когда ты будешь в поиске.

Ну и наконец, дружить. Целенаправленно строить искренние дружеские отношения с людьми из индустрии и коллегами. Любой твой коллега — потенциальный инсайдер. Никогда не знаешь, как сложится жизнь. Сегодня он может быть простым разработчиком, а через пару лет возглавит IT-департамент на сотню человек.

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

А как было у тебя? Поделись своим опытом в комментариях.

@slashdesigner #первые_шаги #майндсет #карьера
#UI_ревью 5. Разбор сайта для Lingokids

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

Исходная работа в Figma Community

Автор: @SvetlanaTafi

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

Хочу услышать общие впечатления, недочёты и слабые места. И можно ли с работами такого уровня претендовать на место джуна? Или пока слабо?

Буду очень благодарна 🙏
———

Привет, Светлана. Общее впечатление противоречивое, но скорее позитивное. Эта работа пока сыроватая, но можно быстро исправить многие моменты. Я постарался бережно прокомментировать всё, что увидел.

Заявленная тобой задача — познакомить пользователя с услугами компании. Если под услугами понимаем мини-игры Lingokids, им на сайте не уделено никакого внимания и непонятно, чем именно мы продаём выгоды продукта, кроме приятного визуального стиля. Нет хука, через который мы вдохновляем людей нажимать на кнопку Download. Самый простой способ его сделать — добавить скриншоты настоящего продукта.

С точки зрения UI это хорошая джуниорская работа. Я уверен, что ты многому научилась в процессе её создания. Но UX и коммуникация, к сожалению, пока не на высоте. Гигиена макетов тоже может быть лучше, расскажу как.

Если бы заявленная задача была в том, чтобы дать минималистичный MVP-лендинг продукта, она была бы покрыта.

Разбор и анализ визуальных приёмов — отдельным постом.

Свои и чужие макеты на разбор можно присылать в чат @uireview, требования.

@slashdesigner #первые_шаги
Разбор и анализ визуальных приёмов:

Про дизайн
– 1. Нет знакомых маскотов
+ 2. Визуально привлекательный плотный хиро
– 3. Неподходящее фото: девочка схватилась за голову
– 4. Левый контент на айпаде
– 5. Шурёхи ломают композицию
– 6. Иллюстрации — «чтобы были»
– 7. Конфликт акцента на кнопке Watch More
– 8. Слишком длинная кнопка
+ 9. Приятная вёрстка блока с отзывами
– 10. Выравнивание имени в карточке отзыва
– 11. В секции отзывов обрезались шурёхи
– 12. Контурные лого соцсетей

Про состояние макетов
– 13. Финальный дизайн не отделён от вайрфреймов
+ 14. Используются страницы
+ 15. Узнала, что такое 12-колонник
– 16. Но увы, пользоваться им не научилась
– 17. Неудачное положение льва
– 18. Базовая линия между меню и кнопкой
+ 19. Боксы для иконок
– 20. Не используются компоненты
+ 21. Типографика имеет стили текста
– 22. Вместо единой системы типографики — три
+ 23. Цвета тоже в стилях
– 24. Кнопка не собрана в варианты и не обезличена
– 25. Вся вёрстка не использует AutoLayout

@slashdesigner #первые_шаги
Оглавление

– 1. Не используются страницы
+ 2. Навигация по фреймам
– 3. Навигация через виджеты не работает на View-доступе
+ 4. Блок Preparation погружает в контекст
– 5. Небрежная редактура + внезапные вставки на немецком
+ 6. Ссылки на конкурентов в Competitors
+ 7. Хорошие рефы
– 8. Грубо сделанные скриншоты
– 9. Недостаточно сфокусированный мудборд без комментариев
+ 10. Второй мудборд с более похожими образами
– 11. Визуальные приёмы из мудбордов не используются
– 12. Слишком большой контраст на первом концепте
+ 13. Более сдержанный стиль с хорошими образами
– 14. Странно оформленная информационная архитектура
– 15. Слишком отполированные аккуратные вайрфреймы
– 16. Великоватый хедер по высоте
+– 17. Модульная сетка, но меню мимо неё
+ 18. Эффектная фотография в hero
– 19. Старомодные угловатые кнопки
? 20. CTA возможно стоит сделать на конфигуратор
– 21. Иконка Chat в странном месте
+22. Хорошо бы поджать кернинг в заголовках
– 23. Скучная вёрстка с машинками
+ 24. Качественные образы машины
+ 25. Удачное лайфстайл-фото
– 26. Фото мимо модульной сетки
– 27. Нет признака текущего фото в слайдшоу
– 28. Отзывы на лендинге не убеждают, не тот тип покупки
– 29. Излишний акцент на иконках соцсетей и кнопке Subscribe

@slashdesigner #первые_шаги
#снек 17. Про референсы и избегание плагиата

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

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

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

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

Начинать дизайн с оригинальности невозможно, потому что без предыдущего опыта не из чего лепить оригинальность.

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

@slashdesigner #первые_шаги #майндсет
#снек 19. Про формат портфолио

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

Как не надо:

Никогда не присылай портфолио в формате PDF-презентации, загруженное на Яндекс Диск, или Dropbox, это самый лютый ад. Это автоматически даёт понять нанимающей стороне, что ты не думаешь об их пользовательском опыте. Если они в принципе нажмут на такую ссылку в своей системе отбора кандидатов, в первую очередь они увидят рекламу в сайдбаре, а также будут вынуждены листать слайды в кошмарном веб-превью.

Также плохая идея прикладывать PDF-портфолио в электронное письмо. Это ужимает объём доступного тебе размера файла до 15 mb, что недостаточно, чтобы раскрыть тебя. А 200-мегабайтные талмуды неудобно скачивать.

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

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

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

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

Если в портфолио 10 кейсов, продуктовый дизайнер не понимает, что он должен показывать. Классическая ситуация — когда джун показывает 7 работ, 1-2 из которых хоть отдалённо продуктовые, а остальное вообще лендинги или графика, которые непонятно зачем включены в портфолио.

Как надо:

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

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

Максимум в портфолио может быть до 3 релевантных жирных хорошо наполненных кейсов, с детальным описанием проблемы, ЦА, гипотезами, решениями с обоснованием. Это крайне сложно сверстать в Behance. И даже это уже более чем достаточно. На собеседовании со второго кейса уже как правило понятно, хватает ли тебе опыта, или нет.

По теме: Гайд Анны, часть 2: Портфолио

@slashdesigner #первые_шаги #карьера