Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Web Designer - 292 - Setembro - 2019

    Enviado por

    edivan de castro soares
    78 visualizações100 páginas
    Web Designer - 292 - Setembro - 2019

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Web Designer - 292 - Setembro - 2019

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    78 visualizações100 páginas

    Web Designer - 292 - Setembro - 2019

    Enviado por

    edivan de castro soares
    Web Designer - 292 - Setembro - 2019

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 100
    TIG CREATIVE © EXPERT TIPS AND TECHNIQUES Expert tutorials, techniques and inspiration GREATEA CIRCULAR ‘CAROUSEL ° BUILD INTERACTIVE TABLES FAST e ‘DYNAMIC PANORAMAS: e CREATIVE BUILD TODAY’S WEB EXPERIENCES THE RIGHT WAY WRITEHTML FASTER © MAKE YOUR OWN ELEMENTS © PROPER MARKUP AND SEMANTICS === Can you afford downtime, theft or fines? 65% of cyber attacks are targeted at smaller businesses. Introducing Website Security from Heart Internet Never worry about the safety of your site again a ms © Ss Action Alert Prevent Improve Remove malware Get immediate Stop future hacks Make your site even from your website as__ updates about issues with our Web faster with our soon as it appears. on your site Application Firewall built-in CDN Introductory Offer Available Now Call us on 0330 660 0255 or visit www.heartinternet.uk/website-security Download our free ebook “Your Guide to Website Security’ at www heartintemet.uk/guide-to-website-security Heart Internet Meta Welcome Welcome to the issue ‘THE WEB DESIGNER MISSION) HTML: never forget ‘TMListhe foundation of the Web. tt Pus theres an itocacton to Emmet that wl al cevotves, 8gros, understanding how sors togonetateHTML mi fase 2 short ice IR works today iasimportantas ever how ob your vm HTML elements art lock ‘Things that were once recommended may x the ears that re comng to HM ver soon rnotbe anymore, Toensure your designs Keepng HTML company we nave CSS CodePen provide the very best performance ou nd ces carder Acar Kis digs deep rio he ‘eed to get your HTML right beta and reveaisacolacton of the srartest CSS Follow us on Twitter for all the news & conversation Visit our blog for opinion, freebies & more ‘Assets -5OHypebeastpresets (worth $19) fom Sparkestock ~T6Mnimast business card mockups worth S16) ~S0Seamiesstoxures(worth$5) “Tutoralflesandassets wwwfilesilo.co.uk/webdesigner welcome 3 Meta Contributors This issue’s panel of experts ‘Welcome to that bit of the mag where we learn more about the featured writers and contributors. ah Matt Crouch ses Page 6 Sano VercTeveeeT=1el Brel iiated ‘Adam Kuhn Mark Shutflebottom Tamanna i? eo ra) ‘Will Yoxall Leon Brown David Howell lit Joseph Ford Frank Kagumba Follow us! rene 4 experts FOOTBALL PITCHES EVERY DAY! vide wood for making paper and many other products, know that European forests, which pr : to 9 by 44,000km? over the past 10 years? Thats more than 1,500 football pitches every day! rave grown by 44, Peres Love magazines? You'll love them even more knowing theyre made from natural, renewable and recyclable wood "unto, Gta Foret Rescues Assam 2005-205. There are some great seth paTiacebsemca reasonsto Hioveruer film i pape Discover them now, on twosides.info MISESS Meta Inside issue 292 Cutting-edge features, techniques and inspiration for web creatives 2 with the team and other readers and discuss the latest tech, trends and techniques, Here's how to stayin touch, webdesigner@futurenetcom » @WebDesignerMag » wwwcreativeblog.com 08 What'shappening with Google Chrome? Web Designer takes. lok tthe browse ‘Tl Asoundidea 12 Webkit:Thebest must-try resources out there 16 Lightbox 30 Creative species 36 Backissues ach up on ay ssues of Web Designer that yeuive mise by downloading acgtaleccr 38 Wilddesign WiebDesigner vs out mere 84. 17proCSS animation tips 92. Hosting listings 94 Courselistings 98 Nextmonth ‘See what’ inthe nextissue ct Web Designer 6 contents TUTORIALS Greateacircularspinning UL yourimages endef pace 62 Speedup WordPress ‘iagncee andi say hac ies by using the btestservertech and asset optmesaton ages 66 Create dynamic 3D panoramas 70 Creative video navigation Inreduce maghaeandengagng tects 72. Buildantonicapp Inpart onecttnswo part senescannectto a Code interactive tables Use me Tabular Javasenst rameworkto FILESILO 96 Getthelatest must-have resourcesand videos +50 Hypebeast pests 16 Mnimatst texts fom Sparlstock (parkiestockcom) | myt magazines Vat he Web Designer one shops DIGITALEDITION _ cata you pred soe dora Googly = tveta Tres ape cata Subscribe today and Pr Dyce Ly contents 7 News CONTACT Us AT: webdesigner@futurenet.com | @WebDesignerMag Header The tools, trends and news to inspire your web projects What’s been happeni with Google Chrome? © The most popular browser gets even more popular and introduces a host of new updates for developers sweailknow, Google CChromeis by far the most globe i= ac39) hittpsiidevelopers googlecom/web ta Uupaates/2018/07/sevtoois 6€Chromeslatest version allows for easier installation of aPWA 99 Subscribe today and get 5for£5 STAT ATTACK SOCIAL STATUS How have the major social channels fared over the last year? Facebook 72.16% Up neary 9%on the same Pinterest 14.46% Signy down on ast year, tony very stati Twitter 6.06% ‘The 280 character king has dropped by 2% YouTube 3.86% Token abit plunge, rapping by areuna Instagram 175% Song down but by ess ‘han one percent 3 >» Header Inspiration OQ @ stherecreationalist.comn @ © = KERAMOUME oO. O1. The Recreationalist 02. NextLevel tps nenieenique como TAKE TEN Corey Wash 04, MA True Cannabis Psnavuncarnaisconen Graphics Colour picker Logotypes vol.6 Light Money Along: DashCore ntpsb/2TONESe rpsiy2bema ntpntheme comipreview!sehcore Gages bk ean gly rarpatights, | A ost spl began themes sce cemers tein scm, | sede antes otng amaity and | sinedatstarupe dewopers Se Bley ae trove nd ci ABCabc 0123456789 sz OL Inspiration 9 Daas SIGN UP TO THE NEWSLETTER TODAY! Get weekly news, tips & inspiration Header ‘Comment Aural intervention is asound idea Why it is time that the industry must start taking audio seriously ‘Simon Landi Mansaing Drector 66 Arecentreport into Gen Zandmillennials by Spotify found that 56 percent believe that audio can serve as adistraction from toomuch visual stimulation 99 lose your ees. Goon. ustforaminute Now stents extraordinary what You notice when youre eprvedo your primary sense With theraure of our ‘environment being overwhelmingly sia. sto easy to overook the ‘ural elements ofa brand and business But what's becoming more evident to Recent esearch by agency Neuro-nsight concluded that brands that overtook sound asa creative tool are ising out on acrcil dimension of branding” Sound artist Yuk Suz fakes ‘even furthe,"Sound in tranding leaves strong imoresion, even stronger than visas” ‘Around 60 percent of British Smartphaneuses are using voice technology teat oncea ‘month, wth ten per cent of nouseholds now owning asmart speaker device, Moceover, 342531 people are registered as blind ana partially sighted in Great rain. wth many more ‘unregistered people experiencing sigh relatedisses, ital medi and technology canbe a ete, and thelssue of access shoulant be oveooked by any teced business. Presenty image remains kin. Instagram sols and pictures. gal bibearés. ana Facebook videos wth subtitles are consumedtby many ions of people. Aco iften tle ‘more than an afterthought yet 'ssucha powertulmedium Reaction o Sound sone of eur ‘most primalinstncs and begins from conception, Embryos react to sounds outside the womb andareshownto be sothedby ther mother's voice canbe THE mos efective emotional ‘wgger— evoking memeris teins and associations thatimages on ther own cant Ian ag@of overload, consumers aredemandlnga break om screens. recent repertinto ‘Genz and millenia by Spotty found that 6 percent believe tht audi can serve asa stration ram tom visa stimulation Ween see tsin the explosion of podcasting, ‘udlabooks and voce assets, While auco canbe consumed passively. canbe at Rs most ‘efectve when t's usedasakey element to aproject. Weputaudofront and centreinarecent ‘cinema advert and ideo we produced forthe University Of Central Lancashire (UCL an by using ‘thea Eyre anthem Together asthe soundtrack is poste ricl message anc ving Beat chimed perfect with te campaign message and our creative, Feedback rom the campaign hows that to our audencesthe Sound ofthe campaign was as memorable asthe suas Ns was undoubtealy a hugefactorinus delivering UCLans most suecesstulrerutment campaign Inrecen years. welldeploved use of music canhave significant impact on brand awareness toa Wo doesnt now associate Jt wth Jess Glynn's Hold My Han snow even layed efor take oon every ght t's connection that Or, Chris Wright senor media academic at Shafi Hatlam University nas been exploring He ay: "People who ove music havethe capac to lve brands more they use music they canengage wih” Buthis esearch ‘scovere that the musi used height it iil turns consumersof brand Logit then, we needa develop a means of argeting music to consumers more ‘efectvly. Streaming Services ike Spotty and Apple Musichald extensive dataon ther customers kes and sixes ~ inorder to serve them asteady at of musical suggestions they {ar lel to approve of There seems no reason why thisknd of personatzationcouldnot be adopted in theadvertsng sphere to better tar an experiance the pubic Inthe future, people watching the adverts on YouTube, Facebook or digital V services might be served an entirely bespoke soundtrack, uniqueto them chosen by an algorithm that understands ther personal tastes. This could generate much more meaningful levels ot ‘engagement for bran, Stodes have even shown that consumersnowhave thir own ‘expectations of what brands shoul actualy sound ke I's prompted glanske Mastercard and HSBC to create ther oun'sonc bana identity Lstento whats happening around us. Harnessing aio silly presents us with endless ‘opportunites to dscover what our audiences want now andin the fir. comment " e webkit Discover the musttry resources that will make your site a better place va Design ‘The Eva Design System tags itself asa “deep | hasbeen entered, the design system creates learning colour generator”. The beauty ofthe | a election of palettes under the titles stem system I ts simplicity The fst step isto add_| Success, nfo, Warning and Danger Hit the smtp colorseve design the hexcode or your brand colour. Once this | Export button to save. TOP5 Web conferences October 2019 Get yourselfa seatat the biggestand best conferences coming soon Fronteers htps1/20}9.agecambridge net htpsftromeersneongres/2019 ‘practical aglie development conference | A host stimulating, thought: provoking Where participants can connect and learn _| talks from leading expert speakers across fromtheir peers and leadersin theindustry. | two daysin Amsterdam. 2 resources webkit Discover the musttry resources that will make your site a better place Gradient Magic TOP5 Codepens ‘Check out this selection of codebases togetsome inspiration 4. resources Gradients can add alittle extra design pizzazz when needed, but choosing the right ‘one is not always quick and easy, Gradient -Magle makes the whole process much hpsicodepen o/AndreusCafepen/ayoXize {An animated hummingbird that interacts with the user’ actions. I'd make a great {dynamic logo to grab a visitor's attention, {quicker and chucks in afew special effects todd interest. Go withthe standard or Introduce angles, stripes or checkered, and copy the CSS code. Job done. Fake Hacking Program htpsi/eodepen lfenasekalserpen/ogXmOK ‘collection of animated hacker elements. Minimal HTML, a JavaScript make the magic happen. le CSS and plenty of Header Resources CONTACT US AT: webdesigner@futurenet.com | @WebDesignerMag leo en Mooi g eel celay aa ood =a PilotMail FluidUt wv pilotmailio wiv uid com Everyone wants to build emails that work everywhere, Fluid allows users to create prototypes in minutes. thas a PilotMail lets you create good-looking emails then comprehensive set of pre-built UI Kits for Material Design iOS and tests what you've created to make sure it works. \ireframing. Plus, has realtime collaboration ~ Ideal for teams, {TRANSLOCO} (een ee ee OTe eden WordPressity wm wordpressity.co This san internationalisation Gn library for Angular. It WordPressty describes itself as“a modern workflow offers DRY templates and support for multiple languages, for your WordPress development”. Includes integrated ‘multiple fallbacks and testing, server, CSS preprocessors and is ESG-ready. Palette psiiodepenlo/ksyunnnn/pen/WNermXW hntpsicodepeno/juanbrujepen/Rwbr¥z hpsicodepen oereme/pen/EqeXN) Pick a colour from the palette and the An undulating and mesmerising muftiined | For those of you who like computer nostalgia, background changes accordingly. Youcan | letter C. Just HTML and CSS transforms help _| this retro Codepen willtake you back and add your own colours to customise create the effect. No JavaScript here. keep you occupied for far too long! resources 5 Save Whales SAVE_WHALES + 6 lightbox FIND OUT HOW Designer Red Collar itosiredcollarstota a eS WAS BUILT 66 Red Collar SEE PAGE 30 agency delivers a loinaly cr crafted ecological message or the protection of five species 99 12345678! Create an interactive title using outlined text Use SVG text to present text as an outline that becomes filled when hovered over LightBox Save Whales ‘Linitiate HTML document The st steps to define the structize ofthe HTML locumant Thes cansat ofthe HTML container ing the fll document This element stores 1 ection “IO0CTYPE tml> ntnl> eb “link stylesheet” typen"textess" hret=*styes.css" /> Steat> baie 2.SVG: text elements ‘Text elements are defined as an SVG image to benef tm extended sting features of SVG. Ths nou therequar content few of HTML, each text ofement requres xy postion be deine, Percentages are In elation tothe te svg elas text 3" 4.SVG: shared text settings ach of the text elements inside the SVG container ae zt to share properties that allow them tobe ‘solved wth canasteney. Ths includes fre sae and stoke settings fr outtee cour and cutine th sze SVG colo are set using the fi atibste vansparentsusedto make sure only the outline evi Feature texté font-size: 20h; €A11> transparent; ? 5.SVG: text settings extended Creruing the settings defined n step the elect feleson pantorderandtranstion beng set The par order et the stroke a beng the potty display when craig the text to avo the ute being obstruct bythe inside text Ail vanstion 'apolies to animate any changes that are made to feature texté paint-order: stroke; transition; FL 18; ) 6.SVG: text change The have selector pled tthe SVG container to detect mause hoverng interaction When detected text ements nae the SVG are sat to spay witha arferent tt colour Due to the arson atibute icin step 5, this change of colour wi cccur animation that wil change rom the rit tothe new enour Featureshover text iL 09 » 7.Final display The nal spay shows he text cetined Ww SVG contaner using the applied CSS sting Font Sie, ighlight colour and detaut ie atered by changing the CSS. Text post ‘modi by upcating the nine x ana y at within the on page SVG markup, Enough of the philosophy... Enough of the philosophy... lightbox. 9 36 Days of Type - Reflektor Digital lightbox https://36days.reflektor.digital Designer: Reflektor Type nttps:/retiektorsigital lightbox LightBox 66 Reflektor Digital provides ashowcase of web experiments its developers produced for the 36 Days of Type Challenge.99 Colours Tools Fonts abcABC 1234567890 abcABC 1234567890 lightbox LightBox 36 Days of Type - Reflektor Digital Create a falling title character introduction animation Use a title heading or other text container to define the letters used for falling text 1. HTML document pace resus fa span element bang crested and ieercesinther resentation. The sector The fist testo. detnethe HIML cocurer which adhedtothe parent containe: Ear panefementis sets te diecton ofthe second animation (cat) exteralyalows therntobereused for(let i2ee; iactxt lengths 1249 letters spansnth-ehild any sross mary pages whe aso keepng the wed page seceontfi2) te * 9 inatLonrdivection: normal, reverse search engee rena et re = document > createELonent ("span"), Letters spaninth-child(én) ( -IO0CTYPE heni> ceeript ee"code je"> “steat> 2.HTMLcontent The eect res on having HTML cantare dlement Tress the same CSS ae ovr to be eu 3.JavaScript: text search (Create anew te cal ‘codes avast suse they contain ae enifi fer processing n stn These ements are only avalabe ater the page has function decane. queryselectorl( eters) nodes Aength: i+9{ > » 4. JavaScript letter processing ode style. left = (ath randonQe73) ade. inerText = texti2] des. apendChildrote) > 5.CSS:shared styling postoning witha cea vrtcl postion thats ot of ppled —faling and rete ters spant position: fixed top: 250 font-size! 20 falling 10s ease-in-ut infinite rotate Se Linear infinite; > 6.CSS: individual styling color: reba0,0,0,.25) > Letters span:nthehildt color: raba0,0,0,,8) Letters spansnthehila calor: rba(e,0, Letters spansnthehild(an-2) { color: #00) 7.CSS:animation craton sts each elemento reste 360 dae keyframes falling ( ‘0 € top: 110m; ) keyframes rotate ( fron ( transform: rotate(@des); ) to ( transforn: rotate(3eadeg); ) lightbox 2B Clique Studios CLIQUE Build something. Designer: Clique Studios (in-house) lightbox LightBox ‘Making things that matter, Clique studios’ “content experience” approach is evidenced across this bright new portfolio. Fonts abcABC 1234567890 1234567890 abcABC 1234567890 abcABC 1234567890 CLIQUE = piel Kseet 5 i Create an animated text fill title effect Combine SVG's masking ability with CSS animation to produce an animated fill effect LightBox Clique Studios 1. HTML document initiation The rst tep so define the HT structure. Ts Fst the head Seton used to fad the exer (CSS ana Javaserpt resources Secondly. the body Ie ured to store the content elements defined n steps 2and 3 2. Feature container button The features paced inside a container using th 'txtFeature’ class. This example places a button Tese span elements ile used to Show the status that te animation ofthe SW cement wl be changed ofthe bu ec “div clase="textFeture"> “button classe"paseBtn"> “spanStarte/=pan> 3.Feature SVG “Tre feature texts made rom an SVG element thatusestwo rectangles The rst "bar rectanh walle used asthe backaroune, while the seco ‘exto0X reclangle wit be used fo the tex. Fay rectangle backorouna, rect classtextbox" /> rusk id"texthosk> 6. CSS: background bar bar element placed into the SVG image sto SVG container Its tial with se to zara but this eat innit, wth each cycle hs animation al textFeature bart Aisplay; block: position: absolute; height: 10%; background black: anination-delay! 35; ? 7.CSS: textbox The textbox element inside the SVG images sett aspiy wen a ea background using SVG tl. villus the element wi ID Yextsk” 2 a mack atowing the bar’ element rom step 6to appear in the suiting cut eu space, Both wth and height ‘4e sto 1008 so tat te testbox elemerk covers the ul aea of ne SVG corsare, textFeature textbox ‘il: re Finlepacity: 1 sack: ur (Atextask) > 8. Pausestyling The pause buon assigned with the ‘pause However, istlty of the fst an last ha site whenever the prer corainer has the “pauses ‘as apple Sia the bar eemert from sep 6 pousedtn > 4 first-chilet ‘isplay: none;} paused paisebtn > +: Last-ehildc display: none:) paused .paeBin > #:First-childl display: blocks} paused sar ‘ninationplay-state: pauses) 9. Stretch animation The seth aration frencad sep 6 du thedelnion ofthe ar eurestie laren tomo rom ao tof vin, Te wah abate Uses percentage asthe unt measurement so Cortane Animation pa stings are dened Instn, keyframes stretch om { width: ©; 3 100 with: 1008; 3 ? lightbox. 2 SUBSCRIBE TODAY FRE 116 CREATIVE ‘SPEED UP & OPTIMISE RESOURCES ID TECHNIQUES © YOUR) (/)))\:55 Expert tutorials, techniques and inspiration ONYOUR ANNUAL BUNDLE SUBSCRIPTIONS WITH OUR EXCLUSIVE CODE DAY'S WEB EXPERIENCES THE RIGHT WAY pu. Tonars wenexenencs ic ncarway = fg MMEYOULOWNEEMETS Pers Pm enue USE OUR EXCLUSIVE CODE AT CHECKOUT. CODE RESTRICTED TO ANNUAL SUB ONLY myfavouritemagazines.co.uk/pin/codel9 VOUCHER CODE: dh70crv (ONLINE USE ONLY) DOES NOT APPLY TO DIGITAL ONLY SUBSCRIPTIONS / DOES NOT APPLY TO PRINT ONLY SUBSCRIPTIONS 28. subscribe PLUS, with your subscription, you have access 10 1000'S OF FREE RESOURCES from previous issues with FileSilo. Seepage 96 CHOOSE YOUR PACKAGE! DIGITAL EDITION ONLY PRINT EDITION ONLY beh Bee + uD TOO WeB EXPERIENCES THEIGET WAY MYFAVOURITEMAGAZINES.CO.UK subscribe PROJECT DETAILS PROJECT STATS ai eens PROJECT DURATION ienipuenay SeORITEI ES ET erica /, ocean Rema Pee rr Per wwenven enn ent nt ) Agency Cun F Coke Peetareser ont peers DOE ata Cee cere Fellow Doe) Gree iererrcas NEN ca) Pee Cuer rae) co Ce ns " eee oA ae Cele esa Ca El CREATIVE SPECIES ‘done exceed 239 thousand In July this year. the agency released a ebste named Save Whales rash awareness on the fact that several wale species are becoming extinct begins the tea “There's general formation on the anal dscricton ofthe current station they ae in and advice on what can be done by everyone to save them. The project cers yout think ofthe impact of ou daly routine and to share the knonsxge with people around Hating for Russia Red Coll isa hihiy decerated and \wellestabished diotal agency founded in 2011 Now ‘operating out ofan offce in New York. the team has garnered ‘over 80 nterational ndusry awards nclucing a Webby and being named Agency ofthe Year ty the CSS Design Awards Inaction, Rex Colar employees ar sec among the ors Cf Webby, Awwrwards, CSS Design Awarcs andl the FWA — Underining the pecloree win the fl, Today ts man service areas of specs for is 20-strong werklorce ae in ‘ite development and branding, obvausW wth abit of ‘exwitonmental activism tawn inon the side. “Save Whales ‘2 non-commesca project that was nitated by our team: the ‘guys explain “We often discus the kinds of eas we could implement here such as webstes events or merchancise. Some of us tke part in local ecomovernents and evens, keeping an eye a whats gang on nthe wor. Then tere was this Whale Prior’ ss iv Nkok, Russian Far East. ‘and we leamed thatthe oveal stuation nthe oceans far ‘tom perfect” Reported in Apr tis socaled Whale Ja 20 ‘most 100 young captured whales eld n smal pens by the Russan goverment n Srechyaya Bay. Greenpeace were insisting that they were beng cruelly cordned wh the irtertion of potential sling the valuable animals to Chinese tourist parks Such ator clea it home with Red Colla. promoting broader Investigation and also some introspection ‘on wat they cou dota make a cerence "We often hear people say that design changes the works ‘andthat designers are creators who make peoples ves what they are But practical, very few among designers and companies are actually up to makng any sanicant change ‘ona global scale. So we deccled that We ke to release ‘2 project that woud become a whole cig statement and ‘tract real attention to the problem With the kernal f that idea in place. the project began with the allocation of a \esgner and developer to begin bringing what became ‘Save Whales to fe “They had only W days frit and several (ther team members to hep at some pont so that the project would be released in te” As an intemal tative, Red Coler were of couse acting as bath cnt and agency, design diary \which afoce them obvious freedoms rom the oft nia tens vere Jumpstart” withthe team ateady having strong ideas of how might be realised athough they admit they would very much keto partner wth lents such as WWF. Greenpeace or (Green Cross infiaure. ter arriving ata brit estabisrng scope. ‘andallocatng talent. the next typical step fa commun branstorm for eas "In our cent cases. the project manage chooses several best options and presents them tothe clent to ‘troose the general concept When both pats get te Kea of ‘what the project should look ke, he team goes lookng fer flerences that are later passed fo the clnt to make sue that wwe got tal ight” Despite the prot beng wholy inhouse, Rex Cofer appied those same methods for Save Whales, Tey made sketches and made desin approvals stage by stage before moving forward ‘One of te ies ideas here wast show the negative human: nature opposton, Nature would be represented by pictures, jus a her ser vth wave transtions and the human werld - ine CREATIVE SPECIES CREATIVE SPECIES Conservation Efforts. “sere argc Ethie tre hpe wast ‘ewoels whales which otopres Honeves more ‘nary Red Cor dos, ‘er vro srces ts ‘Bonen "Usuaty oor ‘lnaonsuptothe ‘oment he lease The {eomeontims ‘Whentne opti oceted ata Sages wearer tothe ress evar re [Sawaramtoraspoote typeet won gen at we ‘pethe nly anes ating hngesto tie cade Apart fromthat weatvaysoers whichactsara waranty of Guretopeion of este, ete pads ae ‘eagustentsiote fasten da wor ‘Wintver contrat ees ve areawayatexien ‘mowerngthereaiet ting soe probe ‘venthose tare rt ‘aun whenever posse" would be shown through 30 models, susrations,graent backgrounds and frame by rame transtions between pages. ‘co, we warted to create a reaicte medel of meeting scene withthe whales they swim ito the screen wave ther tals and wehear ther voices in the background. The user reads the Information bout them, sees the actual pictures Ths hes them empathize wh the whales, and the issue doesnt seer so foreign and dstant anymore’ On a sual desgh level, the mast ciel task woul! be cresting those 30 models of each whale species al from scratch For ths, the desgne had to study ‘many photographs and create a detaled model of every whale for the developer to wrap & all up in WebGL" In combination, the homepage sider etemient would provide an imiersive sense of er and the big ocean waves thet provi home to these incredble animals. “To make the juncture cf the pictures enisibe, weveused the displacement map effet forthe transitions So the edges ofthe pictues are fuzzy and flow when you side. Tensions between pages also take the shape ofan onshore weave, withthe images drawn by hand and then transformed, into a tame by-rame animation OPTIMAL PERFORMANCE Inwouldnt be sy to say that the tntend coding and realsing those wsual eflecs took precedent over muc ofthe practical production Infact there was no backend development requred onthe project to speak of with chalenges here focused lagaly on optimisation and maximising performance “AI the pages should be loading fast and aneations should be working on every device’ the designers expla “So we used ‘modem image formats such as Google's WebP because thay compress les without ary degrade in quality Alo, we've Impemented backaround loading of media resources so that swiching between pages goes very fas For the sake of 34 design diary ‘nations not to averoad the bowser, we rated them to HTML Canvas. ast often happens that SVG animations a rendered very Sowly” This attention to eicency and best practice sa conscous phiosophyakvays for Red Cola: Very much advocatng the rl of “Creative Frontend Deveioper for tsstafing the impleation that or every task the developer is ‘expected fo find the most elegant exsting salution or wit one recqied tom serach, MAKING WAVES ‘The team cbvieusly gat there, wth Save Whales completed in jst days and released into the wid July 2019, Fr an insnouse project, this simpressve progress and shows that strict Commitments to complete and not cverstp aotted tresrames were kent But how would “success” be gauged for alive webste tat essentially set ts own create bre? The sts got Strong social am’ esforces the teas purpose was aways to atvact the attention ofthe olbal clot cormmunity to the ‘whale problem. On Bat bass it has akeady exceeded our ‘expectations, because we recelve aloof postive response from desgners all around the wore” That message wouldnt of course be anything tke as elective or memorable without the ste as a werk being appreciated fer its execution Save Whales has since gone onto wn various web accolades such Steof te Day and Moble Ste ofthe Week by Avnrwards and CSS Desion ‘Awards Webste of te Dey. "People actwely share the advce ‘andthe awards gave us ahuge reach Everyone who has ead the advice sure paused to think of how hs or her habs Infence the envronment. What mere. we are cuenty touch wath environmental organsions and plan on moving the project forward even more the future I thee are anny ‘suggestions or teas of the people we snould contact egaraing the project drop usa line because were open to any ist” CREATIVE SPECIES } We ask Creative Frontend Developer on the project, Viadimir Lukashov, what he feels could be considered a source of pride. ‘design diary 35 NEVER MISS AN ISSUE! FRET EREATIVE DESIGN RESOURCES GENERATE GSS GET YOUR TICKET TODA) i He a a OF UI es “pueaD A secrets Sa helo to Anguia8 DESIGN ceate dynamic SVG at. animate I with Matters andcustomise Bulma Ec sny Tay may mous aoe sen cXPeRECE gowenant GET INTO’ CRO eam A te ag Dg WITHMOJS BUILDS WITHGRAY BACKGROUNDS The science of UI design, 7 pro SEO SANE Issue285 strategies, animate with mojs, code SSH Unto Sresures towtoseeh web components with Stencil, speed up Rated oniseryoor cose JavaScript and fast builds with Grav CMS Yous and wtetrame wth Sketch GOT AN APPLE DEVICE? Download Web Designer's digital edition for your iPad, iPhone or iPod touch apple.co/ThsGYgl 6 backissues CATCH UP ON ANY ISSUES YOU'VE MISSED BY DOWNLOADING ADIGITAL EDITION OR PURCHASING IN PRINT bit.\y/2rh73Xk ro BUILD YOUR OWN a PREFER TO READ ON ANDROID OR PC OR MAC? Web Designer magazine is available on Google News and Zinio finyurl.com/yalm3wul ea bitly/2xPhv4p 2zinio backissues. a7 Design Wildlife doesn't build digital campaigns, it creates new experiences and environments. Placing storytelling at the heart of its work, this studio connects design, technology, creativity and innovation. The result is unique journeys that shape our understanding of the digital and tactile channels we all inhabit lute was formed witha vision ofbringing thestoryteling and production values ffm into ‘the nteractivespace, Fourc=1s Scot ard ake Fedman are totes anchave been ng te calaberatcr but =the toe ae ‘ranging cca 201, they tok at parrerstiptorenextioe Bacrccmafices weet er was Caner Cy Calferia fee sparen 202, bore ‘exparcira n 2086 os cuferk 5000 square foc sto Sct Fiedman hasa deep acount a motion aeons 27 VFX fl ote comes more om the Feracbve ste Both haveakays been asc by ir gaming and techclooy ‘Wie hey both attended the invest of air San Diego ar Los Angeles respecte was countess hours spent tnyng ta do werkthat combined hese verisard edu to therany reprng ey fmand web desen neers tht had (One of heat orders buses wasto name the new sai Seat an Joke coud erect he create colaoraion, arc practice rn tame thar creative paras when they pljedinabandtogatrer several years before Wie From ta experience they knew hey wanted src word fame tht was 05 to say and 2st sot Forty he while oman preserted sal a useful apenferteLos ‘roses based age), ta mere unique domain exertions ere becoming commorpace Wise acne ecrlagy changes story does the ‘rnbodinent chat ns agercy dong hte space where tecrraogy desor crest enovan and steven ‘connect Toshow clents now torytling central the werk Wtiohasprod.red the istioucrparts tenis webste The leaf cur agency ste has evoked over te! Sct ‘expires Web Designer en. we dant have a weath of roc anc casestudies to show what Wie was capabe ce Wildlife per with GSDAM and tacking technology. Through the wile NY ad r <0 we mae Whos Wie wwwlfeta)hoiswllife the US. AirForce on a mission to contollertess sytem, users pick up Teday curate rusts on cammunesing currangect eae and launch The Hangar ncbile viru tots o repr the hyralics apa ana the depth of x past es tour travelling exit with ‘of V.22 Osprey helicopter. Soc. comnued Keeping thas cures thou est rk interactive experiences tht will ring -The Tre Change Challenge has hey. s0prspactnecens can get asere rte typesct the next generation of highly skilled a pessure-sensing hg nth et halos we cn handle ard whostrstad us nthe past t ‘maintainers tothe Ai Fore. Dual uses perform maintenance on 8 ‘ane txt thd the teto put oper coerehenshe cxstom-uilt Soot lens were C1301, pce in etme ith beakacims of our pokes. bei reashay a focus for us so ‘signed to travel the county and——-LED lights and animations, Replica \wecansturecur vark th he wordand sca we can Sickly wansform ito a high-sch 16 cockpits feature the Mcroa Wife snc shot fnew cers but how eappreaches is hangar housing ive installs. __‘HoloLens heads, wih spatially mating has changed sncethe agency wasteurde as ke tenes meas Bale te ‘uti "Weravea heathy mf pth based oppor: with new ecologies and got feel reality HUD. 2s yelasclent ston thet alow uso kero orto forthe types oaks performed by The Hangar concludes by puting projects Weve were hao trust anc dele for cu sir aii sets onthe High lin of an 35, lens ver the years Are we nays back Rup wi the samé “The Hangar stats withan AR fighter et. Gesture socoghition lps isson and deccaton to e3cn re cpporunty shce were experience bil around an actual vss mars the sir to the ‘ten solving a rable thatthe est of ts kncand darn F-16 etengine, Vistrs approach the runway. andthe wser controls Footage song uptert tirkra! huge piece of machinery and grab froma eustom shot ofan F- With sucha averse approach bo each proce a ther ary one of the brand Pads torevea! take-off sequence. Mounted Kinest That sroacase ne ios that Wie has een cua "OL interactive text and isu sensors measire wer movements 3s pce Muscle Mus Wasa reso pro rs and Was components intra ith the they match ground cre indict,

    Você também pode gostar