Дизайн Саша Море
2 324

Ваша библиотека компонентов в Sketch — это не дизайн-система

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

В закладки

Перевод Николая Геллара, автора блога о дизайне Sketchapp.me.

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

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

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

Дело не в том, что инструменты и документация по статическому дизайну не важны (они важны), но они не могут создавать функционирующие компоненты интерфейса, которые можно использовать для создания реальных программных приложений.

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

Итак, что же делать команде, чтобы удостовериться, что она занимается разработкой реально функционирующих компонентов интерфейса?

  • Удостоверьтесь, что в вашей команде есть фронтенд-дизайнеры. Если у вас их нет или недостаточно, наймите несколько. Есть множество фронтенд-дизайнеров, стремящихся построить чистый, красивый, модульный, многоразовый код интерфейса.
  • Установите управляемый шаблонами междисциплинарный рабочий процесс, который подчёркивает необходимость раннего перехода в браузер и итерацию фронтенд-кода. Вместо того чтобы дизайнеры оставались в комфортных стенах своих инструментов статического дизайна, поощряйте совместную работу с разработчиками, чтобы дизайнерское видение пробивалось в фактический код, который будет развёрнут в реальных продуктах.
  • На ранней стадии создания вашей дизайн-системы обсудите методы, которые вы будете использовать для развёртывания компонентов интерфейса в код продукта, а затем быстро оцените этот рабочий процесс, используя один компонент («Окей, вот компонент кнопки нашей дизайн-системы, как мы используем его на нашей домашней странице?»).
  • Понять трение между созданием функционирующих компонентов интерфейса, использующих определённые технологии (такие как React, Angular, Twig и другие) и создать систему дизайна, которая будет больше, чем внедрение любой технологии.
  • Убедитесь, что живые компоненты и код отображаются вместе с любой дизайнерской документацией и скриншотами в руководстве по стилю.

Такие инструменты, как Sketch, InVision Studio, Adobe XD, Figma и другие, наконец, признали важность создания многократно используемых компонентов интерфейса и обмена ими между членами команды.

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

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

Теперь идите и создайте свои тостеры.

#дизайн

{ "author_name": "Саша Море", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 7, "likes": 12, "favorites": 11, "is_advertisement": false, "subsite_label": "design", "id": 38538, "is_wide": false, "is_ugc": false, "date": "Wed, 23 May 2018 09:30:25 +0300" }
{ "id": 38538, "author_id": 81289, "diff_limit": 1000, "urls": {"diff":"\/comments\/38538\/get","add":"\/comments\/38538\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38538"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

7 комментариев 7 комм.

Популярные

По порядку

Написать комментарий...
3

А что такое фронтенд-дизайнеры ?
Если проводить аналогию, то что существуют бэкенд-дизайнеры?

Что за чушь.

Ответить
2

Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.

Ответить
0

Незабудьте это сказать на собеседовании) а потом отпишитесь о результате

Ответить
2

Статья про дизайн без единой картинки. ок

Ответить
1

Какой кошмар. Он еще, небось, и за Sketch платит

Ответить
1

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

Ответить
1

Ваше мнение очень важно для нас, пожалуйста оставайтесь на линии. Кто-нибудь обязательно с вами свяжется.

Ответить

Комментарий удален

0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления