Page 1

TRIAL FREE! ONE-MONTH WITH Unlimited access to more than 2,000 creative online courses

VISUALISE DATA WITH LEAFLET

DESIGN A SITE FOR A GLOBAL AUDIENCE

TAKE ADVANTAGE OF ES6 TODAY!

Build interactive maps with this JS library

Four top tips to build the best experience possible

Try out the best new JavaScript features

The voice of web design

Issue 276 : February 2016 : net.creativebloq.com

PROJECT

Create customised animations in Foundation 6

We review the top prototyping tools


NEW YORK 22 APRIL 2016 Learn cutting edge CSS, JavaScript, user experience and web performance techniques and much more!

CAMERON MOLL

HANNAH DONOVAN

TIM KADLEC

JAMES WHITE

DESIGNER AND AUTHOR

PRODUCT DESIGNER

WEB TECHNOLOGY ADVOCATE

VISUAL ARTIST AND DESIGNER

cameronmoll.com

hannahdonovan.com

timkadlec.com

signalnoise.com

TICKETS ON SALE NOW

www.generateconf.com


Welcome

WELCOME

EDITOR’S NOTE These are stressful times, and – reflecting over the last year – it’s hard to remember the good news. For me personally, one of the most impactful talks of 2015 was Eric Meyer’s ‘Designing for Crisis’, and we’re thrilled that Eric has written an essay on the topic for this issue (page 28). It’s a wakeup call: we tend to design for the perfect situation, but in reality this is rare. All sites will at some point be accessed by people in stressed situations, who can barely focus on your awesome design and beautifully crafted copy. The reason may be a personal crisis – as in Eric’s case – or a political one. Our work can help people in need; it can also enable those who don’t

have a reliable internet connection and empower or protect those in danger. Let’s use our skills to make a difference. This could mean ‘rickrolling’ ISIS as Anonymous does, being more empathetic in our work or taking on projects for social good. This issue comes with a one-month trial to Skillshare, which gives you access to more than 2,000 creative online courses (go to netm.ag/skillshare to redeem). Why not start with Noah Scalin’s course on socially conscious design (netm.ag/ designrebel-276)?

Oliver Lindberg, editor oliver.lindberg@futurenet.com

FEATURED AUTHORS LEVIN MEJIA

ANDY BUDD

ERIC ME YER

SARAH DRASNER

Levin is a designer advocate at Shopify and creator of the Mighty Note app. From page 68 he reviews the 10 best web design tools for 2016 w: www.fourandthree.com t: @fourandthree

Andy co-founded Clearleft, one of the first UX agencies in the UK. From page 76 he explores the role design fiction is starting to play in our industry w: www.andybudd.com t: @andybudd

Eric is an author, speaker and co-founder of An Event Apart. On page 28 he examines the needs of users teetering on the edge of panic w: www.meyerweb.com t: @meyerweb

Sarah is a senior UX engineer at Trulia and a staff writer for CSS-Tricks. She curates our gallery this issue, starting on page 44 w: sarahdrasnerdesign.com t: @sarah_edo

february 2016 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 Rebecca Shaw rebecca.shaw@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Deputy commissioning editor Sammy Maine sammy.maine@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com, Managing editor (Creative Bloq) Craig Stewart craig.stewart@futurenet.com, Content manager (Creative Bloq) Kerrie Hughes kerrie.hughes@futurenet.com

EDITORIAL CONTRIBUTIONS Nicolas Bevacqua, Jina Bolton, Andy Budd, Peter Cook, Sarah Drasner, Brian Graves, Phil Hawksworth, Scott Jenson, Sam Kapila, Geoff Kimball, Amin Lakhani, Joe Leech, Conny Liegl, Wez Maynard, Levin Mejia, Eric Meyer, Rachel Nabors, Simon Owen, Clay Pruzinsky, Harry Roberts, Todd Siegel, Abigail Sinclair, Courtney Symons, Heidi Valles, Emma Jane Westby

ART CONTRIBUTIONS Ben the Illustrator, Richard Jenkins, Ben Mounsey, Jamie Schildhauer, Peter Tarka (Folio Art)

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 Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com SUBSCRIPTIONS Subscribe to net online at myfavouritemagazines.co.uk

NEXT ISSUE ON SALE 21 JANUARY 2016 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

february 2016

APPS USED

PAPER

TYPEFACES

Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, CodePen, Future Folio, GitHub

COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm

Antonio, Share Tech, Merriweather, Titillium Web


Issue 276 : February 2016 : net.creativebloq.com

FEED

FEED

SIDE PROJECT OF THE MONTH 16 Una Kravets’ open source library recreates Instagram effects in CSS

EVENT REPORT

19

WORKSPACE Courtney Symons invites us into Shopify’s enviably eclectic, personalised HQ in Canada

17

Find out what went down at beyond tellerrand Berlin, from Oliver Lindberg

BEYOND PIXELS

18

Simon Owen sings the praises of DigiHike; a walking group for techy types

NEED LIST

22

Web stuff we want, including a computer you can buy with your loose change

CLIENTS FROM HELL

23

A designer comes face to face with a client with an unhealthy fear of fraud

VOICES IS WEB DESIGN DEAD?

26

As the web hits its mid-20s, Conny Liegl wonders if web designers are still needed

DESIGNING FOR CRISIS

28

Eric Meyer implores web designers to consider the worst-case scenario

MENTORING

37

Joe Leech on how mentoring could help close the skills gap in the web industry

BIG QUESTION

40

Q&A

6

february 2016

INTERVIEW

32

Cameron Moll discusses why tools aren’t that important, and explores the latest headache facing the web industry: Unified Design

38

What was the biggest lesson you learned in 2015? We asked the professionals

Maya Benari explains how she helped revolutionise government sites in the US

VOICES

SUBSCRIBE TO NET

TAKE ADVANTAGE OF THE PRINT AND DIGITAL BUNDLE

AND SAVE UP TO 63%

Turn to page 24 to find out more Want the Pro package? Turn to Page 51


Contents

REGULARS

REGULAR

44

GALLERY

Sarah Drasner reveals her favourite new sites, including Active Theory’s WebGL masterpiece for gaming franchise Halo

8

NETWORK The latest mail, tweets, posts and rants

10

EXCHANGE

Harry Roberts, Jina Bolton, Scott Jenson and Emma Jane Westby share advice

SHOWCASE

FREE ONE-MONTH

Designers mock up theme park websites

SKILLSHARE TRIAL

Sam Kapila explores effective onboarding

52

DESIGN CHALLENGE

57

FOCUS ON

SEE PAGE 96

58

PROFILE Creative playground Hello Monday

64

HOW WE BUILT

A dendrochronological journey for Subaru

PROJECTS 84

FOUNDATION 6

Geoff Kimball shows you how to use Foundation 6 to create custom animations

FEATURES 10 BEST TOOLS FOR 2016 Levin Mejia counts down the top prototyping tools you should be trying out in the coming year

90

PROTO.IO Todd Siegel explains how to use Proto.io to build a moving prototype

WHAT IS DESIGN

68 FICTION?

76

Andy Budd looks at how designers are drawing inspiration from sci-fi to create the products of the future

94

GLOBAL SITES

Amin Lakhani shares tips for building a site that works for users all over the world

97

HEAD TO HEAD Phil Hawksworth on Jekyll versus Harp

MAPS WITH LEAFLET PROJECT

CREATE STORYBOARDS FOR YOUR ANIMATIONS 104 Rachel Nabors considers how to use storyboards to plan and communicate animation ideas

EXCLUSIVE VIDEO TUTORIALS! Look out for the video icon in the tutorials for exclusive screencasts created by the authors

98

Peter Cook explains how to build an interactive weather map with Leaflet

103

WEB STANDARDS Brian Graves explores CSS level 4

108

ES6 Nicolas Bevacqua walks through the latest JavaScript language features

ACCESSIBILITY

114

Heidi Valles on keeping things consistent

february 2016 7


Mail, tweets, posts and rants CONTACT US

@netmag

/netmag

+netmagazine

netmag@futurenet.com

net.creativebloq.com

net: Great work, Keenan! Thanks for sharing this with us. If you want to learn more about sass, the official newsletter is a good place to start: sassnews.com.

SKILL SHARE

SASS FRAMEWORK Myself and a colleague have built a frontend Sass framework that I wanted to share with net readers. It’s called Concise (concisecss.com). We put a lot of hard work into the framework and we’re trying to spread the word. Check it out!

Keenan Payne, CA, US

On Twitter, Google UX designer Rachel Inman asked her followers if they thought it was beneficial for designers and engineers to sit together (netm.ag/twitter276). Here’s what they had to say:

@ItsTheSeff Yes. Quicker feedback loop. Faster collaboration. Effective discussion. @MartinJoiner X-skills for all ... Plus great solutions come easy when the people building it are the people using it.

Flexible layouts Last issue, Wes Bos explored how the Flexible Box Layout module could be used to tackle complex page layouts

@jdrydn Our designer sits with us, and it has lots of ups and a few downs ... poor CSS, complaining about layouts, and so OCD about the colours! @Nbbirds Yep. It’s like having two heads – one for design and one for coding!

BIG Q MIXUP In our Big Question last issue (‘Is SEO still relevant in 2016?’) a mix-up meant Sam Crocker’s answer was placed with Kate Dreyer’s headshot. Apologies to Kate and Sam. Here’s what Kate really thought:

FLEXBOX SUPPORT

Sass alert Sass has a very active and enthusiastic community surrounding it. Check out its website for links to more resources

8

february 2016

On Wes Bos’ tutorial ‘Solve your layout problems with Flexbox’ (issue #275), our browser support widget for flexbox was a little off. Flexbox has full browser support with Edge (from 12), Firefox (41), Chrome (43), Safari (8), Opera (33), iOS Safari (8.4), Opera Mini (8), Chrome for Android (46) and Android Browser (4.4). Find out more at netm.ag/flex-276. Thanks to Mateusz Chabros for pointing out our error.

“In 2016 SEO will be different, but still very relevant. Mobile search has now overtaken desktop, so things like voice search and app indexing will become a much bigger focus. Voice search lends itself to location-based queries, for which local SEO is key. App SEO is still in its infancy, but I expect to see it grow into its own form of SEO, which agencies will need to offer to clients in order to remain competitive.”


Network THE POLL

WHICH BOOK HAD THE BIGGEST IMPACT ON YOUR CAREER?

COOL STUFF WE LEARNED THIS MONTH WEB REVOLUTION

2% CSS: The Missing Manual David Sawyer McFarland

2% Content Strategy for the Web Kristina Halvorson and Melissa Rach

3% 100 Things Every Designer Needs to Know About People Susan Weinschenk

30% Designing with Web Standards Jeffrey Zeldman

3% The Principles of Beautiful Web Design Jason Beaird

20% Responsive Web Design Ethan Marcotte

7% Other

17% Introducing HTML5 Bruce Lawson and Remy Sharp

16% Don’t Make Me Think Steve Krug

From our timeline

Build our own product @de

What is your web resolution for 2016? Hire my first full-time dev/guru/oracle! @no1son Learn Javascript (finally!) @mbarker_84 Build awesome s**t!

Move away from freelancing in agencies to more client work

Have fun getting better at CSS animations and SVG @AndrianaArt To focus on what I feel comfortable doing in my own time, not what the community says is best

Stop buying domain names and build something for the ones that I do have @antonydandrea1

Work on more amazing projects using HTML5, Bootstrap and jQuery! @Gaffy1994 Build a side project with Laravel and Backbone @greenhornet79 Read more for fun

Finish a personal project and don’t get distracted until it’s done

A huge change is hurtling towards the web, and it’s going to arrive in the shape of WebAssembly. Created by Google, Mozilla, Microsoft and Apple workers, WebAssembly will allow developers to compile source code into a lowlevel binary representation that can be run by other applications. netm.ag/webassembly-276 ARRESTED DEVELOPMENT

Considering the vast number of websites that need them, why are good frontend developers so hard to track down? Ilias Ismanalijev explains how great frontend development comes down to a perfect storm of performance metrics, marketing awareness and browser compatibility. netm.ag/frontenddev-276 FEEDBACK FINDINGS

With client feedback usually falling on deaf ears, it’s no surprise disgruntled users are taking to social media or letting their unhappiness fester. Either way, it’s bad news for product owners. To help the flow of conversation, Andrew Rasmussen identifies feedback pain points and reveals how companies can fix them. netm.ag/feedback-276

february 2016 9


Send your questions to netmag@futurenet.com THIS MONTH FEATURING... HARRY ROBERTS Harry is a consultant frontend architect, writer and speaker w: csswizardry.com t: @csswizardry

Practical advice from industry experts

QUESTION OF THE MONTH

What’s a good starter project for someone who wants to learn Sass? Christian Grosskopf, Kentucky, US

JINA BOLTON Jina works at Salesforce UX, where she helps create design systems w: jina.me t: @jina

SCOTT JENSON Scott is the project lead for the Physical Web project at Google w: jenson.org t: @scottjenson

EMMA JANE WESTBY Emma is an author, educator, and a part-time beekeeper w: gitforteams.com t: @emmajanehw

Learning space Sites like CodePen and SassMeister are good practice spaces for users learning Sass

JB: Assuming you’re already familiar with CSS, I personally recommend refactoring a current project. You can start out small, with moving values over to variables and consolidating and documenting them. Work your way up to mixins, then further into more advanced concepts. It’s how I learned. But if you want to start from scratch, you can try your hand at making a UI library and style guide – maybe for a side project. SassMeister and CodePen are also great practice spaces.

GIT

MOVING TEAMS What is the best way to move a team from SVN to Git with the minimum impact?

Gary Gitton, Paris, Fr EJW: Git has bridging commands that allow you to work with an SVN repository until you’re ready to make the switch.

10

february 2016

Atlassian has a great tutorial on migrating from SVN to Git (netm.ag/SVN276). Don’t fool yourself into thinking it’s just a technical problem though. The social part of the move is usually the hardest. For this I rely on Kotter’s 8-Step Process for Leading Change: netm.ag/steps-276.


Q&As

PHYSICAL WEB

THE BASICS How does the Physical Web work?

3 SIMPLE STEPS

Joel Hayward, Cambridge, UK SJ: This four-minute intro video should give a good overview of how it works: netm.ag/intro-276. With more and more smart devices on their way, it’s clear we can’t just have ‘an app’ for each one. We need something simple and light that will enable us to just walk up and use any device. This is especially important for public use cases like bus stops or movie posters, where you might use the object just once.

Will multiple parent selectors ever be possible? Ryan Irving, Henley-on-Thames, UK HR: Multiple parents make stylesheets much more terse, which is always nice. It reduces filesize and maintenance, so it’s something we’re definitely interested in. The best thing is, we have it already!

GIT The basics This video gives a concise overview of the Physical Web

TEAM TRAINING

CSS

Steve Shreve, Florida, US

PREPROCESSORS

PERFORMANCE BENEFITS

EJW: Sit down as a team and figure out how you work best together. And I do mean as a whole team. Having someone impose (‘teach’) a workflow onto everyone else is much less effective than co-creating a process. There are a few exercises in Git for Grown-ups (24ways.org/2013/git-for-grownups) to get you started. Diagrams and step-bystep documentation that use real names and examples are crucial. Nurture a culture that encourages questions and documents answers.

Currently, the most obvious solution is to use a preprocessor’s in-built nesting functionality to list our multiple parents, then nest our one child in it. This still compiles out to relatively verbose CSS, but it is nice and terse in our source.

What are the performance benefits of using Sass/Less rather than ‘normal’ CSS?

Martin Oxby, Inverness, UK HR: A preprocessor is to performance what a knife is to a meal – a good knife might make you work faster and more effectively, but it won’t necessarily make your food taste any better. You could use Sass to make nice DRY code that promotes reuse, lowers filesize, and helps performance, or you could use Sass to inadvertently generate a million lines of unnecessary CSS that completely destroy performance. Remember: garbage in, garbage out. SASS

MISTAKES TO AVOID What is the #1 mistake you see most devs making when first learning Sass?

Rick Yentzer, Boston, US JB: Sass gives you a lot of powerful features: variables, maps, mixins, functions and so on. A mistake new users often make is to abstract everything just because they can. When I first started I would make mixins for anything I thought might be repeatable – then it would turn out I wouldn’t even use them. I recommend building things only when you need them, and abstracting them when you find yourself repeating yourself.

Best way to get everyone on board and up to speed: devs, designers, all.

CSS

CSS ARCHITECTURE Have you ever had to go back to a client to modify the CSS architecture you had developed for them previously?

There’s a pseudo-selector in Selectors Level 4 that provides this natively. :matches (or :any , in older specs) allows you to write much more terse selectors, which the browser expands internally.

Philip Karpiak, Toronto, CA HR: Not yet! Usually clients I work with have a pretty long-term view of their project, so we can be relatively certain of a general architecture (ITCSS, BEM, a combination, etc.). The hallmarks of a good architecture are that we can decommission certain aspects, introduce new paradigms, section off experimental bits, and so on. To this end, I have worked with clients where we’ve sunset certain naming conventions as they got too complex, or introduced Web Components to provide fully encapsulated and selfsufficient modules.

CSSNEXT

To get :matches() working requires a little extra work. It’s actually referred to as :any() in older specs, and requires vendor prefixing. To this end, I’d recommend using cssnext (cssnext.io) to transpile the new syntax back to better support.

february 2016 11


EXCHANGE Q&As SASS

ELEMENT IDS When working with for / each / while , is there an effective way to target enumerated element IDs without wasting CSS file size?

Christopher McKirgan, Bristol, UK JB: While @extend and placeholder selectors has both its lovers and haters, I think it’s a good way to tackle this particular use case. For example: %element-base { // Styles here } %for $increment from 1 through 4 { .element-#{$increment} { @extend %element-base; width: 3rem * ($increment - 1); } } In this example, .element-1 , .element-2 , .element-3 , .element-4 share base styles via a placeholder selector, but then the width changes respectively. CSS

LOCAL SCOPING How will CSS local scoping affect style development in the long run?

Decisions This handy chart guides users who aren’t sure whether to rebase or merge (netm.ag/options-276)

and the Physical Web is no different. Making the web better benefits everyone. Keep in mind that the Physical Web is all open source. Opera labs is already shipping its own version.

Daniel Schildt, Helsinki, FIN

GIT

HR: CSS isn’t without its problems, that’s for sure. One of the most prevalent is collisions and leakages – things cascading into one another where we don’t want them to, and selectors inadvertently catching too much of the DOM. Local scoping (in whatever guise that comes along) will certainly help. I’d be keen to have an opt-in local scope that’s standards-based and non-JS. Unfortunately, scoped styles (netm.ag/ scoped-276) seem to have died a death.

MERGING VS STASHING

PHYSICAL WEB

What are your thoughts on merging versus stashing/rebasing?

Simon Owen, Manchester, UK EJW: Do whatever works for your team. Need a very clean history? Use rebase to update branches and merge --ff-only to incorporate contributor work. Need to cater to novice contributors? Allow branches to be updated via merge (no one will die. I tried it once for science). If you want to do The Right Thing, I’ve created a flow chart to help you decide (see above).

MONETISATION How is Google going to monetise the Physical Web?

PHYSICAL WEB

Richard Simek, California, US

What are the implications of the Physical Web?

SJ: The Physical Web is part of the Chrome team, an open source browser for the web. The Chrome team tries to improve the web through open standards

12

february 2016

smart Internet of Things devices, it actually goes much further than that. Imagine a dog collar, a movie poster or even a mall map. Any physical object or place can sprout a virtual notecard of simple information. This goes back to the roots of the web, where information could be seen by any device. This ability to add information to anything could unlock many breakthrough use cases.

POSSIBILITIES

Jeff Vreeland, Ohio, US SJ: While everyone is excited about the ability of the Physical Web to control

CSS

PROJECT MANAGEMENT How does a team cope with a joint project when they’re all at different CSS levels?

Fig Digital, Glossop, UK HR: This is a huge problem for almost all my clients: people of different backgrounds and skill levels will always be expected to contribute to CSS. To help them do this as safely as possible, we can do a few things. 1) Write API-like CSS for them to consume. A UI toolkit that other people can implement means they are users of our CSS, not creators. 2) Use tools and linters to highlight syntax errors, misused naming conventions, etc. I created Nudge (github.com/csswizardry/ nudge) for this very reason.


People, projects & paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT OF THE MONTH

16

Una Kravets’ open source library recreates Instagram effects in CSS

WORKSPACE

EVENT REPORT

17

Find out what went down at beyond tellerrand Berlin, from Oliver Lindberg

19

Courtney Symons invites us into Shopify’s enviably eclectic, personalised HQ in Canada

NEED LIST Web stuff we want, including a computer you can buy with your loose change

18

BEYOND PIXELS

Simon Owen sings the praises of DigiHike; a walking group for techy types

22

CLIENTS FROM HELL

23

A designer comes face to face with a client with an unhealthy fear of fraud

february 2016 15


FEED Side project

CSSGRAM Una Kravets’ open source library lets you SIDE PROJECT OF THE MONTH

INFO job: Frontend developer w: una.im t: @Una

net: How did you come up with the idea of creating Instagram-style filters in CSS for CSSgram (www.una.im/CSSgram)? UK: To be honest, the Instagram bit was kind of an afterthought. I’ve been playing a lot with CSS filters, gradients and blend modes lately, and have built a few web experiments. I presented my research to CSS Conf EU, using Instagram filters as examples to show how you can create any visual filter you want, purely in the browser. I was then asked by multiple people if those filters were available for use online. net: How can users create the fun filter effects? UK: Basically, it’s a mix of CSS filters (sepia, greyscale, saturation and so on) and pseudo-elements that are either a solid colour or made up of gradients and blended on top of the image via CSS blend modes (colour, screen, overlay and so on). There are almost limitless combinations of options.

16

february 2016

net: What did you enjoy most about the project? UK: It was pretty enjoyable and relaxing to spend some evenings tweaking colours and exploring blend modes to figure out the closest combinations. I know this sounds strange, but it was quite soothing. net: Did you run into any difficulties? UK: CSS does not yet allow you to manipulate individual channels (i.e. RGB channels). This made it really difficult to achieve some of the Instagram filter effects, as the options I had for blending colours were limited. net: Do you have a favourite filter? UK: My favourite filter to make was Toaster because it’s so bold and I love the colours it produces, but my most used filter is probably Mayfair. It makes everything look great in a much more subtle way. net: Have you learnt anything new or surprising while making CSSgram? UK: A lot of the Instagram filters are surprisingly similar! But most of all, I learned that once you get the hang of it, identifying and recreating image effects in CSS is easy and enjoyable. I think everyone should try it. Who knows, maybe my next project will be a tool to help people do just that.


Feed

EVENT GUIDE NDC LONDON DATE: 11-15 JANUARY 2016 LOCATION: LONDON, UK ‘Inspiring developers since 2008’, NDC London includes two days of pre-conference workshops and three days of talks from speakers including Troy Hunt and Lilly Dart. ndc-london.com

CSS WORKSHOP DATE: 25 JANUARY 2016 LOCATION: LONDON, UK

BEYOND TELLERRAND BERLIN Oliver Lindberg reports on tellerrand’s Berlin outing, where web design and development meet graphic design EVENT REPORT

Not many conferences in our industry boast a schedule that ranges from progressive enhancement via style guides to the history of typography on bank notes. But that is exactly what the second edition of beyond tellerrand Berlin accomplished, staying true to its aim of making attendees think outside the box. The sold-out two-day event attracted delegates from 27 different countries, including Israel, Korea, South Africa and Pakistan, who collectively connected over 840 devices to the conference Wi-Fi. Whether they all accessed really fast-loading sites we do not know. If everyone took to heart what Steve Souders and Mark Zeaman covered in their opening talk, however, chances are attendees will access a lot more performance-optimised sites on their devices at next year’s conference. The duo argued that performance should be a concern right from the beginning of a project through to the design stage, and showed a fascinating case study of the Tourism New Zealand homepage (www.markzeman.com/ projects/tnz-homepage). The topic was later picked

up by Jake Archibald in his talk about modern progressive enhancement. Another theme that featured twice was the Physical Web. Google’s Scott Jenson, the driving force behind the project, imagined a world in which we can walk up to any device and ‘tap open’ a web page using Bluetooth low-energy beacons that transmit URLs – no need to install annoying apps or use QR codes! Closing the event, Stephanie Rieger explored the impact of the Physical Web further. beyond tellerrand wouldn’t be beyond tellerrand without the intersection of different creative disciplines, and this time award-winning graphic designer Chip Kidd (pictured), who specialises in book cover designs, gave a memorable talk that was half standup show, half unique insight into his work. You can find a round-up blog post, plus videos of all the speakers’ presentations, at netm.ag/ tellerrand-276. And if all this has tickled your fancy, be quick. Early bird tickets for May’s Düsseldorf edition sold out in less than three minutes!

PROFILE

Photography: Raphael Rychetsky @herzflimmern

DATE: 7-9 NOVEMBER 2015 LOCATION: BERLIN, GERMANY URL: beyondtellerrand.com

Oliver (@oliverlindberg) is net’s editor and has been working with the title since the Iron Age. He’s also, in the words of Carl Smith, a “dancing machine”

Hosted by award-winning frontend architect Harry Roberts, the day will offer a whirlwind overview of designs, layouts and theming, plus of course a look at Roberts’ own CSS architecture ITCSS. netm.ag/workshop-276

NODE COMMUNITY CONVENTION DATE: 26-28 JANUARY 2016 LOCATION: SAN FRANCISCO, US Learn the best practices and techniques to maximise your use of node.js, and hear challenges and triumphs with case studies from the developers changing the web. Speakers include Sally Mohr and Treor Livingstone. nodecommunityconvention.com

DOT SWIFT DATE: 29 JANUARY 2016 LOCATION: PARIS, FR On a mission to bring the best hackers in the world to Paris and let them share their insights, dotSwift is made by developers, for developers. Expect deeply technical talks from the likes of Rob Napier and Chris Eidhof, with no marketing speeches or buzzword cover-ups! www.dotswift.io

february 2016 17


FEED Beyond pixels

STUFF I LIKE

JON SE TZEN Creative director www.jonsetzen.com

VSCO The VSCO app is possibly my most used app. I edit all my photos through it, even ones I don’t take with my iPhone. The app is super powerful, impeccably designed, and continues to get better with every refresh. www.vsco.co/vscocam

CREATIVEMORNINGS This one is a no-brainer. It’s the treasure-trove of brilliant, inspiring and relatable talks, and I’m not just saying that because I run the LA chapter. Real people, who do real work, share their successes and failures with a global audience. www.creativemornings.com

18

february 2016

DIGIHIKE This month … Simon Owen explains how a hiking group for geeks helps him unknot his brain BEYOND PIXELS Trying to learn everything about web development is an impossible task, yet people seem to try anyway. This can lead to burnout and mental health issues. I am involved with a few web meetup groups, and I’ve found it incredible how many talented developers are friendly and willing to help others. One of the developers I’ve had the privilege of meeting is Bobby Bobak (@bobek_balinek). At one meetup, we were discussing ‘unplugging’ together, and decided to set up something quick, easy and inclusive in the community. We came up with digiHike: an organised hiking group for people who speak geek. I remember having a really productive evening with Bobby. I was sat in my front room, communicating with Bobby over Slack. Within 30 minutes, we had a logo, and Twitter, MailChimp, Tumblr, Attending and Gmail accounts all sorted and ready to go. Our first digiHike was Kinder Scout, one of my favourite walks in the UK. Despite having done this walk before I still managed to lead us into a field of sheep and across a river. Whoops! Two things struck me from digiHike. Firstly, little of the conversation was tech-related. The conversations I’ve had on digiHikes have been extremely varied – you never know when a talk about something completely random may in fact help you solve a problem.

Secondly, although the weather was wet and windy, everyone remained in high spirits. Hiking up a mountain generally means no reception, so constantly checking social media notifications and email simply isn’t an option. When I’ve been working for too long and feel under pressure, my brain feels knotted. Getting away from a computer, into the fresh air, along with great company and physical activity help my brain become unknotted. Ask yourself, when was the last time you weren’t on a computer, or another device? Furthermore, when was the last time you did something that wasn’t tech-related? If you can’t remember, then maybe it’s time to go and do something else for a while. I’m writing this having just come back from the top of Mount Toubkal in Morocco, a trip organised by Andrew Betts. If you’re around North West England and fancy joining us, you’re more than welcome. For those further afield who are interested in setting up a digiHike, I’d be more than happy to help you get one up and running (or walking).

PROFILE

POCKET For me, Pocket is the best bookmarking app. I’m a sucker for anything truly one-click, and the Pocket Chrome Extension makes it easy to save articles quickly. It’s always nice to get on a plane and have a bunch of new things to read, especially when they’re presented this beautifully. www.getpocket.com/chrome

Simon (s10wen.com) is a frontend developer from Manchester, UK. He’s involved with UpFrontConf, McrFRED and digiHike


2

3

1

4 5

6

Courtney Symons invites us into a quiet enclave of Shopify’s bustling HQ, built to inspire employees WORKSPACE When ecommerce software company Shopify moved to its new Ottawa, Canada headquarters in September 2014, we explored the halls like kids on a tour of Willy Wonka’s chocolate factory. Six floors – totalling 102,000 square feet – are filled with coworking pods, cosy corners and places to put your feet up. Our team worked with a world-class architecture firm to ensure there were workplaces for extroverts and introverts alike. They poured more than 180,000 pounds of concrete to create custom staircases between floors that allow conversations to continue, instead of being cut off by closing elevator doors.

Every floor has a different theme, including Canadiana and streetscapes. My favourite nook is the library (1), nestled on our speakeasy-themed floor. Each meeting room on this floor is named after a cocktail, the exception being the Studio (2), which is a sound-proof room meant for recording video footage. A new musical instrument seems to appear here each day, turning it into a de facto jam session space as well. Sidecar (3) is a pair programming room; a small space for two people to collaborate on a development project. Other rooms range from phone booths to Scandinavian

sauna-style arenas. We’re able to book them using Google Calendar, and reservations show up on iPads outside the door (4). As a company looking to change the future of commerce, we hold onto historical mementos like old-fashioned cash registers (5) to remind us how far we’ve come, and how far we have to go. This room is one small pocket of a bustling office that includes a yoga studio, massage room and fully-staffed kitchen. Our homeaway-from-home encourages us to run into colleagues for chance conversations that inspire innovation. And, just like at home, we can wear moccasins (6) to replace our snowy winter boots when we settle in during the long Canadian winters. PROFILE

INNOVATION HAVEN

Courtney manages the partner marketing team at ecommerce software company Shopify (www.shopify.com)

february 2016 19


FEED Need list

NEED LIST

STUFF WE WANT Small objects of web design desire: from a paper plane drone with a live streaming camera to a tiny computer you can buy with your pocket money 1

$5

RASPBERRY PI ZERO

FREE

BONSAI

4

PATTERNS & PRINCIPLES

3

2

5

$18

POWERUP FPV

LITTLE BLACK FONT BOOK 2

£2.99

6

$179

SVG COLORS, PATTERNS & GRADIENTS

$29.99

What we think (1) Take the plunge into coding with the latest fully-fledged Raspberry Pi. It includes a micro-SD card slot and half a gig of RAM, plus it’s ridiculously cheap (netm.ag/raspberrypi-276). (2) Freelancers can secure the scope and payment of their work with these free e-signature contracts (netm.ag/bonsai-276). (3) Find the font that fits with these examples of eye-popping typography in action (netm.ag/font-276). (4) Reach more people and devices by learning how to design responsively in this book by web legend Ethan Marcotte (netm.ag/responsive-276). (5) See what it’s like to fly on a paper plane thanks to this smartphone-controlled drone with a live streaming camera (netm.ag/powerup-276). (6) Throw some shade onto your SVG graphics and learn how colour is defined in Amelia Bellamy-Royds’ useful book (netm.ag/svg-276).

22

february 2016


Feed

HOW TO

PRESENT WORK IN PROGRESS It’s important to keep clients up to date on your progress. We asked our Twitter followers how they communicate their creative journey

APP-ROPRIATE PROGRAMMING

A SIGNATURE MISTAKE Exclusively for net: the latest in a series of anonymous accounts of nightmare clients CLIENTS FROM HELL

Illustration: Ben the Illustrator bentheillustrator.prosite.com

A few years back, I designed an annual report for a polarising non-profit. Everything was looking great, including the printer’s last PDF proof. After over 10,000 reports had been printed (several pages and a speciality paper cover, printed with metallic ink, saddle-stitched with staples), the CEO called me in a panic. Client: There’s a huge mistake! My signature on the welcome letter in the inner front cover is missing! Me: You’re right, that’s odd. It was in the final printer proof. I called the printer and they checked their digital files. Apparently the linked signature image had somehow ‘fallen off’ when the cover was printed. They apologised and offered to make a stamp of the CEO’s signature, which they’d use to stamp the thousands of reports with metallic ink. Me: I think it’s solved. The printer will make a stamp of your signature and hand-stamp all the reports.

Client: No! They cannot make my signature into a stamp. Me: Why not? Client: If it gets into the wrong hands, people could just stamp my signature on anything. It could ruin my reputation, and the organisation’s. Me: But don’t you already have your signature as a stamp internally? Client: That’s different. Me: Well, they’d give us the stamps that they made; they wouldn’t keep them. Client: But they would still have the ability to make more stamps. Me: But they already have your signature as an image file right now. Client: I don’t care! They must reprint the covers! I begrudgingly told the printer and apologised to them profusely. They had all the covers torn off by hand, ordered new speciality paper, re-printed them, and then reattached all the new ones.

clientsfromhell.net

@matthamm has been getting into InVision lately. “It’s great for presenting interaction design with clickthroughs,” he says. @thisissb agrees: “Using something like @InVisionApp is great as they can see what you see and not see a flat PDF.”

TO PLACEHOLD OR NOT TO PLACEHOLD @ItsTheSeff says if you’re redesigning an existing product, you should use text and assets from the live version, while for a new product, placeholders work just fine. @studiofellow disagrees, “Always design using real content. If you use placeholder text, you are decorating, not designing.” @gramatter has some top tips: “Use great evocative images and write thoughtprovoking copy. Say no to generic copy and imagery.”

SOURCING IMAGES @create_oblivion says how you show images depends on what your client has supplied. @KevnGibsn adds, “I tend to use creative commons imagery so it can be used if the client takes a liking to it.” Shutterstock and Unsplash are popular choices.

february 2016 23


SUBSCRIBE TO NET GET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERS DELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH

PRINT EDITION ONLY

DIGITAL 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

Take out a digital subscription to net for on-the-go access to our interactive edition, with streaming screencasts, extra images and more

FROM

£44 BASED ON AN ANNUAL SUBSCRIPTION

SAVE UP TO

43

%

FROM

£45

SAVE UP TO

31

%

BASED ON AN ANNUAL SUBSCRIPTION

Terms & conditions: Prices and savings quoted are compared to buying full priced print and digital issues. You will receive 13 issues in a year. If you are dissatisfied in any way you can write to us at Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends 31 January 2016


ARE YOU A WEB PROFESSIONAL? GET OUR PRO PACK SEE PAGE 51

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

GREAT REASONS TO SUBSCRIBE Print edition delivered to your door 13 issues in a one-year subscription iPad and iPhone edition download Android edition download

FROM

£53

SAVE UP TO

63

%

Money-back guarantee

myfavouritemagazines.co.uk/NETMAG15


Opinions, thoughts & advice

TRENDS

DESIGNING FOR CRISIS

28

Eric Meyer recalls a personal crisis in which the impact of poor UX was keenly felt, and urges designers to pay attention to stress cases

IS WEB DESIGN DEAD? Conny Liegl wonders if, as the web grows up, web designers are becoming obsolete When I was 25, I did not have my life figured out at all. I was in a state of flux, woth a mind that was constantly being filled with new ideas. Now, at 34, I see a lot of my own ‘awkward 20s’ in the development of the world wide web.

INTERVIEW

32 DESIGNER ROLES

Authentic Jobs founder Cameron Moll sheds some light on the latest headache facing the web industry: Unified Design

Q&A

40

Maya Benari explains how she put together the US government’s new web design standards, to make a better experience for all citizens

Since it started life in 1990, the web has been constantly learning and changing. Thanks to social media, website building services and WYSIWYG editors, the web is becoming less and less dependent on web professionals. We can no longer hold on to the way things used to be when we were ‘web masters’ , exclusively responsible for publishing content. The need for design innovation has shrunk significantly. Conversion rates and return on investment dictate designs that balance novelty with usability. Standards and frameworks try to bring order to the chaos of the internet, and help users digest content by using familiar structures.


Opinion

WHAT’S LEFT? The good news is that us web designers are not completely obsolete yet. However, in a potential future scenario AI software may learn autonomously, improve its algorithms, perfect frontend web coding and develop new design principles and pattern libraries across the web, with no human input whatsoever. If web designers want to continue offering value, we must engage in different fields, and grow our skills. Content is king: In a world of selfdesigning sites, deliberate modular content will continue to be the deciding factor for a successful web presence. UX: Part of an outstanding UX is the holistic integration of UX principles to achieve consistency across platforms. Brand identity: While machines might be able to make design decisions based on

The web is becoming less and less dependent on web professionals. We can no longer hold on to the way things used to be when we were ‘web masters’ patterns and libraries, creating a brand identity will always include humans. Emotional design: An important part of UX and brand identity, emotional design increases customer loyalty. New interaction patterns and devices: New ways of interacting with devices are constantly being created: finger and hand gestures, eye tracking, even mind reading. And our gadgets are getting smaller or even wearable, and starting to blend in with the real world. Web ethics: In the digital world that constantly surrounds us the difference between persuasion and manipulation is subtle, and these boundaries need to be clearly defined. Web copyright: It is still easy to inspect and copy the source code of nearly every

website. The area of web copyright is growing in importance as new tools make it easier to reverse engineer or simply copy content. Accessibility: The majority of the web is still not accessible for millions of people with disabilities. It is our social responsibility to improve this situation. Modern web designers are confronted with the most disruptive technologies yet, that could potentially replace our field. We have to adapt to succeed in this new reality: our 25-year-old is starting to live a more independent life now.

PROFILE

PageCloud (www.pagecloud.com), which calls itself ‘The world’s most advanced web editor’ , launched in November. With it, users can basically save a copy of any website, making any element editable. From this, they can build the website of their dreams, based on others’ work. If this still seems like too much work, why not have a website just build itself? Enter The Grid (www.thegrid.io), which recently launched in beta. For this website builder, designers have manually built a pattern and design library that is used by an AI to create a web page. Users drag and drop content into a minimal UI and set some parameters, and the AI places the elements onto the page, crops the images and creates a colour palette. There are plenty of other threats to websites, too. Facebook pages are an easy place for small businesses to share updates and offers with their clients. Mobile apps offer a handy, straightforward alternative to websites for users on the go. Google’s Universal Search also seems to be aiming to make third-party websites obsolete altogether. Typing in ‘Flights SFO NY’ results in an overview table displaying various flight options, along with prices. If you have an upcoming flight Google will even scan your emails and display the itinerary on its search results page.

As lead designer at Kennedy Library, Cal Poly State University, Conny (@connyliegl) builds intuitive interfaces to make people happier

february 2016 27


VOICES Essay

28

february 2016


Essay

UX

DESIGNING FOR CRISIS Illustration by Ben Mounsey

Eric Meyer urges designers to pay attention to the worst-case scenario, and make a better experience for all users

On the morning of August 17 2013, my family was on vacation 500 miles from home, and our middle child Rebecca had been feeling ill for a few days. 12 hours later, she was in a medically induced coma and on a Life Flight helicopter to the Children’s Hospital of Philadelphia. My wife Kat and I sat in the back seat of a stranger’s car as they drove us to Philadelphia, to catch up with Rebecca and find out if her life could be saved. The question that kept coming to Kat and me, sitting in the dark in the back of that car, was: ‘How do we get to Rebecca?’ We were headed to a hospital we’d never been to before, in a city we didn’t know at all. The car’s GPS gave us precise routing and arrival time information, of course, but what should we do when we reached the hospital at the stroke of midnight?

EMERGENCY INFORMATION

and not one of them has a path for people in a moment of severe crisis. Most of them don’t even give you the address of the emergency room, which is usually distinct from the hospital’s mailing address. This means, when you look up the hospital online in a moment of emergency, and plug the listed address into a GPS, the chances are you’ll end up at the mail receiving dock, or maybe the hospital’s main entrance. The emergency room entrance could be in another building, or even on a completely different block. It’s almost ludicrous to consider, isn’t it? Hospitals, which have entire departments with words like ‘Urgent’ and ‘Emergency’ in their names, haven’t taken those use cases into account in their web design. Often they don’t take it into account in their overall design, either, but that just speaks even more loudly to the underlying problem: we marginalise crisis scenarios.

I eventually realised I could use my iPhone to look it up. I found the hospital’s website, but it provided nothing to help people in our situation. There was no single point of information for people rushing to the hospital, stunned by the terrifying turn their lives had taken. There were bits of relevant information scattered throughout the site, but other pieces of really important information – like the fact that at midnight the front doors of the hospital are locked and there’s nobody staffing the information desk – were nowhere to be found. It’s not just this one hospital, either. I’ve looked at a lot of hospital websites in the two years since that night,

There are some familiar phrases in our profession, things like: ‘We’re designing for the 90 per cent, not the 10 per cent’ and ‘We’re not going to worry about edge cases’. As Evan Hensleigh has observed, though, the term ‘edge case’ itself is telling: it defines the edges of what – or who – you care about. We’re not trained to take crisis situations into account when we design. It’s human nature to look away from difficulty, to avoid pain. There are professions (architecture, engineering and software design, for example)

EDGE CASES

feburary 2016 29


VOICES Essay where the worst case situation is considered as a matter of course. The importance of designing for such cases – along with the potentially fatal consequences of ignoring them – is taught in schools and reinforced through the professional culture.

COGNITIVE RESOURCES As web professionals, we don’t think of what we do as having that sort of import. But think back to the hospital website. Put two parents and a gravely injured child in a car, and consider how the lack of a clear set of directions to the emergency room could result in that child’s death, due to those precious seconds wasted by going to the address listed on the hospital website and then having to search again for the location of the actual emergency room. It’s all too easy to dismiss this as irrelevant, because – come on – who would look up an address and plug it into a GPS instead of calling the hospital to get directions? As web designers, how our users behave is

Spool’s term ‘stress cases’ is far better than ‘edge cases’. The point is to bring stress cases into the fold, as it were; to make them a part of our process, rather than pushing them to the margins. This can be done for almost any kind of website. If you’re saying to yourself, ‘Sure, but this doesn’t apply to what I do’, you need to stop and really think about it. It doesn’t take much creativity to come up with a situation where one of your users could come to your design in a stressed situation, or even a moment of serious crisis. To quote Kristen Burroughs: “If I can come up with an honest crisis persona for the coupons and deals space … anyone can.”

INVISIBLE DESIGN Look at your work through those eyes as best you can, considering how the experience helps or hinders those who are severely cognitively drained, enormously distracted, and still in need of what you offer. What you see through their eyes may surprise you.

Keeping a focus on stress cases means making our experiences as straightforward as possible. If a stunned, frightened user can understand what your design is telling them, the Platonic ideal of a user should have no trouble at all

STRESS CASES In fairness, the term ‘crisis’ is a little bit restrictive. What we’re really talking about is situations of stress, sometimes extreme stress, which is why Sara WachterBoettcher and I assert in a forthcoming book that Jared

30

february 2016

The benefits are manifold. Keeping a focus on stress cases means keeping a focus on making our experiences as straightforward as possible, which helps not just people in crisis, but all users. If a stunned, frightened user can understand what your design is telling them, and find the path to what they need, the Platonic ideal of a user should have no trouble at all. And if your consideration of stress cases helps people who are in fact under enormous stress – whether from work or finances or relationships or medical crisis or whatever – you will have helped them in the most profound way, simply by not adding to their burdens. Your work will become invisible in exactly the way design often aspires to be, by creating a path so smooth the user never notices the path at all. There can be no higher level of accomplishment. It is the most humane and human thing you can do: to use your skills, your experience, and your compassion in service to those who need it most.

PROFILE

not our decision to make. Assuming a certain course of action is just another form of dodging difficulty, of looking away from pain. Mobile-first isn’t just a pattern of behaviour any more: for many, it’s an instinct. And in moments of severe crisis, when it becomes almost impossible to think at all, let alone think rationally, we fall back on instinct. This is borne out by research in cognitive science, which has found that each of us has a finite pool of cognitive resources. Whatever we use on one task is not available for others. As an example, research has shown that the more demanding a mental exercise, the fewer resources are available for things like willpower or reasoning. In moments of extreme stress, all (or nearly all) cognitive resources are consumed by the situation at hand. That leaves precious little for any other tasks. Steve Krug famously said, “Don’t make me think!”, but in situations like these, we almost literally can’t think.

Eric (meyerweb.com) is an author, speaker, technical lead at Rebecca’s Gift, and co-founder of An Event Apart. He’s been working on the web since 1993


VOICES Interview

CAMERON MOLL Words by Tom May Photography by Eric Tillotson

The founder of Authentic Jobs introduces Unified Design, the latest big challenge to face the web industry

32

february 2016


Interview

INFO job: Designer t: @cameronmoll w: www.cameronmoll.com

february 2016 33


The best web conference speakers need two things. First, an impressive track record in web design, ideally on projects the audience is already familiar with. And second, to be able to draw out lessons from those experiences, which everyone can apply to their own projects. Cameron Moll scores highly on both counts. The thing he’s best known for is very well known indeed. Authentic Jobs, which he founded in 2009, is one of the most popular job sites for web professionals. But it doesn’t just provide a service in matching the right vacancies to the right designers. The team’s constant battle to provide a high-quality user experience also provides Moll with raw material for his insightful talks. And that will certainly be the case when he takes the stage at Generate New York (22 April 2016), to talk about the big topic of the moment: Unified Design.

UNIFIED EXPERIENCE So what is Unified Design? “It grew out of realising that there’s something we’re all wrestling with,” Moll begins. Five years ago, he points out, most of us had two devices; 10 years ago, just one. “Now it’s not uncommon to have four or five different screens that we use throughout the course of any given day, from sun up to sun down.” We think nothing of going from one screen to another, even during the same activity. “Facebook did some research in the US about a year ago and found that 40 per cent of people with more than one screen will continue an activity throughout those screens,” he says. “So if they start it on one screen, they’ll finish it on another.” Those numbers will continue to increase, Moll predicts. So the question becomes: how do we ensure users can access our content on a variety of different screen sizes and platforms? How do we ensure a smooth transition when they decide to go from one of those screens to another, and want to pick up where they left off? “Since talking about this, I’ve found that we’re not doing a great job in some areas,” he says. “That applies to big companies as well as small ones. And we can do better at this. My presentation will help people understand the dynamics of this and offer tips and advice for making a good, unified experience for users.”


Interview

It’s worth noting that when Moll uses the word ‘we’ , he’s not just referring to the industry as a whole. Even Authentic Jobs has struggled with Unified Design, he admits. Moll recalls a time when one team member was signed in as a user (i.e. the company itself was hiring, and so was advertising the job on its own site). That team member drafted a listing, and then had someone else go and sign into their account. The listing was nowhere to be seen. “We were like, what’s going on here?” recalls Moll. “One of the developers pointed out that it was session-based. And I was like: are you kidding me?” When Moll had been presenting his talks on Unified Design, he had been assuming that if you signed into Authentic Jobs with your account on one screen and then went to another – a mobile device, for example – that job listing would show up. But sure enough, the session was based on cookies. “That’s exactly what I’d been talking about for a year and a half, this idea of: don’t store data like that, that would need

to be carried over to another screen, in a cookie or in a session. Tie it into the account, so anyone can sign in.”

SHARED PROBLEMS The problem should have been fixed by the time this issue is printed, Moll assures us, but it’s clear that Unified Design is a challenge for everyone in the industry. “When I stand up on stage and talk about this, I’m very honest and I say, look: this is something I’m wrestling with too. We’re all making mistakes in this area. So let’s learn from each other and get better at it.” Moll mentions online clothing retailer Zappos as an example of a large company whose design was not, until recently, unified. “If you had items in your cart on one screen and you signed into your account on another screen, they weren’t there because again they were cookie-based,” he explains. “But since I’ve been talking about this they’ve actually fixed it. I used to use them as a bad example, now I use them as an example of someone who’s made that

“You need to go into projects thinking: this must be unified across many screens and data needs to persist”

transition. So it’s certainly fixable, whether you’re a small company or a big one.” Unified Design shares some of the challenges that were originally thrown up by responsive design. Moll points out that we quickly learned it was much easier to built responsiveness into sites from day one, rather than going back and trying to “add responsive” to something that was two or three years old. It’s a similar case with Unified Design. “If you go into projects thinking: this needs to be unified across many different screens and data needs to persist, then it’s much easier than going back and trying to fix a system that is already outstanding and having to rewrite many different things,” he reasons. “The approach is relatively easy if you start with that mindset. If you have to go back and do some patchwork it’s definitely harder, but it’s not impossible.”

CREATIVIT Y M ASTER The passion Moll shows for the subject is typical of his passion for design and creativity as a whole. Aside from his role at Authentic Jobs, and writing books such as CSS Mastery (2009) and Mobile Web Design (2007), he’s also the artist behind a unique

february 2016 35


VOICES Interview

series of letterpress posters (structuresintype. com) that reimagine buildings as if they were constructed entirely of type. And as this eclectic range of activities suggests, he’s fiercely tool-agnostic. “I place greater value in mastering creativity than I do in mastering tools,” he explains. “I grew up working with wood in my garage, so that was one medium. When I fell into design, I didn’t really have a plan to do that, it just came to me, so to speak. In my mind, it was: ‘Okay, this is just another set of tools’. But the synthesis, the creativity, is still there. “I grew up playing a lot of music as well, so this idea of composing things out of material, whether they be tangible or intangible, has always been part of who I am. I think that’s why I found myself dabbling with these letterpress print posters and doing freelance work. I just appreciate the challenge of mastering creativity as a whole, rather than solely and exclusively mastering the tools.”

THE RIGHT JOBS It’s an attitude that’s become part of the DNA of Authentic Jobs, and goes a long way to explaining its success. “We’ve been around for 10 years and I think we’ve established a strong presence and brand, ” Moll says. “The fact that ‘Authentic’ is part of our name is no mistake because we really do try to be as authentic as possible. Not just in how we communicate to the public but in trying to ensure as best we can that there are legitimate, good jobs posted to the site.” Just to be clear: there is no screening process on Authentic Jobs – anyone in the

36

february 2016

world can post a job there. As a result, quality control is something the team needs to be aware of. “We’re careful in where we advertise, ” Moll points out. “So hopefully we attract the right kind of people that will post legitimate, well-paying jobs, with a good atmosphere and a teamplaying culture, those kind of things.” The list is monitored regularly for questionable posts, and the team will get in touch with the customer if there are any alarm bells ringing. Users will also help by flagging listings, to bring them to the attention of the team. Authentic Jobs is confident in what it’s offering. “We say we don’t want your money if you’re not finding success with your job list. We let the customer define what that is, whether that be 100 job applications or just two. Sometimes you can get just three applications. That would be very low, but you might find a very qualified person.”

MULTI-TASKER Founder, designer, author, speaker, letterpress adventurer … how does Moll juggle it all? “I think we’re all pressed and the challenge is how to manage our time wisely,” he responds. “Like it or not, society expects us to multi-task. There’s no way to get around it. To operate in today’s society requires you to at least have some grasp of being able to do more than one thing at once. “I used to think I was special – as bad as that may sound – in that, I have five children, and I’m running a business, I have these posters on the side, and I’m often a soccer coach. “I don’t know that I’m that special these days. I think we all have many different things that we’re involved in, and we’re all trying to do our best to make sense of it all.”

“I appreciate the challenge of mastering creativity as a whole, rather than just mastering the tools”

Cameron Moll is speaking at Generate NY. Buy your tickets at netm.ag/NY-276


Opinion

MENTORING AND THE SKILLS GAP UX consultant Joe Leech explores how we can help those trying to get a foothold in our industry We work in an industry that is growing at a huge rate. It’s never been a better time to be working in digital; there are far more jobs and opportunities than there are people to fill them. If you are a company creating a new digital department, be that taking digital in-house or launching a traditional print or ad agency, you’re going to want to hire people with experience to do it. The problem is, the majority of jobs are for senior people and ask for three or more years of experience. Whilst this is great for established web pros, it creates two serious problems for our industry.

THE PROBLEMS First of all, the digital industry can’t grow. In UX, where I work, many jobs ask for five years’ experience. There were very few of us working in UX five years ago –

certainly not enough to fill the job openings. Many of the clients I work with have had job openings for three or more months and haven’t even got close to filling them. Vacancies sit empty, companies can’t grow and the industry suffers. Which brings us to our second problem: this makes it really hard to get your first job in the industry. If companies can’t hire senior people to build out a digital team, there is no-one to manage and mentor those just starting out.

MENTOR EXPERIENCE Job openings for graduates or juniors are very thin on the ground, especially in new disciplines like UX. In Bristol where I live, there are maybe one or two a year (contrast that with senior openings, where I see about two a month). I know people who have been looking for junior UX roles for

PROFILE

CAREERS

over a year and have got nowhere, whereas I get calls all the time from rat-bag recruitment consultants about work. Back in July I offered to help mentor those trying to break into the industry (www.mrjoe.uk/ux-mentoring). The first few responses were a bit disheartening: oneline emails from San Fran startups looking for a free ride. Then I started to get some really heartfelt emails. The response blew my mind – I had over 80 replies from all over the world. I couldn’t help everyone so I had to choose just three. I decided to help the ones with the most need: those returning to work after raising a family, wanting to switch careers later in life, not living near a major city, or working in health or education where there aren’t the budgets to train. We chat on the phone every two weeks or so. We cover a lot in 30 minutes talking, certainly much more than we could achieve over email. I thought I’d be offering advice on what techniques to use, UX processes, or critiquing design work, but most of my advice is career advice. I help my mentees find a place to work that will support a junior, help them decide what techniques or software to learn, or point out the best resources. As I was writing this article I heard that someone I was supporting had just landed her first job. She’d switched into UX after a career change and having baby. I’m really proud she managed to get a job. As part of the mentoring process I’ve asked that the people I’m helping blog about it. Their experiences and the ideas we come up with can hopefully help others get a foothold in the industry. Find me on Twitter (@mrjoe) and as posts get published I’ll share them. If more veterans offered to mentor, we could help a lot more people. If you think you can help, drop me a line or write a blog post offering to mentor. There is a website offering to help put people in touch: re-create.com. It’s a wonderful, rewarding experience and one that is sure to make you a better person.

UX consultant Joe (www.mrjoe.uk) is the author of Psychology for Designers (netm.ag/psydes-250). He has worked with organisations like Disney, eBay, Glenfiddich and Marriott

february 2016 37


VOICES Big question BUSINESS

WHAT WAS YOUR BIGGEST LESSON OF 2015? In the fast-paced world of web design and development, a lot can happen in a year. So what are the most important takeaways from 2015?

JENNIFER PA HL K A

Founder and creative director, Koto

www.codeforamerica.org

studiokoto.co

We started to build a product this year, and the team had different ideas about how we would evaluate its progress. We learned some hard lessons about putting clear milestones in place and getting everyone aligned about what they mean. We’ve emerged stronger and better positioned to help governments work better using iterative, user-centered approaches to technology. It was good for us to take a dose of our own medicine!

CAT NOONE Co-founder, Iris www.getiris.co

Creating a brand and product people fall in love with doesn’t always ensure its success. Ideas are easy, but building a sustainable business around one is more difficult. It’s important to focus on the foundation of the product first. Then, when the time is right, build features on top that support the core. As you do, build, break, fix and iterate fast.

38

JA MES GREENFIEL D

Founder, Code for America

february 2016

Patience has never been one of my best qualities, but 2015 was the year I started to value it more. This quiet, steady perseverance, even-tempered care and diligence is now considered a little Victorian, quaint, and at odds with the ‘move fast and fail quick’ digital world we live in. Often startups want our work ASAP, as they look to pivot, grow and ultimately get acquired without burning through all their funding. This isn’t how design and, in particular, brand building is best achieved. Brands require time and care, and this lack of patience can mean they don’t have the room to breathe that all great creativity needs. 2016 is about me advocating this more.


A L LY PA L A NZI R ACHEL SMI T H Interactive developer, Active Theory

Senior frontend engineer, Vox Media

rachsmith.com

blog.allypalanzi.com

I learnt not to create self-limitations based on job title. For the past five years I’ve been a ‘frontend developer’. Because I worked in a small company I was forced to take initiative and work in other areas such as backend and ops. I discovered I actually enjoy other areas of the stack, and this has significantly improved my frontend work. We shouldn’t set ourselves internal mental barriers for what we’re capable of.

JOA NN A L ORD Marketing executive, blogger and tech advisor joannalord.com

As an executive who defines herself by her career, I all but lost my mind when I chose to leave my role as VP of marketing at a hyper-growth startup earlier this year. Faced with the company’s new product vision I realised it wasn’t a good culture fit, and knew it was time to move on. The problem is people like me are taught never to quit. So many of us are encouraged to force it, bulldoze past adversity and double-down. But sometimes it’s best to just thank life for the learnings and move on. Whether it’s a business strategy that’s not working, a relationship that isn’t fulfilling, or a challenge you realise you don’t actually want to conquer … don’t be afraid to just move on. Something beautiful is waiting for you. Trust me. Nah, forget that. Trust yourself.

If you’re passionate about something, just go for it. In 2015, I did many things I have never done before: I spoke at conferences, taught classes and organised community events. As an anxious introvert, interacting with others (strangers!) regularly is extremely difficult for me. I worked hard to push myself out of my comfort zone. Doing so allowed me to gain confidence, opened up more opportunities in my professional life, and bettered my personal life.

CAS SIE MCDA NIEL Design director, Mozilla Foundation www.cassiemcdaniel.com

2015 was a big year, as I fully stepped into my role as design director for the Mozilla Foundation, moving from full-time design tasks to managing people and building strategies. The most challenging part has been letting go of how I had previously viewed myself as a maker and learning to embrace new skills. I discovered that it didn’t matter if I was a designer or a writer, a project manager or a team lead, as long as I was contributing to worthy and challenging goals. That surprised me.

FURTHER READING EYE-OPENING AGENCIES

TRAINING TALENT

LESSON LIST

In this humbling Medium article (netm.ag/ agency-276), Luke Jones reveals how working for user-centred design agency cxpartners ramped up his learning curve and exposed him to design issues he had never even considered. It’s an insightful read that’s sure to give UX designers a wake-up call.

The demand for frontend developers continued to grow over 2015, with employers offering big bucks to skilful candidates. But how can a junior developer rise through the ranks of such a competitive career? Steven Thomas shares his experiences in this encouraging article (netm.ag/frontend-276).

Looking to expand your skill sets in 2016? This invaluable list runs through the 37 best websites to learn something new, including a host of useful links to polish your coding prowess (netm.ag/learning-276). Find more responses at netm.ag/lesson-276

february 2016 39


VOICES Q&A really modular and componentised so you only import what you need to use. We started with object-oriented CSS and namespaced everything. That way, if other people come in with different libraries or their own CSS, it doesn’t conflict with our CSS. We are mobile-first, and we’re using a lot of variables so you can just update your brand colours. In my opinion, it’s the way you should be doing things, but I guess in context of the government, it’s not very common.

Photo: Kara Gomez

SD: Of course, when you put anything out that’s going to be this widely used, it’s going to have a ton of feedback … MB: I would say, even on a small scale trying to bring in more frontend devs to work on the project helps. I really needed to find people to help me out and review my code. 18F has these things called guilds. We have a frontend guild, which worked on our CSS coding style and language. Those standards give us a common language for contribution.

Q&A

MAYA BENARI Sarah Drasner talks to one of the designers reponsible for revolutionising government websites SD: You recently helped launch the US government’s new web design standards (see page 47). How did this come about? MB: I’m part of an organisation called 18F, which is a new digital shop inside the government. 18F is a growing, emerging technology piece. The web standards were a huge collaborative effort between 18F and the United States Digital Service (USDS), with help from a wider audience of agencies. SD: Did you use any libraries to build your components? MB: Going into this, we said, ‘Here’s our chance to start from scratch. How

40

february 2016

would we build this without everything else that exists?’ We really like using Bourbon, as well as Neat for its grid system, so those are some libraries we’re using. Other than that, we pretty much built it from scratch. We did another custom grid system on top that was based on Neat, so you can use classes if you need them. If you want to use more Neat includes, you can. SD: It sounds like flexibility was really important to you ... MB: The idea was to provide a really solid foundation for developers, but to also provide flexibility if they want to change things. We wanted to make everything

SD: There have been times where government sites like HealthCare.gov went down because there wasn’t a strong enough collaboration between tech and the government, so this seems like a big step in the right direction … MB: Actually, the thing with the government healthcare site was one of the lightning bolts that helped everyone realise this was important. We couldn’t just keep doing it the way we’d been doing it for decades. We’re working on a bunch of projects now, everything from immigration to healthcare and the VA, which deals with getting veterans their benefits. The whole idea is to make an impact on how the public experiences governmental digital services, and fix what’s broken. SD: If you’re dealing with a government website, typically it’s something you have to do. If that user experience is bad, it can really affect people’s lives. MB: Working on this definitely touches people’s lives in a very real way. For private companies, their main agenda is to increase profits or click-through rates.


Q&A

SD: What do you think were the main problems you had to tackle? MB: Things are made to reflect weird bureaucratic hierarchies, and tied into old ways of doing things. There’s a lot of fear of change. It’s really important work, and I think it’s a new movement. This is the first time there’s been a huge amount of momentum for technological change in government, and it’s really amazing. The best of the best digital people are flowing in. 18F started up with just a few people 18 months ago, and we’re at over 150 people today. There are probably over 50 people at USDS, and they have these digital teams they’re injecting all across government. People are really feeling motivated by that. Some of these people are coming from big companies, because this is the type of work that’s worthwhile for them. SD: Giving designers some confinements to work within means they all start to share the same voice ... MB: We’ve had a lot of feedback through GitHub, and we’re trying to keep up to date with any issues. Some agencies are prohibited from using GitHub, so the challenge remains how to involve them. We’re thinking about old fashioned email and periodic meetings, so people can come in and hear what’s happening. That’s something I think would be fun going forward. SD: It’s very impressive that you were able to use government colours in a clean, beautiful design and have it meet accessibility standards. MB: In the palette section, we have examples of how to use the colours, which have been tested for contrast based on WCAG 2.0. Accessibility is probably one of the key differentiators between what we’re doing and some other

frameworks out there. For instance, a lot of developers like Bootstrap because it’s so comprehensive, but essentially you have to rejig the whole thing to make it accessible. Here, you get it from the start, from colours to the code. We have that documentation with each component you’re going to use. SD: Have you had people adopt it? How has that gone? MB: It’s a little hard to keep track of. We have a spreadsheet for the different sites that have started using it. There’s about 34, with new websites using it every week. One of the most fascinating to me was usajobs.gov. If you want to work in the government, you have to go through them, and it’s a challenging experience. But they have a whole team that’s been charged to redo it. They blew our minds by taking our guidelines and

What are you doing?’ But that’s the beauty of it, it’s flexible and we’re happy to see so many people wanting to take it up. SD: How will you accomplish updates in the future when a bunch of different websites are using it? MB: Right now we’re essentially offering HTML, CSS, and Sass for people to add to their site, so one of our next steps is to really think about distribution. We’ve already created a Ruby gem, so somebody can add that and have the style guide on their project. We’re working on publishing this as a package to NPM, so you can just ‘npm install web-design-standards’ and have this on your project. Then when we do an update, you’ll be able to change what version you’re using from the command line. We’ve started keeping a really detailed changelog that uses semantic versioning, so you can see

“I think it’s a new movement. This is momentum for technological change in government, and it’s really amazing” making their own design system based off it. They clearly outlined where they were going to purposefully deviate from us, because they have different needs, and then where they were going to have new components that they thought could be folded into the main one. It’s been super-cool to see their take on it. SD: Are most people following these guidelines to the letter, or taking them and going off on their own? MB: The community has been totally embracing it. Some people are doing amazing jobs, and their implementation of it is better than I expected. Of course, there are a few examples where people just had to make something quickly and I’m cringing a bit. I might want to rein a few things in. If people don’t see what they want, they’ll just make it anyway or they’ll make it hastily, and then I think, ‘Wait!

whether the changes are just patches, a new feature, or a breaking change. SD: What’s the next step? MB: Right now we’re at the alpha stage, and it needs a lot more time and TLC before we can say confidently that this is a 1.0. We don’t plan on changing the markup too much. The goal is that it’s going to be solid, which is another thing that can help mitigate some updates moving forward. The idea of encapsulating some of the markup into a JS framework is interesting, but on the flip side, that could make things more complicated because we want our sites to be able to work without JavaScript. We’re definitely thinking about it, but only time will tell.

PROFILE

For the government, the customers don’t have a choice. They can’t use another, better, more usable thing. A lot of times they’re left feeling really frustrated or helpless because things are not made with their needs in mind and they can’t complete the tasks they need to.

Maya (www.maya-benari.com) is a designer and frontend developer at 18F, which is part of the General Services Administration (GSA)

february 2016 41


NEVER MISS AN ISSUE!

#274 DEC 2015 Discover how to build perfect layouts without media queries, and take a look at the 15 APIs that will solve your dev problems

#275 JANUARY 2016 Your guide to great UI design. Plus: We introduce flexbox – the CSS module that will help you tackle complex site layouts

SAVE UP TO 45% WITH A DIGITAL SUBSCRIPTION SEE PAGE 24

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)

#269 AUG 2015 Designers share their tips for building a better web. Plus, discover how to optimise your sites for mobile


CATCH UP ON ANY ISSUES YOU’VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS

#273 NOV 2015

#272 OCT 2015

#271 SEPT 2015

#270 SUMMER 2015

Join the Sketch revolution! We help you make the switch to the new top tool. Plus: what makes a great portfolio

We reveal the UX insights you can glean from Google Analytics, and explore how to design for smart devices

We tackle the new design challenges presented by the advent of wearable technology

The freelance special: we look at the pros and cons of going it alone, and share tips for landing big clients

#268 JUL 2015

#267 JUN 2015

#266 MAY 2015

#265 APR 2015

We run down the 10 top tools you need to build responsive sites, and introduce the Genesis Framework

Discover how to plan, build and maintain WordPress themes, and manage large CSS projects with ITCSS

What should you charge? How do you ensure you’re paid on time? Discover this and more in our special money issue

Val Head shares her secrets for amazing interface animations, and we reveal how to switch from CSS to Sass in WordPress

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


GALLERY Inspirational sites SARAH DRASNER

Sarah is a senior UX engineer at Trulia and a staff writer for CSS-Tricks. She is based in San Francisco, California

Sensational design and superb development

w: sarahdrasnerdesign.com t: @sarah_edo

GREENSOCK, SLIDEBARS

WWW.VIBRANTCOMPOSITES.COM Sam Dallyn (design) samdallyn.co.uk Luke Tongue (development) luketongue.com This site for Vibrant’s haptic communicator Thumper has a beautiful balance of subtlety in motion and moments of innovation and impact. I was immediately drawn to the attention to detail, use of asymmetry, and how precise and refined the small animations were. Site animator Chris Gannon’s (gannon.tv) explanation of what was done makes it even more intriguing: “Whilst working out the speed of the Thumper pulse, we had to refer to an algorithm that says if ‘m’ is the slope

44

february 2016

of the line, the speed should be proportional to sqrt(1+m2).” That could not have been easy! A perfect example of how informative animation can catch the eye of the viewer, educate them and be beautiful, all at once. And Gannon is a master. Small visual effects on scroll echo the surprise and interest that parallax scrolling usually tries to achieve, but are subtle enough that the viewer can feel at ease while navigating. A beautiful overall synthesis of information and design.

“The simple geometric animations really tell the story of the product and how it works. They say so much with just a small amount of motion” VAL HEAD


Inspirational sites

WEBGL, 3D CSS, CANVAS

VISUALIZER. HALOWAYPOINT.COM Active Theory activetheory.net This site for video game franchise Halo has such an extraordinary navigation structure. The user moves through an intuitive, timeline-esque view, with fractured pieces of Halo helmets acting as user engagements for the game. “We used WebGL particles that use a 3D model to form the shape of the game characters’ helmets, 3D CSS to animate in the pieces of user content, and Canvas to draw and animate the timeline at the bottom,” says Rachel Smith, interactive developer at Active Theory. “It’s a good example of combining web technologies depending on what the interface needs.” The mysterious shattering and rebuilding of elements could be disorienting, but instead, feels completely fluid. The slight tilting of the user stories, and even elements such as contact modals, unite the design and motion across every part of the site. The spatial atmosphere becomes a language in itself.

february 2016 45


GALLERY Inspirational sites

SI T E OF T HE MON T H

WEBGL, 3D SOUND, SVG, GREENSOCK

WWW.OVERTHETINYHILLS.COM ultranoir ultranoir.com Over the Hills was created by French digital studio ultranoir, working with illustrator mcbess to present his group’s EP of the same name. The mixture of sound and exploration are perfectly coordinated to create a captivating experience. “We tried to push the boundaries of what we thought was possible with interactive 3D and sound on the web. We had fun playing with mcbess’ twisted cartoon style in building funny interactions based around a 3D spatial sound experience,” says lead developer Jérémy Saint-Prix. The project even made it into the real world, when the gramophone built for the project was 3D

46

february 2016

printed, painted by mcbess and exhibited in a Parisian gallery. The WebGL effects work seamlessly with the drawings, and since it’s a pretty unique effect, the user remains curious about what they’ll find at each turn. They can explore infinite tunnels, scratch their own turntable and activate the music themselves, but guidance is given so they never feel lost in this new world of UX. The whole experience is monochromatic, save some very small bursts of colour. Overall, the marriage of music, interaction, incredible design and innovation have kept me coming back to this site for months.


Inspirational sites RUBY, BOURBON, NEAT, SCSS

PLAYBOOK.CIO.GOV/DESIGNSTANDARDS 18F 18f.gsa.gov

“The tiniest details have been considered, such as panning the sound as the world is pivoted”

Anyone who has used a US government site has, for the most part, endured a mixture of disorienting design patterns and dysfunctional code. This set of design standards for the US government is a breath of fresh air. One of the things that’s most powerful about this set of design standards is its accessibility. “We have examples of how to use the colours, and show examples that have already been tested for colour contrast. Accessibility is probably one of the key differentiators between what we’re doing and other frameworks,” says lead frontend engineer Maya Benari. It’s impressive that this framework has taken measures to be well-built,

beautifully designed and carefully thought-out. The team took the time to write good documentation, not just for what CSS should be written, but for how it should be written. “That provides that gel, that language that you all speak together,” explains Benari. Design standards and frontend style guides with these types of systems put in place at the get-go promise an easier system to build off and maintain in the future. It’s very exciting work, especially as it pertains to a user experience that can really impact people’s lives and livelihoods. Interview with Maya Benari: page 40

TIFFANY RAYSIDE

february 2016 47


GALLERY Inspirational sites

SCSS, THREE.JS, GREENSOCK

WWW.GREENWOODCAMPBELL.COM Greenwood Campbell greenwoodcampbell.com In a design climate where websites are all beginning to share the same layout, Greenwood Campbell breaks the mould without sacrificing ease of navigation. The treatment of text and layout on the digital agency’s site is magazine-esque, with bold typography and asymmetrical compositions. “We studied the websites of many digital agencies we liked, and noticed two main UX approaches: linear and non-linear content discovery. We tried to find a solution that would present our office space and show the size of our company, but most importantly bring the feeling of trust and

48

february 2016

frontend developer at the agency. “By adding on some JavaScripts experiments I was personally working on, we ended up with the idea of a virtual tour, spiced up with small video sequences.” The Greenwood Campbell site uses a variety of techniques, both in terms of the technology used and the way the information is presented. Users can discover more about the agency through key interactions that queue up notes, or through more distinct full pages. The one constant is that the interactions feel seamless and leave the user in charge of their passage.

“A deep, engaging site that shares the agency’s design culture while encouraging visitors to explore its physical space. I love the subtle touches of animation” DUDLEY STOREY


Inspirational sites

THREE.JS, GREENSOCK

WWW.OMMEXPERIENCE.COM Jean Helfenstein www.jeanhelfenstein.com A personal project by creative director Jean Helfenstein, this site showcases the three phases your brain goes though when trying to come up with a solution to a problem. ‘Extract’ (“When you have a problem but don’t know the solution,” says Helfenstein) is visualised as a black sphere representing a brain, which is solid and inaccessible. ‘Sort’ (“When you have all those wild ideas, but you need to analyse them to see if they’re good”) is shown as a collection of particles. When the user rolls over each, it either fades out or transforms into a bubble. Finally,

there’s ‘connect’: “Here you are able to connect the good ideas to find the idea that will solve your problem.” This project does a lot to immerse me in a new world. The light effects are like characters in themselves, and I’m particularly drawn to the movement during the user participation. I’m always impressed when personal projects look like they’re created by a team. But aside from the amount of work this must have entailed, the design and development are so smoothly integrated it makes sense it was a single person’s creation; clearly a labour of love.

february 2016 49


GALLERY Inspirational sites

WEBGL

WWW.SENNHEISER-RESHAPINGEXCELLENCE.COM Philipp und Keuntje (design and development) philippundkeuntje.de Artificial Rome (sound) www.artificialrome.com Marketing sites have a hard job of making an object seem epic and monumental, but Philipp und Keuntje took that challenge and ran with it. In this site for Sennheiser’s Orpheus headphones, users can explore a monumental soundscape, or create their own. The interface invites users to explore a forgotten stone ruin, where their duty is to both destroy a giant stone pillar and simultaneously create a track, generated by the sound of their strikes. They can then share their track with others within the site, or on other social networks.

50

february 2016

Unit director of digital Mike John Otto says, “With an experience that includes both film elements and 3D graphics, one of our key objectives was to ensure these transitions were seamlessly executed. The website needed to have wide reach as well as the highest possible visual quality. WebGL was the logical choice.” The mixture of video and WebGL with a shared grainy quality, coupled with many bass tones in the sound, give the illusion of a lot of mass. I particularly enjoyed the marriage of creation and destruction as a tome.


YOU ARE INVITED TO JOIN NET PRO! For more than 20 years, net magazine has been at the forefront of web design and development. Join net Pro and as a special introductory offer, you can save £30!

WHAT YOU’LL GET 13 issues of net in print and digital Annual Industry Report worth £100 Discounts to industry awards including Generate Inspirational design annual worth £9.99 Monthly net Pro email newsletter Special discounts from selected design industry partners

WORTH £371 JOIN TODAY VISIT www.myfavouritemagazines.co.uk/netpro Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 13 issues in a year. Prices correct at point of print and subject to change. Full terms and conditions myfavm_ag/magterms. Offer ends 31 January 2016


Sublime design & creative advice

DESIGN CHALLENGE

THIS MONTH FEATURING...

FOCUS ON

This month ...

57

Most services and apps require some form of onboarding process. Sam Kapila explores the key to making one that delights your users

THEME PARK PROFILES

A BIG A IL S INC L A IR Abigail is a frontend developer and illustrator based in Liverpool w: www.abigailsinclair.co.uk t: @abegale

C L AY P RU Z IN S K Y

PROFILE

Clay is a lead designer at BluClay, and has worked with clients including Shimshi and Pakalolo w: www.bluclay.com t: @bluclaydesign

58

We chat to Hello Monday, the agency that prides itself on being a creative playground rather than a production factory

W E Z M AY N A R D Wez is head of design at Vertical Leap and Brighstone FC’s players’ player 2014/15 w: www.wezmaynard.com t: @wez

BRIEF

HOW WE BUILT How Carmichael Lynch and Resn created an interactive dendrochronological timeline to explore Subaru’s environmental legacy

64

This month we’d like you to design a website for a theme park. It can be an old-school offering with ferris wheels and candy floss carts, or a new hi-tech version with huge rollercoasters, lasers – you name it! The fun should start with your website.


Design challenge

1

3

2 4

5

ABIGAIL SINCLAIR

COSMOS A new theme park takes visitors on a rollercoaster ride around the universe

Cosmos is an aspiring astronaut’s paradise with rides to make a thrill-seeker’s heart race and facilities to stimulate and inspire young minds to learn more about the universe. The site is targeted at families looking for a fun day out and young people who want to get their adrenaline pumping. As this is a brand new theme park, the homepage is targeted towards new visitors and gives an idea of what they can expect from the park before they arrive. The homepage makes it really easy to book your tickets. Dynamic elements such as the countdown to the chosen date, along with subtle parallax effects and hover transitions, add a touch of depth and intrigue to keep users engaged. As the theme park’s popularity increases, the focus of the homepage would shift towards returning visitors, highlighting seasonal events and promotions.

CLOSE UP (1) The bold hero image provides visual confirmation of what the park is about and who the target audience is. A subtle parallax effect gives the site depth and enhances the space imagery. (2) The ticketing system is a key feature – the large, prominent booking form is important for conversions. The form makes it easy for both new and returning visitors to book, without having to search the website. (3) The countdown mimics the countdown to a rocket launch, and is triggered when the user selects their preferred visit date. (4) Key areas of the park are highlighted and explained, with clear links to more information. (5) Photographs are included on larger browsers, but the design is stripped back on smaller devices to increase load speed and ease of navigation.

MY MONTH What have you been doing this month? Gearing up for Christmas; working on my art prints and tinkering with my shop website. Which sites have you visited for inspiration? Behance and Instagram are great for drawing design inspiration from a variety of disciplines. What have you been watching? Mostly my copy of Fallout 4 gathering dust because I’ve been too busy to play it! What have you been listening to? The Adventures in Design podcast. #circleoftrust

february 2016 53


SHOWCASE

Design challenge

1

2

3

4

5

CLAY PRUZINSKY

THE PARK OF DOOM MY MONTH What have you been doing this month? Starting up my podcast all about design in the world. Which sites have you visited for inspiration? Amusement park sites across the country, and Behance portfolios. What have you been watching? The Walking Dead, American Horror Story and old horror movies. What have you been listening to? Modest Mouse and a lot of Cake radio on Spotify. It seems like the one station we all agree on.

54

february 2016

A simple design and lots of imagery help ramp up users’ excitement on this site

The Park of Doom is a simple, easy to use site for visitors of all ages. A key feature on the homepage is the large photos, videos and details about the ride experiences on offer – these aim to boost up children’s excitement about the park. A simple navigation menu opens up to provide more details about the ride section. The user can then click on the link to open up that particular ride’s page to see more photos, videos, height and age information. There will also be calls to action for buying tickets, details of hours of operation and more. The interface feels exciting, starting with a single, close-up photo of a rollercoaster. The videos will open fullscreen in a lightbox within the site, and interior pages will feature parallax scrolling, with large images broken up by white space.

CLOSE UP (1) To help give users a lively experience, photography plays a big part in the site’s design. Photos have been taken of individual rides from both a rider’s point of view and the viewpoint of a spectator on the ground. (2) A simple navigation menu opens up into a larger area that gives more details about the rides section, as well as a photo. (3) The typeface I picked was Avenir Next, in many different weights. This was chosen as it’s clear and easy to read for users of all ages. (4) To keep the site simple, I wanted to limit the scrolling on the homepage. What you see will just fill up the user’s screen on any device. (5) The background colour can be light or dark, depending on the image behind the type for each of the interior pages.


Design challenge

1

2

5 3

4

WEZ MAYNARD

MORON MOUNTAIN

MY MONTH

An app links visitors in the world’s most connected theme park

Perched atop a mountain in a not too distant galaxy, high-adrenaline thrill park Moron Mountain accepts visitors seven days a week, 24 hours a day. Moron Mountain has no issues getting its customers to return on a regular basis. How? By being the most connected theme park in the universe. Mobile applications that sync with wearable devices (like the Apple watch) record everything the user does in the park. This allows visitors to rack up points that go towards park perks, keeping them coming back for more. The site itself centres around a search bar that lets users search the entire site and returns results in a similar way to a search engine. It would use a framework like Solr – this is relatively future-proof because it’s scalable, fault tolerant, distributes indexing and provides load-balanced querying.

CLOSE UP (1) The site search connects to the full site database using Solr. As the user types what they’re looking for, the system suggests pages (by section) in the same way a search engine would. (2) A large visual banner provides interest on the homepage. Further interest could be generated by making use of CSS3 animation techniques on roll-over. (3) The ride sub-menu enables users to quickly look at the theme park’s main attractions. Once selected, the user is presented with the latest images of the ride, a video showing what it’s like to ride and a map showing its location. (4) The ‘MM Connect’ bar shows the latest connected visitors to the park who have been on the selected ride. jQuery would be used to keep this feed moving and visually appealing. Visitors can view riders’ profile pages and connect with them via the app. (5) Attraction entry kiosks work in a similar way to Apple pay stations – users can log when they go on a ride with a wearable connected device.

What have you been doing this month? Designing the nursery for the imminent arrival of our firstborn. Which sites have you visited for inspiration? The mobile version of epicurrence.com really pushes the envelope. The Jam3 sonsofgallipoli. com is a great example of how video and web can work seamlessly. What have you been watching? Attack on Titan and season 2 of Fargo. What have you been listening to? The Operators, Fickle Friends, Bear Mountain, Amber Run.

february 2016 55


NEXT MONTH

THE FUTURE OF CSS From CSS Modules to PostCSS: the latest exciting developments and how to use them today!

PLUS Create a static site with Material Design Lite

Design an interactive interface with Principle

Node.js for designers: build a simple web app

ISSUE 277 ON SALE 21 JANUARY PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT

myfavouritemagazines.co.uk DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO

net.creativebloq.com


Focus on

FOCUS ON

ALL ABOARD Sam Kapila shares her advice for getting new users on board

PROFILE

Almost all the services and apps we use today require some sort of sign up process and onboarding experience. There are plenty of explanations (both good and bad) of how to navigate through the different apps’ experiences. For a wellcrafted onboarding process, the design and content need to work together to make a simple, quick and delightful experience. Simplicity, visual hierarchy and lots of white space can help draw the eye to the action the user should complete: typically an input field and a few buttons. In addition, the actionable elements should stand out strongly. The tone of the content matters and should reflect what the forthcoming action is. The onboarding process should be as quick as possible, so users can get on with using the service. Stay away from asking for data that isn’t required; focus on the minimum you need to make an account. All the other optional data can be added by the user at a later date, in their account or profile settings. The process should be supported by simple notes that let the user know there are a few steps. Finally, a very important part of the process is bringing delight to the user, so they’re excited about using the product. You can make the user feel welcome with things like user-friendly feedback prompts (so no ‘ERROR 422 User not found’). From a design point of view, visual cues about what the user is doing – such as checkmarks for input validation, or a shade of green for feedback – can be helpful.

Sam (samkapila.com) is a designer living in Texas and an instructor at The Iron Yard, an international, immersive coding school

1

2

3

(1) Slack (www. slack.com) follows the golden rule of keeping it simple. Feedback prompts are quick and wellwritten so starting a group takes less

than five minutes. (2) Cotton Bureau (www.cottonbureau. com), lets users sign up with just an email address and a password. Once they are ready for

a purchase they complete their profiles, which are filled with hilarious placeholder text. (3) Grocery delivery service Instacart (www.instacart.com),

keeps its signup quick and simple. The submission button reads ‘Shop now’ (rather than a vague ‘Submit’) and leads to the main shopping page.

february 2016 57


INFO Location: New York, Copenhagen, Aarhus (Denmark)

Founded: 2006 Areas of expertise: Digital strategy, innovation, concepting, branding, UX, UI, development Selected clients: Google, NASA, YouTube, MoMA, Greenpeace, Bang & Olufsen Awards: 92 FWAs, 30 Awwwards, Awwwards Agency of the Year 2014 and 2015


PROFILE

HELLO MONDAY www.hellomonday.com

The agency that makes Monday mornings something to look forward to We spend our whole lives at work, so as possible? It sounds like a pipe dream, but Hello Monday explicitly aims to make it a

a production factory’. Fine words, but how does that work in practice? We chatted to president

net: You say Hello Monday’s ethos is to turn the worst day of the week into the best one. Did you AA: There has always been a bit of a stigma that comes with the Monday work day. We believe work should be fun and inspiring, even on a Monday. I do not think any of us really hated Mondays, but we believed they could be much better. net: Your mission statement says: “The equation experiences.” How do you keep your team happy? AA: It is very hard to be happy or creative when you’re overworked, so we make sure people have time for a life outside work. We always try to make Mondays better and keep our teams happy, but I think one of the more important things we we work on projects we believe in. We build tight relationships with clients, so it’s not ‘us and them’, but one team. When each of us individually feels better, we all work better as a team. Our employees also work on no more than one project at a time. That might not be good for revenue, but we’re more concerned about keeping the quality high.

59


SHOWCASE

YouTube Kids Hello Monday worked with YouTube to create a safe place for kids to watch video content online. The team designed the entire brand identity, including the child-friendly user interface

net: You have three offices in three different cities. How does that work? AA: Of course, it does come with its

over Skype or Google Hangouts, and take place in the mornings for NYC and afternoons for those in Denmark.

net: Tell us a bit about how your offices function, day-to-day.

so we have energy for the rest of the day. Meetings, inspirational afternoon outings, and cocktails on Fridays are a part of the weekly agenda. We do not like to be stagnant in our processes and that

means keeping work fun by breaking up the week with various activities. net: Can you tell us about some of your favourite projects this year? AA: YouTube Kids was a big milestone for us – it took a year to complete, and it was extremely well received among kids as well as in the design community. This collaboration led to branding projects for YouTube Gaming and Music. We have had many interesting projects this year: renewing the US healthcare system, saving the world’s big cats, supporting free expression, searching for life in space, revamping the FWA (we look forward to sharing this in a not-so-distant future). It’s hard to pick a favourite.

revamp? Are you influenced by the current

Team Dynamics The close-knit New York team, including president Andreas Anderskou (top row, second from left, with rabbit ears)

60

AA: It depends. Some brands have built up a lot of equity over many years, and if that equity is positive and valuable it sometimes makes more sense to optimise the current brand rather than scrap it completely. It’s important to look at the brand’s history, its audience, as


OFFICE CULTURE

MORTEN SØLVSTRØM Senior art director

What’s on your desktop today? The mandatory MacBook. LaCie disks, a G-RAID disk and a thunderbolt SSD reader for video and photography. Google Ideas In some countries, citizens are denied access to information online. Hello Monday designed the site for Google Ideas, a global think-tank that supports free expression, to fight against this

well as considering the organisation’s business goals and roadmap, the stakeholders, and so on. Branding requires thorough understanding of the big picture. We always make sure we know if our clients are actually ready to move away from what they have; why they are having a revamp in the first place. For larger brands it’s important to look at the bigger ecosystem, and think about the entire architecture. It’s not just about the current rebrand, but how it fits into a system and how it will look in the future.

the pressure on due to the artistic subject matter? AA: The MoMA site was exciting from a conceptual point of view; creating a surreal environment for a surreal artist. MoMA puts a lot of trust in us, so any pressure comes from ourselves.

Hello Monday ‘stamp’ people can AA: We used to have a hidden signature (when users right-clicked, ‘Hello

Monday’ would show up), however even though most of us are Peter Pan at heart, we have grown up a bit more now. Our goal is not to promote ourselves inside the projects themselves. It is not about us here, it is about what we need to achieve through the project. net:

curse to remain independent? if you ever go down that route as an agency it is important that there is a strong ideological match. It is like a relationship: if you are not on the same path, it is bound to fail. The demand for growth is a big challenge here. It works well for some agencies and horribly for others. We think it is important we never lose our autonomy or the magic that got us to where we are. One great piece of advice I would give to companies or organisations that want to acquire agencies would be: do not do it for the money. When money is driving creativity, everybody starts to compromise in areas they shouldn’t. Focus on the opportunities and relationships instead.

What do you have on the walls? A poster by Viggo Vagnby that shows a police officer stopping the traffic so a family of ducks can cross the street.

What hours do you work? We are all very self-managed, so it depends. A lot of companies believe the key to productivity is strict work hours, but I think it’s more important to trust in the people you work with.

What else do you do in the office? Where do I start? The office is our second home and family. We are a small office, so we are very social. We cook and drink together, and we play a lot of games – especially on Fridays, along with beers.

How often do you all hang out? There is always a lot to do here in New York, and people are very proactive about social activities. This summer we had the Hello Monday Summer Olympics, which culminated in an epic go-kart race (I won the entire thing, by the way).

Describe your working culture in three words Passionate, playful and curious.

61


SHOWCASE

TIMELINE

A look at the dates that shaped Hello Monday OCT 2006 Hello Monday is born in a small town in Denmark, with two designers and a dev

JAN 2007 The agency wins its first FWA Site of the Day award Wove Created by Polyera, Wove is a wearable band with flexible display technology. Hello Monday used renderings based on 3D models to enable users to interact with the band on its website

MAY 2008 First meeting about defining initiatives that would make Mondays better

JUN 2009 Opens its office in New York

JAN 2010 First Google project: Demoslam.com

net: What can you tell us about Wove? AA: Wove (www.wove.com touch-enabled screen display that can actually bend. Wove is rethinking the concept of wearable technology, making it more personal and bridging the gap between aesthetics and digital. It’s still in the early stages of development. The band connects through bluetooth and is controlled through your phone. Anyone interested in helping develop it can apply to be chosen for a free prototype.

MAR 2010 Copenhagen office opens

SEPT 2011 The company reaches 15 employees and begins to tackle more complex projects

DEC 2013 First and only year with a deficit. A chef (or ‘office mom’) is installed in each office

MAY 2014 Back on track again. Hires a minister of culture to help make Mondays even more fun

is here to stay? AA: Yes. It reminds us of the early stages of smartphones, when formatting was an issue. The iPhone could look to see what other smartphones were doing and what they were doing wrong and have a base of what not to do. We’re still in such an early stage of development that distinguishing the motive of wearable technology (as distinct from a phone or computer) is crucial. Wove is not trying to create another version of an Apple watch. This is an outlet for people to express themselves and actually take a break from their phone or computer. net: You won an award for your user experience. Why is UX important to you? AA: UX as a part of the process is a key ingredient in all our work, and has been even before it became a bit of a buzzword topic and an area of expertise. Everyone at Hello Monday is essentially a UX

62

designer, in the sense that we all consider how people interact, perceive and react to the solutions we do. Our approach to UX design rarely covers things like A/B testing, bigger green buttons, user focus groups and so on, but instead doubles down on how we make the experience of using our solutions clever, fun, relevant and memorable. That doesn’t mean making our designs boring – but rather ensures consistency and quality, as it reminds us that the solution serves a bigger purpose. Defining why we are concepting, designing and developing often holds the insights needed to let UX become a part of the entire project process. net: What would a prospective employee have to do to impress you? AA: When people are trying to get jobs at Hello Monday, we ask ourselves: would with this person? It’s often a good sign if we do. We look for people who are skilled and ambitious at what they do. Having passions and creative outlets their work is important. Above all, we just like people who are nice and kind. Our work environment is very intimate so the ability to get along with people is crucial. Next month: We chat to Stripe’s UI designer Benjamin De Cock


SHOWCASE

How we built

HOW WE BUILT

ZERO LANDFILL How Carmichael Lynch and Resn created an interactive timeline to showcase Subaru’s impressive environmental credentials

3 1

2

5

6

4

BRIEF Subaru tasked creative agency Carmichael Lynch and digital studio Resn with capturing the spirit of its zero landfill status in an interactive timeline that could house video, photos, text, animation and links to other content.

64

february 2016

CLOSE UP (1) The main view of the interactive timeline is the tree rings. Each ring features a clickable link, beginning with the oldest in centre and getting more recent. (2) The rings open and spread organically, and data points appear and disappear on hover. (3) Users can toggle between Time mode and Category mode, enabling them to explore the site as a chronological timeline or filtered by themes

like movies or ways to help. (4) On click, the rings unfold into a more traditional horizontal timeline, including months and days. (5) While not identical, the mobile version of the site preserves the fluid presentation of time/events in an endlessly scrolling screen. (6) Although the mechanics of the tree ring metaphor aren’t possible on mobile, all the content from the desktop version remains accessible.


How we built BRIAN CAVALLUCCI

RICH MCGEHERAN

SIMON JULLIEN TIMELINE

The key stages in the Subaru project 3 JUNE Brian is the national advertising manager at Subaru of America w: subaru.com t: @bcavallucci

Rich is executive interactive producer at Carmichael Lynch, and helps bring ad ideas to life w: carmichaellynch.com t: @rmcgeher

Simon is the interaction and creative development director at Resn Amsterdam w: resn.co.nz t: @resn_has_no_i

Resn is awarded the project after presenting three concepts and merging two of them

4 JUNE Subaru is America’s first automotive assembly plant designated as zero-landfill. In 2015 the company announced it would share its knowledge with the National Park Service to reduce landfill waste from the parks, and tasked creative agency Carmichael Lynch with the redesign of www.subaru.com/csr/environment to showcase its environmental legacy. Carmichael Lynch partnered with Resn to provide an immersive experience based around the metaphor of tree rings. Here, the creators walk through the creation of Subaru’s dendrochronological journey. net: Tell us a bit about your brief ... BC: We were looking to firstly show the history of our environmental stewardship, primarily with our commitment to all Subaru global manufacturing plants being zerolandfill. Second, we wanted to highlight the video documentary series we created to show how our National Parks are working to achieve zero-landfill. And third, to give consumers an opportunity to get involved in this effort. RM: We explored countless formats for presenting events over time and found the perfect answer: an interactive, organic and ever-growing timeline in the form of concentric tree rings. net: How did you approach the concept? SJ: We had to design and build an interactive timeline that could house video, photos, text, animation and

links to other content. We took a mathematics-first approach to the tree component, and looked at what we know about the geometry of circles and lines. Through prototyping, we found a way to transform one into the other, which allowed us to smoothly move between the two.

Creative kick-off with Carmichael Lynch and Resn

22 JUNE Concept and approach are approved

30 JUNE-17 JULY

net: How did that develop into the final navigation design? SJ: By applying the right amount of rotation and scale based on the line number, point index, distance from the centre, and zoom level, we eventually reached the sweet spot at which every step of the transformation feels right. Using this solid foundation to construct the tree, we could focus on what makes it visually appealing. With hundreds of changing numbers at our disposal, the timeline became a coding playground for us to experiment with the look and motion of the tree.

UX and design phase for desktop, tablet and mobile

net: How complicated was the coding? SJ: From a technical standpoint, the part of the experience that required the most stamina is the system that keeps the years, months and moments on the timeline in sync. On every page, at any given zoom level, the tree and its rings represent a specific point in time. The transformation from a collection of interactive, organically shaped circles to a stretched out timeline (on which the connecting points are in constant motion) had us scratching our heads.

Initial site launch: phase 1 goes live

13 JULY-7 AUG Prototyping, with a focus on the behaviour of the timeline rings

13 JULY-8 AUG Website development, animations, refinement

25 AUGUST

15 OCTOBER Phase 2 live, with the addition of How Can I Help and Categories sections

9 NOVEMBER Awwwards SOTM awarded for the month of October

february 2016 65


SHOWCASE

How we built

1

2

4

3

EVOLUTION

Carmichael Lynch’s Rich McGeheran explains how the timeline developed (1) The timeline brief from Carmichael Lynch’s brief to Resn was very simple. (2) Resn presented a pair of ideas we really liked, one of which was based on an abstract string concept. (3) The second idea was based on ellipses. Collaborating, we combined the two ideas to get to our tree ring concept. (4) A tree ring theme was a natural fit, so we began development on the concentric circles structure. (5) With the tree ring navigation complete, we developed the organic ‘opening’ of the timeline and how users would experience it. (6) Finally, we developed the detail pages that needed the flexibility to house thousands of pages of multi-media content. 5 6

66

february 2016


How we built

net: What was the biggest challenge in terms of site development? RM: Getting the site to work in a CMS that’s not entirely architected for an experience like this, and to cohere to our process was a bit of a challenge. We had to work within the bounds of our integration process and bring a partner that wasn’t familiar with our CMS up to speed. We built a RESTful endpoint that read from AEM’s JCR repository and kept the rest of the application in the ‘/etc/designs’ folder that just serves flat HTML. net: Why did you decide on a dedicated mobile site over making it responsive? RM: The desktop version is so experiential it didn’t directly translate to a mobile experience, so we worked on carrying over themes and visual hints from the desktop experience. Spacial limitations meant the tree ring timeline navigation wouldn’t work well on mobile, which required us to design a completely different view. Instead we utilised a vertical scroll and click-toexpand functionality. net: How did you tackle the demands of different browsers? SJ: Our browser matrix included Chrome, Firefox, Safari and Internet Explorer. Given that Internet Explorer is the least compliant with our code, extra attention and exceptions were needed to get the build into a solid state.

Bright and bold In the ‘Details View’, users can navigate through a visual representation of the timeline, to explore Subaru’s journey to becoming zero-landfill

net: How did you enhance the UX? SJ: With a unique, unfamiliar interface come certain challenges in ensuring a user understands where they are, as well finding the balance between intrustive navigation and providing something the user can explore for themselves. In the top left is a persistent year and month component, which makes this clear at all times. A collapsible scrubber along the right side of the screen allowed users to quickly jump between years, months and days. The user can navigate through clicking alone, or via scrolling and mouse keys.

net: How did you ensure the site worked as smoothly as possible? SJ: When working on a project of this nature, an FPS meter is ticking in the corner of our screens at all times. Awareness of the frame rate, and when it changes, is vital to keep the experience smooth. Getting to know the application and finding the right moment to do the heavy lifting is key. To ensure the site would stay responsive under load, we utilised CDN caching for all the API calls and the HTML files/assets. net: What was the biggest lesson you learned during the project? SJ: That we should design and plan for a very flexible amount of content, not just the ideal amount. net: If you were to start again, is there anything you’d do differently? SJ: The CMS that runs subaru.com played a very key role in managing the sheer volume of data the site contains, and the needs of this project stretched it in ways that ended up being a challenge for everyone. Next time we’d take better stock of the capabilities of the CMS and craft our build around those.

Going mobile The team built a different version for mobile devices, replacing the tree ring navigation with something more pared-back, but ensuring users could still access all the content

Rachel Nabors’ DevTools Challenger for Firefox

february 2016 67


FEATURES Cover feature

Levin Mejia runs down the design tools you should be experimenting with in the coming year

P

rototyping tools can help us solve design problems before writing even a single line of code. Prototypes bring our ideas to life, and in doing so can change the way we design. Today’s clients want to see interactive prototypes; these show the concepts in action and help them see how their ideas will take shape. The possibility of quickly sharing different iterations of ideas with clients can accelerate the design process. This flexibility becomes even more significant when we consider the many device formats we must now factor in. With so many prototyping tools now available, perhaps many designers are left wondering how to choose the best one, and simply fall back on familiar methods. Ultimately, the goal is to pick up a tool that will support swift iterations, so you want to be sure to select one that does this with ease and lets you focus on what you do best: design. To help with this selection, I’ve compiled the best of the best: here are the top 10 prototyping tools you should be using in 2016!

AUTHOR

ILLUSTRATOR

LEVIN MEJIA

PETER TARKA

Levin (@fourandthree) is a designer advocate at Shopify. He has worked for clients such as Vox Media and founded his own conference: Go Beyond Pixels

Peter is an emerging 3D artist who splits his time between personal exploration and sculpting cutting-edge pieces for some of the world’s biggest brands www.be.net/trk

68

february 2016


Cover feature

01 ORIGAMI

www.facebook.github.io/origami Origami was originally developed by Facebook to help the team build and design products. Now it’s available for free: you can register as an Apple developer, then download and install Xcode with Quartz Composer to get Origami to run on a Mac. This tool does require more work to install than other prototyping options. However, once it is installed, you can begin creating design concepts that simulate scrolling, taps, swipes and page links. Origami’s documentation, tutorials and how-to videos make it easy to get started. Sketch and Photoshop designs can be imported into Origami, and your project layers will be preserved, ready to be linked, animated and transformed as needed. Origami is not mobile designcentric either: you can design responsive websites and simulate features like text input, FaceTime camera and OS X drag and drop. You can export your prototype components (including animations) with just one click, so engineers can copy-and-paste into the project. Origami includes a presentation tool that enables you to add a custom background to your design, view in fullscreen, and simulate different devices. As a free prototyping solution, Origami has a lot to offer. However, one drawback is that it doesn’t yet let your clients or design team comment directly on the project or versioning history.

£

FREE

february 2016 69


FEATURES Cover feature

TOP TOOL

02 WEBFLOW www.webflow.com Designing prototypes is fast and seamless with Webflow, but where this tool really shines is when your prototype is all finished. You can turn your finished prototype into a production-ready site with the click of a button. Over the past year, Webflow has introduced a game-changing new feature: a CMS for your prototypes. Webflow’s CMS is completely visual, allowing you to create powerful, dynamic sites without writing a single line of code. Another particularly useful feature is its ability to create a blog using your blog page prototype concept. If you’re a freelance designer and have had difficulties finding a developer to turn your designs to production sites, Webflow may be for you. You can even set up user accounts or designate an admin to manage content, and your clients will be able to visually make changes. Alternatively, it’s easy to export the prototype into code. Webflow’s clean, semantic code can save your engineers hours of code clean-up.

70

february 2016

Webflow comes with site templates and web components that can be dragged and dropped into your prototype. These speed up the prototyping process, as they mean you don’t need to recreate commonly used design assets. If at any time you’re stuck and need help, you can check out Webflow’s detailed documentation or watch its helpful how-to video courses. And of course, if you’re using Webflow for the first time, this support will help minimise the learning curve. Webflow is responsive by nature, so your website layouts will be optimised for all devices: desktop, mobile and tablet. If that wasn’t enough, you can design animations that will work on mobile devices and all modern browsers. And it still doesn’t end there: Webflow has extensibility built in, which makes it easy to connect your live prototypes to Slack, MailChimp, Google Drive, and more than 400 other services.

$

FREE STARTER PLAN, PERSONAL $16/MO, PRO $35/MO


Cover feature

03 PROTO.IO www.proto.io With Proto.io, ready-made templates for websites and apps enable you to get a quick start on a project. The entire app runs on the web, so you can run Proto.io on any platform. In my tests, the app ran a little slowly, and manipulating images was difficult at times. Also, every feature seemed to create a new window (one each for projects, building and live preview). If you like to keep the number of tabs you have open to a minimum, this can be annoying. However, these are small concerns, and do not take away from the benefit you get from having access to your projects on any browser. You can always pick up where you left off, wherever you are. Proto.io has recently released plugins that enable you to incorporate Sketch and Photoshop designs through a simple drag-and-drop. When you import a file, Proto.io keeps your assets in place, so you don’t have to waste time realigning them. If your design has already been imported into Proto.io, you can continue to make changes to your assets in Sketch or Photoshop, and they will automatically update on your Proto.io prototypes; there’s no need to export and import again. The ready-made templates already have a variety of interactions built-in, it’s just a matter of adding your appspecific content. When your prototype is ready, you can share the project with a URL and get direct feedback on the prototype page. Turn to p90 for our tutorial on Proto.io

$

FREE TRIAL, FREELANCER $24/MO AGENCY $80/MO

04 FRAMER

www.framerjs.com

Framer is one of the most popular prototyping tools. It’s based on the premise that with code it is possible to prototype anything, resulting in novel and groundbreaking designs. While this may be true, the tool’s proprietary coding language for designing and animating prototypes could be a barrier. There are those who may not see the reward at the end of the steep learning curve, especially for a language that can’t be used outside Framer. However, for those who do want to take on the challenge, the documentation of Framer’s coding language is very well structured, with plenty of examples to demonstrate how the language works. There are how-to videos, as well as courses on Udemy and O’Reilly. This approach is particularly useful for designers that are new to coding. It offers a first-hand view of how flexible and powerful code can be. In addition, Framer’s Mac App is well designed, and provides live previews as you write code, which is encouraging for those who are writing code for the first time.

That’s not to say it’s no good for designers with coding experience who prefer writing HTML/CSS to prototype their designs. Framer may be just the tool you’ve been looking for: you won’t be limited by the drag and drop tools of other apps. Furthermore, because Framer uses code to build prototypes, you can incorporate real-time data into your prototype, from sources like Twitter and Parse. Like other tools, Framer supports Sketch and Photoshop projects, and will also preserve your design’s layers. Another benefit is that – unlike most other tools – you can also import After Effects files. When you’re ready to share your prototype, Framer can generate a URL that can be shared with your clients. These shareable URLs can be opened on mobile devices for live previews. Finally, Framer has recently released an update that lets you prototype VR. 2016 will be the year of VR, and with Framer you can start prototyping now.

$

FREE TRIAL $99

february 2016 71


FEATURES Cover feature

THE ONE TO WATCH ADOBE COMET

05 VECTR

www.vectr.com

Wou can design your prototypes on Vectr’s web or desktop apps for Mac and Windows, which is impressive considering the app is free. The prototypes stay synced whether you’re working on the desktop or web browser, freeing you to work whenever you’re ready and ensuring you always have access to the latest changes. Vectr prototypes can be shared with a URL and integrated into apps like Slack for powerful collaboration. As an added bonus, those you share your mockups with can annotate and edit them. At the moment, Vectr isn’t as featurerich as many other options, but this shouldn’t deter you from getting familiar with it. A roadmap for the app has been published, detailing an impressive list of slated features. These include: fully-offline desktop apps, more platforms, built-in version control, a built-in design assets marketplace, full collaborative editing, image effects, plugins, clickable mockups, built-in feedback and annotation tools, and offline desktop apps.

£

72

FREE

february 2016

Adobe recently released Comet at its annual Adobe Max Conference, and it looks set to become a direct competitor to InVision. Comet is part of the Creative Cloud, so you can import Photoshop and Illustrator files into the app, then visually design wireframes and prototypes. Using Comet in prototype mode, you can draw wires between screens to show how they work together, and add animations to show the transition from screen to screen. When Comet arrives, Adobe says you’ll be able to create wireframes, visual and interactive designs, and prototypes with device previews. You will also be able to share all of these with your team and clients.

06 ATOMIC www.atomic.io With its beautiful UI and intuitive, easy-to-use animation timeline, Atomic makes a great first impression. Atomic is a web application that requires Google Chrome, which may be a drawback to designers using Safari, Firefox or Windows browsers. Also, there are no desktop apps available. If you have used After Effects to prototype animations, you will feel right at home with Atomic’s animation timeline. This gives you the flexibility and control you need to fine-tune your interaction: just click the play button to see your changes and animations in action. When you’re happy with your design, you can share it with a URL preview on any device. It’s also possible to gather design feedback from your clients and team via inline comments. My favourite feature of this particular tool is the history option, which allows you to rewind to see previous iterations and create new versions from any point. For those designing for iOS, Atomic has launched an iOS kit with a library of iOS design elements, to enable rapid prototyping. Finally, you can add custom CSS directly into Atomic. It’s also possible to export CSS, so you can simply copy and paste it into your project.

$

FREE TRIAL, STARTER $15/MO PRO $25/MO


Cover feature

TOP TOOL

07 EASEE www.easee.design When you consider that this product is a passion project of Steven Fabre, Easee is one of the most impressive prototyping tools around. In his Medium post (netm. ag/fabre-276), Fabre says that the goal of Easee was to help designers build beautiful animations for the web without needing to write code. With Easee, you can drag and drop layers from Sketch and Photoshop and begin animating. Easee will take the smooth animations created in the app and export them to CSS, so you can import them into your live web project. You can also view a live preview of your animations on the web. You can begin using Easee with a basic plan and upgrade to an unlimited plan for $10/month, which

provides you with unlimited animation projects and CSS exports. It’s clear that Easee was created by a designer to meet a simple need, and do it well. The tool keeps things straightforward with no unnecessary features, so you can concentrate on building the best interactions and animations for your design project. I encourage you to give Easee a try and support a freelance developer.

$

BASIC FREE UNLIMITED $10/MO

february 2016 73


FEATURES Cover feature

TOP TOOL

08 INVISION www.invisionapp.com InVision is arguably the most popular prototyping tool in the world. The team are constantly adding new features to help designers prototype more efficiently. InVision’s best feature is perhaps its management of project feedback. Clients and design teams can conveniently provide comments directly on the prototype. These are collated in one convenient location, so you never lose track of feedback. Communicating the status of the project to your client and team is critical; with InVision’s project management page, you can organise design components into a status workflow. You can set columns for To-do, In progress, Needs review, and Approved, and drag and drop your design components into the appropriate column. For example, if you’re about to work on the homepage, you can drag the design component into the ‘In progress’ column. Now, when your client or team views the status board, they immediately know

74

february 2016

what is being worked on. If you have ever used Trello in an agile development environment, this will be very familiar to you. InVision is always announcing new features, and it has recently released one it calls Boards, which is a home where your projects can live. It can also be used as a presentation tool, an asset manager for projects, and a place to create moodboards or galleries. You can even share these moodboards or galleries with clients and design teams, so they can provide direct feedback.

InVision’s feature list seems neverending: you can import design files from Sketch or Photoshop, animate design assets, link pages to simulate reallife websites, and preview prototypes on mobile devices. There is also version control with unlimited history, unlimited free user testing, and integrations with apps like Slack, Dropbox, Box and many more. InVision is still a game-changer in this space, and it doesn’t seem to be slowing down.

£

FREE


Cover feature

THE CURVEBALL: KEYNOTE It might be worth giving Apple’s Keynote a go as a prototyping tool. Last year at WWDC, Apple designers gave a step-by-step talk on how to prototype with Keynote (netm.ag/keynote1-276). This year’s event provided further insight on how it uses Keynote Prototypes with Xcode

for rapid prototyping with minimal code (netm.ag/keynote2-276). If Apple designers and engineers are using Keynote to prototype animations and optimise UX, it might just be all you need. Certainly add Keynote to your list of tools to try in 2016.

09 ADOBE COMP

www.adobe.com/ca/products/comp.html The recent release of the iPad Pro tells us that many creatives are using tablet devices to develop projects. Adobe Comp provides the tools you need to transform natural drawing gestures into production-ready graphics. With Adobe Comp, you can create print, web and mobile layouts that seamlessly integrate with Photoshop, Illustrator and InDesign. Also, if you use linked assets, making a change in one program will cause the asset to update everywhere else it’s featured. Comp works with Adobe Stock and Typekit, thereby providing you with images, graphics, and hundreds of fonts that can easily be incorporated as you work on your design prototype. This is my favourite feature, because it means virtually any graphic or font is available at your fingertips. Adobe Comp offers a new way to develop and design prototypes, but due to its user-friendly design, there is virtually no learning barrier. Regardless, Adobe still provides several tutorials to help you get started, if you need them. If you want to share your design prototypes with your team or clients, you can use Adobe’s Behance network to get feedback: a smart move by Adobe to leverage its already massive reach.

£

FREE

10 PRINCIPLE

www.principleformac.com Principle is built by a former Apple engineer for OS X, and comes with an iOS app to mirror live prototypes. Principle has a record feature that can export prototypes to a video or an animated GIF, which can be shared on Dribbble, Twitter or anywhere else you’d like! Principle is only available for Mac, and if you’ve used Sketch, Principle’s interface will look very familiar. Principle uses artboards to animate

elements between states, so as you work on your prototype, you can live-preview your designs on the top right-hand side window. Alternatively, you can mirror your designs on an iOS device. While Principle does not include a collaboration tool, this drawback will likely be overshadowed by its offline capabilities. The flexibility of working offline is further highlighted by increased speeds, since you’re not relying on a potentially unreliable or slow connection.

$

FREE TRIAL $99

CONCLUSION

We’ve looked at the top 10 prototyping tools to use in 2016. As you can see, the choices are abundant, and it will be hard to pick just one. I recommend you try out any that pique your interest, and see what works best for you, your clients, and your team. The ultimate goal is to let your concept materialise and your design take centre stage, so test different tools and check for updates that might give you just what you’re looking for. With so many great options already available, you’ll soon find the right prototyping tool to bring your ideas to life.

february 2016 75


FEATURES Second feature

76

february 2016


Second feature

WHAT IS DESIGN Andy Budd explains how some forward-thinking designers are combining prototyping techniques with science fiction to help conceive convincing products of the future

L

ike me, I’m sure many of you grew up on a diet of science fiction; imagining future worlds through the work of authors like Isaac Asimov, Philip K. Dick and William Gibson. Science fiction, or speculative fiction as purists prefer to call it, has the power to transport us into the future to ask important and difficult questions about the world we’ve created. What would it be like to live in a world dominated by surveillance (1984), constantly tracked by adverts (Minority Report), or surrounded by robot helpers (pretty much every sci-fi movie ever)? Of course, the questions posed by science fiction aren’t really about the future; instead they’re extrapolations of present concerns. Think of the Snowden revelations, ad retargeting, or articles like ‘My Roomba tried to eat me’. By projecting concerns into the future, and taking them

to their logical – and sometimes absurd – conclusion, authors can create safe spaces to discuss them. This means that while science fiction can’t be used to predict the future, it can be used to explore current trends. Or as William Gibson famously said, “The future is already here, it’s just not very evenly distributed”. A good piece of speculative fiction can make something new and novel feel almost inevitable.

AUTHOR ANDY BUDD Andy co-founded Clearleft (clearleft. com), one of the first UX agencies in the UK. In 2015 he curated the dConstruct conference on the theme of designing for the future

CAN SPECULATIVE FICTION CREATE THE FUTURE?

While speculative fiction is often used to explore moral conundrums, doing so can have unexpected (and sometimes negative) consequences. For instance, the oft-cited Minority Report primed audiences to expect a future where adverts could literally follow you around. So when a tech company suggested the City of London

february 2016 77


FEATURES Second feature

THE COVER STORY

Imagination game The Cover Story game from the book Gamestorming

We have used the cover story exercise from the excellent Gamestorming by David Gray, James Macanufo and Sunni Brown as a speculative technique with clients and their stakeholders. By asking people to imagine the future, it frees them up from the dayto-day practicalities, so they can think about the bigger picture. Ask participants to imagine what would be said about their product if it appeared on the cover of a magazine. For short-term thinking: Ask participants to make notes about how the product would feature in a launch article For long-term thinking: Ask participants to make notes on a scenario where the product is hugely successful (e.g. it reaches a million downloads, or gets bought out by Google)

The pre-mortum Ask clients to imagine the project you are about to work on has gone spectacularly wrong, and to list all the possible reasons why. You can add these to your risk log and address them throughout the project.

used its connected recycling bins to track the MAC addresses of passing phones and target pedestrians with adverts (netm. ag/bins-276), you can bet that movie was front of the bin designer’s mind. What the director undoubtedly meant as a warning, ended up becoming reality. Seeing something on screen can have a powerful effect, making a vague concept feel solid and real. This is probably why there were no gasps of awe and wonder when the Oculus Rift came out; we’ve seen examples of VR in countless (admittedly terrible) movies like The Lawnmower Man. It’s a piece of technology that felt like it was 30 years old by the time it arrived – the modern equivalent of the flying car or a personal jet-pack. In the now-famous documentary How Shatner Changed the World (netm.ag/ shatner-276), the makers argued that the Star Trek communicator was the inspiration for the StarTAC mobile phone, while the first tablet to appear on screen wasn’t in an Apple or Microsoft corporate video, but in the hands of the Next Generation crew. Today we have seven teams battling for a $10 million XPRIZE to create a working Tricorder (tricorder.xprize.org). Star Trek seems to be getting less and less fictional every day. Similarly, when a few months ago we passed the date that Back to the Future II was set, a surprising number of predicted inventions – from self-lacing boots to hoverboards – had indeed come to pass. It would appear that science fiction movies have the amazing ability to imagine future products, free of the typical constraints, then inspire others

I’d always assumed this foreshadowing of future technologies was accidental, until I saw a presentation from a Microsoft executive who practically admitted that they liked to seed early product concepts into movies, presumably to prime the audience for future tech arrivals. Since then, I’ve been highly sensitive to any brands I see in sci-fi movies, as a way of speculating on what the big technology companies may be working on. I wonder if Google Glass would have been any more successful if we’d seen Ethan Hunt wearing a pair in Mission Impossible 4? Like many large tech companies such as IBM and Apple, Microsoft has used the field of speculative fiction to explore possible futurescapes for a long time. A recent example of this is the Microsoft Office Labs vision of 2019 videos, which show lots of smiling people representing a wide-reaching demographic standing

Tricorder ambitions A vintage Star Trek Tricorder by

Microsoft future Microsoft Office Labs imagines a future

Joe Haupt

filled with glowing transparent screens

Sci-Fi inspiration Science fiction novels are where many great tech innovations start life

to work out the details. If only there was some way real product companies could harness that power?

ARE WE BEING PRIMED?

The user scenario The most common speculative technique is the user scenario, where we imagine how users will interact with your new product or service, often in the form of a storyboard. This variation on the ‘cognitive walkthrough’ can help designers put themselves in the shoes of their customers and explore the proposed experience from their perspective.


Second feature

Digital magazines The team at BERG imagined the future of digital magazine before the iPad launch, using the power of ‘animatics’

in front of giant glowing interactive sheets of glass as they go about their school, office or home life (netm.ag/2019276). It’s easy to mock these glossy corporate videos (and many have: netm. ag/parody-276), not least because of the impracticality of standing for long periods of time with your arms raised, interacting with giant transparent screens. It’s clear many of these videos draw more upon the storytelling tropes of Hollywood than the skills of the designer.

With an approach known as ‘animatics’ – essentially animated storyboards – it used a simple green-screen technique to superimpose UI animations onto a mockup of a tablet, and breathe life into an inanimate product. Using a video prototype meant the designers were able to do a much better job of communicating the experience than any set of wireframes or clickable prototype, with much less effort. Around the same time IDEO released a similar speculative design

Large tech companies like Apple and Microsoft have long used speculative

However, while these large companies may have popularised the field of ‘Design Fiction’, small interaction design studios have started using similar storytelling techniques in their daily client work.

DESIGN FICTION IN THE DESIGN STUDIO The first time I saw design fiction from a small studio, it was the work BERG did for the publishing company Bonnier. Its Mag+ video (netm.ag/mag-276) created a rich picture of what a digital magazine might feel like in the future, well before the first iPad was available.

project, this time imagining the future of the book (netm.ag/book-276). The more I started to look at this form of speculative design, the more agencies and individuals I found exploring this technique – usually at the fringes of our industry in ad agencies or physical product companies. One thing they all seemed to have in common was a relationship with the Design Interactions course at the Royal College of Arts led by Dunne & Raby, the recognised leaders in the field of speculative design. Of course, not everybody has a team of RCA graduates or the After Effects skills

to create such realistic renderings, so at Clearleft we often mock up simpler effects using a combination of video, photography and animation in Keynote. It’s amazing how a few simple tricks like this can breathe life into an otherwise flat and lifeless prototype!

EXPLORE YOUR VISION WITH COMICS Animation is fast becoming a core skill in the interaction designer’s toolbox, but an even easier way to start exploring the field of design fiction is by using the same techniques you might find in the design of comics. The team at Lowe’s innovation lab

Helper robot Lowe’s used a comic book technique to imagine how its in-store helper robot might work

february 2016 79


FEATURES Second feature

STORYBOARDING by UX architect Bonny Colville-Hyde Storyboards are speculative documents. They suggest the future but don’t make promises. They allow us to quickly explore what’s possible, with low upfront costs. By using illustrated stories, people’s imaginations are stimulated rather than shut down. Using prototypes and wireframes to communicate ideas limits how people respond. Instead of thinking big, they focus on optimising just what they see in front of them. Teams often get stymied by technical debate, which doesn’t help when it comes to planning long-term strategies. Storyboards don’t focus on solutions – instead they focus on human experiences. Understanding and empathising with human experiences create more ‘what if..?’ ideas, and give teams more chance of coming up with an idea that solves a real problem. When it comes to building digital products, most documentation is waste. Storyboards, on the other hand, are valuable assets that align teams and help move ideas forward.

in the US made liberal use of comic book techniques in order to both explore and communicate the vision for its Holoroom concept. It went as far as hiring science fiction authors to help create realistic narratives (www.lowesinnovationlabs.com/ innovation). The Airbnb team did a similar thing when it hired Pixar artists to help visualise the future of its customer experience (netm.ag/sequoia-276). In the case of Lowe’s, this helped convince its management that an admittedly off-the-wall concept like a Holodeck (another Star Trek invention) could actually be made real. After pitching the comic book idea to his exec board, Kyle Nel from Lowe’s explained, “It was a gamble, but they loved it. They totally got it, and started building on the ideas in the comic.” For Airbnb, the visualisation gave it the insight it needed to double-down on its mobile strategy. The good news is that you don’t need to hire sci-fi writers and Pixar artists to do this effectively. Kevin Cheng has been using comic books to communicate design intent long before it became fashionable, and his book See What I Mean is a great primer in the field. Similarly, UK designer Bonny Colville-Hyde is well known for

her excellent workshops on UX comics, and we’re hoping she’ll run one of these at the UX London conference next May (see boxout for more from Bonny).

WHERE DOES PROJECTION END AND FICTION BEGIN? We’ve been using prototypes and storyboards to communicate design intent for years, but how is ‘design fiction’ any different? When does something stop being a simple communication tool and start being a work of design fiction? At dConstruct this year, Nick Forster from the Near Future Laboratory explained how he broke design down into three categories; now, next, and future. You could argue that any piece of design work that falls outside of ‘now or next’ could be considered a work of design fiction. As such, you may have found yourselves engaging in design fiction without even realising it; coming up with concepts for pitches or board presentations to give stakeholders a sense of what could be possible. Recently a large, international high street bank asked us to imagine what online banking might look like in the future. We created a rich vision of how online banking could work across a range

For more on storyboarding, see p104

Comic design Kevin Cheng is known for his comics that explain design thinking


Second feature

Future catalogue The Near Future Laboratory created a real Looking forward Near Future Labroratory is a specialist studio dedicated to developing the ideas of the future

catalogue featuring 166 products from the future

of devices, without worrying too much about the implementation details. We knew that the concept would theoretically work, but we weren’t limited by the company’s existing technology stack. This freed us up to be more creative than we may have otherwise been, allowing us to leap over the now

design fiction could be used to sharpen your skills at an internal hack-event, or to demonstrate design thinking as part of a possible recruitment task. At Clearleft I’ve used Matt Jones’ concept of Mujicomp to sharpen interns’ design skills. We set them the task of designing a future product they could imagine being sold in the Japanese lifestyle retailer Muji by allowing them to hack, combine and re-imagine random items bought from the store. This simple MacGuffin provides the opportunity to unlock a wealth of creativity from designers who might be used to getting briefs that focus on ‘now’ or ‘next’. Ultimately you could argue that all design is in some way a work of fiction – imagining something that doesn’t yet exist, and then communicating that vision to clients, customers and tech partners. However, by freeing designers up from practical concerns and allowing them time and space to speculate, they may just stumble onto their next big idea. I believe design fiction is becoming an increasingly useful way to explore and communicate possible design futures. In order to create a better future, designers should be adding techniques for designing fiction to their toolbox today.

Extrapolation Factory also featured as part of the Designers of the Year exhibition at the London Design Museum. The show was called 99c futures (www.99centfutures.com), and it explored the kind of products you might expect to see in a 99c store 20 years from now. Nick Forster calls this the ‘Future Mundane’

You could argue that any piece of design

and next, and explore what the future of banking could hold. Companies like the Near Future Laboratory take design fiction to its natural conclusion by blurring the line between art and design with its TBD catalogue. Its fictionalised mail order catalogue contains 166 products and services that could potentially exist in the future, sparking both ideas and debate in equal measure. Near Future Lab’s collaborator The

and believes the future will look a lot more normal than the sci-fi interface designers would have us believe.

WHERE TO START Designers might find it difficult to start selling design fiction as an activity to their clients right away. It could seem slightly wacky and off-beat at first, but you could take a leaf out of the Near Future Laboratory’s book and start crafting sci-fi futures for yourselves. On a smaller scale,

february 2016 81


Tips, tricks & techniques

THIS MONTH FEATURING...

84

90

98

CUSTOM ANIMATIONS WITH MOTION UI

84

HEAD TO HEAD: JEKYLL VERSUS HARP

97

CREATE STORYBOARDS FOR YOUR ANIMATIONS

104

DESIGN PROTOTYPES THAT FEEL REAL WITH PROTO.IO

90

MAKE A WEATHER MAP WITH LEAFLET

98

HOW TO USE THE TOP ES6 FEATURES TODAY

108

BUILD A SITE FOR A GLOBAL AUDIENCE

94

WEB STANDARDS: CSS LEVEL 4

ACCESSIBILITY: PREDICTABLE ISN’T BORING

114

Desktop

Mobile/tablet

0

0

0

0

0

0

0

0

0

0

103

BROWSER SUPPORT

EXCLUSIVE VIDEOS

We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported.

Look out for the video icon throughout our tutorials. This issue, three authors have created exclusive screencasts to complement their articles and enhance your learning, including Geoff Kimball’s guide to animation with Foundation 6, and Peter Cook’s tutorial on building a weather map with Leaflet.

february 2016 83


View source

PROJECTS Foundation

files here! All the files you need for this tutorial can be found at netm.ag/foundationgit-276

A B O U T T HE A U T H O R

GEOFF K IMBA L L w: www.geoffkimball.com t: @geoffkimball job: Product designer, ZURB areas of expertise: HTML, CSS, Sass, JavaScript q: what’s the greatest invention of our time? a: Phone cases with bottle openers on them

FOUNDATION

CUSTOM ANIMATIONS WITH MOTION UI Geoff Kimball explains how to use Foundation 6 and Motion UI to easily create custom animations for your design elements

VIDEO Geoff Kimball has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ foundationvid-276

84

Motion UI (netm.ag/motion-276) is a Sass library from the folks at ZURB for creating custom CSS transitions and animations. A big focus of the library is using transitions to show a change in state – for example, sliding in and out a sidebar on click. In this tutorial, I’ll show you how to use Motion UI with the recently-released Foundation for Sites 6 to animate elements of your designs.

npm install foundation-cli --global Once you have the CLI, you can use the foundation new command to set up new projects. We’ll use a more specific command to get the project we want – in this case a basic Foundation for Sites project in a folder called motion-ui : foundation new -f sites -t basic -d motion-ui

SETUP Foundation’s starter projects require Node.js and Git to be installed on your machine. You’ll also need to download the Foundation CLI – a tool that sets up blank projects in all three Foundation frameworks. Run the following command:

february 2016

When the CLI finishes installing the project, open the folder in your command line and run npm start to start the Sass compiler. Next, open index.html in your browser. Now we can get started.


Foundation

FOCUS ON

WHY MOTION?

Set up The new Foundation CLI takes care of setting up new projects for you, and it does it in style

ANIMATING WITH TOGGLER Foundation 6 includes Toggler, a new JavaScript plugin for rapidly prototyping stateful plugins. To start with, we’ll use Toggler with Motion UI to animate an element in and out on click. Let’s add the animations to the big panel below the title area. We’re going to add the data-toggler

A big focus of the Motion UI library is using transitions to show a change in state and data-animate attributes. We’ll also use a unique ID to the panel, so we can target it later. <div class="row"> <div class="large-12 columns"> <div class="callout" id="callout" data-toggler dataanimate="fade-in fade-out"> We’ve given the callout an ID of callout , and the attribute data-animate includes two of Motion UI’s built-in transition classes. Toggler will leverage them when the element animates in and out. Next, we need to include a click trigger. Let’s add a button above the callout, with the attribute data-toggle . The value of data-toggle is the same as the ID of the callout we want to open and close.

Motion is a hot topic in UI design these days. When design went flat a few years ago, we lost a few useful ways to hint at interactivity, or help spatially orientate the user. Smart use of motion in design, both on the web and in native apps, has helped us get back some of those cues. Last year while developing Foundation for Apps, we published a piece on the ZURB blog titled ‘Motion is the New Flat’ (netm.ag/ flat-276), which explained these ideas in more detail. So how do we use motion, but not abuse it? Before adding an effect to a design, consider how it’s going to help the user. Motion is best used in moderation. You could use it to make changes in a UI state more obvious, for example by sliding a panel in and out of view. Or you could use it to call attention to important elements on the screen. Animation can be a fun way to surprise people in an experience. However, excessive, repetitive, or lengthy animations tend to annoy users, and get in the way of accomplishing a task. Google’s Material Design spec sums it up succinctly (netm.ag/ meaningful-276): “Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.”

<button type="button" class="button" datatoggle="callout">Toggle Callout</button> Refresh your browser and click the button. The first time you click, the panel will fade out. Click again and it will fade in, and so on.

february 2016 85


PROJECTS Foundation Motion UI includes over two dozen built-in transition classes. Try replacing the fade effects with hinge effects: <div class="row"> <div class="large-12 columns"> <div class="callout" id="callout" data-toggler dataanimate="hinge-in-from-top hinge-out-from-top">

the modal: data-animation-in and data-animation-out . Let’s use a scale animation this time: <div class="reveal" id="modal" data-reveal data-animationin="scale-in-up" data-animation-out="scale-out-down"> <!-- ... --> </div>

BUILT-IN COMPONENTS

Just as with Toggler, you can use any Motion UI class and the modal will animate.

Some of Foundation’s built-in plugins – such as Reveal and Orbit – also have Motion UI support. In this next example, we’ll add a modal to the page and give it a custom animation. First, let’s add the modal and a trigger to cause it to open. Open up your index.html page, and add this code anywhere:

Motion UI includes a number of built-in effects, but the real power in the library comes from writing your own using transition mixins. Let’s swap out the scale effects for two custom hinge effects. Open app.scss and add this CSS rule:

<p><a data-open="modal">Click me for a modal</a></p> <div class="reveal" id="modal" data-reveal> <h1>Awesome. I Have It.</h1> <p>Your couch. It is mine.</p> <button class="close-button" data-close aria-label="Close reveal" type="button"> <span aria-hidden="true">&times;</span> </button> </div>

WRITING CUSTOM EFFECTS

.hinge-in { @include mui-hinge( $state: in, $from: top, $fade: true, $timing: map-get($motion-ui-easings, bounceInOut) ); } Let’s break down what the parameters we’re using here do:

Souped-up modals Modals have been a staple of Foundation since version 2, but with version 6 they can be souped up with custom animations

Our modal works, but it just blinks in and out when it opens and closes. Let’s spice things up with a slide effect. You’ll need to add two attributes to

$state is either in (for transitions that play when the element is appearing) or out (for elements that are disappearing) $from is the origin point of the hinge: top , right , bottom or left $fade is either true or false , and allows you to play a fade effect with the transition $timing changes the timing of the effect. There are a few custom timing functions, including the bounce effect we’re using here We’ve added the in effect, but we also need to add the out effect. Add this code below .hinge-in : .hinge-out { @include mui-hinge( $state: out, $from: top, $fade: true, $timing: map-get($motion-ui-easings, bounceInOut) ); } Lastly, let’s replace the modal’s default hinge with our custom hinge.

86

february 2016


Foundation <div class="reveal" id="modal" data-reveal data-animationin="hinge-in" data-animation-out="hinge-out"> <!-- ... --> </div> Motion UI has five transition effects: slide, hinge, scale, spin and fade. These can be played forwards or backwards, for in or out transitions. All these effects have built-in CSS classes, but as you’ve seen, it’s also possible to write custom versions of any of them, with custom CSS classes.

WORKING WITH ANIMATIONS Motion UI supports CSS animations as well as transitions. The animation mixins create a set of CSS keyframes that can be dropped on to any element. The effect plays as soon as the class is added. Let’s start by building an effect and applying it to our existing content. In index.html , add a class to the ‘Welcome to Foundation’ text at the top. <h1 class="welcome">Welcome to Foundation</h1>

slide, hinge, scale, spin and fade Next, in app.scss , we’ll create a basic fade effect. .welcome { @include mui-animation(fade); animation-duration: 1s; } Refresh the page and you’ll see the text instantly fade in. But we can do more! Remember that list of five transitions from earlier? It’s possible to use those same five transition effects in any animation, and you can also combine any number of them into one effect. Let’s augment the fade with a slide: .welcome { @include mui-animation(fade, slide); animation-duration: 1s; } You may have noticed that we haven’t configured any of these effects. Let’s change slide to slide() and pass in a parameter to change the effect.

.welcome { @include mui-animation(fade, slide($direction: up)); animation-duration: 1s; }

Responsive Support Motion UI’s effects are designed to work great on smartphones and tablets

Now the text will slide in from the bottom, instead of from the right, which is the default. Let’s add one more effect just for the sake of our example. ZURB does not endorse this gratuitous use of animation in UI design. .welcome { @include mui-animation(fade, spin, slide($direction: up)); animation-duration: 1s; } You’ve created a monstrosity! Instead of having the effect play automatically, you can set it to only trigger on click. Simply remove the class from the HTML, and add it using JavaScript in response to a click, or some other browser event. And that’s animation in Motion UI! But the library has one more trick up its sleeve with animation.

ANIMATING ELEMENTS IN SERIES In the last section, we showed how to animate a single element with a custom effect. Motion UI also supports series animations, allowing you to set up multiple elements to animate in sequence. For each element, you can define a length for the effect, and optionally a delay before the next one plays. First we need some elements to animate. How about those five link sections in the big callout? We can make them appear in series when the page loads. Open index.html and find those five sections –

february 2016 87


PROJECTS Foundation

IN-DEPTH

FOUNDATION FOR SITES 6

The team at ZURB has been hard at work on the newest version of its Foundation framework. The team conducted months of extensive research to find out how people were using the framework. Foundation 6 is more than just a visual iteration, code restructure or a simple change in version number. Here are a few of the exciting new features: Half the filesize The total filesize of every component and class now weighs in at 60KB CSS and 84KB JavaScript, with plenty of room to make them even smaller when selectively removing unused components. A11y-friendly All code snippets will come with attributes and roles, along with instructions on how and why they need to be used. This will help ensure that every website built on Foundation 6 will be able to be seen anywhere, on any device, by anyone. Styled for simplicity Our goal was that the base styles would act as a wireframe rather than a final design, so the team pulled more and more styles from components, meaning users can more easily style them to fit the brand of their production work.

they’re all .large-4 medium-4 columns. Add the class .column-1 to the first one, .column-2 to the second one, and so on. The code will look like this: <div class="callout"> <!-- ... --> <div class="row"> <div class="column-1 large-4 medium-4 columns"><!-- ... --></div> <div class="column-2 large-4 medium-4 columns"><!-- ... --></div> <div class="column-3 large-4 medium-4 columns"><!-- ... --></div> </div> <div class="row"> <div class="column-4 large-4 medium-4 medium-push-2 columns"><!-- ... --></div>

Change the timing of the animation series by altering the durations <div class="column-5 large-4 medium-4 medium-pull-2 columns"><!-- ... --></div> </div> </div> We now have five classes ( .column-1 through to .column-5 ), which we can apply effects to. Motion UI will time the effects for us, so they play one after another. Open up app.scss . To set up our animation queue, we start with the mui-series() mixin. Note that this mixin doesn’t go inside a CSS selector; it’s just at the root of the document.

More flexible Sass In Foundation 6, Sass mixins have been made stronger to allow devs to build even more customised rows with any number of columns. Designers will be able to use a four-column grid inside a five-column grid, inside a 12. Starter Projects Foundation 6 will be offering not only the CSS versions and the regular Sass versions of Foundation, but a souped-up stack complete with a custom static site generator named Panini to help flatten files into single HTML documents. New effects Motion UI is the first library to be shared by the Foundation for Sites and Foundation for Apps frameworks

88

february 2016


Foundation

@include mui-series { } Inside mui-series() , we’ll add CSS selectors for our five column classes. Inside each class we use the mui-queue() mixin to add a new item to the queue. The queue moves in the same order as our CSS, so we’ll start with .column-1 . @include mui-series { .column-1 { @include mui-queue(0.5s, 0s, fade); } } The first number in mui-queue() is the length of the effect, while the second number is the gap between this effect and the next one. In this example, the gap is 0s , which means the next effect will play instantly, as soon as the previous one is done. The last parameter, fade , is the effect we want to use. However, like with mui-animation() , we aren’t limited to just one effect. We can add more effects as additional parameters, and configure them exactly the same as with mui-animation() .

Switch back to your browser, refresh the page, and ... nothing happens. That’s because Motion UIs have to be manually triggered with a class. The class is called .is-animating , and it’s used for all series animations. To keep things simple, we’ll add the .is-animating class to the HTML, so the effect plays automatically on page load. To keep things even more simple, we’ll add the class to the body.

Animation targets These five link sections are prime targets to animate in series, using Motion UI’s animation queueing feature

<body class="is-animating"> @include mui-series { .column-1 { @include mui-queue(0.5s, 0s, fade, slide); } } Now let’s add the other four classes. To make things easy, we’ll give them all the same effect – just cut and paste. @include mui-series { .column-1 { @include mui-queue(0.5s, 0s, fade, slide); } .column-2 { @include mui-queue(0.5s, 0s, fade, slide); } .column-3 { @include mui-queue(0.5s, 0s, fade, slide); } .column-4 { @include mui-queue(0.5s, 0s, fade, slide); } .column-5 { @include mui-queue(0.5s, 0s, fade, slide); } }

Now when you refresh the page, your fancy animation queue will play. You’ll see all of the callouts sections slide in one at a time. Try changing the timing of the series by altering the durations and gaps of each effect! You can even set a negative gap, which will cause two effects to overlap.

THE FUTURE OF MOTION UI Motion UI was originally bundled with Foundation for Apps, a framework for creating responsive, Angular-powered web apps, which launched in December 2014. Earlier this year, the ZURB team pulled out the Foundation for Apps motion model, souped it up with new effects and the animation queueing system, and released it as the standalone Motion UI library. All blank Foundation 6 projects ship with Motion UI already installed, and a number of the framework’s JavaScript plugins work seamlessly with Motion UI, as you’ve seen in this tutorial. Soon, the new Motion UI will be integrated back into Foundation for Apps, replacing the framework’s existing motion module. In the future, Motion UI will also be expanded with new effects, and more robust ways to combine effects.

february 2016 89


View assets here!

PROJECTS Prototyping

All the assets you need for this tutorial can be found at: netm.ag/assets-276

A B O U T T HE A U T H O R

TODD SIEGEL w: proto.io t: @toddsiegel job: UX designer and product evangelist, Proto.io areas of expertise: Product design, prototyping for iOS, wordsmithing q: what’s the greatest invention of our time? a: The open source movement (leading to mass collaboration)

PROTOTYPING

DESIGN PROTOTYPES THAT FEEL REAL WITH PROTO.IO Proto.io’s Todd Siegel explains how to use this prototyping tool to create an interactive product concept – no coding required

VIDEO Todd Siegel has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ protovid-276

90

Designing touchscreen apps ultimately demands prototypes that feel real. Despite this, when aiming for a gesture-driven app with interactive animation, we often couch our design thinking in static design tools. Shouldn’t we base our explorations in an interactive animation tool? Similar to the way language filters our perception, our tool filters how we think through solutions. We want to stay in the flow, and not constantly switch between tools to explore design solutions. We rarely need to prototype with vector perfection, but we do need good enough prototyping assets. Proto.io serves as several visual prototyping tools in one. You can import comps to link into

february 2016

flows, and asset layers to animate. But you can also author assets in high enough fidelity on the fly, and customise native component libraries for iOS, watchOS and Material Design. In this tutorial, we’ll prototype a product concept for juxtaposing two photos and typing a caption about the connection between them. It should look like this: netm.ag/protodemo-276. We’ll start by bringing in a range of external assets. Then we’ll design assets and customise native components within the tool. Interactions will be triggered by gestures, keyboard input, and automatically as the prototype loads, then choreographed along an animation timeline.


Prototyping

Step 1 Set up your prototype on an iPhone 6-sized screen (750x1334)

Step 9 For content that’s longer than the screen, we need to use a container

First, you’ll need to go over to Proto.io and sign up for a trial. We’re offering all net readers a free 30-day trial (details on page 93). Start a new project and name it ‘Juxtacaption’. Select the iPhone 6 screen size (750x1334), and hit Create project . Roll over the project thumbnail and click Edit project to open the editor.

On the canvas, use shortcut cmd+F to bring up the search function. Type ‘statusbar’ to search for assets. Double-click the standard iOS bar to add it. Under Properties we can change the background colour (I’ve gone for blue). Drag your chosen shade into the saved colours area to use later.

01

I’ve created a folder of assets for this project, which you’ll find at netm.ag/assets-276. In the bottom-right of the editor, you’ll find your options to add these to the project. Alternatively, you can drag them directly onto the canvas.

02

Double-click ‘opening-photobottom.jpg’ (the tree trunk cross-section) to add it to canvas. Drag it to the bottom until it snaps to the edge. Next drag ‘openingphoto-top.jpg’ (ferris wheel) on to the canvas, and position it so it sits just above the tree image. Now add ‘logo.png’ to the canvas. Under Size & Pos. , set its left margin to 140 and top margin to 120.

03

Let’s create a native asset. On your canvas bring up the Type tool ( T ), then click below the header at the left edge. Type ‘Caption the connection between two photos’, and position this at the horizontal centre of the canvas.

We’re going to add a web font. Go to Properties > Text > Manage project webfonts . Search for ‘Catamaran’, and hit return. Click Add all . Now, back in the text drop-down, select Catamaran 300, and set the size to 34. Centre-align the text.

05

Let’s add the button asset. Drag ‘button.png’ on to the canvas towards the bottom, and position it at left 175, top 1070. If at any time you want to preview the project, you can just click Preview in the top right.

06

Roll over the Screens drop-down in the top left, and select Add new screen . Title it ‘Screen: Main’, and hit OK. This will form our second screen, which will contain the photo and caption content for the prototype.

07

08

In Proto.io, if the content needs to scroll beyond the length of the screen, it needs to be placed in a container. To do this, go to Containers > Add new container and name it ‘Container: Main Content Scroll’. Change the container height to 2000.

09

Let’s add the photos to this second view. Double-click ‘juxtaphoto_1.jpg’ (flowers) and centre it horizontally along the top edge of canvas. You can zoom in and out using cmd+1 (to zoom to 100 per cent) and cmd+0 (to return to the zoomed-out view).

10

EXPERT TIP

ADD CONTAINERS Containers are a fundamental building block in Proto.io. Common uses are for vertical scrolling content and snap carousels. Converting any asset or interaction area to a container means they can have multiple states that can be toggled. Converting grouped assets to a container gives them the full range of interactions and a single unit. For more this webinar: netm.ag/ containers-276.

Drag ‘juxtaphoto_2.jpg’ (cupcake) directly below the top photo. This wants to have a top margin of 455, so it sits 5px below the flower image. Drag out ‘juxtaphoto_3.jpg’ (pancakes) below this (left margin 11, top margin 1000), and ‘juxtaphoto_4.jpg’ (face), at the bottom (left margin 11, top margin 1455).

11

04

Step 8 Add a standard iOS status bar from the asset options provided

february 2016 91


PROJECTS Prototyping In the Components area, scroll down to Forms and drag out the Text Field so it is under the top photo. Adjust its size to 600x120px, and position it over the join between the top two images. Under Properties , adjust the styling. I’ve chosen a white background and border radius of 10.

12

While you’re still in the Properties tab, adjust your text. We’re using Catamaran 300, size 40, blue and centre-aligned. Set the placeholder text field to ‘type a juxtacaption’.

13

We want this text input field to have two states, the first for inputting the text, and the second for displaying what’s been typed. Right-click the text input field and select Convert to container . On the Layers panel, double-click ‘Text Field 1’ and rename the layer text input .

14

At the top of the container canvas, click the + symbol next to State 1 to add a new state. While on State 2, click to select the text input field, and delete it.

15

Hit R and add a rectangle 600x120px. Make the background blue and border radius 10. Type T and click to insert text. Change the text style so it matches the text on State 1 , but this time it wants to be white instead of blue. Adjust the line height to 50.

16

17

Size the text box 570x100, and centre it horizontally and

Step 18 Add an Action Button from the selection of Material Design assets, and change the colour to your saved shade

vertically. Change text to ‘your juxtacaption’. Navigate back to Container > Main Content Scroll . Now we’re going to include some Material Design elements in our design. At the top of the component panel, go to Material Design > Buttons and drag the round Action Button onto the bottom-right of the text input field container. Change the background colour of the Action Button to the saved blue. In the icon field, type ‘check’ and choose the first tick button. In the ripple effect drop-down, select Light .

18

Now we’ll do something a bit more advanced (it’s still simple, I promise). In order to use the typed in caption, we need to set a variable that changes the resulting text box to show this

19

caption. Select the Action Button, and go to Interactions > Add Interactions . Set the trigger to Tap and the action to Set variable . Let’s set a variable that grabs what is typed into the text input field. Select New Variable and name it ‘juxtacaption`. Then select Text , check Evaluate variable , Set value from item property , Current container . Under item, select text input , and for property select Value . Check Callback to chain another action.

20

A new window should appear for Callback 1. Here, we will chain another action that reads the variable to change the text box to what has been typed in. For the action, select Change property (under Logic ), then choose Current container , yourjuxtacaption , Text ,

21

EXPERT TIP

EXPLORE THE SPACES PROTOTYPE GALLERY One of the best ways to master Proto.io is to dissect prototypes imported into your spaces.proto.io is the best place to see the range of prototypes that can be created with the tool. You can re-use interaction and animation patterns by copying screens and containers into your own project to build upon. Anyone in the Proto.io community can share a prototype for others to see and add comments.

92

february 2016

Read from variable , juxtacaption . Now save your interaction. Now, let’s add the main content container and make it scrollable. Go to Screens > Screen: Main . Once selected, roll-over Containers > Container: Main Content Scroll , and click Add to Canvas .

22

Set a horizontal guide to 160, and move down the container so it snaps to the guide. Go to the bottom of the screen and drag up the centre container handle so it snaps to the bottom edge of the screen canvas.

23

Let’s set the main container to scroll vertically. Select the container, go to Properties and choose Vertically from the Scroll properties drop-down. Now, double-click the ‘header.png’ asset to add it. Position this left 225 and top 85.

24

Double-click the container and select the Action Button. Under Interactions , select Add interaction , Tap , Change Container State , Current container , Text Field 1 Container , State 2 .

25


Prototyping

Step 26 Stagger the appearance of content so users can see how the prototype works

Step 30 Set up a screen interaction so your container automatically advances to state 2

Let’s stagger the timing of the main content so it appears step by step, suggesting what to do with the prototype. Select the Text Field 1 container and move it down 25px to 417px from the top.

So the container automatically advances to State 2, you need to set a screen interaction. Go to Screens > Screen: Main > Interactions > Add interaction . Set trigger to Screen show , action to Change Container State , screen Main , container Main Container Scroll , State 2 . Save your interaction.

26

Now we need to add a new state (to Containers > Main Content Scroll ). Move the ‘Text Field 1’ container back up 25px to 392, and change its opacity to 0.9. Go back to State 1 and select all the content on the canvas ( cmd+A ). Change the opacity to 0 and hit return. Go back to State 2. The timeline at the bottom of canvas shows all the layers with

27

changed properties between States 1 and 2. Select both ‘juxtaphoto_1. jpg’ and ‘juxtaphoto_2.jpg’ in the timeline and drag one of their animation sliders to 0.5 duration. Click the ‘juxtaphoto_2.jpg’ animation slider and change the delay to 0.4. Drag the animation slider for ‘Text Field 1 Container’ to 0.6, and change the delay to 0.7.

28

Drag the animation slider for ‘juxtaphoto_3.jpg’ to 0.5 duration, with a 1.3 delay. Keep the default ease-out quad curves. Drag the Action Button animation slider to 1s duration, with a delay of 1.3s.

29

30

Now let’s add a transition between the two screens. First, go to Screen 1. Select ‘button. png’, go to the Interactions tab and Add interaction . Select Tap , Go to Screen , Main and Slide left .

31

SPECIAL OFFER! readers a free 30-day trial. Simply go to proto. io/promo/net-magazine to claim. You will also

code NETMAGPROTOIO at the checkout (this is to be redeemed by 29 February 2016).

In order to transition back, go to ‘Screen: Main’, select the transparent ‘Container: Main Content Scroll’ and add an interaction. Select Swipe right , Go to screen: Screen 1 , Slide right .

32

Let’s see the prototype! Save the project, then preview it. To share the project, go back to the Editor , Share > Publish > Share with Everyone > Publish . Hit Continue > View > share icon tab – this will give you the link, so you can share your prototype with anyone you like. Enjoy!

33

Step 32 Finally, set up a transition to return the prototype to State 1

february 2016 93


PROJECTS UX

USER EXPERIENCE

A B O U T T HE A U T H O R

AMIN L AK HANI w: www.onenorth.com job: Developer, One North areas of expertise: Web development and design, big data q: what’s the greatest invention of our time? a: The smartphone. It has changed not only the way we digest digital content but the way we communicate as well

BUILD A SITE FOR A GLOBAL AUDIENCE Amin Lakhanii shares some tips to help you make your website suitable for users all over the world As businesses continue to become more global in nature, many companies are finding their websites don’t meet the needs of their widened audience-base. You may find your web chops are put to the test when designing a website intended for a global audience, as it presents a whole variety of new things to take into account. Design, performance and content are the three primary factors all users care about. In other words: what it looks like, how fast it operates and how easily they can find the information they’re seeking. Here’s how you can address these factors to build the best experience possible for all audiences.

1 BALANCE IS KEY Finding the right balance between site branding and your target audience is an important foundational step. Sounds pretty straightforward, right? When you dig in, you’ll find there are many things to consider to achieve this harmony. Elements such as colours, animations and web fonts must not only appeal to different cultures and markets, but must also meet all browser capabilities. Devices and browsers can be just as diverse as the audience you’re designing for. Internet users in the US, for example, will typically use a browser such as Chrome or Firefox, whereas Netscape is more popular in a place like rural India. Not only does each browser run its own rendering engine, but there are differences in each browser generation depending on operating systems, devices and countless other settings. It’s safe to say no two browsers are the same. As a designer, this forces you to find the balance between having a modern-looking site that’s true

94

february 2016

to your brand, and designing for the lowest common denominator. Sticking to a clean, neutral design is a good place to start.

Languages You need to be cognizant of the effect different languages will have on your design. For example, in English, the phrase ‘insurance companies providing legal protection’ shouldn’t present any issues – on smaller screens, it should cleanly wrap onto the next line. The same phrase in German is ‘Rechtsschutzversicherungsgesellschaften’. This is more problematic. On mobile platforms it will most likely push the width of your site off-screen, causing an unattractive horizontal scroll bar to appear and ruin the clean aesthetic.

Fonts The font you choose will ultimately be determined by the languages on the website. Commonly used web fonts such as Arial, Verdana and Calibri typically cover all major Western languages like English, Spanish, French, German and Italian. If you anticipate your audience to be IndoEuropean, you’ll want to select one of the central European fonts (often tagged ‘CE’). These include Times CE and Palatino CE. Special characters can also be part of the equation. The Russian language, for example, requires a font with Cyrillic characters, which usually covers Ukrainian, Bulgarian and Serbian languages as well. Supporting Arabic, Hebrew or scripts from different parts of Asia can present their own challenges. These languages vary wildly and you’ll often need to include several fonts for the same


UX language, such as Traditional Japanese (zh-Hant) and Simplified Japanese (zh-Hans). Unfortunately, due to performance concerns, loading all fonts when a page loads isn’t reasonable. Although it will add an extra layer of complexity to your app, you need to determine which language the site will display in and load that font dynamically.

2 PERFORMANCE MATTERS Page loading time is an essential part of a website’s user experience. Ensuring the site runs optimally, regardless of location, is largely dependent on hardware and performance options. Consider using a global hosting platform to help with the heavy lifting. Microsoft Azure and Amazon Web Services (AWS) operate data centres around the world, sparing you the effort of finding a local hosting company that may be unreliable, and shaving crucial seconds off page load time. I prefer Azure’s content delivery network (CDN) to serve static content, and its Traffic Manager to configure web traffic. Traffic Manager gives you options on how to configure these servers: straight round-robin, failover or performance. Performance is the one we are interested in here – this indicates the server closest to your user, and therefore the one you want to route traffic to. Bandwidth is also a variable designers should account for. Countries such as the US receive strong internet connections at 4MBs, but many others don’t

Delivering localised and translated content is paramount for global brands have the resources for high bandwidth. Minify and cache JavaScript to pull as few HTTP requests as possible, in order to limit the number (and size) of files for a faster download. Microsoft’s Visual Studio is one tool that can do this for you. Images often make up the majority of bytes on a page, so making sure they are optimised is a priority. The fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the page. If you want to show hi-res images for Retina displays, make sure you use media queries. This way, only devices that can show hi-res images download these larger files. If you can’t upload two resolutions for each image and you have a lot of users

with limited bandwidth, stick with just the lower res and smaller images. Here are some more quick tips for image optimisation: Select the right universal format: GIF, PNG, JPEG Experiment and select the best settings for each format: quality, palette size, and so on Eliminate unnecessary images Leverage CSS3 effects wherever possible Use web fonts instead of encoding text in images Minify SVG files, and compress them with GZIP

3 UNDERSTAND THE UX: TESTING Make sure you understand how your users experience your design on their device and in their location. That may differ from your experience on your new computer on a very fast 100Mbps broadband connection. Research to find average bandwidth for different targeted countries; Akamai’s State of the Internet report (netm.ag/akamai-276) is a useful resource on global internet trends. You can also take advantage of Chrome DevTools to simulate and test particular browsers/devices, bandwidth and locations. This will highlight any adjustments needed, based on bottlenecks and design elements that may have a negative impact for different users.

4 CONTENT REIGNS SUPREME Delivering localised and translated content based on users’ location and demographic is paramount for global brands. Regardless of where users are physically located, they want to feel like the content is personal to their culture and interests. One of the most effective ways to execute a complex content strategy is to leverage a fullfeatured CMS. Sitecore, for example, offers language supports through sub-sites, allowing you to publish articles under select sub-sites or across all of them. Sitecore and other advanced CMSs can also help manage the workflow of assigning, reviewing and publishing all the translated content. You can provide the best and most accurate experience for users by enlisting native speakers or a web-based human translation platform such as Gengo to write or translate content, rather than using machine-automated translation. In order to ensure all special characters can be handled, regardless of language, make sure your site is UTF-8 encoded. Avoiding hard-coded images and text is also a good practice to follow. Building a website for a global audience can be an overwhelming project, but addressing these common challenges upfront will help you avoid headaches in the future.

february 2016 95


Skillshare is an online learning community where creators learn from each other. Anyone can take online classes, watch video lessons, create projects, and even teach a class themselves. By teaching the skills needed in todayâ&#x20AC;&#x2122;s economy, Skillshare creates opportunities and empowers people to do more.

Skillshare is offering a free one-month trial for all net readers. Start your trial at:

netm.ag/skillshare


Head to head

HEAD TO HEAD

A B O U T T HE A U T H O R

P HIL HAWKSWOR T H w: hawksworx.com t: @philhawksworth job: Technology director, R/GA areas of expertise: Web development, technical leadership, cheese and biscuits q: what’s the first album you ever bought? a: The first thing I can remember buying is Ini Kamoze’s ‘Here Comes the Hotstepper’

JEKYLL VS HARP Phil Hawksworth compares the relative merits of these two static site generators JEKYLL

HARP

Jekyll (www.jekyllrb.com) is the best-known and most popular static site generator. Created by Tom PrestonWerner while at GitHub, it now has thousands of forks and hundreds of contributors enjoying its simple approach to creating sites focused on content.

Harp (www.harpjs.com) is another static site generator. Presented as a static web server with preprocessing capabilities, it can be a self-contained development pipeline outputting assets, to be served from Harp’s own platform or any static host.

ENVIRONMENT Jekyll is available as a Ruby gem and intended to be easy to install and get started with (especially for Ruby-users). Users can begin creating sites with the popular Liquid template framework.

Harp is built with JavaScript, installs via npm and supports many template and preprocessor frameworks. JavaScript users might find managing Node and npm feels more familiar to them.

EASE OF USE Getting started with Jekyll is simple, thanks to its focused features and logical commands. Blogging was Jekyll’s primary use case, and so it has many conventions that lend themselves to creating a blog. Extending beyond those conventions can require a little more effort.

Harp is also simple to get started with. It differs from Jekyll in that it is not focused on providing blogging tools, which can be frustrating if you want things like ‘front matter’ in each of your posts, but allows for greater flexibility when crafting something more than a blog.

PERFORMANCE AND FLEXIBILITY

FACT FILE ALTERNATIVES The static site generator landscape is buzzing, with new tools being created all the time. Take a look at some popular alternatives at www.staticgen.com AVAILABILITY Both Jekyll and Harp are open sourced projects available under MIT licenses for both Mac OS X and Windows.

For sites without too many pages, Jekyll’s build time is very good. GitHub Pages can even host your Jekyll code and generate your site whenever you commit code. You can add more functionality via a plugin architecture (although GitHub Pages won’t execute those).

Harp puts more of a premium on generation speed than Jekyll, which can be an important factor if your site gets large. Its native support for popular preprocessors and templating tools means it has a good chance of matching your tastes.

SUPPORT AND COMMUNITY Jekyll’s community is booming. With regular releases and a huge amount of attention, it provides a lot of support that helps instil confidence when using it on a project.

Although not massive, the core of Harp’s community is engaged and helpful. Developments don’t seem as regular, but its associated hosting platform suggests an investment in maintaining it long-term.

VERDICT Both Jekyll and Harp provide intuitive and well-documented ways to adopt a static site model. JavaScript purists might prefer the approach of Harp, with the convenience of npm for bootstrapping. Bloggers might welcome the authoring experience and blogging tools in Jekyll. Whichever you choose, you’ll get easy access to templating, data objects and preprocessing in a tool that will be satisfying to use.

february 2016 97


View source

PROJECTS JavaScript

files here! All the files you need for this tutorial can be found at: netm.ag/weathergit-276

A B O U T T HE A U T H O R

P E T ER COOK w: www.animateddata.co.uk t: @animateddata job: Web developer and data visualiser areas of expertise: Data visualisation, D3, JavaScript q: what is the greatest invention of our time? a: The open source movement – the web is unimaginable without it

JAVASCRIPT

MAKE A WEATHER MAP WITH LEAFLET Peter Cook k shows how to build your own weather map using

VIDEO Peter Cook has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/mapsvid-276

98

Leaflet (www.leafletjs.com) is a lightweight JavaScript library for creating interactive maps on the web. It’s an open source alternative to Google Maps, and because of its tiny size it’s great for mobile apps. Leaflet enables us to add markers and other geometric shapes to a map, making it great for geographic data visualisations. In this tutorial we will create our very own weather map based on data from the Met Office. Along the way we’ll learn how to make a map with Leaflet, how to download forecast data from the Met Office and how to add data-driven symbols to our map.

MAKING A MAP Leaflet creates ‘tile-based’ maps that are made up of multiple images (called ‘tiles’) downloaded

february 2016

from a server. There are a number of available tile servers, but to begin with we’ll use OpenStreetMap’s tile server. Let’s start by creating an ‘index.html’ file with a container element in it: <div id="myMap"></div> It’s important to set the height of this element, otherwise the map will be invisible! To make a map using Leaflet we need to do three things: Create a map object using L.Map() , passing in the id of the container element Create a tile layer (using our chosen tile server) Set the view latitude, longitude and zoom level


JavaScript

FOCUS ON

ALTERNATIVES TO LEAFLET Starting point Our first Leaflet map using the OpenStreetMap tile server and centred over the UK

Here’s the JavaScript we need to create a simple map centred on the UK (see code example 1 in the GitHub repo at netm.ag/weathergit-276): var map = new L.Map('myMap');

This tutorial uses the Leaflet library, but there are several other approaches to making maps on the web. Broadly speaking, we can divide the solutions into two camps: hosted and programmatic. Among the hosted solutions are CartoDB and Mapbox. These allow you to create data-driven maps, and have both free and paid-for options. We’ve used a programmatic approach in this tutorial, and often there is no cost (apart from development costs) associated with this. There are a large number of JavaScript mapping libraries and they can be divided into tile-based or vector-based.

var osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap. org/{z}/{x}/{y}.png', { attribution: 'Map data (C) <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' }); map.addLayer(osmLayer); map.setView([55, -5], 6);

Watercolour map Leaflet allows different tile servers to be used. Here we’re using Stamen’s ‘watercolor’ effect

GETTING THE DATA We’re now going to grab some data from the Met Office’s DataPoint service, which provides a number of weather-related data feeds. One of its offerings is an API that provides weather forecast data across a number of UK locations. We’ll use this to fetch data for our map. To use DataPoint, you’ll first need to visit www.metoffice.gov.uk/datapoint and create an account. You’ll then be able to retrieve your personal API key (if you don’t want to do this, the data is provided in code example 2). Let’s make a simple request for a forecast at a specific date. Go to the following URL using your browser: http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/ json/all?res=daily&time=YYYY-MM-DD&key=YOUR-API-KEYHERE

Tile-based mapping libraries basically serve up pre-prepared map tile images and are usually simple and fast to use. They are ideally suited to detailed maps (such as street maps) and they usually allow simple markers and shapes to be added to the map. Both Google Maps and Leaflet are good options. Vector mapping libraries take raw geographic data (usually in the form of GeoJSON data) and render it as SVG shapes (lines and areas). This approach requires a bit more effort, but the payoff is that the map can be styled exactly as you wish using CSS, and interactivity (such as hover over effects) can be added. Both D3.js and Kartograph are geared towards producing SVG maps.

Income map A choropleth map made using D3 from GeoJSON data. Each country is an SVG path and is coloured according to income

february 2016 99


PROJECTS JavaScript

FOCUS ON

AUTOMATIC DATA UPDATES In this tutorial we manually download the data from the Met Office’s DataPoint service, but what if we wanted this to happen automatically? There are various approaches to this, ranging from the very simple through to the more sophisticated. A basic approach is to write a simple script to fetch the data and then to save it as a static file. Therefore when someone browses your map, the data is a static resource rather than an API query. A Python script to fetch the next day’s data could look like this: import urllib, datetime # get tomorrow's date tomorrow = datetime.date.today() + datetime. timedelta(days=1) tomorrow = tomorrow.isoformat() # get the data from DataPoint apiKey = "YOUR_API_KEY" url = "http://datapoint.metoffice.gov.uk/public/data/val/ wxfcs/all/json/all?res=daily&time=" + tomorrow + "&key=" + apiKey data = urllib.urlopen(url).read() # save to a static file outFile = open('forecast.json', 'w') outFile.write(data) outFile.close() You can then set up a Cron job on your server to run this script at regular intervals. If you wanted to get more sophisticated, you could reduce the size of the static JSON file by reducing the number of locations, or you could even make your own API using Flask (flask.pocoo.org).

You’ll need to enter the date as a YYYY-MM-DD string (e.g. 2016-02-10) and paste your API key where it says YOUR-API-KEY-HERE . DataPoint only provides forecasts for around five days ahead, so you’ll need to enter a date in the near future. When you enter this URL, a big JSON object will eventually appear, looking something like this: {"SiteRep":{"Wx":{"Param":[{"name":"FDm","units":"C","$ ":"Feels Like... From within your browser, save this to your project directory as forecast.json .

LOADING THE DATA We can load forecast.json using jQuery’s getJSON function. When I load in an unfamiliar data set, I’ll often inspect it in Chrome’s developer console (code example 2): $.getJSON('forecast.json', function(data) { console.log(data); }); If we expand the data a few times in the console, we can see Sitemap.DV.Location , which is an array of locations. Each of these has a latitude and longitude, a name and a further object Period that contains the actual forecast data. In the next stage, we’ll iterate through this array and display a marker for each location.

DISPLAYING THE DATA We’ll now display the forecast locations on the map using markers (a marker is the simplest way of displaying a location on our map). var sites = forecastData.SiteRep.DV.Location; sites.forEach(function(site, i) { if(i % 20 !== 0) return; // Just show a few sites var marker = L.marker( [ +site.lat, +site.lon ] ); marker.addTo(map); }); Here we’ve defined a function that takes our forecast data and loops through the SiteRep.DV.Location array we saw earlier. For each site we create a marker using L.marker , passing in the latitude and longitude and then we add it to the map (code example 3). We only display a subset of the sites, as Leaflet struggles to display all 5,974 locations! Top tip: In the dataset, the latitude and longitude values are strings, so we convert them to numbers by prepending with a + symbol.

100

february 2016


JavaScript ADDING ANNOTATIONS Leaflet makes it very easy to add an annotation to each marker using its bindPopup function: marker.bindPopup( 'Chance of rain ' + site.Period.Rep[0]. PPd + '%' ); Here we’re defining the text that should appear when a marker is clicked. In this case we’re displaying Period.Rep[0].PPd , which is the chance of rain (code example 4). Take a look at netm.ag/metdoc-276 for more details on DataPoint’s data structures. Now when we click on a marker, we’ll see how likely it is to rain in that location.

ADDING WEATHER SYMBOLS Clicking on a marker to display the forecast is a bit cumbersome, so let’s display a weather symbol at each location.

Location Markers Leaflet can add a marker at given longitude and latitude. Here we’ve added a marker for each forecast location

var iconPath = 'meteocons-icons/SVG/' + iconIndex + '.svg'; var weatherIcon = L.icon({ iconUrl: iconPath, iconSize: [30, 30] }); var marker = L.marker( [ +site.lat, +site.lon ], { icon: weatherIcon } ); Now we have a weather map based on real forecast data from the Met Office!

MAKING IT PRETTY Fortunately our data contains a special code Period. Rep[0].W that summarises the weather in a particular location. For example, 1 means it’s a sunny day while 20 means hail showers. The precise details are at netm.ag/definition-276. We’re going to use a great set of weather icons developed by Alessio Atzeni called Meteocons (www. alessioatzeni.com/meteocons). Let’s start by defining a lookup table that determines the icon to display for each weather type: var weatherTypeToIcon = { 0: 3, 1: 2, 2: 9, etc. } We can now construct a pathname iconPath to the appropriate Meteocon icon. Once we’ve done this, we use Leaflet’s icon function to create an icon object from our icon image, and we add this to the marker (see code example 5): var iconIndex = weatherTypeToIcon[ site.Period.Rep[0].W ];

Finally we’ll make a couple of changes to make the map more visually pleasing. We’ll start off by using a more neutral tile layer so the symbols stand out a little better: var CartoDB_Positron = L.tileLayer('http://{s}.basemaps. cartocdn.com/light_all/{z}/{x}/{y}.png'); map.addLayer(CartoDB_Positron); For brevity I’ve omitted the attribution information, but please don’t forget to include this if you make your map public. The icons aren’t spaced very nicely, so we can write some code to space them out more regularly (see code example 6). The pseudocode for this is: includedSites = [] for each site: if this site is not close to one in includedSites: add it to includedSites So there we have it! We’ve used Leaflet to make a weather map of the UK using real forecast data from the Met Office. There’s lots of other types of data you might want to visualise on a map, and you can use a similar pattern to the one I’ve shown here. Have fun, and keep mapping!

RES OURCE The Met Office lets you preview different map appearances; a fantastic resource for tile servers: netm.ag/resource-276

february 2016 101


SURVEY

WIN £250 of Amazon Vouchers

ARE YOU A WEB DESIGNER OR DEVELOPER?

Have your say! Whether you’re a beginner or professional, take part in the Web Design and Development Industry Survey 2016

PLUS! FREE EBOOK WORTH £9.99 Complete the survey to claim your free handbook

WWW.CREATIVEBLOQ.COM/SURVEY For full terms and conditions, please refer to: www.futureplc.com/survey-prizedraw-termsand-conditions. All entrants must be aged 16 or over. Closing date 15 February 2016


Standards were created to fill in the gaps and give developers the features they craved. Do preprocessors solve the problems with authoring CSS? Without a doubt. They get us to a better state and begin to solve some of the issues inherent in CSS. But preprocessors also create layers of abstraction between the CSS we’re writing and the code browsers can actually read. With preprocessors, we’re no longer writing CSS; we’re writing a proprietary language. The use of proprietary languages can create new issues of its own, from increased onboarding times and potentially bloated code, to the need for additional project dependencies and ever-growing compilation times.

W3C TO THE RESCUE

CSS LEVEL 4 Brian Graves on how new CSS features will help us remove layers of abstraction While trying to finish CSS 2.1, the CSS Working Group realised that creating a large singular specification was proving difficult. The specification wasn’t easy to read, maintain or develop. Due to these difficulties, the W3C made the wise decision to split the language into independent modules for future iterations. This decision resulted in CSS features being added at a record pace. In the past few years we’ve seen the standardisation of animation properties, improved typography and new layout techniques, to name a few. These features gave us new visual and interactive capabilities, but didn’t solve some of the core problems with how CSS is authored. What sort of problems, you ask? Missing features that would make developers’ lives easier and DRY out code. Conveniences such as variables, nested selectors, mixins and colour manipulation.

ENTER PREPROCESSORS Designers and developers wanted better authoring features and attempted to tackle the problem themselves. Tools such as Sass, Less and Stylus

CSS Variables: Already in Firefox, these allow us to define values in one location and reuse them across our entire project (this happens at runtime with no precompile step needed) Media Queries Level 4: This is currently in Editor’s Draft state, and will give us the same powers to name and reuse our breakpoints CSS Colour Module Level 4: Also in Editor’s Draft state, this will give us the ability to manipulate and mix colours on the fly, creating powerful new capabilities when it comes to the creation and management of colour palettes and themes CSS Nesting Module: In very early proposal stage, this will give us the ability to create a clear visual hierarchy and remove the need to repeat parent selectors Most of these are now on various development roadmaps, so it will only be a matter of time before we start seeing them pop up in our browsers. That means one day, we’ll be able to remove the layers of abstraction being created by preprocessors. The standards bodies are listening and adding features to CSS that allow developers to spend less time fighting code and more time improving the experience for users. And that’s an idea we can all get on board with.

PROFILE

CSS

As the use of preprocessors surged, the W3C began to take notice. Now, we’re at a point where many authoring features born from the use of preprocessors are in Proposed or Working Draft states in native CSS. Some have even made their way into browsers:

Brian (brianleegraves.com) is the UI team lead at DEG, where he does design and development work for a range of major brands. He also regularly speaks and writes on the topics related to design, performance and workflow

february 2016 103


PROJECTS Storyboards

A B O U T T HE A U T H O R

R ACHEL NABORS w: rachelnabors.com t: @rachelnabors job: Web animation engineer and consultant areas of expertise: Animation, UX, UI, interactive storytelling q: what’s the greatest invention of our time? a: Vaccines. Never before have humans completely nullified entire swathes of disease so permanently

STORYBOARDS

CREATE STORYBOARDS FOR YOUR ANIMATIONS Rachel Nabors shows how to use storyboards to plan out and communicate animations on your next project

RES OURCE Storyboards can be created with software or sketched by hand. There is a halfway point: drawing on storyboarding templates. I use a handy printout for project meetings, which you can download here: netm.ag/template-276

104

It was the first time anyone had attempted to create a feature-length animated film. The cosy team dynamics that worked so well for creating Mickey Mouse shorts would not scale for Snow White and the Seven Dwarfs. The Walt Disney Studios needed a way to coordinate many teams in order to tackle the massive undertaking. It was a simple idea: dissect the story into its component scenes, illustrate them roughly on paper or cards, pin those cards on large cork boards, then distribute those boards to the teams every morning. The story department could steer the project, and the production artists would never be able to wander too far down any dead ends. Storyboards brought what we now call agile development to studio animation. Since Snow

february 2016

White, they’ve become a production staple of film, interaction design and game design. Now, with animation entering the toolsets of web designers and developers everywhere, it seems that storyboards might become this industry’s new best friend, too.

STORYBOARDS FOR THE WEB When it comes to animating user interfaces on a project, communication between designers and developers tends to break down if they aren’t working side by side. In companies where animation deliverables are ‘thrown over the fence’ to developers, sometimes designs are handed down as animated GIFs or videos with little else to guide the developers when recreating them.


Storyboards

FOCUS ON

EASING AND CUBIC-BEZIER CURVES

Alice in Videoland Storyboards help map out sequences of animation

Storyboards can help designers and developers communicate this very visual topic using its lowest common denominators: words and pictures. They require very little training to make and read, and you can create and edit them without the need for specialised software. Storyboards are great for sketching out quick UI animation ideas during a team meeting and gathering immediate feedback. For rapid prototyping teams, wireframes can be a great way to document the patterns used, so successful patterns can be applied consistently as the project continues. And as design artefacts, they fit perfectly with style guides and design systems for documenting reusable animation patterns.

A PERFECT MATCH On their own, wireframes can help break down communication barriers between developers and designers by giving them a common, collaborative medium. But they are even more powerful when coupled with video and prototypes. Often motion designers create and polish animations in a program that’s not designed for web development, like After Effects or Keynote. Indeed, it makes sense to experiment with animations using visual tools. But alone, video is a poor deliverable for developers. A developer might spend hours trying to recreate a subtle bounce effect that could have taken seconds if they had only known the easing value used by the designer in their animation program. Delivering storyboards alongside videos lets developers know exactly what steps to follow to recreate an animation. This is less intimidating than having to make many inferences (which might also frustrate their coworkers). The difference between a cubic and quintic curve is nigh-on impossible for

At the dawn of traditional animation, ‘slowing’ was used to describe the rate at which something moved across the screen: slow to fast (‘slow-in’), fast to slow (‘slow-out’). Today, we call this ‘easing’ in programs like Keynote and After Effects. In CSS, we call it ‘timing function.’ CSS comes with some default timing functions out of the box: ease-in (slow to fast), ease-out (fast to slow), ease-in-out (fast in the middle), linear (constant). This is a rather limited selection, but fortunately we can define our own rate of change with the cubic-bezier timing function. A cubic bezier is a set of coordinates that form a curve. This curve can describe effects like bounces and custom ease-ins and outs. Custom easing can help give UI animation a unique, branded feel. Or it can be used to make an element on the page feel like it has a special mass by affecting how it moves through that environment. Generally, heavier things move slower and take longer to get up to speed. Lighter things have more ‘zip’, which you can mimic with steeper curves. Both Chrome and Firefox’s development tools ship with their own cubic bezier editors that let you adjust curves in real time. Or you can edit and compare easings side by side at cubic-bezier.com. Easings.net is a gallery of predefined easings, and you can copy and paste its cubic bezier values into your own CSS. Easings are a small but important component of an animation’s look and feel. For some projects, you might wish to exclusively use a limited set of custom easings the same way you might conform to a specific set of font sizes and colours.

Dev tools Firefox and Chrome’s dev tools both have their own cubic-bezier editors

february 105


PROJECTS Storyboards

CASE STUDY

ALICE IN VIDEOLAND ‘Alice in Videoland’ is an interactive storybook I made to demonstrate CSS and JavaScript animation techniques. Before jumping into coding and designing the experience, I spent time working out what it should look and feel like. This led to many furtive drawings in sketchbooks, napkins and notecards, before finalising the ideas in a storyboard. I drew each screen in Manga Studio with a Wacom stylus. Manga Studio is a drawing program from Japan that does a very good job of mimicking natural pen strokes and media. For that reason, it’s the preferred option for many cartoonists. I used black, grey and white to block out foregrounds, midgrounds and backgrounds. These are the three standards for blocking out scenes in traditional storyboarding. I also used pink and blue to highlight interactive areas and animations. In a traditional storyboard, everything is in motion. For the web, the opposite is true: aside from scrolling, everything is static. So we have to underscore what moves, outside the norm. I exported the Manga Studio drawings as JPEGs and embedded them in an HTML page to share online at netm.ag/alice-276. Because I was a team of one, I didn’t need to add too much descriptive text to know what was going on. That wouldn’t fly at all if I were working with another person, or even a team! Since this project, my storyboarding skills have evolved to serve teammates and clients better.

a harried developer to spot in a 500 millisecond GIF. But for a sharp-eyed designer, the difference in production is glaring.

THE STORYBOARDING PROCESS Modern storyboards at the office are quite a bit smaller than the large corkboards of the 1930s; they look more like a comic book page than a billboard. Just like a comic page, each panel illustrates and details a different snapshot in time. Underneath each panel is text detailing what’s happening, how and why. In web design, each of those panels could contain a screenshot, a wireframe, even a sketched microinteraction, supported by notes expanding on what interactions trigger the animations, and over what period of time they occur. Storyboards can be as macro or as micro, as polished or as rough, as you please. Do what makes sense for you and your team. I have created storyboards with index cards, Photoshop, and even Keynote. It’s important to pick tools that everyone

action and animation on your team can use and read. Often that ends up being pencils and paper! For UI animation, storyboarding should start alongside wireframing; right after user research and information architecture. If your workflow is more vigorous, you might start storyboarding alongside design. As long as you’re thinking about animation early, you will be in good shape.

CODE YOUR COLOURS In addition to the black and grey of wireframing, storyboarding benefits from reserving two special colours to indicate action and animation. I use blue and orange respectively, partly because they are discernible for people with various kinds of colour blindness. Blue subconsciously registers as an actionable ‘link’ colour, and orange is very active and stands out. Use these colours to indicate what user interactions cause which things to animate.

GET THOSE DIGITS A picture is worth a thousand words, but in animation the right numbers can be worth even more. Be sure to include the duration of each part

106

february 2016


Storyboards

Colour code Two panels illustrate cause and effect. Words and illustrations are colour-coded to draw strong relationships

of the animation. Even adverbs like ‘quickly’ or ‘slowly’ will help paint a mental picture for those that need to implement the animations. Spell out what properties are being changed: from colour and opacity to width or height. Use descriptive words like fade, shrink, slide, expand. Phrases like pop, bounce and swoosh have more subjective values, often affecting more than one property. Does a ‘pop’ involve expansion and contraction as well as a rise and fall? Save these words for naming your animation patterns once they emerge. Stipulate the animation’s exact easing. This value is supremely helpful to the people implementing the storyboard later on.

NUMBER EACH PANEL Numbering a storyboard’s panels is a best practice sometimes discarded by cinema, but invaluable in web design. Starting from 1, they tell readers which way the action flows. Storyboards could come in vertical or horizontal layouts, and numbers quickly reinforce which mental model everyone should be using. Numbered panels allow quick feedback (for example, ‘What about instead of panel 16, we use a nice fade?’), and let you index what animations and interactions happen and reference them accordingly. Additionally, numerical panels let you add branching logic to your interactions or show several alternatives. For example, you could group several options for the fourth panel under 4a, 4b, 4c.

USE YOUR WORDS! When adding notes to your storyboard, always detail why the animation is happening. Be sure you can justify the animation with sound reason. You may have to defend the animation to others, and if you can’t explain why it’s important to yourself, perhaps it’s unnecessary for your users. In my A List Apart post ‘Animation at Work’ (netm.ag/work-376), I list six different ways you

can use animation to underscore relationships and hierarchy. Can you use two of these words to explain your animation?

STORYBOARD CHECKLIST Each panel (or pair of panels for complex interactions) of your storyboard should demonstrate the following: What event or user interaction causes which things to animate How said things animate Why the animation improves the interaction Often this breaks down into two panels: A clear indication of the trigger for the animations (‘When the user clicks the button…’) A description of the changes that follow (‘...the button fades away to reveal…’) Colour-code your words, too, with interaction words (like clicked, hover and focus) being underlined or written in your designated interaction colour, and descriptive works (shrink, bounce, fade) using your animation colour.

BRINGING STORYBOARDS TO WORK The most common challenge we face when bringing animation to our projects is building a strong rapport with the people who design or code them. The second most common challenge is not standardising those animations we do implement. Both of these lead to inconsistent animation that gives our creations a sloppy, half-finished feel. Storyboards address both of these challenges: communication and documentation. As such, they are powerful not just for their technical depth, but also for their ability to bring people closer together on a project. This is the spirit in which we must embrace storyboards: not as a tool to dictate but as a conversation to join.

RES OURCE You can edit, compare and copy easings at sites like cubic-bezier. com and easings.net.

february 2016 107


PROJECTS JavaScript

A B O U T T HE A U T H O R

NICOL AS BE VACQUA w: ponyfoo.com t: @nzgb job: JavaScript and web performance consultant areas of expertise: Web Performance, JavaScript, Node.js q: what’s the greatest invention of our time? a: Tesla’s charger snake, even though I don’t own one. Or a Tesla. I’d buy a car just to own one of those solid metal snakes

HOW TO USE THE TOP ES6 FEATURES TODAY Nicolas Bevacqua The sixth ECMAScript specification was finalised in June 2015, and there is now a flurry of JavaScript features coming our way. You can start using these features today, provided you know the right tools for what you want to do. In this tutorial I’ll be covering the most exciting new features, as well as a couple of different ways you can start using them in your projects right away. Understanding the new language features, and how they can be used, will help you decide whether to adopt ES6 or stay in the ES5 camp. You may want to be on the bleeding edge and consider ES6 a critical addition to the productivity of your team, but it comes at the cost of you and your team taking the time to learn ES6. To date, no browser has 100 per cent coverage on ES6. The specification is still fresh, and implementations are under active development. Relying solely on today’s JavaScript engines means you’ll find many ES6 features don’t work, are only partially implemented, or are completely missing.

VIDEO Sebastian McKenzie made Babel, and this presentation explores how JavaScript transformation and ES6 can help improve developer workflow and future-proof code: netm.ag/mckenzie-276

108

JAVASCRIPT

TRANSPILERS The solution to the patchy browser support is to use a transpiler. Transpilation is just a fancy way of saying the compilation of similar languages. By using a transpiler to transform ES6 code into ES5, browsers (which have great ES5 support nowadays) can interpret ES6 without complaining, since you feed them the compiled ES5 code.

february 2016

Transpilers provide a consistent baseline for your ES6 programs, but they aren’t perfect. Proxies, for example, are very hard to represent in ES5 code, and are unavailable to transpilers. You can use the online Babel REPL (babeljs.io/ repl) to try out the examples in this article. You can write ES6 code on the left, and see the transpiled version change in real time on the right. It’s a treat when it comes to learning ES6. For developing entire applications in ES6, your best bet is to pair the Babel transpiler with webpack or Browserify to handle multiple interconnected small modules. The latest version of the language includes features such as arrow functions, template literals, block scoping, collections, native promises, and many more. I can’t possibly cover all of it in one go, but we’ll go over my favourites, and the most practical features.

TEMPLATE LITERALS In ES6 we get templates that are similar to those in Mustache, but native to JavaScript. In their purest form, they are almost indistinguishable from regular JavaScript strings, except they use backticks ( ` ) as a delimiter, instead of single or double quotes. All the strings below are equivalent: "The quick brown fox jumps over the lazy dog" 'The quick brown fox jumps over the lazy dog' `The quick brown fox jumps over the lazy dog`


JavaScript

FOCUS ON

WHAT ABOUT ES6 AND NODE.JS?

Compatibility problems No browser fully supports ES6 yet. Find an in-depth guide at netm.ag/compatible-276

Backticks aren’t convenient just because they rarely appear in text. These strings can be multi-line without any extra work on your behalf. That means you no longer need to concatenate strings using + , or join them using an array. var text = `This is a multi-line string.`;

ES6 includes arrow functions, template literals, block scoping, collections, and more

On the server side, you (as opposed to your customers) are in charge of picking the runtime version. The most recent versions of Node.js have aggressively updated their dependency on v8 (the JavaScript engine that powers Google Chrome). That means if you’re using one of the latest versions of Node.js (v4.x.x at the time of this writing), you have all the same ES6 goodies that are available in your Google Chrome browser. You may want to keep your existing version of Node.js for most projects but also use a recent version because of ES6. In those cases, you can use nvm (github.com/creationix/nvm) to manage multiple versions of Node.js, allowing you to keep your existing projects intact while adopting the latest ES6 features in your newer projects. It’s easy to use nvm, you just open up a command-line, type commands such as nvm install $VERSION or nvm use $VERSION , and you’re set. Juggling many different versions of node may prove to be too much of a hassle. An alternative may be to use babel-node , a CLI utility that transpiles your ES6 code before executing it through node. You can install babel-node , along with the standalone Babel transpiler, using the command shown below. npm install babel --global While babel-node works great in development, it’s not recommended for production as it can introduce a significant lag in startup time. A better approach might be to precompile your modules before every deployment. That way your application won’t need to recompile itself at startup.

Template literals also let you add variables into the mix by wrapping them in an interpolation: var color = 'brown'; var target = 'lazy dog'; `The quick ${color} fox jumps over the ${target}`; // <- 'The quick brown fox jumps over the lazy dog' You’re not limited to variables; you can interpolate any expression in your templates. var input = -10; var modifier = 2;

february 2016 109


PROJECTS JavaScript

IN-DEPTH

FURTHER READING Here are some resources that will help you start taking advantage of ES6 today. ES6 in Depth ponyfoo.com/articles/tagged/es6-in-depth I wrote a series of over 20 articles that will give you a comprehensive understanding of ES6. Each article covers a specific feature or aspect of the language that is specific to ES6, and they’re easy to navigate with tons of examples and practical considerations. These articles cover everything we’ve discussed so far in this article, in addition to promises, rest and spread, iterators, generators, proxies, collections, changes to Math , Number , Object and String , classes, symbols and reflection. It’s a great way to dive head-first into ES6. Axel Rauschmayer’s blog 2ality.com/search/label/esnext While he doesn’t have a formal series on ES6, Axel Rauschmayer has written dozens of detailed articles describing the technical depths of ES6. He’s also putting together a book, Exploring ES6 (exploringjs.com). ES6 in Depth by Mozilla Hacks hacks.mozilla.org/category/es6-in-depth Written by several authors affiliated with Mozilla, these articles cover many of the same topics as the series on Pony Foo. ECMAScript 6 compatibility table kangax.github.io/compat-table/es6 When you get started with ES6, you’ll quickly realise no browser currently supports ES6 100 per cent. In the meantime, you can leverage these compatibility tables to understand what features are implemented across what browsers. Alas, these tables are mostly useful for research, as your best bet when it comes to using ES6 today is to rely on a transpiler like Babel.

`The result of multiplying ${input} by ${modifier} is ${input * modifier}`; // <- 'The result of multiplying -10 by 2 is -20' `The absolute value for ${input} is ${Math.abs(input)}`; // <- 'The absolute value for -10 is 10'

BLOCK SCOPING AND LET Let’s move on to some other practical features. The let statement is one of the most well-known features in ES6. It works like a var statement, but has different scoping rules. JavaScript has always had complicated scoping rules, which drove many programmers crazy when they were first trying to figure them out. Declarations using var are function-scoped. That means var declarations are accessible from anywhere in the function they were declared in. On the other hand, let declarations are block.scoped . Block scoping is new to JS in ES6, but it’s fairly commonplace in languages like Java or C#. Let’s look at some differences between the two. If you had to declare a variable using var in a code branch for an if , your code would look like this: function sortCoordinates (x, y) { if (y > x) { var temp = y; y = x; x = temp; } return [x, y]; } That represents a problem because the process known as hoisting means the declaration for temp will be ‘pulled’ to the top of its scope. Effectively, our code behaves as if we’ve written the following snippet. For this reason, var is ineffective when

Babel REPL babeljs.io/repl If you want to get started right away, your best bet might be to hop into the Babel REPL and start toying around with it. There’s a great article (babeljs.io/docs/learn-es2015) for learning the basics of ES6 language features and syntax.

ES6 today If you want to start using ES6 right now, you’ll need to use a JavaScript transpiler like Babel

110

february 2016


JavaScript

dealing with variables that were meant to be scoped to code branches. function sortCoordinates (x, y) { var temp; if (y > x) { temp = y; y = x; x = temp; } return [x, y]; } The solution to that problem is to use let . A let declaration is also hoisted to the top of its scope, but its scope is the immediate block (denoted by the nearest pair of brackets), meaning that hoisting won’t result in unexpected behaviour or variables getting mixed up. Even though let declarations are still hoisted to the top of their scope, attempts to access them in any way before the actual let statement is reached will throw. This mechanism is known as the ‘temporal dead zone’.

The let statement is one of the most well-known features in ES6. It works like a var statement, scoping rules However, rather than being a problem, this feature will in fact often help users catch errors in their code. Attempts to access variables before they were declared usually led to unexpected behaviour when using var , so it’s a good thing that let prevents it entirely. console.log(there); // <- runtime error, temporal dead zone let there = 'dragons';

Method block scoping Function declarations are block scoped in ES6, meaning they won’t be able to leak secrets placed in block-scoped variable declarations

Attempts to assign to a different value to a const variable result in syntax errors, as the compiler can tell you’re trying to assign to a const variable. const max = 123; max = 456; // <- SyntaxError Note that const only means the declaration is a constant reference – it doesn’t mean the referenced object becomes immutable. If we assign an object to a const variable client , we won’t be able to change client into a reference to something else, but we will be able to change properties on client like we’re used to with other declaration styles. const client = getHttpClient('http://ponyfoo.com'); client.maxConcurrency = 3; // works because we're not assigning to client

ARROW FUNCTIONS These are probably the best known feature in ES6. Instead of declaring a function using the function keyword, you can use the _"arrow"_ notation, as seen below. Note how the return is implicit, as well as the parenthesis around the x parameter. [1, 2].map(function (x) { return x * 2 }); // ES5 [1, 2].map(x => x * 2); // ES6

Const declarations In addition to let declarations, we can also observe const declarations being added to the language. In contrast with var and let , const declarations must be assigned to upon declaration. const pi = 3.141592653589793; const max; // <- SyntaxError

Arrow functions have a flexible syntax. If you have a single parameter you can get away with dropping the parenthesis (although you can include it if you want), but you’ll need it for methods with zero, two, or more parameters.

RESOURCE If you’d like to learn more about ES6 in general, you should read this overview. It explains each feature in brief, and includes links to in-depth articles for each one: ponyfoo.com/articles/es6

[1, 2].map((x, i) => x * 2 + i); // <- [2, 5]

february 2016 111


PROJECTS JavaScript

For reference The articles on Pony Foo in the ES6 series cover topics, ranging from getting started to mastering proxies and generators

If your method does more than return the results of evaluating an expression, you could wrap the righthand part of the declaration in a block, and use as many lines as you need. If that’s the case, you’ll need to add the return keyword back again. x => { // multiple statements return result } An important aspect of arrow functions is that they are lexically scoped. That means you can kiss your var self = this statements goodbye. The following example increases a counter and prints the current value, every second. Without lexical scoping you’d have to .bind the method call, use .call , .apply , or the self hack that I mentioned earlier.

and .filter iterators. Using arrow functions may take you a day or two to get used to, but you’ll quickly fall in love with the new syntax. Note that you probably shouldn’t use arrow functions everywhere. Instead, consider them for each case. For example, an arrow function might be a good replacement of anonymous functions, but not so much for named functions.

CONCLUSION Now you’ve learned about Babel, template literals, block scoping, let , const and arrow functions, you’re ready to give ES6 a shot for the first time. Head on to the Babel REPL (babeljs.io/repl) and start trying out code.

function count () { this.counter = 0; setInterval(() => console.log(++this.counter), 1000); } count(); // <- 1, .. 2, .. 3, ... Arrow functions are recommended for short methods, like those typically provided to .map

112

february 2016

Arrow functions There are several ways to declare arrow functions. It might take you a few tries to get them right, but you’ll love them!


ON SALE NOW!

THE IDEAL GIFT FOR ANY DESIGN AFICIONADO www.bit.ly/DesignAnnual


PROJECTS Accessibility

ACCESSIBILITY

PREDICTABLE ISN’T BORING Heidi Valles One of the issues I enjoy digging into when auditing sites for accessibility is consistency; making sure repeated terms and functionality appear and behave the same way across the entire website. Aligning common elements in this way makes for a predictable experience that supports the user when they are exploring the site. One of the four principles of WCAG 2.0 states that websites should be ‘predictable’. Under this, there are two criteria that depend specifically on consistency. 3.2.3 dictates that navigational items (e.g. navbar links, previous and next arrows, breadcrumbs) occur in the same relative order each time they are repeated. 3.2.4 rules that components that have the same functionality (e.g. carousels, tabs, buttons) are identified consistently. It’s understandable that someone might think that adding a little variety would make a site more interesting. But in general, a uniform UI is actually of service to your users. Having to learn how to use a site over and over again with each new page will only frustrate visitors, particularly those using assistive technology who might now need to invest even more time and energy.

CONSISTENCY TIPS

By creating an overall experience that is predictable and clear, users can navigate with confidence, absorb content fully, and move on to participate, make a purchase, or reach out. An accessible website is an effective website.

PROFILE

Let’s go through some key ways you can make sure your website is easy to use.

Keep navigation constant: Small changes like updating ‘Sign in’ to ‘Log out’ are fine, but in general your page navigation should be unchanging and ever-present Make functional elements predictable: Elements that help a user move through content (e.g. ‘next’ and ‘previous’ links, pagination), should look and act the same wherever they’re used Consider notifications: Adopt a consistent method for laying out forms, displaying notifications and giving error messages. Ensure info tips, carousels, date-pickers and other widgets all look and behave the same way Don’t reuse functional icons for different purposes: A ‘next’ arrow should always be a next arrow Use clear, consistent terminology: Ensuring your terminology is consistent will lessen cognitive load and make a site feel easier to understand. If search functionality is labelled ‘Search’, use this term throughout – don’t introduce other descriptors such as ‘Find a topic’ or ‘Page lookup’

114

february 2016

Heidi (@heidiwork) is a developer and accessibility consultant. Her business Arch Inclusive (archinclusive.com) specialises in creating accessible websites and helping others do the same


A NAMESCO COMPANY

PROJECTS Custom animations with Motion UI Design prototypes with Proto.io Build a site for a global audience Make a weather Create storyboards for your animations

9000

9001

Use the top ES6 features today

Net 2016 276 february  
Read more
Read more
Similar to
Popular now
Just for you