Vizualizacija novca: kako smo objasnili složeni financijski proizvod koristeći animaciju

bZx, startup decentraliziranog trgovanja maržama, tražio je da im napravimo web stranicu. Evo što se dogodilo

U Zajnu volimo izazove. Znamo da svi to kažu - ali stvarno jesmo. Možda to možete spustiti na našu urođenu znatiželju: kad imate težak problem za riješiti, morate isprobati nove ideje, a kad isprobate nove ideje, učite i ići dalje. I sviđa nam se kad se to dogodi.

Upravo iz tog razloga, poprilično smo bili uzbuđeni kada su dečki iz bZx-a stupili u kontakt s nama i zatražili da im napravimo i napravimo web stranicu. Vidite, bZx je posao koji uzima prilično složene financijske instrumente i čini ih dostupnijima. A njihova je web stranica trebala odigrati ključnu ulogu u probijanju barijera u razumijevanju njihovog proizvoda.

Dakle, što točno radi bZx?

Pa, to je startup koji je specijaliziran za decentralizirano trgovanje maržama. Da - moramo priznati da smo na početku ovog procesa mnogi od nas u Zajnu, također, bili pomalo zatečeni kako to zapravo znači. Ali nismo odlagali: ako je ovaj projekt podrazumijevao kompletan ciklus učenja, od "ha?" Do "aha!", Onda smo to bili u redu s nama.

Upozorenje spoiler-a: trgovanje maržom je poput svake druge vrste trgovanja, osim što se posuđuju sredstva s kojima trgujete: uzimate zajam i zatim pokušavate zaraditi novac prije nego što ga morate vratiti.

Tradicionalno, ovaj zajam bi došao od nekog velikog financijskog subjekta, pomalo nalik banci, koji je u biti pozajmljivanje tuđeg novca u njihovo ime. Decentralizirano trgovanje maržom znači pronalazak načina da posuđujete novac (ili neku drugu trgovačku stvar, poput bitcoina) izravno od svog stvarnog vlasnika. I to je ono o čemu se radi u bZx-u.

Ključni element ovdje je protokol koji su momci razvili koji omogućava bilo kakvu razmjenu - to je veliki financijski subjekt koji smo već spomenuli - olakšavajući decentralizirano trgovanje. To znači da umjesto da sami upravljaju sredstvima koja se daju u zajam, jednostavno stave zajmodavca i zajmoprimca u sigurni kontakt jedni s drugima i puštaju ih izravno u transakciju.

Koje su prednosti ovoga? Pa, prvo, postoji sigurnost: kad razmjena zadrži sredstva, ona može postati meta napada. Pohranjivanje sredstava na mnogim decentraliziranim lokacijama čini ih sigurnijima nego stavljanje svih u jedan veliki trezor.

Tada postoji trošak: jer razmjena ima manje posla, pozajmljivanje je jeftinije. I na kraju, budući da decentralizirane razmjene mogu dovesti trgovce u kontakt s više izvora financiranja, može im pružiti više „likvidnosti“ kojom trebaju trgovati.

Duboki uzdah. Da: ni nama to nije bilo lako Sljedeći je dio bio to prevesti u jednostavnu, lijepu vizualnu metaforu.

Dizajn

No, bZx nije htio samo staru, ilustrativnu web stranicu (puno ljudi to već ima). Željeli su i značajnu dozu wow-faktora: ovo bi trebalo biti mjesto za podudaranje ili bolje za one koji su već vani u industriji. I tako je to što smo odlučili stvoriti pažljivo sastavljen niz visoko detaljnih animiranih ilustracija, od kojih svaka formira poveznicu u jasnom narativnom lancu.

Nakon izrade apetita uz silno istraživanje i izradu prototipa, ušli smo u posao na dizajnu s pravom guštom. Ključno pitanje na koje smo morali odgovoriti bilo je koju bi jednu metaforu mogli upotrijebiti za objedinjavanje svih različitih elemenata mjesta: i nakon mnogo trljanja brade, došli smo do ideje kovanice i cjevovoda. Prvi predstavlja novac (obvs), dok drugi predstavlja procese trgovanja i kreditiranja. Jednostavno, zar ne?

Prva verzija web stranice izgledala je lijepo - ali nešto je nedostajalo. Metafora koju smo odabrali nije baš daleko: bila je previše minimalistička da bi ilustrirala sve potrebne komponente. I iako je vizualni efekt bio ugodan, nije baš imao učinak kojem smo težili. Pa smo se vratili do brade i još ih malo protrljali.

1. verzija dizajna

Upravo se dogodilo da se ovo trljanje brade - i razmišljanje koje se nastavlja uporedo s tim - odvijalo na jugu Španjolske, gdje se naš tim privremeno preselio. I tako je bilo dok smo jednog jutra gledali u zapanjujući, hrapav pogled iz naše kuće za iznajmljivanje, nešto je kliknulo u leđima našeg kolektivnog uma.

Problem, shvatili smo, nije u novcu i cjevovodu po sebi - samo ih je potrebno staviti u smisleniji kontekst. Dodali smo pozadinu planina i odjednom su cijevi postale konopci: nešto što ne samo da prevozi, već nudi i nove vidike i perspektive - baš kao bZx, što olakšava čitav niz funkcionalnosti trgovanja maržama, uključujući kratke i pozicionirane pozicije.

Ali, tu je stvar u vezi s planinskim zrakom: može pročistiti um ili, ponekad, može vam malo ići i na glavu. I dok je naš novi dizajn bio lijep, i učinio mnogo onoga što smo tražili, to je bio i dodir, previše Indiana Jonesa, kad nam je trebalo malo više Blade Runnera.

2. verzija dizajna

Tada smo se, vraćajući se u veliki grad, napravili treća i posljednja verzija web mjesta (treći put je šarm, zar ne?) Ovaj put smo stvorili novu, još veću ilustraciju - dovoljno veliku da je zapravo postala stranica. Zadržali smo temeljnu metaforu koju smo izmislili na početku i zadržali smo uvid da je to potrebno staviti u smisleni kontekst - ali sada smo taj kontekst učinili tehnološkim.

I konačno smo je imali: bZx kao monumentalni, složeni mehanizam, neprimjetno izražen kroz sve elemente web stranice, koji su sada zajedno ispričali cijelu priču o tvrtki.

Konačna verzija dizajna

Razvoj

Ali web stranica je više od samo zamišljeno zamišljene ideje. Očistite kožu, a unutrašnji dijelovi - tehničke stvari - također su prilično zanimljivi. U slučaju ovog projekta, ovdje donesene odluke uključuju…

Samo pomoću Vektorske grafike

Korištenje vektorske grafike znači da slike uvijek zadržavaju savršenu kvalitetu, bez obzira na njihovu veličinu - što je bitno za nas u ovom projektu zbog korištenja prilagodljivog izgleda. Ova odluka također je značila da možemo upravljati svim ilustrativnim detaljima pomoću JS-a, kao i smanjenje veličine datoteka u odnosu na PNG.

„Postavili smo sebi cilj potpuno zatvoriti vrata„ nekvalitetnim sadržajem “. To znači da nema GIF-a i PNG-a. "
Sofy, digitalni umjetnik u Zajnu

(Zapravo, vrlo malo PNG-ova se ušunjalo na web stranicu u konačnici, u obliku fotografija članova tima. Ali primijenili smo sjajan efekt koji ove mješavine čini prilično neprimjetno.)

Preuzimanje SVG + JS pristupa samo u animaciji

Programirane animacije samo pokreću prstenove oko svoje GIF / video braće; zauzimaju manje prostora, što znači da brže i pouzdanije rade, a vektorska grafika znači da nikad ne gube na kvaliteti. S druge strane, JS je bolji od CSS-a jer omogućava upravljanje animacijom na niskoj razini - što nam je bitno u ovom projektu zbog velikog broja detalja koje je potrebno animirati. Povrh svega, držanje SVG + JS omogućava vam izgradnju neke interaktivnosti. Sigurno ćemo se u budućnosti vratiti pristupu!

"Nisam jednostavno uživao u ovom poslu - stvarno me naučio nekim novim stvarima usput."
Andrew, glavni programer u Zajnu

Inzistiranje na super-reaktivnosti

To je 2k18, a ljudi koriste vrtoglavi niz uređaja - svi s različitim razlučivostima. I ne možete stvoriti točke prekida za sve njih. Dakle, jedini način da web stranica izgleda dobro na bilo kojem uređaju - kako bi bila fluidna - je korištenje izgleda koji u konačnici odgovara. To smo učinili pomoću zajedničke točke prekida za sve zaslone radne površine, tako da web mjesto nesmetano teče u sve prostor koji je dodijeljen.

"Moram reći da sam prilično očaran rezultatom."
Ivan, CTO u Zajno.

(To je prvi put da smo implementirali ovu vrstu apsolutne reakcije, i istina je da smo je neko vrijeme imali na umu da ovo previdimo. Stoga smo neizmjerno oduševljeni što smo ovaj projekt doveli do uspješan zaključak.)

Izazovi

Za nas u Zajnu, ovaj je projekt uključivao čitavu gomilu prvih. To je značilo suočavanje s popriličnim izazovima na putu - ali, sa svakim od njih, postali smo jači. Neki od njih su:

Prevladavanje sukoba SVG ID-ova

Prilikom izvoza SVG-ova sa Sketch-a pomalo je poteškoće kombinirati ih u jednoj HTML datoteci - posebno kada se web-lokacija sastoji od desetaka SVG-ova. Rješenje je bilo ručno popraviti svaki SVG - dugotrajan, ali ključan.

Savršeno prilagođavanje SVG za JS animaciju

Sve se to svodi na reorganizaciju slojeva. Prilikom stvaranja ilustracija teško je predvidjeti kako će se svi slojevi morati organizirati kako bi se kasnije stvorila JS animacija svih potrebnih elemenata. Prevladavanje toga samo je pitanje vremena, truda i prakse, kao i stvaranje bliske simbioze između umjetnika i programera, tako da vizualni materijali stižu u obliku koji omogućava njihovu lako animiranje u JS-u.

Izrada ciklusa s jednom animacijom s do 66 Tweens-a

Većina animacija na web mjestu vrlo je detaljna, u pravilu sadrži preko 50 tweens-ova svaki. Ručno spajanje svih tih pinceta u jedan ciklus animacije prilično je mukotrpan posao - ali rezultati su i vrijedni toga.

„Proveli smo nekoliko vrlo sretnih sati ispraćajući! Živio TweenMax! "
Artem, glavni programer u Zajnu

Korištenje samo animacija odjeljka u prikazu

Da bismo povećali učinkovitost cijelog sustava, web stranicu smo izradili na način da bi animacije radile samo kad ih pregledate.

Prelazak na raspored koji djeluje na fluid

Koristili smo zajedničku točku prekida za sve zaslone radne površine da bismo stvorili učinak razmjera koji uklanja sve gubitke kvalitete. Ali nismo mogli koristiti samo postotke ili VW / VH - kao što obično možemo - jer nam je potreban da se temelji na određenom spremniku, ali ne i nadređenom čvoru ili čitavom okviru prikaza. Zbog toga smo koristili rem jedinice za gotovo sve elemente web stranice.

Rukovanje rasporedom rasporeda

Budući da smo koristili izgled koji djeluje na fluid, umjesto uobičajenih adaptivnih, nismo morali stvarati puno prijelomnih točaka. Ali morali smo stvoriti barem još dva: za zaslone tableta i mobilnih uređaja. S obzirom na složenost struktura prikazanih na web mjestu, bilo je posebno teško preurediti elemente tako da je logika bila jasna i web stranica izgledala dobro i dosljedno u bilo kojoj rezoluciji.

Rezultati

Misija izvršena

Izvršili smo sve zadatke koje nam je postavio klijent: stvorili smo uistinu priču o web-mjestu za pripovijedanje, objedinjenu jedinstvenom temom koja pripovijeda uvjerljivu vizualnu priču koristeći animaciju. Izgled i osjećaj stranice posvećeni su našem vlastitom osjećaju i čudit ​​će svima koji ga kontaktiraju.

Odlična izvedba

Web lokacija koju smo izgradili ne samo da izgleda prilično sjajno - već i djeluje prokleto dobro (ako to i sami kažemo!) Podvrgli smo je opsežnoj reviziji pomoću alata za razvojne programere Chrome i svjetionika, a postigla je ocjenu ~ 95/100.

Vještine iskren

Ovaj nas je projekt naučio novim stvarima i izoštrio vještine koje smo već imali. Učinio nas je spretnijima u kreiranju potpuno odgovornih izgleda i JS animacija te u radu s tonovima vektorske grafike.

Kako bismo zaokružili stvari, ne možemo odoljeti da dijelimo konačnu presudu našeg klijenta:

„Sjajni momci. Stvarno sam ispuhan! Prema mojoj procjeni trenutno imamo možda i najbolju web stranicu u industriji. Ovo je bilo ozbiljno djelo svjetske klase. Drago nam je što smo odlučili poći s tobom. "
Kyle Kistner, CVO i operativni potencijal na bZx.

Ažuriranje: bZx je osvojila internetsku stranicu dana na CSSDA-u i Počasnu uspomenu na dodjeli!

Ostavite komentar i recite nam kako da sljedeći put možemo poboljšati svoje pripovijedanje, postavite nam pitanje, dogovorite se za sastanak ili napravite prijedlog za daljnji dio.

Web stranica | Dribbleble | Mreža | Spotify | Facebook Twitter | Instagram

Ako vam se to svidjelo, kliknite kako bi drugi ljudi vidjeli ovo ovdje na Medium.