Дизайн-системы: что это такое и нужна ли она вам?

Последнее обновление: 21 ноября 2019 г.

Единообразие в сети имеет негативный оттенок. Это часто является синонимом скучного, неоригинального или даже скопированного. Но когда дело доходит до единообразия вашего сайта, это говорит совсем о другом; один из надежности, предусмотрительности, заботы и организации. С каждым годом дизайн играет все более важную роль. Таким образом, может стать непростой задачей, чтобы дизайн различных элементов вашего продукта гармонировал друг с другом. Чтобы помочь в этом, появилась концепция дизайн-системы. Но что такое дизайн-система? Нужен ли он моей компании? Чем это отличается от руководства по стилю? На все эти (и многие другие) вопросы мы ответим в этой статье.

Что такое дизайн-система?

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

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

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

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

Система дизайна VS Руководство по стилю

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

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

Кубики Lego, сделанные сегодня, по-прежнему совместимы с кубиками Lego, выпущенными в 1958 году. Они являются одним из лучших примеров взаимозаменяемых деталей, которые можно использовать для создания множества удивительных вещей. Компания Lego за год выпустила множество наборов, которые позволяют вам построить практически все, что душе угодно. Руководство по стилю можно сравнить со списком элементов, который входит в каждый пакет. В нем указано, сколько кирпичей входит в комплект, их цвета, размеры и номер детали. Дизайн-система похожа на руководство по созданию того, каким должен быть ваш набор. В нем описывается, какие части и как они должны быть собраны вместе, чтобы построить ваше творение, за исключением того, что вместо того, чтобы рассказывать вам, как построить одну вещь, он показывает вам, как построить несколько разных структур, используя один и тот же набор кирпичей. Знание того, как они сочетаются друг с другом и почему, может помочь вам даже сделать что-то совершенно новое из одних и тех же частей.

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

Зачем мне дизайн-система?

Теперь, когда мы знаем, что такое дизайн-системы и в чем разница между ними и руководствами по стилю, вы можете задаться вопросом, действительно ли они вам нужны. В конце концов, вы можете создавать только один или два веб-сайта или иметь только один основной продукт. Создание дизайн-системы, безусловно, требует больших затрат времени; Вы можете реально оправдать потраченное время? Если вы хотите улучшить что-либо из следующего, это может быть только для вас.

Последовательность

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

Эффективность

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

Единство в команде

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

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

Кто использует дизайн-систему?

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

• свободное владение Microsoft
• Материальный дизайн Google
• Полярис от Shopify
• Фотон Firefox

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

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

Авторство: Тадж Р.