/designer

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

#стать_лидом №5. Что нужно иметь перед наймом дизайн-команды: 10 факторов, которые помогут понять, что ты готов и для этого есть условия В прошлом выпуске рубрики мы говорили об общей картине и о том, куда мы двигаемся как команда. Также говорили про иерархию и творческую свободу. Поняв эти концепции, можно говорить о подготовке к найму людей. Читать полную статью: slashdesigner.ru/prep Краткая выжимка: Внутренние факторы: какой ты 1. Шаришь в своей теме. 2. Показываешь экспертизу делом. 3. Выступаешь ментором для других. 4. Понимаешь общий фокус будущей команды. 5. Понимаешь, сколько человек ты способен вести сейчас. Внешние факторы: что происходит вокруг 1. Лояльный руководитель, который доверяет твоим решениям. 2. Политическая возможность выделить тебя в команду. Пара слов про интриги. 3. Есть ли бюджет на найм? Сколько сможем нанять и какого уровня? Стоит ли нанимать джуниоров? 4. Есть ли в компании HR-бренд? 5. Есть ли где бесплатно рекламировать вакансию? В данный момент я веду 7 человек в двух параллельных командах в Озоне и ищу много новых продуктовых дизайнеров и дизайн-лида в соседнюю команду. Портфолио → @okunev. — #для_профи

Дождались! Скоро перейдём на тёмную сторону. Разве не этого мы хотели уже пару лет? А нас всё анимацией, автолейаутами и интерактивными компонентами пичкают в новых релизах. Глеб Сабирзянов даже сделал обзор: t.me/gleb_sexy/77 #тёмная_тема_в_Фигме

Введение в аналитику для дизайнеров В февральском опросе тема про аналитику и сбор требований вызвала большой интерес, поэтому я начинаю новый цикл статей, который раскроет её. Первая статья даст общее представление о том, какие бывают виды аналитики, зачем писать документацию и почему это важно для дизайнеров интерфейсов. slashdesigner.ru/ux/analytics Выжимка: Бизнес-аналитика — про деньги и нишу на рынке, продуктовая — про фичи и пользователей, системная — про архитектуру IT-систем. Нас интересуют последние две. Наша цель — эффективно собирать требования для дизайна сложных интерфейсов в корпорациях, чтобы здравый смысл и хорошие решения не тонули в потоке изменений, а работа над проектом строилась на понятных всем договорённостях. Это помогает соблюдать дедлайны и поддерживать высокий уровень качества. Доки нужно писать, потому что без них никакая серьёзная разработка продукта невозможна. Без них гораздо сложнее строить коммуникацию в команде и оставаться в одном информационном поле. Кроме того, они помогают уменьшить время онбординга, чтобы новые люди легко интегрировались в проект. При работе с аналитикой у нас два глобальных этапа: сбор и уточнение. Собирать требования нужно, чтобы понять исходную проблему. Уточнять — чтобы погрузиться в тему и узнать наши ограничения и возможности на уровне систем. — #первые_шаги #доки

10 полезных плагинов от канала Figma Design Комьюнити разработчиков постоянно радует новыми полезными наработками, которые могут ускорить наш рабочий процесс и дать новые творческие возможности. За новыми плагинами стало интересно следить. Это важно делать, чтобы сократить неизбежную рутину. Мы с автором канала @figmaplugin сделали жирнющую подборку плагинов, которые пригодятся в работе. 1. Variable Width Stroke – просто мастхэв для леттеринга и логотипов. Новый плагин от разработчика из Фигмы Эвана Уолласа закрывает потребность в Width Tool из Иллюстратора. На вход берёт обычную векторную линию потолще. Затем, позволяет задавать толщину отдельных её фрагментов через настройку наклона и формы пера, отсекая лишнее. На выходе можно нарулить красивые штрихи, похожие на рукописные. 2. Easing Gradients даёт альтернативный способ настраивать градиенты через изинги, как для анимации. Позволяет делать гораздо более сложные продвинутые градиенты, чем можно нарулить в стандартном пикере. GIF → 3. Many Paster — на вход получает текстовый список и может вставить его пункты в выделенные текстовые слои. Очень удобно для наполнения макета живым контентом. GIF → 4. Auto Layout Styles автоматизирует работу с аликами. Позволяет настроить шаблоны настроек AL, которые можно применять к выделенному фрейму. Скрин → 5. Export Presets — автоматизирует настройки экспорта по аналогии с Auto Layout Styles. GIF → 6. Morph — стилизующий плагин, добавляет эффекты к шейпам, прописывая тени и градиенты. В наборе скевоморфизм, неон, глитч, отражения. GIF → 7. Squircle — нарисует скруглённые прямоугольники, как на аватарах в Клабхаусе. Смотрятся приятнее, чем обычные со скруглёнными углами. 8. Good Line Height — настроит межстрочные отступы по заданному коэффициенту и шагу сетки. Полезно для лендингов. GIF → 9. Oblique позволяет создавать проекции шейпов и текстовых слоёв. Поможет нарисовать выдавленные буквы на случай, если ты делаешь дизайн обложки фанк-пластинки в стиле 70х. GIF → 10. Count Things — посчитает количество выбранных слоёв на странице. Пригодится, когда нужно понять, сколько слайдов в презентации или экранов во флоу. С удовольствием рекомендую @figmaplugin, сам подписан и считаю его очень полезным каналом для ленты продуктового дизайнера. Меньше чем за год он прочно занял нишу исследования новых плагинов. — #для_профи #плагины #партнёрский_материал

#стать_лидом №4. Куда мы двигаемся В прошлых выпусках рубрики мы говорили про режим дизайнера и режим лида. В этом продолжим тему и рассмотрим, на что нужно обращать внимание в режиме лида. Этот пост актуален не только для дизайн-менеджеров, но и для всех остальных руководителей. В творческих командах эта тема особенно важна. Эффективная команда имеет понятное направление движения и хотя бы одну описанную глобальную цель, на которую ей выделяют ресурсы: деньги, время и доверие. Все в команде эту цель понимают и работают на то, чтобы её достичь. Если это не так, начинаются проблемы. Я стремлюсь работать с теми, у кого сразу с первой встречи горят глаза, когда я рассказываю о своих проектах и задачах. Такие люди выполняют задачи с удовольствием и большую часть времени кайфуют от работы, потому что она наполнена смыслом, и это всегда чувствуется. Это даёт совершенно другое качество работы, потому что их мотивирует сам процесс и не надо над ними стоять с палкой, чтобы они работали. Такая работа вызывает приятные мурашки по коже. Но помимо этой изначальной мотивации от процесса человеку нужно дать чувство сопричастности, объяснить, какую очевидную пользу принесёт его работа в глобальной перспективе. Здорово быть причастным к чему-то огромному и важному. От таких проектов пахнет будущим, их не стыдно записать в своё резюме. Концепция общей картины Общая картина — это представление о том, куда мы двигаемся и зачем. Это внятное объяснение, в чём заключается наш план, в рамках которого мы приносим пользу и делаем классный продукт. Для меня это один из важнейших инструментов управления. Это источник вдохновения, как для меня лично, так и для моей команды. Мне нравится сравнение Общей картины со знаменем или картой, которое несёт лид и по которой он ведёт свою команду. Общая картина — не монолит, а постоянно меняющееся и хрупкое полотно, которое норовит порваться. Задача лида в том, чтобы защитить её и сделать прочнее. Делается это при помощи построения доверия: соблюдения договорённостей и реальных выполненных дел, сдержанных слов и обещаний. Когда она рвётся, люди разочаровываются, не выполняются обещания, теряется смысл быть в команде, смысл вкладывать в работу свои силы и эмоции. Мотивация на нуле. Тогда начинается дембельский синдром, потому что у тебя с этой командой и компанией больше нет никакого будущего. Общая картина нужна всем от руководства лида до младшего дизайнера. Лид не должен выпускать её из рук, а должен делать своё знамя прочнее и ярче, регулярно показывая его во всех красках и деталях своей команде и руководству. Это даёт ощущение движения и хорошей предсказуемости процессов. В каком-то из интервью Стива Джобса я слышал от него ровно эту мысль. Люди склонны зацикливаться на своих кусках работы и терять общее видение, погружаясь слишком глубоко в свой фрагмент. Лидер команды — словно визионер, который должен неустанно рассказывать своей команде, куда мы идём, убеждать, что всё это не зря и укладывается в одну общую логику. Я стремлюсь, чтобы среди моих дизайнеров формировалось общее информационное поле и они как можно больше общались и сотрудничали друг с другом, а не только со мной. Чтобы жизнь команды была прозрачной, мы проводим ежедневные утренние встречи — синки, где у каждого есть 3 минуты по таймеру, чтобы пройтись по доске и рассказать вкратце об успехах и затыках. Эти встречи задают настрой на целый день и дают мне и моей команде возможность синхронизировать ту самую Общую картину. А если вопрос в это время не укладывается, дизайнер всегда может поставить мне встречу в течение дня и мы разберём его вопрос более подробно. А как вы синхронизируете Общую картину в твоей команде? Расскажи в комментариях. — #для_профи

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

Интерактивные компоненты облегчат создание ховеров Восхищает, как взаимосвязаны релизы новых фич в Фигме. Каждая следующая фича развивает идею предыдущей. Недавним важным шагом, который мы увидели, был релиз «вариантов». Они дали возможность объединять компоненты в специальные группы, внутри которых стало можно переключать состояния. Это уменьшило количество мусора при поиске нового компонента: теперь в выдаче мы получаем только название группы вариантов, например, Button или Switch. Настройка ховеров для пунктов меню всегда была адом в Фигме. Следующая лакомая фича, которая доступна сейчас в бета-версии, решает задачу ховеров. В интерактивные компоненты можно будет зашивать переходы между состояниями, не привязывая их к смене конкретных фреймов в сценарии. Это значит, что нас ждут меню и кнопки с ховерами, которые мы настраиваем в мастер-компоненте один раз и дальше используем по всему проекту. Конечно же, в переходах между вариантами можно использовать Smart Animate. Это облегчает протоипирование более сложной логики, чем переходы между экранами: например, так можно набросать целую игру в крестики-нолики. Если очень любопытно, можно оставить заявку на бета-тестирование этой фичи. P.S. – не восхищает, что на прошлой неделе в макетах неконтролируемо послетали стили. Последние версии были какими-то особенно забагованными, и непонятно, с чем это связано. Надеюсь, они не уволили весь отдел тестирования. — #первые_шаги #ui_анимация

Как сетка ухудшила UX Делюсь недавним негативным опытом, как я использовал 12-колонную сетку на проекте системы управления контентом. Я не продумал некоторых нюансов, что ухудшило опыт моих пользователей. В конце рассказываю, как исправил ситуацию. slashdesigner.ru/grid-ux-fail Спойлер: если при проектировании системы ориентироваться только на большие экраны (1920), и не брать в расчёт средние на 1280, 12-колонник, разделённый на 3 блока, может слишком сильно жать контент по ширине. Поэтому, на 1280 стоит избегать деления на 3 колонки, если в одной из них происходит что-то важное. Выводы: 1. Потребности всегда важнее визуального, а контент важнее оформления. 2. Постоянный хороший контакт с моими пользователями позволил сэкономить на формализованных исследованиях. 3. Всегда стоит начинать проектировать от меньшей ширины к большей. Для админок стандарт ширины — 1280. А какой интересный опыт работы с сетками был у тебя? Расскажи в комментариях. — #для_профи #сетка

Урок по анимации лоадера За 12 шагов рассказываю азы работы со Smart Animate — удобным механизмом для настройки анимации переходов между фреймами. slashdesigner.ru/loader-smart-animate В этом уроке мы нарисуем элементы, скликаем прототип, настроим изинги и задержки, применим фишку с морфингом лоадера в иконку, узнаем, что такое захлёст. В качестве бонуса узнаем, как записать экран. Проект в Figma Community — #первые_шаги #ui_анимация

Обсуждение поста про ноушн-сайт — здесь.

Ноушн-сайт /designer Сегодня будет крутой подгон. Я собрал весь контент этого проекта на единой площадке в ноушн-пространстве. Notion /designer → Рекомендую взять эту ссылку и скопировать её в твоё ноушн-пространство, чтобы держать под рукой. Что внутри: Одну из страниц этого пространства я уже анонсировал ранее — это база данных всех горячих клавиш Фигмы с понятными комментариями для каждой команды. Оглавление постов — архив всех моих постов по всем площадкам с 2017, с картинками. Рекомендую порыться в архиве, там есть много ценного про инструменты и UX. Заметки о проектировании, которые были на старом сайте. Заказчик, исполнитель, пользователь — о ролях в коммерческой разработке, очень важный текст, который я не публиковал в канале ранее. Пара хороших книг и лекций про шрифты, которые я публиковал. Также из этого пространства можно узнать о планах будущих постов, они помечаются серым. Я забыл о старом сайте на Вордпрессе на хостинге как о страшном сне. Ноушн — это идеальный формат для образовательного сайта вроде моего. Я совершенно не понимаю, почему Ноушн до сих пор не поработил все образовательные блоги и личные сайты. Проект позволяет не думать об оформлении и фокусирует внимание на контенте. Я ещё много и плотно буду писать о нём, поскольку систематизирую в нём бизнес-требования и пришёл к определённой методологии того, как это делать. В Ноушне можно оставлять мне комментарии, выделяя текст. Для этого нужен бесплатный аккаунт. Также рекомендую использовать Ноушн не через браузер, а через десктопный клиент. — #важное #Notion #первые_шаги #для_профи

Выбираем интересные темы в #первые_шаги Привет. Мне понятно, куда развивать рубрику #для_профи, но с рубрикой для начинающих не всё так очевидно. Прикидываю, какие темы будут наиболее интересны для начинающих дизайнеров среди читателей. Прошу голосовать только тех, кому интересна сама рубрика. Если есть идеи и предложения, буду рад их получить лично: @okunev. Я открыт для общения.