net Issue 295 August 2017.pdf - PowerPoint PPT Presentation

accessibility design mobile sites with perfect n.
Skip this Video
Loading SlideShow in 5 Seconds..
net Issue 295 August 2017.pdf PowerPoint Presentation
Download Presentation
net Issue 295 August 2017.pdf

play fullscreen
1 / 101
net Issue 295 August 2017.pdf
Download Presentation
Download Presentation

net Issue 295 August 2017.pdf

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. AccessiBiliTY Design mobile sites with perfect colour contrast All-neW sKeTcH Why the new open file format changes everything AFTeR eFFecTs Export After Effects animations to HTML5 vecTeeZY ediTOR Create beautiful vector designs in your browser The voice ofweb design Feature inclusive design guide Why it’s important, and how it can help create better products Issue 295 : August 2017 : design cHAllenge HEYDON PICKERING Q&A silviO PAgAnini PROFile IN-DEPTH SARAH DRASNER INTERVIEW ISSUE 295

  2. Welcome Welcome editor’s note SEO can have a huge impact on the success of your business. Good organic SEO improves your page ranking, drives traffic and increases awareness of your brand. Without it you risk getting lost in the murky world of page two of the rankings or worse. The problem is Google is constantly changing the goalposts; its search algorithm was tweaked around 500 times last year alone. In this issue’s cover feature we’re delving into the ever-changing world of search engine optimisation to see what’s changed and what industry trends you need to be aware of. The days of keyword saturation are long gone – now it’s all about voice search, building for mobile and great UX. SEO might not be fashionable, but it’s still just as important. Our bumper guide, packed with in-depth analysis and industry insight starts on page 60. Elsewhere this issue Alex Pierce gives you a practical guide on how to show more diversity and inclusiveness in your UX design. Web developers and designers need to set the example and tell the design industry that representation matters, and this feature gives you six steps on achieving just that. Other personal highlights include our chat with Sarah Drasner on her career, a look at Birmingham City Council’s remarkable online rebrand and a profile of award-winning developer Silvio Paganini. Enjoy the issue. Featured authors aLeX PIerCe Joe LoVeLoCK ChrIs theLWeLL araBeLLa LeWIs-sMIth It’s hard to find a more topical subject than inclusive design right now. Alex’s guide on page 68 tells you why it’s important and why it can have huge benefits w: t: @alexpierce Few apps are as popular among web designers and developers as Sketch. Chris dives into the new update on page 22 and explains why it’s such a big deal t: @christhelwell Joe’s A is for Alphabet site featured on our Gallery page previously, so we invited him to showcase his favourite new sites this month. The inspiration begins on page 40 w: t: @StudioLovelock Arabella founded Salad Creative in 2001 and has seen it grow into an award-winning brand and communication agency. Find out how on page 20 w: t: @BellaLewisSmith august 20173

  3. Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200 @netmag /netmag EDITORIAL Editor Philip Morris 01202 586200 Senior art editor Will Shum Editor in chief Amy Hennessey cREATIvE BLOQ Editor Craig Stewart Associate editor Kerrie HughesOperations editor Ruth HamiltonStaff writer Dominic Carter cONTRIBUTIONS Tanya Combrinck, Matthew Croud, Simone Cuomo, Marcus Faint, Rachael Grocott, Harry Halpin, Arabella Lewis-Smith, Joe Lovelock, Yannick Mathey, Tom May, Jim McCauley, Christopher Murphy, Martin O’Dea, Alex Pierce, Jimmy Raheriarisoa, Julia Roberts, Shawn Rubel, Daniel Schwarz, Chris Thelwell, Kym Winters PHOTOgRAPHY All copyrights and trademarks are recognised and respected ADvERTISINg Media packs are available on request commercial Director Clare Dove Advertising manager Michael Pyatt INTERNATIONAL net is available for licensing. contact the International department to discuss partnership opportunities International Licensing Director Matt Ellis SUBScRIPTIONS Email UK orderline & enquiries 0344 848 2852 UK orderline & enquiries +44 (0)344 848 2852 Online orders & enquiries 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 Finance & Operations Director Marco Peroni 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 0203 787 9060 We 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 accreditation DIScLAImER All 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 is for 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 or inaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents or any 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 you automatically 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 sent at your own risk and, although every care is taken, neither Future nor its employees, agents, subcontractors or licensees shall be liable for loss or damage. We assume all unsolicited material is for publication unless otherwise stated, and reserve the right to edit, amend, adapt all submissions. ISSN 1355-7602 NEXT ISSUE ON SALE 13 JULY 2017 4 august 2017

  4. contents Issue 295 : August 2017 : FeeD FEED WorKSpACE Julia roberts gives us a tour of the eclectic, vibrant workspace of Like Digital in the heart of Shoreditch, London 16 SIDE proJECT oF THE MoNTH 12 Alex pierce’s Black in History project shines a light on lesser-known figures in history BEYoND pIXELS rachael Grocott on modern calligraphy 13 CLIENTS FroM HELL the latest in our series of nightmare clients 14 voices BUILD A BEAUTIFUL BUSINESS 20 Arabella Lewis-Smith shares with us her tips for building a business to be proud of SKETCH Chris Thelwell explores the new update and how it changes things forever 22 VOICES INTErVIEW We talk to Sarah Drasner about her career as an award-winning speaker, consultant and writer, and why she refuses to be pigeonholed 26 STorY Christopher Murphy focuses on the importance of maximising engagement 31 Q&A Haydon pickering explains why inclusive design is so important 33 BIG QUESTIoN We asked a panel of experts: can web designers contribute to social change? 34 sUBscRiBe to net anD Save up to 47% take aDvantage of tHe print anD DigitaL BunDLe Turn to page 18 to find out more about the savings on offer for subscribers JoB ADVErTS Matthew Croud on why you’re going to need a bigger Cv 36 6 august 2017

  5. Contents rEgular GALLErY 40 Joe Lovelock runs down his favourite new sites that offer sensational design and superb development RegUlaRs EXCHANGE Kristijan ristovski and Naema Baskanderi share their expert advice with readers 08 showcase JADE ANIKA DESIGN CHALLENGE three designers mock up their visions for a fictional school website 46 proFILE We talk to developer Silvio paganini on making life easy for digital nomads 50 HoW WE BUILT Spacecraft Digital on transforming Birmingham City Council’s online presence 56 RYAN FeatURes PRoJects THE CHANGING WorLD oF SEo philip Morris tells you everything you need to know about Seo in 2017 INCLUSIVE DESIGN GUIDE Alex pierce shares practical advice on how to show more diversity in design MESpEAK Waaark talk us through creating their brilliant talking 404 page 82 60 68 VECTEEZY Shawn rubel describes how to design Svg graphics in your browser 84 WEB STANDArDS Harry Halpin on DrM and the war between copyright and security research 89 PrOjECt EXporT AFTEr EFFECTS ANIMATIoNS To HTML Martin o’Dea explores Bodymovin, the tool making animation on the web great again 76 proToTYpo Yannick Mathey shows you how to master the real-time font editor 90 ACCESSIBILITY Simone Cuomo on why accessibility needs to move to the top of our priority lists 98 august 20177

  6. Practical advice from industry experts Send your questions to This monTh feaTuring... QUESTION OF THE MONTH What’s the best way to approach responsive text? Rodrigo Pombo, Argentina Kristijan ristovsKi Based in the Netherlands, Kristijan is a web developer making products and helping startups launch with StarterSquad. He’s just open-sourced his responsive testing tool, Sizzy. t: @thekitze naema BasKanderi Based in Toronto, Canada, Naema is UX designer/ researcher at Autodesk. You can follow her on Medium @msNaema. t: @msnaema Responsive text It’s not just about font size; you need to consider font weight too KR: Usually, the default solution for responsive text is to add a media query that will change the font size on certain device sizes. But there are a few more things you need to consider too. Think of the vertical rhythm, and change line heights according to font sizes. Be careful with font weight. That sweet Roboto font with a font weight of 100 might look good on your Retina MacBook, but on an older mobile device the text will be barely visible. And don’t forget that CSS doesn’t have a solution for vertical text overflow. In this case, you might want to use a gradient to ‘fade out’ the text, instead of cutting it in the middle. UX go with the flow When people talk about ‘task flow’ is that basically the same as ‘user flow’? If not, can you clarify the difference? Andrew Parr, Cumbria, UK NB: Task flows and user flows are not that different. The goal of both is to optimise users’ ability to accomplish a task with the least amount of friction. They both help you think through the design before the feature is developed. If you want to get granular, you can define them as follows: task flow is a single flow completed similarly by all users for a specific action – sign up, for example. Task flows have a singular flow; they don’t branch out. User flow is the path a user follows through an application. I like to think of them as mini user journeys. The flow doesn’t have to be linear, it can 8 august 2017

  7. Q&As 3 simple steps What books would you recommend on UX? Joanna Kosinska, West Yorkshire LeaRning about uX These were the ones I read when I started my journey on UX design, including: Designing for Interaction: Creating Innovative Applications and Devices, by Dan Saffer; The Design of Everyday Things, by Don Norman and Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, by Steve Krug. task flow A single flow completed similarly by all users, as in this one by Raaz Das ( branch out in a non-linear path. By determining this path you can see possible turns through the route and can optimise the user experience. of UX, adaptive design is a way to add and remove components and content for mobile devices. Responsive design is fluid and adapts to the size of the screen at any given point. The latest development in mobile web design is the idea of progressive web apps. In the words of Google, “a progressive web app uses modern web capabilities to deliver an app-like user experience.” CommuniCating uX Once you know and love UX, you’ll find you need to bring others on board. These are helpful: Articulating Design Decisions: Communicate with Stakeholders, Keep Your Sanity, and Deliver the Best User Experience, by Tom Greever and Communicating Design and Developing Web Site Documentation for Design and Planning, by Dan M Brown. RESPONSIVE DESIGN responsive caveats What is the most frustrating thing about responsive design right now? Amy Mattingly, Bath, UK KR: For me, the most frustrating thing about responsive design is working and optimising in Chrome or Safari’s device simulators, and then previewing the changes on a real device. It’s crazy how different it can end up. The difference is even bigger if you’re using Flexbox, because although it’s supported everywhere now, there are still some differences between rendering engines. Usually, you can see a big difference between the inspector and a real iPhone. For now, the best solution is to work with a few real devices, but I really hope this will change in the near future. RESPONSIVE DESIGN load time reduction How can I reduce the amount of time it takes to develop a responsive website? Nathan Barnes, Christchurch, New Zealand KR: The development and testing of responsive websites takes much longer than I think it needs to, and I hope that the community will continue to come up with new techniques and tools to improve things. I recently released and open-sourced a tool called Sizzy (netm. ag/295-sizzy) that is trying to specifically address this same issue. The biggest pain point for me was trying to preview how a change will reflect across multiple devices, which isn’t possible with the Chrome Inspector because you can only see one device at a time. But now with Sizzy, you can instantly see all the devices and see them changing at once so that you can then easily spot and fix the bugs in the layout. useR-CentRed design Currently, I am reading a bit more on designing products from a user- centred approach: Build Better Products: A Modern Approach to Building Successful User- Centered Products, by Laura Klein and Well- Designed: How to Use Empathy to Create Products People Love, by John Kolko. UX defining design terms Can you explain the different terms surrounding ‘adaptable’ design? Rob Reed, Boston, USA NB: Adaptive web design means to have multiple fixed layouts designed for defined screen sizes. In the context august 20179

  8. Network THE POLL COOL Stuff We Learned thiS mOnth Designing for the appearance of speeD You can’t control your users’ connection speeds, but you do have the power to minimise how irritating it is for them while they wait for your site to load. This article has some great techniques for making the very best use of whatever data comes down the pipe as soon as it arrives. What’S impOrtant tO yOu When attending a Web COnferenCe? 36.11% 13.89% exciting speakers reasonable price to attend 2.78% 2.78% Design talks good food and drink how to succeeD at freelancing What’s it really like to be a freelancer? Dan Petty’s new series and upcoming documentary features interviews with some of the most successful freelance web builders out there, with advice you can use on your own freelance journey. 16.67% 27.78% technical talks inspirational talks From our timeline What’s the worst piece of web design career advice you ever received? “When you start the project, put a bunch of ‘sleep’s in the code. Remove them with final product, say you optimized it.” @Buck__Mild working with google’s new intrusive interstitials penalty Popups and overlays that obscure content can be very annoying if you’re viewing a site on a mobile device, so Google has decided to demote sites that use them. This guide takes you through the process of understanding the penalty and identifying and fixing anything on your site that could be a problem. We don’t need Git, that’s what backups are for! @aaronbassett Never charge more than your competitors. @justinlucent To spray paint our company name around the city. Stop playing on the computer, it’ll get you nowhere. - Mum, circa early 2000’s @CreateALittle “In order to make our website accessible, we would need to rewrite all the content first” @ailin10 @evo1 “And this is how you build a html email” @perki Don’t bother with JQuery, it’s just a fad @TheDanHodson Work free for the exposure... an oldie but a goodie, I know @CarlBateman You don’t need to write good code, just get it done @BigMikeClassic 10 august 2017

  9. People, projects & paraphernalia This monTh FeaTuring... Side PROJeCT OF THe MONTH Alex Pierce gives us a guide to Black in History, which is shining a light on lesser-known figures in history 12 BeYONd PiXeLS How modern calligraphy influences the design work of digital product designer Rachael Grocott 13 CLieNTS FROM HeLL When a client refuses to give constructive feedback, the chances of a successful relationship are nil 14 WORkSPACe Julia Roberts shows us around Like Digital’s eclectic workspace in the heart of trendy London 16 august 201711

  10. FEED Side project Black In HIsTory alex Pierce’s side project aims to shine a light on some lesser known figures from history There are a lot of lovely touches decorating the website. What technologies have you used to build the project? For the scrolling effects, I use Skrollr.js, a JavaScript animation/transition library. I use gifs and the CSS3 background-clip: text property for the animated typography. I thought it would be a subtle message connecting the rotating faces of historical figures with the line, “Black History is American History.” It’s important to make sure users have the optimal character-to-line ratios when reading on large and small screens, so I used Flowtype.js. I achieved the unique layout on the index pages with Swiper, a touch-responsive slider. The trickiest part was integrating all of this into Tumblr’s theming platform. But, I wanted to keep Black in History grounded in a social network for maximum visibility. Side project of the month In summary, what is Black in History? is a curation project that presents influential (yet likely unknown) black Americans throughout past and present history and the contributions they’ve made to our society. Because “black history is American history.” Info What is the inspiration behind the idea? To be honest, my conflicting feelings on the celebration of Black History Month. While I appreciate that we have a month in which everyone can learn about people we likely won’t discuss for the rest of the year, it’s usually the same conversation about the same people. I wanted to change that conversation, shift the perspective. The goal was to present little- known subjects that appealed to a wide demographic. Their accomplishments needed to be relatable to a larger audience, regardless of race. job: Senior interactive art director @ Publicis Hawkeye w: t: @alexpierce Tell us about the biggest hurdle you have had to overcome on the project? Surprisingly, it was the copywriting. Content is definitely king. Taking the time to string coherent sentences together that won’t bore your audience can be difficult. I’ve been using this Mac app, Hemingway Editor, that tells me if my writing is garbage and how to fix it. Tell us a bit about the design. What kind of look were you going for? The overall art direction I wanted to convey was a more editorial, classic aesthetic. I pair the elegant didone typeface Bodoni with the modern sans-serif Skolar Sans. The colour palette is restrained as well with warm, brown tones. This design needed to look less like a blog and more like a magazine. Have you had any feedback or exposure yet? Black in History has received positive attention since its creation. It’s been featured on Complex magazine’s website twice, Buzzfeed, Awwwards, and received two Webby Honoree Awards. I’ve seen grateful messages from people who have never heard of the individuals I’ve talked about. And at 87,000+ Tumblr followers, it’s awesome to see that an impact was made. 12 august 2017

  11. Feed MODERN CALLIGRAPHY Rachael Grocott on how age-old, traditional skills are still influencing her design work Stuff I LIkE bEyOnd PIxELs Growing up I loved to paint and draw. I think being an only child had something to do with it – it was a good solo activity! I remember hacking the GCSE system so I could take Art and Graphic Design, and lucked out choosing to carry on with Design at college as I had a ‘hunch’ digital was going to be big! Continuing on my digital path, I studied Multimedia Design at Northumbria University and now I’m a product designer for an agency in Shoreditch called UVD. But after all these years on Illustrator, Photoshop, and now Sketch, I’d been noticing that something felt missing. I was craving getting back to basics and down and dirty with paints, pencils and ink. The big motivator for me moving away from pixels was getting engaged. Looking at some examples of save the dates and invitations, the big trend is for watercolour and calligraphy. As a true northerner, I like to save money, so decided that I’d do all of our wedding stationery myself. I got a calligraphy starter kit from a lovely place called Quill London, which includes exercises to do before you start writing: simple patterns to get your hand familiar with the style, motion and where to apply pressure. It’s a totally different style of writing so it can be a bit hard getting used to moving your hand differently – basically, you have to apply pressure to down strokes and not on up strokes. The most fun part of learning is thinking of practice words, which basically ends up with pages and pages of profanities. I initially planned to do all of my wedding stationery using modern calligraphy but after a bit of research I realised it’s a bit too en vogue right now so I’m using it subtly. I made a card to ask (tell) my friends to be bridesmaids, which also includes an ink drawing as it turns out the pen is beautiful to draw with. Working in digital makes it all the more special when you get something you’ve made back from the printers. What’s really great about learning modern calligraphy is it’s made me a better illustrator. To make the most of my lettering I vectorise it, which has meant I’ve had to really master the Pen tool and Bezier curves in Illustrator. I’ve gone full circle beyond the pixels to pen and ink, all the way back to pixels! PEtER JAvORkAI UI designer at the Adidas Group w: t:@javpet stark Stark is a colour-blind simulator and contrast checker for Sketch. With this nifty plugin it’s easy to check designs against the eight types of colour blindness. I believe in 2017 it’s a must to design with accessibility in mind. Sometimes office work can turn into a nightmare if you sit with loud chit-chatters. But don’t worry, get your headphones on and just relax or focus with this AI-generated music. It’s available as a web and native iOS app as well. Rachael is a digital product designer passionate about clean design and type, and inspired by anything Scandi. PROFILE awesome screenshot At the research phase I like to create a board of inspirational layouts, but in the days of crazy parallax scrolling it’s painful to blend together the screenshots screen by screen, so this is where this Chrome tool shines most: capturing all of it in one instance. august 201713

  12. FEED Clients from hell how to ... mAKE yOuR DEsIgN pORTFOlIO sTAND OuT FROm ThE REsT We asked the @netmag Twitter followers for their tips on making a portfolio that will help you stand apart from the competition and get the kind of work you want. NO FEEDBACK, NO DIRECTION Exclusively for net: The latest in a series of anonymous accounts of nightmare clients Storytelling It may be the buzzword of our times, but don’t dismiss the need to show your workings. “Show what didn’t work,“ says @ burning_. “Detail why it didn’t work and what you did to improve it. Take the viewer on your journey, not just the destination.” In a similar vein, @sgolubev advises: “Show how your design has transformed the business”. Clients from hell When I first started off my career in design, I was hired by this guy who just moved his business from a home office to an office space. He had started hiring people instead of working by himself with his magazine about technology. Client: I want you to design a really exciting cover for the new issue. It needs to be totally different, totally unique. Can you do that? Me: I think so. Or at least, I did – because after he told me it needed to be “totally different,” he disappeared for two weeks. I sent through a few drafts to look for direction and feedback. He never replied, so I just surfed the web looking for inspiration, adding another couple of drafts – but without feedback, I had no idea what to do. When he came back, he was p*ssed. Client: What were you even doing in this time? Or were you lazy and did nothing for two weeks? Me: You didn’t reply to me. Without feedback, I can’t move forward. Client: I shouldn’t have to give you direction for every single thing. You’re the designer, I hired you for a reason. That set the tone for the relationship. I lasted four months (which was actually longer than many other people who did work for him), but in that time he kept accusing me of being lazy, terrible at my job and so on. I just kept waiting for him to okay my designs. Eventually he fired me, and it kind of messed me up – it’s hard on the ego. But now, after two years, I’ve got a stable of clients including one of the biggest brands in the world, and if I’m waiting for feedback, I can watch cat videos whenever I want. My current clients tell me I’m very good at my job. The guy who fired me hasn’t released an issue since I left. Find your own Style “Avoid the urge to make it resemble a bland, generic, uniform, machine generated, by-the- numbers, uninspired, Bootstrap- based WordPress theme,” says @ Octavector. These established design patterns are safe because they work, but clients love it if you can put your own spin on things. where iS thiS going? “Include only the type of projects, whether fictional or real, with the style and quality you would like to work on in the future,” says @ MarlonMygb. It’s good advice; people usually pick you because they want something similar to what you’ve done before. 14 august 2017

  13. 5 2 3 1 4 Like DigitaL Julia Roberts gives us a tour of the eclectic, vibrant workspace of Like Digital in the heart of Shoreditch the top hits through the decades, to old French classics, to (my favourite) our DIVA playlist. We use Sonos, so everyone can add to it, keeping it nice and democratic. The Darth Vader mask [3] holds a special place in our hearts, as it was part of our team costume when we won the Great Spitalfields Pancake Relay Race. Trust us, flipping pancakes while wearing a giant mask is not easy. When David Bowles became our operations director he bought this foosball table [4] for the office. Dearly beloved by all it gets daily use, acting as the perfect ‘brain break’ for our team. On the wall is a graffiti piece [5] made for our office when we expanded into our current space. Bold and spirited, the figures and tech featured are fitting of our ‘go get ‘em’ approach and lively work culture. wORkSPACE [1] The table is completely constructed out of reclaimed materials, this table came from an old warehouse building. It’s particularly special because the mother of the designer who built it bought our creative director’s designs when he first graduated from uni. We’ve had the designer build us several more, each one unique and a good reminder about keeping the craft in all that we do. While the music system [2] is the first thing you notice when you come in, one thing that you can’t perceive from the pictures is how much music is a part of who we are and how we work. It does so much for setting the atmosphere in the studio, playing everything from Our open-concept studio is nestled in the heart of the Old Truman Brewery, in Shoreditch, London. And it really is the heart of the building, as we have no windows! However, we don’t let this hold us back, taking advantage of the extra wall space to stick our design drafts on the walls, hang eclectic artwork and display our client’s products. We’ve been here for five years, originally sharing a room with a fashion designer who worked with fur, so at one point our founders’ desks had a Mac, a phone and a possum’s tail! As a digital agency we are all techies and into gadgets, so there’s always a games console, vintage synth or original Star Wars figurine on a shelf. Julia Roberts is wordsmith and marketing executive at the award- winning innovative digital agency Like Digital (@likedigital). PROFILE 16 august 2017

  14. SubScribe To NeT get the no.1 choice For Web designers and developers delivered to your door, your device, or both print edition only Take out a print subscription to net and get your copy before it hits the shops. Each issue is packed with the latest web trends, technologies and techniques digital edition only Take out a digital subscription to net for on-the-go access to our interactive edition, with streaming screencasts, extra images and more save up to 18 save up to 31 From £11.25 based on a QUaRTeRLY diRecT debiT From £16 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 term specified 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: Offer ends 13 July 2017.

  15. print & digital edition Enjoy a combined print and digital subscription, and take advantage of print as well as exploring the digital experience on the go save up to 47 From £19 based on a QUaRTeRLY diRecT debiT % 20% off Adobe cc PHoToGrAPHY PLAN We have teamed up with Adobe for a limited time to offer you 20% off Adobe Creative Cloud Photography Plan (Lightroom + Photoshop) when you subscribe to net. That’s £20 off!* *Your Adobe discount will be sent to you by email after your first subscription payment has been debited. Participants must subscribe before 13 July 2017.

  16. Opinions, thoughts & advice EVOLUTION Building a Beautiful Business Arabella Lewis-Smith shares with us the top tips for building a eSSAY Chris Thelwell explores the open file format update to Sketch and looks at how it will change the way designers work forever 22 beautiful business… Following some exciting ‘evolutions’ at Salad last year, we took a long hard look in the mirror to decipher what our proposition had grown to become. With a reputation for producing impressive design and the integration of a strategy and planning team with clout, we became purveyors of the ‘Beautifully Effective’. And so, here I present some of the steps I took to making my business - and proposition – beautiful. InTeRvIew An exclusive interview with prominent speaker, writer and consultant Sarah Drasner on why she refuses to be pigeonholed 26 Find A nice pLAce to be I’d like to think that this goes without saying, but our environment has a huge impact on our productivity and general welfare. So why wouldn’t you make it a bright and enjoyable place to be? As creatives, we take pride in having a quirky and charming space that our clients and team want to spend time in. A view of the sea helps too. STORY In his latest column, Christopher Murphy focuses on the importance of maximising engagement when you launch 31

  17. Opinion tAke pride in knowing whAt you’re not I cherish this piece of advice both personally and professionally. We all tend to spend our time looking around us to see what our peers are doing. I’m extremely happy to say that over the years, we’ve taken comfort (and seen greater results) from keeping our focus on our own vision. We invest energy into what makes us unique. be honeSt It’s such a privilege to have a talented team around me, and despite founding Salad 16 years ago, I’m proud to say I’m still learning. It’s attributes like these that allow us to connect with people more deeply. Stick to what you know, be true to your own beliefs, and share it. Find the bALAnce We are a team of grafters. When a deadline hits and the pressure is on, I’m continuously impressed by the work we can produce. It’s some of our best. But we’re not in the habit of asking one another to work late. We have a culture of trust, and if the work gets done and clients are happy, we want everyone to enjoy their downtime. Trust breads loyalty, there’s no question. “We are creatives, developers, marketeers and strategists, but with clients we are people” grAb opportunitieS to heLp otherS I used to think that supporting peers in my personal network was a nice thing to do, but I’ve come to understand that going the extra mile for people who seemingly have nothing to offer you can lead you to your next dream-team employee or an exciting new client recommendation. We’re all busy all the time - make time for them. be humbLe Support purpoSe While they throw our schedule out of kilter, everyone in the team has a special review they can use as a forum to share their aspirations. This year has been fascinating, and we approach them without expectations for everyone to say ‘I want to be here forever’. These meets are a chance to understand the purpose and ambitions of the people in our business, and to consider how we can help them. And there it is – some of the methods I’ve used to make our business into a thing of beauty. Not every business focuses this much on aesthetics, but there’s no denying that a more ‘beautiful’ approach to work can support a happy and healthy business. This leads on from attitude, but it’s important I throw light on this. There’s a lot of bravado in our playpen, and we have to think up imaginative and unique ways to keep clients impressed. That’s why we work hard so that our work and results can speak for themselves. Quiet confident is much more appealing than arrogance. AttitudeS>SkiLLS While most businesses recruit skillsets, we’re looking for cultural fit first and ‘transferable abilities’ second. When we have to thrash out a tough challenge, the attitudes in the room will have as much of an impact on the resulting work as the skills. We are creatives, developers, marketeers and strategists, but when we are in the room with clients, we’re people. eAt weLL And move We’re food by name and food by nature at Salad. Among the team we have vegans, vegetarians, no-sugar-ers, and eat-what- I-wanters but every Friday, we down tools and share a small feast and some important time together. We’re also an active team who run, yoga and cycle about when we can. I think inspiration comes easier when you have fresh air in your lungs. Arabella (@BellaLewisSmith) is the founder and MD of Salad. She’s creatively minded, results driven and passionate about equality. PROFILE august 201721

  18. VOICES Essay 22 august 2017

  19. Essay Culture SKETCH 43: THIS CHANGES EVERYTHING Illustration by Kym Winters Chris Thelwell explores the open file format update to Sketch and looks at how it will change the way designers work forever On 6 April 2017, Bohemian Coding released an update to its popular design tool, Sketch 43. Designers around the world hailed it as a game-changer for the design tool industry. But the launch passed without the massive fanfare you’d expect for something so big, leaving most designers wondering what had actually changed and why it was so significant. So let’s explore the changes that were introduced and see if Sketch 43 really is the game-changer it claims to be. After a slow start, Sketch started to get traction in the design industry and a community of advocates grew around it. Fast-forward seven years and almost every designer I know uses Sketch as their go-to design tool. REVISED FILE FORMAT At the top of the release documentation for Sketch 43 are three words: ‘Revised File Format’. But what does this mean, and why is this such an important change? This revised file format is the new way that Sketch files are saved, with a ‘.sketch’ extension at the end of the file name. The new open format uses JSON formatting. JSON is a commonly used format for transferring and storing data. It’s easy for humans to read and write and for machines to create and use. So what? Isn’t this just the way the file is saved? Yes and no. What this actually means is that anybody can create and modify Sketch files, whether they have Sketch or not. You can even open and create design work in a text editor. In fact, machines will be able to create and update files automatically. GAME-CHANGER FROM DAY ONE To understand the impact of Sketch 43, we have to go back in time. On 7 September 2010, Bohemian Coding – a small two-year-old company in The Hague, Netherlands – unveiled Sketch to the design community. At the time, designers mainly used Adobe’s Creative Suite of applications. The relationship between designers and Adobe went back years, and persuading them to shift to a new tool was seemingly impossible. For years, designers had to live with constraints, workarounds and hacks to make Adobe Photoshop and Illustrator work for them. But Sketch was different. Bohemian Coding built Sketch from the ground up with the needs of modern digital designers in mind. Higher resolutions, pixel perfection and consistent styles and patterns were built in. Plus an open-sourced API allowed a community to emerge building plug-ins and tools to make it even better. But the real game-changer was the price. Sketch launched with a much smaller price tag (less than £100) than Adobe charged for its subscription model. DESIGN IS CODE AND CODE IS DESIGN So Sketch now opens and saves HTML and CSS, right? This is the question I keep hearing when speaking to friends and colleagues. That would be cool, but unfortunately it can’t. It’s actually doing something much better. The file itself is like a repository of components much like the repositories used by our developer august 201723

  20. VOICES Essay colleagues. The components explain the design in code using the JSON format, creating new ways to create and edit the design. This means we will be able to share, manage and co-create design projects just like developers do using services like GitHub. The design process will be integrated directly into the development process. This is a huge game-changer for design tools. Other tools have been focusing on owning the whole process, from early idea to prototyping, testing and managing the hand-over to developers. But Sketch is tackling this differently. By revealing the code behind Sketch they have made it easy to integrate with other services and tools. They have opened up the relationship between designer and developer enabling them to choose the process and tools that work for them. By creating branches of the master and then merging them together, many designers will be able to collaborate on the same project at the same time. If one designer updates a master style, it will be inherited into the work of all the other designers. Peer reviews will be introduced to ensure our designs hit a new higher standard. The code is always the source of truth in a product – as that’s what the customer sees. When a developer makes a change they will also update the master files through the code. Our UI kits, style guides and master designs will always reflect the final code the customer sees. AUTOMATION AND CONTINUOUS DESIGN Fast-forward even further into the future, and as the new file format can be created and updated automatically, we don’t always need a developer to translate our designs into the product. Designers move closer to the customer by removing the need for the developer. THE NEW DESIGN PROCESS This is all really good news for Bohemian Coding and Sketch. But what about you as a designer? How will this “We will be able to share, manage and co-create design projects just like developers do. The design process will be integrated directly into the development process” new human-readable file format change the way you design? Let’s fast forward to the future and see… Continuous Design will become the norm. Just like developers with Continuous Delivery, our designs will follow an automated process to move from idea through to the end product. When a designer updates a colour, that new colour will be seen by the customer just a few seconds later. Artificial Intelligence removes the need for a designer in some cases. A set of rules and styles are created then all the designs are automatically created and implemented into the product. This can even be created in real-time as a product is used, creating a really personal experience. INTEGRATION Sketch already has a thriving community of designers and developers expanding its capability through plug-ins. The new file format allows more powerful integrations for these plug-ins. Whatever we need Sketch to do is possible thanks to this ever-growing community. Services like InVision and Zeplin that help with the hand-over from designer to developer are closely integrated with Sketch. Developers can access assets directly from within those tools. They can even make a change that updates instantly in the Sketch file. The link between code and design is closer than ever. Stepping back to today, this is already happening. The Airbnb design team has created an app for translating React (the open-source JavaScript code library) directly to a Sketch file. This enables its design team to include logic and data in its designs, bridging the gap between designer and developer and vision and reality. JUST GETTING STARTED It’s still early days, and the new open file format needs a lot of documentation and stability to achieve all the possibilities mentioned here. It is a potential game- changer for Sketch, it just needs designers and developers to adopt it, use it and hack it to develop it further. Then, we will see a big shift in the way designers work and how they interact with developers. This could be the beginning of the Continuous Design era. COLLABORATION AND VERSION CONTROL Looking a little further to the future, designers will start to adopt design repositories. Similar to how developers use repositories like GitHub, designers will use Sketch to manage and version-control their design work. PrOFIle Chris ( is a design leader specialising in disrupting markets, creating innovative digital products and building high- performing design teams 24 august 2017

  21. VoicesInterview 26 august 2017

  22. Interview Sarah Drasner Words by Tom May Photography by Molly DeCoudreaux The well-known speaker, writer and consultant explains why she refuses to be pigeonholed, and why she’s pushing framework animations as her next big thing Info job: Award-winning speaker, consultant and writer w: t: @sarah_edo august 201727

  23. VoicesInterview There’s a widespread fallacy within the web industry that you’re one of two types. Creative or scientific. Imaginative or methodical. Designer or developer. But Sarah Drasner believes that’s total nonsense. “People tend to put people in categories of one or the other, ” says the award-winning speaker, consultant and staff writer at CSS- Tricks. “But I think it’s a false dichotomy. There’s a lot of creativity in science and coding. And I think that there’s a lot of study and being correct and persistent in art.” Indeed, Drasner’s own life and career could serve as a textbook example of how to successfully combine an artistic sensibility with a scientific one. On the one hand, her family background drove her toward the sciences, “My mom and stepdad are neurologists; my biological dad is an anaesthesiologist , ” she explains. But Drasner’s always been interested in art and creativity, too. So it’s appropriate that her first job was as a scientific illustrator, for the Field Museum of National History in Chicago. “I drew snakes and lizards for a living, for encyclopedias and things like that , ” she recalls. “The job was necessary because with photography, there’s always going to be something that’s out of focus, whereas a drawing can include everything.” In her work she’d use a camera lucida, an instrument in which rays of light are reflected by a prism to produce an image on a sheet of paper, from which a drawing can be made. “It’s a really ancient thing , ” she says. “You can see your hand over the object as you’re drawing it, to make sure it’s exact, down to the millimetre.” went to grad school after that, but still continued to make websites for people on the side.” Then in 2008 came another big life change, as Drasner travelled to the other side of the world, to work as a study-abroad professor of art in Greece. Her interest in the European nation, where she lived for four years, stems largely from its pivotal role in world history. “I’ve always been interested in the origins of things , ” she explains. “I think it sheds a lot of light and applies a lot of clarity to the way things are now.” But although she greatly enjoyed her time on the Aegean island of Paros, she continued to build websites as a freelancer. “Teachers don’t get paid very well – I got $10,000 a year there, so I needed the money, ” she explains. Eventually, the Greek financial crisis and consequent collapse of its economy prompted her to move back to the USA in 2011. On her return, she got her first agency job, at Waxcreative Design in Oakland, California, where she did both design and development. Although Drasner had been freelancing for some years at this point, working at an agency was still a shock to the system. “It was a big learning curve , ” she recalls. BREAKTHROUGH ROLES But then everything changed. “While I was working there, the museum came up with this scanning electron camera that took pictures at every density, every clarity level, and then composited them together. So they no longer needed my drawings.” Her employers liked her, though, and wanted to keep her on staff. “So they asked me if I could make them a website. This was the early days of the web, and it was a matter of using HTML; even CSS hadn’t caught on yet. So I taught myself HTML, and the webmaster there taught me how to make industry-quality tables. “I made a bunch of websites for them, for UCSF Stanford and a few other places. And I

  24. Interview “The agency was trying to do ‘top-of-the- tech’ things, and throwing at me really strange assignments. I was taking care of up to 60 clients, some of which had millions of users a day. It wasn’t a simple ‘put text on a page’ any more: I had to learn everything from creating newsletters to Facebook integration to full WordPress themes, custom post types, JavaScript plugins…”. Once she’d hit her stride, though, she stepped up to the role of lead front-end developer, at Basho Technologies, a distributed systems company in San Francisco. She later moved on to two more San Francisco agencies. In 2014, she became a senior interaction designer at Fauna, “the team that scaled Twitter”. Then in 2015 she moved to Trulia, a home shopping marketplace, where she worked as manager of UX and Engineering. known, ” she recalls. “I had very limited speaking experience, but the four years I’d spent lecturing in Greece, trying to keep the attention of 20-year-olds, really helped.” She also started to write about web design, at Chris Coyier’s popular site CSS Tricks. “Chris’s site was something I’d personally leaned on when I was learning CSS, and I had so much respect for him and his writing, ” she recalls. “So it was kind of a bucket-list item to get an article on there.” Her involved benchmarking a number of different animation libraries, which, out of necessity, took a huge amount of effort. “It’s kind of a big deal to call out a library or say something works better than something else  , ” she points out. “You’ve got to make sure it’s as accurate as possible.” Several months later, in 2015, she and Coyier found themselves at a conference together, and shortly after that, he asked her to come on board as a staff writer. Trulia to work full-time as a freelance consultant. But consultancy doesn’t mean that she has quit the realms of hands-on web development entirely. “I’m hired for both , ” Drasner stresses. “I’d say that it’s probably evenly split between people having me come in, look at their tech stack, evaluate what they should be doing, giving them kind of a workshop-ish kind of thing but tailored for them; and hands-on work, where I’m actually working on the product itself. “Usually, people will hire me for a few months and I’ll make sure that they’re ramped up from then; I teach them how to fish. Right now I’m working on a big React project that’s going to be announced at React Europe. The nice thing is that I get to work on stuff that intrinsically interests me.” “It’s kind of a big deal to call out a library or say something works better than something else” first article WEB WORKSHOPS Seemingly undaunted by wearing multiple hats, in September 2016 she teamed up with Val Head to launch Web Animation Workshops, which has taken the two of them around the world to teach expert-level web animation through hands-on exercises and curated examples. It’s a topic close to Drasner’s heart, as she’s long evangelised for SVG through her speaking and writing, including a talk she gave to Generate San PUBLIC SPEAKING As her skills and confidence grew, she took her first steps into speaking on web design in public. “I started by doing a couple of talks at conferences that weren’t terribly well FREELANCE WORK In 2016 Drasner decided to say goodbye to salaried employment altogether, departing august 201729

  25. VoicesInterview Francisco last year, which you can watch in full at Happily, that’s a battle that Drasner says she now feels has more or less been won. “The people who still aren’t on board are generally those who’ve heard about SVG but just haven’t had a chance to dig in, because work is hectic, ” she explains. “Plus there’s another group of people who tried SVG a long time ago when it wasn’t well supported, and didn’t have a good time with it, and it’s been hard to get them to change their minds since. So those tend to be the two groups I’m trying to help.” how to make those dreams a reality, because they totally can be.” Drasner’s keen word of warning, though, is that animation can be overused and that it can also be used in the wrong places entirely, rendering them an unsavoury addition. “It needs to be baked into the process, not something you’re slapping on after, ” she explains. “If animation is ever additive to the process, it will feel additive to the user; like they’re wading through something you wanted to do to get somewhere. That’s not good animation. So any time you hear a product manager say something like: ‘Oh, we’ll put the animations on after , ’ that means the animations aren’t built right. Because they should be baked into the core of that experience.” With this year’s speaking schedule, though, she’s widening her scope a little more with a talk called ‘Storytelling in the age of JavaScript’. “It still has some SVG animation in it, ” she explains, “but it’s more broad as to how users perceive a website and the story, and how we’re storytellers in that we build sites that tell stories for the users.” “Users aren’t necessarily concerned with things that we are , ” Drasner points out. “Product people want people to click on a button; designers wants it to look like a Dribbble shot, developers want to use the latest framework… but users don’t care about those things. They care about sustaining their curiosity. So my talk goes through how to make those transitions, and the things to think about while creating those experiences, while still making it look beautiful, getting them to click and using cool frameworks. Those things can go hand in hand. “I also go through the good, the bad, the ugly, like maybe you shouldn’t pop an interstitial in their face before they’ve even looked at the site; how to make a real performant loader that will make people feel engaged and happy while they’re waiting for their credit card stuff to go through; some practical stuff mixed in with some fantastical stuff.” “If animation is ever additive to the process, it will feel additive to the user; like they’re wading through something” WHAT'S NEXT? For everything else, though, the main message that Drasner’s pushing through right now is the idea of animating in frameworks, such as those of React or Vue. “People see these seamless transitions on native, and they want to make those on the web, but they don’t know how , ” she says. “So I’m trying to build resources and teach people Next month: Freelance Rates Calculator creator Cole Henley 30 august 2017

  26. The design of business your launch, you’ll be incredibly busy, so ensure you’ve prepared everything in advance. On launch day it’s critical to share your story far and wide. Focus on getting the message out and engaging with your audience, and you’ll maximise success. A Welcome Boost To help spread the word, it’s a good idea to contact your influencers, priming them for your launch. An email, or a direct message, a day or two beforehand will ensure they’re ready for the reveal and lined up to help spread the world. They will give your campaign a helpful boost. In our connected world we’re incredibly fortunate to have a wealth of tools at our disposal that we can use to help promote the products we make. Tools like Product Hunt, Hacker News and other product galleries are perfect for driving traffic to your site. Product Hunt ( is a passionate community that’s focussed on sharing new products – it’s an excellent tool to share your story, enabling you to reach others who might not be on your mailing list or following your social channels. Your goal is to get a conversation going and engage with potential new customers. Conversations work best when they’re natural, not scripted. When replying, be courteous, and remember: you’re not a robot so don’t just copy and paste generic replies, instead respond to individuals individually. Your followers will appreciate your humanity and they’ll support your cause by spreading the word. As I stressed when I explored the role of ‘influencers’ we’re not adopting a mass- manufactured approach to replying, powered by copy and paste, rather we’re nurturing relationships. Clear the decks for the day of your launch, ensure your calendar is empty and focus your mind on the day ahead. All being well when you unveil your product it will, to use a well-worn phrase, fly off the digital shelves! THE DESIGN OF BUSINESS Launch christopher murphy focuses on the importance of maximising engagement when you launch In the seventh article in my ongoing series exploring the design of business, I’ll explore the all-important day you unveil your new product or service to the world, ensuring the day is a success. As Sun Tzu asserts in The Art of War, “Every battle is won or lost before it is fought.” The first six articles in this series have focussed on preparation and, if you’ve followed the advice I’ve provided, you should be well-prepared at this point. Finally… it’s launch day. Congratulations! This is the moment you’ve been building towards. You might think you’ve reached the end of the road – and, shortly, you can enjoy a well-earned beverage of your choice – but really this point is just the beginning of the journey. All being well you should have an email list in place with an audience that has expressed an interest in what you’re doing. A day or two before your launch, you can build anticipation by emailing your list and letting them know that the countdown has begun. This primes your audience and ensures they’re on the lookout for your launch email. Email is, of course, just one way to connect with your potential customers. Equally important are your other social channels, which you should have prepared content for. If all goes well on the day of Info Job: Writer, designer and educator t:@fehler Product Hunt This community is perfectly positioned to promote your product august 201731

  27. Q&A how to think more inclusively as they build their interfaces. The articles are very in-depth, and I’ve started to include video too, so any Patreon support is very welcome. net: Can you tell us a little about your new book, Inclusive Design Patterns? HP: As the name suggests, it breaks inclusive interface design up into patterns – one example pattern per chapter. Accessibility advice is often administered after the interface has gone through development, and is typically quite high-level and impractical. I wanted to show folks how to build inclusive interfaces from the ground up. It’s much easier, more efficient and less tedious. net: You seem to delight in provocative blog titles. Is there any downside to that approach? HP: It amazes me how upset some people get when you offer a different perspective about, say, organising CSS, or have the audacity to make jokes about HTML. My jokes are mostly about toxic organisation cultures and irresponsible development practices, which to me is ‘punching up’. But to an (invariably male) developer working at a toxic organisation, intent on making inaccessible products it’s ‘punching down’ , which results in some amusing comments, so there’s no real downside. Q&A Heydon Pickering The consultant, designer and writer explains why ‘inclusive design’ is so important net: How’s the web design community doing in terms of mental health issues, and what can it do better? HP: A couple of years ago, I helped out with Geek Mental Help Week, and it was a privilege to read and publish so many mental health stories. In web development, the pain point is the often demanding hours, and the pressure to put in extra hours to ‘keep up’. We need to get better at switching off. net: You talk about ‘inclusive design’. How’s that different to accessibility? HP: When we say ‘accessibility’ we tend to mean making sure people with disabilities gain access to the same web content others do – which is important, but rather limited. Inclusive design appreciates that people read and use interfaces in a multitude of ways. The more flexible an interface is, the more ergonomic and enjoyable it will be to use for more people, including those with disabilities. Info Job: freelance web accessibility consultant, interface designer and writer w: t:@heydonworks net: What will you be speaking about at UpFrontConf and WebConf Asia? HP: Believe it or not, I’ll be talking about not writing code. Not just reducing the code we write, or making it more efficient, but avoiding the programming of whole components, features or even apps. I think we have a serious over engineering problem affecting both performance and usability. net: You created Inclusive Components (https://, “a blog trying to be a pattern library”. What’s that all about? HP: I don’t think anyone should have to solve the same problem more than once. Once you know what it takes to make an interface component usable to the greatest number of people, you should code it up and reuse it. As an accessibility consultant, I see the same kinds of components again and again, and I see the same mistakes in their design too. I wanted to develop a pattern library in the open to show folks net: What’s exciting you most in the world of web design currently? HP: I’m bound to say ‘inclusion’. Inclusive design for the web is at an intersection of user-centred design thinking and technical implementation that makes for really interesting and rewarding work. You get to make and test a lot of prototypes. august 201733

  28. VOICES Big question Culture Can We Contribute to soCial Change? Many are troubled by the state of the world in 2017. But can web designers change things? Our panel of experts share their views… saMantha hankins Designer, Mozilla’s The Coral Project Maria Perna Co-editor, SitePoint My love for the web comes from the many ways it can connect people to information, perspectives and communities. I believe that increasing people’s exposure to the authentic experiences and stories of others is the first step to motivating social change. As a result, web designers have a responsibility to look at the things we make and the technologies we use with a critical eye to the way they may exclude people, and then be intentional about inclusion. If websites resembled your computer’s command line, they wouldn’t be at the centre of most people’s lives. Engaging, accessible and intuitive web interfaces have deeply transformed the way we interact with each other, and behind these micro-interactions lie large-scale social changes. For instance, in my home country of Italy, the Five Stars Movement, a hot favourite for the next elections, is a political movement that’s made up of common citizens, not professional politicians. It began as a simple blog just about ten years ago, and continues to use that same blog to rally supporters, promote its causes, take decisions and even carry out internal elections. Catt sMall Product designer, Etsy Yes, designers can help change the world through the messages they convey online. The internet is global and can reach people in a way not possible otherwise. Projects like Free Rice, Dear Europe and 5 Calls make it clear that our skills can contribute to the greater good. Of course, design can also be used to harm people, as shown by the proliferation of fake voting websites during the 2016 US election. 34 august 2017

  29. andreW Mallalieu Co-founder, Nine Sixty erin good Front-end designer, Godfrey Contributing to projects for non-profits and companies we are passionate about is certainly one way to contribute to social change. However, we can be working on a subjective level to achieve this as well. Within our networks and organisations, we can work to recognise and celebrate influential women and people of colour, help to overcome stereotypes, build empathy, and cultivate awareness of issues within our field to help our teams build more inclusive products. We categorise design as being about creating, problem-solving and storytelling, but really it’s about people; a sentiment easily forgotten. Yes, web design can most definitely contribute to social change. In 2017, a website can be the ideal platform to create awareness around a particular movement or issue, and the design of that site will play a fundamental role in engaging people to think and act. A well-designed, well-thought-out website is more likely to motivate the user to take a desired action than one that is not. It’s also easier and quicker to spread a message online: with a simple click of a button you can reach thousands, even millions, of people within minutes. bruCe laWson Web standards and fashion consultant to Wix Engineering The fact the web exists has led to empowerment of millions of individuals. Well-designed site-building platforms give people with no technical knowledge a platform to publish their stories or sell their products to a truly global market. A trans woman I’m friends with told me that connecting with others over the web saved her from suicide as a youth. Well-designed sites allow visually impaired friends of mine access to information and work using their screen readers. olivia huffMan Designer, Friendly Design Co At Friendly Design Co in Washington DC, we recently launched BeNice.Shop, an online store where proceeds go to organisations that do good. Our small store, born from a post-election desire to make a difference in the world, has generated revenue that goes to eight different progressive organisations. These organisations include Planned Parenthood, NPR (National Public Radio) and the ACLU (American Civil Liberties Union). BeNice.Shop is proof that user-friendly websites and beautiful design can create a platform for social change. resourCes Design for gooD Design for Good ( good) is led by AIGA to amplify design- driven social change. Projects include ‘Design For Democracy’ (program focus: get out the vote and ballot design), ‘Diversity & Inclusion’ (program focus: D&I Guidebook) and ‘Women Lead’ (program focus: Gender Equity Toolkit). How to Drive cHange Richard van der Laken is director of What Design Can Do, an event on the impact of design that takes place in Amsterdam. In this article (, he argues it’s time for designers to seize the initiative and change society, and then outlines how we can do so. Designing for social cHange Human Design is creating experiences that ‘move’ the human race. In this case study (, experience strategy lead Jeff Corkran explains how it worked with Vulcan Productions and Oceanic Preservation Society (OPS) to help promote discission of extinction issues. august 201735

  30. voicesOpinion overheard in the department is a sure way to generate little interest. This company wouldn’t appreciate you amplifying your CV, but they clearly feel it’s okay to misrepresent the job on offer. Additionally, it’s not as if development is an easy, carefree job. It’s difficult and stressful, and these sensational job posts for unsensational wages aren’t helping. I fully understand the value of jack-of-all- trades employees within small companies, but they need to remember that we’re humans, not impassive automatons. If there is a genuine need for these skills, and for them to be specifically owned by one prodigious individual, the company better make sure the salary is *cash register sound*. Furthermore, if they do manage to bag the intelligentsia grandioso with an insatiable thirst for learning, they need to ensure that thirst stays quenched. “The successful candidate will be ahead of the curve in modern web trends”. And what will they be doing to ensure this continues during that grind they’ve advertised? Not a lot seeing as the next prerequisite is the ability to ‘work under pressure’. Sounds fun! Let’s not forget the interview stages, where you’re asked to develop a complete responsive homepage. Let’s hope you only applied for one job at a time. What’s next? Provide a urine sample? Still, at least you’re guaranteed to receive a full critique of your work, right? Unfortunately no, they’re going to print out your design, roll it into a giant cigar and smoke it. Yes, I am guilty of writing tests for potential employees. Yes, it can be a great aid in the decision-making process, but at least make the task as lean as possible. Target the stuff that actually matters. If you’re reading this beautifully written column and you’re in charge of recruiting new designers or developers, I hope this glorified and overly revealing rant has given you a little insight into how your job posts are received. Be honest and accurate with your job roles and expectations, and you’ll foster a much healthier and longer relationship with your new recruits. CuLtuRE JOB ADVERTS Matthew Croud on the preposterous nature of the job market, and why you’re going to need a big CV When you’re looking to spread your wings elsewhere, or just keeping an eye on what technologies and skills are most desirable, most of us have traversed the pages of job sites. Whether it’s job descriptions written departments or overzealous employers hoping to bag a bargain tech genius, many of these vacancy postings are inaccurate and overblown, contributing to job dissatisfaction and disappointment. The problem, I suspect, is fuelled by the increasing confusion of job titles and exacerbated by the unstoppable wave of ‘must-know’ frontend technologies and buzzwords. I honestly don’t know what to refer to myself as these days, Front-end developer? UX architect? Digital designer? Graphic web developer? When people ask me what I do now, I simply shout out “web” before spinning the propeller round on my beanie hat. There are a few common bad eggs in the sea of recruitment ads. Sound familiar? “We’re looking for an individual with excellent JavaScript, jQuery, PHP and MySQL skills. Also InDesign, print production and whatever! 16k yolo! air horn , air horn” Whaaa? Isn’t this at least two people we’re talking about? I can’t say I’ve met many JavaScript devs with a penchant for four colour process, spot UV and matte lamination. Is this a graphic web developer role? Or what about a junior full stack print architect? I love how InDesign or often ‘knowledge of print’ is just slapped in many frontend job descriptions – minus the salary jump to merit the additional skillset, of course. Somewhat disrespectful to the many fine graphic designers out there. “We’re looking for an enthusiastic, quick learner who is proficient in the following fields/technologies: HTML, Pug, CSS(Sass), jQuery & JavaScript (ES6), PHP, MySQL, Node, Angular, Bootstrap, GIT, Wordpress, Drupal, Magento, Photoshop, Illustrator, excellent yo-yo skills. Salary dependent on experience.” Yikes! Someone needs to tell this company that Professor Charles Xavier is fictional, and I doubt he would fire up Cerebro just to churn out some Wordpress themes. Exaggerations noted, this job post falls under the increasingly common ‘list absolutely everything and hope a mythical deity materialises’ category. Chances are, this role won’t utilise all of these skills, but listing every tech word that has been by non-techy Matthew (@octavector) is a frontend developer who has worked in a variety of exciting, small agencies in the south east of England. PROFILE 36 august 2017

  31. Never miss aN issue! #293 JUNE 2017 The new CSS trends, tools and techniques you should be using right now, plus how to design the perfect UX for offline use save uP to31% wiTh A diGiTAl SUbScriPTioN SEE PAGE 18 #294 JUly 2017 We reveal the 10 Rules for better web typography, why you should be using a Service Design approach and how to use CSS Grid Layouts #288 JANUAry 2017 Take a dive into browser-based VR, learn the rules of responsive web type, and discover how the BBC keeps its sites fast Got aN aPPLe DeviCe? Download net’s digital edition for your iPad, iPhone or iPod touch NETM.AG/NET-iPAd (UK), NETM.AG/NET-iPAd-US (US)

  32. cATch UP oN ANy iSSUES yoU’vE MiSSEd by dowNloAdiNG oUr diGiTAl EdiTioNS NETM.AG/NET-bAckiSSUES #292 MAy 2017 Discover how to master mobile design through the golden rules of great mobile UX, plus 15 web APIs set to revolutionise the web #291 APril 2017 Take an in-depth look at the six main trends changing the face of UX, and introduce five steps to great image management #290 MArch 2017 We explore the design secrets driving major brands, share tips for futureproofing code, and dive into Adobe XD’s latest features #289 fEbrUAry 2017 We run down the design tools worth exploring this year, and show you how to get started creating a chatbot experience #286 Nov 2016 Dig into the science behind great design with a look at the five critical steps to planning a site and a deep dive into A/B testing #285 ocTobEr 2016 Explore the new features, tools and libraries transforming the way we use JavaScript. Plus, top tutorials from Generate speakers #284 SEPT 2016 We reveal the top 20 new tools for freelancers, the secrets of killer CSS layouts, and how to build a mobile app prototype #287 dEc 2016 We run down 22 tools and techniques you need to know to boost your efficiency levels. Plus: best practices for great forms PreFer to reaD oN aNDroiD, PC or maC? net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more NETM.AG/NET-GooGlEPlAy NETM.AG/NET-ZiNio

  33. GalleryInspirational sites Joe LoveLock Joe is the founder and creative director at London based Studio Lovelock, an agency offering considered design for creative thinkers. w: t: @studiolovelock Sensational design and superb development site of the Month Css3, TypesCripT, reaCT F37 Foundry When I started out as a digital designer you basically had a choice of Arial, Georgia, Courier or Times New Roman. These days the wealth of web fonts available is almost overwhelming. In among the noise are certain foundries that rise to the top and consistently produce typefaces I find myself looking for projects to shape around. F37 Foundry is one such place and its crisp site will, I’m sure, only go to further its reputation. In its own words: “F37 Foundry set out to design and build a website unlike any other in order to stand out from the crowd and highlight our ever-growing library.” Taking advantage of the latest web technologies it has successfully created a rich innovative experience where users can “move, resize, colourise and even rotate pieces of text. The leading, kerning and tracking of the type can be controlled using familiar menus or shortcuts, allowing designers to fully experience designing with the fonts before purchasing.” While the end product is a smooth intuitive user experience, the build threw up all manner of challenges. “It really felt like we were pushing at the boundaries of what was possible in a web browser,” says F37. The site relies on React, Typescript and CSS3. “CSS3 features enabled us to create the type-tester experience without having to resort to SVG,” they said. “However, some crazy hacks were required to get things like kerning working correctly – there is definitely room for improvement in CSS’s support for advanced typography features!” 40 august 2017

  34. Inspirational sites WebGL, JavasCripT, Css paperpLanes Active Theory has captured the joy of flying the humble paper airplane with clever digital wizardry. “The heart of our concept was to bring people together from all over the world, using the power of the web and Android to create an instant connection to one another,” they say. Using your device, you can fold and throw digital paper planes around the world. Not only can you see your plane glide around the earth with thousands of others, but you can catch one, open it and see where it has been. Each one is stamped when caught, adding to the story of its journey, creating a simple and beautiful way to connect and interact with strangers around the world. Anonymous white arrows, dancing together in the sky – it’s storytelling at its simplest! With websites like this it only takes a subtle detail to jar and you end up with a clunky user experience, so huge credit to the creators for bringing this beautiful idea to life so effectively. Active Theory say: “Our world is rendered in WebGL using the three.js library, taking advantage of features such as instancing and WebWorkers to calculate and render thousands of planes flocking around the globe.” Active Theory is an innovative and experimental digital agency based in Venice, California. It isn’t difficult to see that it has a playful approach to web interaction – its website is full to the brim with digital experiences. It has an inspirational approach to web design and user interaction. august 201741

  35. GalleryInspirational sites JavasCripT, Css, hTmL magnum photos Magnum Photos is, to my mind, the definitive photography agency. Formed all the way back in 1947 by Henri Cartier-Bresson, Robert Capa, George Rodger and David Seymour, Magnum Photos has been home over the years to almost all the big names synonymous with documentary photography. Many years ago, it was these striking black-and-white images I discovered in a school library book (remember those?!) that stoked my creative fires and in some small way guided me towards a design career. If you have a soft spot for eye-catching perfectly composed photography this is the site for you, with everything from a fresh perspective on current events through to a vast archive of iconic images. The visual design, reminiscent of traditional print, is restrained and elegant with clean generously kerned typography and enough white space to let the photography shine. The navigation is unfussy, with subtle little touches that all combine to create a truly sophisticated experience. 42 august 2017

  36. Inspirational sites JavasCripT, Css, Wordpress 19h47 I see a lot of portfolio sites so it’s always a real pleasure to come across one that grabs my attention. Jérémy is a freelance front-end developer from France and he’s created a wonderful first impression of his skill set. I’m immediately drawn to the simple layout, clean type and the minimal use of colour. The user journey of the site is very simple; everything I want is readily available and I never get lost. The uncluttered design of the site works well with the playful interactive elements that keep me exploring longer than I perhaps normally would. At times these bits of animated interaction can feel slightly gimmicky and get in the way of the content. But, when it’s been done well however, it keeps the user engaged with the content and it leaves a long-lasting impression. The work itself is neatly presented and clearly explained, clearly showing his skillset. Overall it makes for a very well-thought-out portfolio site that is a pleasure to explore and leaves a strong lasting impression. In Jeremy’s own words: “I think I have succeeded in achieving my goal: find a nice balance between design, user experience and technique.” august 201743

  37. GalleryInspirational sites “A wonderfully lucid digital experience that stays true to Dada” DOUG KERR, ART DIRECTOR AND GRAPHIC DESIGNER STUDIODOUG.CO JavasCripT, Css, hTmL dada-data Every now and then you see something that ticks all your design boxes.It’s a bittersweet moment of appreciation of everything about a design marred by the disappointment that you didn’t create it. My discovery of the website by Canadian design outfit Akufen was one of these moments. The combination of texture, photographic collage and expressive typography perfectly captures the essence of Dada. The playful interactive elements and unconventional navigation would normally be a negative, yet in the context of an anarchic art movement they make perfect sense. Beyond the design are the ideas behind the content. Akufen describes Dada-Data as “a living, viral, vibrant, tribute, riddled with diversions, self-destruction, derision, and anchored in our time – just as Dada was at war against his.” Examples of this are the ‘Dada-gram’ that lets you insert your own photos into a Dada collage and the ‘Dada-block’ browser plugin that replaces internet ads with genuine Dada slogans. There’s also a wealth of fascinating content that explores the cultural and historical significance of the movement and showcases the work of some of the key players. In summary, if you’re keen on a bit of anarchic collage but don’t know too much about Dada then I can’t recommend this site from Akufen enough. 44 august 2017


  39. Sublime design & creative advice Design This monTh FeaTuring... Challenge This month... schools aaron MCalinDen Aaron is an illustrator, and he is studying interaction design at Belfast School of Art. w: t: @aaronmcalinden Profiles Christopher Dowson Christopher is a freelance designer. He currently operates as Dowson Design Co. w: t: @madebydowson Profile We talk to developer Silvio Paganini about his varied career and how he’s making life easier for digital nomads everywhere 50 Matthew hart Matthew is a senior designer at Oxford-based creative agency One. w: t: @oneltd Brief The challenge this month is to design a website for a fictional school. It could be a state school or a fee- paying school that’s competing to attract students. We want you to consider how your design can convey the values and priorities of the school. How we built Spacecraft Digital explains how it turned Birmingham City Council’s underwhelming web presence into a responsive Webby nominee 56

  40. Design challenge 6 5 3 1 2 4 AAron McAlinden Yuni A school that exists entirely online My Month what have you been doing this month? Sunshine is rare in Northern Ireland; when possible I have been outdoors while working on some illustrations and UI design for university projects. close uP What could a school be? Must it take place during normal school hours? Does it even need a building? Schools of the future meet learners in spaces that are comfortable to them, often in a mobile environment. Too few schools equip their students with the skills they need to succeed in their chosen industry. Yuni rethinks what a school might be, meeting learners where they choose to learn and transcending barriers many face when pursuing an education. It offers a suite of online modules delivered as screencasts and podcasts, tailored to learning in the here and now. Yuni translates across devices, putting learning in the user’s hands. The dashboard enables users to access the module materials they need, track progress, manage time and receive tutorial support. An engaging interface enhances the learning experience, encouraging eager minds to consume content that is useful to them. (1) A sidebar with a profile displays the user’s enrolment status, with a progress bar to keep them informed on their progression. (2) A navigation menu within the sidebar allows users to easily search through course information. Users can review course timetables, grades and achievements, build a portfolio of works developed throughout the course, receive tutorial support from instructors and participate in discussions. (3) A bright call to action allows users to immediately pick up where they left off, improving efficiency and reducing cognitive strain. (4) Each module is broken down into lessons, reading materials and exercises. All module components have a device cast option. This enables seamless transfer across all devices for flexible, mobile learning. Bright colours used throughout the UI induce a sense of energy and modernity. (5) Data visualisations display daily activity and progress throughout each module. (6) A pop-out media player enables users to seamlessly navigate between screens while continuing lessons. which sites have you visited for inspiration? Instagram and Dribbble mostly. what have you been watching? I recently binge- watched Westworld and revisited some cult classics: Back to the Future part II. Also Better Call Saul. what have you been listening to? Foy Vance, Ray LaMontagne and Design Details podcast. august 201747

  41. ShowcaSe Design challenge 2 1 3 4 christoPher dowson MonarChY house A site designed to be friendly to parents and easy-to-update for teachers My Month what have you been doing this month? Playing with my son and making websites (but mostly overhauling old ones). close uP Monarchy House is a fee-paying school based in rural Derbyshire. As such, the website is aimed squarely at the parents who will be making the decision to send their children to the school (and paying for the privilege). Student communication is handled through their own portal. I have dealt with a lot of teachers over the years (including my mother, brother and mother-in-law!) and I know how little time they have to keep things up to date, and so the site is designed to be as low-impact as possible; with the layout based around a straightforward content management system being used for day-to-day tasks. This simplicity it key, I believe, in engaging users whose attention might be in several places at once. School websites can feel cold and corporate, so I purposefully chose a warm, friendly colour scheme of fairly neutral colours. (1) Student login – the main site is designed for parents, and so all student communications are conducted through their own student portal. This will include being able to submit assignments digitally, download correspondence, permission slips, and any other such forms they might need. (2) Term dates and contact details are two things most parents want to know right off the bat, and so they are quite literally the first things to load. (3) The school sets out its intentions clearly and boldly, with a link through to open day information to funnel users to the intended action – registering to attend an open day. There’s no hard sell here, as the target market is made up of well-paid professionals who can spot that kind of tactic, and so they need to be eased in gently. (4) A wholly positive, short welcome from the headteacher is designed to put parents at ease and nudge them towards downloading a prospectus as a secondary outcome if they’ve made it past the open days link above. which sites have you visited for inspiration? I see where Google takes me. Curated collections like Pinterest are a bit stale. I like to be surprised! what have you been watching? Riverdale, Catfish and Bob’s Burgers. I also finally got my wife to watch Dredd :D what have you been listening to? Chvrches, Passenger, Gogol Bordello and Memmaker. 48 august 2017

  42. Design challenge 5 2 3 1 4 MAtthew hArt warthogs sChool of MagiC & MYsterY A website that breaks away from the traditional style of design for schools My Month what have you been doing this month? I’ve just started working part-time so that I can spend more time being a dad. I seem to be dabbling in a bit of everything at work at the moment – brand, web, print and illustration. close uP School website design, particularly in the independent sector, is becoming increasingly generic. Over and above showing glossy photos of school facilities and happy smiling students, how do you really stand out and convey the difference your school can make to a child’s future? We approached this design challenge by asking what would a certain well-known school of witchcraft and wizardry do? This led us to the idea of a magical ‘Student Fortune Teller’- themed website. Here prospective parents could enter their child’s details and watch how their future journey through the school might unfold. Ultimately, it would indicate to the parents what their child would be likely to achieve by the time they leave the school, aged 18. With some clever UX design, and using a mix of manually inputted and exam results data, we could make this work for muggle schools too. (1) The user starts their journey by entering key details about their child (name, age, interests etc) as well as creating a personalised avatar to represent their child. (2) Visual design is used to emphasise the sense of undertaking a ‘magical’ journey with multiple parallaxing layers to add extra depth and movement. (3) Scrolling enables parents to follow their child’s journey from prep school all the way to senior school and sixth form – with both the avatar and visual scenery changing to reflect the school level. (4) Parents face decision points at key stages of the journey where they can explore different avenues of the school and what it would mean for their child’s future (which subjects to focus on, where would that lead). (5) At the end of the journey, the Student Fortune Teller uses manually entered data, along with decision tree data, current exam results and leavers’ destinations data to make a prediction on what the future holds for the student if they attend Warthogs. which sites have you visited for inspiration?, why. design, what have you been watching? Airplanes and ducks in the park. what have you been listening to? Mac De Marco, Shabazz Palaces and a heap of old soul stuff. august 201749

  43. ShowcaSe Profile Profile Silvio Paganini The developer tells us about a career that’s brought him from São Paulo to London, and how he’s making life easier for digital nomads Born in São Paulo, Brazil, but based in London for the past nine years, Silvio Paganini cut his teeth on Macromedia Director and has been working as a developer since 2001, with big-name companies such as Google, Disney and Sony among his clients. He’s been running FLUUUID (, a creative collective, since 2015, and is currently starting up a service to help digital nomads find inspiring workspaces, all while putting in time as an FWA judge. We caught up with Silvio to find out more about his life and work. Can you tell us about your background? I started working in media from a very early age as a Macromedia Director intern, in a small studio back in 2001 where I had the opportunity to learn a bit of Lingo and ActionScript 1.0 and 2.0. In 2003, at the age of 17, I started my BA in Technology and Digital Media at PUCSP – a renowned university back home. During my first year at university, I managed to get a couple of freelance projects at TV1 Digital and Rapp Digital as a Flash developer. Freelancing taught me a lot; I developed interactive microsites and banners, interactive kiosks and developed CD-ROMs among other stuff. It was all essential for what the future was holding for me next – a job as a Flash developer at one of the best agencies around, JWT. There I spent two and a half 50 august 2017