О блоге
В этом блоге рассказывается о путешествии создания системы дизайна, которая принесла единообразие во всех наших дизайнах и помогла в производительности.
Что такое система дизайна
Работая в разработке и проектировании программного обеспечения, мы часто должны отправлять одноразовые решения. В некоторых случаях мы работаем во временных ограничениях и здесь И там мы просто еще не устроились на пути вперед. Эти одноразовые решения не всегда плохие, но если они не сделаны в какой-либо стратегии или фундаменте, мы можем оказаться в технических и дизайнерских долгах.
Системы проектирования были охарактеризованы многочисленными способами: ассортимент визуальных ресурсов, пример библиотеки и структура CSS являются наиболее широко признанными. Однако он определяется как набор связанных, но независимых компонентов, которые могут повысить эффективность разработки продукта и помочь обеспечить отличный опыт работы с клиентами.
Дизайн всегда был в значительной степени о системах и о том, как создавать продукты масштабируемым и повторяемым образом. Универсальная структура дизайна является фундаментальной для лучшего и быстрее строительства; Лучше создавать сплоченный пользовательский опыт и быстрее на том основании, что это совсем не типичный язык для работы.
Зачем нам нужны системы проектирования
1. Более быстрое время на рынок
Система проектирования распределяет изобретение колеса каждый раз, когда дизайнер или разработчик садится, чтобы работать над фронтальным элементом. Либо библиотека активов будет иметь компонент, который можно быстро использовать, либо доступные руководящие принципы позаботятся о некоторых мозговых штурмах. Кроме того, поскольку дебаты более склонны к происхождению, организации могут предоставлять продукты намного быстрее, чем без системы проектирования.
Кроме того, система проектирования развивается со временем. Поэтому, если какая -то команда сталкивается с проблемой во время продвижения, они соответственно изменяют систему проектирования. Это мешает различным командам столкнуться с сравнительными проблемами позже.
2. Усовершенствованное сотрудничество
В отсутствие регулируемого набора руководящих принципов дизайнерам и разработчикам фронта часто трудно договориться о нескольких основаниях. Дизайнеры, иногда, разработали бы что -то, не рассматривая функциональность и перспективы реализации и в основном передают планы дизайнерам. А затем время от времени инженеры могут представить пару изменений в плане для борьбы с функциональностью. С системой дизайна вы можете оставить все эти проблемы позади. Система проектирования занимается эстетикой так же, как функциональность и гарантирует, что дизайнеры и инженеры работают после общей цели.
3. Снижение затрат и меньшее количество ошибок
С более быстрым временем обработки и меньшим количеством элементов для создания с нуля, мы можем сэкономить некоторые ценные часы дизайна и разработки, которые иначе можно использовать для продуктивных задач. А поскольку система дизайна постоянно используется несколькими командами и отдельными лицами, гораздо проще изолировать ошибки на ранней стадии. И с каждой изоляцией ошибок система проектирования оставляет меньше места для ошибок и оптимизирует линии фронта.
Начиная
Чтобы справиться с этими проблемами и быстро поддерживать процесс принятия решений, я объединился с некоторыми фронтовыми разработчиками в Chaosnative, которые объяснили мне, как работает тематическая тематическая тематика и всевозможные ограничения программирования. Мы очистили наши календари, и в течение примерно трех недель просмотрели все конструкции каждого продукта, который мы записывали по общим элементам, раскраски, а затем планировали создать систему проектирования.
1. Laying Foundation
Просматривая дизайн каждого продукта, я осознавал, что в дизайне различные вещи распространены, как кнопки, поля ввода, только они выглядят по -разному из -за своих цветов, или используемых значков и многих других вещей. Таким образом, нам нужно было принести общий язык для всех этих вещей и создал цветовую систему, тени и иконографию.
2. Создание компонентов
Там может быть много компонентов, и разработчики могут создавать одни и те же компоненты с различными стилями кодирования. Поэтому после обсуждения с разработчиками фронт-эндов они предложили использовать общий пакет библиотеки JS, и мы выбрали Дизайн материала , и после прочтения через руководство по стилю компонента стало легко узнать, какие компоненты нам определенно нужны для создания, назначения свойств и создания вариантов.
3. Скомпилирование библиотеки
Создавая эти компоненты, мы собрали их в главном файле, называемом Litmus Component Library , о котором мы упоминали на протяжении всего процесса проектирования. Через неделю или две мы начали видеть огромные скачки в производительности, используя библиотеку при итерации по дизайну. Это также стало руководством для предстоящего дизайна продуктов.
Вывод
Мы знали, что это сложный проект. Это означало пересмотр и восстановление большинства взглядов в нашем программном обеспечении. Как и в любом проекте, есть вещи, которые мы хотели бы сделать по -другому. Несмотря на то, что это была монументальная задача, которая в конечном итоге потребовала усилий из многих наших команд продуктов, мы обнаружили, что создание нашей языковой системы дизайна стоило инвестиций и огромного скачка вперед. Поскольку язык дизайна и код часто используются, теперь мы можем создавать и выпускать функции на всех собственных платформах примерно в одно и то же время. Разработка, как правило, быстрее, поскольку инженеры -продукты могут больше сосредоточиться на написании логики функций, а не на коде просмотра. Кроме того, инженеры и дизайнеры теперь имеют общий язык. Я полагаю, что помогали эти системы, мы смогли больше сосредоточиться на реальных пользовательских опыте и концепциях, которые мы хотим создать в будущем.
Ресурсы
Чтобы просмотреть файл дизайна с помощью компонентов и руководящих принципов: Litmuschaos Community
Вы Sre или Kubernetes энтузиаст? Делает Хаос Инжиниринг волнуйся тебя?
Присоединяйтесь к нашему сообществу по SLACK для подробного обсуждения, обратной связи и регулярных обновлений по инжинирингу хаоса для Kubernetes: https://kubernetes.slack.com/messages/cnxnb0ztn (#litmus канал в рабочей области Kubernetes)
Проверьте Litmus chaos GitHub Репо и поделитесь своими отзывами: https://github.com/litmuschaos/litmus Отправить запрос на вытягивание Если вы определите какие -либо необходимые изменения.
Не забудьте поделиться этими ресурсами с кем -то, кто, по вашему мнению, может извлечь выгоду из них. Мир. ✌🏼
Оригинал: «https://dev.to/litmus-chaos/building-a-resilient-design-system-57gf»