И почему я люблю каждого из них в деталях, как разработчик и энтузиаст дизайна.
Прежде чем мы перейдем к дизайн-системам, что, в точности, представляет собой дизайн-система?
Определение немного различается в сети, но по сути представляет собой набор руководств и повторно используемых компонентов, который обеспечивает единый источник справочной информации для команд при проектировании, реализации и создании продуктов.
Кто основные пользователи дизайн-системы?
Две основные группы пользователей, которые должны широко использовать это, - это дизайнеры и разработчики, которые имеют существенно разные роли и потребности.
Дизайнер заботится о графических и интерфейсных функциях, таких как цветовые схемы, интервалы и детали взаимодействия компонентов. Разработчик заботится о том, чтобы продукт работал.
Таким образом, дизайн-система должна быть понятна как дизайнерам, так и разработчикам и тем или иным образом облегчать их жизнь.
Угадайте, что следующие системы дизайна действительно смогли достичь этой цели и выделялись среди них.
Система дизайна Atlassian
Что мне нравится в нем с точки зрения разработчика:
- Они пошли подробно - вплоть до проверки поля и обратной связи (как это должно выглядеть соответственно) - я точно знаю, что делать, чтобы воссоздать этот опыт ++
- Icon Explorer в Atlaskit приводит меня к пакету Iconography Package, чтобы я мог сразу начать разработку ++ НО Мне действительно не нравится, что я не могу предварительно просмотреть что находится в библиотеке перед установкой пакета - -)
- Опять же, Atlassian был конкретен в отношении шрифтов и даже рассматривал кросс-браузерные типы шрифтов, что было приятно. Я могу буквально скопировать этот фрагмент кода семейства шрифтов ++
Что мне нравится в нем с точки зрения дизайнера:
- Они не только предоставляют мне цветовую палитру, но также предоставляют мне цвет, который можно / нельзя использовать в цветовой палитре, чтобы я мог разрабатывать с учетом лучших практик ++
- Они дали мне четкое представление о том, когда использовать каждый цвет - синий для действия, зеленый для статуса и т. Д. ++
- Они снова очень конкретно говорили об использовании логотипов, которые помогают различать допустимые ++
Дизайн-система Shopify
Что мне нравится в нем с точки зрения разработчика:
- Состояния взаимодействия очень важны для разработчиков, и большинство систем проектирования фокусируется на том, как каждый элемент выглядит статичным, но Shopify ясно понимал необходимость состояний взаимодействия ++
- Они подробно описывают свои рекомендации по типографике, в том числе с учетом размеров экрана. Я могу буквально скопировать и вставить код, чтобы они работали ++
- Как и в случае с Atlassian, они рассмотрели кроссбраузерную совместимость шрифтов и предоставили нам готовый код для копирования и вставки ++
Что мне нравится в нем с точки зрения дизайнера:
- Они заранее предсказывают подводные камни (например, некоторые дизайны не подходят, когда контент интернационализирован и расширяется по длине) и дают вам инструкции, как их предотвратить ++
- Они четко указывают на фактическое использование каждого основного цвета - где он предназначен для использования в ++
- Они конкретно указывали минимальный коэффициент контрастности, необходимый для создания приемлемого дизайна, что является хорошим ориентиром ++
Дизайн-система Uber
Прежде чем мы перейдем к функциональным возможностям, позвольте мне сначала сказать, что система дизайна Uber чрезвычайно приятна для моих глаз 😄 Тем не менее, я должен сказать, что эта система дизайна больше ориентирована на дизайнеров, чем на разработчиков . Позже я уточню свою претензию.
Что мне нравится в нем с точки зрения разработчика:
- Гарантирует, что я не перегружен информацией, когда дело доходит до специальных цветов с множеством вариаций, отображая только некоторые и показывая детали при наведении на них ++
- Предоставляет мне возможности быстрого доступа к значкам, чтобы я знал, что можно использовать, и использую их, когда это применимо ++
- Предоставляет мне визуальное представление ожидаемого движения через gif ++ ( НО не говорит мне, как туда добраться- -)
В этом моя самая большая претензия к этому чрезвычайно красивому веб-сайту - мне нравится, как он выглядит, мне нравится, как каждое сообщение невероятно четкое, но это нет подскажите, как их достичь как разработчик.
Что мне нравится в нем с точки зрения дизайнера:
Серьезно, все. Какая радость - смотреть на это.
Эти компании проделали такую потрясающую работу и продемонстрировали четкое понимание потребностей разработчиков и дизайнеров соответственно. Надеюсь, вам понравилось читать, почему я люблю каждого из них!
Я с нетерпением жду возможности увидеть больше систем дизайна и, возможно, обновить свой личный рейтинг систем дизайна, поэтому дайте мне знать, какие из ваших любимых систем
