Tasainen muotoilu ja realismi: kumpi puoli olet?

Viime vuonna tasainen muotoilu otti haltuunsa digitaalisen suunnittelun maailman. Skeuomorfisen suunnittelun tunnusmerkit - kohokuvioidut ja viistefektit, 3D-keinotekoiset tekstuurit, varjot ja heijastavat kimalat - kaikki paitsi kadonneet ja korvattu minimalistisella muotoilulla, rohkeilla väreillä, terävillä reunoilla ja viivoilla, yksinkertaisella typografialla ja hyvin vähän, jos ollenkaan, varjostuksella .



Tämän designtrendin korostamiseksi interaktiivinen toimisto ehjä loi tämän loistavan interaktiivisen infografiikan Litteä muotoilu ja realismi Hieno projekti sisältää myös interaktiivisen pelin, jossa käyttäjät valitsevat puolen ja taistelevat sitten vihollista vastaan. Puhuimme inTacton luovan johtajan Alejandro Lazosin kanssa saadaksemme lisätietoja projektista.



Kuinka konsepti syntyi?

Jokaisen vuoden lopussa luomme virastolta itsestään mainostavan vuorovaikutteisen tervehdyksen, jossa haluamme osoittaa luovuuttamme yhdessä korkeiden tuotantoarvojen kanssa. Haluamme käyttää jokaisessa luomassamme tervehdyksessä tuon vuoden merkittävimpiä teemoja digitaalisessa maailmassa, ja vuonna 2013 näimme heinäkuussa suuren keskustelun, kun Apple muutti lopulta iOS7: n muotoilun tasaisen suunnittelun mukaisesti, jonka Windows 8 oli jo adoptoinut jonkin aikaa ennen.

Aihe tuli virukseksi, ja siitä keskusteltiin designblogeissa kaikkialla sekä kannattajien että arvostelijoiden kanssa keskustellessaan tästä uudesta tyylistä, joka oli nopeasti vakiinnuttamassa asemansa digitaalisen median uutena suunnittelustrendinä. Tämä joskus kiihkeä keskustelu antoi meille ajatuksen kahden suunnittelijaryhmän välisen taistelun käsitteestä.



InTacto perusti vuorovaikutteisen tervehdyksensä tasomaisen suunnittelun saapumiseen viime vuonna

InTacto perusti vuorovaikutteisen tervehdyksensä tasomaisen suunnittelun saapumiseen viime vuonna

HTML5-pelit olivat myös tulossa suosittuja ja saaneet paljon huomiota, joten halusimme osoittaa taitomme tällä alalla. Tämän vuoksi meille syntyi ajatus luoda 'Street Fighter' -muoto uudelleen tämän suunnittelukampanjan kuvaamiseksi.

voitko käyttää Adobe-fontteja kaupallisesti

Loimme tarinan, joka kertoi metaforisesti siitä, mitä tunsimme tapahtuvan digitaalisen suunnittelun maailmassa



Pelistä yksin ei kuitenkaan riittänyt, ja tunsimme, että siltä puuttui jotain. Siksi loimme tarinan, joka kertoi metaforisesti sen, minkä tunsimme tapahtuvan digitaalisen suunnittelun maailmassa, ja toi peliin myös jonkin verran taustaa ja kontekstia. Lopuksi lisäsimme tiimimme videotervehdyksen.

Kerro meille suunnitteluprojektistasi tähän projektiin ...

Kun olimme määritelleet ajatuksen tasaisesta suunnittelusta vs realismista tai skeemorfismista ja päähenkilöiden persoonallisuudesta, tutkimme yksityiskohtaisesti kahta suunnittelutyyliä, jotta saisimme todella selville kunkin erityispiirteet. Tässä vaiheessa Pinterest oli suuri apu ja inspiraation lähde.

Sen jälkeen loimme käsikirjoitukseen perustuvan kuvakäsikirjoituksen ja loimme erilaisia ​​luonnoksia paperille kunkin hahmon ulkoasun määrittämiseksi. Lopuksi etsimme sopivaa kirjasinta, ja tässä tapauksessa olimme erittäin tyytyväisiä Roboto Slabiin Google Fontsista, joka toimi hyvin molemmissa tyyleissä.

InTacto-tiimi loi erilaisia ​​luonnoksia paperille määrittelemään kunkin hahmon ulkoasun

InTacto-tiimi loi erilaisia ​​luonnoksia paperille määrittelemään kunkin hahmon ulkoasun

Mitä käytit rakentamaan projektia?

Rakensimme sivuston pääasiassa HTML5: n, CSS: n, JQueryn, JavaScriptin avulla, ja peliin käytimme Construct 2: ta.

Pelin hahmojen elävöittämiseksi käytimme Photoshopin nukketeatterityökalua alkuperäisten piirustuksiemme muokkaamiseen ja animoimme ne sitten kehyksittäin.

Photoshop

miten perspektiiviruudukkoa käytetään kuvittaja CC: ssä
Photoshopin Puppet Warp -työkalua käytettiin pelin hahmojen elävöittämiseen

Käytimme 3D-kameratoimintoa After Effectsissä, sarakkeiden siirtyessä kauemmas, antamaan meille tarvitsemamme tarkan liikkeen ja perspektiivin. Sitten otimme tämän ja kopioimme sen CSS: llä.

Lopuksi käytimme kuvissa 24-bittistä PNG-kompressoria (Photoshopin ulkopuolella), mikä antoi meille mahdollisuuden pienentää värien määrää samalla kun säilytimme reunojen läpinäkyvyyden antialioilla.

Mikä oli haastavin näkökohta?

Meillä oli monia teknisiä ongelmia, ja toisinaan meidän oli pidettävä monialaisia ​​kokouksia ja ideoitava mahdollisia ratkaisuja.

Yksi suurimmista ongelmista oli lisätä HTML5-peli keskelle parallaksirullaa. Halusimme kaiken olevan jatkuvaa ja ilman hyppyjä vierityksen aikana, jotta käyttäjät voisivat milloin tahansa mennä alusta loppuun ilman keskeytyksiä. Tämän saavuttamiseksi käytimme Ajax-tekniikkaa parametrien siirtämiseen URL-osoitteeseen, ja div: iin latautuva peli on vastuussa näiden parametrien keräämisestä ja vastaavan latausnäytön näyttämisestä (tasainen tai realistinen).

Yksi joukkueesta

Yksi joukkueen tärkeimmistä ongelmista oli HTML5-pelin lisääminen parallaksirullan keskelle

Toinen ongelma oli hidas suorituskyky koko näytöllä. Tämän ratkaisemiseksi työskentelimme 960 kuvapisteen kankaalla (50% näytön koosta) ja venytimme sen sitten kaksinkertaiseksi käyttämällä CSS: ää. Kuvat eivät näytä venytetyiltä, ​​koska lisäsimme ne peliin kaksinkertaisina tämän kompensoimiseksi.

Suurin kysymys meille oli sivuston kokonaispaino ja latausaika, mikä johti siihen, että pakkasimme jokaisen PNG: n värikvantisoijalla ja lataimme sivuston myös eri vaiheissa, jotta kaikkia ei tapahtuisi alussa. Mielenkiintoinen ratkaisu oli ladata lopullinen video käyttäjän katsellessa alkuperäistä tarinaa. Tässä kuvasarjassa käytimme myös kahta erilaista JPG-laatua. Jos käyttäjä vierittää nopeasti lopullisen videon kohdalle, hän näkee sen huonolaatuisemmin, mutta jos hän odottaa, video näytetään sitten laadukkaammin.

Kaksi erilaista JPG-laatua käytettiin kuvasekvenssiin käyttäjien vieritysten nopeuden huomioon ottamiseksi

Kaksi erilaista JPG-laatua käytettiin kuvasekvenssiin käyttäjien vieritysten nopeuden huomioon ottamiseksi

Lopuksi meillä oli odottamaton mutta positiivinen ongelma, joka ilmeni muutama päivä sivuston avaamisen jälkeen. Meidän oli siirrettävä palvelin, joka isännöi sivustoa selviytyäkseen vastaanottamastamme suuresta liikennemäärästä.

kuinka lisätä perspektiiviä kuvittajaan

  • Luova johtaja : Alejandro Lazos
  • Luova, äänisuunnittelu : Sergio Chaile
  • Taidepäällikkö, kuvittaja : Damian Lettiero
  • Multimediasuunnittelija : Natalia Manterola
  • Etupääohjaaja : Guillermo Vazquez
  • Pelin kehittäjä : Lucas Pallares

Piditkö tästä? Lue nämä!