Smrt za obradu strojeva!

Pronađite svoj idealni postupak dizajna pridržavajući se nekoliko jednostavnih principa umjesto krute skripte.

Čujete niz različitih savjeta o ispravnom i pogrešnom putu kreiranja aplikacije ili web stranice.

"Trebali biste koristiti Sketch."
"Sustavi dizajna ili GTFO."
"Pravi dizajneri dizajniraju 100% koda."
"Žičani okviri su gubljenje vremena."
"Ako ne pravite prototipove, ne radite to kako treba."
"Morate početi na papiru."

Mislili biste da nema dogovora o pravom načinu dizajniranja, ali postoji jedna točka koja je u velikoj mjeri nesporna - da vaš postupak treba biti linearan.

Klasični linearni pristup izgleda ovako:
istraživanje → skica → žičani okvir → statički sastavi → prototip → kod

Nekako je poput onih strojeva za proizvodnju Rube Goldberg-a, koji koriste za izradu Doritosa i Ding-Dong-a. Bacite ideju u procesni stroj, a nakon što se pire i oblikuje u oblik dok se vrti kroz korake, gotovi proizvod iskoči s druge strane! Predvidljivi! Učinkovit!

Vrsta.

Procesni strojevi rade, ali samo kad rade. Ne prilagođavaju se, što ih čini krhkim. Potrebno je samo jedan mali Sabot da zaustavi svoj procesni stroj.

Hank, a.k.a., "Sabot"

U posljednje vrijeme gledam pronalazak Doryja sa svojim djetetom, a dio "snimanja" snimaka stalno mi skače.

U filmu postoji ova hobotnica po imenu Hank:

Disney / Pixar

Septopus, tehnički. Njegov lik modela bio je toliko težak da bi radio s njim, pa su skinuli šipku da bi ga animiranje učinilo izvedivim. Ipak, s 4.000 zasebnih kontrola bilo mu je nevjerojatno izazovno raditi.

U ovom trenutku procesa su već prošli skice, prikazivanje i animacija - one niže faze vjernosti koje vam pomažu da brzo i jeftino pregledate hrpu ideja. I oni već imaju Real Izgrađena je instalacija karaktera, razrađeni tehnički detalji, odgovorena su temeljna pitanja.

Oni su u posljednjoj fazi animacije - 3D modeli u 3D okruženju. Mogli su se boriti na štetu proizvodnog plana i budžeta. Umjesto toga, napravili su nešto stvarno zanimljivo - vratili su se skiciranju.

Disney / Pixar

Skicirajući složeno kretanje Hankovih tartkala na papiru, mogli su ukloniti savršenu, fluidnu animaciju koju su tražili u djeliću vremena. Nakon što su bili zadovoljni redoslijedom, animirali su se u 3D prikazu. Dobili su bolji proizvod za manje vremena jer su odlučili cijeniti principe procesa umjesto recepta postupka.

Lijek za receptni postupak

Tim Finding Dory brže je napravio bolji proizvod donoseći odluke koje su prioritetnu brzinu i kvalitetu dali umjesto da se pridržavaju procesa usklađivanja.

Možda biste odabrali druge stvari koje će vam biti od koristi, ali ako radite u komercijalnom okruženju, fokus na slatkom mjestu između brzine i kvalitete trebao bi biti na vrhu vašeg popisa. Brzo dobivanje velikog posla vrsta je posla za profesionalne dizajnere i umjetnike.

Definiranje principa koji pokreću vaš proces je tek početak. Evo kako ih možete provesti u djelo.

Započnite s velikim pitanjima

Ako cijenite brzinu, započnite s projektom pronalazeći koja su najveća, najosnovnija pitanja. U Getting Real, to se naziva "epicentar dizajn":

Krenite od jezgre stranice i gradite prema van
Dizajn Epicentra usredotočuje se na pravu bit stranice - epicentar - a zatim gradi prema van. To znači da na početku ignorirate krajnosti: navigaciju / kartice, podnožje, boje, bočnu traku, logotip itd. Umjesto toga, prvo započnete u epicentru i osmislite najvažniji dio sadržaja.
Ono bez čega stranica apsolutno ne može živjeti je epitet. Na primjer, ako dizajnirate stranicu koja prikazuje post na blogu, sam blog blog je epicentar. Ne kategorije na bočnoj traci, ne zaglavlje na vrhu, ne obrazac za komentare pri dnu, već stvarna jedinica posta na blogu. Bez blogovske jedinice, stranica nije blog blog.
Tek kada ta jedinica bude gotova, počeli biste razmišljati o drugom najkritičnijem elementu na stranici. Nakon drugog najvažnijeg elementa prijeđite na treći i tako dalje. To je dizajn epicentra.
Epicenter dizajn izbjegava tradicijski model "napravimo okvir, a zatim ispustimo sadržaj". U tom se procesu oblikuje oblik stranice, uključuje se nav, zatim marketinške "stvari"
 umetnut je, a zatim se, na kraju, u osnovnu funkcionalnost, stvarnu svrhu stranice, ulijeva u sve ostalo prostora. To je proces unatrag koji uzima ono što bi trebao biti glavni prioritet i štedi ga za kraj.

Evo primjera zašto je to presudno. Radio sam na malo sporednoj aplikaciji iOS za aplikaciju koja je koristila jedinstveno, možda neizvedivo audio sučelje. Da nisam vrijedio brzinu, mogao bih potrošiti bezbroj sati dizajnirajući bezbroj detalja koji su počivali na temelju ove jedne čudne ideje. Dizajn dolazi prije koda u klasičnom linearnom procesu.

Umjesto toga, počeo sam kodirati kako bih otkrio je li ta ideja održiva ili ne. Nije bilo! Stoga sam prilagodio svoje planove i uštedio sam ogromnu količinu vremena i energije.

Samo pitajte, WMGMTCATMQITLAOT?

Jednom kada saznate pitanja na koja je potrebno odgovore, zapitajte se:
"Koji mi medij daje najjasniji odgovor na moja pitanja u najmanje vremena?"

U slučaju mog sporednog projekta, odgovor je bio kod. Za stranicu na Basecamp.com odgovor je često tekst ili skica. Za vas bi to moglo biti posve drugo.

Znajući kada treba mijenjati brzine

To vam daje mjesto za početak, ali kako znati kada je vrijeme za prelazak na drugi medij? Kad pogodite otpor.

Razmislite o vožnji automobila. Krstarite autocestom - motor se razvlači poput zadovoljnog mačića. Ali onda kreneš voziti uzbrdo. Zupčanica u kojoj ste bili odlična je za krstarenje, ali nije za penjanje po brdu. Kako biste održali brzinu, prebacite se na novi stupanj prijenosa.

Ista stvar ovdje. Ali za razliku od automobila, nema čvrstog pokazatelja da ste naišli na preveliki otpor u svom mediju koji odaberete. Srećom, većina dizajnera i umjetnika čvrsto se drži kada trebate prebaciti na medij koji nudi više vjernosti. Ovo je dio koji se nakon svega podudara s klasičnom niskom vjernošću → linearnom linijom visoke vjernosti. Znate da ste spremni prijeći na skiciranje kada skice prestanu pružati korisni uvid.

Nakon što ste pogodili ovo pitanje, smislite sljedeći najvažniji skup pitanja i zapitajte se ponovo: „koji medij mi daje najjasniji odgovor na moja pitanja u najmanje vremena?“

Drugi je slučaj - prelazak natrag na nižu vjernost - stroži. I zato što ljudi manje vježbaju u tome, a i zato što je lukav. Krenite raditi na kodu. Radite sa 100% vjernošću tako da nema ograničenja u mogućnosti medija da odgovara na pitanja. Ali postoji ograničenje u njegovoj sposobnosti da brzo odgovara na pitanja.

Kad smatrate da ne idete stazama jer se čini previše posla, to je zaista dobar znak da se trebate povući. Kad se stvari osjećaju kao da jednostavno ne kliknu kako bi trebale, vrijeme je za ponovnu procjenu. Budite pažljivi i počet ćete razvijati osjećaj za to.

Koristite medij u svoju korist

Postoji treći slučaj za prelazak na medij ili lijepljenje s njim. Ovaj se ne brine za otpor, samo ga zanima temeljna istina; proces utječe na ishod. Baš kao što će crtanje olovkom izgledati drugačije nego crtanje markerom, tako će i dizajn u pregledniku proizvesti drugačiji rezultat od dizajna u Sketch-u.

Što više razumijete kako medij utječe na vaš rad - vrstu alata koji ga ostavlja - to više možete koristiti u svoju korist. Želite da vaš dizajn bude ekspresivan? Vjerojatno je bolje raditi s vizualnim alatom poput Sketch, Illustrator ili čak * gasp * Photoshopom. Želite minimalan, lagan dizajn? Držite se dizajna u kodu.

Praktičan primjer

Sad kad sam se raspitao o opasnostima postupka propisivanja, želio bih podijeliti s vama ... moj postupak. Nije za vas da slijedite korak po korak! Samo da vam dam primjer iz stvarnog života kako možete koristiti principe za vođenje svog procesa.

Otvaramo novi način rada s klijentima u Basecampu, a moj zadatak je bio stvoriti novu stranicu na Basecamp.com kako bih je plasirao na tržište. Evo kako se to odigralo:

Određivanje velikih pitanja, odabir medija

Ovo nije novo mjesto ili posve novi izgled. Prvo sam trebao shvatiti svrhu ove stranice, što ona pokušava reći i cjelokupnu strukturu.

"Koji mi medij daje najjasniji odgovor na moja pitanja u najmanje vremena?"

Komponi i skice su izvan. Ovo je urezanje u postojeći dizajn i postojeći predložak. Mogao bih skočiti ravno na kod, ali oznaka je u ovom trenutku buka. Tekst je sasvim u pravu.

Hrpa napola pečenog primjerka

Sve veća vjernost

Nisam se dovoljno dugo držao teksta da završim svu kopiju stranice. Jednom kad sam imao obris i osjećaj kako želim razgovarati o značajci, prebacio sam zupčanike u kod.

Zašto?

Dokument s tekstom nije mi mogao reći ništa o tome hoće li linija ostaviti udovicu, da li se odlomak "osjeća" dugo, kako će slike teći itd. Trebala mi je više vjernosti. Na neka od novih pitanja mogao je odgovoriti statički komp, ali to ne bi odgovaralo na pitanja u vezi s primjerom kopije, osim ako ne izgubim vrijeme usklađivanja računala točno s šifrom. Ne hvala.

Rad kroz kopiju izmjena u kodu

Selektivno smanjuje vjernost

Nakon još nekoliko krugova revizija kopija, stranica je poprimala oblik. Vizualno, to je bilo mehanički i podmuklo. Htio sam da to bude izražajnije, pa sam se prebacio na Sketch kako bih usmjerio neke ideje.

Mogao sam ostati kod u većem dijelu, ali sa Sketchom bih mogao otpustiti gomilu ideja mnogo brže nego što bih ih mogao kodirati. Također mi omogućuje izravno uspoređivanje tih ideja jedni s drugima, i ne bih ostavio gnijezdo CSS pacova od svega. Win-win-win.

Hrpa napola pečenih kompasa Sketch

Primijetite kako nijedan od njih nije u potpunosti pečen? To je zato što im nije važno! Nisu za prezentaciju klijenta ili za rukovanje razvojnim programerima. Oni su tu da mi pomognu da shvatim, a onda su smeće. Uložiti vrijeme za njihovo poliranje bilo bi posve gubitak napora.

Završetak

Jednom kad sam osjetio smjer, ostatak puta bio je šifriran. Poliranje kopija, zabijanje snimki zaslona i uvijek evaluacija u odnosu na završno, ključno pitanje: "Je li ovo spremno za isporuku?". Živu stranicu Klijenti na Basecampu možete pogledati ovdje.

Ne radi se tako o svakom projektu. Ponekad ću nešto nacrtati u programu Procreate, ponekad ću započeti s brzim i prljavim vizualnim komp. Sve ovisi o konkretnom projektu.

Nadam se da će vam dati uvid u to kako možete koristiti principe za vođenje svog postupka od slučaja do slučaja, bez osjećaja kao da stalno izmišljate kotač.

Razmislite o svom procesu i vrsti posla koji obavljate. Definirajte najvažnija načela, usredotočite se prvo na krupne stvari i nastavite ispitivati ​​je li medij u kojem trenutno radite pravi. Vaš će rad biti bolji za to.