Mjetet e projektimit po mbarojnë. Ja se si mund t'i rregullojmë ato.

Rrallë kalon një ditë ku nuk kaloj të paktën ca kohë duke menduar për mjetet e projektimit. Disa vjet më parë, unë ndërtova një mjet të projektimit i cili u ble nga Marvel. Kjo kishte mbi dy vjet më parë, por që nga atëherë peizazhi nuk ka ndryshuar shumë, as nuk ka pasion tim për ta përmirësuar atë.

Kohët e fundit, bëra tweet në lidhje me mjetet e projektimit - një gjë për të cilën dihet se ndodh herë pas here.

Unë nuk isha e vetmja që e flas mendjen time atë ditë, të tjerët gjithashtu mashtruan.

28 korriku 2017 nuk ishte një ditë e mirë për mjetet e projektimit.

Ka shumë pasqyrë të madhe të varrosur në këto tema të Twitter, por për një kohë të gjatë, unë kam qenë duke dashur të marrë kohën për të zhyten thellë në vetëm atë që është se unë mendoj se është thyer aq thelbësisht në lidhje me modelin aktual të mjeteve të projektimit, si dhe si aluzion në drejtim unë mendoj se duhet të drejtohemi.

Ne të gjithë jemi thjesht duke tërhequr fotografi. Shtë çmendur.

Pothuajse të gjitha mjetet e njohura të projektimit eksportojnë në imazhe. Kjo është problematike për një numër arsyesh:

  1. Ju nuk mund të bashkëveproni me një imazh. Mjetet prototipuese na fuqizojnë të shtojmë tranzicionet e ekranit dhe ndërveprimet e thjeshta në imazhe. Sidoqoftë, ndërsa produktet tona vazhdojnë të kërkojnë tranzicione më të përparuara të ekranit dhe ndërveprime në mikro, imazhet thjesht nuk mund të mbajnë më lart.
  2. Imazhet nuk janë të lëngshme. Komunikimi i vendimeve të përgjegjshme të dizajnit përmes imazheve është zakonisht një detyrë e vështirë.
  3. Imazhet nuk janë të shprehura. Për të komunikuar në mënyrë efektive shtetet e ndryshme për një UI, shpesh shumë imazhe janë të nevojshme.
  4. Imazhet Bitmap varen nga rezolucioni. Me ardhjen e pajisjeve të retinës, imazhet ndonjëherë mund të bëhen dobët.
  5. Skedarët e imazheve kanë tendencë të jenë të rënda dhe shpesh janë të vështira për të ruajtur, menaxhuar ose shkëmbyer.

Për sa kohë që mjetet e projektimit vazhdojnë të eksportojnë imazhe, ato kurrë nuk do të jenë në gjendje të prodhojnë përfaqësime të sakta të produkteve tona. Kjo mungesë e saktësisë pengon komunikimin midis projektuesve dhe zhvilluesve. Për sa kohë që projektuesit vazhdojnë të përdorin një medium me mjeshtëri të papërshtatshme për të komunikuar punën e tyre, ajo punë do të jetë gjithnjë e hapur për keqinterpretim.

Kjo është një pikë shumë domethënëse sepse, në thelb të tyre, pothuajse të gjitha mjetet e projektimit konvertojnë forma vektoriale në imazhe. Photoshop, Illustrator, Marvel, Adobe XD, Sketch dhe Figma janë të gjitha të njëjta në këtë drejtim. Megjithatë, imazhet mund të komunikojnë vetëm pjesërisht qëllimin e projektimit. Ndërsa produktet tona vazhdojnë të adoptojnë dhe mbështesin ndërveprime komplekse, futjen e zërit, futjen në video, realitetin e shtuar, realitetin virtual, ndjeshmërinë ndaj temperaturës etj., Vlera që ofrojnë këto mjete do të zvogëlohet me shpejtësi. Dizajni i bazuar në imazhe është një fund i vdekur.

Mjetet tona të projektimit duhet të manipulojnë produktin aktual, jo një pamje të tij.

Prodhimet tona janë interaktive. Mjetet tona janë statike.

Unë e preva këtë në pikën time të mëparshme, por është super kritike, kështu që e kuptova se do të shtjelloja pak.

Mendoni për sasinë e ndërveprimeve të thjeshta të cilat janë të zakonshme në pothuajse të gjitha produktet tona, por nuk mund të komunikohen përmes mjeteve tona të projektimit. Këtu keni një listë të shkurtër nga majën e kokës sime:

  • Duke lëvizur një buton
  • Përqendrimi i një inputi
  • Kontrollimi i një kutie
  • Përmbajtja në skedë
  • Shkoni në zonat
  • Indeksi i skedave për gjendjet e përqendruara
  • Shkurtoret e tastierës

Sigurisht, disa nga këto karakteristika mund të imitohen me disa inxhinieri të hutuar, por duhet të pyesim veten se çfarë është në Tokë? Pse nuk mund të dizajnerët thjesht dizajnojnë produktin aktual?! Në fund të fundit, të gjitha talljet janë të disponueshme, por dizajnerët kalojnë muaj me radhë duke i përsëritur në përsosmëri. Kjo kohë do të shpenzohej shumë më mirë duke përdorur produktin aktual.

Unë nuk do të shkoj shumë larg poshtë vrimës së lepurit "duhet të projektuesit" por nuk po sugjeroj që të gjithë shkruajmë kod. Unë thjesht po them se nuk ka asnjë arsye të mirë pse mjetet tona të projektimit nuk mund të mbështesin manipulimin e drejtpërdrejtë të produkteve tona live.

Framer bën një punë më të mirë sesa shumica e këtij departamenti, duke mbështetur ndërveprime të përparuara dhe të hollësishme. Pjesa tjetër e paketës është shumë larg.

Mjetet tona duhet të mbështesin paradigmën e faqosjes së faqes në internet

Deri rreth rreth një vit më parë, e vetmja mënyrë për të ndërtuar faqosjet në internet ishte përdorimi i ekranit: tabela dhe vetitë CSS të lidhura vertikale. Tani kemi Flexbox dhe së shpejti do të kemi rrjet CSS. Këta tre motorë planifikimi funksionojnë në mënyrë të ngjashme, duke shfrytëzuar rrjedhën e DOM-it. Pothuajse të gjitha faqet e internetit janë ndërtuar duke përdorur një nga këto tre sisteme të faqosjes.

Pra, ka kuptim që mjetet tona të projektimit mbështesin të njëjtin model të paraqitjes. E drejtë?

Epo, pothuajse të gjitha mjetet e projektimit injorojnë këto sisteme të paraqitjes, në vend që të zgjedhin ta pozicionojnë secilën shtresë absolutisht brenda kartonit të saj. Kjo hap një shqetësim midis mënyrës se si funksionon ueb dhe mënyra sesi funksionojnë mjetet tona të projektimit, duke prezantuar shumë çështje:

  • Dizajni i përgjegjshëm bëhet shumë i vështirë sepse secila shtresë duhet të riorganizohet manualisht për çdo pikënisje. Përndryshe, një sistem paraqitjeje me bazë kufizime mund të futet, por që shton kompleksitetin, forcon kthesat e të mësuarit dhe në fund të fundit parandalon që zhvilluesit të transferojnë paraqitjen direkt në internet.
  • Meqenëse çdo shtresë është jashtë rrjedhës së dokumentit, manipulimi i përmbajtjes bëhet i ndërlikuar. Për shembull, nëse doni të shtoni një artikull në një listë, duhet të ribotohen manualisht artikujt e tjerë në atë listë. Sigurisht, funksione të përsëritura dhe karakteristika të tjera të zbukuruara mund të futen për të lehtësuar dhimbjen, por përsëri, kjo paraqet kompleksitet të shtuar dhe komplikon diçka që DOM na jep falas.
  • Pozicionimi absolut çon natyrshëm në koordinatat dhe dimensionet fikse të pikselave. Kjo racizon fleksibilitet dhe, përsëri, është një largim i madh nga mënyra sesi funksionon uebi. Uebi është ndërtuar në njësi fluide si em, rem, vh, vw dhe%. Mjetet tona duhet t'i mbështesin këto njësi si parazgjedhje.

Mjetet e projektimit nuk duhet të ngjajnë ose reflektojnë në internet dhe nuancat e tij - ato thjesht duhet të jenë BE-ja.

Një mjet monolit nuk është mënyra

Dizajni i mirë ndodh në faza. Një sistem i strukturuar mirë i projektimit ka disa shtresa të dallueshme:

  1. Paleta e stilit Një koleksion ngjyrash, hijet, hapësirat, rrezet kufitare, format e tipit, madhësitë e shkronjave, animacionet dhe stilet e tjera që formojnë identitetin tuaj të markës. Aktualisht, shumica e mjeteve të projektimit mbështesin vetëm paletat e ngjyrave. Derisa të mbështesin vetitë e tjera të stilit, do të jetë jashtëzakonisht e mundimshme të hartoni në mënyrë sistematike.
  2. Pasuritë Kjo përfshin elemente si ikona, ilustrime dhe imazhe. Ekzistojnë disa redaktorë fenomenale të fenomeneve atje dhe mjeti vektor i Figma është i shkëlqyeshëm, por kur bëhet fjalë për mbështetjen e SVG, mjetet tona të projektimit lënë shumë për të dëshiruar.
  3. Biblioteka e komponentëve Një komponent është një koleksion i stileve dhe pasurive që i jep të dhënat një elementi të vetëm në një larmi variacionesh. Shembuj përfshijnë butonat, inputet, shënjat etj. Siç e përmenda, Figma dhe Sketch kohët e fundit kanë abstraktuar këtë proces larg rrjedhës kryesore të vizatimit - është për të ardhur keq që ata janë thjesht foto të përbërësve dhe jo komponentëve aktualë.
  4. Modulet Një modul / përbërje është një koleksion i komponentëve i cili i jep të dhënave një pjesë të kapsuluar të UI në një larmi gjendje. Shembuj mund të përfshijnë shufra me kokë, menutë e skedave, format e hyrjes, tabela etj. Meqenëse modulet janë vetëm përbërës komplekse, unë jam duke e menduar se Figma dhe Sketch mund t'i trajtojnë gjithashtu këto. Megjithëse mund të ketë ndonjë meritë për ndarjen e të dyve.
  5. Ekranet Një ekran është një koleksion i moduleve, përbërësve dhe të dhënave për të formuar një UI të plotë me të cilën përdoruesi mund të bashkëveprojë.

Shumica e mjeteve të projektimit ofrojnë karakteristika që mbështesin secilën prej këtyre fazave të projektimit në një farë mase të paktën. Problemi është se të gjitha fazat janë konfliktuar. Pothuajse të gjitha mjetet e projektimit ofrojnë vetëm një mënyrë - mënyra e vizatimit. Ju krijoni një grup kartonash dhe thjesht filloni të vizatoni fotografi. Vetëm kohët e fundit kanë mjete si komponentët / simbolet e abstraktuara Sketch dhe Figma larg nga mënyra kryesore e vizatimit - e cila është e çuditshme sepse në zhvillimin e përparme, komponentët janë abstraktuar për shumë vite.

Ndërsa hartoj një paletë stili, nuk kam nevojë të shoh artboard ose mjete vektoriale. Dua të shoh mjete për zgjedhjen e ngjyrave harmonike. Unë dua presets për gjëra të tilla si një shkallë hapësinore 8dp ose një përzgjedhje e shkallëve të tipit.

Dizenjimi i një ikonë kërkon një mënyrë krejt të ndryshme të të menduarit për të hartuar një fluks përdorues. Një redaktues i thjeshtë SVG i cili më lejoi të vizatoja drejtkëndësha, rrathë, linja dhe shtigje amtare SVG, pastaj eksporti i kodit SVG i optimizuar do të ishte ideal.

Ndërsa hartoj një përbërës, nuk duhet të mendoj më për stilet individuale - thjesht duhet të zgjedh stilet nga paleta ime e paracaktuar e stilit. Unë thjesht nuk mund të filloj stilet e tundjes për një komponent sepse kjo do të sillte mospërputhje, duke holluar efektivitetin e sistemit tim të projektimit. Sapo të krijohet një paletë stili, ajo duhet të jetë vetëm e redaktueshme në burim.

Në mënyrë të ngjashme, ndërsa hartoja një modul, unë duhet të ekspozohem vetëm në bibliotekën time të paracaktuar të komponentëve. Nuk duhet të ketë vetitë e stilit në një shirit anësor. Asnjë mjet vektori. Vetëm një bibliotekë e komponentëve të ripërdorshëm, të cilat mund t'i tërheq dhe të lëshoj për të kompozuar module.

E njëjta gjë vlen edhe për kompozimin e ekraneve. Në këtë pikë, ne jemi thjesht duke ripërdorur komponentë dhe module për të ndërtuar një UI. Ne nuk po mendojmë për stilet ose format ose përpjekjet e tjera krijuese. Ne jemi të përqendruar kryesisht në hartimin e përmbajtjes dhe rrjedhave të përdoruesve.

Secila prej këtyre fazave të projektimit mund të zhvillohet në mjete të veçanta plotësisht ose thjesht mënyra të ndryshme brenda të njëjtit mjet. Nuk mendoj se ka shumë rëndësi. Sidoqoftë, një gjë është e sigurt, shumica e mjeteve aktuale të projektimit nuk e njohin as procesin.

Mjetet tona duhet të inkurajojnë modelimin e mirë

Designers kanë luksin e rrallë për të qenë në gjendje të shtojnë një numër të pafund të stileve unike në një projekt pa ndonjë pasoja të dukshme. Keni nevojë për një madhësi të shkronjave pak më të madhe? Thjesht përplaseni. Asnjë biggie. Keni nevojë për një ngjyrë pak më të ndritshme? Vetëm shkulje. Coolshtë e lezetshme. Ju madje mund të krijoni tabela të shumta arti në të njëjtin projekt, secila duke përdorur vlera paksa të ndryshme për stile të ngjashme dhe ndoshta do të kalonte pa u vënë re.

Mjeti juaj i projektimit nuk do t'ju tregojë kurrë se nuk mund të bëni diçka. Asnjëherë nuk do t'ju tërheqë për përdorimin e një ngjyre jashtë markës. Asnjëherë nuk do t'ju pengojë të përdorni një vlerë të hapësirës së bardhë e cila nuk i përket shkallës tuaj hapësinore. Asnjëherë nuk do t'ju paralajmërojë se 20% e popullatës fjalë për fjalë nuk mund ta shohin atë tekst gri të lehta që keni hartuar.

Dhe pse jo…? Sepse mjetet e projektimit nuk u interesojnë.

Mjetet e projektimit janë dashuruar kaq larg me një vizion për kreativitet të pakufizuar, saqë ata kanë humbur shikimin e asaj që do të thotë të hartosh me ndjeshmëri, të hartosh gjithëpërfshirës, ​​të hartosh në mënyrë sistematike.

E thënë thjesht, mjetet e projektimit na lejojnë të bëjmë çfarëdo dreq që duam. Në një farë mase, ky nivel i krijimtarisë së pakufishme është i dobishëm, veçanërisht në fazat e ideimit. Sidoqoftë, si dizajnerë të UI, shumica e rrjedhës sonë të punës nuk kërkon shumë kreativitet. Përkundrazi, rrjedha jonë e punës bën thirrje për ripërdorim, përsëritje, familjaritet dhe standardizim; ka nevojë që mjetet tona bëjnë pak për të kënaqur.

Kjo liri e pakufizuar është në kundërshtim me realitetin e zhvillimit të uebit. Meqenëse zhvilluesit janë duke punuar me produktin aktual, të gjithë duhet të punojnë me të njëjtin kod. Zhvilluesit nuk mund të shtojnë madhësi të shkronjave të izoluara ose vlera të rastësishme ngjyrash në bazën e kodeve. Së pari, një postues (një mesazh paralajmërues për kodin e shkruar dobët) ka të ngjarë të fillojë të bërtasë menjëherë. Nëse jo, atëherë zejtaria e tyre e ngathët do të kapet gjatë një rishikimi të kodit. Nëse disi arriti të kalojë nëpër çarje, një ndikim i dukshëm i performancës përfundimisht do të tingëllonte alarmin.

Një nga problemet më shqetësuese që shoh në ekipet e produkteve është shkëputja midis ekipeve të projektimit dhe zhvillimit. Zhvilluesit kanë punuar me udhëzime dhe kufizime të rrepta për vite me rradhë. Në qoftë se mjetet tona të projektimit nuk miratojnë të njëjtat kufizime, hendeku nuk do të ngushtohet kurrë.

Ne duhet të jemi duke dizajnuar me të dhëna live

Të dhënat e drejtpërdrejta janë përfshirë në një farë mase nga shumë mjete, gjë që është e shkëlqyeshme për tu parë. Adobe XD ka disa tipare vërtet të zoti për gjenerimin e të dhënave të rreme që i ngjajnë të dhënave tipike live. Invasion Craft gjithashtu ofron disa tipare të lezetshme të të dhënave live për Sketch.

Të dhënat live nuk duhet të ndalen me tekstin, sidoqoftë. Elementë të tjerë si imazhet dhe video mund të kenë një ndikim të madh në përvojën e përdoruesit duke rritur ndjeshëm kohën e ngarkesës. Nëse jeni duke punuar në internet, mjetet e devotshme të shfletuesit ju lejojnë të ngrini lidhjen për t'u ngjan me një shumëllojshmëri të shpejtësive të internetit. Atëherë, mund të shihni se si një pjesë e re e përmbajtjes mund të ndikojë në përvojën e përdoruesit.

A na lejojnë mjetet tona të projektimit këto luks?

Me një fjalë: jo.

Sa më afër afrohemi në hartimin e produktit aktual, aq më i dobishëm dhe me ndikim mund të jetë puna jonë e projektimit.

Uebi është i hapur. Mjetet tona duhet të jenë gjithashtu.

Një nga gjërat me të vërtetë të bukura rreth uebit është aksesueshmëria e saj e hapur. Një faqe në internet mund të shihet në çdo shfletues të internetit pothuajse për çdo pajisje.

Si krahasohet kjo me mjetet e projektimit? Epo, disa ditë më parë, vëllai im David David më kërkoi një përmbledhje të projektit që po ndërton. Ai më dërgoi një skedar Sketch. Kur e hapa, kjo ndodhi…

Shumica e mjeteve të projektimit janë kopshte me mure. Nëse një koleg po punon në Photoshop, një koleg tjetër nuk mund ta hapë atë projekt në Sketch. Nuk është as e mjaftueshme që të gjithë ekipin tuaj të përdorni të njëjtin mjet - ata gjithashtu duhet të përdorin të njëjtin version të këtij mjeti.

Marvel dhe Figma bëjnë një punë të mirë këtu, duke ofruar plane falas dhe karakteristika inovative të bashkëpunimit.

Pra, cila është e ardhmja e mjeteve të projektimit?

Inovacioni në përpunimin e instrumenteve është jashtëzakonisht i vlefshëm dhe kohët e fundit ka pasur shumë prej tij. Në mjetet e projektimit të Airbnb, Jon Gold dhe Benjamin Wilkins kanë punuar në React-Sketchapp i cili merr komponentët React dhe i jep ato brenda Sketch. Jon dhe Ben gjithashtu kanë punuar në një mjet të ri me mendje që merr skica pecete dhe i shndërron ato në komponentë React.

Adam Morse, Brent Jackson dhe John Otander janë duke punuar në një grup mjetesh në Compositor të cilat në thelb zgjidhin të gjitha problemet në këtë artikull dhe mbase në botë.

Unë jam duke punuar në Modulz, një mjet i ri i projektimit dhe sistemi i burimit të hapur, i cili gjithashtu synon të zgjidhë problemet që përmenda në këtë artikull. Nëse jeni të interesuar, ndiqni së bashku në Twitter për azhurnime.

Ndërsa inovacioni në përpunim mekanik është i rëndësishëm, sfida e vërtetë është arsimi. Komuniteti i projektimit thjesht nuk është i gatshëm për një mjet sistematik të projektimit. Shumë dizajnerë kanë pak ose aspak interes në ndërtimin e sistemeve. Për disa, JPG është qëllimi përfundimtar - Dribbble pëlqen.

Ne duhet të frymëzojmë disi një kulturë të përgjegjshmërisë. Zhvilluesit kanë pasur një kulturë përgjegjësie për vite me rradhë. Ata kanë mjete për të mbajtur nën kontroll kodin e tyre. Nëse një zhvillues devijon në mënyrë të përsëritur nga udhëzimet e tyre të rrepta të kodit, mund të jeni i sigurt se çështja do të adresohet.

Ndërkohë, dizajnerët shpesh grumbullojnë male me shtresa në çrregullim të plotë pa marrë parasysh vëmendjen për emërtimin, grupimin dhe renditjen e shtresave. Veryshtë shumë secila në vete. Meqenëse prodhimi (imazhi i rasterit) nuk ndikohet nga inputi (shtresat vektoriale), nuk ka asnjë ngarkesë të vërtetë të vendosur për projektuesit që do të organizohen. Designers shpesh justifikojnë këtë mungesë të organizimit duke romantizuar artin e dizajnit, duke pikturuar veten si magjistarë që duhet të lihen në pajisjet e tyre në mënyrë që të kryejnë.

Ne gjithashtu duhet të frymëzojmë një kulturë të gjithëpërfshirjes. Ne duhet të dekurajojmë në mënyrë aktive keqpërdorimin, si ngjyrat ultra të lehta të tekstit, të cilat e bëjnë tekstin të vështirë për tu lexuar për shumë njerëz, ose formularët super të një cilësie të lartë që i bëjnë faqet e internetit të ngadalta për t'u ngarkuar, ose elementët UI pa model që i bëjnë gjërat të vështira për t'u kuptuar për njerëzit e verbër. Aktualisht, ky lloj i keqpërdorimit është duartrokitur në mes të komunitetit të projektimit. Nëse do të mirëpresim një mjet të zgjuar të projektimit, duhet ta përmbysim këtë kulturë.

Nëse një mjet sistematik i projektimit do të fitojë zemrat tona, së pari duhet të edukohet.