Привет! Я Захар, дизайнер мобильных приложений. Уже больше 3-х лет я делаю UI-киты и небольшие дизайн-системы для приложений. За это время получилось сделать удобную и гибкую систему, которая экономит время разработки и уменьшает расхождение макетов с продом минимальными усилиями.
В этой статье расскажу как сделать, применить и передать в разработку токены цветов для мобильного приложения. Позже напишу ещё про токены размеров, типографику и в целом подготовку макетов.
Привет! Я графический дизайнер. Занимаюсь созданием сайтов, иллюстраций, немного работаю с видео и в качестве хобби увлекаюсь 3D. Я никогда не считал себя программистом. Да, я умею читать код, понимаю его логику, но вот так, чтобы самостоятельно сесть и написать что‑то с нуля... до недавнего времени это казалось мне чем‑то запредельным.
Ранее некоторые инфоблогеры в запрещенной сети сняли ролики о блокировке учетных записей Figma на территории РФ. На днях в локальном чате произошел взрыв новости о том, то Figma внезапно снесла аккаунт пользователю. Позднее в телеграм канале Crauch вышла публикация с сообщением о блокировки аккаунта.
Давайте постараемся разобраться...
Мы живем в турбулентное время, когда политика между станами накалена, новые запреты/санкции/ограничения выходят каждый месяц. У нас, как у пользователей есть два варианта действия:
Я продуктовый дизайнер в нескольких стартапах. Работаю с ИИ продуктами для b2b и b2c, в различных сферах: от поддержки ментального здоровья до автоматизации бизнес-процессов.
Первое наблюдение, которым я хочу поделиться, это то, что структура имеет решающее значение даже в небольших проектах
На одном внутреннем мероприятии Илья Полянский рассказал о градиентах и цветовых моделях, а я записал и отредактировал его рассказ.
В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.
Представьте любую из ситуаций:
Знакома ситуация, когда вы хотите найти какие-либо макеты другого дизайнера, а перед вами — куча пространств с кучей папок с файлами, а в файлах — куча непонятных страниц? И в итоге получается непонятное флоу, у которого актуальных макетов одной и той же страницы 100500, и все они лежат в разных файлах. В итоге вы, как первобытный дизайнер из Photoshop, идёте в чат и начинаете выпрашивать макеты, которые должны были найти за 5 минут. Было такое? Коллеги явно спасибо не говорили!
Как такое решить?
Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы.
Делать свою или взять готовую? Прыг.
Платформенная или универсальная? Прыг.
Версионировать компоненты или всю библиотеку? Прыг...
И ещё много таких «прыгов» (с оглавлением).
В нашем портфолио несколько собственных программных продуктов — например, HR-платформа TalentForce, приложение для налогового мониторинга EasyTax и система оценки эффективности бизнес-процессов Watchman.
Чтобы унифицировать UI и ускорить запуск новых сервисов, мы сформировали собственную дизайн-систему. И уже использовали её при разработке CRM-решения. Далее, Константин Шпаков, ведущий дизайнер интерфейсов, расскажет, как мы подошли к этой задаче.
Предыстория. В свое время я очень долго сопротивлялся переходу на Figma. Причиной была жесткая политика vendor lock-in, серьезная итоговая цена и невозможность нормально хранить исходники макетов у себя. Кроме того, в сети были описаны несколько случаев, когда люди теряли макеты в Figma, и никакая техподдержка ни за какие деньги им не могла помочь.
В своей практике я часто использую визуально похожие друг на друга компоненты с разной специализацией. Это помогает оптимизировать процесс верстки макетов и доступнее объяснить разработчикам, какие инструменты использовать. Ниже приведен пример с полем для выбора значений. Оно может иметь как один тип, так и множество. Множество помогает лучше передать специфику использования.
