Død til processmaskiner!

Find din ideelle designproces ved at holde sig til et par enkle principper i stedet for et stift script.

Du hører masser af forskellige råd om den rigtige og forkerte måde at gå på til at designe en app eller websted.

"Du skal bruge Sketch."
“Designsystemer eller GTFO.”
“Ægte designere designer 100% i kode.”
"Trådrammer er spild af tid."
"Hvis du ikke laver prototyper, gør du det ikke rigtigt."
"Du skal starte på papir."

Du skulle tro, at der overhovedet ikke er nogen aftale om den rigtige måde at designe, men der er et punkt, der stort set er fri for kontroverser - at din proces skal være lineær.

Den klassiske lineære tilgang ser sådan ud:
forskning → skitse → wireframe → statisk comps → prototype → code

Det er ligesom de Rube Goldberg-esque fremstillingsmaskiner, de bruger til at fremstille Doritos og Ding-Dongs. Slip en idé ind i processmaskinen, og efter at have blitt moset og formet i form, når den snor sig gennem trinene, springer et færdigt produkt ud på den anden side! Forudsigelig! Effektiv!

Slags.

Processmaskiner fungerer, men kun når de fungerer. De tilpasser sig ikke, og det gør dem skrøbelige. Alt, hvad det kræver, er en lille Sabot for at slibe din procesmaskine til at stoppe.

Hank, a.a. “Sabot”

Jeg har sidst set Finding Dory med mit barn for nylig, og en del af "lavelsen af" optagelser springer fortsat ud mod mig.

I filmen er der denne blæksprutte, der hedder Hank:

Disney / Pixar

Septopus, teknisk. Hans karaktermodel var så besværlig at arbejde med, de sprang ud af en tentakel for at gøre det muligt at animere ham. Stadig med 4.000 separate kontroller var han utroligt udfordrende at arbejde med.

På dette tidspunkt i processen er de godt forbi tegninger og gengivelser og animatik - disse fidelity stadier, der hjælper dig med at dyrke en masse ideer hurtigt og billigt. De fik allerede rigtigt også. Karakterriggen blev bygget, tekniske detaljer udarbejdet, grundlæggende spørgsmål besvaret.

De er i den sidste animationsfase - 3D-modeller i 3D-miljøer. De kunne have solderet videre på bekostning af produktionsplanen og budgettet. I stedet gjorde de noget virkelig interessant - de gik tilbage til at tegne.

Disney / Pixar

Ved at skitsere den komplekse bevægelse af Hanks tentakler på papir, kunne de sømme den perfekte, flydende animation, de ledte efter i en brøkdel af tiden. Når de var tilfredse med sekvensen, ville de animere i 3D for at matche. De fik et bedre produkt på kortere tid, fordi de valgte at værdsætte procesprincipper i stedet for en procesrecept.

Kuren mod en receptpligtig proces

Finding Dory-teamet lavede et bedre produkt hurtigere ved at tage beslutninger, der prioriterede hastighed og kvalitet i stedet for at holde sig til en rote-proces.

Du vælger muligvis andre ting, du vil sætte pris på, men hvis du arbejder i en kommerciel indstilling, skal fokusering på det søde sted mellem hastighed og kvalitet være øverst på din liste. At snu sig rundt om stort arbejde er lidt af en stor ting for professionelle designere og kunstnere.

At definere de principper, der driver din proces, er bare begyndelsen. Sådan kan du omsætte dem til praksis.

Start med de store spørgsmål

Hvis du værdsætter hastighed, skal du starte et projekt ved at finde ud af, hvad de største, mest grundlæggende spørgsmål er. I Getting Real kaldes dette ”epicenter design”:

Start fra sidens kerne og bygg udad
Epicenter-design fokuserer på den sande essens på siden - episentret - og bygger derefter udad. Dette betyder, at man i starten ignorerer ekstremiteterne: navigation / faner, sidefod, farver, sidebjælke, logo osv. I stedet starter man ved episentret og designer det vigtigste indhold først.
Uanset hvad siden absolut ikke kan leve uden, er episoden. Hvis du f.eks. Designer en side, der viser et blogindlæg, er selve blogindlægget episentret. Ikke kategorierne i sidefeltet, ikke overskriften øverst, ikke kommentarformularen i bunden, men den faktiske blogindlægsenhed. Uden blogindlægsenheden er siden ikke et blogindlæg.
Først når enheden er færdig, ville du begynde at tænke på det næst mest kritiske element på siden. Derefter går du efter det andet mest kritiske element videre til det tredje osv. Det er episenterets design.
Epicenter-design undgår den traditionelle "lad os bygge rammen og derefter droppe indholdet" -modellen. I denne proces er sideformen bygget, derefter er nav'en inkluderet og derefter marketing “stuff”
 indsættes, og derefter, til sidst, hældes kernefunktionaliteten, det aktuelle formål med siden, ind i, hvad der er plads tilbage. Det er en baglæns proces, der tager det, der skal være den højeste prioritet og gemmer det til slutningen.

Her er et eksempel på, hvorfor dette er afgørende. Jeg arbejdede på et lille sideprojekt iOS-app, der brugte en unik, muligvis umulig lydgrænseflade. Hvis jeg ikke værdsatte hastighed, kunne jeg have brugt utallige timer på at designe de utallige detaljer, der hviler på grundlaget for denne ene ulige idé. Design kommer trods alt før kode i den klassiske lineære proces.

I stedet begyndte jeg med kode for at finde ud af, om denne idé var levedygtig eller ej. Det var det ikke! Så jeg justerede mine planer og sparede mig enorm tid og energi.

Bare spørg, WMGMTCATMQITLAOT?

Når du først har kendt de spørgsmål, der har brug for svar, skal du spørge dig selv:
”Hvilket medium giver mig det klareste svar på mine spørgsmål på mindst mulig tid?”

For mit sideprojekt var svaret kode. For en side på Basecamp.com er svaret ofte tekst eller en skitse. For dig kan det være noget helt andet.

At vide, hvornår gear skal skiftes

Det giver dig et sted at starte, men hvordan ved du, hvornår det er tid til at skifte til et andet medium? Når du rammer modstand.

Tænk på at køre en bil. Du sejler ad motorvejen - motoren skylles væk som en tilfreds kill. Men så begynder du at køre op ad en bakke. Det gear, du befinder dig i, var fantastisk til sejlsport, men ikke til bjergbestigning. For at bevare din hastighed skifter du ind i et nyt gear.

Samme ting her. Men i modsætning til biler er der ingen bunnsolid indikator for, at du har ramt for meget modstand i dit medium, du vælger. Heldigvis har de fleste designere og kunstnere et solidt greb om, når du skal skifte til et medium, der tilbyder mere tro. Dette er den del, der alligevel stemmer overens med den klassiske lineære lave tro → høj trofasthedsproces. Du ved, at du er klar til at gå videre fra skitsering, når skitsering holder op med at give dig nyttig indsigt.

Når du har nået dette punkt, skal du regne ud det næste vigtigste sæt spørgsmål og spørge dig selv igen: "hvilket medium giver mig det klareste svar på mine spørgsmål på mindst mulig tid?"

Det andet tilfælde - skiftende tilbage til en lavere tro - er hårdere. Både fordi folk er mindre øvede på det, og også fordi det er vanskeligt. Tag arbejde i kode. Du arbejder med 100% trofasthed, så der er ingen grænse for mediets evne til at besvare spørgsmål. Men der er en grænse for dens evne til at besvare spørgsmål hurtigt.

Når du føler dig ikke forfølge stier, fordi det føles som for meget arbejde, er det et rigtig godt tegn på, at du er nødt til at gå ud. Når ting føles som om de bare ikke klikker som de burde, er det tid til at revurdere. Vær opmærksom, og du vil begynde at udvikle en fornemmelse af det.

Brug et medium til din fordel

Der er en tredje sag til at skifte til - eller holde sig til - et medium. Denne er ligeglad med modstand, den bekymrer sig kun om en grundlæggende sandhed; proces påvirker resultatet. Ligesom at tegne noget med en blyant vil se anderledes ud end at tegne det med en markør, vil design i browseren give et andet resultat end at designe i Sketch.

Jo mere du forstår, hvordan et medium påvirker dit arbejde - den slags værktøjsmærker, det efterlader - jo mere kan du bruge det til din fordel. Vil du have, at dit design skal være udtryksfuldt? Sandsynligvis bedre at arbejde med et visuelt værktøj som Sketch, Illustrator eller endda * gispe * Photoshop. Vil du have et minimalt, let design? Hold dig til design i kode.

Et praktisk eksempel

Nu hvor jeg er blevet brudt om farerne ved receptpligtig proces, vil jeg gerne dele med dig ... min proces. Ikke for dig at følge trin for trin! Bare for at give dig et ægte eksempel på, hvordan du kan bruge principper til at guide din proces.

Vi lancerer en ny måde at arbejde med klienter på Basecamp, og mit job var at oprette en ny side på Basecamp.com for at markedsføre den. Sådan spillede det sig:

At bestemme store spørgsmål, vælge et medium

Dette er ikke et nyt sted eller et helt nyt layout. Først var jeg nødt til at finde ud af formålet med denne side, hvad den prøver at sige og den overordnede struktur.

”Hvilket medium giver mig det klareste svar på mine spørgsmål på mindst mulig tid?”

Comps og skitse er ude. Dette er opdelt i et eksisterende design og en eksisterende skabelon. Jeg kunne springe direkte til kode, men markeringen er støj på dette tidspunkt. Teksten er helt rigtig.

En flok halvbagt kopi

Øget tro

Jeg holdt mig ikke længe med tekst til at afslutte al kopien til siden. Når jeg havde en oversigt og en fornemmelse af, hvordan jeg ville tale om funktionen, skiftede jeg gear til kode.

Hvorfor?

Et tekstdokument kunne ikke fortælle mig noget om, hvorvidt en linje ville efterlade en enke, om et afsnit "føltes" længe, ​​hvordan billederne ville flyde osv. Jeg havde brug for mere tro. Nogle af de nye spørgsmål kunne have været besvaret af en statisk kompatibilitet, men det ville ikke have besvaret spørgsmål om kopipasning, medmindre jeg spildt tid, der matchede komponenten nøjagtigt til koden. Nej tak.

Arbejder gennem kopieringsredigeringer i kode

Selektivt faldende tro

Efter nogle flere runder med kopierevisioner begyndte siden at tage form. Visuelt var det mekanisk og undervejsende. Jeg ønskede, at det skulle være mere udtryksfuldt, så jeg skiftede over til Sketch for at riffe på nogle ideer.

Jeg kunne have opholdt sig i kode for det meste, men med Sketch kunne jeg affyre en masse ideer meget hurtigere end jeg kunne kode dem. Det giver mig også direkte sammenligning af disse ideer mod hinanden og ville ikke efterlade et CSS-rotte rede fra al den kerne. Win-win-win.

En flok halvbagt Sketch-komp

Bemærk, hvordan ingen af ​​dem er fuldt bagt? Det er fordi de ikke betyder noget! Disse er ikke til en klientpræsentation eller til udviklerudlevering. De er der for at hjælpe mig med at finde ud af noget, så er de skrald. Det ville have været et totalt spild af indsats at investere tid i at polere dem.

Efterbehandling

Når jeg engang havde en fornemmelse af retningen, var det kode resten af ​​vejen. Polering af kopi, negling af skærmbilleder og altid evaluering i forhold til det sidste centrale spørgsmål: "Er dette klar til afsendelse?". Du kan se på de live klienter i Basecamp siden her.

Dette er ikke, hvordan hvert projekt spiller ud. Nogle gange vil jeg tegne noget i Procreate, nogle gange starter jeg med en hurtig og beskidt visuel komp, nogle gange skriver jeg kopi i Sketch, nogle gange arbejder jeg 100% med kode. Det hele afhænger af det aktuelle projekt.

Forhåbentlig giver det dig en vis indsigt i, hvordan du kan bruge principper til at guide din proces fra sag til sag uden at føle, at du konstant genopfinder rattet.

Tænk på din proces og den slags arbejde, du udfører. Definer de principper, der er vigtige for dig, fokuser først på de store ting, og hold spørgsmålstegn ved, om det medium, du arbejder i, er det rigtige i øjeblikket. Dit arbejde bliver bedre til det.