Как построить систему проектирования с небольшой командой

1665781232 kak postroit sistemu proektirovaniya s nebolshoj komandoj

Наем Баскандери

YtvYZ4nI3Ufvq1elujxW9nvJ2oDfvhAPCHKl
Иллюстрация Криса Гиллерда

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

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

Все разговоры говорили о том, как создать систему дизайна. Однако такие были большой команды или они имели специальные ресурсы, даже команда DesignOps (2-ое модное слово 2017 года) построить и поддерживать систему проектирования.

В конце вечера мы пошли немного с неохотой. Но мы были не одни. Во время сессии вопросов и ответов многие спрашивали:

Как я могу создать систему проектирования как один дизайнер?

«Я единственный дизайнер, что вы мне посоветуете?»

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

w7MV47tWonjOTDKdvUFgLR76rTke2MdUeQEx

Что такое система проектирования?

«Система дизайна предлагает библиотеку визуального стиля, компонентов и других проблем, задокументированных и опубликованных отдельным лицом, командой или сообществом в качестве кода и инструментов дизайна, чтобы внедрение продуктов было более эффективным и сплоченным». – Натан Кертис

Проще говоря, система дизайна – это набор многократно используемых компонентов для связывания целых продуктов.

Многие люди написали подробные статьи и книги о системах проектирования. Вот несколько, которые могут быть вам полезны:

Исчерпывающее руководство по проектированию систем — InVision Blog
Такие компании, как Airbnb, Uber и IBM, изменили способ разработки цифровых продуктов, включив…www.invisionapp.comСистемы дизайна, руководства по стилю и библиотеке шаблонов: о, боже! — UXcellence
Многие дизайнеры используют термины система дизайна, библиотека шаблонов и руководство по стилю как синонимы. Но они не подразумевают…uxcellence.comСправочник по системам проектирования
Система дизайна объединяет команды продуктов вокруг общего визуального языка. В этой книге вы узнаете, как создать дизайн…www.designbetter.coСоздание системы проектирования: 100-точечный контрольный список процесса
Знать, как пошагово выстроить систему проектирования. На основе реальных проектов. Создайте инвентарь интерфейса, получите бай-ин, создайте цвет…www.uxpin.com

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

Вы можете подумать, отлично, но разве это не просто руководство по стилю?

«Совет по стилю – это артефакт процесса дизайна. Система дизайна – это живой, финансируемый продукт с дорожной картой и резервом, обслуживающий экосистему». – Натан Кертис

Кроме того, система проектирования – это набор компонентов (или молекул) разного размера, которые можно объединять бесконечными способами для создания серии больших компонентов. Атомный дизайн Брэда Фрост является источником вдохновения для дизайна компонентов.

Преимущества системы проектирования

«Проблема, с которой мы сталкиваемся сегодня, состоит в том, что инструменты плохо взаимодействуют друг с другом, детали проваливаются, существует огромная пропасть между проектированием и разработкой, и нам нужно выполнять много ручной работы, чтобы быть уверенными, что мы всегда ко всему» . — UX Bootcamp

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

В общем, наша команда сэкономит время через:

  • Уменьшение дискуссий — не нужно тратить время на просмотр решений по дизайну того же компонента
  • Компоненты многоразового использования, что делает возможным масштаб.
  • Улучшенное сотрудничество — улучшите работу удаленно и в разных офисах

У меня была эгоистическая причина для создания системы дизайна. Я быстро понял, что в случае успеха мы сможем «автоматизировать» много задач, что позволит нам иметь время делать то, что мне нравится, решение проблем пользователей! Это ядро ​​UX.

Структура системы проектирования

Чтобы создать систему проектирования, нам нужно разбить ее и понять ее части:

FISXXSaT45PI0BAQjM37CySskxm5WT-7aZXt
UX Pin – система дизайна

Немного душевного поиска тоже включено. Некоторые вопросы, которые следует задать при создании системы дизайна:

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

Как другие пытаются подойти к этому:

Как мы используем компонентный дизайн
О компонентном дизайне часто говорят в контексте больших, сложных проектов. В этой публикации мы обосновываем…medium.comНастроить систему проектирования
Создайте систему, обеспечивающую единый набор UX, правил проектирования и шаблонов.blog.prototypr.io

ss415zgUFpiKE8X4Vw7gtdx04Il-BimlF0sr

Как наша маленькая команда может создать систему дизайна?

С чего начать, когда не хватает ресурсов, времени или бюджета?

1. Не начинайте с нуля

«Если вы хотите сделать яблочный пирог с нуля, вы должны сначала изобрести вселенную». – Карл Саган

Наша команда просматривает существующие системы дизайна в дикой природе, чтобы мы могли, как говорит Остин Клеон:

sYXNsuwQhjfgXgcC7KsiSB1iwFkhrKVnRTNM
Украсть лайк и исполнитель — Остин Клеон

Многие компании обнародовали свои системы проектирования и поделились файлами эскизов. Я поделился ниже. Этот факт, а также многие другие ресурсы для эскизов позволяют легко использовать Sketch как наш любимый инструмент.

Кроме того, есть инструменты, которые помогут вам быстро создать базовую линию для вашей системы проектирования:

Рамки для Sketch – система веб-дизайна
Тщательно разработанные компоненты и самые лучшие техники создания эскизов объединены в мощную систему веб-дизайна.framesforsketch.comСимволы и стили
Самый умный шаблон и ваша будущая отправная точка для каждого пользовательского интерфейса в Sketch. Перестаньте тратить время на…symbols.janlosert.comSketch App Sources – Бесплатные ресурсы и плагины для дизайна – Иконки, пользовательские интерфейсы, каркасы, iOS, Android…
Sketch App Sources – это самая большая коллекция значков, комплектов пользовательского интерфейса, каркасов и бесплатных ресурсов дизайна для Sketch.www.sketchappsources.com

2. Знайте, с чем вы работаете

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

Это может быть полезным для изучения того, как проводить аудит пользовательского интерфейса:

Пошаговое руководство по эффективному аудиту UX — InVision Blog
Это пошаговое руководство научит вас проверять ваш опыт пользователя. Но прежде чем мы погрузимся, давайте сначала…www.invisionapp.com

3. Стройте, как вы идете

Система проектирования – это живой документ. Понимая, что работа никогда не окончена, мы решили вмешаться и строить по ходу. Когда мы постоянно работаем над нашими проектами, мы будем проектировать с учетом компонентов и, наконец, будем иметь систему проектирования. К счастью, нас немного, что позволяет нам сотрудничать и «воровать» друг у друга.

Быстрый совет: создание символов в Sketch. Я знаю, это кажется трудоемким, но как только вы увидите силу символов, вы оцените старую поговорку:

«Вы должны идти медленно, чтобы ехать быстро».

4. Знайте свои границы

Начните с малого.

Некоторые системы проектирования содержат фрагменты кода. Это конечная цель, поскольку это увеличит внедрение всей компании и создаст согласованное взаимодействие с пользователями. Однако моя маленькая команда этого не может сделать. Еще нет, т.е.

Мы планируем начать с файла эскиза простых компонентов. Когда мы подойдем достаточно далеко, мы будем работать с нашими разработчиками интерфейса для создания CSS. Разрешение разработчикам использовать их «оружие выбора», когда речь идет о коде, может позволить системе проектирования жить. И поскольку база кода меняется, кажется, каждый день, лучше не вмешиваться в это.

5. Будьте организованы

Звучит просто, но с накоплением проектов и угрожающими дедлайнами легче делать что-то быстро и грязно. Чтобы быть организованным, нужно время и это никогда не будет сделано, но это сохранит здоровье всех и уменьшит количество электронной почты или беспорядка летающих туда-сюда файлов. Когда мы начинаем работать над новыми вещами, используя набор пользовательского интерфейса, который мы собираемся создать с помощью одного из вышеперечисленных инструментов, нам нужно следить. Иначе мы окажемся там, где начали – везде разные стили!

Версии проектного документа – мечта всех дизайнеров. Ни один продукт не получил это на 100% верно. Мы собираемся попробовать Abstract и Plant увидеть, как это может помочь нам оставаться на пути. Работая на предприятие, единственной онлайн-платформой, которую мы можем использовать для хранения файлов, является One Drive. Диск Google и Dropbox являются другими вариантами, если вы не ограничены.

Аннотация
Контроль версий и управление файлами для файлов Sketch. Аннотация позволяет дизайнерам надежно версии и…sketchapphub.comPlant – приложение для контроля версий и плагин Sketch для дизайнеров
Plant – программа для управления версиями и плагин Sketch для дизайнеров. Синхронизируйте версии дизайна, приглашайте товарищей по команде и принимайте…plantapp.io

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

Дизайн системного каталога

Как и было обещано, вот некоторые системы дизайна для вдохновения или для того, чтобы «воровать как художник»:

miukimiu/design-systems
design-systems – выбранный список систем дизайна. Обучающие материалы и инструменты для создания собственной системы дизайна.github.comИнструкции по дизайну Atlassian | Atlassian Design
Дизайн, разработка и доставка. Используйте сквозной язык дизайна Atlassian, чтобы создавать простые и красивые…atlassian.designПостроение визуального языка
За кулисами нашей новой системы дизайна. Эта статья является частью серии о нашей новой системе языка дизайна. Карри…airbnb.designBBC GEL | Домашняя страница
Наш язык глобального опыта (GEL) – это общая структура дизайна BBC, которая позволяет нам создавать последовательные и…www.bbc.co.ukСистема углеродного дизайна
Carbon – это система проектирования продуктов IBM Cloud. Это ряд индивидуальных стилей, компонентов и установок.carbondesignsystem.comHome — Office UI Fabric
Официальная интерфейсная структура для создания возможностей, идеально вписывающихся в Office и Office 365.developer.microsoft.comFluent Design System
Красочная система дизайна для сложного мира. Настало время для смелого, масштабируемого, универсального дизайна. Это…fluent.microsoft.comСистема гармоничного дизайна
Harmony — это живая система дизайна, объединяющая продукты Intuit для малого бизнеса, бренд и маркетинговый опыт в…harmony.intuit.comЯзык дизайна IBM
Используйте язык дизайна IBM для создания прекрасно созданных продуктов и улучшения взаимодействия с пользователями.www.ibm.comСистема Lightning Design
Lightning Design System обеспечивает доступную разметку, которая станет основой для вашей программы.www.lightningdesignsystem.comПутеводители и туристическая информация Lonely Planet
Руководство по стилю Документация Мониторинг производительности О Rizzorizzo.lonelyplanet.comМатериальный дизайн
Material Design – это унифицированная система, объединяющая теорию, ресурсы и инструменты для создания цифрового опыта.material.ioНачос | Trello
Trello – библиотека шаблоновdesign.trello.comPega UX Design System
Pega – это мощная UX-система для привлечения клиентов и сотрудников. Программное обеспечение Pega решает сложные бизнес-задачи.design.pega.comСистема проектирования Predix
Редактировать описаниеwww.predix-ui.comСтандарты веб-дизайна США: система дизайна для федерального правительства
Стандарты предоставляют подкрепленные исследованиями шаблоны проектирования для создания доступных, адаптивных и согласованных цифровых…standards.usa.govИнструкции по проектированию SAP Fiori
Оригинальный пользовательский интерфейс SAP Fiori для веб-приложений на основе фреймворка SAPUI5. Узнайте, как создавать привлекательные и…experience.sap.comShopify Polaris
Наше руководство по стилю является схемой нашей системы дизайна. Это помогает нам сотрудничать между разными дисциплинами, чтобы создать замечательный…polaris.shopify.comЛаборатория шаблонов Создание атомарных систем проектирования
В отличие от инструментов статического дизайна, Pattern Lab позволяет вам легко менять разное репрезентативное содержание в ваших компонентах.patternlab.io

Библиотеки шаблонов / пособия по стилям

WTF жесткий? — Жесткий
Solid – это руководство по стилю CSS от BuzzFeed. Под влиянием таких фреймворков, как Basscss, Solid использует неизменные, атомарные классы CSS для…solid.buzzfeed.comРуководство по стилю
Буфер позволяет очень легко делиться любой страницей, которую вы читаете. Пополняйте свой буфер и мы автоматически делимся ими…buffer.comDuolingo: рекомендации по дизайну
В написании Duolingo всегда состоит из одного слова с заглавной буквой «D». «L» никогда не пишется с заглавной буквы, а имя…www.duolingo.comБиблиотека шаблонов — FutureLearn
Наслаждайтесь бесплатными онлайн-курсами ведущих британских и международных университетов.www.futurelearn.comРекомендации по дизайну – способ создания продуктов.
Веб-разработчик откуда-тоdesignguidelines.coРесурсы руководства по стилю веб-сайта
Совместная коллекция ресурсов для создания пособий по стилям и библиотекам шаблонов внешнего видаstyleguides.ioСетка системы | MailChimp
Наша система сетки состоит из 8 гибких столбцов с желобом между столбцами 30 пикселей. Мы применяем border-box, чтобы…ux.mailchimp.comСправочник по стилю
Редактировать описаниеwww.yelp.com

Если вы нашли это полезно, вы знаете, что делать сейчас. Следите за мной, чтобы получать больше статей и пособий в своей ленте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *