Visualisering af penge: hvordan vi forklarede et komplekst finansielt produkt ved hjælp af animation

bZx, en decentral margenhandelsstart, bad os om at bygge dem et websted. Her er hvad der skete.

Hos Zajno kan vi lide udfordringer. Vi ved, at alle siger det - men det gør vi virkelig. Måske kan du lægge det ned på vores medfødte nysgerrighed: Når du har et vanskeligt problem at løse, skal du prøve nye ideer, og når du prøver nye ideer, lærer du og går videre. Og vi kan lide det, når det sker.

Af netop denne grund blev vi temmelig ophidset, da fyre på bZx kom i kontakt for at bede os om at designe og bygge et websted til dem. Du ser, bZx er en virksomhed, der tager nogle temmelig komplekse finansielle instrumenter, og gør dem mere tilgængelige. Og deres hjemmeside skulle spille en nøglerolle i at hjælpe med at nedbryde hindringerne for at forstå deres produkt.

Så hvad gør bZx nøjagtigt?

Det er en startup, der er specialiseret i decentral margenhandel. Jepp - vi må indrømme, at mange af os her i Zajno allerede i begyndelsen af ​​denne proces var lidt stumpede over, hvad det virkelig betød. Men vi blev ikke afskediget: Hvis dette projekt betød at afslutte en fuld indlæringscyklus, fra 'he?' Til 'aha!', Så var det fint af os.

Spoiler-advarsel: marginhandel er som enhver anden form for handel, bortset fra at de midler, du handler med, er lånt: du tager et lån og prøver derefter at tjene penge med det, før du skal betale det tilbage.

Traditionelt kommer dette lån fra en stor finansiel enhed, lidt som en bank, der i det væsentlige låner dig en andens penge på deres vegne. Decentraliseret marginhandel betyder, at du finder en måde at låne penge (eller en anden omsættelig ting, såsom Bitcoins) direkte fra dens reelle ejer. Og det er det, bZx handler om.

Det centrale element her er en protokol, som fyre udviklede, der lader enhver udveksling - det er den store finansielle enhed, vi har nævnt før - lette decentral handel. Dette betyder, at i stedet for at de håndterer midlerne, der udlånes selv, sætter de simpelthen långiver og låntager sikkert i kontakt med hinanden og lader dem handle direkte.

Hvad er fordelene ved dette? Nå for det første er der sikkerhed: når en børs besidder midler selv, kan den blive et mål for angreb. Opbevaring af midler på mange decentrale steder holder dem mere sikre end at lægge dem alle i et stort hvælv.

Så er der omkostninger: fordi udvekslingen har mindre at gøre, er udlån billigere. Og til sidst, fordi decentraliserede udvekslinger kan sætte de handlende i kontakt med flere finansieringskilder, kan de udstyre dem med mere af den 'likviditet', de har brug for at handle med.

Dyb indånding. Ja: det var heller ikke let for os. Den næste del var at oversætte alt dette til en enkel, smuk visuel metafor.

Design

Men bZx ville ikke bare have noget gammelt historiefortællende, illustrativt websted (mange mennesker har allerede det). De ønskede også en betydelig dosis wow-faktor: dette skulle være et sted, der matcher eller bedre dem, der allerede findes der i branchen. Og så var det, at vi besluttede at oprette en omhyggeligt sammensat række af meget detaljerede animerede illustrationer, der hver dannede et led i en klar fortællingskæde.

Efter at have arbejdet op med en appetit med en stor runde med forskning og prototype, blev vi fast i designarbejdet med ægte gusto. Det centrale spørgsmål, vi havde brug for at besvare, var hvilken enkelt metafor vi kunne bruge til at forene alle de forskellige elementer på webstedet: og efter meget gnidning af chin kom vi på ideen om en mønt og en rørledning. Den første repræsenterer penge (obvs), mens den anden står for processerne med handel og udlån. Enkelt, ikke?

Den første version af webstedet så flot ud - men der manglede noget. Metaforen, vi valgte, gik ikke helt afstanden: det var for minimalistisk til at illustrere alle de nødvendige komponenter. Og mens den visuelle effekt var behagelig, havde den ikke helt den virkning, vi sigtede mod. Så vi gik tilbage til vores chin og gnugede dem lidt mere.

Den første version af design

Det skete lige så, at denne hakegnydning - og den tænkning, der foregik ved siden af ​​den - fandt sted i det sydlige Spanien, hvor vores hold midlertidigt flyttede. Og så var det, da vi en morgen kiggede ud på den fantastiske, barske udsigt fra vores lejehus, klikkede der noget bagpå vores kollektive sind.

Problemet, indså vi, var ikke i sig selv mønten og rørledningen - de skulle bare sættes i en mere meningsfuld sammenhæng. Vi tilføjede en baggrund af bjerge, og pludselig blev rørene løbebaner: noget, der ikke kun transporterer, men som også tilbyder nye synspunkter og perspektiver - ligesom bZx, som letter en komplet række af marginhandelfunktioner, herunder korte og gearede positioner.

Men her er det ved bjergluften: det kan rydde sindet, eller nogle gange kan det også gå lidt til dit hoved. Og mens vores nye design var smukt og gjorde meget af det, vi ledte efter, var det også bare et strejf for Indiana Jones, når det, vi havde brug for, var lidt mere Blade Runner.

Den 2. version af design

Derefter, vender vi tilbage til den store by, lavede vi en tredje og sidste version af webstedet (tredje gang er en charme, ikke?) Denne gang skabte vi en ny, endnu større illustration - stor nok til, at det faktisk blev stedet. Vi bevarede den kernemetafor, vi var kommet med i begyndelsen, og fastholdt den indsigt, at dette skulle sættes i en meningsfuld kontekst - men nu gjorde vi denne kontekst mere teknologisk.

Og så endelig havde vi det: bZx som en monumental, kompleks mekanisme, der udtrykkeligt udtrykkes på tværs af alle elementer på webstedet, der sammen nu fortalte hele historien om virksomheden.

Den endelige version af design

Udvikling

Men et websted er mere end bare en gennemtænkt idé. Skræl huden væk, og de indvendige dele - de tekniske ting - er også temmelig interessante. I tilfælde af dette projekt omfattede beslutninger truffet her…

Kun ved hjælp af vektorgrafik

Brug af vektorgrafik betyder, at billeder altid bevarer perfekt kvalitet, uanset deres størrelse - afgørende for os i dette projekt på grund af dets brug af responsivt layout. Denne beslutning betød også, at vi kunne styre hver eneste illustrerende detalje ved hjælp af JS, samt at reducere filstørrelser i sammenligning med PNG'er.

”Vi satte os målet om helt at lukke døren for 'indhold af lav kvalitet'. Det betød ingen GIF'er og ingen PNG'er. ”
Sofy, digital kunstner på Zajno

(Faktisk snek nogle få PNG'er sig ind på webstedet i sidste ende i form af teammedlemmernes fotos. Men vi anvendte en sej effekt, der får disse til at smelte smidigt sammen.)

At tage en SVG + JS-eneste tilgang i animation

Programmerede animationer kører bare ringe rundt om deres GIF / video brødre; de optager mindre plads, hvilket betyder, at de kører hurtigere og mere pålideligt, og vektorgrafik betyder, at de aldrig mister kvalitet. På sin side er JS bedre end CSS, fordi det muliggør animationstyring på lavt niveau - vigtigt for os i dette projekt på grund af et stort antal detaljer, der skulle animeres. Oven på alt dette ved at holde sig til SVG + JS kan du indbygge en vis interaktivitet. Vi vender bestemt tilbage til fremgangsmåden i fremtiden!

”Jeg nød ikke bare dette job - det lærte mig virkelig nogle nye ting undervejs.”
Andrew, front-end-udvikler hos Zajno

Insisterer på Super-lydhørhed

Det er 2k18, og folk bruger en svimlende vifte af enheder - alle med forskellige opløsninger. Og du kan ikke oprette breakpoints for dem alle. Så den eneste måde at få et websted til at se godt ud på enhver enhed - for at gøre det flydende - er at bruge en sidst responsiv layout. Vi gjorde det ved at bruge et fælles breakpoint for alle desktop-skærme, så webstedet flyder jævnt ind i uanset hvilket plads det får.

”Jeg må sige, at jeg er temmelig betaget af resultatet.”
Ivan, CTO i Zajno.

(Det er første gang, vi implementerer denne form for absolut lydhørhed, og sandheden er, at vi har haft det på vores sind i et stykke tid for at give dette en chance. Så vi er meget glade for at have bragt dette projekt til en vellykket konklusion.)

Udfordringer

For os i Zajno involverede dette projekt en hel flok første. Det betød, at vi står overfor nogle få udfordringer undervejs - men med hver enkelt blev vi stærkere. Nogle af dem inkluderede:

At overvinde en SVG-ID-konflikt

Når du eksporterer SVG'er fra Sketch, er det lidt udfordrende at kombinere dem alle i en enkelt HTML-fil - især når webstedet består af snesevis af SVG'er. Løsningen var at manuelt fikse hver SVG - tidskrævende, men vigtig.

Perfektion af SVG-tilpasning til JS-animation

Det hele kommer ned på lagreorganisering. Når du opretter illustrationer, er det svært at forudse, hvordan alle lagene skal organiseres for senere at oprette en JS-animation af alle de nødvendige elementer. At overvinde dette er bare et spørgsmål om tid, kræfter og praksis samt skabe en tæt symbiose mellem kunstnere og udviklere, så visuals ankommer i en form, der gør det nemt at animere dem i JS.

Oprettelse af enkelt animationscykler med op til 66 tweens

De fleste af animationerne på webstedet er meget detaljerede og indeholder typisk over 50 tweens hver. At manuelt sætte alle disse tweens sammen i en enkelt animationscyklus er et temmelig omhyggeligt job - men resultaterne er det værd.

”Vi tilbragte nogle meget glade timer på at gå i mellem! Længe leve TweenMax! ”
Artem, front-end-udvikler hos Zajno

Brug kun In-View-sektionsanimationer

For at øge effektiviteten af ​​hele systemet byggede vi webstedet på en sådan måde, at animationerne kun ville fungere, når de rulles i syne.

Flytning til et fluid-responsivt layout

Vi brugte et fælles breakpoint for alle desktop-skærme til at skabe en skalaeffekt, der eliminerer alt kvalitetstab. Men vi kunne ikke bare bruge procentsatser eller VW / VH - som vi måske normalt - fordi vi havde brug for, at den var baseret på en bestemt container, men ikke en overordnet knude eller hele visningen. Derfor brugte vi rem-enheder til næsten alle webstedselementer.

Omorganisering af layout

Fordi vi brugte fluid-responsive layouts i stedet for de sædvanlige adaptive, var vi ikke nødt til at oprette mange breakpoints. Men vi var stadig nødt til at oprette mindst to mere: til tablet- og mobilskærme. I betragtning af kompleksiteten af ​​de strukturer, der er illustreret på webstedet, var det især udfordrende at omorganisere elementerne, så logikken var klar, og webstedet så godt ud og konsistent i enhver opløsning.

Resultater

Mission fuldført

Vi udførte alle de opgaver, som vores klient havde stillet os: Vi oprettede et ægte historiefortællingswebsted, forenet med et enkelt tema, der fortæller en overbevisende visuel historie ved hjælp af animation. Webstedets udseende og fornemmelse er alle vores egne, og det vinker alle, der kommer i kontakt med det.

Fantastisk præstation

Det websted, vi opførte, ser ikke kun godt ud - det fungerer også dårligt (hvis vi selv siger det!) Vi udsatte det for en omfattende revision ved hjælp af Chrome Developer Tools og Lighthouse, og det scorede ~ 95/100.

Færdigheder hævet

Dette projekt lærte os nye ting og skærpede færdigheder, vi allerede havde. Det har gjort os mere dygtige til at oprette fuldt responsive layouts og JS-animationer og til at arbejde med masser af vektorgrafik.

Bare for at afslutte tingene, kan vi ikke modstå at dele vores klients endelige dom:

”Flot arbejde fyre. Jeg er virkelig blæst væk! Efter min skøn har vi muligvis den bedste hjemmeside i branchen nu. Dette var noget seriøst arbejde i verdensklasse. Vi er glade for, at vi besluttede at gå med dig. ”
Kyle Kistner, CVO og Operations Lead hos bZx.

Opdatering: bZx har vundet dagens websted på CSSDA og en hæderlig nævnelse på Awwwards!

Efterlad en kommentar og fortæl os, hvordan vi kan forbedre vores historiefortælling til næste gang, stille os et spørgsmål, arrangere at mødes eller komme med et forslag til et opfølgende stykke.

Hjemmeside | Dribb | Gitteret | Spotify | Facebook | Twitter | Instagram

Hvis du kunne lide dette, skal du klikke på , så andre vil se dette her på Medium.