Hönnunarverkfæri eru að renna upp. Svona getum við lagað þau.

Sjaldan líður dagur þar sem ég eyði ekki amk tíma í að hugsa um hönnunartæki. Fyrir nokkrum árum smíðaði ég hönnunarverkfæri sem Marvel keypti. Þetta var fyrir rúmum tveimur árum en síðan þá hefur landslagið ekki breyst mikið og ástríða mín fyrir því að bæta það hefur ekki breyst.

Nýlega tísti ég um hönnuð verkfæri - það sem vitað hefur verið að gerist af og til.

Ég var ekki sá eini sem sagði hug minn um daginn, aðrir skáluðu líka inn.

28. júlí 2017 var ekki góður dagur fyrir hönnunartæki.

Það er mikið af mikilli innsýn grafinn í þessum Twitter þræði en í langan tíma hef ég viljað gefa mér tíma til að kafa djúpt í það sem ég held að sé svo í grundvallaratriðum brotinn varðandi núverandi hönnunartæki líkan, eins og heilbrigður sem vísbending um þá stefnu sem ég held að við ættum að stefna.

Við erum öll bara að teikna myndir. Það er geðveikt.

Næstum öll vinsæl hönnunarverkfæri flytja út til mynda. Þetta er erfitt af ýmsum ástæðum:

  1. Þú getur ekki haft samskipti við mynd. Frumgerðartæki gera okkur kleift að bæta skjábreytingum og einföldum samskiptum við myndir. Hins vegar, þar sem vörur okkar halda áfram að krefjast þróaðri skjábreytinga og örsamspils, geta myndir einfaldlega ekki haldið í við.
  2. Myndir eru ekki fljótandi. Að miðla móttækilegum ákvörðunum um hönnun í gegnum myndir er venjulega erfitt verkefni.
  3. Myndir eru ekki ríkar. Til að geta á áhrifaríkan hátt miðlað hinum ýmsu ríkjum fyrir HÍ eru oft margar myndir nauðsynlegar.
  4. Bitamyndamyndir eru háðar upplausn. Með tilkomu sjónhimnu tækja geta myndir stundum skilað sér illa.
  5. Myndirnar hafa tilhneigingu til að vera þungar og eru oft fyrirferðarmiklar að geyma, stjórna eða deila.

Svo lengi sem hönnunarverkfæri halda áfram að flytja út myndir munu þau aldrei geta framleitt nákvæmar framsetningar á vörum okkar. Þessi skortur á nákvæmni hindrar samskipti milli hönnuða og þróunaraðila. Svo lengi sem hönnuðir halda áfram að nota sárt ófullnægjandi miðil til að koma verkum sínum á framfæri, þá verður sú vinna alltaf opin fyrir túlkun á rangan hátt.

Þetta er mjög mikilvægur punktur vegna þess að í kjarna þeirra umbreytir næstum öll hönnunarverkfæri vektorform í myndir. Photoshop, Illustrator, Marvel, Adobe XD, Sketch og Figma eru öll eins í þessu sambandi. Samt geta myndir aðeins miðlað hönnunaráætlun að hluta. Þar sem vörur okkar halda áfram að tileinka sér og styðja flókin samskipti, raddinntak, vídeóinntak, aukinn veruleika, sýndarveruleika, hitastig næmi o.s.frv., Mun gildi þessara verkfæra minnka hratt. Myndbyggð hönnun er blindgata.

Hönnunarverkfæri okkar ættu að vinna að raunverulegri vöru, ekki mynd af henni.

Vörur okkar eru gagnvirkar. Verkfæri okkar eru kyrrstæð.

Ég snerti þetta í fyrra liði mínu en það er ofarlega mikilvægt svo ég reiknaði með að ég myndi útfæra svolítið.

Hugsaðu um magn einfaldra samskipta sem eru algengar í næstum öllum vörum okkar en samt er ekki hægt að koma á framfæri með hönnunarverkfærum okkar. Hérna er stuttur listi efst á höfðinu á mér:

  • Sveima á hnapp
  • Með áherslu á inntak
  • Athuga gátreit
  • Innihald flipa
  • Flettu svæðum
  • Taflavísitala fyrir einbeitt ríki
  • Flýtilyklar

Jú, sumir af þessum aðgerðum er hægt að líkja eftir einhverjum hakkverkfræði en maður verður að velta því fyrir sér, hvað í ósköpunum er málið? Af hverju geta hönnuðir ekki bara hannað raunverulega vöru ?! Á endanum eru allir spottar einnota, en samt eyða hönnuðir mánuðum í að fínstilla þá. Sá tími væri miklu betri varið í að laga raunverulega vöru.

Ég mun ekki ganga of langt niður á „kanahönnuðum kóða“ kanínugatið en ég er ekki að leggja til að við öll skrifum kóða. Ég er bara að segja að það er engin góð ástæða fyrir því að hönnunarverkfæri okkar geta ekki stutt beina meðferð á lifandi vörum okkar.

Framer vinnur betra starf en flestir í þessari deild og styður langt gengin og ítarleg samskipti. Restin af pakkningunni er mjög langt á eftir.

Verkfæri okkar ættu að styðja við skipulag hugmyndafræði vefsins

Þar til fyrir um það bil ári var eina leiðin til að búa til skipulag á vefnum að nota skjáinn: borð og lóðrétt samræma CSS eiginleika. Nú erum við með Flexbox og brátt munum við hafa CSS rist. Þessar þrjár útlitsvélar virka nokkuð svipaðar og nota flæði DOM. Næstum allar vefsíður eru byggðar með einu af þessum þremur skipulagskerfum.

Svo það er skynsamlegt að hönnunarverkfærið okkar styður sama skipulagslíkan. Ekki satt?

Jæja, næstum öll hönnuð verkfæri hunsa þessi skipulagskerfi en velja þess í stað að staðsetja hvert lag algerlega innan teikniborðsins. Þetta opnar hyldýpi á milli þess hvernig vefurinn virkar og hvernig hönnuð verkfæri okkar virka og kynnir mörg mál:

  • Móttækileg hönnun verður mjög erfið vegna þess að hvert lag verður að endurraða handvirkt fyrir hvert brotpunkt. Að öðrum kosti er hægt að setja upp skipulagskerfi sem byggir á þvingun en það bætir flækjustig, eykur námsferil og kemur að lokum í veg fyrir að verktaki geti flutt skipulag beint á vefinn.
  • Þar sem hvert lag er utan flæðis skjalsins verður notkun á efni erfiður. Til dæmis, ef þú vilt bæta hlut við lista, verðurðu að færa aðra hluti á listanum handvirkt. Auðvitað er hægt að kynna endurteknar aðgerðir og aðra ímyndaða eiginleika til að létta sársaukann en aftur, þetta kynnir aukið flækjustig og flækir eitthvað sem DOM gefur okkur ókeypis.
  • Algjör staðsetning leiðir náttúrulega til fastra pixla hnita og víddar. Þetta ræktar ósveigjanleika og er aftur á móti mikil frávik frá því hvernig vefurinn virkar. Vefurinn er byggður á vökvaeiningum eins og em, rem, vh, vw og%. Tólin okkar ættu að styðja þessar einingar sjálfgefið.

Hönnunartæki ættu ekki að þurfa að líkjast eða endurspegla vefinn og blæbrigði hans - þau ættu bara að vera Vefurinn.

Einlyft verkfæri er ekki leiðin

Góð hönnun gerist í áföngum. Vel skipulagt hönnunarkerfi hefur nokkur mismunandi lög:

  1. Stílpallettur Safn af litum, skuggum, bili, geisla radíus, leturstærðum, leturstærðum, hreyfimyndum og öðrum stílum sem mynda persónuupplýsingar þínar. Sem stendur styðja flest hönnunarverkfæri aðeins litatöflur. Þar til þeir styðja aðra stíleiginleika verður það mjög erfiða að hanna kerfisbundið.
  2. Eignir Þetta felur í sér þætti eins og tákn, myndskreytingar og myndir. Það eru nokkur stórbrotin mynd ritstjórar þarna úti og vektor tól Figma er frábært en þegar kemur að SVG stuðningi, láta verkfæri okkar vera mikið eftirsóknarvert.
  3. Íhlutasafn Íhlutur er safn stíla og eigna sem gerir gögn að einum þætti í ýmsum afbrigðum. Sem dæmi má nefna hnappa, inntak, merkin o.s.frv. Eins og ég gat um, Figma og Sketch hafa nýlega dregið þetta ferli frá aðal teikniflæðinu - því miður að þeir eru bara myndir af íhlutum en ekki raunverulegum íhlutum.
  4. Einingar Eining / samsetning er safn af íhlutum sem skila gögnum í umlukt stykki af HÍ í ýmsum ríkjum. Dæmi gætu verið hausstikur, flipavalmyndir, innskráningarform, töflur o.fl. Þar sem einingar eru bara flóknir íhlutir, þá giska ég á að Figma og Sketch ráði við þessa líka. Þó að það gæti verið einhver kostur að skilja þá tvo.
  5. Skjár Skjár er safn eininga, íhluta og gagna til að mynda fullkomið HÍ sem notandinn getur haft samskipti við.

Flest hönnunarverkfæri bjóða upp á eiginleika sem styðja hvert þessara hönnunarstiga að einhverju leyti að minnsta kosti. Vandamálið er að öll stigin eru saman. Næstum öll hönnuð verkfæri bjóða aðeins upp á einn hátt - teiknistillingu. Þú býrð til sett af skjáborðum og byrjar bara að teikna myndir. Aðeins mjög nýlega hafa verkfæri eins og Sketch og Figma ágrip af íhlutum / táknum frá aðal teiknistillingu - sem er skrýtið vegna þess að í framþróuninni hafa þættir verið ágripaðir í mörg ár.

Þegar ég hanna stílpallettu þarf ég ekki að sjá töflur eða vektorverkfæri. Ég vil sjá tæki til að velja samfellda liti. Mig langar í forstillingar fyrir hluti eins og 8dp bilstærð eða úrval tegundategunda.

Að hanna tákn þarf allt annan hugsunarhátt til að hanna notendaflæði. Einfaldur SVG ritstjóri sem gerði mér kleift að teikna innfæddan SVG rétthyrninga, hringi, línur og slóða og flutti síðan út bjartsýni SVG kóða væri tilvalið.

Þegar ég hannaði íhlut ætti ég ekki lengur að hugsa um einstaka stíl - ég ætti einfaldlega að velja stíl úr fyrirfram skilgreindu stílpallettunni minni. Ég get ekki bara byrjað að föndra stíl fyrir einn þátt þar sem það myndi koma fram ósamræmi og þynna árangur hönnunarkerfisins míns. Þegar stílpallettur er til staðar ætti hún aðeins að vera hægt að breyta við upprunann.

Á sama hátt ætti ég aðeins að verða fyrir fyrirfram skilgreindu hluti bókasafnsins við samsetningu einingar. Það ætti ekki að vera neinn stíleiginleiki í hliðarstiku. Engin vektorverkfæri. Bara bókasafn með endurnýtanlega íhluti sem ég get dregið og sleppt til að semja einingar.

Sama gildir um að semja skjái. Á þessum tímapunkti erum við bara að nota íhluti og einingar til að byggja upp HÍ. Við erum ekki að hugsa um stíl eða form eða aðrar skapandi viðleitni. Við erum fyrst og fremst að einbeita okkur að því að hanna innihaldið og flæði notenda.

Hvert þessara hönnunarstiga gæti farið fram í aðskildum tækjum að öllu leyti eða bara á mismunandi hátt innan sama tóls. Ég held að það skipti ekki miklu máli. Eitt er þó víst að núverandi hönnuð verkfæri ná ekki einu sinni að viðurkenna ferlið.

Tólin okkar ættu að hvetja til góðrar hönnunar

Hönnuðir hafa þann sjaldgæfa lúxus að geta bætt óendanlega fjölda einstaka stíl við verkefni án nokkurra áberana. Þarftu aðeins stærri leturstærð? Bara högg það upp. Ekkert biggie. Þarftu aðeins bjartari lit? Klip bara það. Það er svalt. Þú gætir jafnvel búið til mörg teiknimyndatöflur í sama verkefninu, hvert um sig notað svolítið mismunandi gildi fyrir svipaða stíl og það myndi líklega ekki taka eftir því.

Hönnunartólið þitt mun aldrei segja þér að þú getir ekki gert eitthvað. Það mun aldrei draga þig upp fyrir að nota lit frá vörumerkinu. Það mun aldrei koma í veg fyrir að þú notir hvítt bil sem ekki tilheyrir bilinu þínu. Það mun aldrei vara þig við að 20% þjóðarinnar geti bókstaflega ekki séð þann ljósgráa texta sem þú hefur bara hannað.

Og af hverju ekki…? Vegna þess að hönnunarverkfæri er ekki sama.

Hönnuð verkfæri eru svo áberandi háð með framtíðarsýn fyrir ótakmarkaðan sköpunargáfu að þau hafa misst sjónar á því hvað það þýðir að hanna skynsamlega, hanna án aðgreiningar, hanna markvisst.

Einfaldlega sett, hönnuð verkfæri leyfa okkur að gera hvað í fjandanum sem við viljum. Að vissu marki er þetta stig takmarkalausrar sköpunargagns gagnlegt, sérstaklega í hugmyndasviðunum. Sem hönnuðir HÍ, þá krefst meirihluti vinnuferils okkar ekki mikillar sköpunar. Frekar, verkflæði okkar kallar á endurnot, endurtekningu, þekkingu og stöðlun; þarfir sem verkfæri okkar gera lítið til að fullnægja.

Þetta ótakmarkaða frelsi er á skjön við raunveruleika þróun vefsins. Þar sem verktaki er að vinna með raunverulega vöru verða þeir allir að vinna með sama kóða. Hönnuðir geta ekki einfaldlega bætt einangruðum leturstærðum eða handahófi litargildum við kóðabasis. Í fyrsta lagi myndi sjórinn (viðvörunarskilaboð sem varar við illa skrifuðum kóða) byrja að öskra strax. Ef ekki, þá væri líklega slæmt handverk þeirra gripið við endurskoðun kóðans. Ef það tekst einhvern veginn að renna í gegnum sprungurnar myndu merkjanleg áhrif á frammistöðu að lokum hljóma viðvörunina.

Eitt mest truflandi vandamál sem ég sé hjá vöruhópum er að aftengja milli hönnunar- og þróunarteymis. Hönnuðir hafa unnið með strangar leiðbeiningar og skorður í mörg ár. Ef ekki hönnuð verkfæri okkar samþykkja þessar sömu skorður mun bilið aldrei minnka.

Við ættum að hanna með lifandi gögnum

Lifandi gögn hafa verið tekin upp að einhverju leyti af mörgum tækjum, sem er frábært að sjá. Adobe XD hefur nokkra virkilega sniðuga eiginleika til að búa til falsgögn sem líkjast dæmigerðum lifandi gögnum. Invision Craft veitir einnig nokkrar flottar lifandi gögn aðgerðir fyrir Sketch.

Lifandi gögn ættu þó ekki að hætta með texta. Aðrir þættir eins og myndir og myndbönd geta haft mikil áhrif á notendaupplifunina með því að auka hleðslutíma verulega. Ef þú ert að vinna á vefnum, leyfa vafra dev verkfæri þér að gera saman tenginguna til að líkjast ýmsum internethraða. Síðan geturðu séð fyrstu hendi hvernig nýtt efni getur haft áhrif á notendaupplifunina.

Hafa hönnuð verkfæri okkar efni á þessum lúxus?

Í orði: nei.

Því nær sem við komum að því að hanna raunverulega vöru, þeim mun gagnlegri og áhrifameiri getur hönnun okkar verið.

Vefurinn er opinn. Verkfæri okkar ættu líka að vera.

Einn af sannarlega fallegum hlutum á vefnum er opinn aðgengi hans. Hægt er að skoða vefsíðu í hvaða vafra sem er á næstum því hvaða tæki sem er.

Hvernig ber það saman við hönnunarverkfæri? Jæja, fyrir nokkrum dögum bað David bróðir minn mig um hönnunarskoðun á appi sem hann er að smíða. Hann sendi mér skissuskrá. Þegar ég opnaði það gerðist þetta…

Flest hönnunarverkfæri eru veggir í görðum. Ef einn samstarfsmaður er að vinna í Photoshop getur annar samstarfsmaður ekki opnað verkefnið í Sketch. Það er ekki einu sinni nóg að láta allt liðið þitt nota sama tól - þeir verða líka að nota sömu útgáfu af því tóli.

Marvel og Figma vinna hér gott starf og bjóða upp á ókeypis áætlanir og nýstárlegar samvinnuaðgerðir.

Svo, hvað er framtíð hönnunarverkfæranna?

Nýsköpun í verkfærum við hönnun er afar dýrmæt og það hefur verið mikið af því undanfarið. Í Jon Jon og Benjamin Wilkins hönnunarverkfærum hafa verið að vinna að React-Sketchapp sem tekur React íhluti og gerir þau að innan Sketch. Þeir Jon og Ben hafa einnig verið að vinna í heilsteypandi nýju tæki sem tekur servíettur og gerir einhvern veginn þá í React íhluti.

Adam Morse, Brent Jackson og John Otander eru að vinna í föruneyti tækja hjá Compositor sem leysa í grundvallaratriðum öll vandamálin í þessari grein og kannski heiminum.

Ég er að vinna að Modulz, nýju hönnunarverkfæri og opnum hugbúnaðarkerfi sem miðar einnig að því að leysa vandamálin sem ég nefndi í þessari grein. Ef þú hefur áhuga, fylgdu með á Twitter til að fá uppfærslur.

Þótt nýsköpun í verkfærum sé mikilvæg er hin raunverulega áskorun menntun. Hönnunarsamfélagið er einfaldlega ekki tilbúið fyrir kerfisbundið hönnunarverkfæri. Margir hönnuðir hafa lítinn sem engan áhuga á að byggja upp kerfi. Fyrir suma er JPG lokamarkmiðið - Dribbble líkar.

Við verðum einhvern veginn að hvetja til menningar um ábyrgð. Hönnuðir hafa haft menningu ábyrgðar í mörg ár. Þeir hafa tæki til að hafa kóðann í skefjum. Ef verktaki víkur hvað eftir annað frá ströngum viðmiðunarreglum um kóða er hægt að vera viss um að tekið verði á málinu.

Á sama tíma safna hönnuðir saman fjöllum af lögum í algerum ólestri með litlu tilliti til lagsheiti, flokkunar og pöntunar. Það er mjög mikið hvert fyrir sig. Þar sem framleiðsla (raster mynd) hefur ekki áhrif á inntakið (vektorlag) er engin raunveruleg byrði á hönnuðum að skipuleggja. Hönnuðir afsaka oft þennan skort á skipulagi með því að rómantíkra hönnunina og mála sig sem töframenn sem þurfa að vera í eigin tæki til að koma fram.

Við verðum líka að hvetja til menningar án aðgreiningar. Við ættum að taka virkan afbrigði af malpractice eins og mjög léttum texta litum sem gerir texta erfitt fyrir að lesa fyrir marga, eða frábær hágæða leturgerð sem gerir vefsíðum hægt að hlaða, eða Mynstralausir HÍ þættir sem gera hlutina erfitt að skilja fyrir litblinda fólk. Eins og er er þessari tegund af illfærum klappað meðal hönnunarsamfélagsins. Ef við erum að fagna snjallt hönnunarverkfæri verðum við að snúa þessari menningu við.

Ef kerfisbundið hönnunarverkfæri er að vinna hjörtu okkar verður það fyrst að fræða.