Раван дизајн вс реализам: на којој сте страни?

Прошле године је равни дизајн завладао светом дигиталног дизајна. Обележја скеуоморфног дизајна - утиснути ефекти и ефекти нагиба, 3Д вештачке текстуре, падајуће сенке и рефлектујуће светлуцање - све су нестале и замењене су минималистичким дизајном, подебљаним бојама оштрих ивица и линија, једноставном типографијом и врло мало, ако уопште постоје, сенчења .

Да би истакла овај тренд дизајна, интерактивна агенција нетакнут је креирао ову сјајну интерактивну инфографику Флат Десигн вс Реалисм .Кул пројекат такође укључује интерактивну игру у којој корисници бирају страну, а затим се боре против непријатеља. Разговарали смо са креативним директором инТацто-а Алејандром Лазосом како бисмо сазнали више о пројекту.



Како је настао концепт?

На крају сваке године креирамо самопромоцијски интерактивни поздрав агенције, где волимо да покажемо своју креативност заједно са високим производним вредностима. За сваки поздрав који креирамо волимо да користимо најистакнутије теме из те године у дигиталном свету, а 2013. године видели смо да је у јулу била велика дебата када је Аппле коначно променио дизајн иОС7 у складу са равним дизајном, који је Виндовс 8 их је већ усвојило пре неког времена.

Тема је постала вирусна и о њој се расправљало на блоговима о дизајну свуда, како са присталицама тако и против клеветника, расправљајући о овом новом стилу, који се брзо успоставио као нови тренд дизајна за дигиталне медије. Ова понекад жестока расправа дала нам је идеју за концепт борбе између две групе дизајнера.

ИнТацто су свој интерактивни поздрав засновали на доласку стамбеног дизајна прошле године

ИнТацто су свој интерактивни поздрав засновали на доласку стамбеног дизајна прошле године

ХТМЛ5 игре су такође постајале популарне и привлачиле су велику пажњу, па смо желели да покажемо своје вештине у овој области. Због тога нам је пала на памет идеја да поново створимо формат „Уличног борца“ који би помогао да се прикаже ова дизајнерска борба.

како цртати попут ван Гога

Створили смо причу која је метафорично испричала оно што смо осећали да се одвија у свету дигиталног дизајна

Само игра ипак неће бити довољна и осећали смо да јој нешто недостаје. Стога смо створили причу која је метафорично приповедала оно што смо осећали да се одвија у свету дигиталног дизајна, а такође је унела одређену позадину и контекст у игру. На крају смо додали видео поздрав нашег тима.

Реците нам о свом дизајнерском приступу овом пројекту ...

Једном када смо дефинисали идеју „равни дизајн вс реализам или скеуоморфизам“ и личности протагониста, детаљно смо истражили два дизајнерска стила како бисмо заиста открили посебности сваког од њих. Током ове фазе Пинтерест је био од велике помоћи и извор инспирације.

После тога креирали смо плочу прича засновану на нашем сценарију и креирали разне скице на папиру како бисмо дефинисали изглед сваког лика. На крају смо тражили одговарајући фонт и у овом случају били смо веома задовољни Робото Слабом из Гоогле Фонтс-а, који је добро функционисао у оба стила.

како нацртати туториал вука

Тим инТацто креирао је разне скице на папиру како би дефинисао изглед сваког лика

Тим инТацто креирао је разне скице на папиру како би дефинисао изглед сваког лика

Шта сте користили за изградњу пројекта?

Веб локацију смо углавном изградили користећи ХТМЛ5, ЦСС, ЈКуери, ЈаваСцрипт, а за игру смо користили Цонструцт 2.

Да бисмо ликове игре оживели, користили смо алатку Пуппет Варп у Пхотосхопу како бисмо трансформисали своје оригиналне цртеже, а затим смо их анимирали кадар по кадар.

Пхотосхоп

За оживљавање ликова игре коришћен је Пхотосхоп-ов Пуппет Варп Тоол

Функцију 3Д камере користили смо у Афтер Еффецтс-у, у сцени са колонама које се одмичу даље, како би нам пружиле тачно кретање и перспективу која нам је била потребна. Затим смо ово узели и копирали помоћу ЦСС-а.

Коначно, на сликама смо користили 24-битни ПНГ компресор (изван Пхотосхопа), што нам је омогућило да смањимо број боја, а да истовремено задржимо транспарентност ивица са антиалиас-има.

Који је био најизазовнији аспект?

Наишли смо на многе техничке проблеме и понекад смо морали да имамо интердисциплинарне састанке и мозгамо за могућа решења.

Један од главних проблема био је уметање ХТМЛ5 игре у средину паралаксног свитка. Желели смо да све буде континуирано и без скокова током помицања, тако да корисници могу у било ком тренутку ићи од почетка до краја без прекида. Да бисмо то постигли, користили смо Ајак технологију за прослеђивање параметара на урл, а игра која се учитава у див, задужена је за прикупљање тих параметара и приказ одговарајућег екрана за учитавање (равни или реализам).

Један из тима

Један од главних проблема тима био је уметање ХТМЛ5 игре усред паралаксног помицања

Још један проблем били су спори перформансе приказане на целом екрану. Да бисмо то решили, радили смо са платном од 960пк (50% величине монитора), а затим смо га развукли да удвостручимо величину помоћу ЦСС-а. Слике се не чине растегнутима јер смо их у игру убацили двоструко веће да бисмо то надокнадили.

Главни проблем за нас била је укупна тежина и време учитавања странице, што је резултирало компресовањем сваког ПНГ-а помоћу квантизера боја, а такође и учитавањем локације у различитим фазама, тако да се све то не догађа на почетку. Занимљиво решење било је учитавање завршног видео записа док корисник гледа почетну причу. Такође, за овај низ слика користили смо 2 различита квалитета ЈПГ-а. Ако се корисник брзо помери до коначног видеа, видеће га у нижем квалитету, али ако сачека, видео ће се приказати у вишем квалитету.

За слијед слика коришћене су две различите квалитете ЈПГ-а како би се омогућила брзина корисничких помицања

колики је ипхоне плус
За слијед слика коришћене су две различите квалитете ЈПГ-а како би се омогућила брзина корисничких помицања

Коначно смо имали неочекивани, али позитиван проблем који се догодио неколико дана након покретања странице. Морали смо да мигрирамо сервер који је био домаћин веб локацији да бисмо се носили са великим нивоом саобраћаја који смо примали.

  • Креативни директор : Алејандро Лазос
  • Креативан, звучни дизајн : Сергио Цхаиле
  • Уметнички директор, илустратор : Дамиан Леттиеро
  • Дизајнер мултимедије : Наталиа Мантерола
  • Предњи директор : Гиљермо Васкез
  • Девелопер игара : Луцас Палларес

Свиђа вам се ово? Прочитајте ово!