FREe! 37-page ebook
Complete prototyping chapter from The Mobile Frontier
The beginners’ guide to Git Track a project with Git version control
The voice of web design
Issue 270 : Summer 2015 : net.creativebloq.com
Better hybrid apps in 10 steps
Build native experiences with web technologies Project
6 top methods to detect and manage screen rotation
Welcome
Welcome
editor’s note
Leaving employment behind and going it alone is a big step. Sure, there are risks involved and the freelance lifestyle isn’t for everybody, but some people wouldn’t have it any other way. The benefits can be massive – and who wouldn’t want to be their own boss? So, if you’re thinking of making the plunge, don’t miss Yaron Schoen’s pros and cons of freelancing on page 68. And if you already are a freelancer, Yaron’s feature provides a ton of takeaways to help you become even better. Elsewhere this issue, there are tips for landing big clients, how to get paid, how to be better at networking and more. We also hear from people who have taken it one step further and set up their own
company. We hope you’ll feel inspired and ready to kick that freelance gig into full speed. And of course we also have another fantastic freebie for you: this issue comes with a free digital copy of the complete 37-page mobile prototyping chapter of Rachel Hinman’s The Mobile Frontier – A Guide for Designing Mobile Experiences, courtesy of Rosenfeld Media. Turn to page 102 for details on how to get your copy. Enjoy!
Oliver Lindberg, editor oliver.lindberg@futurenet.com @oliverlindberg
Featured authors Yaron Schoen
James Miller
K eav y McMinn
Dan Goodwin
Yaron is a product designer based in Brooklyn, New York. From page 68 he discusses the pros and cons of freelancing, to help you make the jump w: yaronschoen.com t: @Yarcom
James is a lead creative technologist at AnalogFolk. From page 76 he lists 10 tips to give you the best results when developing hybrid apps w: james-miller.co.uk t: @jimhunty
Keavy is a software developer working at GitHub, and an Ironman triathlete. On page 104 she presents her beginners’ guide to Git w: keavy.co.uk t: @keavy
Dan is the UX director at fffunction. On page 28 he explores how UX professionals need to adapt when designing for the Internet of Things w: bouncingdan.co.uk t: @bouncingdan
summer 2015 3
@netmag
Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 /netmag +netmagazine flickr.com/photos/netmag netmag@futurenet.com
net.creativebloq.com
Editorial
Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Mike Brennan mike.brennan@futurenet.com, Acting art editor Rebecca Shaw rebecca.shaw@futurenet.com, Designer Rich Carter richard.carter@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Deputy commissioning editor Sammy Maine sammy.maine@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com
Editorial contributions
Tim Badaczewski, Tanya Combrinck, Gene Crawford, Michal Csanaky, Lauren Currie, Jarrod Drysdale, Dan Goodwin, Bruce Lawson, Jérôme Lecomte, Melody Ma, Barry McGee, Keavy McMinn, James Miller, Anton Mills, Peter Nowell, Ashley Porciuncula, Jem Roberts, Yaron Schoen, Christian Senior, Jeff Sheldon, Caleb Sylvest, Ryan Taylor
Art contributions
Ben O’Brian, Ben Mounsey, Luke O’Neill, Noah Purdy, Steve Simpson
management
Content and marketing director Nial Ferguson nial.ferguson@futurenet.com Head of content & marketing, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com Group editor-in-chief Dan Oliver dan.oliver@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com Group content manager, creative and design Tom May tom.may@futurenet.com
Advertising Advertising manager Sasha McGregor sasha.mcgregor@futurenet.com Circulation Trade marketing manager Juliette Winyard juliette.winyard@futurenet.com Production Production controller Nola Cokely nola.cokely@futurenet.com Production manager Mark Constance mark.constance@futurenet.com
Licensing International director Regina Erak regina.erak@futurenet.com Subscriptions Phone our UK hotline 0844 848 2852; international +44 (0)1604 251 045 Subscribe to net online at myfavouritemagazines.co.uk
NEXT ISSUE ON SALE 6 August 2015 All contents copyright © 2015 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be reproduced, stored, transmitted or used 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: 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 and other details of products or 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 changes or updates to them. If you submit unsolicited material to us, you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.
We are committed to only using magazine paper which is derived from well managed, certified forestry and chlorine-free manufacture. Future Publishing and its paper suppliers have been independently certified in accordance with the rules of the FSC (Forest Stewardship Council).
Colophon 4
summer 2015
Apps used
Google Docs, Google Hangouts, Dropbox, CodePen, FutureSource, Future Folio, GitHub
paper
COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm
Typefaces
Antonio, Share Tech, Merriweather, Titillium Web
contents Issue 270 : Summer 2015 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Carlos Sánchez used WebGL to uncover the inner workings of Star Wars droid BB-8
clients from hell
17
NEED list
19
BEYOND PIXELS
22
EVENT report
23
Workspace
18
Ugmonk designer Jeff Sheldon tells us the stories behind the objects on show in his home office
One client flies into a rage when his site experiences some unexpected downtime
This month’s objects of desire, including a mesmerising generative art app
A love of craftmanship led Caleb Sylvest to explore the art of bookbinding
Oliver Lindberg reports from beyond tellerrand’s fifth birthday in Düsseldorf
voices Remote culture
No Divide’s Ryan Taylor introduces the idea of remote agencies, and their perks
26 VOICES
The UX of things
28
Make your net work
37
Big Question
38
Dan Goodwin looks at the demands of user experience design for smart objects
‘Super-connector’ Lauren Currie explores the value of building a net of contacts
How do you land the big clients? We asked seven web professionals for their tips
Q&A
41
Kiss Me I’m Polish’s Agnieszka Gasparska on learning lessons and creating magic
6
summer 2015
INTERVIEW
32
Web T-shirt guru Jay Fanelli shares the real story of United Pixelworkers, and explains why getting focused is the key to success
SUBSCRIBE to net and save up to 60%
Take advantage of the New Print and digital Bundle Turn to page 24 to find out more
Contents regular
GALLERY
44
Jeremy Lloyd picks his top websites, including a foodie magazine that takes its design cues from its printed counterpart
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Sarah Drasner, Robert Hoekman Jr, Anna Debenham and Lior Frenkel give advice
Showcase
design Challenge
52
Focus on
57
profile
58
how we built
64
Designers mock up live performance sites
free 37-page
prototyping ebook see page 102
Gene Crawford homes in on RWD
We chat to pro (web) surfer Dann Petty
Clearleft‘s new site for a London borough
PROJECTS Master Screen orientation 84
Jérôme Lecomte explores six ways you can detect and control device orientation
Features
Safeguard users’ privacy
94
Head to head
97
Interactive prototypes
98
Tim Badaczewski looks at how you can protect your users’ personal information
The ultimate guide to going it alone 68
10 tips for Hybrid apps
Yaron Schoen gives his insights into the pros and cons of going freelance, so you can decide if it’s right for you
Hybrid apps are rising in popularity. James Miller presents his 10 top tips for getting the best results
76
Jarrod Drysdale explores how to create a moving prototype using Framer
web standards
103
Git version control
104
Bruce Lawson on HTML manifest
Project
Animate icons with Sketch and SVG
Pattern Lab versus Fabricator
90
Peter Nowell shows you how to design an animated icon using Sketch, SVG and CSS
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
Keavy McMinn presents her beginners’ guide to managing projects with Git
Build a native mobile app 108
Anton Mills explains how to use Facebook’s React Native to build a native application
Accessibility
114
Melody Ma looks at landmark court cases
summer 2015 7
Mail, tweets, posts and rants contact us
@netmag
Paying up Freelance frontend designer and developer Matt Shaw sent a plea for help into the twittersphere after struggling with late-paying clients. We retweeted his question from @netmag, and our followers were only too happy to offer their advice …
@mttshw How do other freelancers deal with late/ non-payers? And how long do you leave it before taking drastic action? @becskr: Two months after bill was due. If they don’t respond, I take it to small claims. @TEDavis: May not help here, but get a contract in place and at least some of the budget up-front before starting. @AndrewPaschall1: Anything that falls outside of the agreed terms in the contract is
8
summer 2015
/netmag
+netmagazine
grounds for collections. #contracts ... use them. @icedgraphics: If it goes over 30 days, they get a new invoice with added 10%, if it then goes another week the site gets suspended. @jannicamorton: We charge 5% after 30 days and after six months hire a collection agency. @wibbleweb: Contract states a percentage increase for non-payment. Try to ensure it’s understood prior to commencement. Second invoice sorts it. @daveymackintosh: I add 1% quoted per working day (max of double price). It’s late after a 28-day period, and after three months it’s a summons.
Generate NYC keynote
netmag@futurenet.com
and development. And if you’re wondering what we are planning for Generate London on 17 and 18 Sept, check out generateconf.com/ london-2015.
COLOUR ON THE WEB We recently published ‘12 colours and the emotions they evoke’ by Jerry Cao on Creative Bloq (netm.ag/ colour1-270). The article explores how colours can be used to elicit emotions, and prompted a comment from Andre Guilherme, who suggested you should also apply colours according to the country and society your design is aimed at, which is a very good point. If you want to read more, we recommend Cindy Li’s ‘Find the perfect
net.creativebloq.com
colour for your website’ (netm.ag/colour2-270), which includes a useful chart showing the geographical relationships between colour and mood, and ‘Colour theory for the web’ by Scott Kellum (netm.ag/colour3-270), which explains how to manipulate colour with Sass.
Correction We mistakenly attributed the wrong bio information to Bryn Taylor (bryntaylor. co.uk), one of the Design Challenge contestants in issue 269. The correct bio should read: “Bryn is a visual designer at service and product design agency Great Fridays. Clients include Mastercard, Vodafone and Paypal”. Sorry, Bryn!
This is the video and transcript from my talk at net magazine’s #generateconf in NYC: I have no idea what the hell I am doing – netm.ag/ frost-270.
Brad Frost, Pittsburgh, US
Thanks for sharing, Brad. This was a brilliant opening keynote and we urge everybody to check it out. It’s essential viewing/ listening/reading, especially if you also feel overwhelmed in your job and uncertain of the future of web design
Non Payers Cole Henley suggests using emotional blackmail when facing non-payers (netm.ag/reminder-266)
Network THE POLL
What are the top freelance mistakes to avoid? Underselling yourself 40% Modesty will get you nowhere
Not using contracts 18% Cover your back with the right legal paperwork
Poor use of social media 3% To tweet or not to tweet?
Poor time management 15% It’s your responsibility to get organised
No business plan 7% Freewheeling just won’t cut it here
Taking on too much 10% Learning to say ‘No’ is a skill in itself
Isolation 8% Work can suffer from a lack of objective criticism
From our timeline
What’s the worst reason you’ve been given for not getting a job? I was wearing the wrong colour shoes – brown shoes, blue suit. @cole007 Loved the concept but was marked down for not presenting using PowerPoint. *shudder* @gramatter I lost out on a project because I refused to fill out time sheets. @martinbean
I was told I would get bored of the role quickly so they decided to not offer. Nice of them to make that decision for me, like. @danjdavies Because I’m from Middlesbrough! @libwella Your concept is nice but it’s not in our budget! @amarsinhbhagat
Because I couldn’t log in to any websites I was presenting – I didn’t have @keepass handy! @bluewhitew Because I refused NOT to do responsive. @sunscreem I’ve been told I’m too experienced before now. That was a weird one. Surely that’s a good hire policy? @nonswearyphil We had loads of great answers to this question. Check them out at netm.ag/twitter-270
COOL Stuff We learned This month UX tips from Lady Gaga
“Keep YouTube looking shitty”, was Gaga’s advice to Google when she was shown some slick prospective designs for the site. We think there might be something in that: users need to feel they can leave fingerprints, and preserving authenticity has its own value. netm.ag/gaga-270 vital minutiae of UX
Based on the book Microinteractions by Dan Saffer, this article outlines the significance and mechanics of the tiny interactions that users have with your products – such as clicking a button or retweeting something. When there’s feature parity, it’s UX that determines whether customers choose you or the competition. netm.ag/minutiae-270 Empathy is the key
In this interview with Google’s accessibility experts, we learn that over a billion people have some kind of disability, and that empathy and imagination are what’s needed to make our apps accessible to them. The biggest mistake designers make is to try to tack accessibility on at the end – it needs to be part of the process from the start. netm.ag/empathy-270
summer 2015 9
exchange Q&As
Send your questions to netmag@futurenet.com This month featuring... Sarah Drasner Sarah is a senior UX engineer and an interaction designer w: sarahdrasnerdesign.com t: @sarah_edo
Practical advice from industry experts
QUESTION OF THE MONTH
I’m thinking of switching from Photoshop to Mac’s Affinity Designer. Any tips? Carolyn
Robert Hoekman Jr Robert is a UX strategy consultant and is currently writing a book on how to become a UX leader w: rhjr.net t: @rhjr
Anna Debenham Anna is a freelance frontend developer based in London w: maban.co.uk t: @anna_debenham
Lior Frenkel Lior founded nuSchool, which helps freelancers with business w: thenuschool.com t: @hamutsi
Design options Affinity Designer is one of the hot new design tools on the market (image: Ben O’Brien)
SD: I haven’t tried Affinity – it looks good! If you’re excited about a new technology, by all means, use it! But keep in mind there are only so many hours in the day. I’ll often wait to see if a community surrounds a new technology before I invest time learning it. Sometimes tried-and-true methods are best for working in production. I’m completely OK with using decade-old Photoshop and Illustrator for the bulk of my projects. I found an article that aligns with my thoughts on this: netm.ag/boring-270. [There are some great video tutorials for working with Affinity Designer at netm.ag/affinity-270, or pick up a copy of issue #269 for a tutorial from Dale Cook: netm.ag/269-270.] Freelance
Going it alone I’d be interested in knowing everything you’d need to do to transition from permanent to freelance.
Mark Stickley, London, UK
AD: Here are three things you can do. First, build up a financial buffer so you could pay your bills for at least three
10
summer 2015
months if you got no work at all, or if a client took weeks to pay you. Second, make friends with other freelancers – often they’ll recommend you for work when they’re too busy. Third, hire an accountant. They’ll help you get set up, and give you advice on making the transition to freelance. [For more advice on going freelance, flip to page 68.]
Q&As
3 simple steps Can you recommend any good articles or tutorials to master SVG? Mau-mau, New York, US
SD: There are a few really great resources to get you started with SVG.
Getting paid Pay me ... or else! (netm.ag/pay-269) and Why Won’t you pay me? (netm.ag/why-270) from nuSchool give some guidance on what to do if a client decides not to cough up
Finance
Last resort I’ m having trouble getting paid. Small claims court seems pointless – can I get my money or should I give up?
Gordon Bretz, Gloucester, US
LF: That sucks! First, talk before you shoot – send multiple reminders to everyone at your client’s office. Make sure they know they haven’t paid. Then send a letter from a lawyer – even if you don’t intend to sue. It might scare them. And then there are a few ‘inappropriate’ methods which I’ve detailed in my book Pay me … or else! like airing the dirty laundry in public or taking the website off air until you’re paid (grab the free ebook at netm.ag/pay-269).
Very recently, Eric Meyer came out with a new resource that enables you to convert bitmaps to SVGs. Flaming Shame (netm.ag/shame-270) turns raster images into SVG files by remapping, pixel by pixel, on to the coordinate system. It then finds sections of repeated pixel information and combines them to make the file smaller – a process similar to GIF compression. This is a very new technology, but it looks promising. I haven’t worked with it in-depth yet, but I anticipate this kind of automation would work well on smaller, similarly coloured images rather than large information-dense bitmaps.
From beginner to master
If you’d like to take the leap from beginner to master, everything you might want to know – and then some – is covered in this excellent ‘Compendium of SVG Information’ by CSS-Tricks (netm. ag/SVG1-270).
Using SVG
That said, my personal favourite article for getting up-and-running with SVG is ‘Using SVG’, also by CSS-Tricks (netm.ag/SVG2-270).
Freelance
Sole trader SVG
Transforming bitmaps Is it possible to turn a bitmap image into SVG, to take advantage of its fluidity?
Asif Raeen, Agra, IN
SD: The method you should use has a lot to do with the image itself. I typically use a tool like Illustrator to trace the image with custom tracing presets or by hand. If it’s a detailed photo with a lot of information, it’s better to just serve an optimised JPEG, PNG or GIF. There are a number of ways to create a responsive image that scales, without multiplying source file downloads – e.g. a <picture> element with a polyfill.
What are the benefits of being a sole trader as opposed to a limited company?
Glen Wheeler, Newcastle, UK
AD: Being a limited company means more paperwork, but you have the option of hiring employees, and there can be tax savings compared to a sole trader if you’re earning over a certain amount a year. Your business is a separate legal entity and personal assets like your home are protected against company debts. Some companies won’t do business with sole traders, which is what eventually prompted me to make the switch. It’s always best to talk to an accountant about your options.
tHE MUST READ
A must-read is Sara Soueidan’s ‘Understanding SVG Coordinate Systems and Transformations’. This threepart series explains viewbox, and other parts of the SVG coordinate system and SVG transforms. These lay the foundation for so many other whys and hows of working with SVG, so that you know exactly what you’re manipulating.
summer 2015 11
exchange Q&As UX
Freelance
Hover vs Drop-down
Paperwork problems
Main navigation: drop-down on click or on hover?
I’d like some advice about paperwork (proposals, quote, invoices) please!
RH: First, make sure you ask the question: should the hidden navigation be hidden? Drop-downs can have lower usability than exposed navigation. They can also get in the way by opening during unrelated mouse movements. Hiddenbut-available nav, however, can encourage quicker discovery. If you’re sure about the drop-down, a delayed hover (around a quarter of a second) is a solid solution – for desktop anyway. On mobile, people have to tap no matter what. Go back to my first sentence.
AD: Paperwork might be the suckiest thing about running a business, but it’s essential to its success. To keep track of estimates and invoices, I’m a big fan of FreeAgent (freeagent.com) – I use it to log my timesheets and expenses, and it works out how much a client owes me and puts it into a pretty invoice. For writing contracts, I highly recommend Andrew Clarke’s Contract Killer (netm.ag/killer266), which I’ve adapted and used with my clients. They all comment on how easy to understand it is.
Freelance
UX
Making a proposal
working together
How should people approach proposals and spec documents for private clients?
In what ways do you think content strategy and UX can work together?
AD: Before sending an estimate based on a proposal, I like to sit down with the client and go through the spec together to discuss how I’d approach building each bit, and anything I have concerns about. Sometimes requirements that hadn’t been thought of will emerge, or they’ll realise others aren’t important. Also, some things may look straightforward on paper but when you talk to the client about how their system works, you’ll realise it’ll take a lot longer, so it’s good to learn that up-front.
RH: Content strategy used to be the purview of the UX professional. It was tough. Tedious. Time-consuming. Then some smart people came along and turned it into a profession. Problem is, I have yet to work with one of them – I’m still doing it myself. But there’s an answer buried inside this origin story: content strategy is absolutely part of a user’s experience, whether UI writing, blog posts, product descriptions, or something else. If you can find a content strategist, start collaborating. Vision and content are best friends.
Michael Häne, Zürich, CH
Dona Bella, Jakata, ID
On paper Andrew Clarke’s Contract Killer is a handy guide for writing contracts
Freelance
It’s In the name
Tom Jepson, Nottingham, UK
Robert Mills, Cardiff, UK
Finance
12
summer 2015
Phil Ward, Adelaid, AU
AD: If you’re thinking purely about client perception, I don’t think there’s a whole lot of difference. I prefer to pitch myself as a freelancer rather than a business because it feels more friendly. After all, clients are asking for me rather than my company. I really like Harry Roberts’ approach to this – he doesn’t hide behind a company name and it’s very clear who you’ll be working with (netm.ag/roberts270). His ‘hire me’ page is fantastic. UX
Measuring success What method do you use to measure the success of an online enterprise platform’s visual revamp?
Negotiation tips
Maryam Kazerooni, San Francisco, US
What methods do you recommend for negotiation?
RH: There’s no such thing as a visual revamp that doesn’t affect UX. Change a visual, you change a behaviour. Hence, measure the same way you measure any other design change: stick tracking code on everything, let the dust settle, and see how it does. Tweak and revise as needed, using evidence as your argument. Before all that, though, run the new design through iterative usability tests (revise between each session) to get it right before you get it wrong. Roll out the changes over time for a more controlled reaction.
Leon Brown, Liverpool, UK
Hover option Target rethought its on-hover desktop nav for mobile, offering users a category view
Is there a difference between being a freelancer as opposed to a sole design business operator?
LF: The best and yet most under-used method is simply to get into the other side’s shoes. They have interests and priorities that might be different to yours, but understanding those will help you come up with good alternatives. Negotiation should never be a game of power. Quite the opposite – you want to come up with creative solutions in which both sides win. More like relationships, less like Game of Thrones.
ENJOYED READING THIS MAGAZINE? Subscribe and make great savings at www.myfavouritemagazines.co.uk