Lame disain vs realism: kummal poolel sa oled?

Eelmisel aastal võttis tasapinnaline disain üle digitaalse disaini maailma. Skeuomorfse disaini tunnused - reljeefsed ja kaldus efektid, 3D kunstlikud tekstuurid, varjud ja peegeldavad virvendused - kõik kadusid ja asendati minimalistliku kujundusega, paksude värvide teravate servade ja joontega, lihtsa tüpograafiaga ja väga vähese varjundiga, kui üldse .

Selle disainitrendi esiletõstmiseks interaktiivne agentuur puutumata lõi selle geniaalse interaktiivse infograafiku Lame disain vs realism Lahedas projektis on ka interaktiivne mäng, kus kasutajad valivad poole ja võitlevad seejärel vaenlasega. Projekti kohta lisateabe saamiseks rääkisime inTacto loovjuhi Alejandro Lazosega.

Kuidas see kontseptsioon tekkis?

Iga aasta lõpus loome agentuuri enesereklaamiga interaktiivse tervituse, kus meile meeldib näidata oma loovust koos kõrgete tootmisväärtustega. Iga loodava tervituse puhul soovime kasutada selle aasta silmapaistvamaid teemasid digitaalses maailmas ning 2013. aastal nägime juulis suurt arutelu, kui Apple lõpuks muutis iOS7 disaini kooskõlas lamekujundusega, mida Windows 8 oli juba mõnda aega varem lapsendanud.

Teema muutus viiruslikuks ja seda arutati disainiblogides kõikjal, kus nii toetajad kui ka halvustajad arutasid seda uut stiili, mis oli kiiresti kehtestamas end digitaalse meedia uue kujundussuunana. See mõnikord tuline arutelu andis meile idee kahe disainerirühma vahelise võitluse kontseptsioonist.

InTacto lähtus interaktiivsest tervitusest eelmisel aastal tasase disaini saabumisest

InTacto lähtus interaktiivsest tervitusest eelmisel aastal tasase disaini saabumisest

Ka HTML5-mängud olid muutumas populaarseks ja pälvinud palju tähelepanu, nii et tahtsime näidata oma oskusi selles valdkonnas. Seetõttu tekkis meil idee luua tänavavõitleja vorming, et aidata seda kujundusvõitlust kujutada.

Lõime loo, mis kirjeldas metafoorselt seda, mis meie meelest toimus digitaalse disaini maailmas

Ainuüksi mängust ei piisa ja tundsime, et sellel on millestki puudus. Seetõttu lõime loo, mis kirjeldas metafoorselt seda, mis meie meelest toimus digitaalse disaini maailmas, ning tõi mängu ka tausta ja konteksti. Lõpuks lisasime oma meeskonna videotervituse.

Rääkige meile selle projekti lähenemisviisist ...

Kui olime määratlenud idee „lamekujundus vs realism või skeemorfism” ning peategelaste isiksused, uurisime üksikasjalikult kahte kujundusstiili, et tõepoolest avastada igaühe eripära. Selles etapis oli Pinterest suureks abiks ja inspiratsiooniallikaks.

Pärast seda lõime skripti põhjal oma skripti ja lõime paberile erinevad visandid, et määratleda iga tähemärgi välimus. Lõpuks otsisime seejärel sobivat fonti ja antud juhul olime väga rahul Google Fontsist pärit Roboto plaadiga, mis mõlema stiili korral hästi toimis.

InTacto meeskond lõi paberil erinevaid visandeid, et määratleda iga tegelase välimus

InTacto meeskond lõi paberil erinevaid visandeid, et määratleda iga tegelase välimus

Mida kasutasite projekti ehitamiseks?

Ehitasime saidi peamiselt HTML5, CSS, JQuery, JavaScripti abil ja mängu jaoks kasutasime Construct 2.

Mängu tegelaste elustamiseks kasutasime oma originaalsete jooniste teisendamiseks Photoshopi tööriista Nukutõmme ja animeerisime need siis kaaderhaaval.

Photoshop

Mängu tegelaste ellu äratamiseks kasutati Photoshopi nukuõõnte tööriista

3D-kaamera funktsiooni kasutasime After Effectsis kaugemal liikuvate veergudega stseenis, et anda meile vajalik liikumine ja perspektiiv. Seejärel võtsime selle ja kopeerisime CSS-i abil.

Lõpuks kasutasime piltidel 24-bitist PNG-kompressorit (väljaspool Photoshopi), mis võimaldas meil vähendada värvide arvu, säilitades siiski antialiate abil piiride läbipaistvuse.

Mis oli kõige keerulisem aspekt?

Me kohtusime paljude tehniliste probleemidega ja kohati pidime pidama interdistsiplinaarseid koosolekuid ja ajendama võimalikke lahendusi.

Üks peamisi probleeme oli HTML5-mängu sisestamine parallaksi kerimise keskele. Tahtsime, et kõik oleks kerimise ajal pidev ja hüpeteta, nii et kasutajad saaksid igal ajal algusest lõpuni ilma katkestusteta minna. Selle saavutamiseks kasutasime Ajaxi tehnoloogiat parameetrite edastamiseks URL-ile. Div-is laaditav mäng vastutab nende parameetrite kogumise ja vastava laadimisekraani kuvamise eest (tasane või realistlik).

Üks meeskonnast

Üks meeskonna põhiprobleeme oli HTML5-mängu sisestamine parallaksi kerimise keskele

Teine probleem oli aeglane jõudlus täisekraanil kuvamisel. Selle lahendamiseks töötasime 960px lõuendiga (50% monitori suurusest) ja venitasime selle siis CSS-i abil kahekordseks. Kujutised ei paista venitatuna, sest selle kompenseerimiseks sisestasime need mängu topeltsuuruses mängus.

Meie jaoks oli suur probleem saidi üldine kaal ja laadimisaeg, mille tulemusena tihendasime kõik PNG-d värvikvantori abil ja laadisime saidi ka erinevates etappides, nii et seda kõike alguses ei esine. Huvitav lahendus oli lõppvideo laadimine ajal, mil kasutaja esialgset lugu vaatab. Selle pildijada jaoks kasutasime ka kahte erinevat JPG-kvaliteediga. Kui kasutaja kerib kiiresti lõpliku video juurde, näeb ta seda madalama kvaliteediga, kuid kui ta ootab, kuvatakse see video kõrgema kvaliteediga.

Kasutajate kerimise kiiruse võimaldamiseks kasutati piltide järjestuse jaoks kahte erinevat JPG-kvaliteediga

Kasutajate kerimise kiiruse võimaldamiseks kasutati piltide järjestuse jaoks kahte erinevat JPG-kvaliteediga

Lõpuks tekkis meil ootamatu, kuid positiivne probleem, mis tekkis paar päeva pärast saidi käivitamist. Me pidime seda saiti majutanud serveri üle viima, et tulla toime suure liiklustasemega, mida me vastu võtsime.

  • Loovjuht : Alejandro Lazos
  • Loov, helikujundus : Sergio Chaile
  • Kunstijuht, illustraator : Damian Lettiero
  • Multimeedia disainer : Natalia Manterola
  • Esiosa direktor : Guillermo Vazquez
  • Mängu arendaja : Lucas Pallares

Meeldis see? Loe neid!