/designer. Страница 5
9209
@slashdesigner
Канал о дизайне интерфейсов в Скетче, анимации и дизайн-системах, который ведёт дизайнер из Газпромбанка.
-
/designer
Онлайн-воркшоп по компонентам в Framer X
Разработчик из Framer Артём Ряснянский @rsnnsk сделал воркшоп для русскоязычного сообщества.
youtube.com/watch?v=LIeObKJkVI4
Что было: Обсудили основы Реакта и Тайпскрипта, написали простой компонент, в котором по клику меняется случайное фото кроссовка. Выяснили, что компоненты Фреймера могут служить как для прототипов, так и для боевой разработки. Обсудили, как передавать фреймер-проект фронтендам.
Для дизайнеров, которым не хватает графического редактора, а хочется копать глубже и делать дизайн с живыми данными. Нужно знать основы HTML и CSS и немного JS. Задавать вопросы по Фреймеру можно в Фреймер-чате.
Компонент в Framer Store
Исходник на GitHub
—
#для_профи #Фреймер -
/designer
Обновлённая версия книги — v.1.1
PDF | Внешняя ссылка →
Минорный апдейт. Исправлено много опечаток и неточностей, о которых написали читатели. Добавлены некоторые клавиши для Windows и новые скриншоты. По всей книге исправлен стиль нумерованных списков.
Спасибо Виктору Шишко, Кириллу Олейниченко, Юрию Филипову, Павлу Новицкому, Владу Богданову, Юлии Думанис и Оксане Хажиевой, за фидбэк и найденные опечатки. Вы сделали эту книгу лучше. -
/designer
Design Line Workshop
Мои хорошие знакомые The Promotion снова организуют серию стримов Design Line Workshop. Год назад я уже о них рассказывал и с интересом послушал, было здорово и народ хвалил.
Каждый из воркшопов будет длиться по два выходных дня и даст возможность поработать над своим проектом вместе с крутыми чуваками. Это очень помогает встряхнуться и узнать новые подходы в работе.
Все воркшопы будут проходить в выходные в виде интерактивных прямых трансляций.
23-24 марта — «Поиск и реализация визуального решения. Теория и практика»
Сергей Гуров
30-31 марта — «Огонь суровых бизнес-задач. Находим решения для реального веб-проекта»
Гриша Коченов и Костя Кислейко из AGIMA. Гриша произвёл на меня большое впечатление своим выступлением на G8 «Зона отчуждения».
Промо-код на 10% — agima.
6-7 апреля — «Экспериментальная типографика: там, где кончается форма и начинается смысл»
Денис Башев.
13-14 апреля — «Digital-айдентика. Как сделать фирменный стиль, живущий в цифровой среде»
Саша Медвинский и Анна Сваровская из Creative People
Промо-код на 10% — cpeople.
20-21 апреля — «Как дизайнеру грамотно вести клиентские проекты: от брифинга до презентации»
Сергей Свиридов из Red Collar.
Промо-код на 10% — sviridov.
Сам с удовольствием поучаствую.
Подробности и билеты →
—
#для_профи #анонсы -
Реклама
-
/designer
Пост | Сайт Design Line 
-
/designer
Впечатления от ProfsoUX и воркшопа
Рад был поучаствовать в питерской конференции @ProfsoUX. Отличная организация, хорошее место и доброжелательная публика. Отчёт с конференции планирую выложить позже, там сильные лекторы.
Провёл часовой воркшоп, на котором спроектировал лоуфай-прототип для сценария регистрации в типичном банковском приложении.
Встал перед дилеммой: успеть показать целый сценарий от начала и до конца, или больше уделить время совместной работе с залом. Выбрал первое, поэтому взаимодействия с залом было меньше, чем мне хотелось. Не успел показать работу с правками через комментарии в Фигме и продемонстрировать тестирование. Приняли тепло, задавали много дельных вопросов. Например, про версионирование прототипов, бардак в компонентах и лапшу из связей. Понял, с какими проблемами сталкиваются ребята и теперь смогу разобрать их в канале.
Это было моё первое такое выступление на полный зал в 50 человек. Вдохновляющий опыт. Ушёл прокачивать ораторские навыки, чтобы повторить его на других площадках или в виде трансляции. Уж лучше запинаться, рассказывать меньше и своими словами, чем идти по рельсам готового напечатанного текста и перегрузить аудиторию. Между расслабленной записью видеоуроков дома и живым выступлением огромная пропасть.
Жду видеозапись, которую выложу на YouTube, одновременно выложу тезисы. На мою камеру удалось записать большую часть. Записать экран через ScreenFlow не удалось: тот подвёл и заглючил.
Спасибо тем, кто пришёл!
—
#для_профи -
/designer
Книга «Руководство по Figma»
Приложение: проект в Фигме
Сегодня большой день. Я публикую свою первую книгу. Это труд последних нескольких месяцев. В компактном виде собран солидный набор технических знаний, который позволит эффективно создавать интерфейсы и иллюстрации. Книга напичкана горячими клавишами, практикой, вдохновением и лайфхаками.
Сравнение Фигмы и Скетча
Я подробно анализирую основные функции, а также их аналоги в Скетче. Разбираю реализацию символов и компонентов, стилей и ограничителей.
Что внутри
Рассматриваю 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.
Начинающие найдут здесь для себя правильный технический фундамент дальнейшего развития в дизайне. А те, кто работал в Скетче, смогут максимально быстро перестроиться на новый редактор.
Это бета
В эту версию вошло далеко не всё, что я хотел и её можно было бы бесконечно улучшать. Новые главы обязательно будут появляться. Это самая первая публичная версия. Я буду рад получить обратную связь о книге лично или на сайте. Прошу сообщать об опечатках.
Эта книга бесплатна
Поблагодарить меня можно через PayPal и Я Соберу. Задавать вопросы, которые возникнут по книге — в Фигма-чате.
Книга адаптирована для чтения на планшетах. Закачай её в айпад, чтобы иметь под рукой.
Внешняя ссылка: slashdesigner.ru/books/Figma_Guide_v.1_beta.pdf
—
#первые_шаги #Руководство #Фигма -
/designer
PDF | О книге 
-
/designer
Интересная заметка про то как в Фигме вырезать экраны с комментариями. Нельзя делать это через Cmd + X, иначе все комментарии потеряются в блоке Unattached Comments и их нельзя будет привязать к фреймам снова.
—
#первые_шаги #Фигма -
/designer
Какие причины переходить на Фигму? В серии постов, объединённых хэш-тегом #причина я раскрою основные доводы: свои и других моих собеседников.
#причина №1: Для больших компаний Зеплин неадекватно дорогой
Любопытное услышал от Ветрова. Команда Меил ру готовится переходить на Фигму. Одна из основных причин этого решения — Зеплин использовать слишком дорого. Это было неожиданно, но затем я понял, что всё логично. С такими же проблемами сталкивался и сам в банке.
В посте привёл конкретные цифры и рассказал о проблемах управления доступом на Зеплин в крупных компаниях.
medium.com/slashdesigner/zeplin-941e177acf8a
—
#для_профи #Зеплин #Фигма -
/designer
Урок «3 этапа создания анимационного сюжета»
В работе интерфейсного дизайнера иногда возникает потребность рисовать и анимировать забавных персонажей — маскотов. Они оживляют скучный образ какой-нибудь корпорации и от её имени в дружественной форме рассказывают о продуктах и услугах. Например, когда Почта Банк запускал приложение для детей, использовали летающего робота. Сделать запоминающегося целостного персонажа — непростая задача и к ней надо готовиться сильно раньше, чем она появится на горизонте: систематически рисовать персонажей, если это увлекает.
Сегодня хочу поделиться большим уроком талантливого дизайнера Артёма Станицкого из Embria, который даст импульс в 2D-иллюстрации и её последующей анимации.
В посте рассказывает об идее.
В видео в ускоренном скринкасте показывает два последних этапа: рисует иллюстрацию с мопсом, домом и горами в Фотошопе, затем делает анимацию мопса и веток в Afrer Effects.
Урок нашёл в Учебнике дизайнера.
—
#для_профи #иллюстрация #Фотошоп #AE #анимация -
/designer
Пост | Видео 1 | Видео 2 
-
/designer
ProfsoUX взяли у меня небольшое интервью перед воркшопом:
https://www.youtube.com/watch?v=Fm_foNy2d-8 -
/designer
ProfsoUX 2019: мой воркшоп в Питере
2 марта в Питере пройдёт большая ежегодная конференция ProfsoUX [профсоюкс], на которой я буду вести воркшоп по скоростному проектированию в Фигме.
Он будет про эффективную коммуникацию и совместную работу проектировщика с другими членами команды.
Рассчитан для тех, кому нужно быстро визуализировать бизнес-требования.
Мы пройдём через те же этапы, которые я выработал в своей ежедневной практике:
1. Получим бизнес-требования и из них выстроим схемы данных
2. Построим логику на базе цели пользователя
3. Визуализируем в виде экранов
4. Прокликаем, чтобы исправить косяки
5. Протестируем на соседе
Когда на ранней стадии работы появляется такой прототип, участникам становится понятно, что делать. Так ещё до стадии визуального дизайна мы экономим время. Сокращается разрыв от идеи до реализации, а значит, оунер способен точнее направлять дальнейшее развитие. Проект в Фигме начнёт играть роль ТЗ.
Ограничу и сфокусирую дизайнеров
- Запретим вырисовывание: забудем про сетки, цвета и шрифты
- Запретим себе использовать компоненты кроме самых простых
- Устроим хаос в слоях, нет времени на ренейм
- Для тех, кто из Скетча: порадуемся, что не надо больше отправлять всем актуальные джипеги
Окрылю недизайнеров
- В общих чертах освоимся в Фигме
- Научимся создавать экраны, накидывать в них готовые компоненты, собирать прототипы
- Поймём, что есть единое пространство, в котором идёт работа по проекту, а дизайн всегда актуален
- Порадуемся, что не надо больше клянчить актуальные джипеги у дизайнеров, чтобы их комментировать в Ворде
Чтобы попасть на воркшоп, нужно купить билет на первый день конференции.
Цена билета: 8 800 ₽, студентам 2 640 ₽.
Для читателей /designer действует промо-код SLASHDESIGNER, который позволяет купить стандартный билет на 1 320 ₽ дешевле. Промо-код надо ввести по ссылке на странице покупки билета. Там ещё всякие скидки, если идёте толпой.
Купить билет →
Если идёшь, вступай в чатик для обсуждения воркшопа.
—
#для_профи #проектирование #анонсы -
/designer
Пост | Интервью | Билеты 
-
/designer
АБ-тесты в Фреймере
В Фреймер-чате спросили интересный вопрос про то, как в рамках одного фреймер-проекта показывать альтернативные ветки сценариев для удалённых АБ-тестов. Имя сценария можно передавать в URL через хэш — текстовую часть вместе с символом #.
Таким образом, ссылка framer.cloud/wdjop/index.html#A будет вести на сценарий А с синими экранами, а framer.cloud/wdjop/index.html#B - на B с зелёными.
Это позволяет не разделять проект на два и не шерить две независимые ссылки для каждого сценария, а красиво решить проблему, меняя только хэш в ссылке.
Конечно, в рамках одного проекта можно сделать разводящий экран с кнопками перехода на нужный сценарий. Но его увидит респондент. Мы не хотим зависеть от него и хотим свести подготовку к минимуму.
Ключевые моменты
1. Доступ к значению хэша можно получить через свойствоwindow.location.hash
2. Фреймер отображает прототипы в облаке внутри айфрейма. Страница-обёртка показывает блок с описанием прототипа и кнопкой Open In Framer. Это значит, что если присобачить хэш к ссылке, полученной от облака, ничего не получится. Страница с прототипом не получит хэш страницы-обёртки. Основатель Фреймера Кун Бок подсказал, что нужно дописать к ссылке /index.html, чтобы страница прототипа открывалась без обёртки. И тогда уже добавлять хэш.
3. Чтобы объединить экраны в сценарий, используем FlowComponent. Итого, имеем два флоу-компонента: flowA и flowB. В зависимости от значения хэша, ифом выбираем нужный.
4. Чтобы отобразить нужный сценарий, используем метод placeBefore() и при помощи него вытягиваем флоу наверх, как карту в колоде.
—
#для_профи #инструменты #Фреймер -
Реклама
-
/designer
Пост | Фреймер-проект 
-
/designer
Missing Symbol: как возникает и как бороться В Скетче может возникнуть неприятная ситуация, когда в сложных символах вдруг слетают оверрайды, а вместо них остаются красные заглушки c надписью Missing Symbol. Этот пост поможет понять, почему так происходит… 
-
/designer
Missing Symbol: как возникает и как бороться
В Скетче может возникнуть неприятная ситуация, когда в сложных символах вдруг слетают оверрайды, а вместо них остаются красные заглушки c надписью Missing Symbol. Этот пост поможет понять, почему так происходит и что по этому поводу делать.
Чтобы было наглядно, смотри исходник, в котором разбирается дальнейший пример.
1. Допустим, есть символ каточки — card. У него есть вложенный символ — иконка star.
2. star может быть в двух состояниях: активна (star-active) и неактивна (star-inactive). В мастер-артборде card используется вариант star-active.
3. В экземпляре card переключаем оверрайд star с -active в -inactive.
4. Удаляем мастер star-inactive. Получаем стандартное сообщение Are you sure you want to delete this Symbol?
Скетч как бы намекает нам, что у данного мастера есть живые дети. Обычно мы пропускаем это сообщение мимо ушей, не боясь отвязать символ и превратить детей в группы. Но Скетч не умеет предупреждать о том, что символ может использоваться в оверрайдах. Нельзя превратить в группу отдельный оверрайд в рамках экземпляра-родителя.
Как бороться
Таким образом, неосторожно удаляя мастер-артборд с живыми экземплярами, мы можем испортить целый скетч-проект, где оверрайд этого символа может встречаться в непредсказуемых местах нашего дизайна. Поэтому, я рекомендую никогда так не делать, а во время удаления убеждаться в том что у мастера больше нет живых детей: такие мастеры удаляются молча. Если Скетч спрашивает, используем Symbol Instance Locator и через меню оверрайдов разрешаем все связи до последней.
—
#первые_шаги #инструменты #Скетч