Інструменты дызайну скончыліся. Вось як мы можам іх выправіць.

Рэдка праходзіць дзень, калі я не марную хоць нейкі час на раздумванне аб інструментах дызайну. Некалькі гадоў таму я пабудаваў інструмент дызайну, які набыў Marvel. Гэта было больш за два гады таму, але з тых часоў ландшафт не змяніўся і не захапілася яго ўдасканаленнем.

Нядаўна я чытаў паведамленне аб інструментах дызайну - рэч, якая, як вядома, здараецца час ад часу.

У той дзень я быў не адзіным, хто выказваў сваё меркаванне, і іншыя таксама перадаваліся.

28 ліпеня 2017 года не быў добрым днём для дызайнерскіх інструментаў.

У гэтых тэмах Twitter ёсць шмат цудоўных уяўленняў, але на працягу доўгага часу я хацеў знайсці час, каб пагрузіцца ўглыб усяго таго, што гэта, на мой погляд, настолькі кардынальна разбіта пра сучасную мадэль дызайнерскага інструмента. як намёк на кірунак, я думаю, мы павінны ісці.

Мы ўсе проста малюем карціны. Гэта вар'яцка.

Практычна ўсе папулярныя інструменты дызайну экспартуюць выявы. Гэта праблематычна па шэрагу прычын:

  1. Вы не можаце ўзаемадзейнічаць з выявай. Інструменты для стварэння прататыпаў дазваляюць нам дадаваць выявы ў пераходы і простыя ўзаемадзеянні. Аднак, паколькі нашы прадукты працягваюць патрабаваць больш дасканалых пераходаў і мікраўзаемадзеянняў, выявы проста не могуць ісці ў нагу.
  2. Выявы не вадкія. Зносіны спагадных дызайнерскіх рашэнняў праз выявы звычайна з'яўляецца складанай задачай.
  3. Выявы не з'яўляюцца вядомымі. Для эфектыўнага зносін розных станаў для карыстацкага інтэрфейсу часта патрабуецца шмат малюнкаў.
  4. Растравыя малюнкі залежаць ад дазволу. З з'яўленнем прылад сятчаткі вобразаў часам можа атрымацца дрэнна.
  5. Файлы малюнкаў, як правіла, вельмі цяжкія і часта складаныя для захоўвання, кіравання або сумеснага выкарыстання.

Пакуль інструменты дызайну працягваюць экспартаваць выявы, яны ніколі не змогуць скласці дакладныя ўяўленні пра нашу прадукцыю. Гэтая недахоп дакладнасці перашкаджае зносінам паміж дызайнерамі і распрацоўшчыкамі. Пакуль дызайнеры працягваюць выкарыстоўваць жудасна недастатковы носьбіт для перадачы сваёй працы, гэтая праца заўсёды будзе адкрыта для няправільнага тлумачэння.

Гэта вельмі важны момант, паколькі, па сутнасці, амаль усе інструменты дызайну пераўтвараюць вектарныя фігуры ў выявы. Photoshop, Illustrator, Marvel, Adobe XD, Sketch і Figma - аднолькавыя ў гэтым плане. І ўсё ж выявы могуць толькі часткова паведамляць аб дызайнерскіх намерах. Паколькі нашы прадукты працягваюць успрымаць і падтрымліваць складаныя ўзаемадзеяння, галасавы ўвод, відэа ўвод, дапоўненую рэальнасць, віртуальную рэальнасць, адчувальнасць да тэмпературы і г.д., значэнне, якое гэтыя інструменты забяспечваюць, хутка змяншаецца. Дызайн на аснове малюнкаў - тупік.

Нашы інструменты дызайну павінны маніпуляваць фактычным прадуктам, а не яго выявай.

Нашы прадукты інтэрактыўныя. Нашы інструменты статычныя.

Я закрануў гэта ў папярэдняй кропцы, але гэта вельмі крытычна, таму я зразумеў, што буду крыху ўдакладніць.

Падумайце пра колькасць простых узаемадзеянняў, якія ёсць звычайнай практычна ва ўсіх нашых прадуктах, але іх нельга паведамляць з дапамогай нашых інструментаў дызайну. Вось кароткі спіс у верхняй частцы маёй галавы:

  • Навядзенне кнопкі
  • Фокус на ўваходзе
  • Усталяванне сцяжкі
  • Змесціва на ўкладках
  • Пракруціць вобласці
  • Індэкс укладкі для сфакусаваных станаў
  • Клавішы хуткага доступу

Вядома, некаторыя з гэтых асаблівасцяў могуць быць перайманы нейкай пачварнай інжынерыяй, але трэба задацца пытаннем: у чым сэнс на Зямлі? Чаму дызайнеры не могуць проста распрацаваць сапраўдны прадукт ?! У канчатковым рахунку ўсе макеты аднаразовыя, але дызайнеры праводзяць месяцы, падпраўляючы іх да дасканаласці. Гэты час было б значна лепш выдаткавана на наладку сапраўднага прадукту.

Я не пайду занадта далёка ўніз, калі "дызайнеры кода" трусяць дзірку, але я не прапаную ўсім пісаць код. Я проста кажу, што няма ніякіх важкіх прычын, чаму нашы інструменты дызайну не могуць падтрымліваць прамыя маніпуляцыі нашымі жывымі прадуктамі.

Framer робіць больш якасную працу, чым большасць у гэтым аддзеле, падтрымліваючы перадавыя і дэталёвыя ўзаемадзеяння. Астатняя частка зграі вельмі далёка ззаду.

Нашы інструменты павінны падтрымліваць парадыгму макета Інтэрнэту

Прыблізна год таму адзіным спосабам стварэння макетаў у Інтэрнэце было выкарыстанне дысплея: табліцы і вертыкальна-выраўнаваць уласцівасці CSS. Цяпер у нас ёсць Flexbox, і неўзабаве ў нас з'явіцца сетка CSS. Гэтыя тры рухавікі планіроўкі функцыянуюць даволі падобна, выкарыстоўваючы паток DOM. Амаль усе вэб-сайты пабудаваны з выкарыстаннем адной з гэтых трох сістэм разметкі.

Такім чынам, мае сэнс, што нашы інструменты дызайну падтрымліваюць тую ж мадэль кампаноўкі. Так?

Ну, практычна ўсе інструменты дызайну ігнаруюць гэтыя сістэмы размяшчэння, замест гэтага робяць кожны пласт абсалютна ў межах мастацкай вобласці. Гэта адкрывае прорву паміж тым, як функцыянуе ў Інтэрнэце, і тым, як функцыянуюць нашы інструменты дызайну, прадстаўляючы мноства праблем:

  • Спагадны дызайн становіцца вельмі складаным, бо кожны пласт трэба перастаўляць уручную для кожнай кропкі разрыву. У якасці альтэрнатывы можа быць уведзена сістэма макетаў на аснове абмежаванняў, якая дадасць складанасці, пагаршае крывыя навучання і ў канчатковым выніку не дазваляе распрацоўнікам пераносіць макет непасрэдна ў Інтэрнэт.
  • Паколькі кожны пласт знаходзіцца па-за патоку дакумента, маніпуляванне зместам становіцца складаным. Напрыклад, калі вы хочаце дадаць элемент у спіс, вы павінны ўручную пераставіць іншыя элементы ў гэтым спісе. Вядома, для палягчэння болю могуць быць уведзены паўторныя функцыі і іншыя мудрагелістыя функцыі, але зноў жа, гэта ўводзіць дадатковую складанасць і ўскладняе тое, што DOM дае нам бясплатна.
  • Абсалютнае пазіцыянаванне, натуральна, прыводзіць да фіксаваных каардынатаў і памераў пікселяў. Гэта абумоўлівае гнуткасць і, зноў жа, з'яўляецца вялікім адыходам ад функцыянавання Інтэрнэту. Інтэрнэт пабудаваны на вадкасных адзінках, такіх як em, rem, vh, vw і%. Нашы інструменты павінны падтрымліваць гэтыя прылады па змаўчанні.

Інструменты дызайну не павінны нагадваць Інтэрнэт і адлюстроўваць яго нюансы - яны павінны быць проста Інтэрнэтам.

Маналітны інструмент - гэта не так

Добры дызайн бывае паэтапна. Добра структураваная сістэма дызайну мае некалькі розных слаёў:

  1. Палітра стыляў Калекцыя колераў, ценяў, прамежак, радыусаў аблямоўкі, шрыфтоў, памераў шрыфта, анімацыі і іншых стыляў, якія фарміруюць ідэнтычнасць вашай маркі. У цяперашні час большасць інструментаў дызайну падтрымліваюць толькі каляровыя палітры. Пакуль яны не падтрымліваюць іншыя ўласцівасці стылю, дызайн будзе надзвычай карпатлівым.
  2. Актывы Гэта ўключае ў сябе такія элементы, як абразкі, ілюстрацыі і выявы. Ёсць некалькі фенаменальных рэдактараў малюнкаў, і вектарны інструмент Figma з'яўляецца выдатным, але калі справа даходзіць да падтрымкі SVG, нашы інструменты дызайну пакідаюць жадаць лепшага.
  3. Бібліятэка кампанентаў Кампанент - гэта набор стыляў і актываў, які прадстаўляе дадзеныя адзінаму элементу ў самых розных варыяцыях. Напрыклад, кнопкі, матэрыялы, значкі і г.д. Як я ўжо згадваў, Figma і Sketch нядаўна абстрагаваліся ад гэтага працэсу ад асноўнага патоку малявання - шкада, што яны проста выявы кампанентаў, а не фактычныя кампаненты.
  4. Модулі Модуль / кампазіцыя - гэта сукупнасць кампанентаў, якая адлюстроўвае дадзеныя інкапсуляванай частцы карыстацкага інтэрфейсу ў розных станах. Прыклады могуць ўключаць у сябе загалоўкі, меню ўкладкі, формы ўваходу, табліцы і г.д. Паколькі модулі проста складаныя кампаненты, я думаю, Figma і Sketch таксама могуць справіцца з імі. Хоць можа быць пэўная заслуга ў раздзяленні двух.
  5. Экраны Экран - гэта сукупнасць модуляў, кампанентаў і дадзеных для фарміравання поўнага карыстацкага інтэрфейсу, з якім карыстальнік можа ўзаемадзейнічаць.

Большасць інструментаў праектавання забяспечваюць функцыі, якія, па меншай меры, падтрымліваюць кожны з гэтых этапаў праектавання. Праблема ў тым, што ўсе этапы звязаны. Практычна ўсе інструменты дызайну прапануюць толькі адзін рэжым - рэжым малявання. Вы ствараеце набор артбордаў і проста пачынаеце маляваць малюнкі. Толькі зусім нядаўна такія інструменты, як Sketch і Figma, абстрагавалі кампаненты / сімвалы ад асноўнага рэжыму малявання - што дзіўна, бо ў распрацоўцы інтэрфейсу на працягу многіх гадоў абстрагаваліся кампаненты.

Пры распрацоўцы палітры стыляў мне не трэба бачыць артборды альбо вектарныя інструменты. Я хачу ўбачыць інструменты для выбару гарманічных колераў. Я хачу, каб задаваць заданні, такія як шкала размяшчэння 8dp або выбар шкалаў тыпу.

Праектаванне абраза патрабуе зусім іншага рэжыму мыслення для распрацоўкі карыстацкага патоку. Просты рэдактар ​​SVG, які дазволіў мне маляваць родныя прастакутнікі SVG, кругі, лініі і шляху, а потым экспартаваць аптымізаваны SVG-код было б ідэальна.

Пры распрацоўцы кампанента я больш не павінен думаць пра асобныя стылі - я проста павінен выбіраць стылі з маёй загадзя вызначанай палітры стыляў. Я не магу проста пачаць наладжваць стылі для аднаго кампанента, таму што гэта ўвядзе неадпаведнасць, разводзячы эфектыўнасць маёй дызайнерскай сістэмы. Пасля таго, як палітра стыляў усталявана, яе можна рэдагаваць толькі ў крыніцы.

Сапраўды гэтак жа, складаючы модуль, мне давядзецца выставіць толькі маю загадзя вызначаную бібліятэку кампанентаў. У бакавой панэлі не павінна быць уласцівасцей стылю. Няма вектарных інструментаў. Проста бібліятэка шматразовых кампанентаў, якія я магу перацягваць і складаць модулі.

Тое ж самае тычыцца стварэння экранаў. На дадзены момант мы проста выкарыстоўваем кампаненты і модулі для стварэння інтэрфейсу. Мы не думаем пра стылі ці формы ці іншыя творчыя пачынанні. Мы галоўным чынам сканцэнтраваны на распрацоўцы зместу і патокаў карыстальнікаў.

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

Нашы інструменты павінны стымуляваць добры дызайн

Дызайнеры валодаюць рэдкай раскошай, калі яны могуць дадаваць у праект бясконцае колькасць унікальных стыляў без прыкметных наступстваў. Вам патрэбен крыху большы памер шрыфта? Проста ўпірайцеся. Ніякага прыроды. Вам патрэбен крыху ярчэйшы колер? Проста падправіць. Гэта крута. Вы нават можаце стварыць некалькі арт-дошак у адным праекце, кожны з якіх выкарыстоўвае некалькі розныя значэнні для падобных стыляў, і гэта, верагодна, застанецца незаўважаным.

Ваш інструмент дызайну ніколі не скажа вам, што вы не можаце зрабіць што-небудзь. Гэта ніколі не цягне цябе за выкарыстанне колеру не-маркі. Гэта ніколі не перашкодзіць вам выкарыстоўваць значэнне прабела, якое не ўваходзіць у вашы міжзоркавыя шкалы. Ніколі не папярэджваю, што 20% насельніцтва літаральна не бачыць светла-шэрага тэксту, які вы толькі што распрацавалі.

А чаму б і не ...? Таму што інструменты дызайну не хвалююць.

Інструменты дызайну настолькі ўпрыгожаныя бачаннем неабмежаванай творчасці, што яны пазбавіліся ўвагі, што значыць разумны дызайн, інклюзіўны дызайн, сістэматычны дызайн.

Прасцей кажучы, інструменты дызайну дазваляюць нам рабіць усё, што заўгодна. У пэўнай ступені гэты ўзровень бязмежнай творчасці карысны, асабліва на этапах ідэі. Як і дызайнеры інтэрфейсу, большасць нашых працоўных працэсаў не патрабуе вялікай творчасці. Хутчэй, наш працоўны працэс патрабуе паўторнага выкарыстання, паўтарэння, знаёмства і стандартызацыі; патрэбы, якія нашы інструменты мала задавальняюць.

Гэтая неабмежаваная свабода супярэчыць рэчаіснасці вэб-распрацоўкі. Паколькі распрацоўшчыкі працуюць з фактычным прадуктам, усе яны павінны працаваць з тым жа кодам. Распрацоўшчыкі не могуць проста дадаваць у базу дадзеных коды ізаляванага памеру шрыфта альбо выпадковых значэнняў колеру. Па-першае, укладыш (папярэджанне аб папярэджанні дрэнна напісанага кода) хутчэй за ўсё можа пачаць крычаць. Калі не, то іхная нязграбная майстэрства, верагодна, была б зафіксавана падчас разгляду кода. Калі б нейкім чынам удалося праслізнуць праз шчыліны, прыкметнае ўздзеянне на прадукцыйнасць у рэшце рэшт выкліча трывогу.

Адна з самых разбуральных праблем, якія я бачу ў камандзе прадуктаў, - гэта разрыў паміж камандамі праектавання і распрацоўкі. Распрацоўшчыкі ўжо шмат гадоў працуюць са строгімі ўказаннямі і абмежаваннямі. Калі нашы інструменты праектавання не прымуць гэтыя самыя абмежаванні, разрыў ніколі не будзе звужацца.

Мы павінны распрацоўваць жывыя дадзеныя

Жывыя дадзеныя былі ў пэўнай ступені ўключаны мноствам інструментаў, што выдатна бачна. Adobe XD мае некалькі сапраўды акуратных функцый для стварэння падробленых дадзеных, якія нагадваюць тыповыя жывыя дадзеныя. Invision Craft таксама прадастаўляе некаторыя цікавыя функцыі жывых дадзеных для эскізу.

Праўда дадзеныя не павінны спыняцца з тэкстам. Іншыя элементы, такія як выявы і відэа, могуць аказаць велізарны ўплыў на карыстацкі досвед, значна павялічваючы час загрузкі. Калі вы працуеце ў Інтэрнэце, інструменты распрацоўніка браўзэра дазваляюць вам пераключыць злучэнне, каб нагадваць розныя хуткасці Інтэрнэту. Затым з першых рук вы бачыце, як новая частка зместу можа паўплываць на карыстацкі досвед.

Ці дазваляюць нашы інструменты дызайну даставіць нам такую ​​раскошу?

Адным словам: не.

Чым бліжэй мы падыходзім да распрацоўкі фактычнага прадукту, тым больш карыснай і эфектнай можа быць наша дызайнерская праца.

Інтэрнэт адкрыты. Нашы інструменты таксама павінны быць.

Адна з сапраўды прыгожых рэчаў у Інтэрнэце - гэта яго адкрытая даступнасць. Вэб-сайт можна праглядзець у любым браўзэры на любой прыладзе.

Як гэта параўнаць з інструментамі дызайну? Ну, некалькі дзён таму мой брат Дэвід папрасіў мяне агледзець дызайн прыкладанне, якое ён будуе. Ён даслаў мне файл эскіза. Калі я адкрыў гэта, гэта адбылося ...

Большасць інструментаў дызайну з'яўляюцца агароджанымі садамі. Калі адзін калега працуе ў Photoshop, іншы калега не можа адкрыць гэты праект у Sketch. Недастаткова, каб уся каманда выкарыстоўвала адзін і той жа інструмент - яны таксама павінны выкарыстоўваць тую ж версію гэтага інструмента.

Marvel і Figma выдатна працуюць тут, прапаноўваючы бясплатныя планы і інавацыйныя функцыі сумеснай працы.

Такім чынам, якая будучыня інструментаў дызайну?

Інавацыі ў распрацоўцы інструментаў надзвычай каштоўныя, і ў апошні час іх было шмат. У інструментах дызайну Airbnb Джон Голд і Бенджамін Уілкінс працавалі над React-Sketchapp, які прымае кампаненты React і выводзіць іх у эскіз. Джон і Бэн таксама працуюць над узрушаючым новым інструментам, які бярэ эскізы для сурвэтак і нейкім чынам ператварае іх у складнікі React.

Адам Морс, Брэнт Джэксан і Джон Отандэр працуюць над наборам інструментаў кампазітара, якія ў асноўным вырашаюць усе праблемы ў гэтым артыкуле і, магчыма, у свеце.

Я працую над Modulz, новым інструментам дызайну і сістэмай дызайну з адкрытым зыходным кодам, які таксама накіраваны на вырашэнне праблем, згаданых у гэтым артыкуле. Калі вы зацікаўлены, сачыце за абнаўленнямі на Twitter.

Хоць інавацыі ў апрацоўцы інструментаў важныя, сапраўднай праблемай з'яўляецца адукацыя. Суполка дызайнераў проста не гатовая да інструмента сістэматычнага дызайну. Многія дызайнеры практычна не цікавяцца будаўнічымі сістэмамі. Для некаторых JPG з'яўляецца канчатковай мэтай - Dribbble падабаецца.

Нам трэба неяк натхніць культуру падсправаздачнасці. Распрацоўшчыкі ўжо шмат гадоў карыстаюцца культурай адказнасці. У іх ёсць інструменты для кантролю кода. Калі распрацоўшчык неаднаразова адхіляецца ад іх строгіх правілаў кода, вы можаце быць упэўнены, што праблема будзе вырашана.

Між тым, дызайнеры часта набіраюць горы пластоў у поўным беспарадку, мала ўлічваючы найменне слаёў, групоўку і ўпарадкаванне. Гэта вельмі кожнае па-свойму. Паколькі на вывад (растравы малюнак) не ўплывае ўваход (вектарныя пласты), дызайнеры, якія трэба арганізаваць, не ўскладаюць рэальнай нагрузкі. Дызайнеры часта апраўдваюць гэтую недахоп арганізацыі, рамантызуючы мастацтва дызайну, прадстаўляючы сябе чараўнікамі, якіх трэба выканаць для ўласных прылад.

Мы таксама павінны натхняць культуру ўключэння. Мы павінны актыўна перашкаджаць няправільнаму абыходжанню, напрыклад, звышлёгкія колеры тэксту, якія абцяжарваюць чытанне тэксту для многіх людзей, альбо супер-якасныя шрыфты, якія робяць павольныя загрузкі вэб-старонак, альбо бяззоўныя элементы карыстацкага інтэрфейсу, якія робяць складанасць для ўсведамлення каляровых людзей. У цяперашні час гэты тып няправільнай працы апладзіруюць сярод дызайнерскіх колаў. Калі мы будзем вітаць разумны інструмент дызайну, мы павінны перавярнуць гэтую культуру.

Калі сістэмны інструмент дызайну заваёўвае нашы сэрцы, ён павінен спачатку навучыцца.