Web Designer 242 - 2015 UK

WEB AUDIO

IN ACTION

UNLEASH THE API TO

CODE A DRUM SYNTH

TRIGGER

CSS EVENTS

IMPLEMENT JQUERY TO

KICKSTART ANIMATIONS

UNIQUE 3D

INTERFACES

NAVIGATE WITH

DEVICE ORIENTATION

BUILD YOUR

OWN PLUGIN

STEPS TO CREATE

& UPLOAD

TO THE OFFICIAL REPOSITORY

TO THE JS LIBRARY

PAGES DEDICATED

RESPONSIVE

IMAGES

BEST CONTEMPORARY

&

NEXT

-GEN TECHNIQUES

28

BUILD YOUR

OWN PLUGIN

STEPS TO CREATE

&& UPLOAD

TO THE JS LIBRARY

PAGES DEDICATED

28

RESPONSIVE

IMAGES

BUILD WITH

ANGULARJS

HOW TO CODE

, CREATE

AND TEST

ISSUE 242

28

FREE247

MINS OF

Query, it’s a staple part of a web designer/developers toolkit. Its core use may have shifted but it’s still a much in demand library. According to statistics from libscore.com it’s in use on 65 per cent of the top one million websites. JQuery can’t be ignored and we thought it was time we dedicated ourselves to the JavaScript library. This issue features a whopping 28 pages on it. So what’s inside? We have two features, ‘Be a jQuery code master’ and ‘25 Pro plugins’. Code master unveils the core techniques needed to code, how to integrate jQuery with ES6 and our very own

cheat sheets which you can download from FileSilo. The Pro plugins feature takes a look at an essential collection of 25 of the best add-ons, perfect for making projects exactly as you want them.

Keeping them company is a couple of tutorials. Learn the principles needed to build your own jQuery plugin and find out how to upload to the jQuery repository. Plus, discover how jQuery can be used in combination with CSS to trigger events in an image gallery.

While jQuery takes centre stage we haven’t forgotten the ever popular Angular. And, we have responsive image best practices, 3D UIs and the power of the Web Audio API. More than enough to keep you busy until next time out. As always enjoy the issue.

Welcome

to the issue

THE WEB DESIGNER MISSION

To be the most accessible and

inspiring voice for the industry,

offering cutting-edge features

and techniques vital to

building future-proof

online content

Steve

Jenkins

“

Skills can be

learned. Values

however are

different

”

The team at Phoenix reveal how they want their work to touch people’s lives. Page 32

“

JQuery’s gentle

learning curve can

be a great intro to

JavaScript and

since conception it’s

become the go-to

for a first ‘taste’ of

JavaScript

”

Follow us on Twitter for all the news & conversation

@WebDesignerMag

Visit our blog for opinion, freebies & more

www.webdesignermag.co.uk

Highlight

meta _________________________________________________________________________

3

<meta>

welcome

J

to the issue

Become a jQuery master

Video Tuition – jQuery: 274 Minutes of expert video guides from

Digital Tutors

Assets – The ‘Oh So Dandy’ Pack from A Cup of Resources

Fonts – Manbow and Mesmerize from Typodermic fonts

– 10 Exclusive polygonal textures

46

FREE –

exclusive with this issue

Designer resources

www.filesilo.co.uk/webdesigner

4

__________________________________________________________________________meta

<meta>

contributors

Got

web skills?

We’re always looking for the hottest web-design talent. Email [email protected]

with examples of your creative work

Mark Billen

Mark is a freelance technology journalist with a background in web design and development. This issue he tackles the Lightbox pages and reveals how to create a host of quick-fire techniques you need to know. Page 14

Leon Brown

Leon is a freelance web developer and trainer who assists web developers in creating efficient and secure code for projects. This issue he shows how to use jQuery for managing user interactions with CSS. Page 46

Sean Tracey

Sean is a technologist currently playing with technology for a London-based newspaper. This issue he demonstrates how to use the Web Audio API sound buffers to create a drum kit that triggers sounds. Page 84

Mark Shufflebottom

Mark is a professor of Interaction Design at Sheridan College. This issue Mark creates an augmented 3D user interface that uses the mobile or tablet’s device orientation controls to navigate the menu in 3D space. Page 66

David Howell

David is an experienced writer, author and journalist who runs his own publishing company Nexus Publishing. This issue he takes his interview skills to Montreal and the offices of digital creatives Phoenix. Page 32

Ralph Saunders

Ralph is a seasoned front-end developer working at Redweb. In this issue he explores responsive imaging techniques and tells us how <picture> can give rise to responsive art direction for creative teams. Page 70

Tam Hanna

Tam Hanna started off his career programming in C and C++. Due to that, he can understand the pain caused by duck typing and prototypical inheritance. This issue he reveals 25 of the best contemporary jQuery plugins. Page 56

Rafael Garcia Lepper

Rafa is a JS developer specialising in writing single-page applications who’s been working on the web for 15+ years. In this article he takes us through key techniques for building a web app using best practices in AngularJS. Page 78

This issue’s panel of experts

“

The library’s core is

well-thought-out and

the jQuery team has

an incredibly

methodical process

to implementing

new features

”

Welcome to that

bit of the mag

where we learn

more about the

featured writers

and contributors…

Daniel Jenkins

Daniel is a self-confessed technologist with a background in leading web projects for multinational brands. His article gives an overview of jQuery and why fully understanding its features, enables it to stay a relevant library in the modern web developers ever-growing toolkit. Page 38

Imagine Publishing Ltd

Richmond House, 33 Richmond Hill Bournemouth, Dorset, BH2 6EZ

☎ +44 (0)1202 586200

Web: www.imagine-publishing.co.uk

www.webdesignermag.co.uk www.greatdigitalmags.com

Magazine team

Editor Steven Jenkins

[email protected]

☎ 01202 586233

Senior Designer Benjamin Stanley Production Editor Carrie Mok Photographer James Sheppard Senior Art Editor Will Shum Editor In Chief Dan Hutchinson Publishing Director Aaron Asadi Head of Design Ross Andrews

Contributors

Leon Brown, Mark Billen, David Howell, Daniel Jenkins, Tam Hanna, Mark Shuffl ebottom, Ralph Saunders, Rafael Garcia Lepper, Sean Tracey

Advertising

Digital or printed media packs are available on request.

Head of Sales Hang Deretz

☎ 01202 586442

[email protected] Sales Executive Luke Biddiscombe

☎ 01202 586431

FileSilo.co.uk

Assets and resource fi les for this magazine can be found on this website.

Register now to unlock thousands of useful fi les.

Support fi [email protected] International

Web Designer is available for licensing. Contact the International department to discuss opportunities.

Head of International Licensing Cathy Blackman

☎ +44 (0) 1202 586401 [email protected]

Subscriptions

[email protected] To order a subscription to Web Designer:

☎ 0844 848 8413 ☎ +44 1795 592 878 Email: [email protected] 13-issue subscription (UK) – £62.30 13-issue subscription (Europe) – £70 13-issue subscription (ROW) – £80

Circulation

Head of Circulation Darren Pearce

☎ 01202 586200

Production

Production Director Jane Hawkins

☎ 01202 586200

Finance

Finance Director Marco Peroni Founder

Group Managing Director Damian Butt Printing & Distribution

Printed by Southernprint Ltd, 17-21 Factory Road Upton Industrial Estate, Poole, Dorset, BH16 5SN Distributed in the UK, Eire & the Rest of the World by Marketforce, 5 Churchill Place, Canary Wharf, London E14 5HU

☎ 0203 787 9060 www.marketforce.co.uk

Distributed in Australia by Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street, Sydney, New South Wales 2000, Australia,

☎ +61 2 8667 5288

Disclaimer

The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this magazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used specifi cally for the purpose of criticism and review. Although the magazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This magazine is fully independent and not affi liated in any way with the companies mentioned herein. If you submit material to Imagine Publishing via post, email, social network or any other means, you automatically grant Imagine Publishing an irrevocable, perpetual, royalty-free license to use the materials across its entire portfolio, in print, online and digital, and to deliver the images to existing and future clients, including but not limited to international licensees for reproduction in international, licensed editions of Imagine products. Any material you submit is sent at your risk and, although every care is taken, neither Imagine Publishing nor its employees, agents or subcontractors shall be liable for the loss or damage.

© Imagine Publishing Ltd 2015 ISSN 1745-3534

BEST!

TEST THE

BEST!

1 month free!

Then from £4.99 per month

*

Easy to use –

ready to go

The 1&1 Cloud Server offers unbeatable

performance in terms of CPUs, RAM

and SSD storage! Implement your

cloud projects with the perfect

combination of fl exibility and

powerful features.

1&1 CLOUD SERVER

1and1.co.uk

* 1&1 Cloud Server 1 month free trial, then from £4.99 per month. No minimum contract period. Prices exclude 20% VAT. Visit 1and1.co.uk for full offer details, terms and conditions. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries. 1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester, GL1 2EX.

0333 336 5509

DOMAINS | MAIL | HOSTING | eSHOPS |

SERVERS

TRIAL

TRY FOR 30 DAYS

1

CLICK

UPGRADE OR DOWNGRADE

1

CALL

SPEAK TO AN EXPERT

1

Load balancing

SSD storage

Billing by the minute

Intel

®

_Xeon

®

_Processor

E5-2660 v2 and E5-2683 v3

6

__________________________________________________________________________meta

<meta>

inside issue 242

Cutting-edge features, techniques and inspiration for web creatives

Quick look…

08

Virtual reality, a reality

VR has been on the cards for years. But 2015 sees the technology finally coming to fruition. Web Designer investigates what lies ahead

10

Webkit: The best must-try

resources out there

Discover the libraries and frameworks that will make your site a better place to visit

12

The future of jQuery

Developer Leon Brown of Nextpoint discusses what is next for jQuery and the potential it has to offer web projects

14

Lightbox

A showcase of inspirational sites and the techniques used to create them

26

A story of shoes

Find out how the team at BBH pulled together 200 years of Clark’s history to create “not just another corporate history”

32

Changing Perceptions

Branding, interactive solutions and visual communication in all its forms converge at Phoenix. They tell us their story

38

Become a jQuery code master

Learn the core techniques, how jQuery works with ES6 and the key benefits of using the library in a professional environment

56

25 Pro jQuery plugins

Discover the best contemporary jQuery add-ons for making your sites and apps a better experience for the user

78

Build with AngularJS

Get to grips with the techniques and know-how needed to start creating your own web apps

90

Hosting listings

An extensive list of web hosting companies. Pick the perfect host for your needs

98

Next month

What’s in the next issue of Web Designer? Find out what you can look forward to

Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…

[email protected] @WebDesignerMag www.webdesignermag.co.uk

contents

14

Promotional movie site and poignant shrine

Cover focus

32

The Creative Studio unveils how they operate

ProFile: Phoenix

38

18

Lightbox: Amy

The

jQuery

issue

meta _________________________________________________________________________

7

<tutorials>

Web gurus take you step-by-step

through professional techniques

50

Create a custom jQuery plugin

Discover the techniques needed to build a bespoke add-on and submit to a repository

78

Build with AngularJS

Get to grips with the know-how needed to start creating your own web apps

84

Make drums with Web Audio

Use sound buffers to create a drum kit that responds quickly and reuse to trigger sounds

FileSilo

• 274 Mins of jQuery video guides

• 10 Polygonal textures

• The ‘Oh So Dandy’ pack

• Manbow and Mesmerize fonts

A comprehensive collection

of free designer resources!

94

Get the latest must-have resources and videos

web workshop

web developer

Visit the

WEB DESIGNER

online shop at

for back issues, bookazines and DVDs

Visit the

WEB DESIGNER

online shop at

08

The VR revolution (again)

Technology has finally caught up with virtual reality. This means that its potential can finally be realised. Web Designer looks at what lies ahead in the very near future and how it can work with the browser

10

Webkit: The best must-try

resources out there

Need a new framework or library? Then this is where you need to start

12

Comment:

Leon Brown

Long-time web developer Leon discusses the future of jQuery, where it’s going and what it means for web developers

<header>

The tools and trends to

inspire your web projects

74

Code CSS 3D zoom effects

dynamite.ch

scholzandfriends.ch/de/

Use jQuery to make

your code simple to

understand

Leon Brown

46

jQuery user interactions

Use jQuery to manage user interactions with CSS to

support visual presentations

66

Code a mobile 3D UI

Create a browsing experience with three.js’ CSS renderer and a mobile’s device orientation controls

70

Master responsive images

Learn how to use <picture> and srcset and bring art direction to responsive images

94

56

The best contemporary jQuery add-ons for making sites and apps a better experience

Never

miss an issue

Subscribe

Turn to page 76 now

USA readers turn to page 89 for an exclusive offer

he concept of virtual reality has promised a lot but in truth, it has delivered very little for as long as Web Designer can remember (and we have long memories). But, it doesn’t matter what age you are, VR will have inevitably been promised and failed in your lifetime.

For most of us games will have been the path to VR. Back in the early Nineties Sega announced its VR headset and it was in the arcades where the magic of VR was happening. They even brought out Virtua Racing for some ridiculous sum. Nintendo didn’t want to be left out as they released the Virtual Boy. TV and films were another breeding ground for the future, who can forget Neo and The Matrix trilogy?

The reality of virtual reality back then was that it never fulfilled its potential, simply because the technology wasn’t ready. But, in those intervening years technology and hardware have advanced far enough to make the next VR revolution a real one.

It was the advent of the Oculus Rift when virtual reality really took off . Palmer Luckey (what a great name) was the man, or should we say boy, who founded the headset. In a very short space of time he has turned VR into the reality it was always going to be. After showing off the OR in 2013, Luckey was selling the OR to social giants Facebook for the princely sum of $2 billion. Not bad for a couple of years work.

Oculus is not the only VR headset set to make its way into the market. There is the Samsung Gear, HTC Vive and Fove VR to name a few, and all of these will be giving the consumer a new experience very soon. And, of course there is the Google Cardboard, a true budget option that will undoubtedly ensure that the VR experience is going to be brought to the masses.

But what really excites us at Web Designer is the potential of VR in the web space. Browser support, tools, SDKs and libraries are all out there giving developers the opportunity to get creative.

The early adopters have already been getting creative with the technology. Back in

issue 231 we featured the Lexus NX experience (lexus.eu/vr) a project that brought together VR, HTML5 and 3D. This was very much a simple viewing experience with little interactivity. But, creators Amaze were already looking to the next possible step: interaction.

Peugout’s Catch the Dragon (catchthedragon.nl) is alos another great example of virtual reality, 360-degree video and the potential that it has in the browser.

Pushing forward the VR browser experience are the good people at Mozilla. The MozVR team are looking to bring high-performance virtual reality to the open web. Check out MozVR (mozvr.com) for more on the project. Plus, look out for the next issue of Web Designer as we talk to the team and find out more about its VR work. You can also try getting your hands dirty with the latest build of Firefox with VR (mozvr. com/downloads)

There is so much more to come over the coming years, and even months – this is only the beginning. The VR revolution is here and, this time, it really is happening.

8

_______________________________________________________________________header

The tools and trends to inspire your web projects

If you have a creative project, new web product or great designer story, contact the editorial desk

<header>

@WebDesignerMag

[email protected]

Virtual reality is finally a reality. Web Designer takes a look at

what’s happening now and what the browser will bring

T

The VR revolution

is here (again)

Get Web

Designer

digital

editions

Web Designer’s latest digital addition to our burgeoning collection is Advanced Angular. The library has become part of a developer’s arsenal and on off er is a host of must-know information.

Don’t forget The Art of Responsive Design and The Web Apps Handbook. Get an insight into how to build apps with HTML, CSS and JS and the popular libraries including PhoneGap.

Plus, check out Web Design Superstars, 225 Best Web Tools and Resources and Amazing Websites and How to Build them Vol 02. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl to download the free Web Designer app and find them waiting for you as an in-app purchase.

VR Cricket

bit.ly/1LYGlWK

Have a go with the motion-sensored bat. It’s just like being on the pitch.

Inspirit

mozvr.com/projects/inspirit

A surreal experience that uses three.js, Blender and the Web Audio API.

Chrome Experiments for VR

vr.chromeexperiments.com A collection of projects perfectly viewed with Chrome and Cardboard.

3 VR Projects to check

Get your hands on a VR headset and see how good virtual reality is today

the beginning. The VR revolution is here and, as an in-app purchase.

Get your hands on

a collection of top

Angular tips and

techniques

header_______________________________________________________________________

9

inspiration

<header>

Sites

of the

month

Classy animation and transitions

Step into space with this atmospheric site How sound and animation can mix

Interactive film quiz not to be missed

King

arenaofthemes.com/king

A host of layouts all with a contemporary look and feel. Choose from fullscreen, full-width, boxed and eCommerce to create a great-looking web presence.

Hot hexidecimal codes

Col ur picker

Kick The Sugar

Addiction

Real-life imagery of sugary sweet products are accompanied by simple circles of information telling the reader how much sugar they consume.

bit.ly/1GtFDUo

Keeping the sugar theme on track is a pink-based colour theme, along with the use of child-like fonts that help the infographic to reinforce the message.

The best fonts you need

Typesetter

The Umbrella Factory

on.be.net/1jmo7r8

Beautiful backgrounds, gorgeous colour schemes and a real sense of style epitomise Brian Miller’s work for The Umbrella Factory project.

Great visuals to inspire

Graphics

Style up your WordPress

Th mematic

Gray-pink

bit.ly/1GtFEI0 #FDE7E5 #E0286B #C4BCBC #B33E97 #FAC1C1 #86449A #878182 #7551A1 #F26E79 #AFA7D3

Angel

bit.ly/1GtFFeZ

Revista

bit.ly/207rlzk

A fashion-conscious serif font that has added flamboyancy.

Foto Frigerio fotofrigerio.it/en

Party Mode preziotte.com/partymode

PopCorn Garage popcorngarage.com

ARK Starmap robertsspaceindustries.com/starmap

1

1

2

2

<design notes>

A collection of inspirational visuals

TTFirs

bit.ly/1PO1x7O

Big, round and bold, perfect when impact is needed.

10

_____________________________________________________________________header

Resources

<header>

Popmotion

popmotion.io

This is a small JavaScript motion engine, only 12KB, that incorporates animation, physics and input tracking. It is aimed at motion for UIs and has native support for CSS, DOM attributes, SVG and SVG paths, and can be used with any API that accepts numerical values. Popmotion offers start, stop, reverse, loop, chain and delay animations. It also offers a number of in-built easing functions that can be used with other animations.

Popmotion’s physics simulations are used to create natural interface actions. Mouse and touch inputs are supported by default but you can also work with other sources.

<webkit>

02

01

03 04 05

TOP 5 Code playgrounds

Need to play with your latest HTML, CSS, JS, jQuery projects? Try these

CodePen

codepen.io

A popular choice amongst designers and developers. A great place to get your work seen, or alternatively to get inspired and link to.

JSBin

jsbin.com

This is a powerful tool that lets users experiment with full source code in a throw-away environment. You can watch other people’s code too.

CSS Deck

cssdeck.com

A simple and easy-to-use playground with windows for HTML, CSS and JavaScript, and a window for seeing the code in action.

Dabblet

dabblet.com

A great looking and intuitive interactive tool with no distractions. It recently added JavaScript and allows for saving to GitHub.

Liveweave

liveweave.com

Resizable panels for HTML, CSS, JS and code preview. It offers context-sensitive code-hinting and quick links to all the popular dev libraries.

Discover the must-try resources that

will make your site a better place

google.github.io/lovefield/

A relational database for web apps that is written in JavaScript and is cross-browser compatible. Check out the demos to see it in all its glory.

Lovefield

bit.ly/1PP3y3B

Get yourself a template for developing React-based applications by using ES6 syntax and webpack as a module bundler.

React webpack template

geticonjar.com

The bigger an icon collection becomes the more difficult it is to organise. Iconjar helps to manage a collection so they are easy to find.

Iconjar

angular.io/cheatsheet

Check out this provisional cheat sheet for Angular 2. Includes bootstrapping, forms, dependency injection configuration and more.

Promotion _________________________________________________________________

11

THE INTERNET

OF THINGS

Promotion

Learn how IoT works, and how to create a successful

product or company using it

The Internet of Things starts on 23 November 2015 and is

completely free. The online course lasts for four weeks and

requires two hours a week of study. Find out more at

FutureLearn.com

E

ntrepreneurs love it, large corporations love it, universities and now even governments love it – welcome to the exciting and emerging world of the Internet of Things (IoT). Decades ago, we connected computers and got today’s powerful internet. However, it’s only been over the last few years that we’ve started to connect everyday objects using machine-to-machine (M2M) technologies, to create the Internet of Things.

But what does this really mean to you, your company and your country? What are the possibilities it offers, and the threats it poses? To become an IoT wizard, join this stimulating free online course.

Over four weeks, you’ll meet IoT pioneer, professor Mischa Dohler, and some of the most experienced experts in the field, from business leaders to future thinkers, to equip you with business insights to help you become an Internet of Things wizard.

We’ll take you on a journey, exploring the entrepreneurial aspect of the Internet of Things. We’ll ask: “What makes an exciting Internet of Things product?” You’ll look at the shockingly fragmented wireless connectivity landscape and why so many mistakes have been made in connecting your ‘things’. You’ll consider the security and privacy aspects of the Internet of Things.

Finally, we’ll equip you with business insights, enabling you to start your own IoT venture. You’ll learn what it really means to build an IoT product and how to stand out and be ahead of the crowd of IoT prototypers.

The Internet of Things, also referred to as the Industrial Internet, the Internet of Everything or Industry 4.0, is seen as the next global or fourth industrial revolution. Being equipped with the fundamentals and practicalities taught here makes you an insider into this quickly growing industry, and will present you as great value to potential employers.

The jQuery library was developed with the aim of making life easer for web developers when developing JavaScript. Not only did it make writing

code faster and easier to learn, but it took care of browser consistencies – especially in the days when IE pretty much ignored web standards.

Something that many front-end developers were quick to pick up on was the abilities of jQuery to assist with visual animations and presentation. This led to the availability of many visual components such as fancy picture galleries and visual user interface components long before HTML5 arrived. This is great if you are working alone as well as from a technical perspective, but possibly not so great from the perspective of project management strategy. JavaScript is a programming language, hence placing control of design directly inside programming is a recipe to cause conflict between time-restricted programmers and designers who want to maximise the control of how their designs are implemented.

From the perspective of project management, it makes sense to keep design formatting separate from programming logic since the majority of designers don’t tend to have strong JavaScript programming skills. Add to this that assigning a JavaScript design alteration task to someone who isn’t highly familiar with programming being likely to result in mistakes being introduced that stop part or whole amounts of functionality from working – you can quickly find your project in a situation where every design alteration leads to several features being broken: a nightmare to manage when meeting deadlines and budget requirements.

With HTML5 and CSS3 offering many of the abilities that were previously only available via JavaScript, it makes a lot of sense to embed your visual

Web developer Leon Brown tells us how he thinks web developers

should use jQuery and prepare for the future

THE FUTURE

OF JQUERY

presentation instructions inside these instead of JavaScript simply because mistakes in HTML and CSS stylesheets won’t lead your functionality to stop working when a mistake is introduced. In addition, it is easier to overwrite CSS-based presentation as well as to offer the ability to change stylesheets that result in your webpage having a completely new appearance.

So if the use of jQuery is to be discouraged for directly applying styling to webpage elements, what is it meant to be used for? Web functionality still requires JavaScript to manage user interactions and data processing – which is where jQuery excels at helping

programmers to write this type of code quickly and easily. Instead of attaching specific style instructions such as to change text to a specific colour, move an element to a specific coordinate or change the display attribute of an element, jQuery should instead be used to apply attributes to HTML page elements that can be detected via CSS – eg setting attribute

data-highlighted=”yes” in an HTML element via jQuery would instantly trigger any presentation rules in the CSS stylesheet referenced by [data-highlighted=”yes”].

A lot of attention is given to the visual capabilities of jQuery, but the library offers a lot more in relation to data

processing too. There are many webpage components that provide instant availability of data management features. These libraries enable you to present data you have listed on your page such as in a regular HTML table, but with features such as search, pagination and hiding of selected data – from just writing a few lines of code to initialising the component on your page with the setting you want them to operate with. Components that have been written to a good standard will also apply the same concept described above, allowing you to make visual presentation alterations from their CSS stylesheet without the need to alter any of their core jQuery JavaScript code.

One functionality that is worth mentioning is jQuery’s .ajax() method – a functionality that allows data to be sent to a webpage server without the need to refresh your webpage. This can be achieved with plain JavaScript too – jQuery just makes it a bit easier to write. The use of AJAX allows you to create features that require server communication that is faster and convenient for the user. It reduces your bandwidth too; by avoiding the need to reload your page, users can submit data without losing anything they’ve been typing/using on other parts of the page.

To summarise, jQuery offers a lot of potential to web projects – but its potential should be applied with consideration to some of the potential conflicts that can occur later. Use jQuery to make your code simple to

understand while at the same time giving control to other team members in a way they can best work with – ie designers work better with CSS than JavaScript. With websites and the rise of web apps, the jQuery data features are also likely to become more important to your web projects in the coming years. How do you see jQuery being applied to your work?

LEON BROWN

Web/software developer at Nextpoint

leonbrown.info

12

______________________________________________________________________header

<header>

Our revolutionary NEW

Web Hosting platform

Call

0333 0142 708

or visit

fasthosts.co.uk/hosting

SERVERS • WEB HOSTING • DOMAIN NAMES • EXCHANGE EMAIL

Web Hosting from:

£1

.99

per month ex VAT charged at 20%

guaranteed

UP TIME

100%

100% guaranteed

uptime!

Smart SSD storage

& intelligent load

balancing

Dedicated SSL

certifi cates

14

____________________________________________________________________lightbox

Know a site that deserves to grace these pages? Tweet us now

@WebDesignerMag

<Above>

• A large header background image immediately speaks to kids and the virtual classroom context works well for the Project Schoolkrant experience

<Above>

• The site content revolves around 24 lessons, passing on core journalistic skills for creating a school newspaper to children

<Above>

• Each section has its own bright, recognisable colour scheme to provide a modular feel that remains stimulating to kids

<Above>

• Cute illustrations and subtle animations are peppered throughout, while navigation keeps access to specific lessons quick and intuitive

<Above>

• A cast of virtual tutors host a series of embedded videos. They also appear as their own animated avatars to guide and inform

#898989 #0A2D32 #9C6534 #89579F

lightbox ____________________________________________________________________

15

T

Project Schoolkrant

Designer

J. Walter Thompson (JWT)

Amsterdam, Superhero Cheesecake

jwt.amsterdam

superherocheesecake.com

Development technologies Adobe After Effects, HTML5 (Flash/CreateJS), CSS3,

JavaScript, Backbone, GSAP, Laravel (PHP MVC)

his rich educational site produced by JWT Amsterdam and commissioned by De Persgroep Publishing’s daily Algemeen Dagblad, acts as a curriculum tool for teachers and pupils alike. Built around five colourful lesson sections spanning news gathering, interview, photography, writing and design skills, the content culminates in compiling a school newspaper. Video tutorials from virtual tutors and a collection of animated characters combine beautifully to form an engaging experience purpose-built for young eyes and minds.

A three-pillar approach marries colourful environments, playful learning assets and game-like features throughout. Completing

“

We wanted to make an entertaining and

easy-to-use platform

”

It’s top marks for this charming site encouraging

Dutch children into newspaper journalism

tests unlocks badges to mark progress so visitors can return, log in and continue at leisure. The keenest kids can even submit their efforts in the hope of winning valuable publishing work experience. “We wanted to make an entertaining and easy-to-use platform using appealing colourful illustrations and animations when building the lessons and quizzes,” says David Navarro, head of design & digital creative director at J. Walter Thompson. “The best way to bring that universe of journalism to life was to use Flash to animate the characters and use Adobe tools and the CreateJS suite to convert these animations to HTML5. Digital production studio Superhero Cheesecake built the platform in vanilla JavaScript on a Backbone base and [used] the GSAP animation framework in creative ways in order to make it work properly across platforms and devices.”

<Above>

• Monstro Solid by PintassilgoPrints is the uppercase font used across headings in main tabbed sections

<Above>

• Besides Times Roman listed as a system font, Roboto Regular in normal weight is listed amongst the site styles

random positions for each character within the heading. Now use the new cycle property within GSAP so that each character will get a diff erent random position and thus a diff erent animation:

001 function textWiggle() {

002 var timelineWiggle = new

TimelineMax({repeat:-1, yoyo:true});

003 for(var j=0; j < 10; j++) {

004 timelineWiggle.staggerTo(chars,

0.1, {

005 cycle: {

006 x: function() { return Math.

random()*4 2; },

007 y: function() { return Math.

random()*4 2; },

008 rotation: function() { return Math.

random()*10 5; }

009 },

010 ease: Linear.easeNone

011 }, 0);

012 }

013 }

06

Trigger the wiggling

All that is left to do within our code is to finally call the textSplit and textWiggle functions at the very end of the <script> tag to initiate the eff ect. Simply save your page and test in your browser to preview. You can then use this technique in various ways, so try changing the various parameters or come up with new

animations to suit your own projects.

001 textSplit();

002 textWiggle();

003 </script>

16

____________________________________________________________________lightbox

WORKSHOP

01

Download and attach GSAP

For this technique we’ll show how you can re-create the ‘wiggly’ text headings found within Project Schoolkrant whenever a quiz begins. To get started, download the latest version of GSAP (1.18.0 or higher) from greensock.com/gsap. Unzip the minified JS file and place within your chosen project path. Start with a clean HTML document in the site root and reference the JS file inside the <head> tag or link to the CDN instead as shown:

001 <html>

002 <head>

003 <!-- Download GSAP link to page as

follows -->

004 <script src="js/vendor/TweenMax.

min.js"></script>

005 <!-- Or via the latest CDN link as

follows -->

006 <script src="https://cdnjs.

cloudflare.com/ajax/libs/gsap/1.18.0/

TweenMax.min.js"></script>

007 </head>

008 </body></body>

009 </html>

02

Add your heading text

So in the very simplest terms, our page needs a heading to animate. To create an example heading, you need to add a <h1> tag to the <body> tag in your HTML document. You can of course use <h2> to <h6> headings as desired just as long as you specify a class name, such as ‘title’, so that we can reference it within our JavaScript and also apply additional CSS styling within the <head> tag.

001 <body>

002 <h1 class="title">Quiztime!</h1>

003 </body>

03

Create a script tag

Before you can create the wiggle function for the heading, you need to create a <script> tag for our JavaScript and add it to the bottom of the <body> tag in your HTML document. Create a variable within the <script> tag called ‘chars’. This variable will store all the references to the individual characters found within the text of your heading.

001 <script>

002 var chars = [];

003 </script>

04

Split up the characters

Next we need to write a function within the <script> tag named ‘textSplit’. This starts by finding our heading element based on the class name before reading the text contents of the heading. It then iterates over all its text characters and splits them into the ‘chars’ variable. By also replacing the contents of the heading with a separate <span> tag per character, we can give each individual text character its own animation eff ect:

001 function textSplit() {

002 var title = document.

querySelector('.title');

003 var splitText = title.textContent.

split('');

004 title.textContent = '';

005 var character;

006 for(var i=0, len=splitText.length;

i<len; i++) {

007 character = document.

createElement('span');

008 character.textContent =

splitText[i];

009 character.style.display = 'inline-

block';

010 chars.push(character);

011 title.appendChild(character);

012 }

013 }

05

Create the wiggle effect

Next we need another function within the <script> tag. Name this one ‘textWiggle’. Add a GSAP Timeline to this function that will repeat itself when done, and for it to go back and forth. Within the textWiggle function, create a loop to create multiple

Add wiggling text headings to

your pages with GSAP

Jordi Romkema, managing partner at Superhero Cheesecake, reveals the

animation technique behind the site’s wiggly quiz-time headings

18

____________________________________________________________________lightbox

Know a site that deserves to grace these pages? Tweet us now

@WebDesignerMag

<Above>

• A static opening page keeps things tasteful and minimal with links to both the main site and quick access provided for tickets for the film

<Above>

• Key phrases are highlighted within Amy’s own words and placed elegantly over video clips of the troubled star, to poignant effect

<Above>

• This dynamic rollover menu element provides more direct navigation between the Talent, Love, Triumph, Pain and Fame sections

<Above>

• Promo site turns book of memorial, almost inviting fans to leave profound words of remembrance woven back into the experience

<Above>

• Links out to cinema listings and external ticket booking sites are helpful for those following up with the film

#FFFFFF #FFD1D8 #E1C4A6 #121010

lightbox ____________________________________________________________________

19

F

Amy

amy-movie.com

Designer

Watson/DG, Benjamin Guedj,

Jean-Christophe Suzanne

watsondg.com, oursroux.com, jcsuzanne.com

Development technologies HTML5 <video>, History JS, CSS3, Modernizr,

JavaScript, GSAP (TweenLite), YouTube iFrame API, JSON, Facebook SDK

ew stars have burned as brightly and faded so fast as jazz-pop vocalist and songwriter Amy Winehouse. Her untimely passing in 2011 at the age of just 27 still has the music world reeling and the new movie this slick microsite promotes attempts to celebrate her life and works. Opening on a poster-style splash screen, the mercurial singer’s now iconic winged-eyeliner eyes gaze out from the browser before a sliding white-to-pink filled-in Enter button enables the user to delve even deeper. From here, a succession of Amy’s own quotes overlay video clips accompanied by looping audio of heart-breaking hit Love Is A Losing Game. Sections like Talent, Love and Pain highlight some of the great moments as

“

The site required quite a bit of backend

work to render seamless video play

”

Promotional movie site blends video and fan

comments to become a tragically poignant shrine

well as the turmoils in the star’s life. This startlingly emotive yet minimal backdrop is then heightened by the integration of guestbook-like comments posted by fans from across the globe. “The Amy site brings to life Asif Kapadia’s documentary of the same name with clean editorial lines, full-screen background video and the opportunity for visitors to leave their own comments throughout,” begins Lizzie Ruiz, integrated social producer at Watson/DG. “We wanted a smooth experience for users that would not only let them share their thoughts about the documentary and its subject, but give them a wealth of shareables to remind them of their moviegoing experience. The site required quite a bit of backend work to render seamless video play, but it was worth it to create an elegant experience that feels at once big and still very personal.”

<Above>

• Akidenz-Grotesk BQ by Berthold is used in Condensed and Medium Condensed forms throughout the site’s heading

<Above>

• Savoy is a custom font used sparingly, making an appearance to style the text in the comment snippet element

border-like underline below each of our title’s paragraph lines, and these will be manipulated via our timeline of transition. We will also need to create a CSS class to control it because you don’t have access to pseudo-elements in the DOM.

001 CSS:

002 // We use a pseudo-element to

create the border in the bottom of each

line (underline)

003 .teaser__title .line::after {

004 left: 0;

005 position: absolute;

006 top: auto;

007 background: #FFF;

008 bottom: 0;

009 content: " ";

010 display: block;

011 height: 7px;

012 -webkit-transition: width 300ms

cubic-bezier(.77, 0, .175, 1);

013 -moz-transition: width 300ms

cubic-bezier(.77, 0, .175, 1);

014 -ms-transition: width 300ms cubic-

bezier(.77, 0, .175, 1);

015 -o-transition: width 300ms cubic-

bezier(.77, 0, .175, 1);

016 transition: width 300ms cubic-

bezier(.77, 0, .175, 1);

017 width: 0;

018 }

019 // We create a state for the

manipulated line. It will be important

after

020 .teaser__title .line.is--

enabled::after {

021 width: 100%

022 }

023

06

JS and GSAP animation

For our main coding step we will be using jQuery to access the DOM elements, although you can do it with vanilla JavaScript. Secondly we utilise the wonderful Greensock GSAP library (greensock.com/ gsap) to set up a Tween timeline and control the animation of our title sequence. The key here is the call of the draw function when each transition starts. This will launch the drawing of the line we previously created within the CSS code. Simply call the function now!

20

__________________________________________________________________lightbox

WORKSHOP

01

The site title sequence

_{On the opening page of amy-movie.com we see}

a poignant paragraph of text glide draw into view in the top-left corner. In this technique we’ll look at how the site achieves this, suggesting tips for emulating this element. Please do keep in mind however that this is just one method to achieve the effect we’re highlighting and there are many solutions for re-creating it how you wish. As with most things in web design, your only limit is your creativity!

02

Link libraries

Over the next few steps we’ll examine a simplified version example based on extracts of HTML, CSS and JavaScript. Beyond using pseudo-elements we’ll also detail code in Step 6 utilising both jQuery and GSAP animation libraries. So begin with a new project within the IDE of your choice, this is Sublime Text 3 in our case (sublimetext.com). Let’s start by attaching those scripts to our page:

001 <!-- Place in the head of your page

-->

002 <script src="https://cdnjs.

cloudflare.com/ajax/libs/gsap/1.18.0/

TweenMax.min.js"></script>

003 <script src="https://code.jquery.

com/jquery-1.11.3.min.js"></script>

03

The HTML code

Here very simply we have our basic HTML markup structure for our element. First we have a static <h2> heading version of our page title, which is CSS styled to be ‘visuallyhidden’ – unseen from view but useful for SEO optimisation. Principally though, inside a <div> container we put each line of our title within <p> tags, both styled by our CSS. From here we

synchronously animate each of these lines into view:

001 HTML:

002 <h2 class="visuallyhidden">A

heart-breaking journey, a ground-

breaking motion picture</h2>

003 <div class="teaser__title">

004 <p class="line">A heart-breaking</

p>

005 <p class="line">journey</p>

006 <p class="line">a ground-breaking</

p>

007 <p class="line">motion picture</p>

008 </div>

009 CSS:

010 /* Class shown for additional

reference */

011 .visuallyhidden {

012 position: absolute;

013 overflow: hidden;

014 clip: rect(0 0 0 0);

015 height: 1px;

016 width: 1px;

017 margin: -1px;

018 padding: 0;

019 border: 0

020 }

04

Style the title elements

Moving over to the CSS code, we have our global classes for styling the appearance of our container and title elements. These are obviously reflective of how they appear within the Amy site, including font and colour choice and so on. However the most important thing here will be defining the classes for the pseudo-element that we will place below each line in the next step.

001 CSS:

002 // The global appearance

003 .teaser__title {

004 color: #FFF;

005 font: normal 90px/110px

AkzidenzGroteskBQ, sans-serif;

006 letter-spacing: 8px;

007 position: relative;

008 text-transform: uppercase;

009 }

010 // We force each line to fit its

content, then line will inherit of this

width

011 .teaser__title .line {

012 clear: both;

013 color: inherit;

014 float: left;

015 margin: 0 0 5px;

016 position: relative;

017 visibility: hidden;

018 }

05

Add the pseudo-element

Below those CSS classes we’ll add our :after pseudo-element. This is the part that styles the

Emulate the animated Amy

movie title sequence

The front-end developers on amy-movie.com reveal how the opening splash

screen’s title text was dynamically rendered using CSS and Tween transitions

22

___________________________________________________________________lightbox

Know a site that deserves to grace these pages? Tweet us now

@WebDesignerMag

<Above>

• From a combination of colour, design economy, tasteful typography and 3D effects this is a site that really meets its creative brief

<Above>

• Navigation between multitudes of sections is handled equally efficiently with hovering animated menus unfolding from the top

<Above>

• Often function can be compromised by form, but not here, with helpful content for attendees seamlessly integrated

<Above>

• At its heart this site represents a meeting of minds and creative talent, happy to be associated with this year’s festival

<Above>

• The About Us page cleverly weaves punchy paragraphs within parallax backgrounds featuring the cascading paper motif

#E48080 #745758 #FFDFB6 #C19B73

lightbox ___________________________________________________________________

23

W

KIKK – Fold/Unfold

kikk.be/2015

Designer

Dogstudio

dogstudio.be

Development technologies HTML5, CSS3, SVG, jQuery, Sizzle.js, PHP

hen putting on an international festival to promote digital and creative cultures, you don’t really want to compromise on a nice site. Thankfully the folks at Namur, Belgium’s KIKK association can boast a stunningly elegant online home for this year’s event. Attendees can browse workshop listings, conference schedules and sample exhibition previews ahead of arrival in November. Perhaps more immediately engaging though is the site’s softer styling approach and subtle use of UI effects to give page objects light and depth.

“

In this Fold/Unfold universe we tried to

communicate how folding elements can

actually bring a whole extra dimension

”

This annual digital creativity festival receives a

distinctive pink and paper-like makeover

Local agency Dogstudio, invited every year to reinvent the festival’s branding based on its annual theme, took direct inspiration to arrive at the site’s origami-like aesthetic.

From a dynamic Fold/Unfold header element, the motif appears throughout and it works hard to tie the whole experience together with its consistency and artistic grace. “KIKK Festival’s 2015 website was born from the very theme of this fifth edition of our beloved international festival,” explains Henry Daubrez, co-owner and creative director at Dogstudio. “In this Fold/Unfol universe, we tried to communicate how folding elements can actually bring a whole extra dimension to them and provide a different point of view. The whole website is actually about having this extra angle thanks to those moving gradients, 3D parallaxes, dynamic drop shadows and 3D listings.”

<Above>

• Sofia Pro by Mostardesign can be found styling the majority of site text ranging in weights of 300 up to 900

<Above>

• Calluna by exljbris Font Foundry is used to add some serif style to short passages of <span> text before paragraphs

we defined a perspective of 1000px, for a translation of 100px you have to downscale layers by ten per cent.

04

Physics-based movement

When the mouse leaves the floating card, a more natural physics-based movement is applied when returning it back to its initial position. This is achieved by using the JavaScript library dynamic.js by Michael Villar (dynamicsjs.com), which can be linked to your page via CDN as shown. What this allows us to do is add a ‘spring’ easing more conveniently, however the animation on the wrapper must be stopped when the mouse re-enters on it:

001 HTML:

002 <script src="https://cdnjs.

cloudflare.com/ajax/libs/dynamics.

js/0.0.7/dynamics.min.js"></script>

003 JAVASCRIPT:

004 wrapper.

addEventListener("mousemove",

function(event) {

005 ...

006 dynamics.stop(wrapper);

007 wrapper.style.transform =

"rotateX(" + rotateX + "deg) rotateY("

+ rotateY + "deg)";

008 });

009 wrapper.

addEventListener("mouseleave",

function() {

010 // Move the floating card to its

initial position

011 dynamics.animate(wrapper, {

012 rotateX: 0,

013 rotateY: 0

014 }, {

015 type: dynamics.spring,

016 duration: 1500

017 });

018 });

05

Add lighting effects

As we move our card in a 3D environment, playing with the light will add a more realistic effect. On the mouse move we change the angle and the width of the linear-gradient used as shadow on the image. It’s a little tricky but it does add another dimension to the effect during the movement. Preview the result via CodePen at codepen.io/fabricelejeune/pen/KdWzWg.

24

___________________________________________________________________lightbox

WORKSHOP

01

Structure the main elements

First of all, you need to set up your stage. The structure of our floating card is quite simply composed of an image, a title and a caption, wrapped in a number of <div> and <span> containers and styled with CSS to add the various decorations. Within this, the card has an SVG border that gives us the ability to animate its dasharray and dashoffset stroke properties on hover. View the full CSS/SCSS and step code listings within the accompanying project files on FileSilo.

001 HTML:

002 <article class="fc" id="fc">

003 <div class="fc__wrapper">

004 <img src="http://www.dogstudio.be/

wd242/dog.jpg" class="fc__thumb">

005 <div class="fc__content">

006 <h1>Floating Card</h1>

007 <span class="caption">by

Dogstudio</span>

008 </div>

009 <span class="fc__light"></span>

010 <svg class="fc__border"

xmlns="http://www.w3.org/2000/svg">

011 <rect height="100%" width="100%" />

012 </svg>

013 </div>

014 </article>

015 CSS:

016 //Border classes with stroke

animations

017 .fc__border rect {

018 fill: transparent;

019 stroke: #777777;

020 stroke-width: 2px;

021 stroke-dasharray: 0 1232px;

022 stroke-dashoffset: -616px;

023 transition: stroke-dasharray 0.25s

ease-out, stroke-dashoffset 0.25s

ease-out;

024 }

025 .fc:hover .fc__border rect {

026 stroke-dasharray: 1232px;

027 stroke-dashoffset: 0;

028 }

02

Move with the mouse

To move the card dynamically with JavaScript we handle the event mousemove on the main <div> wrapper. From here we calculate the current mouse

position on the card with point 0,0 in the top left Next, calculate what angle or degree of movement this should give us on the x axis and z axis and apply it using the CSS transform property:

001 var fc = document.

getElementById("fc");

002 var wrapper =

fc.getElementsByClassName("fc__wrapper")

[0];

003 var fcHalfWidth = 135;

004 var fcHalfHeight = 205;

005 var maxRotateX = 6;

006 var maxRotateY = 6;

007 wrapper.

addEventListener("mousemove",

function(event) {

008 // Get mouse position in the card

009 var fcRect =

fc.getBoundingClientRect();

010 var fcOffset = {

011 top: fcRect.top + document.body.

scrollTop,

012 left: fcRect.left + document.body.

scrollLeft

013 };

014 var mouseX = (event.pageX

fcOffset.left);

015 var mouseY = (event.pageY

fcOffset.top);

016 // Move the floating card

017 var diffX = -1 * (fcHalfWidth

- mouseX);

018 var diffY = fcHalfHeight mouseY;

019 var rotateX = diffY / fcHalfHeight

* maxRotateX;

020 var rotateY = diffX / fcHalfWidth *

maxRotateY;

021 wrapper.style.transform =

"rotateX(" + rotateX + "deg) rotateY("

+ rotateY + "deg)";

022 });

023

03

Add some depth

We now have something moving nicely but it’s still rather flat. To add some depth, we just use a CSS transform to translate on the z axis of the title <div> and the border layer from 100px. To keep the initial size of these two layers visual, we have to change the scale. As

Build the floating card elements

found on KIKK Festival 2015

Dogstudio’s lead front-end developer Fabrice Lejeune offers a guide to

creating the visually effective rollovers found throughout kikk.be/2015

A

STORY

OF

SHOES

It all started with a sheepskin

slipper. Find out how BBH

pulled together almost two

centuries of Clarks to go

beyond “just another

corporate history”

Project

Clarks Unboxed

Web

clarksunboxed.com

Agency

BBH London

Web

bartleboglehegarty.com/london/

Duration

13 months

Total

Around 2,000

hours

26

_____________________________________________________________ design diary

A STORY OF SHOES

design diary _____________________________________________________________

27

R

evolution comes in many forms, and back in 1825 in the Somerset village of Street it was Cyrus Clark who changed the face of footwear with his sheepskin slipper. Their journey has continued through social upheaval, world wars, changing attitudes and it’s all come out the other side unscathed and still as popular today as they have always been.

Clarks shoes have been the fabric of many childhoods, remember desert boots, sandals and wallabees? These were the trendsetters, but it’s school shoes that have built more recent memories. Ask your family, ask your friends. We did, everybody and everyone had a fond memory to retell. It doesn’t matter how you remember Clarks, it’s the fact that you remember Clarks that matters. It’s a brand that has never followed fashion, it has always looked to tread upon its own path.

With such a rich history bursting to be told to an upwardly mobile online audience Clarks decided it was time to tell their story. How would the tale be told? One thing it wasn’t going to be was “just another corporate history” according to the team behind the build.

The remarkable story of Clarks got the treatment it deserved. It unfolds across a collection of 12 surprising, impressive and true stories about the unconventional people, ideas and beliefs that have shaped Clarks and shaped the world.

BBH delivered the project with spectacular craft. Unboxed is a project that weaves together storytelling, archive imagery and soundscapes into a seamless and richly immersive digital experience for desktop, tablet and mobile. Every story has a beginning and as we already know Clarks started back in 1825, and it was the close-to two centuries of history that was to be the focal for the project as the team at BBH explains, “The original brief from the client was to use nearly 200 years of Clarks history to drive awareness among consumers who don’t know the brand and reappraisal among those who do. When you dig into Clarks’ history, it’s so rich and surprising we knew immediately that this couldn’t be just another corporate history. This had to be about people. We wanted to show how Clarks have always done things their own way. How they’ve always been uncompromising and unconventional. How they have always stuck by their values, just like the people who wear their shoes.

”We saw an opportunity to bring these stories to life with a new kind of storytelling – a fresh way of weaving together words, images and sound to create something immersive and cinematic without burying the content in video. We wanted every element to move the narrative on. Nothing was ‘just for show’ – everything was working as hard as it possibly can – from the style of the writing, to the art direction and sound design, right down to the way it is coded. No one part working without the other.

”We developed initial concepts and presented three routes back to client that we felt could deliver against the ambition we had for the project. We had a favourite route, of course, and happily that’s the one that we ultimately delivered.”

Keeping the client in the loop helps to build relationships and ensures that the project remains on target, both in terms of the creative process and with

28

_____________________________________________________________ design diary

A STORY OF SHOES

the timescale. The team at BBH called this liberating as they explain, “We kept Clarks closely engaged with us on every stage of the creative journey, which was incredibly liberating. They were always robust about challenging our thinking, but close engagement ensured it was always collaborative and always pulling in the same direction. We always felt we had complete freedom. Part of the real joy of Unboxed was going into each creative

presentation and surprising the client with how far we’d pushed every element.”

With 200 years of history and thousands of designs to contend with, how would the visual presentation of the Clarks brand be brought to the masses? Graphics and images were not in short supply so the plan was to make sure that, while cohesive in structure, it still has its own story to tell that was exciting and engaging the reader.

“We wanted each story to look and behave differently, each with its own personality, its own art direction derived from the narrative itself. We storyboarded everything in detail first to work out movement, transitions, visual intrigue [and so on], structuring the design to seamlessly complement and express the text. For some of the stories we researched tens of thousands of images, retouching and composing them to revive these completely lost moments in time.

“In others we used illustration to capture a particular look or mood. There was a constant balancing act between the aesthetics and the historical accuracy – a major creative constraint that led to a brilliantly rewarding result.”

“

When you dig into Clarks’ history, it’s so rich and

surprising we knew immediately that this couldn’t be just

another corporate history. This had to be about people

”

From the moment that BBH received Clarks’ brief it was all hands on deck for the planning stage. With a mass of content to get creative with, BBH produced a myriad of sketches, wireframes and

storyboards to ensure that the user got the best experience possible.

Planning is the path to a perfect project