Komponenttipohjainen työnkulku luonnostelulle

Suunnittelu tapa muuttuu, samoin työkalut.

Anna ihmisille työkalu, ja he löytävät erilaisia ​​tapoja käyttää sitä. Kukaan kaksi suunnittelijaa ei toimi samalla tavalla, mutta ennustan sen muuttuvan parin seuraavan vuoden aikana. Moderni digitaalinen suunnittelu kasvoi valokuvien muokkaamisesta hakkerointiin käyttöliittymien piirtämiseksi, työn menettämiseen, jonka tarkoituksena ei ole menettää työtä, ja loputtomasta kierrosta olemassa olevien näyttöjen uudelleenluomista, kun asiat katoavat käännöksessä…

Viime vuosikymmenen aikana suunnittelijat alkoivat arvioida lähestymistapaansa uudelleen ja siirtyivät kohti komponenttipohjaista työnkulkua. Photoshop esitteli Smart Objects (mahdollisuuden "sijoittaa" muut Photoshop-tiedostot PSD: hen). Tämä uusi ominaisuus antoi suunnittelijoille mahdollisuuden jakaa komponentin keskitetty versio huolehtimatta siitä, että kyseisestä komponentista tulee kopioita tiedostoissaan. Valitettavasti tämä ei koskaan muuttunut suunnittelutiimien työnkulkuksi - se oli pikemminkin poikkeus kuin sääntö.

Kun Sketch esitteli symbolit, komponenttien arvo selkiytyi. Huolimatta siitä, että symbolit on rajoitettu yhteen tiedostoon, niiden avulla komponentit ovat erittäin helppoja: luo komponentti ja käytä sitä sitten loputtomasti koko tiedostossa taulujen ja sivujen välillä. Alun perin staattisista symboleista tuli pian vahvempi ominaisuus, jossa reagoiva koon muuttaminen ja kyky korvata arvot. Olen varma, että symboleilla on tulevaisuudessa tehokkaampia mukautusvaihtoehtoja.

Todellinen läpimurto tapahtui, kun Sketch aktivoi sisäkkäissymbolit muiden symbolien sisällä. Jopa yksittäisenä suunnittelijana, symbolien oikein määrittelemisellä, nimeämisellä ja jäsentämisellä on valtava arvo. Sattumalta näin myös kehittäjät rakentelevat komponentteja: aloittamalla alaosasta, jossa ne määrittelevät asiat mikrotasolla, aina kokonaisiin näytöihin makrotasolla.

Yksi Abstraktin vahvuuksista on tarjota suunnittelijoille tapa muokata ja hallita työtä. Tiivistelmä seuraa minkä tahansa Sketch-tiedoston komponentin muutoksia, jotta sinä ja tiimisi pystyvät vertaamaan erilaisia ​​versioita komponentti tasolla. Tämä tarkoittaa sitä, että mitä enemmän symboleja on Sketch-tiedostossa, sitä epätodennäköisempi sinä (tai joku kollegasi) joutuu konflikteihin. Jokaisessa kerroksessa käytetyn kuvakkeen muokkaaminen abstraktilla ei saisi aiheuttaa ristiriitoja muiden kanssa, jotka työskentelevät samalla tiedostolla. Ja jos syntyy konflikti, Abstrakti käsittelee tilanteen hienosti.

Esimerkkinä tästä on, kuinka jäsennän Sketch-tiedostot, joita käytämme abstraktin suunnittelussa. Monet suosikkisuunnittelutiimistäni käyttävät samanlaisia ​​työnkulkuja, ja se näyttää skaalautuvan hyvin riippumatta siitä kuinka suuri / pieni joukkue on.

primitives

värit

Jokainen projekti alkaa väripaletin määrittelyllä. Brändivärit, tekstivärit, käyttöliittymän värit, värit erityyppisiin toimintoihin ... Tästä hetkestä lähtien ei yleensä ole hyvä idea käyttää väriä, joka ei kuulu palettiin, ellei siihen ole todella syytä (mikä tarkoittaa, että sen pitäisi todennäköisesti mennä palettiin).

Tekstityylit ja kerrostyylit

Toinen luettelossa on typografia. Tee luettelo projektissa tarvittavista kirjasinkokoista. Mitä lyhyempi luettelo, sitä helpompaa on ylläpitää. Kuten väreissä, tästä luettelosta ei yleensä tarvitse poiketa.

Muutamien muokkainten lisääminen tekstityyleihin vie tämän luettelon askeleen pidemmälle (väri, fontin paino, tekstin muunnokset ...), mutta tämä myös vaikeuttaa luettelon tarkistamista lisäämällä kaikki erilaiset permutaatiot, tai pakottaa jatkuvan mukauttamisen kohteisiin, jotka ovat lista. (Tämä on alue, jolla luulen, että luonnos voi ja paranee ajan myötä. Yksinkertainen kohdistuksen korvaus ei saisi katkaista yhteyttä määriteltyyn tekstityyliin.)

komponentit

Tässä ovat asiat todella jännittäviä. Symbolien upottaminen muihin symboleihin luo tasot ja komponenttitasot, joita on helppo ylläpitää ja pitää ajan tasalla.

TASO 1: Säätiö

Tason 1 symbolit eivät sisällä muita symboleja. Ne ovat matalin taso komponenttipinoissamme.

  • Ikonografia: Tumma, vaalea ja sävytetty variantti kuvakesarjastamme, viipaleiden asettaminen tavalla, jonka avulla kehittäjät voivat helposti avata Sketch-tiedoston ja tarttua tarvitsemiinsa omaisuuksiin.
  • Avatarit: 8 avataria, joita käytämme koko sovelluksessa. Ne ovat epätäydellisiä valokuvia monista ihmisryhmistä.

TASO 2: Alemman tason lohkot

Tason 2 symbolit yhdistävät primitiivit ja tason 1 symbolit.

  • Muotoelementit: Painikkeet, tulot, valintaruudut, radiosäätimet…
  • Solut: Ihmiset, kommentit, sitoutuminen, tiedostot, sivut, piirrostaulut…
  • Subnavigation: Otsikot, joissa on valinnaiset toiminnot tai kuvakkeet
  • Bannerit: Yhdistää tekstin, kuvakkeet ja painikkeet

TASO 3: Keskitason lohkot

Tason 3 symbolit yhdistävät tason 2 ja tason 1 symbolit. Nämä ovat edistyneempiä symboleja, jotka yleensä lopulta käytetään todellisessa suunnittelussa.

  • Sivupalkit: Solulistat, voivat toimia navigointina
  • Tärkeimmät sisältöalueet: Kaikista projektien ruudusta sitoutumisen yksityiskohtiin, mukaan lukien toimet, otsikko, kuvaus, esikatselut ja kommentit
  • Sovelluksen otsikot: Wayfinders, joiden avulla ihmiset tietävät missä ne ovat sovelluksen sisällä, sekoita tekstitarroja ja kuvakkeita
  • Moodit: Toiminnot, toimintavahvistukset, täydet virrat…

Ryhmitän tyypillisesti tason 3 symbolit sivulle, jotta voin vertailla niitä nopeasti johdonmukaisuuden vuoksi.

TASO 4: Sävellykset

Koska tällainen laaja komponenttivalikoima, varsinaisissa malleissa olevat taulut eivät yleensä sisällä enempää kuin kourallinen symboleja. Sketch-tiedostoni ensimmäisellä sivulla on kaikki sovelluksemme tärkeimmät näytöt, kun taas muut sivut on omistettu virtauksille, mukaan lukien kaikki mahdolliset reunatapaukset.

Joten miten muotoilu muuttuu?

Suunnittelun ja suunnittelun työnkulut hiipivät hitaasti toisiaan kohti. Suunnittelun lopussa piirtotyökalut, kuten Sketch, rakentavat uusia ja tehokkaampia toimintoja jokaisella päivityksellä, joka yhdessä abstraktin kanssa luo vankan, ennustettavan ja luotettavan työnkulun. Tekniikan puolella on uutta kehitystä, joka rakentaa parempia komponentteja monille alustoille. Molemmat osapuolet standardisoivat samanlaisia ​​prosesseja, ja tämä innostaa minua.

Standardointi yhdistettynä laajoihin uusiin työkaluihin ja yhteiseen sanastoon nostaa suunnitteluprosessin tasolle, jolla insinööripalkinsa ovat toimineet vuosikymmenien ajan. Heitä tiivistelmä sekoitukseen, ja yhtäkkiä jokaisella ryhmän jäsenellä on rikas historia siitä, miksi asiat ovat sellaisinaan kuin ne ovat, päätöksiin, jotka johtivat työn nykyiseen tilaan, ja tavasta aloittaa heti osallistuminen merkityksellisellä tavalla .

Laadukkaiden tuotteiden rakentaminen on tiimitoimintaa, ja me kaikki täällä, Abstract, olemme innostuneita toimimaan kriittisessä roolissa tämän prosessin kehittämisessä.

Tiivistelmä on tällä hetkellä yksityisessä alfassa. Pyrimme kohti julkista beetaa toisen vuosineljänneksen lopulla. Testauslaitteidemme palaute on ollut uskomattoman hyödyllistä, kun olemme tarkentamassa virtauksia ja parantaneet yleistä kokemusta. Uskomme enemmän kuin koskaan, että suunnittelijoilla on nyt aika saada asianmukainen infrastruktuuri suunnittelun arvon korostamiseksi. Uudet kutsut erät lähtevät ulos joka viikko. Kiitos tuestasi ja rohkaisestasi. Odotamme tekevän uskomattomia asioita yhdessä.

Jos et ole vielä ilmoittautunut Private Alpha -listalle, voit tehdä sen täällä. Ja jos haluat auttaa meitä suunnitteluprosessin uudelleensuunnittelussa, etsimme hämmästyttäviä ihmisiä, joilla on erilaisia ​​kokemuksia, näkökulmia ja taitoja. Tutustu avoimiin paikoihimme ja hae nyt!