/designer

Люди везде ищут смысл Вот прекрасная иллюстрация этому из реальной жизни. Дизайнер не отфильтровал контент, набрал случайных фото «какие прислали» и не учёл, какое в итоге сообщение передал его дизайн. Почему так происходит? Каждая фотография специалиста на лендинге встаёт в один смысловой ряд с другими. Наш мозг воспринимает их как элементы с едиными типовыми свойствами и статусами. Мы как дизайнеры можем проявлять эти свойства через дизайн-приёмы, например, через десатурацию. У человека сработал визуальный паттерн, который он видел в других местах. Его предыдущий опыт таков, что эффект обесцвечивания фото у него ассоциируется со статусом «умер». Эффект усилился, когда остальные фото в подборке случайно оказались цветными. @slashdesigner #первые_шаги

#дайджест за январь 2023 Январь получился плодотворным на контент. Чтобы ты ничего не пропустил, я собрал посты прошлого месяца: Как накатывать обновления на компоненты, чтобы оверрайды не слетали — пошаговая инструкция Ковыряем ChatGPT и про отличие гайдов Apple и Google и удивляемся, что он сечёт Актуализируем темы канала на год — можно посмотреть, что наиболее интересно читателям, и о чём я и другие авторы будем писать Классный канал про веб-дизайн — наши друзья Видео: UX-задача №1 про выдачу ИИН, решение — первое видео после долгого перерыва в эфире, за полчаса набросал решения по улучшению опыта UI: фэнси переключатель тёмной темы на SwiftUI с разбором реализации от автора Копилка UX-задач для новой рубрики, здесь собираем новые задачи для будущих видео. @slashdesigner

#стать_лидом №8. Дизайнер завышает сроки Вопрос: ставлю дизайнеру задачи, которые займут понятное время. Делать их нужно срочно, заказчик давит. Дизайнер отвечает, что не уложится за день, хотя я бы раскидал их за пару часов. Как действовать? slashd.ru/lead/slow-designer → Варианты: 1. Дизайнер не понимает, каков реальный объём работы 2. Он демотивирован и уклоняется от работы Также о том, что делать, если дизайнеры хуже работают на удалёнке и почему гибридный вариант работы может помочь. Понять, чем заняты дизайнеры на удалёнке легко можно через ежедневные утренние встречи — синки (= дейлики). Регулярно проходящие синки в комфортной для всех атмосфере сплачивают команду и позволяют лиду понять, что происходит. Опытный лид, выскажи своё мнение! Как ты договариваешься со своими дизайнерами, сколько им можно уделить времени на задачу? @slashdesigner #для_профи

#UX_задача №2. Подключение двух устройств к одним наушникам Клиент: Sony Приложение: Headphones Джоб-стори: У меня два устройства, на которых я слушаю музыку: телефон и компьютер. По пути на работу удобно слушать музыку на телефоне. Когда я прихожу в офис, удобнее продолжать использовать те же наушники на компьютере. При помощи приложения для наушников я хочу настроить, чтобы они одновременно держали соединение с двумя устройствами, переключаясь, когда на одном из них что-либо звучит. Так я смогу сэкономить себе время, когда приходится вручную переключать соединение по Bluetooth, отключая наушники от телефона и подключая к компьютеру. Файл в Figma содержит два сценария: включение режима нескольких устройств и подключение второго устройства. Задача: выявить слабые места текущего решения и предложить улучшения. Опубликую разбор в конце недели. Напомню, что можно предлагать свои задачи в копилку. @slashdesigner #для_профи #UX

Копилка UX-задач Я собираю UX-задачи для новой рубрики в канале. Если у тебя есть задача, которая требует проектирования опыта, пожалуйста, оставляй её в комментариях к этому посту. Самые интересные задачи я буду разбирать в видео на YouTube. Условие — задачу можно решить в течение часа, чтобы не затягивать выпуски. Это может быть уже существующий интерфейс в Фигме или текстовое описание. Этой рубрикой я ставлю цель поделиться логикой мышления при проектировании опыта. PS: исправил уровень звука в пилотном выпуске, но из-за перезалива потерял лайки и комментарии. Спасибо за лучи поддержки, приятно, что такой контент зашёл. @slashdesigner #техническое

Разбор #UI №4. Переключатель темы Когда-то дизайнер из Словакии Роман Клчо сделал этот шот с объёмным переключателем тёмой темы. Как и большинство работ на Дрибле, UI там это отдельный вид искусства. Это красиво, но непрактично, поскольку довольно трудно в разработке и не особенно осмысленно даже с точки зрения UX. Гораздо проще наследовать настройку темы от операционной системы, а не переключать на уровне приложения. Но если очень хочется, то можно. Швейцарский разработчик Мортен Джаст (в прошлом тимлид в Google) в качестве эксперимента реализовал этот переключатель на SwiftUI и даже сделал поддержку VoiceOver. Жаль, что SwiftUI со всем его хипстерским удобством пока не светит крупным продуктам, которые пока вынуждены поддерживать iOS до версии 12, а его можно использовать только начиная с iOS 13. Естественно, никакой обратной совместимости. У Мортена кстати много экспериментальных крутых штук на его сайте mortenjust.com, а также своя рассылка на Substack. В твиттер-треде он обещал, что выложит код в следующем выпуске. Разбор деталей реализации: 1. Как компонент реагирует на изменение форм-фактора 2. Как реализован эффект перспективы 3. Тень из размытого прямоугольника 4. Шумы 5. Переход в замедлении 6. VoiceOver Поражаюсь, какие же они все крутые. @slashdesigner #для_профи #анимация #SwiftUI

#UX_задача №1, про ИИН. Решение В видео я накидал варианты сценария получения ИИН и проговорил ограничения. https://youtu.be/TAyOqivp234 - Исходная задача - Кит с UX-флоу - Фигма-файл с решением @slashdesigner #первые_шаги #UX

Находки веб-дизайна на канале @webdesigndaily Рекомендую проект Web Design, в котором регулярно можно поразглядывать красивые сайты для развития вкуса. Что понравилось из канала: 1. thecheckout.klarna.com The Checkout — ежегодные итоги за 2022-й с точки зрения крупного е-комерса Klarna. Ностальгия по ретро, крупные пиксели и типографика. 2. miro.com/ways-we-work Стильно оформленные результаты исследования «Ways we Work» от Miro. Контент о восприятии людьми своей работы, коллаборации, отношениях в команде и преимуществах гибридной работы. 3. danieltriendl.com Портфолио иллюстратора из Австрии Дэниела Триендл с вёрсткой как в Pinterest. Понравилось, как он работает с цветом. @slashdesigner #сайты #для_профи #полезная_реклама

#UX_задача №1. Получить ИИН Клиент: Госуслуги Казахстана Джоб-стори: я как иностранный гражданин хочу оформить национальный идентификатор для дочери, чтобы её взяли в садик. Поскольку не являюсь гражданином, я должен идти в центр обслуживания (ЦОН) лично. Я прихожу в ближайший в своём районе, где раньше сам делал ИИН полгода назад. Меня довольно быстро обслуживают и говорят, что решение будет через несколько дней в виде СМС. Проходит несколько дней, я получаю смс-отказ с формулировкой «обратитесь в ЦОН». Я прихожу в ЦОН, мне говорят, что все заявки на ИИНы у них последнее время приходят с отказами и мне надо ехать на край города в специальный миграционный ЦОН. Там я наконец получаю ИИН. Задача: составить пользовательский путь и гипотезы об улучшении клиентского опыта с учётом разных технических ограничений и без них. Рекомендую делать это в Figma, FigJam или Miro. Ограничения: 1. Нет возможности менять приложение и функционал сайта Госуслуг. 2. Нет возможности обслуживать иностранцев во всех ЦОНах, нужен миграционный. 3. Нет доступа к сервису СМС-уведомлений. 4. Слишком дорого оповещать всех иностранцев в стране об изменениях в процессе получения ИИНа по СМС. Как будет меняться решение в зависимости от разных ограничений? PS: но в целом Госуслуги в Кз — ван лав. Когда была волна мобилизации, очень быстро среагировали и грамотно распределили желающих получить ИИНы по отделениям банков, открыли дополнительные ЦОНы. Ответ: t.me/slashdesigner/942 @slashdesigner #первые_шаги #UX

Как ChatGPT могут использовать продуктовые дизайнеры для обучения? Начнём новую тему и попробуем поисследовать модный AI-собеседник. Зарегистрироваться в нём можно на сайте chat.openai.com, для этого нужна гугл-почта и подтверждение по номеру мобильного телефона. Первый способ применения, который приходит в голову — это использовать его как инструмент исследования теории дизайна и гайдов. Всё, что можно вычитать в книгах или сайтах про дизайн, потенциально может быть им проиндексировано и выдано в виде короткого внятного текстового ответа. По ощущениям переписываешься с человеком, который знает всё. Я вижу его в первую очередь как способ поиска идей и верных акцентов в контенте. Он может помочь отделять важное от неважного в общем потоке интернет-мусора. Например, вместо того, чтобы читать гайды iOS Human Interface Guidelins и Google Material от корки до корки и анализировать их самостоятельно, можно воспользоваться ChatGPT, который может сформировать готовое мнение по поводу того, что ему удалось из них извлечь. Я расспросил ChatGPT о гайдах Apple и Google, наводящими вопросами попробовал их сравнить. Результат получился довольно интересным, хотя иногда разочаровывал отсутствием конкретики. Прочитать наш диалог можно в комментариях этого поста. Привожу без редакции, чтобы можно было понять, как именно нейросеть формулирует ответы. @slashdesigner #первые_шаги #AI #ChatGPT

Урок о том, как безопасно накатывать обновления на компоненты из библиотек в Figma Не так давно в Figma появился важный апдейт — возможность сверять вид экземпляра компонента бок-о-бок до и после обновления его мастера из библиотеки. Это удобный механизм для того, чтобы бороться с потерей контента из оверрайдов. Я продемонстрировал, как можно использовать эту функцию для восстановления слетающего контента на крупных проектах, где используются библиотеки. slashd.ru/figma/saving-overrides → Кратко: когда в файле возникает плашка Review Updates, мы можем проваливаться в компонент и листать все его экземпляры, и, не закрывая окна, по ходу исправлять их вручную. PS — Просили в виде видео, но пока нет возможности записать и озвучить, планирую вернуться к такому формату. Те, кто снимает качественные видеоуроки, вы просто герои. @slashdesigner #Figma #для_профи

Вместо итогов 2022 года Принялся писать про итоги и важнейшие события, но любые итоги года смотрятся абсолютно неуместно в одном посте с главным итогом — войной. Так что пост получился не про покупку Фигмы и бум нейросетей, а про поддержку. Хочу поддержать три категории своих читателей, которые сейчас находятся в разных вселенных. Первая — это украинцы, которые уже почти год яростно и самоотверженно борются с захватчиками за свою страну и терпят ужасные лишения. Когда-то 30% читателей канала было из Украины. Теперь, конечно, меньше. Вы вызываете восхищение и полное сочувствие. Нелегко жить в учебнике истории, но Украина сейчас показывает модель для всего мира, каким должно быть свободное независимое государство будущего. Только в таких странах, в которых существуют законы и есть свободное общество, может развиваться дизайн. Украина обязательно выстоит и восстановится, потому что это живая страна и территория живых людей. Вторая категория — это те дизайнеры, которые осознанно остались в России, чтобы быть опорой для своих родных и всех тех, кто от них зависит. Такое самопожертвование — сильное решение, и оно заслуживает уважения, потому что дальше будет тяжело. Текущая Россия это страна без будущего, страна мертвецов, в которой остаётся некоторое количество живых людей. Оставаться живым и свободным в этой среде сложно и даже опасно. Созидать в среде, где всё располагает к разрушению, тяжелее. Не позволяйте навязывать вам коллективную вину и делайте своё дело. Если вы не совершали зла, не вам за него отвечать. Если вы осознаёте, что значит жить в России 2023 года, я не представляю, в каком уровне стресса проходит ваша жизнь. И третья категория — это мы, российские дизайнеры, которые покинули свои дома и стали беженцами. Все, кто уехал по политическим причинам и спасаясь от мобилизации. Все, кто тоскует по привычной жизни дома, которой больше нет. Мы не одни и пришло время заводить новые знакомства, объединяться там, где мы есть и помогать друг другу. Для нас я скину ссылку на пронзительное и точное новогоднее обращение Каца. Дизайнеры всегда созидают, так мы устроены. Давайте продолжать созидать в любых условиях. Желаю читателям провести следующий год в безопасности и тепле, с близкими, со светом, работой и мечтами, которые не угаснут. С Новым годом. @slashdesigner

Виктор Теплов на этой неделе ведёт канал Ozon Это мой добрый друг и в прошлом дизайнер из моей команды, которого в своё время я пригласил в Ozon. Виктор — настоящий японец в душе и без сомнения, мадзимэ. Кто-то знает его по каналу Zen Designer и ответам в нашем Чате про дизайн-системы. На этой неделе он ведущий канала @ozondesign. Уже написал про искусство киригами и про то, как можно из старых упаковок делать что-то новое. Должно быть и дальше интересно. @slashdesigner #для_профи

Как помочь украинцам, которые остались без света? Вы можете поучаствовать в сборе денег на покупку и доставку печей и генераторов в Украину. Их организуют благотворительные организации. Вот некоторые инициативы: ▪️Сбор от ассоциации Russians for Ukraine (есть возможность помочь из России переводом на российскую карту, отправить деньги на европейский счет или заказать печь или генератор самостоятельно с доставкой до пункта сбора на польской границе с Украиной) ▪️Сбор от голландского НКО для медицинских учреждений ▪️Сбор для жителей Запорожья, организованный активистами из Нидерландов А еще вчера запустилась программа сбора в европейских городах, за новостями проекта можно следить в локальных новостях в ваших странах. Кроме того, есть много частных сборов в фейсбуке — но имеет смысл доверять только тем, кого вы знаете лично. — Мы работаем как единая справочная — собираем только проверенную информацию и организации. Задавайте любые ваши вопросы в @helpdeskmediabot

Навыки дизайнера презентаций: 10 шагов Задали вопрос о том, как стать дизайнером презентаций и что важно. Ответ превратился в большой пост. Делюсь. Погружаться в сферу дизайна из презентаций типично, потому что у этой специализации относительно лёгкий порог входа и большой рынок заказчиков. Почему-то делать презентации не учат в школе. Даже если ты не собираешься делать их в качестве основной работы, презентовать со слайдами — это важный навык для любого человека, который стремится построить карьеру и доносить свои идеи до других. Шаг 1. Изучить инструмент. Я разделяю инструменты для дизайна (Figma) и инструменты для показа (Keynote, PowerPoint, Prezi, Canva, Google Slides и тд). Для базового создания дизайна слайдов я бы использовал только Figma, потому что этот редактор позволяет использовать нормальные сетки, стили и компоненты для повторяемых элементов. Кстати, для през очень удобен формат 1920 х 1080 и сетка c шагом 40. В такой среде слайды могут быть по-настоящему pixel-perfect. Дальше можно экспортировать в PDF и на этом остановиться. Но можно пойти дальше и готовые слайды перенести в специализированный инструмент для презентаций, будь то PowerPoint или Keynote. Не стоит изначально делать презы в них, поскольку это отрицательно скажется на визуале. 2. Изучить основы дизайна: особое внимание типографике. Дизайнер презентаций обязан уметь верстать тексты. Композиция может быть очень типичной, например, стоит попробовать начать с вёрстки в две колонки. Умение работать с цветом позволит делать презентации более выразительными. 3. Язык для таких дизайнеров особенно важен. Инфостиль, «Пиши, Сокращай» — метко формулировать мысли, писать внятно и прозрачно. 4. Нарратив. Как выстраивается логика повествования. Например, «от проблемы к решению»: формулируем проблему → описываем варианты решения → выбираем предлагаемый вариант → спасибо/вопросы/контакты. Бывают и другие виды нарративов. 5. Иллюстрации. Умение визуализировать данные в виде красочных графиков будет ценным расширением. Искать визуальные референсы, перерисовывать то, что нравится. Набить руку на 10 примерах и просить компетентной критики, например, в нашем @designchat2. 6. Насмотренность на крутые презы, от тех же Bonnie and Slide (не реклама, просто вспомнились) и от презентаций крупных брендов. На начальном этапе не стоит увлекаться артом в презентациях, накручивать яркие цвета и пытаться втиснуть как можно больше графики, потому что она смотрится прикольно в других местах. Важно понимать, в чём изначальный посыл презентации и ради чего мы используем выбранные иллюстрации. Проще начинать с чистого контента, а не с выбранного шаблона. Шаблоны стоит использовать только в качестве референсов по стилю и заимствовать из них нужные подходящие ходы. Много хороших шаблонов можно найти на сайте онлайн-редактора canva.com/q/presentations/. Сам редактор серьёзным инструментом не считаю. 7. Сделать портфолио из 3 през слайдов на 7-12. Этого будет достаточно для демонстрации твоего текущего уровня. Можно сделать это в формате Тильды или на Squarespace. Делать список ссылок на прототипы в Фигме или загружать PDF в Dropbox или Яндекс Диск не круто. 8. Взять платную консультацию у того, кто ими прицельно занимается. Сам в данный момент приостановил консультации. Или более оптовый вариант: пройти специализированный курс про презентациям, сразу настроит твой фокус. 9. Софт-скилы. Обычно презентацию нужно сделать срочно и быстро. Поэтому, при поиске исполнителя смотрят на то, умеешь ли ты работать в жёстких дедлайнах. В презентациях лучше «грязно и быстро», чем «очень красиво, но уже не надо». 10. Искать работу в агентствах, отделах маркетинга крупных IT-компаний или уже сформировавшихся фриланс-командах с опытными дизайнерами. Не шабашить в одиночку самому без присмотра старших. Дизайн в одиночку = выкинутые годы. Если среди читателей кто-то занимается презентациями профессионально, пожалуйста, пишите в комментарии, что могли бы порекомендовать начинающему. @slashdesigner #первые_шаги #презентации

Как безопасно накатывать обновления из библиотек в Figma Проблема: прилетели обновления в файл из библиотеки, нажали Update All, слетел контент и графика в оверрайдах по всему файлу и теперь непонятно, где искать косяки в макетах. Придумал решение через ветки. Работает только на тарифе Organization. 1. Откатиться через Version History на версию до наката изменений. 2. Создать ветку версии файла до изменений, назвать её как удобно, например Updated. Версия до изменений сохранится в главной ветке. 3. Накатить изменения в ветке Updated, затем сравнить ветки Updated и главную командой Review and merge changes. 4. В окне Branch review в виде удобных карточек отследить, что именно слетело, сделать скриншоты для дальнейшего ручного исправления. Так мы отслеживаем малейшие изменения в структуре файла. 5. Сделать мёрдж ветки Updated в главную. Так мы доносим все изменения из Updated. 6. Если есть, что исправлять: по скриншотам из шага 4 исправляем всё, что слетело. @slashdesigner #Figma #для_профи

Самый простой способ проверки на доступность в Фигме — наложить на макет прямоугольник в режиме Saturation. Это обесцветит все цвета, которые попадут под прямоугольник.