Net_Sep 2017

HTTPS PROTOCOL JAIME LEVY SKETCH PLUGINS CLUBHOUSEHow and why CodePen Exclusive interview with Essential plugins to speed How this top agency createdmoved every URL to HTTPS the UX Strategy author up your design workflow a full-sensory digital UXThe voice of web design Feature Issue 297 : September 2017 : net.creativebloq.com BRUTALIST WEB DESIGN Crude, confrontational and creative. Is this web design’s punk moment? ISSUE 297



Welcome Welcome editor’s note The world of web accessibility can be a Our second feature looks at the fascinating trend daunting, confusing beast at the best of times. of brutalist web design. It’s crude, confrontationalEven so, it should be at the forefront of how we and creative, so we’re asking whether this is webdesign and develop digital experiences. As the web design’s anti-establishment, punk rock movement.becomes the most important resource in virtually We’ve spoken to the trendsetters to find out how andevery aspect of modern life, it’s essential that it why the movement is gathering momentum at pace.provides equal access and equal opportunity topeople from all walks of life. Elsewhere this issue, we’ve packed the pages Don’t worry, conforming to accessibility standards with some of the biggest names in web design. Cattdoesn’t mean sacrificing design or innovation, as Small curates this issue’s Gallery pages, there’s anour cover feature this issue – written by the Paciello exclusive interview with UX Strategy author JaimeGroup’s Henny Swan – explains. We delve deep into Levy, an in-depth profile of award-winning Belgianthe Inclusive Design Principles to show you how it is design agency Dogstudio and CodePen talks uspossible to design a better web for everybody. through its switch to HTTPS. Enjoy the issue! Featured authorsheNNY JIM catt tIMsWaN MccauLeY sMaLL hoLMaNAs accessible UX and design lead at Brutalist web design caught the eye © Photo by Ankit Vij Catt curated this month’s Gallery CodePen recently migrated itsthe Paciello Group, Henny was the of Jim a few months back, and ever section, and has picked websites huge site to HTTPS for extraperfect author of net’s first-ever since he’s been talking to the key with sensational design and security, so we asked one of itsAccessibility cover. Read her thought- trendsetters. His research can be superb development to inspire engineers Tim to explain exactlyprovoking feature on page 60 found on page 68 you. Check them out on page 40 why and how they did itw: iheni.com w: wordsbyjimmccauley.com w: cattsmall.com w: tholman.comt: @iheni t: @JimMcCauley t: @cattsmall t: @twholman september 2017 3

Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200 @netmag /netmag flickr.com/photos/netmag [email protected] net.creativebloq.com medium.com/net-magazine EDIToRIAL Editor Philip Morris [email protected] 01202 586200 Senior Art Editor Will Shum Editor in chief Amy Hennessey cREATIvE BLoQ Editor Kerrie Hughes [email protected] operations Editor Ruth Hamilton Production Editor Ella Taylor Staff Writer Dominic Carter coNTRIBUTIoNS Sarah Bankes, Leon Brown, Tanya Combrinck, Marcus Faint, Charlie Ginger, Mark Goodyear, Matt Hamm, Jon Hoffman, Tim Holman, Sally Jenkinson, Harriet Knight, Ben Leach, Tom May, Jim McCauley, James McQuarrie, Carrie Mok, Christopher Murphy, Tyler Nickerson, Daniel Schwarz, Almero Steyn, Henny Swan, Kym Winters PHoTogRAPHY All copyrights and trademarks are recognised and respected ADvERTISINg Media packs are available on request commercial Director Clare Dove [email protected] Advertising manager Michael Pyatt [email protected] INTERNATIoNAL net is available for licensing. contact the International department to discuss partnership opportunities International Licensing Director Matt Ellis [email protected] PRINT SUBScRIPTIoNS & BAcK ISSUES Web www.myfavouritemagazines.co.uk Email enquiries [email protected] Tel 0344 848 2852 International +44 (0)344 848 2852 Head of Subscriptions Sharon Todd cIRcULATIoN circulation Director Darren Pearce 01202 586200 PRoDUcTIoN Head of Production US & UK Mark Constance Production Project manager Clare Scott Advertising Production manager Joanne Crosby Digital Editions controller Jason Hudson Production manager Nola Cokely mANAgEmENT creative Director: magazines Aaron Asadi Art & Design Director Ross Andrews PRINTED BY Wyndeham Peterborough, Storey’s Bar Road, Peterborough, cambridgeshire, PE1 5YS DISTRIBUTED BY marketforce, 5 churchill Place, canary Wharf, London, E14 5HU www.marketforce.co.uk 0203 787 9060We are committed to only using magazine paper which is derived from responsibly managed, certified forestry and chlorine-free manufacture. The paper in this magazine was sourced and produced from sustainable managed forests, conforming to strict environmental and socioeconomic standards. The manufacturing paper mill holds full FSC (Forest Stewardship Council) certification and accreditationDIScLAImER ISSN 1355-7602All contents © 2017 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be used, stored,transmitted or reproduced in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885)is registered in England and Wales. Registered office: Quay House, The Ambury, Bath BA1 1UA. All information contained in this publication isfor information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors orinaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price of products/servicesreferred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents orany other changes or updates to them. This magazine is fully independent and not affiliated in any way with the companies mentioned herein.If you submit material to us, you warrant that you own the material and/or have the necessary rights/permissions to supply the material and youautomatically grant Future and its licensees a licence to publish your submission in whole or in part in any/all issues and/or editions of publications,in any format published worldwide and on associated websites, social media channels and associated products. Any material you submit is sentat your own risk and, although every care is taken, neither Future nor its employees, agents, subcontractors or licensees shall be liable for lossor damage. We assume all unsolicited material is for publication unless otherwise stated, and reserve the right to edit, amend, adapt all submissions.4 september 2017



contents Issue 297 : September 2017 : net.creativebloq.comFeeD FEEDSIDE prOJEcT 12 WOrKSpacE 15James McQuarrie on how NeXTFRee helps Ben Leach opens the door of Westminster Buildings in Nottingham to show us what makes HeX Productions tickfreelancers share their work availabilityclIENTS FrOM HEll 13The latest in our series of nightmare clientsBEYOND pIXElS 14Matt Hamm on his vintage Star Wars toysvoicesSWIFT 20Jon Hoffman explains how Swift took overhis life, and why it’s about to go globalTHINKING BEYOND WEBSITES 22 VOICESSally Jenkinson encourages us to look INTErVIEWbeyond the confines of website boundariesSTOrY 32 26christopher Murphy explores the role that The author of UX Strategy talks usspecial offers play in boosting your sales through her rollercoaster career ahead of her much-Q&a 33 anticipated appearance at Generate Londonpaul Bakaus explains why he createdjQuery UIBIG QUESTION 34We asked a panel of experts: how do you sUBscRiBe to net Take advaNTaGe oF The pRINT aNd dIGITaL BUNdLekeep up with the latest web design news? aNd Save Up To 47% Turn to page 18 to find out more aboutJOB HUNTING 36 the savings on offer for subscribersleon Brown says studying a degree coursedoesn’t qualify you for a well-paid job6 september 2017

Contents rEgular 40 GallErY catt Small runs down her favourite sites of the month. expect sensational design and superb development RegUlaRs EXcHaNGE 08 chris Kalani and Krista radoeva share their expert advice with readers showcase DESIGN cHallENGE 46 Three designers mock up their visions for a fictional cabaret act prOFIlE 50 We talk to Belgian digital crew Dogstudio about their award-winning work HOW WE BUIlT 56 clubhouse tell us how they turned their favourite book into a full-sensory digital UXFeatURes PRoJectsaccESSIBIlITY 60 BrUTalIST WEB 68 HTTpS 82MaSTErclaSS DESIGN Tim Holman describes how and whyHenny Swan shows you how to Jim Mccauley investigates whether Codepen switched its site to hTTpSdesign a better web for everybody this is web design’s punk moment accESSIBIlITY 87 almero Steyn explains how he’s helping React developers PrOjECt pUSH.JS 88 TOp 10 SKETcH plUGINS Tyler Nickerson shows you how to push YOU NEED TO DOWNlOaD 76 your site’s latest content to users Daniel Schwarz explains what problems these plugins solve EXpO 92 for designers Mark Goodyear teaches you to build React Native mobile apps with expo september 2017 7

Send your questions to [email protected] Practical advice from industry experts This monTh feaTuring... QUESTION OF THE MONTH Chris Kalani Do you start out planning to earn revenue after a certain amount of time, or do you have any tips Based in San Francisco, on what’s worth investing time in? Tom Wade, Leeds Chris is a CEO and founder of Wake, a tool that Wakey wakey Side projects don’t need to be rushed. Chris Kalani spent over a year working on the design makes it super easy for collaboration tool Wake before establishing a formal company designers to share work and collect feedback from their team. He CK: Most of the early work should be spent on validating your idea. Whether that’s was previously product designer at talking to potential customers or building a basic prototype. I think it’s a Facebook, where he was instrumental in misconception that you have to drop everything you’re doing immediately to chase the design of Facebook Messenger. after an idea. You will inevitably reach a point where it becomes obvious if your idea is w: wake.com worth pursuing further. Work on making progress and then reevaluate at every step. I spent over a year working on Wake and I’m glad I took that time. Krista radoeva TYPOGRAPHY one single small file. This not only Originally from Bulgaria, solves issues of download speeds and Krista works as a type VARIABLE FONTS having to deal with multiple files, designer at Fontsmith, a it also opens new possibilities for leading boutique type I keep hearing about this thing called responsive web design. Dynamic, foundry with a complete variable fonts. What is it, and how does it responsive typography could provide font design and production service, based affect web designers and developers? easier adaptability to the ever-changing in central London. screens, browsers and technology w: fontsmith.com K Jackson, Newcastle and it will be a fun new format for KR: This is a new font format that web designers and developers to8 september 2017 completely reimagines the way fonts are experiment with. dealt with in the digital environment. A variable font can contain an endless range of weights, widths or styles, in

Q&As 3 simple steps What are some considerations for accessibility when choosing web fonts? Amanda RoseProblem solver Products like Slack came about because their founders were ‘looking to scratch their own itch’ Space: Balance between black and white is essential, especially onSIDE PROJECT affect their gaming experience. Keep screen where we have the limitation of in mind that in web-based games, the pixels. Look for a typeface with a largeMISSING SKILLS user could be experiencing the game on x-height, open counters and terminals, and any kind of screen, so it’s a good idea to generous proportions and spacing.What makes a good side project partner? use a secondary font with a simple and clean design. And the boring but equally Hinting: Hints are an added layer ofFemke Vs, Amsterdam important part: make sure you’re using data within a font that describe theCK: Figure out what skills you’re the correct web font formats and check degree by which a pixel should be turnedlacking in order to bring your project what the licensing options are for using on or off to improve the quality of a letterto fruition and then find someone with the fonts in games. when it’s set at a specific pixel size.that skillset. That may be business Despite improvements in screensavvy, engineering or design skills, or SIDE PROJECT resolution, font hinting is still an essentialsomething else. You’ll need to make type design process.sure this is someone you respect and A VIABLE BUSINESS?enjoy working with. You want someone Weight: No matter the proportionswho challenges you and is as passionate What percentage of (former) side projects or the hinting quality, you should beas you are to see things through. There become viable businesses? Is a side project careful with the choice of weights for web.are always going to be ups and downs a success only if it becomes profitable? A very light or very heavy font is a big risk,when starting something new. What you Howard Dyer, Cardiff as weight can change dramatically acrossneed is someone who can help pull you CK: Success is probably best determined browsers and devices. If using more thanout of those lows and vice versa. by you and your goals. A very small one weight, make sure there is a percentage of side projects actually recognisable difference.TYPOGRAPHY become viable businesses. But then again, statistically, most startups end september 2017 9WEB FONTS up failing altogether. Where starting out small and on the side has its advantagesAny tips for choosing fonts for use in web- is that you can take the time to figurebased games? out what works before quitting your job. Products like Slack, Trello and AirbnbRamesh Sur, London exist today because their founders wereKR: Fonts in games have two main looking to scratch their own itch androles that often contradict each other: continued iterating until it resonatedone is to express the game’s theme, with other people. Success could beattract attention and be memorable, the anything from a billion dollar companyother is to communicate information to freedom to quit your job and work forclearly. An expressive quirky font is yourself. That’s really for you to decide!great for headlines and large graphics,but don’t use the same font for smallertext. If users find it difficult to readthe interface or the instructions, it will

NetworkCOOL Stuff THE POLLWe Learned hOW many dOmain nameS dO yOu OWn?thiS mOnth 8.70% 0.00%SVG bad partS 31-50 50-100 Using SVGs on the web is in general 0.00% 4.35% 21-30 100+pretty amazing, but it’s notall roses. In this article 4.35% 23.91%author Alkshendra Maurya 16-20 1-3discusses the limitations ofSVG and looks at some 15.22% 43.48%workarounds for common 11-15 4-10points of frustration.Browser inconsistency, From our timeline ‘vertical-alignment’ andstyling issues, code bloat ‘horizontal-alignment’and more are covered. What new features would you most like to instead of nonsensenetm.ag/297-SVG see in CSS? hacks like ‘margin: 0 auto’. @sgolubevpSycholoGy for UX To be able to transition I’d love to see some There are certain to and from a value of ascending selectors – Integrated use of principles of ‘auto’. @Octavector that would make JS files variables without so much lighter. needing Sass or Less, orpsychology that are I would like to see @manupedreira_ loading the file as a PHP file.worthwhile for UX element (or container) @Candoremdesigners to bear in mind, query support added to Simple <if then /> forand this concise article CSS. @webcraftsman example Native colour functionsfrom UX Planet lays out <img id=”logo01” so we can do some nicesome of the most useful. Though controversial src=”img/mobi.png” custom theming stuffBy learning how people and not without issue, width=”1080” /> with CSS properties.perceive your interface ancestor/parent <if width=<800px @lynchy010elements, you can make selectors – being able to modify then img id=”logo01” src=”img/your sites easy and a parent element based on what mobi.png” />pleasant to use. child it contains. @alexpierce @DomainNameGamernetm.ag/297-UXpsychologydeSiGninG theperfect accordion The accordion is a versatile designpattern that will help yousolve all manner ofcomplex problems,providing your users with afamiliar and easy way todo things on your site. Thisarticle breaks it right down,providing a process thatwill help you to build themost excellent accordion ofyour career.netm.ag/297-accordion10 september 2017

People, projects & paraphernaliaThis monTh FeaTuring...Side PROJeCT 12 CLieNTS fROm heLL 13 BeYONd PiXeLS 14James McQuarrie explains how he helps Pay me what I’m worth – the latest matt hamm on his mission to buy everyfreelancers share their work availability anonymous account of nightmare clients vintage Star Wars figureWORKSPACe 15 eVeNT RePORT 16 Need LiST 17Ben Leach opens the doors to Hex’s office Behind the scenes at Pixel Pioneers in The stuff we want this month, from theto discover what they’re all about Bristol with Tom May newest innovations to the latest software september 2017 11

FEED Side project NEXTFREE in specific locations and with specific availability so they can get the expertise they need fast. We alsoJames McQuarrie on how he and Paul Ardeleanu offer automatic notifications when a freelancer they help freelancers share their work availability work with a lot updates their availability so they can track people’s availability. Info Side project of the month What sort of feedback have you had so far?job: Co-founder, It’s been great so far. We’ve got hundreds ofnEXTfREE Tell us a little bit about NEXTFREE. freelancers using the service at the moment and arew: nextfree.co.uk NEXTFREE is a simple service that helps growing daily. A few people have told us that thet: @nextfree freelance digital contractors and consultants share service is too simple, but we think that’s actually one their availability for work. By extension, we also help of our biggest strengths. folks who need to hire them see and track who’s available and when. What technologies did you use to build the NEXTFREE site? What’s the inspiration behind this idea? We’ve been using Ruby on Rails, PostgreSQL, Heroku I’ve been a UX contractor on and off for the last seven and Postmark. years or so and got frustrated with having the same conversation over and over again about when I’d be Tell us about you and Paul’s work background. next free for work. Talking to other contractors I Paul is an iOS contractor who’s been programming heard the same story again and again, so I decided to since the days of Fortran. He also has a PHD in scratch my own itch, and teamed up with Paul to build computational physics. I started my career at a something to help. management consultancy and have most recently been working as a UX contractor for startups across So who is NEXTFREE aimed at, and how will it help London. We met while both contracting at Thomson with their scheduling? Reuters about five years ago. NEXTFREE helps two groups of people: digital freelancers and contractors, and recruiters; both in- What future do you see for NEXTFREE? house and at agencies. We help digital freelancers We’d like it to take off and become our sole focus. But (user experience folk, designers, developers and so the bigger prize is being able to help more people get on) share their availability with the world to reduce projects and get hired. As we move towards a world the amount of job spam they get, and to help reduce where more and more work is more flexible and down time between contracts. We help recruiters and project based, we believe tools like ours will become hiring managers search for people with specific skills, more important.12 september 2017

Feed PAY ME WHAT I’M WORTH how toExclusively for net: The latest in a series of anonymous MAkE suRE THE accounts of nightmare clients cOPY On YOuR sITE Is EngAgIng Clients from hell The visual impact of your site Me: My hourly rate for photography is this because any lower than that and I lose money creates the first impression, but if much, and photo editing is this much. when you take into account the travel time toTurnaround for test edits is three days, and once the site, our meetings, the time it takes to the copy is off, your customersI get feedback on the test edits, turnaround for invoice, and all those et ceteras. I’m not doing may be alienated. We asked thethe full set is seven days, and I’m happy to do this job for what you’re saying you want to @netmag followers for their tipsminor tweaks here and there. My minimum is pay now.this many hours. Client: But you can’t pull out of the job a Don’t write for SeoClient: Sounds good! day before!We agreed to do a shoot for roughly four hours, Me: I’m not pulling out. I’ll do it happily, “Ensure it’s written for humansbudgeting for about three to six hours of editing according to the terms we initially agreed upon. first and not search engines –(depending on what was needed) one month Client: But we’re a fashion brand for women! Google search engine, Bing, SEO,later in a suburb some distance from where You need to support other women in the Google SEO, Google Google, UKboth the client and I are located. The day before industry like us! Help a sister out! Web Design…” says @Octavector.the shoot, the client contacted me. Me: Then you can support a female Of course SEO is important to getClient: We’ve decided that we don’t want to pay photographer like me and pay me what your customers to the site, but ifthat much for our catalogue photos. We want to I’m worth. you’re talking to a computershoot the six outfits and have the photos edited The original plan for the shoot went ahead, and instead of them, it’s going to be aall in just over an hour so we don’t have to pay they paid me for the full hours I worked. turn-off and you’re less likely tomore than $100. You only need to take a fewminutes of photos per outfit. clientsfromhell.net achieve your objectives.Me: I physically can’t shoot and edit that muchin only two hours. I have minimum hours Get to the point How many times have you seen a site that puts their company philosophy or mission statement ahead of the actual information you require? “Get to the point,” says @benelliotleach “while being as personal as possible (no jargon), and presenting a problem and offering solutions.” Know your auDienCe @Candorem echoes the point about jargon – “Use their terminology” – and also presses the point that you need to research your customer base thoroughly in order to talk to them effectively. “Understanding each of your customer segments and their individual needs is the first step. Solve their problem.” september 2017 13

FEED Beyond pixels STuff I LIkE STAR WARS COLLECTABLES ALySSA LOW Matt Hamm on his not-so-impossible mission to buy every vintage Star Wars figure released between 1977 and 1988 Product designer at Eight Bit Studios bEyOnd PIxELs w: alyssalow.com Nobody can ever forget the first time that PROFILEthe bag and staring right back at me was Yak Face HiddEn brAin they watched Star Wars. Aged only six years – a well-known rarer Vintage Star Wars figure. old, I remember going to the cinema with my older What a find! This little old piece of vintage plastic While I’m designing, I like to cousin Mike to watch The Empire Strikes Back. It was worth about £150. We could have just sold it, listen to NPR’s Hidden Brain blew my mind. I was hooked. Luckily, Mike already but no, instead it kick-started the inner child had a few Star Wars toys, so we could immediately within me and I decided to embark on a mission to podcast. Every episode re-enact those epic battles. buy every single vintage Star Wars figure that was addresses unconscious Now I wanted my own collection of Star Wars released between 1977 to 1988. patterns that drive human toys. I used to regularly go to my local toy shop, behaviour through science Dentons in Witney, Oxfordshire and pore over the I stumbled upon an addictive Facebook group and storytelling. This sort of wall of Star Wars figures on display. As you can called Echo Base UK, with a great community critical thinking allows me to imagine, now top of my Christmas wishlist was spirit, which enables collectors to trade vintage broaden my approach. the iconic Millennium Falcon ship. Star Wars toys, avoiding eBay fees and scams. After Return Of The Jedi was released in 1983 Since then I have managed to collect the full netm.ag/297-brain and my cousin started to grow out of playing with complete set of 96 loose vintage figures, a couple toys, I inherited his Star Wars figures and ships. As of ships and two MOCs (Mint On Card) figures. I’m PUZZLE GAMES a designer, Star Wars has always been a major now starting to collect all the major variants, influence on my aesthetic taste. The design of which have minor detail differences and can be As a product designer I’m Star Wars seems like an infinitely deep rabbit hole harder to find. I can’t tell you how much happiness always coming up with the of superbly designed characters, clothes, collecting these vintage figures has brought me. Ibest way to solve a problem . creatures, planets, buildings and ships. now eagerly await the postman/postwomen with My two favourite mobile I also grew out of playing with toys and passed my next delivery of plastic crack. games are Two Dots and on some of my figures to my younger brotherMonument Valley. Aside from Nathan. But, the memory of selling my beloved Matt lives in Witney, Oxfordshire being aesthetically pleasing, Millennium Falcon for £5 still haunts me. and is the Creative Director of A couple of years ago, my wife, Helen came Supereight Studio, a web design, the way the puzzles are home with a bag full of old toy soldiers. I opened UX and branding agency. designed stretch the way I problem solve. FLiPboArd Staying up to date on current events is important to me. The Flipboard app is great because I can curate the content based on my interests. I love that everything I’m interested inreading is in one place and the interactions make it better. flipboard.com14 september 2017

Feed 1 4 23 HEX Productions but when we do, the competition really heats up.Ben Leach opens the door of Westminster Buildings in nottingham to show us what HeX is all about In our client and internal meetings, we want our clients and wORkSPACE the team to feel comfortable, hence the comfy sofas we have [3]. Board At HeX Productions we want When we first visited the office, meetings across a large table aren’tPROFILE to create a friendly and it was full of beige and browns; what we’re about. We prefer anapproachable environment where we realised we need to somehow intimate and friendly settingstaff enjoy coming into the relaxed, reflect our branding in the office. to have our meet-ups, and it allowsyet busy working space. Our aim is With this in mind, we enlisted the us to make our clients feel atto build an agency that is not just help of local artist Tim Onga home (especially when we bring outtrusted by our clients, but an (www.ongapaints.com) to add his the fresh croissants and doughnutsagency they can have a working creative flare to one of the walls for them!).partnership with. [1] and he did it in our signature Based in Nottingham’s colour of orange, of course. It’s Next, we have the mostWestminster Buildings since definitely the talking point of important part of the office. TheDecember 2016, the team moved the office! thing that keeps us motivatedfrom a shared office, which we throughout the day, and that’s ourhad significantly out-grown. Since Each of us loves what we do Sonos speaker [4]. The whole teamthe move to Nottingham, we are and is passionate about the roles can add music to the queue, which10 minutes from the train station and the jobs we have to do. We do can sometimes equate to Disneyand close to major road links, understand, however, that at the soundtracks followed by Arcticwhich is great for accessing clients end of a hectic day, it’s nice to just Monkeys. It’s a good job that we allon a national scale, as well as our unwind, which is why we have our have a varied taste in music!smaller, local clients. mini, retro games console [2]. It’s often that we’re too busy to play it, Ben is the digital marketing and PR executive at HeX Productions (horlix.com). Follow @HeX_Productions to keep up to date with HeX. september 2017 15

FEED Events EVENT GUIDE PIxEl PIoNEErs Generate London Ex net staffer Tom May went to check out his old editor’s sparkling new web design and development conference Date: 20-22 September Location: London, UK EvEnt rEport net magazine’s very own conference is back at the Royal Date: 22 JUNE coming. tobias ahlin gets people up on stage to flip Institution for three days Location: BRISTOL, UK coins, as he explains how you can get clients to of insight, inspiration and URL: PIxELPIONEERS.CO listen to your ideas. Lily Dart give us valuable practical take-aways. lessons from the world of service design, with i’ve worked with oliver Lindberg – the ex- eyebrow-raising anecdotes from a real-world generateconf.com editor of net magazine, and the brains behind government project. and true Bristolian Joe Leech its Generate conferences – for almost ten years now, explains the importance of psychology to UX.HiGHedWeb 2017 annuaL and i’ve never seen him so relaxed. But i can see ConferenCe why. it’s 9am and the first of his new series of energy levels remain high as the audience revels affordable web conferences, aimed at cities that in inspired talks by nadieh Bremer (on the art data Date: 8-11 October don’t have one, is about to kick off. and the room is visualisation) and Jessica Rose (on automating Location: Hartford, USA buzzing as a gaggle of West country designers and access to development). in the gap between them,HighEdWeb is created by and for developers revel in the novelty of attending an event adam Butler invites attendees onto the balcony so all higher education web without having to trek up to London. he can take an aerial photograph with his drone. professionals who want to the day starts with a ‘big beast’: Jeremy Keith explore the unique web issues with a talk about service workers. that might sound Finally, proceedings are brought to a close by facing colleges and universities. overly technical for breakfast time, but he breaks the adrian Zumbrunnen, who gives some thought- https://2017.highedweb.org topic down into its fundamentals and uses it to provoking insights into making your animations illustrate some quite deep and insightful points meaningful. in short, Pixel Pioneers has well and Mirror Conf 2017 about how we approach this thing called web design. truly arrived. Roll on Belfast. next it’s the turn of Mark Robbins, who manages Date: 10-13 October to turn the (equally unsexy) topic of email coding into With more than 20 years’ Location: Braga, Portugal a talk that’s both gripping and entertaining. With the experience in journalism, TomMirrorConf is a conference made day off to a flying start, the top-class talks just keep writes about technology, art,for front-end developers and web design and travel for a range of designers held in a laid-back magazines and websites. environment. Speakers include proFILE Jeremy Keith and Brad Frost. Photo credit: Adam Gasson http://www.mirrorconf.com beyond teLLerand Date: 6-8 November Location: Berlin, Germany Marc Thiele’s much-loved web design conference returns toBerlin for another year. Speakers include Paula Scher, Jonathan Snook and Pip Jamieson. https://beyondtellerrand.com PixeL Pioneers Date: 16 November Location: Belfast, N.Ireland A one-day conference featuringeight speakers, sandwiched by a Shopify side event on the Wednesday and a choice of twofull-day workshops on the Friday. pixelpioneers.co16 september 2017

Need list Need list Stuff We Want Small objects of design wonder: from an exciting app redesign all the way through to a new platform for design teams to work with 12 3FLIPBOARD FREE CSS DATABASE FREE WIX CODE SUBSCRIPTION BASED 4 5 6CONTRAST £6.99/$9.99 ABSTRACT FREEMIUM PROJECT COMMON VOICE FREE What we think (1) Flipboard (https://flipboard.com) has undergone a big redesign. Version 4.0 introduces a Smart Magazine feature that “quietly guides people to define their interests for any given category.” (2) CSS Database (netm.ag/297-CSSdatabase) is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards, written by Jonathan Neal. (3) Wix introduces Wix Code (www.wix.com/code/home), a new solution allowing users to create powerful web applications. (4) Contrast (https://usecontrast.com) is a macOS app for quick access to WCAG colour contrast ratios. (5) Abstract (www.goabstract.com) is a new platform for modern design teams to work together.(6) Mozilla has launched Project Common Voice (https://voice.mozilla.org), a project to help make voice recognition open to everyone. Check it out. september 2017 17

SubScribe To NeTget the no.1 choice For Web designers and developersdelivered to your door, your device, or bothprint edition only digital edition onlyTake out a print subscription to net and Take out a digital subscription to netget your copy before it hits the shops. for on-the-go access to our interactiveEach issue is packed with the latest web edition, with streaming screencasts,trends, technologies and techniques extra images and moreFrom save up to From save up to£16 18% £11.25 31%based on a QUaRTeRLY diRecT debiT based on a QUaRTeRLY diRecT debiT Terms & conditions: Prices and savings quoted are compared to buying full-priced print and digital issues. You will receive 13 issues in a year. You can write to us (Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK) or call us (UK: 0344 848 2852; overseas: +44 344 848 2852) to cancel your subscription within 14 days of purchase. Your subscription is for the minimum termspecified and will expire at the end of the current term. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. For full terms and conditions please visit: bit.ly/magterms. Offer ends 7 September 2017.

print & digital edition FromEnjoy a combined print and digital subscription, and £19take advantage of print as well as exploring the digitalexperience on the go based on a QUaRTeRLY diRecT debiTgreat reasons save up toto subscribe 47%● Print edition delivered to your door● 13 issues in a one-year subscription● iPad and iPhone edition download● Android edition download● Money-back guaranteemyfavouritemagazines.co.uk/netmag17

Opinions, thoughts & adviceeSSAY 22 SWIFTSally Jenkinson encourages us to start How Swift tooklooking beyond the confines of our website over my lifeproject boundaries Jon Hoffman explains why Swift is one lawsuit away from becoming a major playerInTeRvIew 26 When Apple opened up the App StoreWe chat to the author of UX Strategy Jaime in 2008, my first thought was I can program those type of apps, so I decided toLevy about her rollercoaster career ahead of give it a try. After a while, I found that while I really enjoyed writing and designingher appearance at Generate London mobile apps, I really didn’t enjoy the languages used. Objective-C (iOS) felt oldSTORY 32 and outdated, and to be honest I have never really liked Java (Android). It was frustratingIn his latest column, Christopher Murphy to enjoy what I was creating, but not the tools I was using to create them. Thenexplores the role that special offers can play in something incredible happened - Apple announced Swift during the 2014 WWDC.boosting your marketing strategy I was first introduced to programming when I was 13 years old. That was 35 years ago. Ever since then, I have been infatuated by all things related to computers and tech, so I’ve had experience in many tools and languages. Swift, in my opinion, is the one language I’d say that all developers need. I knew I was going to like Swift from the start. Apple seemed to have taken the best parts of numerous languages and integrated them into Swift. So what makes it special?

Opinion I never learnt COBOl – “Swift was introduced in 2014 and was anD I’M StIll Here built for the world today”Any developer who has been in the another look, and you’ll see individuals enterprise player, sending the demand forPROFILEindustry for a while will tell you that porting Swift to the ARM platform. And if Swift programmers skyrocketing. Will anythe one thing that never changes is that you really look closely, you’ll see that some of these ‘what ifs’ happen? Only time willeverything changes. In the late Eighties, individuals have even got the Swift stdlib tell, but I would have a tough time bettingwhen I was in college, people told me that I to compile for Android ARM7 targets. against at least two of them.needed to learn COBOL. Okay, yes, COBOLis still chugging away, but is COBOL Now let’s play a game of ‘what if?’. What SO wHy learn SwIft?the language that people are rushing if Google decides it wants to move awayto learn in 2017? I don’t think I need from Java because of the Oracle lawsuits? In the last couple of years, Swift hasto answer that. In the same way, both While it could use Go, the language it witnessed unprecedented growth. AsJava and C# are starting to show their developed in-house, what if it decide it one of the fastest-growing programmingage. Prior to Swift, most enterprise would be easier and cheaper to let Apple languages, it has established itself as thedevelopment was done in Java. Java, develop and keep Swift up to date? What de-facto language for iOS development.if you didn’t know, was released in if Microsoft decides that the best way to And with Swift’s latest version just1995. That’s over 20 years ago. C# was convince iOS developers to port their apps announced at Apple’s 2017 WWDC, there’sreleased in 2000 – 17 years ago. Both to Windows was to support Swift with the a lot of buzz around the language right nowthese languages were arguably very .Net framework in the same way that they – and it’s only going to keep on growing.innovative, but a lot has changed in support JavaScript? What if IBM decides to My advice to developers of all ages, abilitiesthe programming world in the last 20 go all in with Swift to avoid the same fate and backgrounds would be: learn Swift,years. I’m not sure how much sense it as Google? Remember, one of the main and learn it now.makes to focus so much on the ‘must- reasons Oracle bought Sun was to keephave’ language of 20 years ago. Swift, on Java away from IBM. If any of these things Jon Hoffman (masteringswift.blogspot.co.uk) is athe other hand, was introduced in 2014 happen, Swift would instantly transform Packt Author and Senior Software Engineer atand was built for the world today. As a from ‘Apple’s language’ to a major Syn-Tech Solutions.modern language, it’s both intuitive andpowerful. It’s also very flexible, whichmakes it easy and fun to develop anytype of application. Yes, Sun, Oracle,and Microsoft have done their best tointroduce new features in an attemptto keep both Java and C# up to date, butyou can only repaint an old building somany times before you just need to tearit down and start over. Because of this,Swift’s popularity is growing - you onlyneed to look at its ranking history inthe TIOBE index. In March, it broke intothe top 10. tHe neXt BIG tHInGIf you pay attention to news in the industry,you might have noticed a small lawsuitgoing on between Google and Oracle.Oracle has – and still is – suing Googleover Java APIs. This is just one exampleof instability when it comes to developingin other languages. Look again, and you’llsee Microsoft trying to do everything inits power to get iOS developers to porttheir apps to the Windows platform. Lookcloser, and you’ll see IBM using Swift withits server and cloud technologies. Take september 2017 21

VOICES Essay 22 september 2017

Essay BOUNDARIES Thinking beyond websiTessally Jenkinson encourages us to start looking beyond the confines of our website project boundaries Think back to your latest digital project. I imagine Positive Change it probably happened because something old hadproblems, or someone identified an opportunity to do The space I now work in is best described as ‘digitalbetter. Almost all of our projects (excluding those for transformation, ’ which is a phrase I have a love/hatelearning or fun) are borne out of a desire to improve. We relationship with due to its buzzword-tastic usage. Forwant to make websites faster, more secure, look nicer, me, my work is all about positive change; about usingor be easier to use. The rate of change of technology digital technologies to make things better, as well asavailable to us means there’s always something we can helping people to be able to work better with technology.be tweaking to take advantage of the latest spec, API orlibrary. Nothing stands still. Everything moves and we, By looking more broadly than just immediate concerns,as people who work with the web, move with it. we can not only remove some of the repeated problems we may face when making websites and putting them Changing foCus into the wild, but we can also use our digital skills to make the world a better place in general.My career’s a good example. Starting out as a back-enddeveloper, I got more and more interested in ‘whys’ and Here are a few examples of situations where there’s amy work shifted towards discovery and strategy. I started good chance for positive change to happen:caring more about the people using websites hand-in-hand with learning more about technology; letting users ● The brief was to create a beautiful set of new pagesinfluence solutions. As a developer, I was always asking and patterns to replace an old, failing site, but thequestions. Did the site need to be multilingual? Would a existing CMS continued to spew out inaccessibleCDN help us better serve them? How would people be markup, and was also really awkward to use, so contentsearching, so I could structure data accordingly? All of never got updated. The website therefore failed.these questions came from wanting to make sure I wasmaking websites that were as good as possible, yet my ● A highly experienced lead developer is always a bigthinking was starting and finishing with the website advocate of performance, but because senioritself. That all changed when I began to work for myself management slashed their project time in half, theya few years ago, and the projects that I was working on have to cut corners.shifted slightly. Rather than websites being the beginningand end point, I realised that looking at everything else ● Lots of different systems and technologies are usedaround them could also make a huge difference. It often through a lack of strategy. The development and opsdoesn’t matter how good your design or code is – other teams are finding it hard to support them all.factors can have a big impact on the success of projects. ● Old, paper-based processes are taking up staff time and introducing manual errors. ● Data is locked away in elaborate databases, and the insight available from it isn’t being used by non- technical people who could benefit. september 2017 23

VOICES EssayWhen you start to look into the root causes of why strategywebsites or digital projects may suffer the same issues,or identify other areas that could be better, you’ll likely Underlying much of this is strategy itself - what the plandiscover that findings fall into the following areas: is for digital, how teams will evolve, which areas are atechnology, processes, people/culture, and strategy. priority for change, and how technology selections are made. Strong leadership, an ability to embrace change teChnology and try new things, and the ability to trust experts within a team can all play a valuable role. When the strategy,Where technology isn’t yet in place and maybe should leadership and direction are good, the above areas arebe, you might have issues around inefficiencies or more likely to be working more seamlessly.inaccuracy. However, when poor choices are made, otherproblems may occur. Are you making technology choices Beyond weBsitesbased on personal developer convenience and preference,or are there impacts on your users, the rest of your As time and technology have moved on, I’vebusiness, or your teammates? Thinking about the future, watched the ebb and flow of different technologiesscalability, extensibility and the ability to react are all with interest and with some awe – we can do incredibleimportant, and should be part of the decision-making things with the web now that I’d never have thoughtprocess. By updating the way we approach technology possible when I started out.selection, we can try to make sure that our products aregiven the best chance, and our teams kept happy. It’s only getting more exciting – the current fixation with AI and machine learning, VR, interfaces beyond screens, and the IoT movement grant us a lot of“Consider thinking beyond users, into people who build sites, those behind the scenes, and everything else feeding in” ProCesses PROFILEpossibilities – not only for our customers but also for our own work practices. The technology available to usWhen we start to peel back the layers of everything progresses every day, and coupled with that, as anthat lies around our websites, we can often find manual industry I think we’ve mostly become fantastic ator tedious processes that can be improved. This goes thinking about how it impacts on users.for our own project workflows as well as customerjourneys, or back-office tasks. We can work to make our websites better – turning those checks green for performance, passing accessibility Trying to find ancillary processes we can update can testing with flying colours, or using newer concepts likeprovide us with new opportunities to make people’s lives PWAs to save people both data and exacerbation on trains.easier, do things more quickly, or change older ways ofthinking. Many process points that get taken at face Next project however, consider thinking beyond users,value are worth questioning, as their importance may into people who build sites, those behind the scenes, andbe being overstated, and could be prime opportunities everything else feeding in. Look more widely to findfor radical change. areas you can change for the better with digital skills, whether that’s teaching those around you, looking for PeoPle and Culture processes to update, or viewing technology through different lenses to make a selection that works forPeople isn’t just our end-users – it is our customers, but everyone. Let’s reclaim digital transformation fromit’s also those making our sites, updating them, the buzzword bingo and instead use it as an aspiration –business stakeholders who need to get information out making positive change happen beyond the confines ofof them, and the managers influencing the process. It’s our website boundaries and browser chrome.everyone who’s involved or who will be. Are our teamsstructured well with all of the roles we need? Do they Watch Sally’s closing Render conference keynote on thishave the right skills and training? Is the culture right for subject: www.youtube.com/watch?v=O43HSNzwV88everyone to work well, and are they happy? Is everyonepulling in the same direction? If we have the right mix, Sally (sallyjenkinson.co.uk) is a tea drinker,the culture they work in is as good as possible, and if speaker, gamer, and founder of digitaleveryone has the skills, knowledge and support that they transformation consultancy Records Soundneed, then our projects will be much better. the Same http://recordssoundthesame.com.24 september 2017



Voices Interview Jaime Levy Words by Tom May Photography by Paul Vachier The author of UX Strategy talks us through her rollercoaster career, from the dotcom era to the present day, ahead of her much-anticipated appearance at Generate London26 september 2017

Interview Infojob: UX strategist, authorand professorw: jaimelevy.comt: @JaimeRLevy september 2017 27

Voices Interview These days, most people know Jaime Silicon Valley wasn’t anything like it is now. So she lugged her discs around bookstores Levy from her book UX Strategy, widely So I moved to New York because that’s where and worked incessantly to create publicityregarded as the definitive work on the subject artists lived who wanted to make a big for them. “I sent them to magazines and theyand published in six different languages. statement and I could be part of a scene that wrote articles about them. I took them to But there’s much more to the American had so much energy. bookstores and said, ‘Sell these’. And theyauthor, university professor, interface said, ‘What the hell are they?’ I said, ‘Justdesigner and UX strategist’s career to date. “If you look at film, say, it was the lame take them for free and if you sell them, give Her journey began back in 1990, when she Hollywood films that would come out of me the money.’”was working on her master’s degree at New California, while New York had the people IYork University (NYU) in Interactive admired, like Jim Jarmusch or Spike Lee” , she After Billy Idol bought one of her discs inTelecommunications. It was an exciting time, continues. “A big reason that drew me there a bookstore, Levy got a gig with EMI Records,as she recalls. was experimental industrial music, so I where she designed, animated and “I was surrounded by people who were wanted to live where Sonic Youth lived. programmed the first commercially releasedtrying to really push technology. Even back People like Patti Smith or Allen Ginsberg… interactive press kit for the singer’s Cyberpunkthen we were doing stuff with virtual reality, it was like, I can do anything because these CD digipack.reading cyberpunk books… It was a really are the people I’m surrounded by.”good time to get fully engrossed in a mindset It was just one of a number of multimediawhere ‘Hey, I’m not going to be afraid of Taking a deep dive into the latest projects Levy produced throughout thetechnology even though I’m a girl, even technologies, Levy soon became known for Nineties, working with companies likethough I’m not a programmer.’” launching the electronic magazines Cyber Viacom and IBM, at the same time as working Despite being born in Hollywood and going Rag and Electronic Hollywood, which were as a professor at NYU, teaching Electronicto college in San Francisco, Levy had no programmed in HyperCard and Macromedia Publishing and Interface Design.interest in staying put in California. “When Director and distributed on 800k floppyI left San Francisco, it still felt like a hippy- disks. “And I quickly learned that it’s one As the decade went on, things were on thedippy scene” , she explains. “Apple was thing to make something, but that’s only up. She was recognised as Newsweek’s ‘Topstarting out but they were floundering. half the game ”, she says. “The second half 50 people to Watch in Cyberspace, ’ and is you have to market the shit out of it and featured on Good Morning America as one get it in people’s hands.” of the ‘Most Powerful Twentysomethings in America’. Then in 1997 with the dotcom era28 september 2017

Interviewin full swing, she launched her own startup Suddenly, she started to see her career dream job where I got to work on(with the help of a $500k angel investment),Electronic Hollywood, focusing on web from a different perspective. “I made a innovative products, like interactivedesign, interactive advertising and originalcontent development. cartoon, but after it didn’t get into Sundance, television” , she enthuses. “I went from But in March of 2000, the dotcom bubble you couldn’t give a shit about anything working on scrappy little movie websites toburst and everything started to crumble. because what had happened was so tragic. doing Oprah and the strategy for ABC. And “I could see it coming, I could feel it, ” shesays now. “We knew we’d eventually Bands stopped playing, and it sucked all the that allowed me to focus on what becameget caught, getting to spend moneymaking all this cool, crazy stuff where there air out of New York in terms of creativity. user experience design, and then eventuallywas no business model. There were partiesevery night throughout the week, three And so I decided a day before the one-year user experience strategy.”or four of them, and I would party likecrazy. So when the stock market crashed, it anniversary that I’d come back to Los In 2008, she left Schematic for a new jobwas like: ‘Holy shit’. All of a sudden you’dhear about all these companies laying off Angeles, reinvent my “I went from as experience design leadhundreds of people.” career and focus on other at Huge. And then in 2010, Not long after that, there was another parts of my life I’d working on scrappy Levy began a whole newseismic event that hit New York, on completely neglected.” little movie chapter in her career,September 11, 2001. The period following the founding her secondattacks on the World Trade Center was an Back in California, websites to doing company, JLR Interactive.intensely emotional time, she says. Levy struggled for “a painful amount of time” “I was in my forties, I “I saw kids walking around for weeks withsigns saying ‘Have you seen my mommy or trying to get her career Oprah and the had a four-year-old andmy daddy?, ” she recalls. “And I sat for a year back in order, she strategy for ABC” a house, and I was hearingreading obituaries of over 2,500 hardworking explains. “The issue was about projects where I caninnocent New Yorkers. My creative directorlost his brother-in-law, my CFO lost her that I wasn’t a great visual make twice as muchuncle; it touched everybody.” designer. And I certainly wasn’t a programmer money and stay at home” , she explains. “So or a developer; I’d just done HTML and CSS. I wanted to get off the freeways, stay at home But then I discovered there was this new and set up my own company again.” thing around information architecture JLR Interactive was created to provide coming up. So a friend basically schooled me consulting for startups and enterprises on on how to do it, and helped me eventually how to transform their business concepts get a job at Schematic.” into sustainable and innovative online This interactive LA agency employed Levy experiences, and served clients including to create conceptual blueprints for cutting- Cisco Systems, City National Bank, Honda, edge, motion-oriented interfaces. “It was a TBWA\Chiat\Day and Sony. The idea was to september 2017 29

Voices Interviewtake founders and stakeholders all the way for what should have been one year, but it is, but in 2018 I’m going to stop touring andthrough the process from product definition turned out to be two.” to focus again on developing new coursesand roadmaps to user experience design and hands-on consulting projects.”documentation and implementation. By that time, she had moved to the University of Southern California (USC). “So Which means that September’s Generate In short, it was a consultancy for UX now I’m at a top 20 university and a top 10 conference in London, organised by the verystrategy. But while in 2017, the term is well engineering school handing out chapters of magazine you’re holding in your hands, mayknown and understood, back in 2010 it was the book, getting feedback from subject be the last chance you get to see Levy talk ina different story. Consequently, Levy decided matter experts and having a chance to really public for some time.it was time to incorporate it into her role as make it perfect so by the time we turned inan educator, having been teaching as an the manuscript it was so tight.” She’ll be giving a day-long workshop onadjunct professor at the University of UX Strategy on Wednesday 20 September,California, Los Angeles (UCLA) since the It might sound like an enjoyable followed by a talk on Thursday 21 Septemberprevious year. experience, yet for Levy it was anything but. entitled ‘How user experience strategy can “It was hell, ” she grimaces. “Writing a book’s change the world’. In what promises to be a “I told UCLA: I’m not teaching UX 101 any like getting your teeth pulled out of your ass. fascinating talk, Levy will discuss her recentmore, I want to teach UX strategy. Which It’s really not fun and it’s scary. It’s a very role in defining UX strategy for the futuristicgave me an excuse to figure out: how do I isolated, unpleasant, scary place to be. But international transportation system knownpractise it, what are the techniques, what’s I’m so grateful I finished it. And to get emails as Hyperloop; a high-speed rail conceptthe order? Research who the hell said the and tweets from people, all the time, that’s originally put forth by SpaceX entrepreneurword first, are there any articles on it that it’s helping people, I’m really happy.” Indeed Elon Musk.are worthwhile?” the book, published by O’Reilly, has been such a hit that it’s led her to spend the last It’s going to be a can’t-miss event , so make As her investigations progressed, she three years touring the world and spreading sure you reserve your ticket for Generatestarted to prepare lessons and courses around the word, through talks and workshops. today at www.generateconf.com/london.the newly emerging discipline. “Then one ofmy students said: ‘You should write a book That’s all coming to an end soon, though. Next month: Fellow Generate Londonon this.’” And so that’s exactly what she did. “It’s been too much havoc on my personal speaker Zell Liew talks to us about“I stuck myself in a library to write the book life” , she explains. “It’s got the book to where designing, developing and writing30 september 2017

Interview“Writing a book’s like getting your teethpulled out of your ass.It’s really not fun and it’s scary” september 2017 31

Voices The Design of Business customers. It’s worth limiting the duration of your offers to increase their effectiveness. As Stephen Anderson puts it in his excellent ‘Mental Notes’ cards, which explore psychology in design: “Given a choice between action and inaction, a limited time to respond increases the likelihood that people will participate.” Put simply: no one likes to miss out. THE DESIGN OF BUSINESS And the winner is… Offer Competitions can be an equally powerful driver of traffic to your site, helping to ignite conversationsChristopher Murphy explores the role that special around your product, improve awareness, andoffers can play in boosting your marketing strategy drive new customer acquisition. By partnering with others and offering your products as prizes, you can Info In the ninth article in my ongoing series ensure your partners’ customers are introduced to Job: Writer, designer exploring the design of business, I’ll explore your product too, resulting in a wider awareness. and educator how offers can be used to keep traffic flowing to your Promoting your competition with social tools like t: @fehler site, helping to drive sales of your product and grow Twitter and Facebook benefits both you and your w: tinybooks.org customer awareness, long after your launch has partners, ensuring a win-win for everyone. Don’t passed. With luck, your launch was a success and forget your product is an extension of you and your Exclusive you’ve enjoyed a few months of steady sales. Over story; it’s important to partner with others with offer! time, your sales will inevitably decelerate, as the values that reflect your ethos. initial excitement wears off. As sales begin to plateau FREE EBOOK you’ll need to double down your marketing efforts. Competitions are particularly useful if your One great way to do this is to explore the potential product is primarily digital, as the cost to you ofGet Christopher Murphy’s that offers have as a part of your marketing toolbox. giving copies away is considerably lower. When your book Start! Use the code Offers can take many forms: from occasional product consists of ones and zeroes, distributed discounts, where you reduce your unit price by a digitally, the potential to run competitions is TITAn to get it: percentage; to buy-one-get-one-free (or get-one- particularly appealing, costing you little more than discounted) deals; to competitions run in conjunction time and energy. netm.ag/start-297 with carefully chosen third parties. Running occasional offers can be a great way Running offers and competitions can prove to direct traffic to your site, helping to drive new extremely powerful, but don’t discount the fact customer acquisition. They can also act as a powerful that every new customer is a customer you’ll need tool for rewarding your existing customer base. to support. As I explored earlier in this series, Bear in mind that offering a discount will reduce great customer service can make all the difference, your margins, leading to lower profit. Offers can, whether that customer has paid for your product or however, prove helpful to smooth out your cash won it for free in a competition. flow, ensuring even the quietest of months register sales, with the added benefit of securing new If sales have dropped off, consider supercharging your marketing strategy with an offer or a competition. Both can be extremely effective ways to drive traffic to your site, helping to raise customer awareness, and driving a few sales in the process. Gumroad Making it easy to set up offer codes and run discount campaigns32 september 2017

Q&A accessibility. It was incredibly easy to start writing some jQuery code and render something interactive, and it enabled web designers to build incredibly cool stuff, whereas before they’ve been intimidated by all the JS. Sure, there have been the haters who always point out how you’re not a real developer when you use jQuery, but they’re missing the point. I’ve created jQuery UI as a complementary library to jQuery; to do what jQuery has done to JS to building complex user interfaces. jQuery UI was never the fastest, nor the most elegant library, but it was incredibly accessible. With a single line of code, you could make something on your page draggable – it didn’t matter if it was positioned relative, stuck in a floating container, whatever. It enabled a whole new generation of people who were previously told they’re not coders to – well – code! Q&A net: How is Accelerated Mobile Pages (AMP) going? PB: I joined the AMP team because I saw a lot of Paul Bakaus similarities to jQuery UI. Both are aiming to fix issues with the current web in a pragmatic way thatThe Google developer advocate explains what idealistic devs often don’t agree with. I’m happy to we’re all missing in Chrome DevTools, and say that the strategy seems to work: there are over why he created jQuery UI 2 billion AMP pages out there, on over 900k domains worldwide. But we still have a long way to go: we need Info net: What’s surprised you about working with more non-publishers like eCommerce sites to join developers who are working on Chrome? the fight for a faster, friendlier web, and we’re doingJob: open web PB: It’s probably that everyone working on the everything we can to support an increasing numberdeveloper advocate, project genuinely cares about the web, its users and of dynamic content use-cases.Google developers. It’s refreshing not to have to explain why a free, open and neutral web matters. net: What’s exciting you most in web designw: paulbakaus.com right now? net: What are the greatest misconceptions people PB: CSS Grid, CSS Variables and Mixins are all veryt: @pbakaus have about Chrome DevTools? welcome additions to the world of web design, and PB: Most web devs don’t realise how much they will allow us to design (and code) in smarter ways, but can accomplish with the DevTools. They usually if I had to pick, I’d say Houdini. Houdini is this new stay within the Elements, Console and Network set of specifications that gives us much more low- panels, and miss all the other cool parts: CPU and level access to the primitives that render web pages, network throttling in the performance panel, the allowing you to break out of CSS’s current capabilities new Application tab to work with PWA features like and invent completely new ways of displaying and Service Worker, and – brand new – the refreshed interacting with content. Audits tab with Lighthouse baked in. And with Workspaces, I develop entire demos exclusively in net: If you could have a conversation with your DevTools: real-time updating, and using the Elements younger self, what would you tell him? panel as your CSS editor. Fun fact: many members of PB: Don’t worry so much about monetary goals, the DevTools team use DevTools to build DevTools. and pursue what you truly enjoy, always. I’ve been sidetracked a few times in my career, with jobs net: Why did you create jQuery UI, and what do you that paid remarkably well but just weren’t worth it. think has been the main reason for its popularity? All in all, there aren’t many things I truly regret. PB: The success of jQuery was largely based on its Just shipping my mobile-friendly branch of jQuery UI would have been smart in retrospect, and open sourcing my HTML5 game engine. Oh well! I have no time to dwell – the future is bright and exciting! september 2017 33

VOICES Big question WHAT’S NEW?How do you keep trackoF tHe latest web news? New techniques and technologies are coming out all the time. So what are the best ways to keep up with what’s new in web design and development? tom Greever Francisc aknai Author and UX director, Bitovi UX/UI designer, Yopeso tomgreever.com yopeso.com/en/home By talking to my own team. I lead a group of designers at Bitovi, a web application design and You can’t keep up withdevelopment agency. The variety of client projects we everything. But I amwork on exposes us to a lot of different trends and subscribed to different newsideas on a daily basis. We are always sharing news, aggregators that send out weekly ortips and ideas together, whether it’s over chat, at even daily newsletters to theirin-person training, or from our client projects. I find subscribers. (Tip: create filters inthat my team is the best source of this stuff because your mailbox, to keep the inboxwe’re all working on the web every day. That kind of clean. Things can get out of handpractical knowledge is invaluable. pretty fast.) I follow different communities on Medium, which kate bolin also pump out a plethora of information daily, targeted right Marketing executive, Heart Internet on my personal interests. And I www.heartinternet.uk follow well-known influencers in the design industry on social media I don’t keep track as much as I and get involved in as many should. Newsletters provide me conversations with them. They arewith a lot of information, right in my also people, like you and me. Theinbox. I can skim, click and pass on key is to read as much as you can,stories easily, whether it’s about SEO, wherever you can.front-end dev, or a UX study. I alsohang out in local tech community Slackteams. Tech Nottingham has afantastic team, filled with people wholove to talk the latest tech no matterwhat your skill level is. And I love goingto events.34 september 2017

amy parker dan perrera Co-owner, Fore Design Co-owner, Fore Design foredesign.co foredesign.co Since I’m always on Dribbble, I Aside from keeping an eye on my favourite usually start with my list of my Twitter and Dribbble accounts, I’ve beenfavourite interactive designers on the enjoying a handful of web design email newsletters.platform, or peruse my interactive design They are usually brief and give me a good sense of thebucket. I also keep a list of bookmarks in technical and aesthetic developments in the industry. Imy browser of some of my favourite also keep track of trends in fields that are tangentiallystudios and, specifically, some interesting related to web design. For instance, design forsites I’ve come across. I try never to operating systems, other non-web interfaces, and evendirectly copy a particular thing I’ve seen industrial design can offer inspiration for how we might– whether it’s an animation or interaction, think about design for the web. I’m always on thea design element, or a layout – so I’ll lookout for meaningful interactions that help the userusually take in as much as I possibly can, make sense of a design.let it all swirl around in my head, and seewhat comes out. inayaili de léon max willmott Lead web designer, Canonical www.canonical.com Web developer, FootballRadar twitter.com/maxwillmott I use Feedly to subscribe to RSS feeds that I’m interested in. I go By far my favourite way of keeping up to date are newsletters. Weekly through them every Sunday. I also newsletters give you a nice, digestible chunk once a week in a single place, subscribe to some newsletters,and I rarely feel like I’ve missed out on big news. There are newsletters for a wide like Design Systems, Sidebar andrange of subjects, such as JavaScript Weekly, or more specific subjects, such as Designer News. I follow TwitterTypeScript Weekly, and yes, there’s a CSS Weekly too. I also like to read the accounts that tend to share latestthreads on message boards, such as Hacker News or Reddit. It’s likely I’ll find an design and development news, butinteresting opinion from other members of the community. not that many; I prefer to follow people I know. I favourite anything that sounds interesting, and then I go through my favourites, open lots of tabs and try to read them in one sitting, about once a week. resourcesSidebar Creative bloq’S newSletter SmaShing newSletter The brainchild of Sacha Greif, the Sidebar Some of the best articles in net magazine Long-running web design blog Smashing (sidebar.io) newsletter is a beautifully make their way onto our sister site, Magazine (www.smashingmagazine.com)curated daily newsletter featuring five links and Creative Bloq (www.creativebloq.com), along sends out an editorial email newsletter twice afive links only. It’s a small enough number that with other, specially commissioned web month with useful tips, tricks and resources.you won’t feel burdened, but because it’s daily, design material. Creative Bloq’s weekly web Carefully collected, it will help to ensure youit ensures you’re unlikely to miss any big news design newsletter keeps you up to date with all never miss a big story in the world of designthat’s relevant to the profession. of this. and development. september 2017 35

voices Opinion EDUCATION many job adverts list a requirement of a 2:1 or above, but this is merely a lazy way for HRJOB HUNTING to reduce time costs associated with interviewing. For those in the know, there Why studying a degree course doesn’t are always routes around these HR filters.automatically ‘qualify’ you for a well-paid job An impressive CV doesn’t magically While gaining a higher education to gain an understanding of the types of roles PROFILEappear from nowhere, so be prepared to do qualification may be required to and pay that interest you. Even though many whatever it takes to gain the experience andbecome a doctor, teacher, social worker or jobs will be beyond your skillset and skills that will make you stand out tosolicitor, it’s definitely not required to experience, you can gain an idea of skills you employers. An effective way to gainbecome a web designer or developer. should develop. There’s no need to be an experience and develop your skills is to pickDespite this being well understood by expert in everything (full stack development), up freelance projects from various job boardsthose already working in the industry, this as many jobs focus on either front-end or such as PeoplePerHour.com. While projects onknowledge seems to go unnoticed by server-side development and pay just as well. these websites aren’t usually well paid, theypeople seeking to establish a career in the allow you to develop a portfolio of work, andfield. Here are five steps to consider. It’s no secret that the best developers are gain experience of ‘client facing’ that will self taught. Programming isn’t something impress potential employers.Seek PoSitive influenceS you can become good at by attending a few classes on a course, so you’re going to have Become inDePenDentA big problem for school and college leavers to invest time in learning throughis the availability of highly targeted advice. experimentation. Use tutorials such as those Modern schooling in the UK places far tooWith so much misinformation in circulation, in net magazine to gain an understanding much emphasis on teaching to pass tests init’s easy for teachers and careers advisors to of web-development concepts that you can order to meet government targets. This hasaccidentally pass on inaccurate information. apply to your CV. Also use this opportunity resulted in many school and college leaversThe highest priority for anyone seeking to to show employers that you are capable of being dependent on being directed to solveestablish a career in the industry should be managing your own skills development each part of a task in the same way that mostto speak with people who have real industry without their input. schools teach to pass the test. Thisexperience. This could be through social- dependence is too costly for employers tomedia groups, such as on LinkedIn, or one exPerience > eDucation justify providing a job, as it would cost themof the many forums on which industry more time and money to support you andprogrammers can be found, such as Quora. The truth is that qualifications have almost effectively do your job for you. no value in this industry, and the mostDeveloP targeteD SkillS important piece of paper you can have is a Develop abilities to work independently good CV. Employers don’t care if you have a in your role as a web designer or developer.Use your conversations, as well as researching first class degree if you can’t demonstrate This includes knowing how to solve problemsjobs posted on websites such as jobsite.co.uk, how to apply your knowledge. It’s true that through research on Google, while also being able to plan your workload to meet deadlines you’ve been assigned. Demonstrating these abilities will give employers the confidence that you can free them from more problems than you create. Be Proactive Another problem that employers seek to avoid is the need to micro manage their employees. Learn to identify where your skills can be applied to the bigger picture, so that whoever you report to can be relieved from planning your time deployment. Be proactive in developing and refining your skills so that you become more relevant to the work that employers need you for. Leon is a freelance web developer and trainer who helps people to embrace and progress web- development careers. He also authored Going IT Alone, a guide to freelance web development.36 september 2017

LONDON20-22 SEPTEMBER 2017 Speakers include:AARON GUSTAFSON ANTON & IRENE SEB LEE-DELISLE STEVE FISHER JAIME LEVY TICKETS ON SALE NOWwww.generateconf.com

Never miss aN issue! #295 AUGUST 2017 Explore the changing world of SEO, why inclusive design is so important and the ultimate guide to Sketch’s game-changing update#296 SUMMEr 2017 save uP #290 MArch 2017 to 31%The Money Issue. How to survive We explore the design secrets– and thrive – in an increasingly wiTh A diGiTAl driving major brands, share tipsuncertain world, plus eCommerce, SUbScriPTioN for futureproofing code and divefinances & project management into Adobe XD’s latest features SEE PAGE 18Got aN aPPLe DeviCe?Download net’s digital edition for your iPad, iPhone or iPod touchNETM.AG/NET-iPAd (UK), NETM.AG/NET-iPAd-US (US)

cATch UP oN ANy iSSUES yoU’vE MiSSEd by dowNloAdiNGoUr diGiTAl EdiTioNS NETM.AG/NET-bAckiSSUES#294 JUly 2017 #293 JUNE 2017 #292 MAy 2017 #291 APril 2017The 10 Rules for Better Web The new CSS trends, tools and Discover how to master mobile Take an in-depth look at the sixTypography, why you should be techniques you should be using design through the golden rules main trends changing the faceusing a Service Design approach right now, plus how to design of great mobile UX, plus 15 web of UX and introduce five steps toand how to use CSS Grid Layouts the perfect UX for offline use APIs set to revolutionise the web great image management#289 fEbrUAry 2017 #288 JANUAry 2017 #287 dEc 2016 #286 Nov 2016We run down the design tools Take a dive into browser-based We run down 22 tools and Dig into the science behind greatworth exploring this year and VR, learn the rules of responsive techniques you need to know to design with a look at the fiveshow you how to get started web type, and discover how the boost your efficiency levels. Plus: critical steps to planning a sitecreating a chatbot experience BBC keeps its sites fast best practices for great forms and a deep dive into A/B testingPreFer to reaD oN aNDroiD, PC or maC?net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and moreNETM.AG/NET-GooGlEPlAy NETM.AG/NET-ZiNio

GalleryInspirational sites © photo by ankit Vij catt small Sensational design and superb development catt is a product designer and game maker who enjoys site of designing experiences at etsythe Month and teaching people to code. Bronx born and raised. w: @cattsmall t: www.cattsmall.com GooGle earth, CSS, htMl MacAree created a completely “I LOVED 17776 and different application from the rest of have been talking17776 SBNation for the project, which helped about it to anyone who Bois “pleasantly surprise people”. will listen”https://www.sbnation.com/a/17776-football They used many tools including – Yoko ohama, The brainchild of Jon Bois, 17776 is Photoshop, iMovie, and GIFfun, but a strange experience about the Bois’ favourite to use was Google Earth. product designer at etsYfuture of American football. “I’m a “In addition to just being a really coollifelong football fan and an American, program,” he said, “it’s surprisinglyand it’s very complicated to be either,” deep, and has some really interestingBois said. “I decided to try to filter out features that 99 out of 100 peoplethe things about both that I hate, and probably never even notice.”present a concentrated idea of thethings about both that I love.” That The site instantly went viral and haslove turned into a 25-chapter story, so far been shared over 40,000 timeswhich unfolded on the site throughout across social media platforms.mid-July. Bois worked with developerGraham MacAree, two editors, andfellow designer Tyson Whiting to buildthe site.40 september 2017

Inspirational sites WordPreSS, CSS, htMl “Beautiful and snappy on mobile ... I don’t feel like I’m looking at aamERIcaN WOmaN dumbed down experience”http://americanwoman.co raFe chisolm, product designer at pandora american Woman is sarah huny Young’s grant-winning portrait and interview series about Black american women. the website,americanwoman.co, is an online version that “houses a thorough synopsis ofthe project”. according to Young, the site “establishes the visual style andbranding, provides info to any media outlet that wants to cover my work, andalso showcases the work itself as it progresses.” since Young’s career historyincludes web design and front-end development, she designed and built thesite herself. “What i dig most about americanwoman.co”, Young mentioned in ouremail conversation, “is that it’s large-format and visually arresting. therewas no need for ad space or a plethora of copy, so i was able to be a bit moreexperimental with the design than i could be for most of my clients.” anotherfeature Young loves: “even as it collapses responsively for mobile and otherdevices, it doesn’t skimp on the artistic integrity.” thinking ahead to the future, Young plans to turn american Woman into“an art exhibition and full-length documentary”. she is currently running apatreon (patreon.com/americanwoman) to continue funding the project. Fanscan become patrons for as little as $1. september 2017 41

GalleryInspirational sites WordPreSS, CSS, htMl KItKat PEcsON http://kitkatpecson.com kitkat pecson is a multitalented designer who wanted to show the world her diverse set of skills. she also wanted to express her personality more. “my previous design”, said pecson, “was a simple minimalist grid and now it’s packed with colour and personal touches.” in a world of grids and grayscale, her work stood out as something refreshing. culture is also important to pecson, and she felt an imperative to highlight her Filipino american roots. “my art is influenced by my culture and immigrant experience... i wanted it to shine through in the site design as well.” the result is a bubbly and fun website with lots of carefully-recreated, animated emojis. “it started with one... i had too much fun making it, so i used hover states as an excuse to give my emoji more expressions and outfits (including a traditional Filipiniana dress).” i had a blast playing with pecson’s site and discovering its secrets. pecson mostly focuses on design, so she wanted some help to build the new site. she leaned on her collaborator of five years, oscar Bicada iii, who also built her first site in 2012. “it’s great to work with someone who makes sure we’re using the right tools for the project and who goes the extra mile to research and execute my vision.” 42 september 2017

Inspirational sites“Very cute, jQuery, CSS, htMlclear, andperformant NIcK JONEswith nice hoverdiscoverables https://www.narrowdesign.comand animations” Nick Jones’ portfolio site is based would “attract the sort of people Isamantha kalman, on the golden spiral, an idea he says wished were paying me to design and “has been sitting there for two thousand code things. My hope was that they’d begame designer years.” According to Jones, “Pythagoras people who understood the visual didn’t have a fast enough graphics card language of design and who appreciated to handle the CSS transforms or he experimental interfaces.” By using the would’ve probably used the layout for his golden ratio and rotating each image 90 portfolio.” Jones has been thinking degrees, Jones realised he could create a about this idea for at least five years – perfect spiral when users scrolled down. “the desktop background on my old “It took a week or so to get the math laptop was an image of the golden spiral right,” Jones said, and “the visual design with the formula to create it and the first is really a result of the code”. twenty or so Fibonacci numbers scrawled below it.” For several years, Jones stared Jones’ hard work definitely paid off: at that image. One day, he had no work “Since launching, almost everybody I so he decided to make a new website that was thinking about reaching out to for work has reached out to me!” “Visuals are simple, content is straightforward, and the performance is slick” saBrina majeed, independent designer and adVisor september 2017 43

GalleryInspirational sites jQuery, CSS, htMl DO YOu sPEaK HumaN? http://doyouspeakhuman.com SPACE10’s Do You Speak Human? is a delightful experience with slick transitions and animations. As IKEA’s “external future living lab,” SPACE10 is “on a mission to design better and more sustainable ways of living.” According to the Do You Speak Human? website, the survey was created because the group was “curious to learn how the many people feel about Artificial Intelligence.” Their goal: to let respondents “share how they would like their future AI to be.” “The project is what we label as ‘playful research’,” continues the Do You Speak Human? project description. “The idea is to listen to people, open up the design process and take people’s wishes, concerns and aspirations into account before even deciding how this topic should be explored further.” Visitors can continue to respond to the survey via a chatbot. Since the survey will likely be open as long as the site is online, the results will change over time with our preferences. 44 september 2017

Inspirational sites ruby, Foundation, htMlFORmhttp://formbeauty.com a hair care line from the creators of Bevel, Form offers combinations of products that work with the wondrously varied hair textureswomen of colour have. Quinnton j. harris was lead designer of Form’sminimal, yet unique website. “our mission is to help take out the guesswork ofhair care”, she said. Form aims to “make it simple to know what products you need, how youshould use them and why they help improve the health of your hair.” a largechallenge was expressing diversity through simplicity – “i remember feelingreally excited, but anxious, throughout the entire process of creating this end-to-end experience”, remarked harris. “While i’ve seen personalisation webexperiences before, i knew we were designing and building something that wasa paradigm shift: both product and web.” Full of pinks and warm purples, Form’s site pops and invites newcustomers. its subtle typography allows the distinct imagery, which featureswomen of colour with different hair textures, to shine. “We meet customerswherever they are in their hair journey and get personal,” harris wrote. Formcurrently recommends products using a questionnaire and algorithm. theynext plan to release a recommendation service that analyses buyers’ hair andpersonally recommends products. harris mentioned that the site will growand change over time with the product line. as someone who has a deeprelationship with their hair, i am very excited to see the future of Form. september 2017 45

Sublime design Design& creative adviceThis monTh FeaTuring... Challenge This month... yoga studioProfilesProfile 50 amy ParkerWe talk to Dogstudio, the leading Belgian Amy runs Fore Design, a brand-driven visual communications studio in Boston.digital agency making waves across the world, w: foredesign.co t: @amyhparkeron how they make good shit every single day luke BurforDHow we built 56 Luke is a UI designer and front-end developer based in Cornwall.Clubhouse tells us how they took one of their w: lunamedia.co.uk t: @lukevburford Paolo Cagliani Paolo is a visual designer at E3 srl. w: www.linkedin.com/in/paolocagliani t: @cagliani_paolo Brief This month we would like you to design a website for a fictional cabaret act. This gives you a chance to be really creative with imagery, type and anything else you can use to make your design convey some of the fun and atmosphere of the show.favourite books and turned it into a full-sensory digital experience

Design challenge 2 3 51 4 6 AMy PArker My MonthParis Je T’aime what have you been doing this month?A minimal, Swiss-style site with rotating colour palette Designing and building a site for an art I thought it would be an interesting Close uP consultant. We just challenge to convey the fun, energetic, finished up a small print‘rowdy music hall’ vibe of a cabaret in a modern, (1) I couldn’t resist designing a simple little windmill piece for a long-minimalist way — like a Swiss poster from the logo then animating it to make it rotate. The base and standing client of ours.Sixties. Starting with a mashup of historical the blades are separate SVGs positioned in relationreferences to cabaret’s roots in turn-of-the- to each other using CSS. (2) A countdown to the next which sites have youcentury Paris, I looked at posters designed by showtime means you can plan out your day without visited for inspiration?Toulouse-Lautrec and Jules Chéret to figure out missing the show. (3) The minimal typography is I’m always on Dribbblewhat content I’d need. inspired by the blocky, condensed lettering found on and Instagram. Borrowing from their colour schemes, I marquee signs, and helps to pull a bunch of historicused a rotating palette of red, blue and references into the 21st century. (4) Background what have you beenyellow for the background, but kept all of typography adds an interesting depth and complexity to watching?the foreground content black and white for the composition, and helps to break up the strong grid. The Red Sox, Rachelmaximum legibility. (5) A super-subtle animation transitions the background Maddow and Chef’s Since I design right in the browser, I made colour from yellow to red to blue and back to add some Table on Netflix.an actual website (you can check it out at subtle visual interest to the site. (6) Some of the originalcabaret.netlify.com). I used CSS for all the Parisian cabarets, like Le Chat Noir, published weekly or what have you beenanimation, and took advantage of Flexbox, monthly magazines that included poetry, short stories, listening to?viewport measurements, and my favourite CSS political satire and the goings-on of the cabaret and I always throw onframework, Tachyons, to create the exact poster- the neighbourhood. An email newsletter would be the Beats 1 while I’mstyle layout I wanted. obvious, modern-day version. working so I don’t have to spend time figuring out what to listen to. Otherwise, I switch over to Soulection. september 2017 47

ShowcaSe Design challenge1 453 62 luke Burford mexiCola Vibrant colour and bold typography create a Mexican mood My Month Mexicola is a Day of the Dead-themed Close uP extravaganza, promising an unpredictablewhat have you been night of Latin-style thrills and black comedy. (1) Chunky card graphics for our main charactersdoing this month? Loosely following the story of our four main establish a feel for the world of the show, creating anDesigning a couple characters, there’s plenty of opportunity for emotional connection and a sense of story to pullof sites for cultural improvisation and audience participation, so no users in. Hovering on a card flips it to display a cast-organisations, and two nights are ever the same. With a Mexican member photo and a link to a detailed bio.boning up on React. flavour required, the site uses a vibrant colour (2) Quick access to the box-office page for easy booking palette to convey the excitement of the show. and display of current cart status. (3) Clear promisewhich sites have you Irregular shapes and curves, using SVG and CSS, of the varied forms of entertainment that will be onvisited for inspiration? transforms on-page elements, creating a offer – although not necessarily in the order shown!Dribbble, The Noun spontaneous and approachable vibe. (4) Providing social proof in the form of easy-to-digest,Project and Hixle.co. With a fantastic history of bold typography favourable reviews from trusted sources helps to in Mexican culture, there’s a great opportunity convince the user that this is a great way to spendwhat have you been to experiment with some more unusual font an evening (and their cash). (5) Pulling in shots fromwatching? choices, and effectively use type to convey Instagram with the show hashtag provides furtherSeason 2 of Master character and mood. Beyond the homepage, evidence of the fun on offer, motivating users to comeof None. detailed character bios help to build an idea of and join in, with in- or post-show sharing part of the the show’s world in the mind of the user, and experience. (6) A bold, single call to action makes it clearwhat have you been media galleries further pique curiosity. what to do next.listening to?Ellen Allien’s newalbum, rediscoveringsome old punk andnew wave.48 september 2017

Design challenge1 3 425 PAolo CAgliAni My Monthle Bizarre what have you been doing this month?A website that offers a unique and unrepeatable experience I’ve been busy being bitten by my own Le Bizarre is the new world tour of the Close uP daughter, who has famous Crazy Horse’s cabaret show from recently grown herParis. The website is designed for those who are (1) The community is important for Le Bizarre. It is first tooth! In my sparepassionate about cabaret and looking for unique possible to share the event with other users and, time, I’ve been workingand thrilling entertainment. by connecting to your social media account, play on two important This responsive website focuses on the games and win prizes. (2) Thanks to the dynamic projects for aninteraction with the user and – using the design, the user’s level of attention will always be international bank.parallax scrolling technique – animation of high, which allows us to provide more details on thethe content, all with the aim of letting the user event. Using the parallax scrolling, the images in the which sites have youexperience be something unique thanks to background will move more slowly than the ones in visited for inspiration?overlapping, emotional images and storytelling. the foreground, creating a catching spectacle and SiteInspire, awwwardsIt’s a really immersive experience. tridimensional depth. (3) If you have VR glasses, by and cssdesignawards. Those who own VR glasses (for example, selecting the icon it is possible to open the videoOculus Rift or HTC Vive), can watch the VR and watch it in VR. (4) By clicking on the photo, a what have you beenvideos just like they were there, enjoying the dynamic pop-up will appear, and it will narrate a watching?show live – they’ll forget about the external short bio in which it will be possible to see the artist’s Moulin Rouge! And, Ienvironment and be teleported to a parallel video or share it on social media. (5) For those who have to admit,universe. On top of that, the users will be able to do not have VR glasses, it is possible to download a Roger Rabbit.interact with the website, share and easily buy designated app that allows you to enjoy the virtualtickets to shows. reality with Google Cardboard. what have you been listening to? The Beatles, Rolling Stones and The Doors. Old but gold! september 2017 49

ShowcaSe Profile infoLocation: Chicago, USA/Brussels, Namur (headquarters)and Liège, BelgiumEstablished: 2006Team size: 35Expertise: Strategy, design andtechnology (including branding,interactive installation, productdesign, experience design)Clients: Microsoft, The MuseumOf Science And Industry OfChicago, Quanta magazine, HereBe Dragons, The Kennedy CenterAwards: Dogstudio have wonmore than 40 internationalawards including 23 Awwwardsand 15 FWA. The studio won the2016 Awwwards Site Of TheYear (User’s Choice) for KIKKFestival 2016; and 2014Awwwards Site Of The Year(User’s Choice) for Dragone 50 september 2017