En komponentbaseret arbejdsgang til skitse

Den måde, vi designer på, ændrer sig, og det samme er vores værktøjer.

Giv folk et værktøj, og de finder forskellige måder at bruge det på. Ingen designere fungerer på samme måde, men jeg forudsiger, at det vil ændre sig i løbet af de næste par år. Moderne digitalt design voksede ud af hacking af fotoredigeringsprogrammer til at tegne brugergrænseflader, miste oversigt over arbejde inden i systemer designet til ikke at miste arbejde og en uendelig cyklus med at genskabe eksisterende skærme, når ting går tabt i oversættelse ...

I løbet af det sidste årti begyndte designere at revurdere deres tilgang og tvingede hen til en komponentbaseret arbejdsgang. Photoshop introducerede Smart Objects (at være i stand til at "placere" andre Photoshop-filer i en PSD). Denne nye funktion gjorde det muligt for designere at dele en centraliseret version af en komponent uden at bekymre sig om at have duplikater af denne komponent på tværs af deres filer. Desværre blev dette aldrig rigtig til en arbejdsgang på tværs af designteams - det var mere en undtagelse end en regel.

Da Sketch introducerede symboler, blev værdien af ​​komponenter mere klar. På trods af at de er begrænset til en enkelt fil, gør symboler komponenter ekstremt let: oprette en komponent og derefter genbruge den uendeligt i hele filen på tværs af tegnebræt og sider. Oprindeligt statisk blev symboler snart en mere robust funktion med responsiv ændring af størrelsen og evnen til at overskrive værdier. Jeg er overbevist om, at symboler vil have mere kraftfulde tilpasningsmuligheder i fremtiden.

Det virkelige gennembrud kom, da Sketch aktiverede redesymboler inde i andre symboler. Selv som en enkelt designer er der en enorm værdi ved korrekt at definere, navngive og strukturere symboler. Tilfældigvis er det sådan, hvordan udviklere strukturerer komponenter også: starter i bunden, hvor de definerer ting på et mikroniveau, helt op til hele skærme på et makroniveau.

En af Abstracts styrker er at give en måde for designere at version og styre deres arbejde. Abstrakte spor ændringer foretaget til enhver komponent i en Sketch-fil, så du og dit team kan sammenligne forskellige versioner på komponentniveau. Dette betyder, at jo flere symboler i en Sketch-fil, desto mindre sandsynligt er det, at du (eller nogen af ​​dine kolleger) løber ind i konflikter. Med Abstract kan redigering af et ikon, der bruges på hvert enkelt lag, ikke forårsage nogen konflikter med andre, der arbejder på den samme fil. Og hvis der sker en konflikt, håndterer Abstract denne situation yndefuldt.

Som et eksempel er det her, hvordan jeg strukturerer de sketch-filer, vi bruger til at designe Abstract. Mange af mine yndlings designteams bruger lignende arbejdsgange, og det ser ud til at skalere godt, uanset hvor stort / lille teamet er.

primitiver

farver

Hvert projekt starter med at definere en farvepalet. Brandfarver, tekstfarver, UI-farver, farver til forskellige typer handlinger ... Fra det tidspunkt er det generelt ikke en god ide at bruge en farve, der ikke er en del af paletten, medmindre der er en virkelig, rigtig god grund (hvilket betyder, at den sandsynligvis skal gå ind i paletten).

Tekststilarter og lagstilarter

Andet på listen er typografi. Lav en liste over de nødvendige skrifttypestørrelser i projektet. Jo kortere listen er, desto lettere er det at vedligeholde. Som med farverne er der generelt ikke behov for at afvige fra denne liste.

Tilføjelse af nogle modifikatorer til tekstformerne tager denne liste et skridt videre (farve, fontvægt, teksttransformationer ...), men dette gør også enten listen vanskelig at scanne ved at tilføje alle de forskellige permutationer eller vil tvinge konstant tilpasning til elementer på liste. (Dette er et område, hvor jeg føler, at Sketch kan og vil blive bedre med tiden. En enkel justering af overskrivning bør ikke bryde forbindelsen med den definerede tekstform.)

komponenter

Her bliver tingene virkelig spændende. Indlejring af symboler inde i andre symboler skaber niveauer og niveauer af komponenter, der er lette at vedligeholde og holde opdateret.

NIVEAU 1: Foundation

Niveau 1-symboler inkluderer ikke andre symboler. De er det laveste niveau i vores stak af komponenter.

  • Ikonografi: Mørke, lette og tonede varianter af vores ikonsæt, med skiver opsat på en måde, som udviklere let kan åbne Sketch-filen og få fat i de aktiver, de har brug for
  • Avatarer: Et sæt på 8 avatarer, vi bruger i hele appen. De er ufuldkomne fotos fra et forskellige sæt mennesker.

NIVEAU 2: Blokke på lavere niveau

Niveau 2-symboler kombinerer primitiver og niveau 1-symboler.

  • Formelementer: Knapper, indgange, afkrydsningsfelter, radiokontroller ...
  • Celler: Mennesker, kommentarer, forpligtelser, filer, sider, tegnebræt ...
  • Subnavigation: Overskrifter med valgfri handlinger eller ikoner
  • Bannere: Kombinerer tekst, ikoner og knapper

NIVEAU 3: Blokke på mellemniveau

Niveau 3-symboler kombinerer symboler fra niveau 2 og niveau 1. Dette er mere avancerede symboler, som normalt ender med at blive brugt i det faktiske design.

  • Sidebjælker: Lister over celler, kan tjene som navigation
  • Hovedindholdsområder: Alt fra et gitter af projekter til en detaljeret engagement, herunder handlinger, titel, beskrivelse, forhåndsvisninger og kommentarer
  • App-overskrifter: Wayfinders, hjælpe folk med at vide, hvor de er inde i appen, blanding af tekstetiketter og ikoner
  • Modaler: Handlinger, handlingsbekræftelse, fulde strømme ...

Jeg grupperer typisk niveau 3-symboler på en side, så jeg hurtigt kan sammenligne dem for konsistens.

NIVEAU 4: Kompositioner

At have en så ekspansiv samling af komponenter, indeholder tegnebrættene, der har det aktuelle design, normalt ikke mere end en håndfuld symboler. Den første side i min Sketch-fil indeholder alle nøgelskærmbilleder i vores app, mens andre sider er dedikeret til strømme inklusive alle mulige kanter.

Så hvordan vil design ændres?

Design og engineering arbejdsgange kryber langsomt mod hinanden. I designets slutning tegner værktøjer som Sketch ny og mere kraftfuld funktionalitet med hver opdatering, der kombineres med Abstract skaber en solid, forudsigelig og pålidelig arbejdsgang. På ingeniørsiden er der nye udviklinger, der bygger bedre komponenter til en række platforme. Begge sider standardiserer lignende processer, og det er mig begejstret.

Standardisering kombineret med omfattende nye værktøjer og et fælles ordforråd løfter designprocessen til det niveau, som vores tekniske kolleger har arbejdet på i årtier. Kast abstrakt i blandingen, og pludselig har alle på et team adgang til en rig historie om, hvorfor ting er som de er, de beslutninger, der førte til den aktuelle tilstand af arbejdet, og en måde at øjeblikkeligt begynde at bidrage på en meningsfuld måde .

At bygge produkter af høj kvalitet er en teamindsats, og vi alle her på Abstract er glade for at spille en kritisk rolle i udviklingen af ​​denne proces.

Abstract er i øjeblikket i Private Alpha. Vi arbejder mod en offentlig beta i slutningen af ​​andet kvartal. Feedback fra vores testere har været utroligt hjælpsom, da vi har forfinet strømme og forbedret den samlede oplevelse. Mere end nogensinde tror vi nu, det er tid for designere at have den rette infrastruktur til at fremhæve værdien af ​​design. Nye batches invitationer ud hver uge. Tak for din støtte og opmuntring. Vi ser frem til at gøre fantastiske ting sammen.

Hvis du ikke har tilmeldt dig Private Alpha venteliste, kan du gøre det her. Og hvis du er interesseret i at hjælpe os med at redesigne designprocessen, leder vi efter fantastiske mennesker med en række oplevelser, perspektiver og færdigheder. Tjek vores åbne positioner og ansøg nu!