Sisältö
Kun Time Warner Cable (TWC) kääntyi New Yorkissa sijaitsevan Firstbornin digitaalitoimiston kanssa tilaamaan Wifi-Denti-Fierin, se halusi jotain yksinkertaista, mutta erilaista.
"He halusivat yksinkertaisen kaistanleveyslaskurin, joka auttaisi asiakkaita valitsemaan oikean Internet-suunnitelman", kertoo Firstbornin luova johtaja Flavio Vidigal. "Suurena luovana haasteena oli muuttaa tehtaan työkalu - online-laskin - konseptiksi, joka voisi olla hauska, helppo pelata ja mikä tärkeintä, harjoittaa loppuun asti."
- Parhaat laajakaistatarjoukset suunnittelijoille
Monitieteinen suunnittelu
Wifi-Denti-Fierin maailman luomiseen tarkoitetulla täydellä luovalla lisenssillä tiimi vei parhaiden kuitujen laajakaistatarjousten etsimisen uudelle tasolle. Vidigal selittää: "Koska TWC oli niin luottavainen, pystyimme kytkemään useita Firstborn-tiimejä luovaan prosessiin - etenkin suunnittelijamme, 3D- ja liikegrafiikkatiimimme ja luovat kehittäjämme. Kaikkien näiden eri alojen yhteistyö vei sekä ajatuksemme että lopputuote tasolle, joka on kaukana perustiedot.
Meidät inspiroi klassinen savennus ja lelujen suunnittelu
"Meitä inspiroi klassinen savennus ja lelujen suunnittelu, joten halusimme monimutkaisia animoituja 3D-hahmoja ja ympäristöjä, jotka korostuivat puhtaalla ja minimaalisella taustalla. Kehitimme 3D-ilmeen, mutta tunsimme sekä graafisen että harkitusti suunnitellun. Tämä tyyli oli myös integroitu kaikkiin käyttöliittymän osa-alueisiin. "
Super-ohjelmisto
Luodakseen tiimin haluaman ilmeen he käyttivät 3D-ohjelmistojen ja ohjelmointikielien yhdistelmää. "Sublime oli HTML: n, CSS: n (käyttäen Stylusta), Javascriptin (käyttäen Coffeescriptiä) ja ActionScriptin tärkein koodieditori", Vidigal sanoo.
"Mayaa käytettiin yhdessä Zbrushin kanssa luomaan kappaletta ja ympäristöjä sekä kiinnittämään ja animoimaan. Photoshopia käytettiin suunnittelussa ja kehittäjissä käyttöliittymän elementtien purkamiseksi. Adobe Media Encoder antoi meidän poimia PNG-sekvenssejä 3D-videoista; CodeAndWeb ja TexturePacker antoivat meille mahdollisuuden luoda hahmoanimaatio-sprite-kuvia sekvensseistä; ja After Effectsiä käytettiin lopulliseen sommitteluun, asettelun muokkaamiseen ja vientiin. Käytimme jopa vähän Flashia! "
Digitaalinen maisema
Kun 3D-näkökulma on lajiteltu, ryhmän seuraava tehtävä oli varmistaa, että kiillotettu, interaktiivinen kokemus voi tukea mobiililaitteita, lukuisia työpöytäselaimia ja tabletteja - kaikilla kohtuullisilla tiedostokokoilla.
"Nykypäivän digitaalisessa ympäristössä on vaikea varmistaa, että käyttöliittymä on sujuva ja skaalautuva laitteen vaihteleviin mittoihin ja pikselitiheyteen", Vidigal kommentoi. "Näihin haasteisiin vastaamiseksi studio ja kehitystiimit tekivät tiivistä yhteistyötä löytääkseen oikean tasapainon ennalta renderoitujen animaatioiden ja koodiin rakennettujen animaatioiden välillä.
"Päätimme rakentaa muokattuja koodipohjia kullekin alustalle. Esimerkiksi Chrome-käyttäjät saavat 3D-laitevalintakuutioita ja läpinäkyviä videoita, käyttäjät, joilla ei ole WebGL: ää, saavat Flash-videoita ja 2D-kuutioita ja käyttäjät, joilla ei ole WebGL: ää tai Flashia (iPadit), saavat PNG-sekvenssejä .
"Meidän oli myös oltava tietoisia välittömistä verkkoteknologian päivityksistä ja niiden vaikutuksista. Esimerkiksi kehitimme iOS 7.0: ta, mutta tiesimme, että iOS 7.1 oli aivan nurkan takana, ja se ottaisi kromittomat selainominaisuudet käyttöön (piilottaminen) omat työkalurivit). "
Oletko nähnyt äskettäin inspiroivia esimerkkejä 3D- tai verkkosuunnittelusta? Kerro meille kommenteissa.
