5 сјајних примера ВебГЛ-а

Треба мало инспирација за веб дизајн ? Ево неколико најбољих примера употребе ВебГЛ-а које смо видели током неколико месеци.

01. Бракебиллс Университи

ВебГЛ: Универзитет Бракебиллс

како направити стрип у цлип студију
УНИТ9 је креирао ову интерактивну страницу која прати Чаробњаке

Када је НБЦУниверсал посегнуо за ЈЕДИНИЦА9 како би се створило интерактивно искуство другог екрана за нову Сифи серију Мађионичари, један од изазова са којим су им представљени било је смишљање чаробне лекције за сваку епизоду. Циљ је био створити веб страницу која је информативнија од игре, али је и даље нудила пуно изазова и садржаја које би корисник могао открити.



У блиској сарадњи са Сифи-јем, тим из УНИТ9 креирао је 13 игара за део веб странице „Лекције чаролије“. Они се могу репродуковати на свим уређајима и прилагодити дотичном уређају.

„Изазов на технолошкој страни била је изградња самосталних игара за 13 лекција, за које су биле потребне различите технологије - од АнгуларЈС и ВебГЛ до 3Д анимација“, каже Лигиа Стан из УНИТ9.

Након емитирања сваке епизоде, корисник се може вратити на страницу и узети другу лекцију, као и сазнати више о ликовима. Тим је требао осигурати да код, копија и средства постану доступни истовремено са приказивањем епизоде, што је значило проналажење прилагођеног начина за објављивање садржаја, изван класичних ЦМС-ова. Ово је био највећи изазов екипе, али резултат је један од бољих примера ове врсте.

02. Кратко путовање

ВебГЛ: Кратко путовање

Кратко путовање, аутор Цхер Ами

Кратко путовање рођено је у лето 2015. године, када је тим на Драги пријатељу предахнуо од рада клијента да би сарађивао са 3Д уметником Беноит Цхалландом. У почетку је то требао бити кратки филм, али претворио се у интерактивну причу о путовању на море када је тим схватио да веб локација може више укључити корисника.

'Неке елементе дизајнирали смо у 3Д-у са Цинема 4Д, а друге елементе у 2Д-у са Пхотосхоп-ом. Идеја је била увек добити свеж дизајн комбиновањем модерне технологије и класичних техника ', каже оснивач Јеан-Фредериц Пассот. „Користили смо ВебГЛ за рекреирање сваке сцене у 3Д-у, па чак и ако на овој веб локацији има пуно незгодних техничких аспеката, циљ је увек био пружити леп осећај сунчаног путовања.“

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

03. Хистографија

ВебГЛ: Хистографија

Хистографија, аутор Матан Стаубер

Хистографија - израелски дизајнер и програмер Убиј Стаубера завршни пројекат на Академији за уметност и дизајн Безалел - интерактивни је временски оквир који траје најмање 14 милијарди година, од Великог праска до данас. Буквално се протеже кроз читаву историју познатог универзума, то је неизмерна, интерактивна инфографија која доводи у питање наше предрасуде о томе како комуницирати сложеним субјектима.

Покривајући теме у распону од књижевности и музике до атентата, изума и религије, временска линија Хистографије нас позива да истражимо догађаје из наше богате прошлости, сваки динамички повучен са Википедије и представљен на екрану као мала црна тачка. Постоје два начина: хоризонтални приказ с лева на десно који омогућава кориснику да се усели у одређеном временском периоду; или временски строј налик спирали који представља курирану листу кључних догађаја.

Штаубер каже да га је одувек фасцинирала идеја да се приказ историје одвија током времена: „Временске црте су најпопуларнији начин визуализације историје, а опет сам их осећао увек врло ограничене. Од почетка овог пројекта знао сам да желим да створим временску линију која није ограничена на годину, деценију или период. Желео сам хронологију која може да садржи целу историју. '

04. Деутсер

ВебГЛ: Деутстер

Деутсер, аутор Не можемо зауставити размишљање

Сајтови са професионалним услугама суочавају се са одређеним комуникацијским изазовом: нема опипљивог предмета за излагање. Када креирате нову веб локацију за консултантске услуге Деутсер, Не можемо престати да размишљамо потребно да се схвати како се широки спектар услуга дестилише у једну, основну корист.

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

Метафора је јасна колико је и порука јака. Још један изазов био је осигурати неометано искуство рада на различитим уређајима. 'Честице се граде помоћу ВебГЛ платна уз помоћ тхрее.јс ради поједностављења. Изградили смо прилагођени систем за анимацију и чекање, који нам је дао већу контролу над анимацијом, прелазима и кадровима у секунди “, додаје Сцимеца.

колико времена треба за учење блендера

05. Хало Висуализер

ВебГЛ: Здраво

Хало Визуализер, од стране Ацтиве Тхеори

Ова страница за франшизу видео игара Хало има тако изванредну структуру навигације. Корисник се креће кроз интуитиван, временски подешен приказ, са преломљеним комадима Хало кацига који делују као ангажман корисника у игри.

„Користили смо ВебГЛ честице које користе 3Д модел за обликовање облика кацига ликова из игре, 3Д ЦСС за анимирање у деловима корисничког садржаја и Цанвас за цртање и анимирање временске линије на дну“, каже Рацхел Смитх, интерактивна програмер на Активна теорија . „То је добар пример комбиновања веб технологија у зависности од тога шта интерфејс треба.“

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

Сарадници: Еспен Брунберг , Сарах Драснер