Что такое система дизайна почему это важно и что вы включаете в нее?
За последние несколько лет дизайн-системы стали популярной, горячей темой среди дизайнеров. Если вы просто присоединитесь к этой удивительной победителю, добро пожаловать! Многие предприятия и компании вкладывают больше средств в разработку. Наличие системы дизайна на месте может быть чрезвычайно полезным для компаний и команд, которые растут и должны отслеживать все. В конце концов, хороший опыт работы с клиентами имеет жизненно важное значение. Система дизайна также может помочь в сокращении задолженности по дизайну, ускорить процесс проектирования и повысить узнаваемость и узнаваемость бренда в разных командах.
На сегодняшнем посту я собираюсь поговорить о том, что разные должны включать элементы в систему дизайна. Конечно, будут фантастические примеры публично доступных систем дизайна от многих популярных брендов!
Сетки являются важными компонентами для понимания и унификации макетов страниц. Посмотрите, как MailChimp обращается к сеткам. Это первый элемент в разделе шаблона его системы дизайна. Он охватывает различные темы, такие как размеры сетки, водосточные желоба и способы их смешивания.
Система дизайна BuzzFeed немного отличается. Они имеют два разных раздела: один называется Grid, называемый Отзывчивым. обратитесь к тому же, как работает сетевая система. Ответственный раздел — это просто расширение.
Расстояние между
Подобно сеткам, интервал — еще один полезный раздел. В системе дизайна Shopify (Polaris) они подробно описывают различные дополнения и интервалы между элементами, такими как карты. Они также говорят о линейной высоте как промежутке.
Ошибки и проверки
Это точное название одного из разделов дизайна от GOV.UK. Они говорят о том, как лучше всего правильно обращаться с ними, когда они происходят. Они даже включают фрагменты кода для шаблонов проектирования, используемых в этих обстоятельствах.
Кодированные компоненты
Единственное, что мне нравится в системе Zendesk, это их включение как компонентов CSS, так и React. Их так много. Under React — это аватары, теги и вкладки. Каждый из них имеет инструкцию по установке и пример использования. Это делает их понятными и понятными.
Впечатьте свою аудиторию анимированными веб-сайтами и веб-презентациями.
С помощью слайдов мы не заставляем вас начинать с пустого слайда. Все, что вам нужно сделать, это выбрать нужные вам элементы и объединить их. Каждый слайд был тщательно обработан, чтобы удовлетворить три ключевых критерия: эстетичность, функциональность и удобство использования. Таким образом, вы знаете, что каждый элемент работает вместе, одновременно улучшая влияние вашего контента.
Создать сайт
Соглашения об именах
Система WeWork глубоко погружается в именование и синтаксис. Прекрасная идея поддерживать согласованность между командами, файлами и даже программами.
Иконография
Мне нравится, как Эстония занимается разработкой значков и графики в своей системе дизайна. У них есть быстрое объяснение, чтобы установить ожидания, а затем показать готовые и подходящие примеры. Кроме того, они продолжают показывать 11 правил, а также их доски и донты.
Типографика
Никакая система проектирования не будет полной без определения текста. Я абсолютно люблю подход Nordnet. В конце их типографического раздела есть четко определенные типографические данные, такие как неправильное выравнивание. Это так хорошо в предотвращении странных разовых случаев и несоответствий.
Доступность
Как Microsoft, так и Quickbooks включают целые разделы по доступности. Microsoft особенно подробно излагает подробные объяснения различных случаев и необходимости соответствующей доступности для их продуктов, которые могут быть легко использованы кем-либо. Они упоминают такие вещи, как контраст, функциональность клавиатуры, интервал, ясность навигации и т. Д.
Тон и голос
Верьте или нет, визуальные компоненты — это не единственные важные вещи, которые нужно включить в систему дизайна. Тон и голос также важны, поскольку они помогают определить качество и последовательность общения. Это может быть что-то простое, как использование предложения по делу во всех фирменных материалах. Хотя он часто более подробно описывает, как лучше общаться, писать или говорить в соответствующем стиле сообщений.
Логотипы и цвет
Двумя наиболее фундаментальными аспектами дизайна каждой системы дизайна являются логотип и цветовые решения. Посмотрите, как Atlassian хочет, чтобы его команды использовали логотип. Или отправляйтесь в систему Lonely Planet, чтобы посмотреть, как они хотят, чтобы цвета обрабатывались также.
Выравнивание
Я влюблен в систему Анта. У них есть полный раздел, предназначенный для выравнивания! Это такая, казалось бы, неуместная деталь. Важно придерживаться единообразия. Зачем еще включать выравнивание текста, формы и номера? Потому что это важно!
Общие элементы пользовательского интерфейса
Кроме того, никакая система проектирования не будет полной без включения наиболее распространенных элементов пользовательского интерфейса. Я говорю о кнопках, формах, флажках и т. Д.
Жесты
Я думаю, мы все можем согласиться с тем, что руководство по дизайну материалов Google было первым в своем роде, задокументировав, какая должна быть правильная система дизайна. Они включают в себя так много полезной информации, что это смешно. Но опять же, это Google. Жест. Это особенно важно для компаний, у которых много мобильных пользователей!
Движение
Движение и анимация часто забывают элементы дизайна. Они могут положительно влиять на пользовательский опыт, не так ли? В Системе Carbon Design компании IBM был включен раздел, посвященный движению. Посмотрите, используете ли вы анимации и переходы в своих проектах.
? Как то, что вы читаете? Подпишитесь на наши главные новости.
Ошибки и проверки
Кодированные компоненты
Соглашения об именах
Иконография
Типографика
Доступность
Тон и голос
Логотипы и цвет
Выравнивание
Общие элементы пользовательского интерфейса
Жесты
Движение
Загрузка...
