/designer
Open in Telegram
Канал про продуктовый дизайн, инструменты и практику. Рекламы нет. Сайт: slashdesigner.ru Рубрики: #первые_шаги #для_профи #Figma #майндсет #задача #UI_ревью #дизайн_системы Форматы: #снек #статья #видео #анонс #подкаст Автор: @okunev
Show more2025 year in numbers

14 827
Subscribers
-624 hours
-207 days
-7930 days
Posts Archive
Как дизайнеру найти работу за рубежом
Гайд в 4 частях от Анны Лесной
Гайд создан для того, чтобы помочь самостоятельно подготовиться к собеседованиям на международном рынке и основан на личном опыте Анны. По алгоритму, описанному в этой серии статей, ей удалось найти работу в Чехии на позицию продуктового дизайнера.
Часть 1. CV
У тебя есть всего 6 секунд, чтобы произвести первое впечатление. Именно столько рекрутеры тратят на просмотр CV (резюме). На что нужно обращать внимание при составлении CV, чтобы не получить отказ уже на этом этапе?
Читать: slashd.ru/lib/hanna-guide/cv
В этой части
- Что такое ATS и как адаптировать для них CV
- Почему следует делать резюме в PDF или Ворде
- Структура эффективного резюме дизайнера
- Как подавать свой опыт: доказывать цифрами, формула XYZ, сильные глаголы
- Эволюция CV Анны: проследим, как развивалось CV.
@slashdesigner #для_профи #карьера #эмиграция
❤ 53👎 2
#UX_задача №3. Добавление контакта в Zoom
Клиент: Zoom
Приложение: Zoom Desktop Client for macOS
В этот раз мы улучшим совершенно адовый процесс, который встречается в одном из популярнейших в мире сервисов телеконференций — Зуме. В голове не укладывается, что миллионы людей по всему миру делают это, чтобы сделать такую базовую операцию.
Зум — сплошной учебник плохого UX и полное недоразумение. Однако, с точки зрения возможностей для профессионала это лучший инструмент из тех, что я встречал. У него лучшее качество связи, легко записать видео и есть возможность подключить аудио-карту с нормальным микрофоном, что очень важно для музыкальных занятий.
Улучшать опыт пользователя в Зуме легко и просто даже без всяких исследований. Только на кейсах из Зума можно собрать себе хорошее продуктовое портфолио.
Итак, джоб-стори:
«У меня регулярные встречи с моим преподавателем. Если он не в списке контактов, единственный способ пригласить его на звонок — отправить зум-ссылку. Для регулярных встреч это неудобно и мне нужно добавить его в контакты, чтобы позвонить ему без манипуляций со ссылками.»
Открыть в Figma →
Как и всегда, разбор этого флоу выложим через неделю. Присылай свой вариант решения в комментарии.
Предыдущие разборы: Получение ИИН, Подключение наушников к двум устройствам.
Новые задачи на разбор принимаем в комментариях специального поста.
@slashdesigner #для_профи #UX
❤ 40
🗂 Папка-шортлист крупных дизайн-каналов
В продолжение темы папок в Телеграме.
Ранее я публиковал папки с самым полным списком дизайн-каналов, а также папку с рекомендациями каналов от /designer. Они содержат довольно много каналов и если подписаться на эти папки, это может создавать шум от уведомлений в твоём Телеграме, что может кому-то не подойти.
Для тех, кто хочет сфокусироваться и настроиться только на самые крупные каналы про продуктовый дизайн и UX-проектирование, Михаил Греков из канала «Про удобство» организовал папку «UX/UI каналы», куда на сегодня вошли 18 каналов.
Помимо «Про удобство» там можно встретить /designer, Оди, Игоря Штанга, Алексея Бородкина, Поясни за UX, UX Notes, «Дизайнер, привет», Мамкин Дизайнер, Ozon Design и ещё несколько каналов с хорошей репутацией и крутым качественным контентом.
Если предыдущие папки для тех, кто хочет углубиться в каналы и узнать больше, то эта — для регулярного чтения. Рекомендую!
Добавить UX/UI каналы к себе →
@slashdesigner #полезная_реклама #каналы #для_профи
👎 19❤ 13😢 3
Как сделать анимацию градиентов
Выкладываю результат своих экспериментов с анимацией градиентов в Figma. Файл поможет накрутить градиенты, которые стильно смотрятся в качестве фона на лендингах и экранах логина.
Преимущество такого подхода в том, что при реализации не нужно рендерить это как видео, а можно реализовать через нативные эффекты твоей платформы, например, веба или iOS. Это делает такую анимацию совершенно невесомой. Но при этом важно быть на одной волне с фронтами, потому что им это верстать.
Файл в Community →
В этом файле можно посмотреть, как устроена раскадровка, какие анимации настроены, из каких объектов всё состоит.
Что использовал
- Шейпы разной формы: Rectangle, Ellipse, Polygon. Для рисования треугольников произвольной формы — Pen.
- Все шейпы обёрнуты компонентами для облегчения контроля над ними
- Смещение координат по X и Y для движения компонентов
- Масштабирование компонентов — Scale
- Изменение ширины и высоты, параметры Width и Height
- Вращение объектов — Rotation, чтобы создать дополнительное разнообразие в движении
- Набор стилей Blurs, которые позволяют накладывать типовые эффекты размытия с радиусом от 100 до 400
- Логотип с градиентом, слой которого в режиме наложения Color Dodge. Движение градиента под этим слоем создаёт блики, будто логотип состоит из стекла.
Что понял
1. Хорошо, когда анимация настолько медленная, что движение конкретных шейпов смазывается и возникает эффект сплошной единой разноцветной формы
2. Желательно соблюдать баланс при блюре: если слишком мало, начинают вырисовываться исходные шейпы. Если слишком много, цвета сталкиваются между собой и получается грязь.
3. Стоит стремиться к предсказуемой случайности движения. Если мы вообще не контролируем конечный результат, мы не можем влиять на то, чтобы он стал лучше и не видим закономерностей, достигая удачных эффектов исключительно в результате везения и попыток.
Чтобы контролировать его более эффективно, нужно начать с анимации геометрических фигур, а потом усложнять более мелкими элементами.
Если тема c градиентами зайдёт, сделаем видео-обзор. Приглашаю обсудить в комментариях!
@slashdesigner #первые_шаги #Figma #UI
❤ 36
00:10
Video unavailableShow in Telegram
Анимация градиентов №1, превью
gradient.mov30.54 MB
❤ 20
Папки с дизайн-каналами
На сцене телеграм-каналов про дизайн произошло кое-что интересное. В новой версии Телеграма теперь можно делиться папками с набором своих каналов.
Первым среагировал автор канала Это Лёша, поделившись своей папкой каналов.
Она быстро обросла всеми-всеми-всеми каналами, которые Лёше накидали в комментарии. В ней уже можно найти более 150 каналов и их количество продолжает увеличиваться.
Люди стали добавлять папку, подписываясь на все каналы, которые в ней были, а сама ссылка неплохо разошлась. Это привело к тому, что вошедшие в неё каналы получили мощный бесплатный буст аудитории, иногда на несколько сотен читателей, и я думаю, это только начало. В папку попал и @slashdesigner, за что спасибо Лёше. Эта папка — довольно подробный слепок того, что я называю русскоязычной дизайн-сценой Телеграма.
Не факт, что тебе на неё надо подписываться, особенно, если каунтер непрочитанных сообщений вызывают беспокойство. Как сказала моя супруга: «Мой мозг не заслужил, чтобы в него срали оптом».
Папки с большим количеством каналов подойдут тем, кто ищет что-то редкое, ищет темы для новых постов или привык читать много каналов.
Папка дизайн-каналов от Лёши, 150+ каналов
Самый полный набор каналов по графике, продуктовому и веб-дизайну, включая маленькие.
Выпускаю аналогичную подборку каналов от нашего проекта:
Папка: Дизайн-каналы от /designer, 84 канала
В неё вошли каналы, которые читаю сам и готов рекомендовать. Продуктовый дизайн, немного графики, менеджмента, моушн-дизайна и 3D. Минимум каналов с агрессивной рекламой.
Папка: Дизайн-чаты, 10 чатов
Здесь тематические чаты по дизайн-инструментам, включая чаты /designer.
По поводу публичных папок есть соображения, которые изложу в комментариях к этому посту бонус-треком: [в процессе публикации]
@slashdesigner #для_профи #каналы
❤ 25😁 2
Продолжение лекции «Шрифт и иллюстрация»
Новый выпуск: 4. Способ 3. Иллюстрация + текстовый блок
В заключительном выпуске рассмотрим, как уйти от скучной вёрстки прямоугольниками, а также о том, как использовать продвинутый способ подбора шрифта.
@slashdesigner #первые_шаги #типографика
Лекция «Шрифт и иллюстрация»
Александра Королькова записала крутую видео-лекцию для иллюстраторов и дизайнеров, которые хотят научиться гармонично сочетать типографику и иллюстрацию.
Для тех, кто предпочитает читать и смотреть примеры в своём темпе, мы с редактором Полиной Соколовой записали текстовую версию этой замечательной лекции, которую публикуем с разрешения автора.
Для удобства чтения материал разделён на 4 части, которые будут публиковаться с интервалом в неделю. Уже доступны первые две:
1. О неочевидном
2. Способ 1. Буква как объект изображения
3. Способ 2. Когда шрифт и изображение — субъекты одной композиции
20 марта 2023
4. Способ 3. Иллюстрация + текстовый блок
27 марта 2023
PS — к сожалению, slashd.ru теперь заблокирован в Украине, видимо со всей зоной .RU. Для доступа к материалу можно использовать Тор.
@slashdesigner #первые_шаги #типографика
Photo unavailableShow in Telegram
Ещё один забавный дизайн-ляп про внимание к деталям
В продолжение темы про дизайн-ляпы.
Мне маркетинговое пришло письмо от платформы faderpro.com, на которой обучают музыкальному продакшну.
Заголовок: «Давай, расскажи нам, как мы можем тебе помочь»
В шапке привлекательное фото с микрофоном. Но проблема в том, что в него не воткнут ни шнур, ни радиосистема. Любого музыканта, который хоть раз стоял перед стойкой, это заставляет усмехнуться:
— Ага, понятно как вы меня готовы слушать, если ставите передо мной не подключенный мик.
Всегда нужно учитывать степень погружения пользователя в предметную область. Отсутствие шнура — очевидный признак того, что петь или говорить в этот микрофон бесполезно.
То, что не важно для дизайнера из отдела маркетинга Fader Pro, может быть очень важно для получателя письма и полностью меняет подтекст коммуникации.
Для этого нужны UX-тесты, на которых такие детали обязательно вылезут.
@slashdesigner #первые_шаги
#дайджест за февраль 2023
В отличие от января, в феврале тут было затишье и минор. В работе сразу несколько крутых материалов-долгостроев, которые всё никак не дозреют. Чтобы ничего не обещать напрасно, обойдёмся без анонсов.
Что вышло в феврале:
Дизайнер завышает сроки — как лиду договориться со своими дизайнерами о времени на задачи
Люди везде ищут смысл — прикол из реальной жизни про то, как дизайн может быть неправильно понят
Разбор UX-задачи №2, про подключение двух устройств к одним наушникам, большое видео с процессом проектирования. Задачи собираем в копилке, пока там всего один кандидат на новый выпуск.
Замктка про типографику в дизайн-системах — что следует учитывать с самого начала, когда закладываем самое ядро нашей дизайн-системы
Заметка Oculus Go Fuck Yourself про разочарование в VR
24 февраля — пост на годовщину начала войны, где предлагаю поддержать фонд Дом с Маяком
Не публиковал, а стоило: лекция Виктора Теплова про рефакторинг дизайн-системы Ozon
@slashdesigner
24 февраля. #НетВойне
Ровно год назад началась горячая фаза войны в Украине. Для меня как для россиянина именно эта дата стала поворотной точкой, поэтому я уехал из России.
Самое важное, что имеет смысл обсуждать в этот день — это то, какое огромное количество украинцев и россиян погибло совершенно зря. Ещё больше потеряло свой дом и возможность жить мирной жизнью.
Следствием этого стало то, что на российское государство, компании и отдельных людей были наложены международные санкции, приводящие к разорению российской экономики и падению уровня жизни россиян. В том числе, из-за них разрушается отрасль дизайна.
Санкции закрывают россиянам возможности учиться и найти хорошую работу. Мешают оплачивать Фигму и другие IT-продукты с российских карт. Вынуждают использовать VPN для доступа к сайтам. О санкциях писал здесь: как дизайнеры в России могут решить проблемы с инструментами.
В крупных российских компаниях закрыт найм и стажёрские программы, бюджеты сокращаются. Приложения крупнейших российских банков удаляются из App Store и Google Play, что понижает безопасность пользователей. Лучшие специалисты целыми командами уезжают из страны без планов вернуться. Ксати, границы до сих пор открыты.
Всё это будет продолжаться, пока продолжается война. Чем дольше, тем больший ущерб будет нанесён самой России, и тем больше за неё будет расплачиваться каждый россиянин, вне зависимости от того, как он к этому относится, является ли он поддерживающим войну, конформистом или пытается протестовать.
Единственный способ закончить войну и вернуться в цивилизованный мир — сделать так, чтобы российских войск не было на территории Украины. Я верю, что военные преступления отдельных людей будут расследованы, а виновные привлечены к международному независимому суду.
Всё, что мы можем делать в текущей ситуации как россияне, не нарушающие закон — облегчить жизнь украинских беженцев, которым пришлось оказаться в России. Для этого можно донатить фонд Лиды Мониавы «Дом с маяком». Я давно наблюдаю за её деятельностью и считаю этот фонд проверенным.
Поддержать Дом с Маяком →
@slashdesigner #помоги_беженцам
Repost from TgId: 1764267125
Oculus Go Fuck Yourself
Отремонтировать VR-очки Oculus Go в Алматы оказалось просто невозможно. Обратился в два сервиса, оказался один и тот же, только с разными сайтами и номерами, и мастера уже нет. Там дали наводку, что этим могут заниматься мастера в ЦУМе, но у них только телефоны-планшеты. Целый этаж сервисов огромного ТЦ, но все мотают головой и шарахаются от меня как от огня.
Здесь особенно очевидно, как провалилась попытка устроить VR-революцию, о которой проповедовал Цукерберг в 2018. Говорил, что это новый iPhone и все скоро будут дружно погружены в метавселенную. На деле VR — до сих пор такая же экзотика для геймеров, как ходули или катамараны. Конечно, можно взять в парке в аренду для прикола, но не более. Это грустно.
По пути домой по запросу «VR-service» я нахожу ещё один сервис. Но оказывается, что это автосервис, где делают ремонт ходовой. Бедный автослесарь долго не может вкурить, о каких очках я ему говорю.
Легко делать выводы по факту, однако, выскажу мнение. Одна из причин провала VR-очков как массового типа устройств в том, что в большинстве своём они блокируют пользователям зрение, не говоря уже о слабой поддержке ПО. Я искал в них возможность убрать со стола громоздкий монитор и телефон, но до этого ещё очень далеко.
#Алматы #VR
Про типографику в дизайн-системах
Типографика — один из самых базовых и важных аспектов любой хорошей дизайн-системы, её ядро, второй шаг создания после палитры. При её проектировании исходим из следующих ключевых вопросов для размышления:
1. Какие платформы собираемся поддерживать: iOS, Android, Web, macOS, Windows. Всё это совершенно разные миры, которые трудно синхронизируются.
2. Является ли какая-либо из них доминирующей для нашего продукта? На всех стульях не усидеть. То, что изначально опирается на iOS, может деградировать для веба или Android, и наоборот, не использовать потенциал iOS, например, поддержку Dynamic Type.
3. Собираемся ли делать дизайн на базе единого шрифта или единой шрифтовой пары для всех систем? Готовы ли отказаться от гайдов и классных возможностей определённых систем (вариативные шрифты на Android и в вебе против Dynamic Type на iOS).
4. Собираемся ли мы использовать семантическую систему или абстрактную, основанную только на размерах? Смешивать их нежелательно. Одна только абстрактная шкала недостаточно себя объясняет и может быть сложно понять, какой стиль правильно использовать в каком месте. Слишком жёсткая семантика раздувает список стилей и приводит к дублям.
5. Что будет, если потребуется добавлять новые стили между существующими? Например, между H1 и H2. Не будут ли они ломать шкалу стилей? А что будет, если в шкале появляются разные модификации стилей, вроде normal, medium, bold?
Здесь ответом может быть внедрение нескольких слоёв токенизации, которые между собой не смешиваются, а существуют параллельно, например: body.500-heavy, где body — семантическая группа, 500 — условный средний размер по шкале размеров, а heavy — font-weight по абстрактной шкале.
@slashdesigner #дизайн_системы #для_профи
Справочник /f внезапно сломался и выдаёт 404, разбираемся.
Пока можно пользоваться notion-версией.
Обновлено: Починили.
@slashdesigner #техническое
#UX_задача №2. Подключение двух устройств к одним наушникам. Решение
В часовом видео разобрал текущий дизайн из приложения Sony Headphones Connect. Составил схематичные флоу и предложил 4 варианта, как улучшить существующий опыт.
Видео: https://youtu.be/ObtcYOFuHgU →
Исходная задача
Эта задача посложнее, чем первая, поскольку требует погружения в нюансы взаимодействия между двумя устройствами. В этот раз я не ограничивался одной лишь логикой, а набросал lo-fi прототип самого выгодного решения.
Именно такие задачи могут попадаться продуктовым дизайнерам в повседневной работе в крупных компаниях. Здесь мы видим сильный акцент на проектирование, которого не хватает в большинстве дизайнерских портфолио. Часто видел ребят, которые хотят устроиться на позицию продуктового дизайнера, а в портфолио показывают лендинги и пару красивых мобильных мокапов с главным экраном какого-нибудь финансового приложения. Без признаков логического проектирования.
Хочу подчеркнуть, насколько это далеко от лендингов, корпоративных одностраничных сайтов и конфетных картинок с мобилками.
Визуальный дизайн тоже важен, но в разборе этой задачи он остался за скобками. Его можем улучшать в рамках отдельной задачи, когда основной UX принят.
Новые задачи на разбор принимаю в комментариях специального поста.
@slashdesigner #UX #для_профи
Разбор UX-задачи получился больше часа. Как подать его, чтобы ты досмотрел?Anonymous voting
- Дробить на несколько видео до 20 минут, собрать в плейлист, не люблю долгие
- Сделать одно длинное видео с таймкодами, не люблю скакать по разным ссылкам
- Результаты
