Friends with ben­e­fits

Web Designer - - Dutch Couraage -

Af­ter Mathis found the in­spi­ra­tion he needed, he had a pretty clear vi­sion of how his own port­fo­lio should be. But given his own value of col­lab­o­ra­tion and the great col­leagues he had around him, there was no rea­son to shoul­der the pro­duc­tion alone. “I started to cre­ate the con­cept my­self but it’s still re­ally help­ful when work­ing solo on a project to pick the brains of tal­ented peo­ple around you,” Bi­abi­any con­cedes. “This is where Lionel (Durimel) re­ally helped me be­cause we thought to­gether about the look of the time­line el­e­ment and its op­er­a­tion. Also, Célia (Lopez) made all the im­ages as pre­views for me and I’m pretty sure I wouldn’t have been able to do it in the same amount of time with­out her help. We took some time to pick the right im­ages from all my projects and she started work­ing on that while we dis­cussed an­i­ma­tion ideas for the menu on the home screen too.” Such prac­ti­cal as­sis­tance cer­tainly works won­ders on a project where time is short and much is be­ing done in those spare hours around your full-time agency job. Equally, though, you feel this ef­fort re­ally ben­e­fit­ted from the bounc­ing of ideas so things didn’t get too in­su­lar, while never ex­pand­ing prac­ti­cal in­put too much and di­lut­ing the cen­tral pur­pose. “In terms of the de­vel­op­ment, I coded ev­ery­thing by my­self and it wouldn’t have been ter­ri­bly valu­able to add other peo­ple into that process. Pri­mar­ily be­cause I re­ally wanted to han­dle the de­vel­op­ment du­ties for my­self and stay true to that see­ing as it is my own port­fo­lio!”

so­lid­i­fy­ing A con­cept

“It’s, of course, thanks to my wish to be­come a free­lancer that I needed a strong port­fo­lio, able to show all of that stuff ef­fec­tively while be­ing beau­ti­ful and in­ter­est­ing to nav­i­gate through,” Bi­abi­any ex­plains. “This web­site would help me to im­prove my own vis­i­bil­ity on the web and hope­fully pro­vide a nice place to make first con­tact with po­ten­tials col­lab­o­ra­tors and clients, etc.” Mathis al­ready knew he wanted this ‘nice place’ to high­light two im­por­tant ar­eas of work, with the first be­ing his ex­pe­ri­ence in team-based col­lab­o­ra­tive projects for high-pro­file clients. Se­condly, his col­lec­tions of per­sonal ex­per­i­ments amassed dur­ing a life­time learn­ing to code. “They al­ways were im­por­tant for me be­cause I al­ways made them in or­der to learn some­thing spe­cific which could be use­ful later.” Fo­cus would then shift nat­u­rally to seek­ing a visual in­spi­ra­tion that might in­form the pre­sen­ta­tion of this ex­cit­ing work. Mathis scoured some his favourite on­line sources here such as Be­hance, Pin­ter­est and De­signin­spi­ra­ be­fore hap­pen­ing across In­film Af­ter Ef­fects Tem­plates, a Youtube chan­nel show­cas­ing an­i­ma­tions he could see us­ing for the port­fo­lio’s nav­i­ga­tion. “The mo­tion was show­ing par­ti­cles in a per­spec­tive view, which were mov­ing in depth. When they stopped to move, a kind of fade was hap­pen­ing be­tween the par­ti­cles and a visual. I thought that if I could use the same logic for pre­sent­ing my projects, I would be able to make some­thing nice and easy to use.” This con­cept would ini­ti­ate some cod­ing tests that prove the tech­nique to be more dif­fi­cult than first thought, but gave Mathis enough im­pe­tus to con­sider the kind of UI needed to merge with the an­i­ma­tion. The find­ings here would lead to the en­list of friend and col­league Lionel Durimel, with the two talk­ing at length about what Bi­abi­any hoped to achieve. “His ex­per­tise was re­ally use­ful,” beams Mathis. “I be­lieve that ev­ery good pro­duc­tion starts with a re­ally solid con­cept so we took a long time to dis­cuss about what I should do and in­clude into the web­site. As long that the con­cept is done, all the rest will come way more sim­ply.”

par­ti­cle the­o­ries

The visual con­cept was, of course, es­tab­lished, but the big fo­cus had to be on mak­ing it func­tion­ally plau­si­ble — adding that de­sign to the art. Mathis knew it was vi­tal to keep the user in­formed of where they were within this depth par­ti­cle an­i­ma­tion, make it a vi­able nav­i­ga­tional el­e­ment. “The idea was to use scrolling to con­trol the par­ti­cles and go through the projects, but I needed some­thing more than just mod­i­fy­ing an im­age to show that the user was switch­ing be­tween them. The user needed to know where they were within the nav­i­ga­tion and what the cur­rent project is, etc., so with Lionel we thought about a cir­cu­lar time­line which would ap­pear only when mod­i­fy­ing the par­ti­cles po­si­tions, which meant, even­tu­ally switch­ing projects.” This time­line de­vice would dis­play the cur­rent project ti­tle while in­di­cat­ing the cur­rent depth po­si­tion within this ab­stract par­ti­cle world. Users could then jump to spe­cific projects via time­line hotspots, or use a more con­ven­tional method to keep things in­tu­itive. “This is why we thought about a menu, list­ing

“My port­fo­lio does not in­clude a lot of back­end de­vel­op­ment be­cause it does not re­ally need it, and also be­cause I’m not good at It”

all the projects, di­rectly on the main page, which would be eas­ier to ac­cess by us­ing a sim­ple hover ac­tion.” At least Lionel was on hand to help with the page de­signs, pro­duc­ing wire­frame tem­plates that could be ap­plied through­out. His work on the ‘About’ pages here would carry over to defin­ing var­i­ous de­tails of the main page UI, de­cid­ing on where ti­tles, so­cial net­work and con­tact links should be po­si­tioned. Sim­i­larly Mathis also had the aid of a sec­ond help­ful friend in the hugely tal­ented In­ter­ac­tive De­signer Célia Lopez, pri­mar­ily en­listed to take care of the fea­tured project pre­views. “I sent her some vi­su­als to crop in or­der to have some nice im­ages, which I then used to colourise the par­ti­cles with all the pre­views po­si­tioned into a spritesheet. Célia was also great in send­ing me ad­di­tional ideas about how the menu it­self should an­i­mate.”

A shade Dif­fi­cult

When the sub­ject moves briefly to how any back­end cod­ing work was han­dled, Mathis is the first to ad­mit this was de­lib­er­ately quashed. “My port­fo­lio does not in­clude a lot of back­end de­vel­op­ment be­cause it does not re­ally need it, and also be­cause I’m not good at it,” Bi­abi­any chuck­les self-ef­fac­ingly. “I al­ways pre­fer to fo­cus on the front part of a pro­duc­tion.” So in this in­stance, in or­der to quickly add an­other project or ex­per­i­ment to the site, he sim­ply added a file to fill in or­der to list them. This file would pro­vide all the in­for­ma­tion the web­site would need to work, such as ti­tles, de­scrip­tions and as­sets used, etc. Some­thing slightly more chal­leng­ing was cater­ing to dif­fer­ent plat­forms of course, a typ­i­cal co­nun­drum when try­ing to of­fer con­sis­tency and ad­e­quate per­for­mance. Vis­i­tors to the fi­nal live site will know that the port­fo­lio does not look the same on mo­bile and desk­top, largely be­cause the same kind of scroll couldn’t be used. So Mathis did two sep­a­rate builds ef­fec­tively, us­ing server-side check­ing to de­liver the right ver­sion to the tar­get de­vice. “On the other side, I think the most chal­leng­ing thing I had to do on my port­fo­lio was to keep the per­for­mance high. As a web­site ded­i­cated to show projects that con­sume lots of

re­sources, it was manda­tory.” This was high­lighted when an ini­tial ap­proach to give colour in­for­ma­tion in­de­pen­dently to each par­ti­cle worked to a point, only to show is­sues on mo­bile when the shaders Mathis wrote weren’t sup­ported by IOS. “This is why I changed my method here and put all my colours data into the spritesheet in­stead. This way I just had to pro­vide a tex­ture into my shader and go­ing through the im­ages while the user was nav­i­gat­ing. By scrolling, the user in­cre­ments a value in my shader that is then pick­ing the right colour for my tex­ture.”

“if i think that the project has enough value, i might sub­mit it on the fwa, awwwards and css de­sign award”

uni­formly Ac­cepted

These lit­tle chal­lenges fed into the gen­eral strug­gle to make the whole web­site uni­form and co­her­ent. Given its very ex­per­i­men­tal na­ture and con­struct, ev­ery­thing would change and re­act dur­ing the time a user would scroll so it wasn’t easy to do in terms of struc­tur­ing the code. How­ever, he achieved it and all within less than two months of pro­duc­tion turn­around in his own pri­vate spare time. So what about the launch then Mathis, how does a freshly free­lance dig­i­tal ge­nius un­leash his fin­ished port­fo­lio on the world? “OK, well, each time I re­lease a per­sonal pro­duc­tion,” he laughs coyly. “I tend to share it on Twit­ter and Face­book as this is, in gen­eral, where I get the most vis­i­bil­ity. Re­cently, too, I’ve started to do the same on In­sta­gram. Then, if I think that the project has enough value, I might sub­mit it on the FWA, Awwwards and CSS De­sign Award. As long as you maybe get a site of the day on there, you know that many peo­ple will po­ten­tially have a look into it. Such ex­po­sure can be a re­ally good op­por­tu­nity to make con­tacts.” This was, af­ter all, much of the mo­ti­va­tion be­hind the project in the first place. Far from a van­ity ex­er­cise started to pass the time be­tween him and two friends, the new Mathis Bi­abi­any port­fo­lio site might have been that, but cru­cially it would be an en­gag­ing plat­form for sell­ing his con­sid­er­able ta­lent. “In my opin­ion, as a fi­nal thought, I think my port­fo­lio and the project worked out pretty well,” our hero beams. “The orig­i­nal nav­i­ga­tion con­cept I re­alised and the projects it show­cases are what made it a suc­cess. Also, it ful­fils my goals to bring me new con­tacts to work with and a nice plat­form to com­mu­ni­cate what I can bring.” We couldn’t agree more Mathis and wish you ev­ery suc­cess!

top left Grab the cans, wig­gle the cur­sor and wait to see what hap­pens top right Resn’s Lit­tle Helper pow­ered by WEBGL and Three.js bot­tom left Tucked away top right is a nav­i­ga­tion that is ready to go bot­tom right Check out the work of friend and de­signer Célia Lopez

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.