Shawn Colvin The Starlighter

Web Designer - - Breaking The Mould -

youtu.be/xb­n­swh­pvrhy

When we first started this project I re­ally couldn’t see the end. A 20-minute mu­sic video built with il­lus­tra­tions we had to put to­gether in-house be­fore an­i­mat­ing in An­i­matecc and set­ting up cam­era rigs, 3D ro­ta­tion and depth of field all in 5K.

To make it harder on us we also de­cided to base the whole thing on a stage in a theatre, so the an­i­mated lul­laby sto­ries would be based within a par­ent en­vi­ron­ment of a theatre full of peo­ple.

On top of that we’d also ro­tate the stage, so the cam­era floated around to the back­stage view, which meant de­sign­ing both a front and a back view for hun­dreds of mov­ing pieces.

We never make things easy for our­selves and half­way through I felt like we’d never com­plete it, but if you keep mov­ing for­ward each day you even­tu­ally see the fin­ish line. The video is a pro­mo­tion piece for the new al­bum of lul­la­bies by Shawn Colvin and it now re­sides on Ama­zon Prime US.

Martin also ex­plains: “Yes, the same. But I’m a big fan of Pro­cre­ate and Adobe Draw on ipad, so I sketch and make il­lus­tra­tions (all of the Shawn Colvin im­agery was hand-drawn with Pro­cre­ate) on the ipad then I take that over to Pho­to­shop to slice. “The usual work­flow for me would be to draw a char­ac­ter on the ipad. Im­port that to Pho­to­shop on the desk­top. Cut each limb and place them in their own layer. And fi­nally im­port those pieces to An­i­matecc be­fore set­ting them up with in­di­vid­ual pivot points on their own lay­ers to cre­ate the com­plete char­ac­ter. They are then ready to an­i­mate and pass over to Jor­dan for im­port to the en­vi­ron­ment. Quite a lot of work but once you have that pup­pet set up you can re­use it through­out the over­all an­i­ma­tion.” With such a long his­tory and ex­pe­ri­ence how does We­fail see the evo­lu­tion of the dig­i­tal space and the tools in­clud­ing HTML5, CSS3 and Javascript de­vel­op­ing? “I’d say they’ve al­ready been shap­ing web de­sign for the past six years, to be hon­est they’re the only tools used by the ma­jor­ity and I don’t think they’re ac­tu­ally be­ing pushed when it comes to fun in­ter­ac­tion and left­field ideas,” says Martin. He con­tin­ues: “I can’t re­mem­ber the last site I saw that I told any­one about, and I think that’s down to both the tools and the de­sign­ers. We seem to have fallen into a one-page scroller habit and if that’s all that’s be­ing made then why ask for more. I’ve seen no in­no­va­tion in web de­sign in a long time. It’s un­for­tu­nately be­come the most bor­ing de­sign medium of all. “One prob­lem is that to ac­cess de­sign now you ab­so­lutely need to know how to code at root level. In our day we had Flash and a huge amount of help with code snip­pets and the way the app it­self held your hand and in­tro­duced you to the ba­sics. One per­son could sit in their bed­room and build the most amaz­ing foun­da­tion for a site within a day. I’d like to see An­i­matecc picked up more with the out­put be­ing Createjs for Can­vas. It’s so much like the old days of de­sign­ing in Flash that it’s ac­tu­ally fun to work with.” Se­bas­tian agrees: “Hav­ing the abil­ity to use fa­mil­iar tools such as An­i­matecc is a mas­sive ad­van­tage. With An­i­matecc ex­port­ing Javascript, old Ac­tion­script 3.0 users like Martin can do ev­ery­thing… well, almost ev­ery­thing he

did be­fore. An­i­matecc’s IDE is so flex­i­ble that the old Flash mas­ters at We­fail have no real rea­son not to use Createjs to build mind blow­ing ex­pe­ri­ences like they did in Flash’s ‘golden’ days. I am just happy to help them out! “As with most We­fail projects, not only do we try to use the lat­est and great­est ver­sions of the Createjs Li­braries, but we also use advanced fea­tures that most de­vel­op­ers are un­aware of. When we started we­fail.com we de­cided that we wanted it to be fast, fast on both desk­top and mo­bile de­vices, so a lot of care was taken when putting it all to­gether. Stagegl fo­cuses on con­tent that WEBGL ex­cels at ren­der­ing, which was per­fect for the ex­pe­ri­ence we wanted for we­fail.com. Of course there are other se­cret op­ti­mi­sa­tions that we did but Martin has for­bid­den me to share them here… I have said too much al­ready.” Mo­bile is a key com­po­nent of the web ex­pe­ri­ence. What is We­fail’s ap­proach to de­sign­ing and de­vel­op­ing for dif­fer­ent de­vices? “We now de­sign a site for mo­bile and then adapt it for desk­top,” Martin ex­plains. “Our work­flow will be get­ting the frame­work to­gether and func­tion­ing as it should do on phones, then work­ing through break­points up to the largest desk­top screens. For we­fail.com there was a lot to con­sider, things like the ras­terised fall­ing text-cards had to be in­tel­li­gi­ble on an iphone 5’s screen but also had to hold to­gether on a 5K mon­i­tor. If we make a site I want to know I can use it the same way on all de­vices and desk­top. I hate when you visit a

“Be pas­sion­ate with your work! Even if it’s not the most ex­cit­ing work, find some­thing about it that will chal­lenge you. No­body likes a grey cloud. Martin likes to come up with the cra­zi­est ideas and my ini­tial re­sponse is ‘no way’ and af­ter a few hours I chal­lenge my­self to fig­ure out a way to get it done” Se­bas­tian Derossi, De­vel­oper

site on mo­bile and they’ve put a video of it on there be­cause they didn’t get it work­ing on smaller screens.” The part­ner­ship that is the foun­da­tion of We­fail is un­usual. Look­ing back what ad­vice would they give to any­one start­ing out? “We­fail has al­ways been just Jor­dan and my­self un­til I stum­bled on Createjs and be­gan talk­ing with Sebi and un­for­tu­nately for him he was too valu­able to us, so he helps out a ton with the wiz­ardry of Createjs,” says Martin. “My god, ad­vice for peo­ple get­ting into in­ter­ac­tive web de­sign? Be­come a vlog­ger in­stead, it’s way eas­ier and the money seems to be ou­tra­geous. Se­ri­ously though it’s such a dif­fi­cult job to make an­i­mated fun sites now that run on mo­bile, I’d say look to part­ner up with some­one that cov­ers your weak­nesses. So, if you’re a great an­i­ma­tor, team up with a great coder, make some­thing fun and post it up. God knows we need some­one to shake things up or we’re all go­ing to be look­ing at one mil­lion vari­a­tions of a one-page scroller with a sad little CSS an­i­ma­tion for decades to come.” Se­bas­tian also com­ments: “Be pas­sion­ate with your work! Even if it’s not the most ex­cit­ing work, find some­thing about it that will chal­lenge you. No­body likes a grey cloud. Martin likes to come up with the cra­zi­est ideas and my ini­tial re­sponse is ‘no way’ and af­ter a few hours I chal­lenge my­self to fig­ure out a way to get it done. It’s re­ally re­ward­ing to push your­self and usu­ally your client, em­ployer or co-work­ers will al­ways re­spond pos­i­tively.” And what of the fu­ture? Martin con­cludes: “We’ve just fin­ished the Shawn Colvin mu­sic video and that was four months tied to the com­puter day and night, so at the moment we’re dust­ing our­selves off and recharg­ing. Ideally I’d love for us to get a mu­sic video to an­i­mate or a cool little Javascript site that’s fun and aimed at leav­ing an im­pres­sion on the user. “There’s not many stu­dios left that make off-the-wall sites, as mo­bile pushed ev­ery­one into an HTML tem­plate that was guar­an­teed to work on all res­o­lu­tions and give you a pain­less work­flow. That in turn be­came what clients ex­pect, to get a sim­ple HTML page that fol­lowed the de­sign of ev­ery other site be­ing made at the moment. “Tech­ni­cally it works, but as far as a mem­o­rable ex­pe­ri­ence goes it’s empty. I think we’ve lost the art of mak­ing peo­ple laugh or get­ting some kind of emo­tion out of them with a web­site. Ev­ery­thing’s be­come so se­ri­ous and fol­lows the same struc­ture, but be­ing se­ri­ous doesn’t al­ways make an im­pres­sion. We need to step away from the one-page scroller.” We­fail strive to de­velop dig­i­tal ex­pe­ri­ences that are un­for­get­table. In an en­vi­ron­ment that seems to have lost its ex­cite­ment and abil­ity to ex­per­i­ment, We­fail fly the flag for rich, edgy im­mer­sive spaces that hail the early days of the Web, when any­thing was pos­si­ble. If there are cham­pi­ons for a re­turn to ex­per­i­men­tal de­sign, then it’s We­fail.

Below Cur­rent an­i­ma­tion tech­niques and tools bring to life a by­gone era of minia­ture theatre reimag­ined for the iphone gen­er­a­tion

Left Stun­ning art di­rec­tion cou­pled with fluid an­i­ma­tion il­lus­trates the di­ver­sity that We­fail bring to the de­sign com­mu­nity

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.