Suunnittelutyökalut ovat loppumassa. Näin voimme korjata ne.

Harvoin kuluu päivä, jolloin en viettä ainakin jonkin aikaa suunnittelutyökaluille. Muutama vuosi sitten rakensin suunnittelutyökalun, jonka Marvel osti. Se oli yli kaksi vuotta sitten, mutta siitä lähtien maisema ei ole muuttunut paljon, eikä minulla ole intohimoa sen parantamiseen.

Äskettäin twiitin suunnittelutyökaluista - asiasta, jonka tiedetään tapahtuvan ajoittain.

En ollut ainoa, joka puhui mieleni sinä päivänä, muutkin huusistivat.

28. heinäkuuta 2017 ei ollut hyvä päivä suunnittelutyökaluille.

Näihin Twitter-säikeisiin on haudattu paljon hienoa tietoa, mutta jo pitkään olen halunnut ottaa aikaa syventääksesi juuri sitä, mikä on mielestäni niin perusteellisesti rikki myös nykyisestä suunnittelutyökalumallista Vihje suuntaan, jonka mielestäni meidän pitäisi suunnata.

Me kaikki piirrämme vain kuvia. Se on hullua.

Lähes kaikki suositut suunnittelutyökalut vievät kuvia. Tämä on ongelmallista monista syistä:

  1. Et voi olla vuorovaikutuksessa kuvan kanssa. Prototyyppityökalut antavat meille mahdollisuuden lisätä näyttösiirtymät ja yksinkertaiset vuorovaikutukset kuviin. Kuitenkin, koska tuotteemme vaativat edelleen edistyneempiä näyttösiirtymiä ja mikrovuorovaikutuksia, kuvat eivät yksinkertaisesti voi pysyä ajan tasalla.
  2. Kuvat eivät ole juoksevia. Vastuullisten suunnittelupäätösten kommunikointi kuvien avulla on yleensä vaikea tehtävä.
  3. Kuvat eivät ole tilallisia. Jotta käyttöliittymän eri tiloja voidaan kommunikoida tehokkaasti, usein tarvitaan useita kuvia.
  4. Bittikarttakuvat ovat erottelukykyisiä. Verkkokalvolaitteiden tulon myötä kuvat voivat joskus tehdä huonosti.
  5. Kuvatiedostot ovat yleensä raskaita ja usein hankalia tallentaa, hallita tai jakaa.

Niin kauan kuin suunnittelutyökalut jatkavat kuvien viemistä, ne eivät koskaan pysty tuottamaan tarkkoja esityksiä tuotteistamme. Tämä tarkkuuden puute estää suunnittelijoiden ja kehittäjien välistä viestintää. Niin kauan kuin suunnittelijat jatkavat surkeasti riittämättömän välineen käyttämistä kommunikoidakseen työnsä, työ on aina avoin väärinkäsityksille.

Tämä on erittäin merkittävä asia, koska niiden ytimessä melkein kaikki suunnittelutyökalut muuntavat vektorimuodot kuviksi. Photoshop, Illustrator, Marvel, Adobe XD, Sketch ja Figma ovat kaikki tässä suhteessa samat. Kuitenkin kuvat voivat kommunikoida suunnittelun tarkoituksen vain osittain. Kun tuotteemme jatkavat monimutkaisten vuorovaikutusten, äänitulon, videotulon, lisätyn todellisuuden, virtuaalitodellisuuden, lämpötilaherkkyyden jne. Omaksumista ja tukemista, näiden työkalujen arvo vähenee nopeasti. Kuvapohjainen suunnittelu on umpikuja.

Suunnittelutyökalujemme pitäisi manipuloida todellista tuotetta, ei kuvaa siitä.

Tuotteemme ovat vuorovaikutteisia. Työkalumme ovat staattisia.

Kosketin tätä edellisessä kohdin, mutta se on erittäin kriittinen, joten arvelin, että kehittelin vähän.

Ajattele paljon yksinkertaisia ​​vuorovaikutuksia, jotka ovat tavallisia melkein kaikissa tuotteissamme, mutta joita ei voida kommunikoida suunnittelutyökalujemme kautta. Tässä on lyhyt luettelo pääni yläosasta:

  • Vie hiiri napin päälle
  • Tulon keskittäminen
  • Valintaruudun valinta
  • Välilehden sisältö
  • Selaa alueita
  • Välilehti-hakemisto keskittyneille tiloille
  • Pikanäppäimet

Tietysti joitain näistä ominaisuuksista voidaan jäljitellä jollakin hacky-tekniikalla, mutta on ihmettelevä, mikä on maan päällä? Miksi suunnittelijat eivät voi vain suunnitella todellista tuotetta?! Viime kädessä kaikki mallit ovat kertakäyttöisiä, mutta suunnittelijat viettävät kuukausia säätämällä ne täydellisyyteen. Tuo aika olisi paljon parempi käyttää mukauttamalla todellista tuotetta.

En mene liian pitkälle kaniininreiän, jonka pitäisi olla “suunnittelijat”, mutta en ehdota, että me kaikki kirjoitamme koodia. Sanon vain, ettei ole mitään syytä, miksi suunnittelutyökalumme eivät pysty tukemaan elävien tuotteiden suoraa manipulointia.

Framer tekee paremman työn kuin suurin osa tällä osastolla, tukee edistynyttä ja yksityiskohtaista vuorovaikutusta. Loput pakkauksesta ovat hyvin kaukana.

Työkalujemme pitäisi tukea verkon asetteluparadigmaa

Aina noin vuosi sitten, ainoa tapa rakentaa asetteluja verkossa oli käyttää näyttöä: taulukko ja pystysuuntainen CSS-ominaisuudet. Nyt meillä on Flexbox ja pian meillä on CSS-ruudukko. Nämä kolme asetinmoottoria toimivat melko samalla tavalla, hyödyntäen DOM-virtausta. Lähes kaikki verkkosivut on rakennettu käyttämällä yhtä näistä kolmesta asettelujärjestelmästä.

Joten on järkevää, että suunnittelutyökalumme tukevat samaa ulkoasumallia. Oikea?

No, melkein kaikki suunnittelutyökalut jättävät huomioimatta nämä asettelujärjestelmät, sen sijaan, että ne sijoittaisivat jokaisen kerroksen ehdottomasti sen taulun päälle. Tämä avaa kuilun webin toiminnan ja suunnittelutyökalujemme välillä, esittäen monia asioita:

  • Reagoivasta suunnittelusta tulee erittäin vaikeaa, koska jokainen kerros on järjestettävä uudelleen manuaalisesti jokaiselle väliaikalle. Vaihtoehtoisesti voidaan ottaa käyttöön rajoitusperusteinen asettelujärjestelmä, mutta joka lisää monimutkaisuutta, vahvistaa oppimiskäyrät ja lopulta estää kehittäjiä siirtämästä asettelua suoraan verkkoon.
  • Koska jokainen kerros on asiakirjan virtauksen ulkopuolella, sisällön käsittelystä tulee hankalaa. Jos esimerkiksi haluat lisätä kohteen luetteloon, sinun on siirrettävä manuaalisesti muut kyseisen luettelon kohteet. Tietysti toistotoiminnot ja muut hienot ominaisuudet voidaan ottaa käyttöön kivun lievittämiseksi, mutta tämä tuo jälleen monimutkaisuuden ja monimutkaistaa jotain, jonka DOM antaa meille ilmaiseksi.
  • Absoluuttinen paikannus johtaa luonnollisesti kiinteisiin pikselikoordinaatteihin ja mittoihin. Tämä lisää joustamattomuutta ja on jälleen valtava poikkeama verkon toiminnasta. Raina on rakennettu nesteyksiköille, kuten em, rem, vh, vw ja%. Työkalujemme pitäisi tukea näitä yksiköitä oletuksena.

Suunnittelutyökalujen ei pitäisi tarvita muistuttaa tai heijastaa verkkoa ja sen vivahteita - niiden pitäisi olla vain web.

Monoliittinen työkalu ei ole oikea tapa

Hyvä suunnittelu tapahtuu vaiheittain. Hyvin jäsennellyllä suunnittelujärjestelmällä on muutama erillinen kerros:

  1. Tyylipaletti Kokoelma värejä, varjoja, välilyöntejä, reunussäteitä, kirjasintyyppejä, fonttikokoja, animaatioita ja muita tyylejä, jotka muodostavat brändisi identiteetin. Tällä hetkellä useimmat suunnittelutyökalut tukevat vain väripaletteja. Siihen asti, kun he tukevat muita tyyliominaisuuksia, on erittäin työlästä suunnitella systemaattisesti.
  2. Omaisuuserät Tähän sisältyy elementtejä, kuten kuvakkeita, piirroksia ja kuvia. Siellä on joitain ilmiömäisiä kuvankäsittelyohjelmia ja Figman vektorityökalu on erinomainen, mutta kun kyse on SVG-tuesta, suunnittelutyökalumme jättävät paljon toivomisen varaa.
  3. Komponenttikirjasto Komponentti on kokoelma tyylejä ja omaisuuksia, jotka tuottavat tietoja yhdelle elementille useissa muunnelmissa. Esimerkkejä ovat painikkeet, sisääntulot, merkit jne. Kuten mainitsin, Figma ja Sketch ovat viime aikoina tiivistäneet tämän prosessin pois pääpiirrosvirtauksesta - on sääli, että ne ovat vain komponentteja koskevia kuvia, eivät todellisia komponentteja.
  4. Moduulit Moduuli / koostumus on kokoelma komponentteja, jotka toimittavat tietoja kapseloidulle UI-kappaleelle useissa tiloissa. Esimerkkejä voivat olla otsikkopalkit, välilehtivalikot, kirjautumislomakkeet, taulukot jne. Koska moduulit ovat vain monimutkaisia ​​komponentteja, luulen, että myös Figma ja Sketch pystyvät käsittelemään näitä. Vaikka näiden kahden erottamisessa voi olla joitain ansioita.
  5. Näytöt Näyttö on kokoelma moduuleja, komponentteja ja tietoja muodostamaan täydellinen käyttöliittymä, jonka kanssa käyttäjä voi olla vuorovaikutuksessa.

Useimmat suunnittelutyökalut tarjoavat ominaisuuksia, jotka tukevat ainakin jossain määrin näitä suunnitteluvaiheita. Ongelmana on, että kaikki vaiheet ovat keskenään. Lähes kaikki suunnittelutyökalut tarjoavat vain yhden moodin - piirtotilan. Voit luoda sarjan piirrostauluja ja alkaa vain piirtää kuvia. Vasta aivan viime aikoina on Sketch- ja Figma-työkaluja, kuten abstraktoituja komponentteja / symboleita, poistettu pääpiirustusmoodista - mikä on outoa, koska käyttöliittymäkehityksessä komponentteja on abstraktoitu monien vuosien ajan.

Suunnitellessani tyylipalettia, minun ei tarvitse nähdä piirrostauluja tai vektori-työkaluja. Haluan nähdä työkaluja harmonisten värien valitsemiseksi. Haluan esiasetuksia esimerkiksi 8dp väliasteikolle tai valikoimalle tyyppiasteikkoja.

Kuvakkeen suunnittelu vaatii täysin erilaisen ajattelutavan kuin käyttäjän virtauksen suunnittelu. Yksinkertainen SVG-editori, jonka avulla sain piirtää natiivi SVG-suorakulmioita, ympyröitä, viivoja ja polkuja, sitten viedä optimoitu SVG-koodi olisi ihanteellinen.

Komponenttia suunnitellessani minun ei pitäisi enää miettiä yksittäisiä tyylejä - minun pitäisi vain valita tyylit ennalta määritellystä tyylivalikoimassani. En voi vain aloittaa tyylien säätämistä yhdelle komponentille, koska se johtaisi epäjohdonmukaisuuteen ja heikentäisi suunnittelujärjestelmäni tehokkuutta. Kun tyylipaletti on paikallaan, sen tulisi olla muokattavissa vain lähteessä.

Samoin moduulin kirjoittamisen aikana minun tulisi olla alttiina vain ennalta määritetylle komponenttikirjastolle. Sivupalkissa ei pitäisi olla tyyliominaisuuksia. Ei vektorityökaluja. Vain kirjasto uudelleenkäytettävistä komponenteista, joita voin vetää ja pudottaa moduulien luomiseen.

Sama pätee näytöiden säveltämiseen. Tässä vaiheessa käytämme vain komponentteja ja moduuleja käyttöliittymän luomiseen. Emme ajattele tyylejä tai muotoja tai muita luovia pyrkimyksiä. Keskitymme ensisijaisesti sisällön ja käyttäjävirtojen suunnitteluun.

Jokainen näistä suunnitteluvaiheista voisi tapahtua erillisillä työkaluilla kokonaan tai vain eri tavoilla samassa työkalussa. En usko, että sillä on paljon merkitystä. Yksi asia on varma, vaikka suurin osa nykyisistä suunnittelutyökaluista ei edes tunnista prosessia.

Työkalumme tulisi edistää hyvää suunnittelua

Suunnittelijoilla on harvinaista ylellisyyttä siitä, että he voivat lisätä ääretön määrän ainutlaatuisia tyylejä projektiin ilman merkittäviä vaikutuksia. Tarvitsetko hieman isomman kirjasinkoko? Koppaa se vain. Mitä pienistä. Tarvitsetko hieman kirkkaamman värin? Näppää vain. Siistiä. Voit jopa luoda useita taulukoita samassa projektissa, kukin käyttämällä hiukan erilaisia ​​arvoja samanlaisille tyyleille ja se todennäköisesti jää huomaamatta.

Suunnittelutyökalusi ei koskaan kerro sinulle, että et voi tehdä jotain. Se ei koskaan vedä sinua käyttämään tuotemerkin ulkopuolella olevia värejä. Se ei koskaan estä sinua käyttämästä välilyöntiarvoa, joka ei kuulu väliasteikkoosi. Koskaan ei tule varoittamaan sinua siitä, että 20% väestöstä ei kirjaimellisesti pysty näkemään juuri suunnittelemaasi vaaleanharmaata tekstiä.

Ja miksi ei…? Koska suunnittelutyökalut eivät välitä.

Suunnittelutyökalut ovat niin omituisesti rakastuneita rajattoman luovuuden visiosta, että he ovat unohtaneet, mitä tarkoittaa suunnitella järkevästi, suunnitella osallisuutta, suunnitella systemaattisesti.

Yksinkertaisesti sanottuna, suunnittelutyökalujen avulla voimme tehdä mitä haluamme. Tämä rajaton luovuuden taso on jossain määrin hyödyllinen, etenkin ideointivaiheissa. UI-suunnittelijoina kuitenkin suurin osa työnkulustamme ei vaadi paljon luovuutta. Työnkulku vaatii pikemminkin uudelleenkäyttöä, toistamista, perehtymistä ja standardisointia; tarvitsee, että työkalumme tekevät vain vähän tyydyttääkseen.

Tämä rajoittamaton vapaus on ristiriidassa verkkokehityksen todellisuuden kanssa. Koska kehittäjät työskentelevät varsinaisen tuotteen kanssa, heidän kaikkien on toimittava samalla koodilla. Kehittäjät eivät voi yksinkertaisesti lisätä erillisiä kirjasinkokoja tai satunnaisia ​​väriarvoja kooditietokantaan. Ensinnäkin linter (varoitusviesti, joka varoittaa huonosti kirjoitetusta koodista) todennäköisesti alkaa huutaa heti. Jos ei, niin heidän huono käsityötapana todennäköisesti pidätetään kooditarkistuksen aikana. Jos se jotenkin onnistuisi liukumaan halkeamien läpi, huomattava suorituskykyvaikutus lopulta kuulostaisi hälytykseen.

Yksi häiritsevimmistä ongelmista, joita näen tuoteryhmissä, on yhteydenpito suunnittelu- ja kehitysryhmien välillä. Kehittäjät ovat työskennelleet tiukkojen ohjeiden ja rajoitusten kanssa vuosien ajan. Ellei suunnittelutyökalumme hyväksy näitä samoja rajoituksia, aukko ei koskaan kapene.

Meidän pitäisi suunnitella elävien tietojen avulla

Tietyt tiedot on sisällytetty jossain määrin monien työkalujen kanssa, mikä on hienoa nähdä. Adobe XD: llä on todella tyylikkäitä ominaisuuksia väärennettävien tietojen tuottamiseksi, jotka muistuttavat tyypillistä suoraa dataa. Invision Craft tarjoaa myös hienoja live-dataominaisuuksia Sketchille.

Suoran datan ei pitäisi kuitenkaan pysähtyä tekstiin. Muilla elementeillä, kuten kuvilla ja videolla, voi olla valtava vaikutus käyttökokemukseen lisäämällä huomattavasti latausaikoja. Jos työskentelet verkossa, selaimen dev-työkalujen avulla voit kuristaa yhteyden muistuttamaan erilaisia ​​Internet-nopeuksia. Sitten voit nähdä ensikäden, kuinka uusi sisältö voi vaikuttaa käyttökokemukseen.

Tarjoavatko suunnittelutyökalut meille näitä ylellisyyksiä?

Sanalla: ei.

Mitä lähemmäksi pääsemme varsinaisen tuotteen suunnitteluun, sitä hyödyllisempi ja vaikuttavampi suunnittelutyömme voi olla.

Verkko on auki. Myös työkaluidemme pitäisi olla.

Yksi todella kauniista asioista verkossa on sen avoin saatavuus. Verkkosivustoa voidaan katsella missä tahansa selaimessa, melkein missä tahansa laitteessa.

Miten tämä verrattuna suunnittelutyökaluihin? No, muutama päivä sitten, veljeni David pyysi minulta rakennussovelluksen suunnitteluarviointia. Hän lähetti minulle luonnoksen. Kun avasin sen, niin tapahtui…

Suurin osa suunnittelutyökaluista on aidattuja puutarhoja. Jos toinen kollega työskentelee Photoshopissa, toinen kollega ei voi avata kyseistä projektia Sketchissä. Ei riitä, että koko ryhmäsi käyttää samaa työkalua - heidän on myös käytettävä saman työkalun versiota.

Marvel ja Figma tekevät täällä hyvää työtä tarjoamalla ilmaisia ​​suunnitelmia ja innovatiivisia yhteistyöominaisuuksia.

Joten mikä on suunnittelutyökalujen tulevaisuus?

Suunnitteluvälineiden innovaatio on erittäin arvokasta ja sitä on ollut viime aikoina paljon. Airbnb-suunnittelutyökaluissa Jon Gold ja Benjamin Wilkins ovat työskennelleet React-Sketchapp -projektin parissa, joka vie React-komponentit ja tuottaa ne Sketch-sisälle. Jon ja Ben ovat myös työskennelleet mielenosoittavan uuden työkalun parissa, joka ottaa lautasliivit ja muuttaa ne jotenkin React-komponenteiksi.

Adam Morse, Brent Jackson ja John Otander työskentelevät työkalusarjan parissa Compositorissa, jotka ratkaisevat periaatteessa kaikki tämän artikkelin ja ehkä maailman ongelmat.

Työskentelen Modulzilla, uudella suunnittelutyökalulla ja avoimen lähdekoodin suunnittelujärjestelmällä, jonka tavoitteena on myös ratkaista tässä artikkelissa mainitut ongelmat. Jos olet kiinnostunut, seuraa päivityksiä Twitterissä.

Vaikka työkalujen innovaatiot ovat tärkeitä, todellinen haaste on koulutus. Suunnitteluyhteisö ei yksinkertaisesti ole valmis systemaattiselle suunnittelutyökalulle. Monilla suunnittelijoilla on vähän tai ei lainkaan kiinnostusta rakennusjärjestelmiin. Joillekin JPG on lopullinen tavoite - Dribbble tykkää.

Meidän on jotenkin inspiroitava vastuullisuuskulttuuria. Kehittäjillä on ollut vastuullisuuskulttuuri vuosien ajan. Heillä on työkaluja pitääkseen koodinsa kurissa. Jos kehittäjä poikkeaa toistuvasti heidän tiukoista koodiohjeistaan, voit olla varma, että ongelmaan puututaan.

Samaan aikaan suunnittelijat keräävät kerrosten kerroksia usein täysin epäjärjestyksessä ottamatta huomioon kerrosten nimeämistä, ryhmittämistä ja järjestämistä. Se on hyvin paljon kukin omaa. Koska tulo (vektorikerrokset) eivät vaikuta tulostukseen (rasterikuva), suunnittelijoille ei aseteta todellista taakkaa organisoida. Suunnittelijat syyttävät usein tämän organisoitumattomuuden romantiikalla muotoilutaiteen maalaamalla itsensä taikureiksi, jotka on jätettävä omien laitteidensa suorittamiseen.

Meidän on myös inspiroitava osallistamiskulttuuriin. Meidän tulisi aktiivisesti torjua väärinkäytöksiä, kuten erittäin kevyitä tekstivärejä, jotka vaikeuttavat tekstin lukemista monille ihmisille, tai erittäin korkealaatuisia kirjasintyyppejä, joiden avulla verkkosivut latautuvat hitaasti, tai kuvioimattomia käyttöliittymäelementtejä, jotka vaikeuttavat asioiden ymmärtämistä värisokeille. Tällä hetkellä tyyppisiä väärinkäytöksiä suositaan suunnittelijayhteisössä. Jos haluamme pitää älykästä suunnittelutyökalua, meidän on käännettävä tämä kulttuuri.

Jos systemaattisen suunnittelutyökalun avulla voitetaan sydämemme, sen on ensin koulutettava.