net -julkaisun Summer 2015 -irtonumeron sisällysluettelo

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…

What we think (1) Unable to afford the fonts you want? With Fontstand, you can try before you buy for a fraction of the price (fontstand.com). (2) This generative art app was created by Yuri Vishnevsky and provides a balance of inspiration and relaxation (weavesilk.com). (3) This ebook from Richard Muscat guides you through metrics and misaligned focus to help you create the ultimate online sales experience (netm.ag/muscat-270). (4) Gathering together some of the best names in the industry, Grow will guide you towards a sustainable business (shopify.com/grow). (5) Baffled by the new version of JavaScript? Dr Axel Rauschmayer has put together this book on the all-new ECMAScript 6 (exploringjs.com). (6) Being a freelancer can present some new challenges – thankfully Harpoon is here to help you manage the financial…

A little while ago, a smoke detector was released onto the market that promised to revolutionise smoke detection and provide a beautiful user experience. I personally have never had any particular problems with the UX of my smoke detectors: they beep when there’s some smoke or when their battery needs changing, and that’s pretty much all I need them to do. But some people obviously thought that some folks would like a smoke detector that talks to them in a calm voice and lets them wave their hands (rather than a tea towel) at them to shut them up. I don’t have a problem with that either. Things didn’t go super-smoothly for the smoke detector with the beautiful user experience when it first launched. There were some problems with the…

MIKE MONTEIRO Co-founder, Mule Design Studio muledesign.com You land the big clients by taking care of the small clients. You learn how to handle the big decisions by handling thousands of little decisions. And you win the big arguments by not giving up on the little arguments. Your career is cumulative. You learn lots of little things along the way that help you get better. Slowly. Sometimes painfully so. You do all that and when the big client shows up they’re not big. They’ve become the right size. STEFAN HARTWIG Partner, Electric Pulp electricpulp.com You start small and build up. I don’t know anyone who landed meaningful work for a big client without first proving they know what they’re doing at a smaller scale. Pulling off notable projects for small…

Sublime design & creative advice PROFILES ASHLE Y PORCIUNCULA Ashley is a UX designer from Silicon Valley, living in London and working with startups w: ashleyporciuncula.com t: @ashleymarinep CHRISTIAN SENIOR Christian lives by the sea, and designs and develops under the guise of OBI Creative w: obicreative.co.uk t: @senoir MICHAL CSANAK Y Michal recently left his job as a senior QA to become a freelance product designer w: csanaky.com t: @airpoint BRIEF We want you to come up with an exciting design for a new, subscription-based entertainment site. It could focus on gigs, plays or comedy shows, perhaps with the option for members to upload their own audio and video of live performances.…

What’s on your desk? Surf wax, water bottle, a yo-yo, Epicurrence sticker, Nixon white ceramic watch, 15" MacBook Pro, large Wacom tablet, two Thunderbolt displays, wireless keyboard, a photo of my daughter and a Post-It note that says ‘Go outside.’ What little things make your life worthwhile? Apps: Twitter, Instagram, Facebook Audio: Sam Smith, Manchester Orchestra, Band of Horses Reading: net, Surfer, the Bible What do you have on the walls? A signed Rob Machado surfboard, which was a gift from Nixon, calling me their ‘White Knight’. I’ve also got a surfboard I shaped for my daughter, and my first 5k medal from the Salt Lake City marathon. What will you do for lunch? Most likely a Sambazon acai bowl, but if not, chicken tikka masala, or a salad. What…

ABOUT THE AUTHOR JARROD DRYSDALE w: studiofellow.com t: @studiofellow job: Author, design consultant, digital product maker areas of expertise: Web design, web app UI, frontend code, content marketing, CRO q: who’s your web hero? a: Spider-man (serious answer? Jason Fried) Exclusive offer! 20% OFF FRAMER Visit framerjs.com and enter coupon code FRMR-NET at the checkout Offer expires 30 September 2015 RESOURCE If you’re having trouble getting started with this tool, try the Framer tutorials. The crash course in CoffeeScript is excellent: framerjs.com/learn/coffeescript The reasoning behind design prototyping isn’t new – it’s the same as all the buzz about designing in the browser. When you see a design in its real context, it’s totally different. You make better decisions when you don’t have to make assumptions about how an interface will function and…

YARON SCHOEN 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 MILLER 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 MCMINN 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 GOODWIN 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…

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…

Mau-mau, New York, US SD: There are a few really great resources to get you started with SVG. 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). 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…

GET OUT OF THE HOUSE “Get out early in the morning and fake the commute time with a short walk,” offers @designorant. @markusfreise suggests mixing it up: “Often I work in my rented office, sometimes in my basement studio. And if I need to get out, in a coffee shop or similar.” GET CONNECTED Supereight Studio’s Matt Hamm says, “shared office space helps me manage my work/life balance much more easily and is a lot of fun.” @designerlab_DK agrees: “Meet new people, get inspired, socialise and most important get new projects through the others...” However, @Youssef__S turns to another source for inspiration, and gets himself into work mode by “summoning the spirits of creativity to work on the design problem.” CLEAR CLUTTER Make sure you clear space, both physically and…

THAT CONFERENCE DATE: 10-12 AUG 2015 LOCATION: WISCONSIN, US Plugged as the summer camp for geeks, this is no traditional tech conference. Sessions on mobile, web and cloud will all take place against the backdrop of a water park. This is fullon nerd family fun. thatconference.com HYBRIDCONF DATE: 20-21 AUG 2015 LOCATION: DUBLIN, IRELAND Two days, 15 speakers, one city. HybridConf will present some unmissable inspirational talks from speakers including Karolina Szczur, Dr Ayanna Howard and Aaron Draplin. hybridconf.net WUTHERING BYTES DATE: 26 SEPT-2 OCT 2015 LOCATION: YORKSHIRE, UK A whole week of amazing technology all set in the heart of the Pennines. The festival organisers are keeping details close to their chests right now, so keep an eye on the website for more information as it’s announced. wutheringbytes.com WEBDEVCONF…

(1) The Web Foundation’s site (webfoundation.org) is a beautifully executed responsive design. However, it places an image as the main element through which users might experience it. (3) The site for VicRoads (vicroads.vic.gov. au), the Australian government motor vehicle service, keeps the two most important things that users are likely to need front-and-centre, no matter which screen width they visit it on. There is an inherent issue with the mobile-first approach to creating websites. That issue is that when we design for the smallest screen size first and scale things up, often we wind up with designs that are boring or ‘dumb’ when they reach desktop screen sizes. The aim of RWD is to deliver the same content, built once, to a vast array of screen sizes. Essentially taking the…

CORDOVA cordova.apache.org The original and most popular open source hybrid app platform. JS APIs give access to the phone’s native functionality. It has a CLI that aids the creation of cross-platform apps. PHONEGAP phonegap.com PhoneGap is an Adobe product built on top of Cordova. The two are essentially the same, but PhoneGap offers additional services, including app-building in the cloud and crosschannel marketing. IONIC ionicframework.com Ionic adds AngularJS to Cordova for business logic and its own UI framework for design conventions. It builds on Cordova’s CLI and adds to it with services like LiveReload to deployed devices. Ionic Creator (creator.ionic.io) allows the creation of apps using its web interface. APPCELERATOR appcelerator.com This offers a single platform for building native and web apps, plus automation testing tools, real-time analytics and BaaS.…

ABOUT THE AUTHOR TIM BADACZEWSKI w: badaczewski.com t: @tbadaczewski job: Friendly neighbourhood web developer, ICF International areas of expertise: RWD, CSS3, JavaScript, C#, security q: who’s your web hero? a: Ben Brown (xoxco.com) – his willingness to share information to push innovation is a model I aspire to Content that must remain private is called ‘Personally identifiable information’ (PII). This is any information that can be used on its own or with other information to identify, contact or locate a person, or to identify an individual in context. The determination of weaknesses comes with some fuzzy logic. We can’t control the security of external networks or the devices users access our apps with, yet we are responsible for any combination of factors that might compromise our apps. In the last…

+ To some designers (including myself), prototyping can sound like an unnecessary step in the design process. We all know that mockups are only an approximation of the real interface. You can design in the browser instead, but changing real software is always slower, especially when you’re working with mobile and native apps. Prototyping is the perfect middle ground between a mockup and a real application. You make decisions about your design based upon how it actually functions, but before committing it to rock-solid production code. Design with real inputs Prototyping allows you to try your design in a real context. View a prototype on your mobile device to try each of your concepts. This gives you more information when it comes to choosing the best one. Experiment quickly You…

ABOUT THE AUTHOR KEAVY MCMINN w: keavy.co.uk t: @keavy job: Engineer, GitHub areas of expertise: Ruby, Rails, APIs, Git q: who’s your web hero? a: Katrina Owen – creator of exercism.io (a great tool for practicing programming exercises), an inspiring speaker and great friend READING For more in-depth learning about Git, Pro Git, a book by Scott Chacon and Ben Straub, is available to download for free at git-scm.com/book/en/v2 If you’ve ever received an email with an attachment entitled ‘about_3_final_2.doc’, you might not realise it, but you’ve already been using a very basic (if hard to use) version control system. There are many benefits to using a more structured system. It solves many problems: How do you name versions of a file? How do you keep track of changes to…

+ A quick run-down of the terms and commands you need to know to master Git version control: Commit – A grouped set of changes, described by a brief message explaining the change Diff – The difference in changes between two commits Fetch – Getting the latest changes, without merging them Git – An open source program for tracking changes in text files GitHub – A web-based Git repository hosting service (github.com) Merge – Taking changes from one branch and applying them to another Pull – Fetching in changes and merging them. If someone else has made changes to work on a remote branch, you may ‘pull’ in those changes Push – Sending your changes to a remote repository, such as github.com. Once you’ve made changes locally, you ‘push’ those…

* CONTACT US @netmag /netmag +netmagazine netmag@futurenet.com net.creativebloq.com 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 grounds for collections. #contracts... use them. @icedgraphics: If it goes over 30…

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 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…

UNA KRAVETS Frontend developer, IBM una.im SPECTACLE This Mac app allows you to quickly move windows around your screen, and you can split your screen between different programs with just a few key-presses. Use it with BrowserSync or LiveReload, and you can write code and instantly see the result on the other half of the screen. spectacleapp.com EMMET Emmet is an incredible plugin for text editors, which enables you to quickly write CSS or HTML via a shorthand syntax and tabbing. It has completely changed the way I write code, and improved my speed and productivity. emmet.io GULP Customisable task runners like gulp are indispensable for frontend projects. Steal my starter environment at netm.ag/starter-270. I use gulp to watch and compile Sass, concatenate and minify my scripts, optimise images, and run…

Let’s for a moment divide everyone who works in the web industry into two groups. People who work for someone else (such as an agency), and people who work for themselves (freelancers). Each group has its pros and cons, and what’s interesting is that often a pro for one group is a con for the other. For example, as a freelancer you can pick and choose the projects you want to work on (pro) but as an agency employee you often just have to work on what is given to you (con). As an agency employee you don’t have to be on the constant lookout for new clients and worry about where your next pay cheque is coming from (pro), whereas as a freelancer you do (con). Wouldn’t it be…

Once upon a time somebody designing an event timetable decided it was a good idea to schedule in ‘networking’ – precise time for attendees to make small talk with strangers who had the potential to advance their careers. We both know this doesn’t work. As a result, the word ‘networking’ has earned a reputation of being awkward, selfish and a bit sleazy. I believe it’s time to change this. What would happen if we spent less time networking and more time making our own net work? Don’t network; connect and make your net work. There is much more to this than simply attending events. The internet means we are in the same room as pretty much anyone we can think of at any given moment. My approach is simple: enthusiasm.…

Sensational design and superb development JEREMY LOYD Jeremy is creative director at Sparkbox, where he designs responsive sites, experiments with the design process and teaches workshops w: jloyd.net t: @jeremyloyd Made by Few is a conference for web makers put on by Arlton Lowry and his team at Few. Each year, they rebrand and redesign the website for the conference. 2015’s rendition is a collaboration between the team and local artist Vincent Griffin (landandshape.com). “He and I went back and forth on direction, colour schemes, design elements, and overall layout for about four months,” says Lowry. “For me, I felt it was important that the website stayed faithful to his artistry and craft. I took what he created and shaped it to fit into my vision for the website.” The…

NYC-based designer and developer Sam Slover and team set out on a mission to document what he ate for 10 weeks, and created an interesting visual look into his diet. “We wanted to tell the story of one person trying to figure out how to make his personal food data more meaningful,” says Slover. “So we took the audience on a journey: what does it mean to track your own food data and what insights can come of it?” The result of his data-gathering is a one-page site that houses a beautiful collection of infographics. “It turns out there was quite a bit of data to design around,” he smiles. “We needed to make hard decisions about which areas to pursue when doing visualisations.” Along with outlining what food was…

@DannPetty INFO Location: San Francisco, CA Designing since: 2000-ish Clients: Google, Medium, Nixon, National Geographic, Airbnb Expertise: Creative direction, product and experience design Accolades: Nixon’s ‘White Knight’, Best Dressed (Moore County High School) West Coast-based creative director Dann Petty doesn’t fit the mould of a traditional web pro. He has a deep-seated fear of being stuck behind a desk, believes payment needn’t always be money, and is known for shaking up the events scene with computer-free, extreme sports-based ‘non-conference’ Epicurrence. We caught up with him to discuss catching waves, his ‘bigger is better’ style and why San Francisco is a Disneyland for designers... net: Let’s kick off with some introductions... DP: All right, aloha! I’m Dann, a creative director, aka pro surfer (web), in San Francisco. When I’m not trying…

BLOGS • Christophe Coenraets (coenraets.org/blog) • Andy Trice (tricedesigns.com) • Ramond Camden (raymondcamden.com) • Jank Free (jankfree.org) – The holy grail of 60FPS • Holly Schinsky (devgirl.org) TOOLS • Phonegap Build (build.phonegap.com) – Build your apps in the cloud • Genymotion (genymotion.com) – Faster Android emulation • Plugreg (plugreg.com) – A resource for Cordova plugins BACKEND AS A SERVICE • Parse (parse.com) – Facebook-owned BaaS • Firebase (firebase.com) – Google’s real time BaaS…

ABOUT THE AUTHOR BARRY MCGEE w: barrymcgee.co.uk t: @barrymcgee job: Frontend developer, Integral Code areas of expertise: HTML, CSS and JavaScript, architecting large-scale frontend builds q: who’s your web hero? a: Tim Berners-Lee. Without him, I’d be sweeping roads! FACT FILE PATTERN LAB FLAVOURS Besides the master Pattern Lab (using PHP and Mustache), there are other variations, including a version using Twig for templating and a version ported to NodeJS (github.com/pattern-lab). ASSEMBLE Fabricator is built on top of Assemble (assemble.io), a static site generator for JavaScript tooling chains. It can also be used to quickly scaffold sites using frameworks like Foundation and Bootstrap.…

+ An important thing to consider is when you should commit, and what you should say. My advice is to commit early and often. It’s good practice, even if working alone, to commit your changes into source control. Keeping commits small and focused provides an easy-to-track documentation of the work. Think about committing each time you pause in your workflow, rather than after a long period. And by long, I mean more than a few hours. I often prefix a commit with ‘WIP’ (for ‘Work in Progress’). It’s also useful to use the commit message to explain the why, not the what. The diff shows the what, but your comment can expand on that to give your co-workers, or your future self, insight into why the change was made. A…

ABOUT THE AUTHOR ANTON MILLS w: antonmills.com t: @antonmills Job: Creative technologist Areas of expertise: Creative technology and game development q: who’s your web hero? a: Rich Davey (aka Photon Storm) and the many who contribute to the amazing Phaser. It rocks View source files here! All the files you need for this tutorial can be found at netm.ag/react-270 RESOURCE Look out for Nuclide. Built on top of Atom, this new development environment is focused on React and React Native, with a wealth of great features: nuclide.io Native mobile app development is a difficult environment. There are different operating systems, a vast array of handset manufacturers and a huge range of screen resolutions to build for. Thankfully, Facebook has released React Native – a framework designed to extend the React…