Привет! Я — Павел Григорьев, ведущий дизайнер интерфейсов в Мир Plat.Form. Я принимал участие в создании дизайн-системы, про которую с позиции разработчика рассказывала моя коллега Лера Егорова вот тут.

Дизайн-система призвана упрощать жизнь дизайнерам и разработчикам — все основные элементы интерфейса собираются в общую библиотеку, к которой можно обращаться при создании макетов и верстке страниц. Это, в свою очередь, сильно экономит время, поскольку не приходится каждый раз по новой придумывать и прописывать параметры отображения элементов.

Но само по себе создание дизайн-системы — это сложная задача, в процессе выполнения которой можно наступить на множество граблей. О том, с какими проблемами на этом пути столкнулись мы, как их решили и какие выводы сделали, читайте под катом.

Читать далее

https://habr.com/ru/post/676700/?utm_campaign=676700&utm_source=habrahabr&utm_medium=rss

К старту курса по Fullstack-разработке на Python рассказываем, как на чистом современном CSS имитировать шейдеры аккуратным наложением слоёв и эффектов. За подробностями и демонстрациями приглашаем под кат.

Читать далее

https://habr.com/ru/post/675862/?utm_campaign=675862&utm_source=habrahabr&utm_medium=rss

В современном мире количество каналов маркетинговых коммуникаций и дизайн-поддержка продуктов растут в геометрической прогрессии: появление новых платформ; активные изменения в текущей разработке продуктов или создание новых продуктов; омниканальность, А/Б-тестирования, локализации на разные рынки, персонализация рекламных предложений — список факторов, способствующих этому росту, можно продолжать бесконечно. Скорость разработки и требования к визуальным коммуникациям за последние пять лет также сильно изменились. И это серьезный вызов для дизайн-индустрии.

Ответом на такой вызов стали переосмысление процессов и методов разработки дизайна, новые индустриальные стандарты и правила, по аналогии с DevOps в IT-индустрии. О том, как с помощью DesignOps можно создать свою «фабрику дизайна» и какие инструменты для этого понадобятся, рассказывает руководитель дизайн-студии Евгений Малышев.

Читать далее

https://habr.com/ru/post/676352/?utm_campaign=676352&utm_source=habrahabr&utm_medium=rss

Продолжаю рассказывать об организации дизайн-систем. На очереди типографика. Начнем с небольшой теории, затем перейдем к систематизации стилей в Figma и закончим парочкой ресурсов с классными шрифтами.

Кстати, я сделал свой телеграм канал - https://t.me/artemsuslovv. Буду рад видеть вас там!

Читать далее

https://habr.com/ru/post/675658/?utm_campaign=675658&utm_source=habrahabr&utm_medium=rss

Жила-была небольшая CRM-система для рекрутмента от команды hh.ru. Не было у нее дизайн-системы, а был маленький UI-китеныш и десяток компонентов. Дизайнер и фронты не думали про Pixel Perfect, а макеты и верстка их отличались. Так бы и жили себе тихонечко, если бы не пришел запрос на освежение дизайна.

Привет! Меня зовут Женя, я дизайнер продукта. Сегодня я поделюсь с вами историей о том, как мы с фронтами подружили Figma и React. В своей статье я затрону всё, что связано с Figma: выбором плагина, созданием токенов и передачей выгруженного json в разработку. Подробнее про техническую часть ждите во второй статье от моего коллеги Ильи.

Читать далее

https://habr.com/ru/post/675402/?utm_campaign=675402&utm_source=habrahabr&utm_medium=rss

Дизайн-система позволяет быстро взаимодействовать с компонентами, легко вносить изменения во все макеты и в целом прививает дизайнеру навык организации больших объемов информации.

Зачастую, дизайнер начинает делать дизайн-систему аккуратно, придавая ей должное внимание. Но в по мере увеличения экранов становится, как мне кажется, морально труднее вносить новые компоненты и корректировки. Но помните одну вещь - чем больше времени уделить дизайн-системе, тем больше времени она сэкономит в будущем.

Основное правило дизайн-систем: чем меньше компонентов — тем лучше и вам, разработчику и конечному юзеру. Это касается количества цветов, шрифтов, иконок и так далее. Дизайн будет выглядеть более консистентным и единым.

Читать далее

https://habr.com/ru/post/675232/?utm_campaign=675232&utm_source=habrahabr&utm_medium=rss

Об особенностях дизайна b2b- и b2c-продуктов, веб-аналитике для дизайнеров, правилах хорошего дизайна, адаптации таблиц под маленькие экраны, иллюзии свечения, проектировании регистрации, функциональных спецификациях, голосовых интерфейсах, формах подписки на рассылку и современной русской пунктуации. Об авторе заметок читайте в конце дайджеста.

Читать далее

https://habr.com/ru/post/675160/?utm_campaign=675160&utm_source=habrahabr&utm_medium=rss

Топ-10 популярных заметок проектировщика за 2020-2022 годы. Но сначала небольшая история.

Автор UX Notes — ленты кратких обзоров на обучающие материалы и статьи в сфере проектирования и дизайна интерфейсов — Антон Григорьев. Опытный UX/UI дизайнер с большим послужным списком. Работа над разными проектами, выступления, вот это всё. И по совместительству мой дорогой друг.

Антон трудолюбив и последователен в своих публикациях. Но при этом совершенно не работает над тем, чтобы как можно больше людей узнало о результатах его труда. Канал в Телеграме растёт как-то сам по себе, периодически попадая в различные статьи и каталоги. То же происходит и с пабликами в ВК и ФБ. Насколько я знаю, Антон ни разу не покупал рекламу и не делал публикаций вне своих каналов.

И каждый раз во время прогулок с Антоном в питерских уютных парках я задаю ему вопрос: «Когда же ты, наконец, часть сил начнёшь вкладывать не в контент, а в его распространение?» Антон смеётся и отвечает, что, мол, когда-нибудь позже. А годы идут.

И в конце-концов я не выдержал, спарсил заметки с 2020 по 2022 годы, отсортировал их по количеству лайков и репостов, актуализировал (чтобы в дайджест не попали материалы с истёкшим сроком годности) и теперь предлагаю их вашему вниманию.

Читать далее

https://habr.com/ru/post/674974/?utm_campaign=674974&utm_source=habrahabr&utm_medium=rss

Каждый заказчик желает сделать лучший и уникальный в своем роде продукт, который вызывал бы у пользователей восторг, покрывал их потребности и приносил прибыль. Желательно бы еще потратить на создание такого продукта поменьше ресурсов.

В достижении всего вышеупомянутого дизайн (UX/UI) играет не последнюю роль.

В этой статье я тезисно перечислила то, что, по моему мнению, лучше соблюдать при создании продукта (например, цифрового: какого-нибудь сайта, веб-приложения и тд), чтобы UX/UI как минимум соответствовал основным правилам дизайна, а в перспективе оказался бы успешным.
Читать дальше →

https://habr.com/ru/post/674330/?utm_campaign=674330&utm_source=habrahabr&utm_medium=rss

Привет! На связи Тимофей Контанистов, я руководитель отдела дизайна СберМаркета, отвечаю за витрины. В этой статье хочу рассказать, как мы всей командой проводим UX-исследования без дорогих сервисов, звонков рекрутерам и UX-лабораторий.

За 2021 год СберМаркет увеличил количество заказов в 3,5 раза и доставил клиентам 24 миллиона заказов. Дизайн-команда тоже выросла, и задач у нее стало больше. Поэтому мы задумались над оптимизацией тестирования: хотелось, чтобы все дизайнеры могли проверять гипотезы быстро и дешево.

Из множества сервисов для UX-исследований мы остановились на Яндекс.Толоке.

Эта статья про то, чем Толока помогает нам в тестировании: какие вообще есть возможности и с какими проблемами мы столкнулись за два года работы на сервисе.

Напишите в комментариях, если статья будет полезной и стоит написать про Толоку что-нибудь еще. Теперь начнем.

Читать дальше →

https://habr.com/ru/post/672698/?utm_campaign=672698&utm_source=habrahabr&utm_medium=rss

На небе только и разговоров, что о дизайн-системах и дизайн-токенах. Но информация представленная здесь строится исключительно на собственном опыте.

Поводом для написания такого гайда стала практика и упорядочивание всей этой информации в голове. Когда я начинал этот путь, то в русскоязычном сегменте было минимум информации и приходилось по крупицам собирать общие практики.

Сегодня я подвожу итог этой темы и суммирую добытые знания, попробовав составить ультимативный гайд по теме. Хотя бы для общего понимания процесса и наводки, в какую сторону копать для таких же жаждущих знаний.

Меня зовут Женя, я руководитель UX-направления в компании Usetech. На досуге веду телеграм-канал «Мамкин Дизайнер», где рассказываю о вот таких штуках.

Я сам — дизайнер, но мне важно было понять, что такое дизайн-токены, как они работают, как компилируются из JSON и как помогают в работе.

Читать далее

https://habr.com/ru/post/673196/?utm_campaign=673196&utm_source=habrahabr&utm_medium=rss

Финальная порция базовых советов для начинающего UI/UX дизайнера

Читать

https://habr.com/ru/post/670868/?utm_campaign=670868&utm_source=habrahabr&utm_medium=rss

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

Читать далее

https://habr.com/ru/post/672148/?utm_campaign=672148&utm_source=habrahabr&utm_medium=rss

Функциональная спецификация вместе с прототипом рассказывает, из каких элементов состоит и как работает интерфейс системы. Она описывает то, что трудозатратно, невозможно или бессмысленно показывать в прототипе.

С её помощью можно улучшить предлагаемые решения, ответить на вопросы разработчиков и других участников проекта, зафиксировать договорённости на бумаге.

В этой статье я рассказал, как она помогает сделать продукт лучше, что можно включить в спецификацию, как её структурировать, что писать об отдельных элементах интерфейса и что уже выходит за рамки подобного документа.

Надеюсь, это поможет вам в написании спецификаций для своих интерфейсов.

Читать далее

https://habr.com/ru/post/671540/?utm_campaign=671540&utm_source=habrahabr&utm_medium=rss

Как UX ресерчеру найти ключ к сердцу РО? Step by step

О том как UX-эксперту выстроить качественную коммуникацию с продактом и с какими проблемами вы можете столкнуться.

Вот это да! Читать

https://habr.com/ru/post/671520/?utm_campaign=671520&utm_source=habrahabr&utm_medium=rss

Базовые принципы работы головного мозга, которые объясняют почему одни объекты мы находим привлекательными, а другие уродливыми.

Читать далее

https://habr.com/ru/post/671412/?utm_campaign=671412&utm_source=habrahabr&utm_medium=rss

В нашем портфолио несколько собственных программных продуктов — например, HR-платформа TalentForce, приложение для налогового мониторинга EasyTax и система оценки эффективности бизнес-процессов Watchman.

Чтобы унифицировать UI и ускорить запуск новых сервисов, мы сформировали собственную дизайн-систему. И уже использовали её при разработке CRM-решения. Далее расскажем, как мы подошли к этой задаче.

Читать далее

https://habr.com/ru/post/670486/?utm_campaign=670486&utm_source=habrahabr&utm_medium=rss

Подготовка иконок к работе в дизайн системе

В этой серии статей я хотел бы поделиться своим опытом построения дизайн-систем и предложить несколько идей по автоматизации. В первой статье мы поговорим на довольно простую, но важную тему — иконки. Поехали!

Читать далее

https://habr.com/ru/post/671168/?utm_campaign=671168&utm_source=habrahabr&utm_medium=rss

https://habr.com/ru/post/670992/?utm_campaign=670992&utm_source=habrahabr&utm_medium=rss

Каждый из нас говорит на собственном языке. К счастью, иногда эти индивидуальные языки достаточно похожи, чтобы объединять их в большие группы. Всё, что внутри такой группы, мы условно считаем одним языком — например, русским.

Но порой неизбежно вылезают различия. «Гражданский брак» значит разное для юриста и не-юриста. Обыватель назовёт цифрой то, что математик — числом. Слово «крайний» имеет особое значение для лётчиков и парашютистов.

Дизайнер и фронтенд-разработчик — не чужие друг другу люди. Они работают в соседних кабинетах, вместе ходят в курилку (по крайней мере, так было до повсеместной ковидной удалёнки). Оба делают части одного большого дела и общаются если и не постоянно, то регулярно. И всё же их языки во многом отличаются. Да и не только языки — сами образы мышления.

Мы поговорили с сотрудниками Промсвязьбанка, чтобы составить небольшой… Нет, не разговорник. Понимайник. Возможно, кому-то он поможет общаться с коллегами по ту сторону HTML более конструктивно, эффективно, а главное — приятно.

Читать далее

https://habr.com/ru/post/669042/?utm_campaign=669042&utm_source=habrahabr&utm_medium=rss