Какую цветовую схему в Телеграме ты используешь? Интересно, насколько популярна тёмная тема.
Anonymous Poll
54%
Светлую с чёрным текстом
46%
Тёмную с белым текстом
ProfsoUX 2019: мой воркшоп в Питере
2 марта в Питере пройдёт большая ежегодная конференция ProfsoUX [профсоюкс], на которой я буду вести воркшоп по скоростному проектированию в Фигме.
Он будет про эффективную коммуникацию и совместную работу проектировщика с другими членами команды.
Рассчитан для тех, кому нужно быстро визуализировать бизнес-требования.
Мы пройдём через те же этапы, которые я выработал в своей ежедневной практике:
1. Получим бизнес-требования и из них выстроим схемы данных
2. Построим логику на базе цели пользователя
3. Визуализируем в виде экранов
4. Прокликаем, чтобы исправить косяки
5. Протестируем на соседе
Когда на ранней стадии работы появляется такой прототип, участникам становится понятно, что делать. Так ещё до стадии визуального дизайна мы экономим время. Сокращается разрыв от идеи до реализации, а значит, оунер способен точнее направлять дальнейшее развитие. Проект в Фигме начнёт играть роль ТЗ.
Ограничу и сфокусирую дизайнеров
- Запретим вырисовывание: забудем про сетки, цвета и шрифты
- Запретим себе использовать компоненты кроме самых простых
- Устроим хаос в слоях, нет времени на ренейм
- Для тех, кто из Скетча: порадуемся, что не надо больше отправлять всем актуальные джипеги
Окрылю недизайнеров
- В общих чертах освоимся в Фигме
- Научимся создавать экраны, накидывать в них готовые компоненты, собирать прототипы
- Поймём, что есть единое пространство, в котором идёт работа по проекту, а дизайн всегда актуален
- Порадуемся, что не надо больше клянчить актуальные джипеги у дизайнеров, чтобы их комментировать в Ворде
Чтобы попасть на воркшоп, нужно купить билет на первый день конференции.
Цена билета: 8 800 ₽, студентам 2 640 ₽.
Для читателей /designer действует промо-код SLASHDESIGNER, который позволяет купить стандартный билет на 1 320 ₽ дешевле. Промо-код надо ввести по ссылке на странице покупки билета. Там ещё всякие скидки, если идёте толпой.
Купить билет →
Если идёшь, вступай в чатик для обсуждения воркшопа.
#для_профи #UX #анонсы
2 марта в Питере пройдёт большая ежегодная конференция ProfsoUX [профсоюкс], на которой я буду вести воркшоп по скоростному проектированию в Фигме.
Он будет про эффективную коммуникацию и совместную работу проектировщика с другими членами команды.
Рассчитан для тех, кому нужно быстро визуализировать бизнес-требования.
Мы пройдём через те же этапы, которые я выработал в своей ежедневной практике:
1. Получим бизнес-требования и из них выстроим схемы данных
2. Построим логику на базе цели пользователя
3. Визуализируем в виде экранов
4. Прокликаем, чтобы исправить косяки
5. Протестируем на соседе
Когда на ранней стадии работы появляется такой прототип, участникам становится понятно, что делать. Так ещё до стадии визуального дизайна мы экономим время. Сокращается разрыв от идеи до реализации, а значит, оунер способен точнее направлять дальнейшее развитие. Проект в Фигме начнёт играть роль ТЗ.
Ограничу и сфокусирую дизайнеров
- Запретим вырисовывание: забудем про сетки, цвета и шрифты
- Запретим себе использовать компоненты кроме самых простых
- Устроим хаос в слоях, нет времени на ренейм
- Для тех, кто из Скетча: порадуемся, что не надо больше отправлять всем актуальные джипеги
Окрылю недизайнеров
- В общих чертах освоимся в Фигме
- Научимся создавать экраны, накидывать в них готовые компоненты, собирать прототипы
- Поймём, что есть единое пространство, в котором идёт работа по проекту, а дизайн всегда актуален
- Порадуемся, что не надо больше клянчить актуальные джипеги у дизайнеров, чтобы их комментировать в Ворде
Чтобы попасть на воркшоп, нужно купить билет на первый день конференции.
Цена билета: 8 800 ₽, студентам 2 640 ₽.
Для читателей /designer действует промо-код SLASHDESIGNER, который позволяет купить стандартный билет на 1 320 ₽ дешевле. Промо-код надо ввести по ссылке на странице покупки билета. Там ещё всякие скидки, если идёте толпой.
Купить билет →
Если идёшь, вступай в чатик для обсуждения воркшопа.
#для_профи #UX #анонсы
ProfsoUX взяли у меня небольшое интервью перед воркшопом:
https://www.youtube.com/watch?v=Fm_foNy2d-8
https://www.youtube.com/watch?v=Fm_foNy2d-8
YouTube
Александр Окунев о мастер-классе по скоростному проектированию пользовательских сценариев в Figma.
Саша создает сложные интерфейсы и ведет Телеграм-канал об интерактивном дизайне.
2 марта на ProfsoUX 19 он расскажет как превратить бизнес требования в рабочие прототипы с помощью Figma на своём мастер-классе.
2 марта на ProfsoUX 19 он расскажет как превратить бизнес требования в рабочие прототипы с помощью Figma на своём мастер-классе.
Урок «3 этапа создания анимационного сюжета»
В работе интерфейсного дизайнера иногда возникает потребность рисовать и анимировать забавных персонажей — маскотов. Они оживляют скучный образ какой-нибудь корпорации и от её имени в дружественной форме рассказывают о продуктах и услугах. Например, когда Почта Банк запускал приложение для детей, использовали летающего робота. Сделать запоминающегося целостного персонажа — непростая задача и к ней надо готовиться сильно раньше, чем она появится на горизонте: систематически рисовать персонажей, если это увлекает.
Сегодня хочу поделиться большим уроком талантливого дизайнера Артёма Станицкого из Embria, который даст импульс в 2D-иллюстрации и её последующей анимации.
В посте рассказывает об идее.
В видео в ускоренном скринкасте показывает два последних этапа: рисует иллюстрацию с мопсом, домом и горами в Фотошопе, затем делает анимацию мопса и веток в Afrer Effects.
Урок нашёл в Учебнике дизайнера.
—
#для_профи #иллюстрация #Фотошоп #AE #анимация
В работе интерфейсного дизайнера иногда возникает потребность рисовать и анимировать забавных персонажей — маскотов. Они оживляют скучный образ какой-нибудь корпорации и от её имени в дружественной форме рассказывают о продуктах и услугах. Например, когда Почта Банк запускал приложение для детей, использовали летающего робота. Сделать запоминающегося целостного персонажа — непростая задача и к ней надо готовиться сильно раньше, чем она появится на горизонте: систематически рисовать персонажей, если это увлекает.
Сегодня хочу поделиться большим уроком талантливого дизайнера Артёма Станицкого из Embria, который даст импульс в 2D-иллюстрации и её последующей анимации.
В посте рассказывает об идее.
В видео в ускоренном скринкасте показывает два последних этапа: рисует иллюстрацию с мопсом, домом и горами в Фотошопе, затем делает анимацию мопса и веток в Afrer Effects.
Урок нашёл в Учебнике дизайнера.
—
#для_профи #иллюстрация #Фотошоп #AE #анимация
Какие причины переходить на Фигму? В серии постов, объединённых хэш-тегом #причина я раскрою основные доводы: свои и других моих собеседников.
#причина №1: Для больших компаний Зеплин неадекватно дорогой
Любопытное услышал от Ветрова. Команда Меил ру готовится переходить на Фигму. Одна из основных причин этого решения — Зеплин использовать слишком дорого. Это было неожиданно, но затем я понял, что всё логично. С такими же проблемами сталкивался и сам в банке.
В посте привёл конкретные цифры и рассказал о проблемах управления доступом на Зеплин в крупных компаниях.
medium.com/slashdesigner/zeplin-941e177acf8a
#для_профи #Zeplin #Figma
#причина №1: Для больших компаний Зеплин неадекватно дорогой
Любопытное услышал от Ветрова. Команда Меил ру готовится переходить на Фигму. Одна из основных причин этого решения — Зеплин использовать слишком дорого. Это было неожиданно, но затем я понял, что всё логично. С такими же проблемами сталкивался и сам в банке.
В посте привёл конкретные цифры и рассказал о проблемах управления доступом на Зеплин в крупных компаниях.
medium.com/slashdesigner/zeplin-941e177acf8a
#для_профи #Zeplin #Figma
Medium
Зеплин — причина переходить на Фигму
Слишком дорог для больших команд, поскольку берёт деньги не только за редакторов, но и за зрителей.
Интересная заметка про то как в Фигме вырезать экраны с комментариями. Нельзя делать это через Cmd + X, иначе все комментарии потеряются в блоке Unattached Comments и их нельзя будет привязать к фреймам снова.
#первые_шаги #Figma
#первые_шаги #Figma
Книга «Руководство по Figma»
Приложение: проект в Фигме
Сегодня большой день. Я публикую свою первую книгу. Это труд последних нескольких месяцев. В компактном виде собран солидный набор технических знаний, который позволит эффективно создавать интерфейсы и иллюстрации. Книга напичкана горячими клавишами, практикой, вдохновением и лайфхаками.
Сравнение Фигмы и Скетча
Я подробно анализирую основные функции, а также их аналоги в Скетче. Разбираю реализацию символов и компонентов, стилей и ограничителей.
Что внутри
Рассматриваю 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.
Начинающие найдут здесь для себя правильный технический фундамент дальнейшего развития в дизайне. А те, кто работал в Скетче, смогут максимально быстро перестроиться на новый редактор.
Это бета
В эту версию вошло далеко не всё, что я хотел и её можно было бы бесконечно улучшать. Новые главы обязательно будут появляться. Это самая первая публичная версия. Я буду рад получить обратную связь о книге лично или на сайте. Прошу сообщать об опечатках.
Эта книга бесплатна
Поблагодарить меня можно через PayPal и Я Соберу. Задавать вопросы, которые возникнут по книге — в Фигма-чате.
Книга адаптирована для чтения на планшетах. Закачай её в айпад, чтобы иметь под рукой.
slashdesigner.ru/figma-guide
#первые_шаги #Руководство #Figma
Приложение: проект в Фигме
Сегодня большой день. Я публикую свою первую книгу. Это труд последних нескольких месяцев. В компактном виде собран солидный набор технических знаний, который позволит эффективно создавать интерфейсы и иллюстрации. Книга напичкана горячими клавишами, практикой, вдохновением и лайфхаками.
Сравнение Фигмы и Скетча
Я подробно анализирую основные функции, а также их аналоги в Скетче. Разбираю реализацию символов и компонентов, стилей и ограничителей.
Что внутри
Рассматриваю 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.
Начинающие найдут здесь для себя правильный технический фундамент дальнейшего развития в дизайне. А те, кто работал в Скетче, смогут максимально быстро перестроиться на новый редактор.
Это бета
В эту версию вошло далеко не всё, что я хотел и её можно было бы бесконечно улучшать. Новые главы обязательно будут появляться. Это самая первая публичная версия. Я буду рад получить обратную связь о книге лично или на сайте. Прошу сообщать об опечатках.
Эта книга бесплатна
Поблагодарить меня можно через PayPal и Я Соберу. Задавать вопросы, которые возникнут по книге — в Фигма-чате.
Книга адаптирована для чтения на планшетах. Закачай её в айпад, чтобы иметь под рукой.
slashdesigner.ru/figma-guide
#первые_шаги #Руководство #Figma
Figma
Figma-Guide-Rus
Created with Figma
❤1
Впечатления от ProfsoUX и воркшопа
Рад был поучаствовать в питерской конференции @ProfsoUX. Отличная организация, хорошее место и доброжелательная публика. Отчёт с конференции планирую выложить позже, там сильные лекторы.
Провёл часовой воркшоп, на котором спроектировал лоуфай-прототип для сценария регистрации в типичном банковском приложении.
Встал перед дилеммой: успеть показать целый сценарий от начала и до конца, или больше уделить время совместной работе с залом. Выбрал первое, поэтому взаимодействия с залом было меньше, чем мне хотелось. Не успел показать работу с правками через комментарии в Фигме и продемонстрировать тестирование. Приняли тепло, задавали много дельных вопросов. Например, про версионирование прототипов, бардак в компонентах и лапшу из связей. Понял, с какими проблемами сталкиваются ребята и теперь смогу разобрать их в канале.
Это было моё первое такое выступление на полный зал в 50 человек. Вдохновляющий опыт. Ушёл прокачивать ораторские навыки, чтобы повторить его на других площадках или в виде трансляции. Уж лучше запинаться, рассказывать меньше и своими словами, чем идти по рельсам готового напечатанного текста и перегрузить аудиторию. Между расслабленной записью видеоуроков дома и живым выступлением огромная пропасть.
Жду видеозапись, которую выложу на YouTube, одновременно выложу тезисы. На мою камеру удалось записать большую часть. Записать экран через ScreenFlow не удалось: тот подвёл и заглючил.
Спасибо тем, кто пришёл!
—
#для_профи
Рад был поучаствовать в питерской конференции @ProfsoUX. Отличная организация, хорошее место и доброжелательная публика. Отчёт с конференции планирую выложить позже, там сильные лекторы.
Провёл часовой воркшоп, на котором спроектировал лоуфай-прототип для сценария регистрации в типичном банковском приложении.
Встал перед дилеммой: успеть показать целый сценарий от начала и до конца, или больше уделить время совместной работе с залом. Выбрал первое, поэтому взаимодействия с залом было меньше, чем мне хотелось. Не успел показать работу с правками через комментарии в Фигме и продемонстрировать тестирование. Приняли тепло, задавали много дельных вопросов. Например, про версионирование прототипов, бардак в компонентах и лапшу из связей. Понял, с какими проблемами сталкиваются ребята и теперь смогу разобрать их в канале.
Это было моё первое такое выступление на полный зал в 50 человек. Вдохновляющий опыт. Ушёл прокачивать ораторские навыки, чтобы повторить его на других площадках или в виде трансляции. Уж лучше запинаться, рассказывать меньше и своими словами, чем идти по рельсам готового напечатанного текста и перегрузить аудиторию. Между расслабленной записью видеоуроков дома и живым выступлением огромная пропасть.
Жду видеозапись, которую выложу на YouTube, одновременно выложу тезисы. На мою камеру удалось записать большую часть. Записать экран через ScreenFlow не удалось: тот подвёл и заглючил.
Спасибо тем, кто пришёл!
—
#для_профи
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.
Сам с удовольствием поучаствую.
Подробности и билеты →
—
#для_профи #анонсы
Мои хорошие знакомые 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.
Сам с удовольствием поучаствую.
Подробности и билеты →
—
#для_профи #анонсы
Обновлённая версия книги — v.1.1
PDF | Внешняя ссылка →
Минорный апдейт. Исправлено много опечаток и неточностей, о которых написали читатели. Добавлены некоторые клавиши для Windows и новые скриншоты. По всей книге исправлен стиль нумерованных списков.
Спасибо Виктору Шишко, Кириллу Олейниченко, Юрию Филипову, Павлу Новицкому, Владу Богданову, Юлии Думанис и Оксане Хажиевой, за фидбэк и найденные опечатки. Вы сделали эту книгу лучше.
PDF | Внешняя ссылка →
Минорный апдейт. Исправлено много опечаток и неточностей, о которых написали читатели. Добавлены некоторые клавиши для Windows и новые скриншоты. По всей книге исправлен стиль нумерованных списков.
Спасибо Виктору Шишко, Кириллу Олейниченко, Юрию Филипову, Павлу Новицкому, Владу Богданову, Юлии Думанис и Оксане Хажиевой, за фидбэк и найденные опечатки. Вы сделали эту книгу лучше.
Правильно ли использовать слово «опасность» для opacity, как Илья Бирман когда-то предложил? Каждому, кто слышит это впервые, надо объяснять подтекст.
Anonymous Poll
7%
Да, так и использую, делаю блоки поопаснее
55%
Нет, бесит и отвлекает. Говорю и пишу «опасити».
31%
Нет, вздрагиваю. Говорю и пишу «непрозрачность».
6%
Нет, говорю и пишу «транспаренси».
Онлайн-воркшоп по компонентам в Framer X
Разработчик из Framer Артём Ряснянский @rsnnsk сделал воркшоп для русскоязычного сообщества.
youtube.com/watch?v=LIeObKJkVI4
Что было: Обсудили основы Реакта и Тайпскрипта, написали простой компонент, в котором по клику меняется случайное фото кроссовка. Выяснили, что компоненты Фреймера могут служить как для прототипов, так и для боевой разработки. Обсудили, как передавать фреймер-проект фронтендам.
Для дизайнеров, которым не хватает графического редактора, а хочется копать глубже и делать дизайн с живыми данными. Нужно знать основы HTML и CSS и немного JS. Задавать вопросы по Фреймеру можно в Фреймер-чате.
Компонент в Framer Store
Исходник на GitHub
—
#для_профи #Фреймер
Разработчик из Framer Артём Ряснянский @rsnnsk сделал воркшоп для русскоязычного сообщества.
youtube.com/watch?v=LIeObKJkVI4
Что было: Обсудили основы Реакта и Тайпскрипта, написали простой компонент, в котором по клику меняется случайное фото кроссовка. Выяснили, что компоненты Фреймера могут служить как для прототипов, так и для боевой разработки. Обсудили, как передавать фреймер-проект фронтендам.
Для дизайнеров, которым не хватает графического редактора, а хочется копать глубже и делать дизайн с живыми данными. Нужно знать основы HTML и CSS и немного JS. Задавать вопросы по Фреймеру можно в Фреймер-чате.
Компонент в Framer Store
Исходник на GitHub
—
#для_профи #Фреймер
YouTube
Framer X Coding workshop (ru)
Воркшоп по созданию компонентов для Framer X
Телеграм объявляет о конкурсах для UI-дизайнеров
Конкурс №1: редизайн окна чата
Призовой фонд: 15 000 $
Задача в том, чтобы сделать редизайн окна чата и меню вложений для Android. Чтобы принять участие, пришли макеты в PNG боту @design_bot. Кроме того, нужно записать видео, в котором продемонстрировать, как это решение должно работать. Сделать акцент на шеринг фото и видео.
В оценке работ Телеграм ценит простоту, удобство и консистентность. При необходимости можно менять цвета интерфейса, включая стандартный фон.
—
Конкурс №2, для UI-аниматоров
Призовой фонд: 10 000 $
Задача: создать простую и стильную анимацию, которую Телеграм сможет использовать, чтобы объяснить следующие концепции:
• Телеграм можно использовать на компах
• Двойная галочка означает, что сообщение прочитано
• Можно переключаться между записью голосовых и видео-сообщений
Предложи анимированного персонажа или оставь решение простым, насколько это возможно. Чтобы участвовать, присылай один или несколько JSON-документов в формате Lottie и сопутствующую им GIF-анимацию боту @design_bot. Лотти-джейсоны обычно делают в After Effects.
—
В обоих конкурсах работы принимаются с 10 по 24 марта включительно. Хочу напомнить, что в конце декабря Телеграм уже устраивал конкурс и сейчас в нём объявлен победитель, который выиграл 5 000 $. Следим за каналом @designers. Победители будут объявлены в конце марта.
Удачи всем нам!
—
#для_профи #анонсы
Конкурс №1: редизайн окна чата
Призовой фонд: 15 000 $
Задача в том, чтобы сделать редизайн окна чата и меню вложений для Android. Чтобы принять участие, пришли макеты в PNG боту @design_bot. Кроме того, нужно записать видео, в котором продемонстрировать, как это решение должно работать. Сделать акцент на шеринг фото и видео.
В оценке работ Телеграм ценит простоту, удобство и консистентность. При необходимости можно менять цвета интерфейса, включая стандартный фон.
—
Конкурс №2, для UI-аниматоров
Призовой фонд: 10 000 $
Задача: создать простую и стильную анимацию, которую Телеграм сможет использовать, чтобы объяснить следующие концепции:
• Телеграм можно использовать на компах
• Двойная галочка означает, что сообщение прочитано
• Можно переключаться между записью голосовых и видео-сообщений
Предложи анимированного персонажа или оставь решение простым, насколько это возможно. Чтобы участвовать, присылай один или несколько JSON-документов в формате Lottie и сопутствующую им GIF-анимацию боту @design_bot. Лотти-джейсоны обычно делают в After Effects.
—
В обоих конкурсах работы принимаются с 10 по 24 марта включительно. Хочу напомнить, что в конце декабря Телеграм уже устраивал конкурс и сейчас в нём объявлен победитель, который выиграл 5 000 $. Следим за каналом @designers. Победители будут объявлены в конце марта.
Удачи всем нам!
—
#для_профи #анонсы