Я продуктовый дизайнер в нескольких стартапах. Работаю с ИИ продуктами для b2b и b2c, в различных сферах: от поддержки ментального здоровья до автоматизации бизнес-процессов.
Первое наблюдение, которым я хочу поделиться, это то, что структура имеет решающее значение даже в небольших проектах
На одном внутреннем мероприятии Илья Полянский рассказал о градиентах и цветовых моделях, а я записал и отредактировал его рассказ.
В работе над редизайном приложения Почты России мы пробовали разные способы подчеркнуть в визуальной коммуникации нашу уникальность. В том числе думали о градиентах. Под градиентами мы понимаем любые объекты, в которых один цвет переходит в другой. К ним можно отнести и тени. Оказалось, с градиентами связано много вопросов (вроде использования их в тёмной теме), и часть из них мы рассмотрели в этой статье.
Представьте любую из ситуаций:
Знакома ситуация, когда вы хотите найти какие-либо макеты другого дизайнера, а перед вами — куча пространств с кучей папок с файлами, а в файлах — куча непонятных страниц? И в итоге получается непонятное флоу, у которого актуальных макетов одной и той же страницы 100500, и все они лежат в разных файлах. В итоге вы, как первобытный дизайнер из Photoshop, идёте в чат и начинаете выпрашивать макеты, которые должны были найти за 5 минут. Было такое? Коллеги явно спасибо не говорили!
Как такое решить?
Эта статья поверхностна, как водная гладь, по которой скачет камушек-блинчик. Каждый прыг — развилка на Пути дизайн-системы.
Делать свою или взять готовую? Прыг.
Платформенная или универсальная? Прыг.
Версионировать компоненты или всю библиотеку? Прыг...
И ещё много таких «прыгов» (с оглавлением).
В нашем портфолио несколько собственных программных продуктов — например, HR-платформа TalentForce, приложение для налогового мониторинга EasyTax и система оценки эффективности бизнес-процессов Watchman.
Чтобы унифицировать UI и ускорить запуск новых сервисов, мы сформировали собственную дизайн-систему. И уже использовали её при разработке CRM-решения. Далее, Константин Шпаков, ведущий дизайнер интерфейсов, расскажет, как мы подошли к этой задаче.
Предыстория. В свое время я очень долго сопротивлялся переходу на Figma. Причиной была жесткая политика vendor lock-in, серьезная итоговая цена и невозможность нормально хранить исходники макетов у себя. Кроме того, в сети были описаны несколько случаев, когда люди теряли макеты в Figma, и никакая техподдержка ни за какие деньги им не могла помочь.
В своей практике я часто использую визуально похожие друг на друга компоненты с разной специализацией. Это помогает оптимизировать процесс верстки макетов и доступнее объяснить разработчикам, какие инструменты использовать. Ниже приведен пример с полем для выбора значений. Оно может иметь как один тип, так и множество. Множество помогает лучше передать специфику использования.
FigmaConvertXib это инструмент для экспорта элементов дизайна из проекта Figma,
в среду разработки, с точностью 90%. В результате конвертации будут созданы файлы xib / xml, и уже с помощью интерфейс редактора Xcode/Android Studio, можно будет манипулировать всеми элементами у себя коде. Если дизайн вашего проекта разрабатывается в Figma, и вы не реализуете дизайн программно, то это для вас.
Для того чтобы не тратить огромное время на реализацию всех UI элементов.
https://github.com/mrustaa/FigmaConvertXib
В данной публикации я хочу помочь начинающим и «не очень» бизнес-аналитикам, менеджерам проектов, владельцам продуктов, желающим сделать свой первый сайт и всем-всем, кому надо сделать макет сайта или приложения, а он не знает с какой стороны подступиться к делу.
В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.
Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.
Читать полностью »
Привет, Эмберисты!
На этой неделе: Полифилы для пакетов ember-data для старых версий Ember, узнайте как Figma в связке со Storybook облегчает жизнь разработчика, QUnit DOM объявляет о выпуске v1.0, а также выход ember-changeset 3.0.0 !
От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем душевном телеграмм-канале
