Designinstrumenter lafen net. Hei ass wéi mir se fixen.

Selten geet et e Dag, wou ech net op d'mannst Zäit Zäit u Designinstrumenter denken. Virun e puer Joer hunn ech en Designtool gebaut dat vum Marvel kaaft gouf. Dat war virun iwwer zwee Joer awer zënterhier huet d'Landschaft net vill geännert, an och meng Leidenschaft fir et ze verbesseren.

Viru kuerzem tweeted ech iwwer Designinstrumenter - eng Saach déi bekannt gouf vun Zäit zu Zäit ze geschéien.

Ech war net deen eenzegen deen deen Dag deen Dag mengen huet, anerer hunn och geklappt.

Den 28. Juli 2017 war kee gudden Dag fir Designinstrumenter.

Et gëtt vill super Asiicht an dësen Twitter Threads begruewen awer fir eng laang Zäit wollt ech d'Zäit huelen fir déif an ze tauchen an dat wat et ass datt ech mengen datt et sou fundamental gebrach ass iwwer den aktuellen Design Toolmodell, souwéi als Hiweis op d'Richtung ech mengen, mir sollten op e Wee goen.

Mir sinn all just Biller ze molen. Et ass onsécher.

Bal all populär Designtools exportéiere fir Biller. Dat ass aus e puer Grënn problematesch:

  1. Dir kënnt net mat engem Bild interagéieren. Prototyping Tools empower eis fir Écran Iwwergäng an einfach Interaktiounen op Biller ze addéieren. Wéi eis Produkter awer weider fortgeschratt Écran Iwwergäng a Mikro-Interaktiounen erfuerderen, kënnen d'Biller einfach net weiderhalen.
  2. Biller sinn net flësseg. Kommunizéiere reaktiounsfäeger Design Décisiounen duerch Biller ass normalerweis eng schwiereg Aufgab.
  3. D'Biller sinn net statesch. Fir effektiv déi verschidde Staaten fir en UI ze kommunizéieren, sinn dacks vill Biller noutwendeg.
  4. Bitmap Biller sinn ofhängeg. Mat dem Advent vun Netzhaut Apparater kënnen d'Biller heiansdo schlecht ofginn.
  5. Billerdateien tendéieren schwéier ze sinn an sinn dacks schwéier fir ze späicheren, ze managen oder ze deelen.

Soulaang Design Tools weider Biller exportéieren, kënnen se ni fäeg Representatioune vun eise Produkter produzéieren. Dëse Mangel u Genauegkeet hindert d'Kommunikatioun tëscht Designer an Entwéckler. Soulaang Designer weider e widdreg inadequat Medium benotze fir hir Aarbecht ze kommunizéieren, sinn dës Aarbechte ëmmer op fir falsch Interpretatioun.

Dëst ass e ganz bedeitende Punkt well am Kär bal all Designinstrumenter Vecteur Formen a Biller konvertéieren. Photoshop, Illustrator, Marvel, Adobe XD, Sketch a Figma sinn all datselwecht. Awer Biller kënnen nëmmen deelweis Designintent kommunizéieren. Wéi eis Produkter weider komplex Interaktiounen adoptéieren an ënnerstëtzen, Stëmminput, Videoinput, augmentéiert Realitéit, virtuell Realitéit, Temperaturempfindlechkeet, asw., Wäert de Wäert, déi dës Tools ubidden, séier erofsetzen. Bildbaséiert Design ass en Doudegen.

Eis Designinstrumenter sollten dat aktuellt Produkt manipuléieren, net e Bild dovunner.

Eis Produkter sinn interaktiv. Eis Tools si statesch.

Ech hunn dëst a mengem fréiere Punkt beréiert awer et ass super kritesch, also hunn ech geduecht datt ech e bësse géif ausbauen.

Denkt un d'Unzuel vun einfachen Interaktiounen, déi a bal all eise Produkter alldeeglech sinn, nach net mat eisen Design Tools kommunizéiert kënne ginn. Hei ass eng kuerz Lëscht uewen op mengem Kapp:

  • Hovering e Knäppchen
  • Focuséiere vun engem Input
  • Schecken eng Kontrollbox un
  • Inhalter mat Tabulatioun
  • Scroll Beräicher
  • Tab Index fir fokusséiert Staaten
  • Tastatur Ofkiirzungen

Sécher, e puer vun dëse Funktiounen kënne mat iergendenger hackeger Technik mimikéiert ginn, awer ee muss sech froen, wat op der Äerd ass de Punkt? Firwat kënnen Designers net just dat aktuellt Produkt designen ?! Schlussendlech sinn all Mockups verfügbar, awer Designer verbréngen Méint fir se ze perfektionéieren. Déi Zäit wier vill besser verbrannt ginn mam aktuellen Produkt ze tweaking.

Ech ginn net ze wäit erof am "sollten Designer Code" Kanéngchen awer ech proposéiere net datt mir all Code schreiwen. Ech soen just datt et kee gudde Grond firwat eis Designtools net direkt Manipulatioun vun eise Live Produkter ënnerstëtzen.

Framer mécht eng besser Aarbecht wéi déi meescht an dësem Departement, ënnerstëtzt fortgeschratt an detailléiert Interaktiounen. De Rescht vum Pack si ganz wäit hannendrun.

Eis Tools sollten de Layoutparadigma vum Web ënnerstëtzen

Bis virun engem Joer war deen eenzege Wee fir Layouten um Internet ze bauen den Display ze benotzen: Dësch a vertikal-align CSS Eegeschafte. Elo hu mir Flexbox a geschwënn hu mir CSS Gitter. Dës dräi Layoutmotoren funktionnéieren zimlech ähnlech, andeems de Flux vun der DOM benotzt. Bal all Websäite si gebaut mat engem vun dësen dräi Layout Systemer.

Also et mécht Sënn datt eis Designinstrumenter dee selwechte Layoutmodell ënnerstëtzen. Riets?

Gutt, bal all Design Tools ignoréieren dës Layout Systemer, anstatt se all Layer absolut an hirem Artboard ze positionéieren. Dëst öffnet e Chasm tëscht wéi de Web funktionnéiert a wéi eis Designtools funktionnéieren, a vill Themen aféieren:

  • Responsive Design gëtt ganz schwéier, well all Schicht muss manuell ëmgestallt ginn fir all Breakpoint. Alternativ kann e constraintbaséierte Layout System agefouert ginn awer dat komplizéiert bäidréit, d'Léierkurven steelt a schlussendlech verhënnert datt Entwéckler de Layout direkt op de Web transferéieren.
  • Well all Layer ausserhalb vum Floss vum Dokument ass, manipuléiert Inhalt gëtt komplizéiert. Zum Beispill, wann Dir en Element op eng Lëscht wëllt addéieren, musst Dir déi aner Elementer op där Lëscht manuell positionéieren. Natierlech kënnen d'Widerhuelungsfunktiounen an aner ausgefalene Feature agefouert ginn fir de Schmerz z'erliichteren awer erëm, dëst füügt eng addéiert Komplexitéit a komplizéiert eppes wat d'DOM eis gratis gëtt.
  • Absolut Positionéierung féiert natierlech zu fixe Pixel Koordinaten an Dimensiounen. Dëst breet Onflexibilitéit an, erëm, ass e risegen Oflaf vu wéi de Web funktionnéiert. De Web ass op flësseg Eenheeten wéi em, rem, vh, vw a% gebaut. Eis Tools sollen dës Unitéiten als Standard ënnerstëtzen.

Designtools solle net am Internet an hiren Nuancen ähnlech sinn oder reflektéieren - se sollten einfach um Internet sinn.

E monolithescht Mëttel ass net de Wee

Gutt Design passéiert an Etappen. E gutt strukturéiert Design System huet e puer markant Schichten:

  1. Stylpalette Eng Sammlung vu Faarwen, Schatten, Ofstand, Grenzradiie, Schrëftzorten, Schrëftgréissten, Animatiounen an aner Stiler déi Är Markidentitéit bilden. De Moment ënnerstëtzen déi meescht Design Tools nëmmen Faarfpaletten. Bis se déi aner Styl Properties ënnerstëtzen, wäert et extrem labber ginn systematesch ze designen.
  2. Assets Dëst enthält Elementer wéi Symboler, Illustratiounen a Biller. Et sinn e puer phänomenal Bildredaktoren dobaussen an dem Figma säi Vektortinstrument ass exzellent, awer wann et ëm SVG Support geet, verloossen eis Designtools vill ze wënschen.
  3. Komponentbibliothéik Eng Komponent ass eng Sammlung vu Stiler a Verméigen, déi Daten zu engem eenzegt Element a ville Variatiounen liwweren. Beispiller enthalen Knäppercher, Input, Badges etc. Wéi ech ernimmt hunn d'Figma a Sketch viru kuerzem de Prozess abstrakt vun der Haaptrei Zeechfluss - et ass schued datt se just Biller vu Komponenten an net tatsächlech Komponenten hunn.
  4. Moduler E Modul / Zesummesetzung ass eng Sammlung vu Komponenten déi Daten zu engem verschlësselte Stéck UI a ville Staaten vermëttelt. Beispiller kënnen Header Baren, Tab Menuen, Login Formen, Tabellen asw. Zënter Moduler si just komplex Komponenten, denken ech, d'Figma a Sketch kënnen dës och handelen. Och wann et vläicht e bësse Verdéngung ass fir déi zwee ze trennen.
  5. Screens E Bildschierm ass eng Sammlung vu Moduler, Komponenten an Daten fir e komplette UI ze bilden mat deem de Benotzer interagéiere kann.

Déi meescht Designinstrumenter bidden Funktiounen déi jidderee vun dësen Designstadien op d'mannst gewëssenhaft ënnerstëtzen. De Problem ass datt all d'Stänn duerchernee sinn. Bal all Designinstrumenter bidden nëmmen ee Modus - d'Zeechnen Modus. Dir erstellt eng Rei vun Artboards a fänkt just un Biller ze molen. Eréischt ganz viru kuerzem hu Tools wéi Sketch a Figma abstrakt Komponenten / Symboler ewech vum Haaptzeechnen Modus - wat komesch ass well bei der Front-End Entwécklung sinn Komponenten fir vill Joren abstrakt.

Beim Entworf vun enger Stylpalette brauch ech keng Artboards oder Vector Tools. Ech wëll Tools gesinn fir harmonesch Faarwen ze wielen. Ech wëll virausgesi fir Saache wéi eng 8dp Ofstandskala oder eng Auswiel vun Typeskalen.

En Ikon ze designen erfuerdert e ganz anere Modus fir ze denken fir en Userflow ze designen. Een einfachen SVG Editor deen et erlaabt huet mir Naturvölker SVG Rechtecker, Kreeser, Linnen a Weeër zeechnen, da optimiséiert SVG Code exportéiert wier ideal.

Beim Design vun engem Komponent sollt ech net méi un eenzel Stiler nodenken - Ech sollt einfach Stiler aus menger virgedefinéierter Stylpalette wielen. Ech kann net just mat Stiler fir eng Komponente ufänken, well se Inkonsistenz aféieren an d'Effektivitéit vu mengem Design System verdünnen. Wann eng Stilpalette op der Plaz ass, soll se nëmmen an der Quell redigéiert ginn.

Ähnlech, wärend ech e Modul komponéieren, sollt ech nëmmen meng predefinéiert Komponentbibliothéik ausgesat ginn. Et solle keng Styl Properties an enger Sidebar sinn. Keng Vecteure Tools. Just eng Bibliothéik mat reusabelen Komponenten déi ech zéien a fale kënnen fir Moduler ze komponéieren.

Datselwecht gëllt fir Schiirme komponéieren. Zu dësem Zäitpunkt benotze mir nëmmen Komponenten a Moduler fir en UI ze bauen. Mir denken net un Stiler oder Formen oder aner kreativ Bestriewungen. Mir konzentréieren eis haaptsächlech op den Design vum Inhalt an de Benotzerfloss.

Jidd vun dësen Designstadien kéinten a separaten Tools ganz oder just an anere Modi am selwechte Tool stattfannen. Ech mengen net, datt et wichteg ass. Eng Saach ass sécher, awer, déi aktuellsten Designtools versoen net souguer de Prozess z'erkennen.

Eis Tools sollten e gudden Design encouragéieren

Designers hunn de rare Luxus fäeg ze sinn eng onendlech Unzuel vun eenzegaartege Stiler un e Projet ze addéieren ouni bemierkenswäert Auswierkungen. Braucht Dir e bësse méi grouss Schrëftgréisst? Maach just dat. Kee Biggie. Braucht Dir eng liicht heller Faarf? Just just et. Et ass cool. Dir kéint souguer verschidde Artboards am selwechte Projet kreéieren, jidderee benotzt verschidde verschidde Wäerter fir ähnlech Stiler an et géif wahrscheinlech onnotéiert ginn.

Äre Designinstrument wäert Iech ni soen datt Dir net eppes maache kënnt. Et wäert Iech ni ophalen fir eng Off-Mark Faarf ze benotzen. Et wäert Iech ni vermeiden datt Dir e Wäissraumwäert benotzt deen net an Ärer Ofstandskala gehéiert. Et wäert Iech ni warnen datt 20% vun der Bevëlkerung wirklech deen hellgrau Text net ze gesinn huet deen Dir just entworf hutt.

A firwat net ...? Well Design Tools egal.

Designtools sinn sou no an no verschéinert mat enger Visioun fir onlimitéiert Kreativitéit datt se d'Siicht verluer hunn wat et heescht sensibel ze designen, inklusiv ze designen, systematesch ze designen.

Einfach, Design Tools erlaben eis ze maachen wat d'Häll mer wëllen. Zu engem gewësse Mooss ass dësen Niveau vun onbegrenzte Kreativitéit nëtzlech, besonnesch an de Idééierungsfasen. Wéi och ëmmer als UI Designer sinn d'Majoritéit vun eisem Workflow net vill kreativ. Ëmgedréit, eise Workflow fuerdert weiderbenotzen, widerhuelung, Vertrautheet a Standardiséierung; brauch datt eis Tools wéineg maachen fir ze zefridden.

Dës onlimitéiert Fräiheet stëmmt mat der Realitéit vun der Webentwécklung. Zënter Entwéckler schaffen mam aktuellen Produkt, musse se all mam selwechte Code schaffen. D'Entwéckler kënnen net einfach isoléiert Schrëftgréissten oder zoufälleg Faarfwäerter an der Codebase addéieren. Als éischt, e Linter (eng Alarmmeldung Warnung iwwer schlecht schrëftleche Code) wäert méiglecherweis direkt ufänken ze kräischen. Wann net, da géif hir schaarf Handwierklechkeet wärend enger Code review beuerteelt ginn. Wann et iergendwéi duerch d'Risse rutscht, da géif e merkbare Leeschtungsimpakt schlussendlech den Alarm kléngen.

Ee vun de meeschte disruptive Probleemer déi ech op Produktteams gesinn ass den Diskonnekt tëscht Design- an Entwécklungsteams. D'Entwéckler hunn zënter Joren mat strikte Richtlinnen a Contrainten geschafft. Ausser eis Designinstrumenter dës sëlwecht Aschränkungen adoptéieren, wäert de Spalt nie méi schmuel ginn.

Mir sollten mat live Daten designen

Live Daten sinn a gewesser Mooss vun villen Tools integréiert ginn, wat super ze gesinn ass. Adobe XD hunn e puer wierklech ordentleche Feature fir gefälscht Daten ze generéieren déi ähnlech wéi typesch Live Daten. Invision Craft bitt och e puer cool Live Data Feature fir Sketch.

Live Date sollten awer net mat Text ophalen. Aner Elementer wéi Biller a Video kënnen e groussen Impakt op d'Benotzererfarung hunn andeems d'Laaschtzäit wesentlech erhéicht. Wann Dir um Internet schafft, Browser Dev Tools erlaabt Iech d'Verbindung ze throttelen fir sou vill wéi eng aner Internetgeschwindegkeet ze gesinn. Da kënnt Dir fir d'éischt gesinn wéi en neit Stéck Inhalt d'Benotzerfarung kéint beaflossen.

Sinn eis Designtools dës Luxusméiglechkeeten?

An engem Wuert: nee.

Wat méi no un den Design vum aktuellen Produkt kommt, wat méi hëllefräich an impactful eis Designaarbecht ka sinn.

De Web ass op. Eis Tools sollten och sinn.

Eent vun de wirklech schéine Saachen um Internet ass seng oppen Zougänglechkeet. Eng Websäit kann an all Browser op just iwwer all Apparat gekuckt ginn.

Wéi vergläicht dat mat Designinstrumenter? Gutt, e puer Deeg hat mäi Brudder David mech gefrot fir eng Design review vun enger App déi hien baut. Hien huet mer eng Sketch-Datei geschéckt. Wéi ech et opgemaach hunn, ass dat geschitt ...

Déi meescht Design Tools sinn walled Gäert. Wann ee Kolleg am Photoshop schafft, kann en anere Kolleg dëse Projet net op Sketch opmaachen. Et ass net emol genuch fir Äert ganzt Team datselwecht Tool ze hunn - se mussen och déiselwecht Versioun vun deem Tool benotzen.

Marvel a Figma maachen eng gutt Aarbecht hei, bitt gratis Pläng an innovativ Zesummenaarbecht Feature.

Also, wat ass d'Zukunft vun Designtools?

Innovatioun am Designtooling ass extrem wäertvoll an et gouf zënter kuerzem vill. Op Airbnb Design Tools hunn de Jon Gold an de Benjamin Wilkins um React-Sketchapp geschafft, dee React Komponenten hëlt a se a Sketch ofgeleent huet. Den Jon an de Ben hunn och un engem Mind-blowing neien Tool geschafft, déi Serviettschizzen huelen an iergendwéi se zu React Komponente verwandelen.

Den Adam Morse, de Brent Jackson an den John Otander schaffen un enger Suite vun Tools beim Compositor déi am Fong all d'Problemer an dësem Artikel léisen a vläicht d'Welt léisen.

Ech schaffen um Modulz, en neit Designtool an en oppene Quell Design System deen och zum Ziel ass d'Problemer ze léisen déi ech an dësem Artikel ernimmt hunn. Wann Dir interesséiert sidd, befollegt dann op Twitter fir Updates.

Iwwerdeems Innovatioun am Tooling wichteg ass, ass déi richteg Erausfuerderung Ausbildung. D'Design Gemeinschaft ass einfach net prett fir e systematescht Designinstrument. Vill Designer hu wéineg bis keen Interesse fir Systemer ze bauen. Fir e puer ass de JPG den Endziel - den Dribbble gär.

Mir mussen iergendwéi eng Kultur vu Rechenschaftspflicht inspiréieren. D'Entwéckler hunn eng Kultur vun der Rechenschaftspflicht fir Joren. Si hunn Tools fir hire Code am Scheck ze halen. Wann en Entwéckler ëmmer erëm vun hire strenge Code Richtlinnen ofwennt, kënnt Dir sécher sinn datt dëst Thema wäert adresséieren.

Mëttlerweil verschéinen Designer dacks Bierger vu Schichten a komplette Verschëldung mat wéineg Betreiung u Schichtenennamen, Gruppéierung an Uerdnung. Et ass ganz vill jidderengem. Zënter dem Ausgang (Rasterbild) gëtt den Input (Vektore Schichten) net beaflosst, gëtt et keng wierklech Belaaschtung op Designer fir organiséiert ze ginn. Designers entschëllegen dese Mangel un Organisatioun andeems se d'Konscht vum Design romantiséieren, selwer als Magier ze molen, déi op hiren eegene Geräter musse hannerloossen fir ze leeschten.

Mir mussen och eng Kultur vun der Inklusioun inspiréieren. Mir sollten aktiv Mësshandlung wéi ultraliicht Textfaarwen opmierksam maachen, déi Text schwéier maachen fir vill Leit ze liesen, oder super héichqualitativ Schrëftzeechen, déi Websäiten ze luede maachen, oder Musterlos UI Elementer, déi d'Saache schwéier verstinn fir Faarfblind Leit. De Moment gëtt dës Zort vu Malpractice ënner der Designgemeinschaft applaudéiert. Wa mir en intelligent Designinstrument begréissen, musse mir dës Kultur ëmsetzen.

Wann e systematescht Designinstrument fir eisen Häerzer ze gewannen ass, muss et als éischt educéieren.