Halál a feldolgozó gépekre!

Megtalálhatja az ideális tervezési folyamatot, ha egy merev szkript helyett néhány egyszerű alapelvre ragaszkodik.

Rengeteg különféle tanácsokat hallatsz arról, hogyan lehet helyes és rossz utat hozni egy alkalmazás vagy weboldal tervezéséhez.

"A Vázlatot kell használnia."
„Design Systems vagy GTFO.”
"Az igazi tervezők 100% -ban tervezik a kódot."
"A drótvázak időpocsékolás."
"Ha nem prototípusokat készít, akkor nem jól csinálja."
"Papírra kell kezdenie."

Gondolod, hogy nincs egyetértés a tervezés helyes módjáról, de van egy pont, amely nagyrészt mentes az ellentmondásoktól - hogy folyamatának lineárisnak kell lennie.

A klasszikus lineáris megközelítés így néz ki:
kutatás → vázlat → drótváz → statikus alkatrészek → prototípus → kód

Olyan, mint azok a Rube Goldberg-esque gyártógépek, amelyeket Doritos és Ding-Dong gyártásához használnak. Dobj el egy ötletet a feldolgozógépbe, és miután összetörölve és formára öntve, ahogy a lépteken áthalad, a késztermék előbukkan a másik oldalról! Megjósolható! Hatékony!

Olyasmi.

A feldolgozógépek működnek, de csak akkor, amikor működnek. Nem alkalmazkodnak, és ez törékenyé teszi őket. Csak egy kis Sabot szükséges ahhoz, hogy megállítsa a folyamatgépet.

Hank, ak.a. „a Sabot”

Nemrégiben figyeltem a Dory megtalálását a gyerekkel, és a „készítés” felvételeinek egy része rám ugrik.

A filmben van ez a Hank nevű polip:

Disney / Pixar

Septopus, technikailag. Karaktermodelljével olyan nehéz volt dolgozni, hogy lecsúsztak egy csápjáról, hogy animálhassák. Ennek ellenére 4000 különálló vezérlővel hihetetlenül nagy kihívást jelentett a munka.

A folyamat ezen pontján már jóvolták a vázlatokat, megjelenéseket és animációkat - azokat az alacsonyabb hűségfokozatokat, amelyek segítségével gyorsan és olcsón elindíthat egy csomó ötletet. Már ők is valósítottak meg. Épült a karakterfelszerelés, kidolgozták a műszaki részleteket, válaszoltak az alapvető kérdésekre.

Az animáció utolsó szakaszában vannak - 3D modellek 3D-s környezetben. Katonákat hozhattak volna a termelési ütemterv és a költségvetés rovására. Ehelyett valami igazán érdekes dolgot csináltak - visszatértek a vázlathoz.

Disney / Pixar

A Hank csápjainak komplex mozgását papírra vázolva az idő töredékén átvághatták a tökéletes, folyékony animációt, amelyet kerestek. Miután elégedettek voltak a szekvenciával, 3D-ben animáltak, hogy megfeleljenek. Rövidebb idő alatt kaptak egy jobb terméket, mert úgy döntöttek, hogy a folyamat elveit értékelik a folyamat előírása helyett.

A vényköteles eljárás gyógymódja

A Finding Dory csapata gyorsabban készített egy jobb terméket, mivel olyan döntéseket hozott, amelyek a sebességet és a minőséget részesítették előnyben, ahelyett, hogy ragaszkodnának a szavazási folyamathoz.

Kiválaszthat más értékelendő dolgokat is, de ha kereskedelmi környezetben dolgozik, akkor a lista tetején kell lennie a sebesség és a minőség közötti édes helyre összpontosítva. A nagy munka gyors megfordítása végül is nagy probléma a hivatásos tervezők és művészek számára.

A folyamatot vezérlő alapelvek meghatározása csak a kezdet. Így állíthatja be őket a gyakorlatba.

Kezdje a nagy kérdésekkel

Ha értékeli a sebességet, indítsa el a projektet azzal, hogy kitalálja, mi a legnagyobb, legalapvetőbb kérdés. A Getting Real programban ezt epicentrális kialakításnak hívják:

Kezdje az oldal magjától, és építse kifelé
Az epicentrum kialakítása az oldal valódi lényegére - az epicentrumra - összpontosít, majd kifelé épít. Ez azt jelenti, hogy eleinte figyelmen kívül hagyja a végtagokat: a navigációs / fülek, a lábléc, a színek, az oldalsáv, a logó stb., Ehelyett az epicentrumban indul, és először a legfontosabb tartalomdarabot tervezi.
Bármi az oldal abszolút nélkül nem tud élni, az az epicentrum. Például, ha olyan oldalt tervez, amelyen blogbejegyzés jelenik meg, akkor maga a blogbejegyzés az epicentruma. Nem az oldalsávban található kategóriák, nem a fejléc a tetején, nem az alsó megjegyzés forma és a tényleges blogbejegyzés. A blogbejegyzés-egység nélkül az oldal nem blogbejegyzés.
Csak akkor, amikor ez az egység elkészült, elkezdené gondolkodni az oldal második legkritikusabb elemén. Akkor a második legkritikusabb elem után lépjen a harmadikra ​​és így tovább. Ez az epicentrum kialakítása.
Az epicentrum kialakítása megkerüli a hagyományos „építsük fel a keretet, majd dobjuk el a tartalmat” modellt. Ebben a folyamatban az oldal alakja felépül, a navigáció bekerül, majd a marketing „cucc”
 beillesztésre kerül, majd végül az alapfunkciók, az oldal tényleges célja, kerülnek rá, hogy maradjon hely. Ez egy visszafelé haladó folyamat, amely figyelembe veszi a legfontosabb prioritást, és elmenti a végéig.

Íme egy példa arra, hogy miért döntő fontosságú. Dolgoztam egy kis oldalsó iOS alkalmazáson, amely egy egyedi, esetleg nem működőképes audio felületet használt. Ha nem értékelném a sebességet, számtalan órát töltöttem volna a számtalan részlet megtervezésével, amelyek ezen egy furcsa ötlet alapjául szolgáltak. Végül is a klasszikus lineáris folyamatban a formatervezés előzi meg a kódot.

Ehelyett kóddal kezdtem, hogy kitaláljam, vajon ez az ötlet életképes-e vagy sem. Nem volt! Tehát kiigazítottam a terveimet, és óriási időt és energiát takarítottam meg magamnak.

Csak kérdezd, WMGMTCATMQITLAOT?

Miután megismerte azokat a kérdéseket, amelyekre először válaszolni kell, kérdezd meg magadtól:
"Melyik adathordozó adja a legtisztább választ a kérdéseimre a legkevesebb idő alatt?"

Az én mellékprojektem esetében a válasz kód volt. A Basecamp.com oldalán a válasz gyakran szöveges vagy vázlatos. Számodra ez valószínűleg valami más lehet.

Tudva, mikor kell váltani

Ez ad helyet a kezdéshez, de honnan tudja, mikor kell átváltani egy másik adathordozóra? Amikor megüt az ellenállás.

Gondoljon egy autóvezetésre. Haladsz az autópályán - a motor elürül, mint egy elégedett cica. De akkor elindulsz egy dombra. A felszerelés, amelyben van, nagyszerű volt cirkálásra, de a hegymászáshoz nem. A sebesség fenntartása érdekében új sebességváltóra vált.

Ugyanaz a helyzet itt. Az autókkal ellentétben azonban nincs olyan sziklaszilárd mutató, amely szerint túl nagy ellenállást mutatott a választott közegben. Szerencsére a legtöbb tervező és művész megbízhatóan kezeli, amikor át kell váltania egy olyan hordozóra, amely több hűséget kínál. Végül is ez a rész illeszkedik a klasszikus alacsony hűségű → nagy hűségű lineáris folyamathoz. Tudod, hogy készen áll a vázlat továbblépésére, amikor a vázlat nem ad hasznos betekintést.

Miután elérted ezt a pontot, találd ki a következő legfontosabb kérdéscsoportot, és tedd fel újra magadtól: „melyik médium adja a legtisztább választ a kérdéseimre a legkevesebb idő alatt?”

A második eset - visszatérve az alacsonyabb hűségre - keményebb. Mind azért, mert az emberek kevésbé gyakorolják azt, és azért is, mert ez trükkös. Vedd a kódot. 100% -os hűséggel dolgozik, tehát a médium képességére nincs korlátozása. De korlátozott a képessége, hogy gyorsan válaszoljon a kérdésekre.

Ha úgy érzi, hogy nem halad az utakon, mert túl soknak érzi magát, ez egy nagyon jó jel, hogy vissza kell térnie. Amikor a dolgok úgy érzik, hogy csak nem kattannak rá úgy, ahogy kellene, ideje újraértékelni. Légy tudatában, és elkezded fejleszteni az iránti érzését.

Hordozó használata az Ön előnyeihez

Van egy harmadik eset az adathordozóra való váltáshoz vagy az adagoláshoz. Ezt nem érdekli az ellenállás, csak egy alapvető igazságról gondoskodik; A folyamat befolyásolja az eredményt. Csakúgy, mint valami ceruzarajzolás, másképp fog kinézni, mint a jelölővel történő rajzolás, így a böngészőben történő tervezés más eredményt fog eredményezni, mint a Sketchben történő tervezés.

Minél jobban megérti, hogy egy adathordozó hogyan befolyásolja a munkáját - az a fajta szerszám jelöli, amit hagy -, annál inkább felhasználhatja előnyeire. Szeretné, hogy a forma kifejező legyen? Valószínűleg jobb, ha olyan vizuális eszközökkel dolgozik, mint például a Sketch, az Illustrator vagy akár a * gasp * Photoshop. Szeretne egy minimális, könnyű kialakítást? Ragaszkodjon a kódba történő tervezéshez.

Gyakorlati példa

Most, hogy felszólítottam a vényköteles eljárások veszélyeit, szeretnék megosztani veled ... a folyamatomat. Nem az, hogy lépésről lépésre kövesse! Csak annak érdekében, hogy valódi életet adjunk arról, hogyan lehet az elveket felhasználni a folyamat irányításához.

Új módszert indítunk az ügyfelekkel való együttműködéshez a Basecamp-ban, és az én feladatom egy új oldal létrehozása volt a Basecamp.com webhelyen annak piacra dobására. Így játszott ki:

Nagy kérdések meghatározása, médium kiválasztása

Ez nem új webhely, vagy teljesen új elrendezés. Először ki kellett találnom ennek az oldalnak a célját, mit akar mondani, és az általános szerkezetet.

"Melyik adathordozó adja a legtisztább választ a kérdéseimre a legkevesebb idő alatt?"

A képalkotók és a vázlatok elmaradtak. Ez beágyazódik egy meglévő tervbe és egy meglévő sablonba. Ugrhattam egyenesen a kódhoz, de a jelölés zaj van ezen a ponton. A szöveg éppen megfelelő.

Egy csomó félig sült másolat

Növekszik a hűség

Nem elég hosszú ideig ragaszkodtam a szöveghez, hogy elkészítsem az összes példányt az oldalra. Ha egyszer volt körvonala és megértettem, hogyan akarok beszélni a funkcióról, a sebességváltókat kódba toltam.

Miért?

A szöveges dokumentumok nem tudtak semmit mondani arról, hogy egy sor elhagyja-e özvegyét, hogy egy bekezdés hosszan „érezte-e”, hogyan folynak a képek stb. - Több hűségre van szükségem. Néhány új kérdésre statikus képalkotó válaszolhatott volna, de ezek nem válaszoltak volna a másolat illesztésével kapcsolatos kérdésekre, hacsak nem pazaroltam az időt, hogy pontosan összehangoljam a kötelezőt a kóddal. Nem köszönöm.

Másolás szerkesztése a kódban

A hűség szelektív csökkentése

A másolatok további néhány fordulója után a lap alakja kezdett. Vizuálisan mechanikus és mélységes volt. Szerettem volna kifejezőbb kifejezést, ezért átváltottam a Sketch-re, hogy átgondoljam néhány ötletet.

Leginkább a kódban maradhattam volna, de a Sketch segítségével sokkal gyorsabban tudtam kitölteni egy ötletet, mint tudnám kódolni. Ez azt is lehetővé tette számomra, hogy ezeket az ötleteket közvetlenül összehasonlítsam egymással, és nem hagynánk CSS patkány fészket az összes csigából. Win-win-win.

Egy csomó félig sült vázlat-komp

Figyelje meg, hogy egyikük sem teljesen sütött? Azért van, mert nem számít! Ezek nem az ügyfél bemutatására vagy a fejlesztő átadására szolgálnak. Ott vannak, hogy segítsenek kideríteni valamit, aztán a kukába kerülnek. A polírozáshoz szükséges idő befektetése teljes erőfeszítés lett volna.

Befejezni

Miután megértettem az irányt, a végét kódoltam. Másolás csiszolása, a képernyőképek leszerelése és a végső, kulcskérdés figyelembevétele: „Készen áll-e a kiszállításra?” Itt megtekintheti az élő ügyfeleket a Basecamp oldalon.

Nem így játszik le minden projekt. Néha vázolok valamit a Procreate-ban, néha egy gyors és piszkos vizuális kompozícióval kezdem, néha vázlatot írok, néha 100% -ban dolgozom kóddal. Minden attól függ, hogy mi a projekt.

Remélhetőleg ez némi betekintést nyújt arra, hogy miként lehet az alapelveket felhasználni arra, hogy az egyes esetekben irányítsák a folyamatot anélkül, hogy úgy éreznék, hogy folyamatosan feltalálják a kereket.

Gondoljon a folyamatára és az elvégzendő munkára. Definiálja az Ön számára fontos alapelveket, először összpontosítson a nagy dolgokra, és kérdezze tovább, hogy a jelenleg alkalmazott médium a megfelelő-e. A munkád jobb lesz ehhez.