Ang mga tool ng disenyo ay naubusan. Narito kung paano natin maiayos ang mga ito.

Bihirang isang araw ay dumadaan sa kung saan hindi ako gumugugol ng kaunting oras sa pag-iisip tungkol sa mga tool sa disenyo. Ilang taon na ang nakalilipas, nagtayo ako ng isang tool sa disenyo na nakuha ni Marvel. Iyon ay higit sa dalawang taon na ang nakalilipas ngunit mula noon hindi pa nagbago ang tanawin, o ang aking pagnanasa sa pagpapabuti nito.

Kamakailan lamang, nag-tweet ako tungkol sa mga tool sa disenyo - isang bagay na alam na mangyayari paminsan-minsan.

Hindi ako ang isa lamang na nagsasalita sa aking isipan noong araw na iyon, ang iba ay huminahon din.

Hulyo 28, 2017 ay hindi magandang araw para sa mga tool sa disenyo.

Mayroong maraming mahusay na pananaw na inilibing sa mga thread ng Twitter na ito ngunit sa loob ng mahabang panahon, nais kong maglaan ng oras upang sumisid sa malalim kung ano ang sa palagay ko ay panimula nasira tungkol sa kasalukuyang modelo ng tool ng disenyo, pati na rin bilang pahiwatig sa direksyon sa palagay ko ay dapat tayong magtungo.

Lahat tayo ay gumuhit lamang ng mga larawan. Sira ang ulo.

Halos lahat ng mga tanyag na tool sa disenyo ay nai-export sa mga imahe. Ito ay may problemang para sa maraming mga kadahilanan:

  1. Hindi ka maaaring makipag-ugnay sa isang imahe. Ang mga tool ng prototyping ay nagbibigay lakas sa amin upang magdagdag ng mga paglilipat ng screen at simpleng pakikipag-ugnay sa mga imahe. Gayunpaman, habang patuloy na hinihingi ng aming mga produkto ang mas advanced na mga paglilipat ng screen at mga pakikipag-ugnay sa micro, hindi maaaring mapanatili ang mga imahe.
  2. Ang mga imahe ay hindi likido. Ang pakikipag-ugnay ng mga responsableng desisyon sa disenyo sa pamamagitan ng mga imahe ay karaniwang isang mahirap na gawain.
  3. Ang mga imahe ay hindi mapapansin. Upang epektibong makipag-usap sa iba't ibang mga estado para sa isang UI, madalas na maraming mga imahe ang kinakailangan.
  4. Ang mga imahe ng bitmap ay nakasalalay sa resolusyon. Sa pagdating ng mga aparato ng retina, ang mga imahe ay maaaring mag-render nang mahina.
  5. Ang mga file ng imahe ay may posibilidad na maging mabigat at madalas na mahirap mag-imbak, pamahalaan o ibahagi.

Hangga't ang mga tool ng disenyo ay nagpapatuloy sa pag-export ng mga imahe, hindi sila makakagawa ng tumpak na mga representasyon ng aming mga produkto. Ang kakulangan ng kawastuhan ay humahadlang sa komunikasyon sa pagitan ng mga taga-disenyo at developer. Hangga't ang mga taga-disenyo ay patuloy na gumagamit ng isang hindi kapani-paniwalang hindi sapat na daluyan upang maiparating ang kanilang gawain, ang gawaing iyon ay palaging bukas sa maling pagkakaunawaan.

Ito ay isang napaka makabuluhang punto dahil, sa kanilang pangunahing, halos lahat ng mga tool sa disenyo ay nag-convert ng mga hugis ng vector sa mga imahe. Ang Photoshop, Illustrator, Marvel, Adobe XD, Sketch at Figma ay pareho sa bagay na ito. Gayunpaman ang mga imahe ay maaaring bahagyang makipag-usap sa intensyon ng disenyo. Habang ang aming mga produkto ay patuloy na nagpatibay at sumusuporta sa mga kumplikadong pakikipag-ugnay, pag-input ng boses, input ng video, pinalaki na katotohanan, virtual na katotohanan, sensitivity sa temperatura atbp, ang halaga ng mga tool na ibinibigay nito ay mababawasan nang mabilis. Ang disenyo na batay sa imahe ay isang patay na pagtatapos.

Ang aming mga tool sa disenyo ay dapat manipulahin ang aktwal na produkto, hindi isang larawan nito.

Ang aming mga produkto ay interactive. Static ang aming mga tool.

Naantig ko ito sa aking nakaraang punto ngunit ito ay sobrang kritikal kaya naisip kong mas detalyado ako ng kaunti.

Isipin ang dami ng mga simpleng pakikipag-ugnayan na karaniwan sa halos lahat ng aming mga produkto ay hindi pa maiparating sa pamamagitan ng aming mga tool sa disenyo. Narito ang isang maikling listahan mula sa tuktok ng aking ulo:

  • Nag-hover ng isang button
  • Pagtutuon ng isang input
  • Sinuri ang isang checkbox
  • Naka-tab na nilalaman
  • Mga lugar ng scroll
  • Tab index para sa mga nakatutok na estado
  • Mga shortcut sa keyboard

Sigurado, ang ilan sa mga tampok na ito ay maaaring gayahin sa ilang mga nakamamatay na engineering ngunit ang isa ay dapat magtaka, ano ang nasa Earth? Bakit hindi ididisenyo ng mga taga-disenyo ang aktwal na produkto ?! Sa huli, lahat ng mga pangungutya ay maaaring gamitin, ngunit ang mga taga-disenyo ay gumugol ng maraming buwan sa pag-iikot sa kanila sa pagiging perpekto. Ang oras na iyon ay mas mahusay na ginugol sa pag-tweet ng aktwal na produkto.

Hindi ako pupunta sa sobrang layo ng "dapat na code ng taga-disenyo" na butas ng kuneho ngunit hindi ko iminumungkahi na magsulat kaming lahat. Sinasabi ko lang na walang magandang dahilan kung bakit hindi suportado ng aming mga tool sa disenyo ang direktang pagmamanipula ng aming mga live na produkto.

Ang Framer ay gumagawa ng isang mas mahusay na trabaho kaysa sa karamihan sa kagawaran na ito, na sumusuporta sa mga advanced at detalyadong pakikipag-ugnayan. Ang natitira sa pack ay napakalayo sa likuran.

Dapat suportahan ng aming mga tool ang layout ng layout ng web

Hanggang sa isang taon na ang nakalilipas, ang tanging paraan upang makabuo ng mga layout sa web ay ang paggamit ng display: talahanayan at patayong align-align ng mga katangian ng CSS. Ngayon mayroon kaming Flexbox at sa lalong madaling panahon magkakaroon kami ng CSS grid. Ang tatlong mga layout ng engine ay gumana medyo katulad, gamit ang daloy ng DOM. Halos lahat ng mga website ay binuo gamit ang isa sa tatlong mga sistema ng layout.

Kaya, makatuwiran na suportahan ng aming mga tool sa disenyo ang parehong modelo ng layout. Tama ba?

Buweno, halos lahat ng mga tool sa disenyo ay hindi pinapansin ang mga system ng layout na ito, sa halip ay pumipili upang iposisyon ang bawat layer na talagang nasa loob ng artboard nito. Binubuksan nito ang isang kalungkutan sa pagitan ng kung paano gumagana ang web at kung paano gumana ang aming mga tool sa disenyo, na nagpapakilala ng maraming mga isyu:

  • Ang tumutugon na disenyo ay nagiging napakahirap dahil ang bawat layer ay dapat na muling ayusin nang manu-mano para sa bawat breakpoint. Bilang kahalili, ang isang sistema ng layout na batay sa pagpilit ay maaaring ipakilala ngunit nagdaragdag ng pagiging kumplikado, matarik na mga curves ng pagkatuto at sa huli ay pinipigilan ang mga developer na ilipat ang direkta sa web.
  • Dahil ang bawat layer ay nasa labas ng daloy ng dokumento, ang pagmamanipula ng nilalaman ay nagiging mahirap hawakan. Halimbawa, kung nais mong magdagdag ng isang item sa isang listahan, dapat mong manu-manong i-repose ang iba pang mga item sa lista na iyon. Siyempre, ang mga pag-andar ng paulit-ulit at iba pang mga magarbong tampok ay maaaring ipakilala upang mapagaan ang sakit ngunit muli, ipinakilala nito ang idinagdag na pagiging kumplikado at kumplikado ang isang bagay na ibinibigay sa amin ng DOM nang libre.
  • Ang ganap na pagpoposisyon ay natural na humahantong sa mga nakapirming coordinates at sukat. Ito breeds kakayahang umangkop at, muli, ay isang malaking pag-alis mula sa kung paano gumagana ang web. Ang web ay binuo sa mga yunit ng likido tulad ng em, rem, vh, vw at%. Dapat suportahan ng aming mga tool ang mga yunit na ito bilang default.

Ang mga kasangkapan sa disenyo ay hindi dapat na maging katulad o sumasalamin sa web at mga nuances nito - dapat lamang sila ang maging web.

Ang isang tool na monolitik ay hindi ang paraan

Ang magagandang disenyo ay nangyayari sa mga yugto. Ang isang maayos na nakaayos na sistema ng disenyo ay may ilang natatanging mga layer:

  1. Paleta ng Estilo Isang koleksyon ng mga kulay, mga anino, spacing, radii ng hangganan, mga typefaces, laki ng font, mga animation at iba pang mga estilo na bumubuo ng pagkakakilanlan ng iyong tatak. Sa kasalukuyan, sinusuportahan lamang ng karamihan sa mga tool ng disenyo ang mga palette ng kulay. Hanggang sa suportahan nila ang iba pang mga katangian ng estilo, magiging labis na matrabaho upang magdisenyo ng sistematikong.
  2. Mga Asset Kasama dito ang mga elemento tulad ng mga icon, mga guhit at imahe. Mayroong ilang mga kamangha-manghang mga editor ng imahe sa labas at ang tool ng vector ng Figma ay mahusay ngunit pagdating sa suporta ng SVG, ang aming mga tool sa disenyo ay umalis ng maraming nais.
  3. Component library Ang bahagi ay isang koleksyon ng mga estilo at mga ari-arian na nagbibigay ng data sa isang solong elemento sa iba't ibang mga pagkakaiba-iba. Kabilang sa mga halimbawa ang mga pindutan, input, badge atbp Tulad ng nabanggit ko, ang Figma at Sketch ay kamakailan lamang na na-abstract ang prosesong ito na malayo sa pangunahing daloy ng pagguhit - ito ay isang awa na sila ay mga larawan lamang ng mga bahagi at hindi aktwal na mga sangkap.
  4. Mga Module Ang module / komposisyon ay isang koleksyon ng mga sangkap na nagbibigay ng data sa isang encapsulated na piraso ng UI sa iba't ibang mga estado. Maaaring kabilang sa mga halimbawa ang mga header bar, menu ng tab, mga form sa pag-login, mga talahanayan atbp Dahil ang mga module ay mga kumplikadong sangkap lamang, hinuhulaan ko rin ang Figma at Sketch. Bagaman maaaring may ilang merito sa paghihiwalay sa dalawa.
  5. Mga screenshot Ang screen ay isang koleksyon ng mga module, mga sangkap at data upang makabuo ng isang kumpletong UI na maaaring makisalamuha ng gumagamit.

Karamihan sa mga tool ng disenyo ay nagbibigay ng mga tampok na sumusuporta sa bawat isa sa mga yugto ng disenyo na ito kahit papaano. Ang problema ay ang lahat ng mga yugto ay nakakulong. Halos lahat ng mga tool sa disenyo ay nag-aalok ng isang mode lamang - ang mode ng pagguhit. Lumilikha ka ng isang hanay ng mga artboards at simulan lamang ang pagguhit ng mga larawan. Ang mga kamakailan lamang ay may mga tool tulad ng Sketch at Figma na mga abstract na sangkap / simbolo na malayo sa pangunahing mode ng pagguhit - na kakaiba dahil sa pag-unlad ng harap, ang mga sangkap ay na-abstract nang maraming taon.

Habang nagdidisenyo ng isang style palette, hindi ko kailangang makita ang mga artboards o vector tool. Nais kong makita ang mga tool para sa pagpili ng maayos na mga kulay. Gusto ko ng mga preset para sa mga bagay tulad ng isang 8dp spacing scale o isang seleksyon ng mga uri ng kaliskis.

Ang pagdidisenyo ng isang icon ay nangangailangan ng isang ganap na magkakaibang mode ng pag-iisip sa pagdidisenyo ng daloy ng gumagamit. Ang isang simpleng editor ng SVG na nagpapahintulot sa akin na gumuhit ng mga katutubong parisukat na SVG, mga lupon, linya at mga landas, at pagkatapos ay nai-export na na-optimize na code ng SVG.

Habang nagdidisenyo ng isang sangkap, hindi na ako dapat mag-iisip tungkol sa mga indibidwal na estilo - Dapat lang akong pumili ng mga estilo mula sa aking paunang natukoy na palette ng istilo. Hindi ko lamang masimulan ang mga estilo ng pag-tweaking para sa isang sangkap dahil na magpapakilala ng hindi pagkakapantay-pantay, palabnawin ang pagiging epektibo ng aking sistema ng disenyo. Kapag ang isang style palette ay nasa lugar, dapat lamang itong mai-edit sa pinagmulan.

Katulad nito, habang bumubuo ng isang module, dapat lamang na mailantad sa aking paunang natukoy na bahagi ng aklatan. Hindi dapat magkaroon ng mga katangian ng estilo sa isang sidebar. Walang mga tool sa vector. Lamang ng isang library ng mga magagamit na bahagi na maaari kong i-drag at i-drop upang gumawa ng mga module.

Ang parehong napupunta para sa pagbubuo ng mga screen. Sa puntong ito, muling ginagamit namin ang mga bahagi at module upang makabuo ng isang UI. Hindi namin iniisip ang tungkol sa mga estilo o hugis o iba pang malikhaing pagsusumikap. Pangunahing nakatuon kami sa pagdidisenyo ng nilalaman at daloy ng gumagamit.

Ang bawat isa sa mga yugto ng disenyo na ito ay maaaring maganap sa magkahiwalay na mga tool nang ganap o magkakaibang mga mode lamang sa loob ng parehong tool. Sa palagay ko hindi ito mahalaga. Ang isang bagay ay sigurado, bagaman, ang karamihan sa mga kasalukuyang tool ng disenyo ay nabibigo kahit na kilalanin ang proseso.

Ang aming mga tool ay dapat hikayatin ang mahusay na disenyo

Ang mga taga-disenyo ay may bihirang luho ng kakayahang magdagdag ng isang walang hanggan bilang ng mga natatanging estilo sa isang proyekto nang walang anumang kapansin-pansin na mga repercussion. Kailangan mo ng isang bahagyang mas malaking laki ng font? Basta itago mo na lang. Walang biggie. Kailangan mo ng isang bahagyang mas maliwanag na kulay? I-tweet mo lang ito. Ito ay cool. Maaari ka ring lumikha ng maraming mga artboards sa parehong proyekto, ang bawat isa ay gumagamit ng bahagyang magkakaibang mga halaga para sa mga magkakatulad na istilo at malamang na mapapansin ito.

Ang iyong tool sa disenyo ay hindi kailanman sasabihin sa iyo na wala kang magagawa. Hindi ka na kailanman aalisin para sa paggamit ng kulay ng off-brand. Hindi ka maiiwasan na gumamit ka ng isang halaga ng whitespace na hindi kabilang sa iyong sukat ng spacing. Hindi ka kailanman babalaan sa iyo na 20% ng populasyon ay literal na hindi makikita ang murang kulay-abo na teksto na iyong dinisenyo lamang.

At bakit hindi…? Sapagkat walang pakialam ang mga tool ng disenyo.

Ang mga kasangkapan sa disenyo ay napakahabag na nasisiyahan sa isang pangitain para sa walang limitasyong pagkamalikhain na nawala ang paningin nila kung ano ang ibig sabihin ng pagdidisenyo ng marunong, upang magdisenyo ng inclusively, upang magdisenyo ng sistematikong.

Maglagay ng simple, ang mga tool ng disenyo ay nagpapahintulot sa amin na gawin ang anuman ang nais namin. Sa ilang sukat, ang antas ng walang hanggan na pagkamalikhain ay kapaki-pakinabang, lalo na sa mga phase ng ideolohiya. Bilang mga taga-disenyo ng UI bagaman, ang karamihan ng aming daloy ng trabaho ay hindi tumawag para sa maraming pagkamalikhain. Sa halip, ang aming daloy ng trabaho ay nanawagan ng muling paggamit, pag-uulit, pamilyar at pamantayan; mga pangangailangan na ang aming mga tool ay hindi gaanong gana upang masiyahan.

Ang walang limitasyong kalayaan na ito ay nasa logro sa katotohanan ng pag-unlad ng web. Dahil ang mga developer ay nagtatrabaho sa aktwal na produkto, dapat silang gumana sa parehong code. Ang mga nag-develop ay hindi maaaring magdagdag ng mga hiwalay na laki ng font o mga random na halaga ng kulay sa codebase. Una, ang isang linter (isang babala na mensahe ng babala tungkol sa hindi maayos na nakasulat na code) ay malamang na magsisigaw agad. Kung hindi, kung gayon ang kanilang makintab na pagkakayari ay maaaring mahuli sa pagsusuri ng code. Kung sa paanuman ito pinamamahalaang upang madulas sa mga bitak, isang kapansin-pansin na epekto ng pagganap ay sa wakas tunog ng alarma.

Ang isa sa mga pinaka-nakakagambalang problema na nakikita ko sa mga koponan ng produkto ay ang pagdiskonekta sa pagitan ng mga koponan ng disenyo at pag-unlad. Ang mga nag-develop ay nagtatrabaho nang may mahigpit na mga gabay at hadlang sa loob ng maraming taon. Maliban kung ang aming mga tool sa disenyo ay nagpatibay ng parehong mga hadlang, ang puwang ay hindi kailanman makitid.

Dapat tayong magdidisenyo ng live data

Ang live na data ay isinama sa maraming lawak ng maraming mga tool, na mahusay na makita. Ang Adobe XD ay may ilang mga talagang malinis na tampok para sa pagbuo ng pekeng data na kahawig ng mga tipikal na live na data. Nagbibigay din ang Invision Craft ng ilang mga cool na tampok na data ng live para sa Sketch.

Hindi dapat tumigil ang live na data sa teksto, bagaman. Ang iba pang mga elemento tulad ng mga imahe at video ay maaaring magkaroon ng isang malaking epekto sa karanasan ng gumagamit sa pamamagitan ng makabuluhang pagtaas ng mga oras ng pag-load. Kung nagtatrabaho ka sa web, pinapayagan ka ng mga tool ng browser dev na i-throttle ang koneksyon upang maging katulad ng iba't ibang mga bilis ng internet. Pagkatapos, maaari mong makita ang unang kamay kung paano ang isang bagong piraso ng nilalaman ay maaaring makaapekto sa karanasan ng gumagamit.

Nararapat ba sa amin ng mga kasangkapan sa disenyo ang aming mga luho?

Sa isang salita: hindi.

Ang malapit na makukuha namin sa pagdidisenyo ng aktwal na produkto, mas kapaki-pakinabang at magiging epekto sa aming gawain sa disenyo.

Bukas ang web. Ang aming mga tool ay dapat ding.

Ang isa sa mga tunay na magagandang bagay tungkol sa web ay ang bukas nitong kakayahang magamit. Ang isang website ay maaaring matingnan sa anumang web browser sa halos anumang aparato.

Paano ito ihahambing sa mga tool sa disenyo? Buweno, ilang araw na ang nakalilipas, tinanong ako ng aking kapatid na si David para sa isang pagsusuri sa disenyo ng isang app na itinatayo niya. Nagpadala siya sa akin ng isang Sketch file. Nang buksan ko ito, nangyari ito ...

Karamihan sa mga tool sa disenyo ay may mga halamanan na hardin. Kung ang isang kasamahan ay nagtatrabaho sa Photoshop, ang isa pang kasamahan ay hindi maaaring buksan ang proyekto sa Sketch. Hindi sapat na magkaroon ng iyong buong koponan gamit ang parehong tool - dapat din silang gumamit ng parehong bersyon ng tool na iyon.

Marvel at Figma ay gumawa ng isang mahusay na trabaho dito, nag-aalok ng mga libreng plano at makabagong mga tampok sa pakikipagtulungan.

Kaya, ano ang kinabukasan ng mga tool sa disenyo?

Ang Innovation sa tooling ng disenyo ay lubos na mahalaga at marami pa rito kamakailan. Sa mga tool sa disenyo ng Airbnb, si Jon Gold at Benjamin Wilkins ay nagtatrabaho sa React-Sketchapp na tumatagal ng mga bahagi ng React at isinalin ang mga ito sa loob ng Sketch. Sina Jon at Ben ay nagtatrabaho din sa isang bagong pag-iisip ng pamumulaklak ng bagong kasangkapan na tumatagal ng mga sketch ng napkin at sa paanuman ay lumiliko ito sa mga sangkap ng React.

Sina Adam Morse, Brent Jackson at John Otander ay nagtatrabaho sa isang suite ng mga tool sa Compositor na karaniwang lutasin ang lahat ng mga problema sa artikulong ito at marahil sa mundo.

Nagtatrabaho ako sa Modulz, isang bagong tool ng disenyo at open-source na sistema ng disenyo na naglalayon din upang malutas ang mga problema na nabanggit ko sa artikulong ito. Kung interesado ka, sumunod sa Twitter para sa mga update.

Habang mahalaga ang pagbabago sa tooling, ang tunay na hamon ay edukasyon. Ang komunidad ng disenyo ay hindi handa na para sa isang sistematikong tool na disenyo. Maraming mga taga-disenyo ang walang interes sa mga sistema ng pagbuo. Para sa ilan, ang JPG ay ang layunin ng pagtatapos - gusto ng Dribbble.

Kailangan nating paanahin ang isang kultura ng pananagutan. Ang mga nag-develop ay nagkaroon ng isang kultura ng pananagutan sa maraming taon. Mayroon silang mga tool upang mapanatili ang tseke ng kanilang code. Kung paulit-ulit na lumihis ang isang developer mula sa kanilang mahigpit na mga alituntunin ng code, maaari mong tiyakin na ang isyu ay tatalakayin.

Samantala, ang mga taga-disenyo ay madalas na nag-iimpok ng mga bundok ng mga layer nang kumpletong pagkabagabag na binibigyan ng kaunting pagsasaalang-alang sa pagbibigay ng pangalan, pagpangkat, at pag-order. Sobrang dami sa bawat isa sa kanila. Dahil ang output (imahe ng raster) ay hindi maapektuhan ng input (mga layer ng vector), walang tunay na pasanin na inilagay sa mga designer na maiayos. Ang mga taga-disenyo ay madalas na humingi ng kakulangan sa samahan na ito sa pamamagitan ng pag-romantiko ng sining ng disenyo, pagpipinta ang kanilang mga sarili bilang mga salamangkero na kailangang iwanan sa kanilang sariling mga aparato upang maisagawa.

Dapat din nating bigyan ng inspirasyon ang isang kultura ng pagsasama. Dapat nating aktibong mapanghihina ang loob ng mga pag-iwas tulad ng mga ultra light na kulay ng teksto na mahirap basahin ang teksto para sa maraming mga tao, o sobrang mga de-kalidad na mga typefaces na nagpapabagal sa pag-load ng mga webpage, o walang mga pattern na UI na nagpapahirap sa mga bagay na maunawaan para sa mga bulag na kulay. Sa kasalukuyan, ang ganitong uri ng pag-aalsa ay pinalakpakan sa komunidad ng disenyo. Kung malugod naming tanggapin ang isang matalinong tool ng disenyo, dapat nating ibalik ang kulturang ito.

Kung ang isang sistematikong tool na disenyo ay upang manalo sa aming mga puso, dapat itong turuan muna.