Kujundusvahendid on otsa saanud. Siit saate teada, kuidas neid parandada.

Harva möödub päev, kus ma ei veeda vähemalt mõnda aega disainitööriistadele mõeldes. Mõni aasta tagasi ehitasin Marveli omandatud disainiriista. See oli rohkem kui kaks aastat tagasi, kuid sellest ajast peale pole maastik palju muutunud ja ka minu kirg seda parendada pole.

Hiljuti säutsusin disainitööriistadest - asjast, mida on teada olnud aeg-ajalt.

Ma polnud ainus, kes sel päeval meelt avaldas, teised ka lõid sisse.

28. juuli 2017 polnud disainivahendite jaoks hea päev.

Nendesse Twitteri lõimedesse on maetud palju suurepäraseid teadmisi, kuid juba pikka aega olen soovinud võtta aega, et sukelduda põhjalikult sellesse, mis see on, mis minu arust on praeguse kujundusriista mudeli osas ka nii põhjalikult katki vihjeks suunale, millesse ma arvan, et meid tuleks suunata.

Me kõik joonistame ainult pilte. See on hull.

Peaaegu kõik populaarsed kujundustööriistad ekspordivad piltidele. See on problemaatiline mitmel põhjusel:

  1. Kujutisega ei saa suhelda. Prototüüpimisriistad võimaldavad meil lisada piltidele ekraanimuutusi ja lihtsaid interaktsioone. Kuna meie tooted nõuavad jätkuvalt keerukamaid ekraanisiireid ja mikrointeraktsioone, ei suuda pildid lihtsalt sammu pidada.
  2. Pildid pole vedelad. Vastuvõtlike disainiotsuste edastamine piltide kaudu on tavaliselt keeruline ülesanne.
  3. Pildid pole oleklikud. Kasutajaliidese eri olekute tõhusaks edastamiseks on sageli vaja palju pilte.
  4. Bitmap-pildid sõltuvad eraldusvõimest. Võrkkesta seadmete ilmumisega võivad pildid mõnikord halvasti muutuda.
  5. Piltide failid on tavaliselt rasked ja neid on sageli keeruline ladustada, hallata või jagada.

Kuni kujundustööriistad jätkavad piltide eksportimist, ei saa nad kunagi meie toodete täpseid esitusi. See täpsuse puudumine takistab suhtlemist disainerite ja arendajate vahel. Kuni disainerid kasutavad oma töö edastamiseks hädasti ebapiisavat infokandjat, on see teos alati valesti tõlgendatav.

See on väga märkimisväärne punkt, sest nende tuumas konverteerivad peaaegu kõik kujundusriistad vektorkujud piltideks. Photoshop, Illustrator, Marvel, Adobe XD, Sketch ja Figma on selles osas kõik ühesugused. Kujutised võivad kujunduseesmärke siiski vaid osaliselt edastada. Kuna meie tooted jätkavad keerukate interaktsioonide, häälsisendi, videosisendi, liitreaalsuse, virtuaalreaalsuse, temperatuuritundlikkuse jms vastuvõtmist ja toetamist, väheneb nende tööriistade pakutav väärtus kiiresti. Pildipõhine disain on ummiktee.

Meie disainitööriistad peaksid manipuleerima tegeliku tootega, mitte selle pildiga.

Meie tooted on interaktiivsed. Meie tööriistad on staatilised.

Ma puudutasin seda oma eelmises punktis, kuid see on ülimalt kriitiline, nii et arvasin, et töötan natuke edasi.

Mõelge lihtsate interaktsioonide arvule, mis on peaaegu kõigis meie toodetes tavalised, kuid mida meie disainivahendite kaudu ei suhelda. Siin on lühike loetelu minu pealaest:

  • Nupu hõljumine
  • Sisendi fokuseerimine
  • Märkeruudu märkimine
  • Volditud sisu
  • Kerige alasid
  • Vahelehtede register keskendunud olekute jaoks
  • Klaviatuuri otseteed

Muidugi, mõnda neist funktsioonidest saab jäljendada mõne räbala inseneriga, kuid tuleb imestada, mis mõte on Maal? Miks ei võiks disainerid lihtsalt tegelikku toodet kujundada?! Lõppkokkuvõttes on kõik maketid ühekordselt kasutatavad, kuid disainerid veedavad mitu kuud, et neid täiuslikuks muuta. See aeg oleks palju parem kulutada tegeliku toote tutistamisele.

Ma ei lähe liiga kaugele küüliku auku “peaks disainerid koodi”, kuid ma ei soovita, et me kõik koodi kirjutaksime. Ma ütlen lihtsalt, et pole mõjuvat põhjust, miks meie kujundusriistad ei toeta meie reaalajas olevate toodetega otsest manipuleerimist.

Framer teeb paremat tööd kui enamik selles osakonnas, toetades täiustatud ja detailset suhtlust. Ülejäänud pakk on väga kaugel.

Meie tööriistad peaksid toetama veebi paigutuse paradigmat

Umbes aasta tagasi oli ainus viis paigutuste loomiseks veebis kasutada kuvarit: tabelit ja vertikaalselt joondatud CSS-i atribuute. Nüüd on meil Flexbox ja varsti on meil CSS-võrk. Need kolm paigutusmootorit töötavad üsna sarnaselt, kasutades DOM-i voogu. Peaaegu kõik veebisaidid on loodud kasutades ühte neist kolmest paigutussüsteemist.

Seega on mõistlik, et meie kujundusriistad toetavad sama paigutusmudelit. Õige?

Peaaegu kõik kujundustööriistad ignoreerivad neid paigutussüsteeme, selle asemel, et paigutada iga kiht absoluutselt selle artboardi sisse. See avab veebi toimimise ja meie kujundusriistade toimimise vahel lõhe, tutvustades paljusid küsimusi:

  • Vastuvõtlik kujundus muutub väga keeruliseks, kuna iga kihti tuleb iga murdepunkti jaoks käsitsi ümber korraldada. Teise võimalusena võib kasutusele võtta piirangupõhise paigutussüsteemi, kuid see lisab keerukust, jätab õppimiskõverad püsima ja hoiab lõppkokkuvõttes arendajaid edastamata paigutust otse veebi.
  • Kuna iga kiht asub väljaspool dokumendi voogu, muutub sisuga manipuleerimine keerukaks. Näiteks kui soovite üksuse loendisse lisada, peate selle loendi muud üksused käsitsi ümber paigutama. Muidugi saab valu leevendamiseks kasutusele võtta korduvaid funktsioone ja muid väljamõeldud funktsioone, kuid see lisab veelgi keerukust ja muudab asja, mida DOM meile tasuta annab.
  • Absoluutne positsioneerimine viib loomulikult fikseeritud pikslite koordinaatide ja mõõtmeteni. See suurendab paindumatust ja on jällegi tohutu kõrvalekalle veebi toimimisest. Veeb on üles ehitatud vedelikuplokkidele, nagu em, rem, vh, vw ja%. Meie tööriistad peaksid vaikimisi neid üksusi toetama.

Kujundustööriistad ei peaks vajama veebi ja selle nüansse meenutama ega kajastama - need peaksid olema lihtsalt veeb.

Monoliitne tööriist pole see viis

Hea disain toimub etappide kaupa. Hästi struktureeritud kujundussüsteemil on paar selget kihti:

  1. Stiilipalett Värvide, varjude, vahemike, ääriste raadiuste, kirjatüüpide, kirjasuuruste, animatsioonide ja muude stiilide kollektsioon, mis moodustavad teie brändi identiteedi. Praegu toetab enamik kujundusriistu ainult värvipalette. Kuni nad toetavad teisi stiiliomadusi, on süstemaatiline kujundus äärmiselt töömahukas.
  2. Varad See hõlmab selliseid elemente nagu ikoonid, illustratsioonid ja pildid. Seal on mõned fenomenaalsed pildiredaktorid ja Figma vektoritööriist on suurepärane, kuid SVG toe osas jätavad meie kujundusriistad palju soovida.
  3. Komponentteek Komponent on stiilide ja varade kogum, mis koondab andmed ühele elemendile erinevates variatsioonides. Näideteks on nupud, sisendid, märgid jne. Nagu ma mainisin, on Figma ja Sketch viimasel ajal selle protsessi peamisest joonisevoost eemaldanud - kahju, et need on lihtsalt komponentide pildid, mitte tegelikud komponendid.
  4. Moodulid Moodul / kompositsioon on komponentide kogum, mis edastab andmed kapseldatud kasutajaliidese tükiks erinevates olekutes. Näited võivad hõlmata päise ribasid, vahekaartide menüüsid, sisselogimisvorme, tabeleid jne. Kuna moodulid on lihtsalt keerulised komponendid, arvan, et ka Figma ja Sketch saavad nendega hakkama. Ehkki nende kahe eraldamisel võib olla teatud eeliseid.
  5. Ekraanid Ekraan on moodulite, komponentide ja andmete kogum, mis moodustab täieliku kasutajaliidese, millega kasutaja saab suhelda.

Enamik disainivahendeid pakub funktsioone, mis toetavad vähemalt kõiki neid projekteerimisetappe. Probleem on selles, et kõik etapid on omavahel seotud. Peaaegu kõik disainitööriistad pakuvad ainult ühte režiimi - joonistusrežiimi. Loote joonistetahvlite komplekti ja hakkate lihtsalt pilte joonistama. Alles hiljuti on sellised tööriistad nagu Sketch ja Figma abstraheeritud komponendid / sümbolid põhijoonistusrežiimist eemal - see on imelik, sest esiotsa arendamisel on komponente juba aastaid abstraheeritud.

Stiilipaleti kujundamisel ei pea ma nägema tahvleid ega vektorriistu. Ma tahan näha tööriistu harmooniliste värvide valimiseks. Soovin eelseadeid näiteks 8dp vaheskaala või teatud tüüpi skaalade jaoks.

Ikooni kujundamine nõuab kasutajavoolu kujundamisel täiesti erinevat mõtlemisviisi. Ideaalne oleks lihtne SVG-redaktor, mis võimaldas mul joonistada natiivseid SVG-ristkülikuid, -ringi, -jooni ja -teid, seejärel eksportida optimeeritud SVG-kood.

Komponendi kujundamisel ei peaks ma enam mõtlema üksikute stiilide üle - ma peaksin lihtsalt stiile valima oma eelmääratud stiilipaletist. Ma ei saa lihtsalt ühe komponendi stiilide täpsustamist alustada, sest see tooks kaasa ebajärjekindluse, vähendaks mu disainisüsteemi tõhusust. Kui stiilipalett on paigas, peaks see olema redigeeritav ainult lähtekohas.

Samamoodi peaksin mooduli koostamise ajal puutuma kokku ainult oma eelnevalt määratletud komponentide koguga. Külgribal ei tohiks olla stiiliomadusi. Pole vektorriistu. Lihtsalt korduvkasutatavate komponentide raamatukogu, mida saan moodulite koostamiseks lohistada.

Sama kehtib ekraanide komponeerimise kohta. Praegu kasutame komponente ja mooduleid lihtsalt UI loomiseks. Me ei mõtle stiilidele ega kujudele ega muudele loomingulistele ettevõtmistele. Oleme keskendunud peamiselt sisu ja kasutajavoogude kujundamisele.

Kõik need kavandamisetapid võivad toimuda eraldi tööriistades täielikult või sama tööriista eri režiimides. Minu arust pole sellel suurt tähtsust. Üks on kindel, aga enamus praegusi disainivahendeid ei suuda protsessi isegi teadvustada.

Meie tööriistad peaksid julgustama head disaini

Disaineritel on haruldane luksus, kui nad saavad projektile lisada lõpmatu hulga ainulaadseid stiile ilma märgatavate tagajärgedeta. Kas vajate pisut suuremat kirjasuurust? Lihtsalt põrutage. Ei mingit suuremat. Kas vajate pisut heledamat värvi? Lihtsalt näpista seda. See on lahe. Võiksite samas projektis luua isegi mitu liistuhvlit, millest igaüks kasutaks sarnaste stiilide jaoks pisut erinevaid väärtusi ja see jääks tõenäoliselt märkamatuks.

Teie disainitööriist ei ütle kunagi teile, et te ei saa midagi teha. Kunagi ei tõmba teid kaubamärgivaba värvi kasutamise eest. See ei takista kunagi tühimärgi kasutamist, mis ei kuulu teie vahemikuskaalasse. Kunagi ei hoiatata teid, et 20% elanikkonnast ei näe sõna otseses mõttes just teie kujundatud helehalli teksti.

Ja miks mitte…? Sest disainitööriistad ei huvita.

Projekteerimisriistad on nii igakülgselt vaimustatud visioonist piiramatu loovuse jaoks, et on unustanud, mida tähendab mõistlik kujundamine, kõikehõlmav kujundamine, süstemaatiline kujundamine.

Lihtsustatult öeldes - disainitööriistad võimaldavad meil teha kõike, mida me tahame. Mingil määral on selline piiritu loovuse tase kasulik, eriti ideefaasides. UI-disaineritena ei nõua suurem osa meie töövoogu palju loovust. Pigem nõuab meie töövoog korduvkasutamist, kordamist, tundmist ja standardimist; vajab, et meie tööriistad rahuldaksid vähe.

See piiramatu vabadus on vastuolus veebiarenduse reaalsusega. Kuna arendajad töötavad tegeliku tootega, peavad nad kõik töötama sama koodiga. Arendajad ei saa lihtsalt koodbaasi lisada eraldatud fondi suurusi või juhuslikke värviväärtusi. Esiteks hakkab liider (hoiatusteade, mis hoiatab halvasti kirjutatud koodi eest) tõenäoliselt kohe karjuma. Kui ei, siis arvatakse nende ülevaatlikku meisterlikkust ilmselt koodide ülevaatamise ajal. Kui see kuidagi õnnestuks läbi pragude libiseda, kõlab lõpuks häire.

Üks kõige häirivamaid probleeme, mida tootegruppides näen, on lahtiütlemine disaini- ja arendusmeeskondade vahel. Arendajad on aastaid töötanud rangete juhiste ja piirangutega. Kui meie disainitööriistad ei võta samu piiranguid, ei vähene lõhe kunagi.

Me peaksime kavandama reaalajas andmete abil

Reaalajas andmeid on mingil määral ühendatud paljude tööriistadega, mida on väga hea näha. Adobe XD-l on tõeliselt kena funktsioon võltsandmete genereerimiseks, mis meenutavad tüüpilisi reaalajas andmeid. Invision Craft pakub Sketchile ka lahedaid reaalajas andmete funktsioone.

Aktiivsed andmed ei tohiks tekstiga siiski lõppeda. Muud elemendid, näiteks pildid ja video, võivad kasutajakogemusele tohutult mõjuda, kui laadimisaegu märkimisväärselt pikendada. Kui töötate veebis, võimaldavad brauseri arendusriistad ühenduse luua erinevatel Interneti kiirustel sarnaseks. Seejärel näete otse, kuidas uus sisu võib mõjutada kasutajakogemust.

Kas meie disainitööriistad lubavad meile neid luksusi?

Ühesõnaga: ei.

Mida lähemale reaalse toote kujundamisele jõuame, seda abivalmis ja mõjukas saab olla meie disainitöö.

Veeb on avatud. Ka meie tööriistad peaksid olema.

Üks tõeliselt ilusaid asju veebi kohta on selle avatud juurdepääsetavus. Veebisaiti saab vaadata igas veebibrauseris ja peaaegu igas seadmes.

Kuidas see võrreldav disainitööriistadega on? Noh, paar päeva tagasi küsis mu vend David minult selle rakenduse projekti ülevaadet, mida ta ehitab. Ta saatis mulle visandifaili. Kui ma selle lahti tegin, juhtus see ...

Enamik disaini tööriistu on seinaga aiad. Kui üks kolleeg töötab Photoshopis, ei saa teine ​​kolleeg seda projekti Sketchis avada. Ei piisa isegi sellest, kui kogu meeskond kasutab sama tööriista - ka nemad peavad kasutama sama tööriista versiooni.

Marvel ja Figma teevad siin head tööd, pakkudes tasuta plaane ja uuenduslikke koostöövõimalusi.

Mis on disaini tööriistade tulevik?

Uuendused disaini tööriistade valmistamisel on äärmiselt väärtuslikud ja neid on viimasel ajal palju olnud. Airbnb disainitööriistade juures on Jon Gold ja Benjamin Wilkins töötanud React-Sketchappil, mis võtab Reaxi komponendid kokku ja muudab need visanditeks. Jon ja Ben on töötanud ka mõtlemapaneva uue tööriista kallal, mis võtab salvrätiku visandid ja muudab need kuidagi Reaxi komponentideks.

Adam Morse, Brent Jackson ja John Otander töötavad Compositoris tööriistakomplekti kallal, mis põhimõtteliselt lahendab kõik selle artikli ja võib-olla kogu maailma probleemid.

Töötan Modulzi, uue disainitööriista ja avatud lähtekoodiga kujundussüsteemiga, mille eesmärk on lahendada ka probleemid, mida selles artiklis mainisin. Kui olete huvitatud, jälgige värskendusi Twitteris.

Kuigi tööriistade uuendamine on oluline, on tegelik väljakutse haridus. Kujunduskogukond pole süsteemse disainivahendi jaoks lihtsalt valmis. Paljud disainerid tunnevad ehitussüsteemide vastu huvi vähe või üldse mitte. Mõne jaoks on JPG lõpp-eesmärk - Dribbble meeldib.

Peame kuidagi inspireerima vastutuskultuuri. Arendajatel on aastaid olnud vastutuskultuur. Neil on tööriistad oma koodi kontrollimiseks. Kui arendaja kaldub korduvalt nende rangetest koodijuhistest kõrvale, võite olla kindel, et probleemiga tegeletakse.

Samal ajal tekitavad disainerid kihtide mägesid sageli täiesti segamatult, pöörates vähe tähelepanu kihtide nimetamisele, rühmitamisele ja järjestamisele. See on igaüks omaette. Kuna sisend (vektorkihid) väljundit (rasterkujutist) ei mõjuta, pole projekteerijatele korraldamisega seotud tegelikku koormust. Disainerid vabandavad selle organiseerituse puudumise sageli disainikunsti romantiseerimisega, maalides end mustkunstnikena, kelle esinemiseks tuleb jätta oma seade.

Peame inspireerima ka kaasamise kultuuri. Peaksime aktiivselt takistama selliseid rikkumisi nagu ülikerged tekstivärvid, mis muudavad teksti paljudele inimestele raskeks, või ülikvaliteetsed kirjatüübid, mis muudavad veebilehtede laadimise aeglaseks, või mustrita UI elemendid, mis muudavad asja värvipimedate jaoks raskesti mõistetavaks. Praegu kiidetakse seda tüüpi väärkohtlemist disainerite seas. Nutika disainitööriista vastuvõtmiseks peame selle kultuuri ümber pöörama.

Kui süstemaatiline tööriist soovib meie südameid võita, peab see kõigepealt harida.