S L A F R I O O S T E U G T A T P R E P X E
� �
H T ML 5
CSS FL CSS FLIP IP EFFECTS ENGAGE USERS WITH DYNAMIC ELEMENTS
BEST TWITTER APIS
FREE OF HTML VIDEO �� MINUTES
CSS3
jQuery
JavaScript
@WebD @W ebDesi esigne gnerMa rMag g
/WebDe /We bDesig signer nerUK UK
SECRETS OF UI DESIGN
WHAT’S WHA T’S NEW WITH
WEB WE FONTS
DISCOVER PA DISCOVER PATTERNS TTERNS & HOW TO USE TH THEM
PROS REVEAL THE LATEST TRENDS & TOP TECHNIQUES Abc1 Abc 123
LEARN HOW TO INTEGRATE, EMBED & AUTHENTICATE
122ptMonts 122 ptMontserrat ExtraBold ExtraBold
TYPEWOLF FOUNDER TALKS TYPE TRENDS
CLEARLEFT DISCUSS THE FUTURE OF FONTS
BONNE MARQUE DELIVERS BEST PRACTICES
CODE CUSTOM CSS PROPERTIES EXPLORE THE POWERS OF CSS VARIABLES BUILD FULLSCREEN EXPERIENCES INTRODUCE HORIZONTAL AND VERTICAL PAGES TO PROJECTS CREATE CROSS PLATFORM APPS UTILISE HTML, CSS AND JS TO DEVELOP WITH THE ELECTRON FRAMEWORK ANIM ATE TEXT T EXT WITH CSS3 MAKE HEADLINES APPEAR AND DISAPPEAR
Abc123 51pt Tungsten Tungsten Sem Semibol ibold
MEET THE MEET THE WE WEB B ANIMATIONS API GET INTERACTIVE WITH JAVASCRIPT JAVASCRIPT
ISSUE 254
.com is so 1997 www.yourname.design
Stand out from the crowd and .design your domain name to reflect what you do! Web Designer readers get 40% off a .design domain name and email address with code WEBDESIGN40 code WEBDESIGN40
www.web.design
*Discount valid on non-premium names only. Domain name and Porkbun Email renew annually at regular prices.
.com is so 1997 www.yourname.design
Stand out from the crowd and .design your domain name to reflect what you do! Web Designer readers get 40% off a .design domain name and email address with code WEBDESIGN40 code WEBDESIGN40
www.web.design
*Discount valid on non-premium names only. Domain name and Porkbun Email renew annually at regular prices.
welcome
Welcome to the sue THEWEB DES DESIG IGNER NER MIS MISSIO SION N Tobe themost ac acces cessib sibleand leand inspiring vo voicefor icefor the industry industry,, offering offe ring cutting-ed cutting-edge ge fea features tures and techni techniquesvital quesvital to buildingfuture-proof buildingfuture-pro of online cont content ent
Highlight
“
We’rehuge believersin crossdisciplinary collaboration, collabora tion, but it’s alsonot unco uncommon mmon forr ustohav fo ustohave ea strategy-only strategy -only project, or a desig design-onl n-only y project
Steven Jenkins
”
Odopod fuse strategy, strategy, design, andtechnologyto ogyto help help leading leading Page 34 companies companies innovate. innovate. Page
Typewolf tells us what’s trending in type
F
onts,they’re onts,they’re everywh everywhere.No ere.No site, site, app
Keepi Keeping n g web web fonts fonts compan company y this this issue issue is anoth another er
or printedpublica printedpublicationcan tioncan live live without without
fron front-e t-end nd favo favour urite ite:: UI design design.. It’s allaboutpatterns allaboutpatterns,, but it’s
them. them. But, what’s what’s the latest latest trend? trend?
also also about about choosi choosing ng therightpattern therightpatterns. s. Getit wrongand wrongand it
Whatare thelatest styles? styles? What What fonts fonts
canbe the�ine line line betwee between n succes successs andfailure andfailure.. Think Thinking ing
make sure sure you are are hot hot rightnow rightnow?? To make
Juice’s Juice’s digital digital director director Guy Stradlin Stradling g gives gives the lowdownon lowdownon
are are onthe trai traill ofthe hott hottes estt font fonts, s, we
theimportan theimportance ce of gettin getting g it right, right, thebest tools tools for for thejob
spoke spoke to the industry industry.. Typewo Typewolf lf
and and a whol whole e host host ofexamp ofexample less ofthose ofthose who who havegot havegot it
supremo supremo Jeremiah Jeremiah Shoaf, Shoaf, web
right right to guideon guideon thecorrect thecorrect direct direction ion..
typograph typography y evangel evangelist ist Richard Richard Rutter Rutter and Bonne Bonne Marque creative director Alexander Engzell let
Going Going dev dev side, side, it’s Twitte witterr that that gets gets an exam examina inatio tion n – kicking off with with quick and easy easy embedding through to
you into their world. The talented trio reveal the
the more code-intensive code-intensive application of authentication. authentication. If
fonts that are trending, the foundries doing
you want Twitter Twitter in your projects, page 74 is the perfect
innovative work, how to choose the right font,
place to get started.
best best practic practices es and and what what lies lies ahead ahead forfonts. forfonts.
As alway always, s, enjo enjoy y the issue issue..
“
Swiss fo foundry undry Grill Gr illii Typ Type e ar are e doing innov innovati ative ve work. wo rk. The They y onl only y hav ha ve a sm small all handful han dful of fami famili lies, es, butt eac bu each h on one e stri striv ves to do so some mething thing different
”
@WebDesignerMag Follow us on Twitter for all the news & conversation www.gadgetdaily.xyz Visit Vi sit our our blog for for opinio opinion, n, freeb freebies ies & mor more e
FREE – exclusiv exclusive e with this issue
24
Designer resources Video Tuition Assets
– 4 hours of expert visual web design video guides from Pluralsight (pluralsight.com) – 8 star �ilter PS actions and 10 grunge paint overlays from SparkleStock (sparklestock.com) – 3 HTML5/Responsive web templates
www.filesilo.co.uk/webdesigner ___________________________________________________ ________________________________________________ ______________________3 meta _________________________
contributors
This issue’s panel of experts
Imagine Publishing Ltd Richmond House, 33 Richmond Hill Bournemouth, Dorset, BH2 6EZ +44 (0)1202 586200 Web: www.imagine-publishing.co.uk www.gadgetdaily.xyz www.greatdigitalmags.com
Magazine team Editor Steven Jenkins
[email protected] 01202 586233
Welcome to that bit of the mag where we learn more about the featured writers and contributors…
Delicate, high-contrast display serifs set at large sizes look gorgeous on Retina screens. This is a trend we’ll see more of in the future
Designer Harriet Knight Production Editor Carrie Mok Photographer James Sheppard Senior Art Editor Will Shum Editor In Chief Amy Squibb Publishing Director Aaron Asadi Head of Design Ross Andrews Contributors Stefan Mischook, Craig Murphy, Mark Billen, David Howell, Tom Wittlin, Jeremiah Shoaf, Richard Rutter, Alexander Engzell, Tam Hanna, Mark Shufflebottom, Neil Pearce, Adam Onishi, Leon Brown, Matt Crouch, Guy Stradling, Liam Warr, Newton Ribeiro de Oliveira, Greg Whitaker, Kym Winters, Phil King, Amelia Jones, Stephen Holmes, Carrie Mok
“
”
GuyStradling Guy is the digital director at award-winning agency Thinking Juice. This issue he tackles the world of UI design. He reveals invaluable practical advice on how to use UI patterns the right way, as well the best tools needed. Page 66
Advertising Digital or printed media packs are available on request. Head of Sales Hang Deretz 01202 586442
[email protected] Account Manager Luke Biddiscombe 01202 586431
Jeremiah Shoaf
FileSilo.co.uk
talks what’s trending and recommends cl assic and new fonts. Elsewhere
Assets and resource files for this magazine can be found on this website. Register now to unlock thousands of useful files. Support fi
[email protected]
we have web evangelist Richard Rutter and Bonne Marque creative
International
director Alexandere Engzell on new fonts and the future of fonts. Page 40
Web Designer is available for licensing. Contact the International department to discuss opportunities.
Jeremiah is the kingpin at the excellent type site Typewolf. This issue he
Head of International Licensing Cathy Blackman +44 (0) 1202 586401
[email protected]
Tam Hanna Tam’s career has seen him wrestle with a variety of stacks and languages. This issue he takes a closer look at the best Twitter APIs out there. He starts with the easier to implement, like embedding before tackling authentication. Page 74
MarkShu��lebottom Mark is a professor of Interaction Design at Sheridan College of Advanced Learning and is also an Adobe Education Leader. In this issue Mark is using FullPage.js to create horizontal/vertical fullscreen experiences. Page 50
Subscriptions For all subscription enquiries:
[email protected] 0844 848 8413 +44 1795 592 878 www.imaginesubs.co.uk Head of Subscriptions Sharon Todd
Circulation Circulation Director 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
Matt Crouch Matt is a front-end developer creating intuitive designs for Cinolla in Bournemouth. In this issue he takes a closer look at how to use the Web Animations API in your projects and pages. Page 80
Leon Brown Leon is a freelance web developer and trainer who assists web developers in creating e��icient code for projects. This issue he reveals a host of techniques, as seen on the top-class website pages featured in our Lightbox. Page 18
Adam Onishi Adam is a developer working on components and tooling in the Origami team at the Financial Times. This month Adam takes a look at CSS variables and how they are for more than just storing reusable values in your CSS. Page 58
David Howell David is an experienced writer, author and journalist who runs his own company, Nexus Publishing. This issue he takes time out to chat with super-talented agency Odopod, who drive digital innovation. Page 34
4 __________________________________________________________________________ meta
Neil Pearce Neil is a web designer from Essex and has been contributing to the magazine for many years. In this issue he demonstrates how to use CSS to create an easy-to-implement card �lip e�fect. Simply add your own content. Page 54
Got web skills?
We’re always looking for the
hottest web-design talent. Email
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 Gordon & Gotch Australia Pty Ltd, 26 Rodborough Road, Frenchs Forest, NSW 2086, Australia +61 2 9972 8800 www.gordongotch.com.au
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 specifically 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 affiliated 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.
[email protected] with examples of your creative work
© Imagine Publishing Ltd 2016 ISSN 1745-3534
Our PCs come recommended, ready & with next day delivery! Chillblast Fusion Core i7 Custom Video / Photo Editing PC BEST FOR: Photo and video editing, power users, gaming after hours!
£1599.99
INC VAT
Monthly Payment Options Available
For full specs visit: www.chillblast.com/FusionCorei7
Next Day Delivery!
Fusion Photo OC VII Photo Editing PC
Fusion Photo OC Lite II Photo Editing PC
3 Laptop
- Intel Core i7-6800K Processor - 32GB DDR4 Memory - NVIDIA GeForce GTX 1070 - 256GB M.2 PCIe Solid State Drive - Windows 10 Home
- Intel Core i7-6700K Processor - 16GB DDR4 Memory - NVIDIA GeForce GTX 750Ti - 128GB M.2 PCIe Solid State Drive - Windows 10 Home
- Intel Core i7-6700HQ Processor - 16GB DDR3 Memory - NVIDIA GeForce GTX 950M - 128GB M.2 PCIe Solid State Drive - Windows 10 Home
£2139.99 INC VAT
£1299.99 INC VAT
£1099.99
For full specs visit: www.chillblast.com/photooc7
For full specs visit: www.chillblast.com/photooclite2
For full specs visit: www.chillblast.com/ocmobile3
Chillblast The UK’s most awarded PC manufacturer www.chillblast.com 01202 057 275 Prices are correct at time of going to print (26-08-16) E&OE
INC VAT
insid
ontents
Cutting-edge features, techniques andinspiration for web creatives Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…
[email protected]
Quick look… 08 Glorious, glorious GitHub
@WebDesignerMag
www.gadgetdaily.xyz
Cover focus
The popular repo hosting service is over eight years old and still growing. Web Designer looks at what’s been happening over the last year
10
Webkit: The best must-try resources out there Discover the libraries and frameworks that will make your site a better place to visit
11
Will AI kill coding? Skynet isn’t here quite yet, but basic-level AI already is. How long will it be before it takes over web development?
16
Lightbox A showcase of inspirational sites and the techniques used to create them
28
When Juice meets beer Camden Town Brewery lets Shoreditch agency Studio Juice lend its design expertise to create an exciting new presence
34
40
Driving digital innovation This time out it’s Odopod. They like to fuse strategy, design and technology to help leading companies innovate
40 What’s new with web fonts Web Designer employs the talents of Typewolf, Clearleft and Bonne Marque to discuss what’s trending in type
66 The secrets of UI design There’s lots of UI patterns out there, but how useful are they if you don’t know how to use them? Read on to �ind out more
74
Best Twitter APIs Discover the best APIs and �ind how to embed, integrate and authenticate
92
Hosting listings An extensive list of web hosting companies. Pick the perfect host for your needs
34
98 Next month What’s in the next issue of Web Designer?
6 __________________________________________________________________________ meta
16
ProFile: Odopod
Lightbox: VinylCuts.NYC
A driving force for bringing digital innovation to clients
Going retro withrecordsandtunes
FileSilo
WEBDESIGNER
96 Get the latest must-have resources and videos
A comprehensive collection of free designer resources!
< tutorials>
Web gurus take you step-by-step through professionaltechniques
96
50
Build fullscreen experiences Utilise the talents of the fullPage.js library to create horizontal and vertical one-page screens
54
Create a CSS3 �lip e�fect Reveal your talents with an online business card that �lips on click to unveil more details and contact points
58
Code a custom theme with CSS Discover how to use the powers of CSS Variables to instantly change how a page looks
Never miss an issue
Subscribe 66 UI design is everywhere online. Make sure you use the right patterns the right way
Turn to page 64 now USA readers turn to page 85 for an exclusive o�fer
web workshop
The tools and trends to inspire your web projects
48
08 What has been happening with GitHub?
62
Activate a fullscreen menu www.grannyssecret.com Add a button that opens a fullscreen overlay menu
Animate text with CSS3 www.space-advisor.ca Create a drawing e�fect that disappears and reappears
The repository hosting service is constantly expanding and growing. Web Designer takes a closer look at who’s using what
10
web developer
Webkit: The best must-try resources out there
74
Need a new framework or library? Then this is where you need to start
11
Comment: The future is AI, but how long before it takes control of the way we develop for the web?
Best Twitter APIs Learnhow to embed, integrate and authenticate Twitter elements withthis collection
C
Stefan Mischook
80
Say hello tothe Web Animations API Take control of animationplaybackthrough JavaScript to create a reactive user experience
86
Build an appwith Electron Put togethera cross-platform native application using Electron and popular web technologies
meta _________________________________________________________________________7
News CONTACT US AT:
[email protected] | @WebDesignerMag
Header
GetWeb Designer digital editions
The tools, trends and news to inspire your web projects.
What’s happening with GitHub?
The web community’s favourite project hosting service is over eight years old. We look at how it has grown over the last year
G
Get your hands on a collection of the best contemporary techniques
itHub is theweb design/
repositories on GitHub – effectively the
withthe mostopen source contributorsis
WebDesigner’s latest digital
developer community’s go-to
most popular. Browsing through what’s on
Microsoft.It has over 16,000contributors
addition to its burgeoning
repository, and a recent
offer,you will seethatReact, ReactNative,
while Facebook comesin second with just
collection is The Developer’s
report fromGitHub
Bootstrap, D3 andSwift are allvery
over 15,600 contributors. Next up is
Guide to JS. Check out how to get
reinforces its popularity. The GitHub
popular repositories. The interactive nature
Docker (docker.com), the world’s leading
started with ES6, use Babel to
Octoverse 2016 report takes a look back at
of theOpen Source section isnot
software containerisation platform. Angular
compile code to work everywhere
the last 12 months and takes a peek at the
immediately obvious, but the name of each
is next, closely followed by Google. Also in
and get started with npm.
highlights across that period. So, what has
entry redirects users directly to the
the top ten are Apache and npm. If you
been happening?
selected library.
want to take a closer look at each
HTML & CSS and 3D and the Web.
Straight from the Open Source section,
repository, click the organisation’s name
We cherry-pick a collection of the
users are reliably informed that the code
since its inception. The report covers just 12
and you can browse through everything
best animation and 3D techniques
that sent Apollo 11 to the moon
months, which re�lects its success. In that
that they have to offer.
to add interest to any project.
(github.com/chrislgarry/Apollo-11 ) is there,
short time, GitHub had more than
along with an open source curriculum that
5.8 million active users and over 19.4 million
open source contributors, things change
Angular, 20 Quick�ire HTML &
helps non-pro�its among many others.
active repositories. What’s also impressive is
around a little. Microsoft slips down the
CSS techniques and Amazing
The online report can be found at
GitHub’s growth has been phenomenal
Don’t forget Animate with
Looking at the repositories with the most
Plus, check out Advanced
the number of new students, developers
chart to sixth with its vscode repository,
Websites and How to Build them
octoverse.github.com and reveals what
and businesses that have joined the
while Facebook moves one place above
Vol 03. How can you get your
are the most starred open source
community. Over 5 million new users and
with the react-native repository. Elsewhere,
hands on a Web Designer digital
300,000 organisations joined the crew,
Font-Awesome takes top spot, npm third,
edition? Head to bit.ly/1hsGYgl to
with over 2.8 million creating their very �irst
and Angular ninth and tenth with material
download the free WebDesigner
repository. Elsewhere, 815,000 made their
and angular repositories respectively. The
p and�ind them waiting foryou
�irst pull request.
report also contains statistics for the most
It’s not just the numbers that impress, but the calibre of the people and
forked repositories and those with the most users reviewing code.
organisations using GitHub. One example is
GitHub has always been the go-to
the US government (github.com/
repository on the web and its expansive
WhiteHouse/source-code-policy). This
growth proves that it is more popular than
gives visitors the option to share via a pull
ever. Are you one of those people who
request or open an issue. But maybe the
don’t use it? If you are, join up now and
biggest surprise is that the organisation
become part of the community.
5 most popular languages on GitHub GitHub is awash with repositories, libraries, frameworks and tools for web designers and developers. But what are the languages that get the most love? At number one by a long way is JavaScript. This ranks with over twice as many pull requests as second-placed candidate Java. CSS currently sits in seventh place with around 83% less than JavaScript.
2m
Sadly for web designers, HTML is nowhere to be seen. But if it’s JS you want, Github is one of the best destinations to �ind new and established code bases.
PHP 0.47m
Ruby 0.74m
Source: https://octoverse.github.com
8 _______________________________________________________________________header
Python 0.74m
1.5m JavaScript 1.6m
Java 0.76m
1m 0.5m 0m
hase
Header Inspiration
Sites of the month
02.
01.
03.
01. COBAYES
04.
cobay.es/en/ Simple but engaging animations populate the journey
02. Shapish shapish.com Draw on the screen and see your e ffort transformed into an animated pattern
03. Create Your Cocktail russellandcodrinks.com Create a cocktail in a virtual space. Then try at home
04. The Hidden Worlds of the National Parks http://bit.ly/2d9wPsq Smart video tells a story
Graphics
Colour picker
Typesetter
WordPress
Coffe Side
Internet Princess
TT Lakes
Travelia
http://bit.ly/2dCUOBx
http://bit.ly/2dkcJfR
myfonts.com/fonts/type-type/tt-lakes/
travelia.softhopper.net
Co�fee and Star Wars has to be a winning
Inspired by an unusual sign spottedin a
A responsive travel and outdoor theme with
combination, surely? Jady Salvatico thinks
former Finnish town, TT Lakes is a simple
a personalised touch. Choose from ten
and functional sans-serif that has style
di�ferent styles of layout.
#A5518B
so and so do we.
without even trying. It consists of 54 #DA5391
typefaces and can take on any challenge.
#C368A9
#CEE1F1
#CDDC29
header_______________________________________________________________________9
Header Resources CONTACT US AT:
[email protected] | @WebDesignerMag
webkit
Discover the must-try resources that will make your site a better place
Onsen UI onsen.io Onsen UI provides a UI framework and tools for creating quick, good-looking HTML5 hybrid mobile apps based on PhoneGap / Cordova. It has no
Lory
Reframe.js
regl
framework dependencies, meaning that
meandmax.github.io/lory
dollarshaveclub.github.io/reframe.js
regl.party
app development is easy with any of the
A touch-enabled slider written in vanilla
Need your videos to work on all screens?
A new functional abstraction for WebGL.
many JavaScript frameworks currently
JavaScript. You add the prerequisite
This neat little plug-in wraps up any
Creating is easier than writing raw code
on the market. All the tools you need a re
HTML structure and CSS and then get
video in a responsive div with an intrinsic
and has fewer overheads, making it
in the cloud.
creative with easy-to-add code snippets.
ratio to get the job done.
faster than most existing frameworks.
TOP 5 Web conferences – November 2016
Get yourself a seat at the biggest and best conferences coming your way soon
Gather North
HalfStack
Frontier
Adobe Max
2016.ffconf.org
gathernorth.com
halfstackconf.com
www.frontierconf.com
max.adobe.com
A conference with a difference.
A weekend conference for web
Staged in a pub, it features talks
Eight speakers cover the many
Three days of fun and frolics,
It’s a one-day event (run twice
designers, graphic designers,
on contemporary front-end dev
aspects of front-end design.
MAX brings together over 200
on consecutive days) focused
developers, bloggers, project
tools: ES6, TypeScript, React.js,
And there’s an after party when
expert speakers covering a
on dev and CSS.
managers and more.
Dojo 2 and more.
you can meet other creatives.
myriad of creative subjects.
ffconf
10 _____________________________________________________________________header
Header Opinion
Will AI kill coding? Is the rise of AI going to make human coders obsolete, maybe in 25 years? Stefan Mischook
A
President
studioweb.com
rti�icial intelligence (AI) is slowly being
with people to �igure out what they want in their websites
developed, but there is a way to go!
into place and AI will likely be tightly controlled. This
True AI will take a while before it is
coders/developers often overlook: the importance of
will further slow the adoption of full AI in an y �ield. So
realised. As it develops, you will start
this will further slow the replacement of live coders
big part of being a great coder.
with AI.
seeing the simple jobs replaced by AI long before it �inally gets to coders.
Of all the skills that AI will have to learn, the nuances of
As primitive AI begins to come online over the next
Scientists have divided AI into three categories:
human communication will be the most di�icult. So, long
20 years, you will �irst see AI change the role of
before AI will start coding, it will replace construction
coders/developers. So, as we use frameworks and
workers, truck drivers, accountants, maintenance workers
and many other jobs.
development today, primitive AI will slowly works its
…AI represents a huge change in our society and likely
way into development in an assistive role. Instead of
replacing coders outright, AI will merely allow us more
type of AI can only do a few simple things.
play out. But what is clear is that the simple tasks will be
replaced with AI before coding… given how complex
aspects of an app.
ahead and communicate. When that happens, AI will replace all jobs, not just coders. Coding has a lot to do with being able to communicate with humans, since you have to speak
coding can be.
Finally, given all the experts seem to think true AI
the alarm bells about the birth of AI. This includes
concerned. In fact, the fabric of society will change
be replaced.
11 header_______________________________________________________________________
Header Resources CONTACT US AT:
[email protected] [email protected] .uk | @WebDesignerMag @WebDesignerMag
webkit
Discover the must-try resources that will make your site a better place
Shoutem shoutem.com ‘Everything you need to create amazing apps’, Shoutem has a myriad tools to help build the app you want. A drag-anddrop interface makes it ideal for those
Granim.js
Inferno.js
less savvy with code. It supports
sarcadass.github.io/granim.js
github.com/trueadm/inferno
A nerd’s guide to colour on the web
multiple content sources, has built-in
A small JavaScript library that produces
An extremely fast, React-like JavaScript
css-tricks.com/nerds-guide-color-web
analytics, the option to introduce
�luid and interactive gradient animations
library for building modern UIs. Inferno
Colour is key to conveying a message.
eCommerce and advertising. Plus, you
Select your colours and criteria. Add a
is an isomorphic library for creating a
This resource offers tips on the methods
can preview any app on your mobile.
little extra with image backgrounds.
high-performance UI, perfect for mobile.
needed to get colour right on the web.
Inspirational infographics infographics TOP 5 Inspirational
Turn your data into a story with instant attention-grabbing impact, like these examples
Agriculture visual.ly/agriculture
Dangerous bacter bacteria ia
Mourinho in the CL
Evolution of the web
Inspiring infographics
Lifelike illustrations interjected
tabletopwhale.com
bit.ly/2cwBZ0Q
evolutionoftheweb.com
bit.ly/2cU8ib1
with cutaways make the world
Who knew bacteria could be so
This football infographic is
This example adds interactivity
Check out this collection of
of agriculture more fascinating
interesting? This stylish
beautifully crafted with lots of
to entice the reader. Pop-ups
printed press infographics
�lowchart is very engaging.
subtle additions.
add a plethora of useful info.
inspired by the Rio Olympics.
than you can imagine.
__________________________________________________ ______________________________________________ ____________________ 12 ________________________ header
Header Comment
The The pri prin ncip ciples of online sales psychology Discover the processes that dictate how visitors ‘shop’ around a website Craig Murphy
O
Managing director at ALT
nline sales psychology comes down to
altagency.co.uk These seven principles apply in their simplest forms
seven fundamental core principles
to all websites out there; whether it be an eCommerce
that aim to reduce the amount of
website or a lead generation website, the core
‘friction’ generated on a website and to
fundamentals are the same.
also subconsciously improve the trust that your
The seven principles are based around pre-existing
website generates. Online sales psychology is heavily
patterns that your visitors already have in their head.
based around ‘pattern recognition’ – which is our brain
When thinking about eCommerce, it’s hard to ignore
looking to match what we are seeing to what we
the effect that Amazon has had on the way we shop
already know, and looking for a short cut to complete
and the subconscious conditioning they have applied
the action/journey in front of us.
to us all! This does not mean that you should copy
When your visitors interact with your website, they
everything that Amazon has done, but look around
look to match it with what they already know. For
their pages and really understand how the design,
example, people are used to navigating around an
content, layout and images work together. Look at
eCommerce website in a certain way: experience tells
how their pages convey the aforementioned seven
them where they should expect to �ind an item in your
principles and then look at all the copycat competitors
online store or how to search for it. If you break this
who have tried to duplicate what they do without a
pattern, and for example put your navigation on the
core understanding understanding of these principles – they do OK,
right-hand side of your website instead of the left – a
but not great. Then, lastly, take a look at those
proven way to kill conversions – then this will add to the
copycats who have not followed the seven core
confusion and work that your visitor will have to do to
principles and it becomes clear to see how conditioning
navigate around your website, as it breaks their pattern. So, when designing or reviewing your websites, remember that your visitors already have a prede�ined pattern in their head, based on experience, of how to use your website. This means that with every click and every movement of their on-screen cursor,
“
Your visitor has a set of predefined actions they expect from your website
your visitor has a set of prede�ined actions they expect from your website. Much more than a checklist of seven core principles
So, what are the seven core principles? These principles are very simple, yet often
”
around these principles plays a core part in how well a website performs. Occasionally when you see an Amazon copycat style website, you may see them attempt something different to try to ‘break the pattern’. This could be using a more complicated search bar or moving the navigation from the left-hand side of the screen to the right-hand side of the screen. Not only does this break the pattern and expectations of a visitor, it creates
that your website must maximise, online sales
overlooked, and form the absolute foundation to online
friction, makes them think, breaks the three-second rule
psychology involves understanding your visitors’
sales psychology:
and kills conversions. Why? Because the visitor has a
browsing and buying behaviour and optimising your website around these behaviours.
Principle 1 – The irresistible characteristics of your call to action
prede�ined experience in their head that they are used to, which has been built up subconsciously, by browsing
Principle 2 – The psychology and use of colours
hundreds of websites, and [a different layout] now
analytics, a process of online sales psychology is using
Principle 3 – The three-second rule
causes confusion within their mind… sending them
screen-recording software to actually watch what your
Principle 4 – The ‘F’ pattern
running for the red X or a competitor.
visitors are doing, and why. Analytics only tells you if
Principle 5 – Simplify and reduce friction
there’s a potential issue; online sales psychology
Principle 6 – The trust elements
principles of online sales psychology, visit:
identi�ies exactly what this issue is and resolves it.
Principle 7 – Testing, testing, testing
altagency.co.uk/online-sales-psychology
Going one step further than simply using data
To get a more in-depth analysis of the seven
______________________________________________________________________ _____________________13 header_________________________________________________
Reader Survey
Have your say!
Joiin ou Jo ourr te team am toda today y! Take our th thrree ee-m -miinut ute e sur vey and… Get 10% off our books and magazines Ge Gett ac acc cess to an exclu lusi siv ve mo mont nthl hly y su sub bsc scri rip ptio ion n of offfer Become eligible for exclusive competitions & free gifts We love maki king ng Web De Des sign gne er an our mission to make it the best it However, we’re not perfect so we how we could make Web Designe better. That decision was easy: as readers for their help. By answerin questions, you could join the Web reader’s panel. Sign up now. Steven Jenkins Editor
Reader Survey
Four changes you asked for in 2015… Last year we used your input to make some fantastic improvements, including…
1
Current web trends
The web is always changing so keeping up with the latest trends, tools, libraries, frameworks and l our aim
Only takes 3 mins! Take part in our 2016 reader survey and yo can enjoy these fantastic benefits Exclusive discount subscription to the magazine Incredible savings for new and existing subscribers. Plus Free delivery direct to your door.
Exclusive savings on mags and books Get a 10% discount code to use at our online shop
Competitions
Free gifts
Have your say
Get the chance to enter exclusive competitions for money-can’t-buy prizes
Become eligible for free gifts including digital editions for phones and tablets
Gain a place on our reader panel, giving you regular input on the magazine
Step 1 Complete survey
Step 2 Get involved
Mor You wanted more tutorials and web workshops, so that’s what we try to give you every issue. More tutorial pages for more learning.
3
Full-length features
4
Web development
In-depth features on the latest design and development subjects. We get the pros to give us the lowdown on what you need to know.
Step 3 Earn rewards
Complete our survey & join the team today
www.gadgetdaily.xyz/wd-survey
We make sure that the popular and up-and- coming tools, libraries and frameworks get an airing every issue.
VinylCuts.NYC vinylcuts.nyc/show/splash Designer: Let’s Build – letsbuild.la Developmenttechnologies WordPress, jQuery, WebGL, GSAP, Spotify Play Button
16____________________________________________________________________ lightbox
“
LA agency Let’s Build creates a suitably retro site for the HBO TV series Vinyl, with content arranged into magazine-style issues
”
LightBox VinylCuts.NYC
#F508C8
#3 670F1
#2CE8DF
# FCE 300
Above
Avant Garde Gothic by ITC is used exclusively throughout in several weights and served by Fonts.com
lightbox ____________________________________________________________________
17
LightBox VinylCuts.NYC
Create a TV noise effect for website content Use the old school television noise e �fect to give a retro feel to elements of your website design
4. Noise components
There are two main parts of the noise effect – the content
*** STEP 2 HERE
container and the noise element to be placed over the
content. The last element is selected as the noise effect
element. We start this de�inition by setting its background image; you can generate your own at www.cssmatic. com/noise-texture. .noise{ position: relative; } .noise > *:last-child{ background-image: url(noise.png); background-repeat: repeat; background-position: 0 0; }
5. Positioning the noise With the content container using relative positioning, the noise element can be positioned absolutely at the top-left corner of its parent container. We also want to set the noise element to be the full width and height of the parent container, along with an opacity so that it only partially distorts the content it overlays. Finally, we also want to apply an animation – we’ll create this as “noiseMove” in the next step.
2. Noise content
.noise > *:last-child{
Areas of the page that will have the noise effect applied to
position: absolute;
The �irst step is to initialise the HTML document with a
them will have a “noise” class applied to them. In our
opacity: .35;
head and body section. The head section contains any
example, we will display an image that will have the noise
top: 0;
page description information and links to resources – a
effect over it. The �inal element inside the noise effect is
left: 0;
CSS stylesheet in this example. The body section is used
used to display the distortion over the content.
width: 100%;
1. HTML initiation
to store the main content – this HTML is de�ined in Step 2.
height: 100%;
animation: noiseMove 0.3s infinite linear
alternate;
}
Create a new �ile called styles.css. We start this �ile with
The noise effect is now in place, but it is only a
example page HTML and body tags. We want these to
make this image look like noise by making it appear to
Noise Effect
cover the full size of the screen without any borders. This
move in random places. We achieve this by de�ining the
that no browser defaults are used.
to random positions.
Distorted Content This interesting effect is good to use as part of decorative design, but make sure you don’t use it with important content as you may run into usability issues.
18 ____________________________________________________________________ lightbox
body,html {
@keyframes noiseMove{
display: block;
0%
width: 100%;
{ background-position: 50px 300px; }
height: 100%;
20%
{ background-position: -100px 0; }
background: #000;
40%
{ background-position: 150px -50px; }
padding: 0;
60%
{ background-position: 0 -200px; }
margin: 0;
80%
{ background-position: -10px -80px; }
}
100% { background-position: 70px 90px; } }
NEW next generation Cloud Servers
UK data centres, UK support
Flexible
Enterprise features
Set up in seconds
• Load balancing
• Easy to use
• VPN
control panel
• External firewall
Call 0808 1686 777 or visit fasthosts.co.uk/cloud-servers SERVERS • WEB HOSTING • DOMAIN NAMES • EXCHANGE EMAIL
Pay as you use pricing
Cloud Servers from:
£15.00 per month ex VAT charged at 20%
Alexandre Rochet alexandrerochet.com Designer: Alexandre Rochet, Timothée Roussilhe Developmenttechnologies HTML5, JavaScript, SVG, CSS
20 __________________________________________________________________ lightbox
“
Parisian Alexandre Rochet seeks work in New York with a slick portfolio site packed with sophisticated transition effects
”
#8CB9DA
#F7E2C3
#7CB1 DB
#A1A0A5
Above
Above
Domaine Display by Kilm Type Foundry is used across paragraph text within each project section
Hazelwood Light font, designed by Jonas Hecksher and published by Playtype, is used on the tiny headings
lightbox ____________________________________________________________________ 21
LightBox Alexandre Rochet
How to create an opening content box Make use of animation to introduce new content to website visitors in response to their actions 1. Page structure
body,html {
7. Article customisation
The �irst step is to create a document structure for the
display: block;
With the articles in place, we want to make sure that we
web page. The document consists of two sections – the
width: 100%;
can easily distinguish them from each other. We select
head and body. The head section is used to load
height: 100%;
�irst level articles inside of the main container and use the
resources such as the CSS. The body section is used to
background: #000;
:nth-of-type selector to select each of them by their index
contain the page content elements, which will be created
padding: 0;
position. This allows us to give each of the articles a
in the next step.
margin: 0;}
different background colour. main > article:nth-of-type(1){
2. Navigation container
4. Main container
background: blue;}
The page content consists of a navigation and a main
The main container is used to contain the different articles
main > article:nth-of-type(2){
section containing each of the content articles. The
that can be accessed on the page. We want to make sure
background: green;}
navigation container contains navigation links to their
it �ills the full page and uses relative positioning so that the
main > article:nth-of-type(3){
associated articles inside the main container. These links
child articles can be placed in relation to it. Setting the
background: red;}
referenced their associated article by using their href
display mode to ‘block’ also ensures that width and height
attribute to reference the article’s ID; hence their href
can be set.
value starting with the # symbol.
8. Navigation styling
main{
The navigation needs to be visible at all times, which
position: relative;
includes being displayed above the content regardless of
Page 1
display: block;
where the page is scrolled to. To achieve this, we used
Page 2
height: 100%;
�ixed positioning with a z-index that is guaranteed to be
Page 3
width: 100%;}
above the main container. We also locate the navigation to be at the top left and to have a black backgound.
5. Page articles
nav
The articles inside the main container are set using
{position: fixed;
Page 1
absolute positioning, allowing them to be placed at
top: 0;
speci�ic locations. With the parent container using relative
left: 0
positioning, articles are placed in relation to wherever the
width: 100%;
Page 2
parent ‘main’ container is. Additionally, padding is set at
z-index: 9999;
the top to give space for the page navigation, while
background: #000;}
over�low is set to auto to allow for content scrolling if
Page 1
required. A default height of zero makes sure articles
9. Open animation
aren’t visible by default.
The @keyframes property is used to de�ine states for
main article
each part of the ‘open’ animation that is applied to the
{
article when triggered. This animation is de�ined as
3. Start the CSS
position: absolute;
starting from 0% with the article being zero height and
Create a new �ile called styles.css – this step will insert CSS
height: 0;
width, while being located halfway from the top of the
styling that de�ines the HTML and body containers. These
width: 100%;
page. The last frame is set to move the article top the top
are set to �it the full screen for the effect to work, so we
padding-top: 1em;
of the page with a 100% height.
de�ine their width and height properties as 100%. We also
overflow: auto;
@keyframes open {
want to make sure that there is no margin, hence margin
}
0% {
and padding set to zero. Finally, we are setting their default background colour to black.
Strategic presentation The clever use of animated content introductions can be strategically applied to your website design in ways that maximise the visibility of important content for the user.
22 ___________________________________________________________________ lightbox
height: 0;
6. Selected articles
border: 0;
Articles need to change their appearance when they are
top: 50%;
selected. This occurs when the page URI references the
width: 0
article’s ID – which can be detected with CSS via the
display: block;
:target selector. In this case, we activate the ‘open’
}
animation (de�ined later) to play in linear mode for one
100% {
second. Forwards playing is applied to the animation to
top: 0;
stop it being reset on completion.
height: 100%;
main article:target{
}
animation: open linear 1s forwards;}
}
Carbon Fiber Creative carbon�iberagency.com
Designer: Carbon Fiber – carbon�iberagency.com Developmenttechnologies jQuery, jQuery UI, GSAP, Three.js
24___________________________________________________________________ lightbox
“
LA-based agency Carbon Fiber showcases its imaginative use of animation and 3D design with this bold portfolio site
”
#010305
#1FC1 E3
#8D50E5
# FFB0 FF
Above
Above
Cookie is a script typeface designed by Ania Kruk and is available freely for web use via Google Fonts
Lora by Cyreal is a serif font used in Italic form for paragraph text and is also available via Google Fonts
lightbox ___________________________________________________________________ 25
LightBox Carbon Fiber Creative
How to overlay an image over an animated background Create an attractive headline banner that captures the attention of visitors through animation 1. Page initiation
height: 100%;
container. An animation is also applied to this element
First, create the web page document structure. This
padding: 0;
– see the next step.
consists the HTML document, which has two containers
margin: 0;
header > span{
– the head and body. The head section is used to load
}
display: block;
resources and store descriptive information. The body
position: absolute;
section is used to contain the page content elements.
4. Banner container
top: -150%;
Content will be added in the next step.
The banner container is set to display across the full width
left: -150%;
of the page, but at only half the height. This will be
width: 400%;
consistent across all devices, hence making it responsive
height: 1200%;
to different screen sizes. The banner also uses relative
background: url(background.png);
positioning so that any of its content can be positioned in
animation: headerAnim 120s linear infinite;
be hidden so that the content will never appear beyond
}
header
7. Animation de�inition
Animated Background
{
The animation applied to the background element is
position: relative;
followed by the state of the �inal frame. The browser will
width: 100%;
animate the transition of all properties de�ined in these
height: 50%;
states through the duration of the animation without us
*** STEP 2 HERE
background: transparent;
needing to be concerned about timing.
overflow: hidden;
@keyframes headerAnim
}
{ 0% {
2. Page content
5. Page articles
background-position: left top;
The page content consists of two content containers
The banner uses a �irst level image display over its
transform: rotate(0deg);
– header and main. The header container is the banner
animated background. To make sure that the image
}
area, which contains a content image and an empty span
displays the same on all screen sizes, absolute positioning
100% {
element, which will be used for the background e ffect.
is used, while its height is set to be the full height of the
background-position: right bottom;
The main container will be used to store the main page
header container. To achieve central positioning, a
transform: rotate(360deg);
content – feel free to insert your own HTML here.
transform is applied to adjust the handle of the image,
}
which allows it to be positioned at the halfway point using
}
header > img{
display: block;
position: absolute;
height: 100%;
Page Title
transform: translate(-50%, -50%);
top: 50%; left: 50%;
3. Initiate the CSS
margin: 0 auto 0 auto;
Create a new �ile called styles.css – this step will insert CSS
}
rules to initiate presentation of the document containers. The HTML and body elements are set to �it the full screen
6. Background element
so that inner elements can be sized in relation to the
The animated background is made from the span tag
visible page. Margin and padding are set to zero so that
being styled to show the background image and
there is no visible border on the page.
positioned behind the banner content. As this will be
body,html {
rotated, there is a need to make sure that it always covers
display: block;
the visible area. This means that it must have a height and
width: 100%;
width that are several times bigger than the banner
26 ___________________________________________________________________ lightbox
EXPLORE THE TECH INSIDE w w w.gadgetdaily.x yz
Available from all good newsagents and supermarkets ON SALE NOW
IPHONE 7: THE VERDICT
THE COOLEST KIT
T
MAN CAVE MUSTHAVES S
SELFDRIVING CARS
BUYING ADVICE
ED HOWDOESFOAMWORK?
HOW TO GUIDES
Nonpolarend
AR
Polar end AIR
WATER
WATER
Without an emusifer added to the mxture ar and water just wont mx there is nothng between the particles that wil enable them to bind
Emusi iers create poar and non polar ends that attach to water and air respectively These enable the partic es to bind which s why foams retain their shape and integrity for longer
The casing A seres of valves and sprngs ensures the foam s released wth enough force n order to keeptheconsstencyintact
The canister Nit ous oxde is used to force ar into whatever’s n he siphon handy for ceatingfoamsofany density
BUY YOUR ISSUE TOD Print edition available at www.imagineshop.co.uk Digital edition available at www.greatdigitalmags.com Available on the following platforms
facebook.com/gadgetmagdaily
twitter.com/gadget_magazine
WHEN JUICE MEETS BEER Camden Town Brewery’s brand new website called for a deep appreciation of London’s hippest tipple. Shoreditch agency Studio Juice was only too happy to lend its design expertise to the project
PROJECT PRO JECT NAM NAME E Camden Town Brewery PROJ PR OJECT ECT UR URL L camdentownbrewery.com AGENCY Studio Juice AGEN GENCY CY UR URL L studiojuice.com PROJECT DURA PROJECT DURATION TION 3 months
NO OF PEO EOP PLE INVOLVED Studio Juice: 10 people Camden Town Brewery: 6 people TOT TO TAL PROJEC PROJECT T HOURS 672 hours
_____________________________________________________________ ___________ 28 __________________________________________________ design diary
WHEN JUICE MEETS BEER
T
hese days its fair to say the marketing of
“The new consumer site had to put the refreshed
beer has become much more
product range front and center, giving a clear reason to
sophisticated, with boutique brewing
purchase and using Camden’s fun, design-led identity
especially aligning itself with lifestyle
and tone of voice to show off the brand’s points of
branding. But far from a lifestyle
difference,” begins the team. “For many new
romanticising romanticisin g the dark, dingy, smoke-�illed smoke- �illed boozer,
consumers, this would be the �irst taste of what the
things in 2016 are a little more vibrant and discerning.
brewery has to offer.” With the project promising a
Connoisseur beer, lager and real ale fans are more like
chance to push Camden Town Brewery’s visual rebrand
foodies when it comes to what they drink, caring quite
further, Studio Juice began by understanding what it
passionately about process, ingredients and the story
might take to raise the bar…
behind each brand. Something of a backlash p erhaps to the homogenisation of popular pub pullers, the fashions have therefore swayed towards smaller, independent labels with original tastes to identify with.
GETTING A TASTE FOR IT
So they don’t come too much more fashion-conscious
“We �irst met Jasper Cuppaidge, the Founder of
than from London’s traditional hub of hipness, like the
Camden Town Brewery, at one of the Gentlemen of the
good folks at Camden Town Brewery.
Road Stopover festivals in 2013,” the team explains.
Founded in 2010 by Jasper Cuppaidge and in fact
“The studio had been involved in the design of the
operating out of headquarters in Kentish Town, the �irm
festival for years and Jasper had been asked to supply
is currently building a new brewery site in En�ield due to
his great tasting lagers. We were big fans of the beers
begin production next year. As part of a recent period of
and Jasper loved the design we had created for the
change and growth, the company unveiled a full visual
festival, so he asked us to design his Camden Town
rebrand back in June to market a refreshed product
Brewery popup bar. Since then, our work with Camden
range. Signi�icantly, this would include a new website
Town Brewery has spanned popup events, digital
with the help of a local design studio that already knew
campaigns, product designs and brand identity.”
what Camden Town Brewery was all about. A specialist
This initial awareness via a gentlemenoftheroad.com
in identity, digital and retail design, Studio Juice was
event and then leading to an ongoing working
already aware of the client from a chance festival
partnership would prove instrumental throughout the
meeting and since went on to partner with the beer
process. In the initial stages it meant that the team
maker across various marketin marketing g campaigns.
could skip much of the client and brand background
___________________________________________________ _____________________________________ __________ design diary ________________________ 29
WHEN JUICE MEETS BEER
Wireframes - an essential part of the design process
COMPLIMENTARY COLLABORATION As withmanyclien withmanyclientt andagency andagency st stori ories,the es,the better better projects projects tendto comeout of long-runn long-running ing working working relation relationships.Studio ships.Studio Juice Juice and the people people at Camden Camden Town Town Brewery Brewery perhaps perhaps unsurprisi unsurprisingly ngly had a history history before before undertakin undertaking g thislatest site updat update. e. So for for thedesignteam,howdid thedesignteam,howdid that that prior prior knowle knowledgeof dgeof each each otherhelp otherhelp ona practi practicalleve callevell whenthe developm developmentgot entgot going? going? “Collabor “Collaboratin ating g withCamde withCamden n for for thelastthree thelastthree yearsmean yearsmeanss we have have a prettystro prettystrongidea ngidea ofhow webothwork,” explainshead explainshead of digital, digital, Dom Williams.“As Williams.“As with therebrand therebrand,, creati creating ng thenewsitewas allabout allabout workingorganical workingorganically ly while while always always keeping keeping contact contact openand sending sending eachother ideasor referen references. ces. “Regular “Regular rounds rounds of feedbackmeant feedbackmeant that wewereableto respon respond d tothe briefwitha briefwitha bit morefreedom. morefreedom. If somethin something g worked, worked, we could could implemen implementt it faster.If faster.If somethingdidn’t somethingdidn’t work work quite quite as well, well, wecould wecould pinpoi pinpointit ntit andtweak andtweak itearlier itearlier.. Thisapproachgave morevalue to thefeedback andspurredon andspurredon thedesignproce thedesignprocess.Sincethe ss.Sincethe new new siteand therebrandare bothmassivemilestones bothmassivemilestones forCamden, we also heldface-to-faceworksho heldface-to-faceworkshops ps tolet them them road road test test proto prototyp types es ofthe site. site. This This let us reall really y getinto getinto what what Camdenis Camdenis digita digitallyin llyin 2016, 2016, and allowedus allowedus to gaugeeveryone’sreactio gaugeeveryone’sreaction ns �irst �irst hand.Everythingfrom hand.Everythingfrom UX to contentrequirem contentrequirements ents anddesign anddesign cues cues wasdiscussedalon wasdiscussedalong g theway. theway. At eachstage of develop development,we ment,we circled circled around around to thesamequestion thesamequestion:: how how canwe shakeup shakeup theway beeris presentedonline presentedonline?” ?”
________________________________________________ ______________________________________ ____________ 30 ______________________ design diary
WHEN JUICE MEETS BEER
There was a real need to show the brewery’s personality in a “ clear way within the site analysis, focusing attention instead on the head�irst into the design phase, the team
” OPEN TO NEW FLAVOURS
spent a lot of time looking at analytics
The closeness of the client and agency relationship
from the site’s previous iteration,” says
would facilitate regular, open lines of communication as
creative director Ross Stirling. “This initial
the project phases progressed. This enabled both
research de�ined our thought process,
parties to stay on track with feedback sessions,
�inding that a surprisingly large
workshops and even prototyping road tests as design
percentage of tra�ic came from mobile,
and development unfolded. Early on however, it allowed
beer pro�iles were among the most
the formative concept work to be understood and agree
popular pages on the site, and visitors
on the site’s purpose for Camden Town Brewery. “The
were viewing these pages directly from
idea was to create unity between the new website and
old existing dotcom. “Instead of diving
search. This analysis gave us a head start in designing a website that wouldn’t just bene�it
the visual rebrand,” says James Kirkup, senior designer. “With Camden setting its sights on more beer drinkers
the brewery, but also make sense to current and future
than ever, there was a real need to show the brewery’s
drinkers. We then set out a messaging hierarchy,
personality in a clear way, especially within the site.
de�ined our visual references, and began the project
Everyone agreed that this meant putting the beers and,
from there.”
more importantly, the personality of each beer front
From here, the team developed certain ideas and themes for what it felt were important to achieve. From
and centre.” This clear path to the product, however, would still
the time spent with Camden’s previous presence it was
require some subtlety and consideration, as junior
therefore decided that things might be made more
designer Alex Page admits. “But this wasn’t a simple
straightforward, accessible and clean. If this was going
case of sticking the product on the homepage.
to be a new site where a product would be prominent
Previously the ‘About’ page received minimal tra�ic, so
then it made no sense to clutter things and make core
we wanted to explore ways in which the beers
content tough to �ind. “One of our ambitions was to
themselves could become a segue into the Camden
deliver a simpli�ied user experience, making it as easy
story.” As part of that conceptual journey, the guys
as possible for consumers to get to where they needed
didn’t want to limit themselves to inspiration from the
to be within the site,” Stirling continues. “Therefore a lot
same product landscape either. “Pushing the way beer
of time was spent on limiting the number of items in
is presented online is something that really drove the
the navigation and designing a clear and easy to use
website as a concept,” adds digital designer Niall Maher.
secondary navigation. Simplicity was key.”
“This meant looking for inspiration further a�ield than
design diary ______________________________________________________________ 31
WHEN JUICE MEETS BEER
the food and drink industry, and not being afraid to try something new. We wanted to strike the balance between the immediacy and simplicity of a consumer website and the character of other brand touch points.”
ADDING SOME FRONT-END FIZZ Moving into the tangible design phases, the frontend work from the beginning followed an interesting dual direction approach. This would result in a pretty useful democratic process for the design, making it easier to make a more con�ident decision. “Visual design began with two different creative routes, each explored by a lead designer,” Stirling explains. “The more these mock-ups were �leshed out, the more design and UX questions were raised. This process
SITE HIGHLIGHT Weasked theStudio Juice team what it feels is thestandout feature of thenew site, and why
affected the look and feel of the homepage most. While one route opted for a toggle style homepage heroing one beer at a time, the other featured each beer s ide-by-side using hover
“The individual beer product pagesencompass
states. They were two very different
whatwe wanted to achievecreatively, and what
approaches, and both made strong cases. In the
Camden areabout as a brand,” answers creative
end, we agreed that the latter was a better �it for
directorRoss Stirling.“Not onlydo thesepages
Camden as they begin to reach a wider, more
celebrate eachbeer’s personalitywith bold colour
mainstream audience.”
and typography,they give consumersfun and
James Kirkup also echoes the creative value
relevantcontent. They’realmost likemicrositesin
in working on parallel solutions. “Comparing the
their ownright, and we’re really proud of them.”
mockups side by side allowed us to make
“One ofthe more quirkyfeatures ofthe site
sharper calls, and it wasn’t a simple case of one
wasthe sliderusedto movethroughthestaff
route versus the other,” he says. “Ideas from
headshots,”adds front-end developerChris Yaxley.
both would eventually make it to the site as it
“Using theHTML rangeinputwe were able to
stands today.” The graphical approach was also
move through a traditional carousel by linking
two-fold at this stage. The designers questioned
each phototo thestepof thecomponent. This
how they could add to the visual language
makes a very satisfying andsmoothway tomove
de�ined by Camden Town Brewery’s rebrand
through thephotos.”
and how existing elements might be �ine-tuned for the web. “What took more time were the graphics that signpost content throughout the site,” Gil Cocker, senior designer, reveals. “You can �ind these on the back of the beers themselves, but we didn’t want to simply reproduce them. We brought them to life through animation as part of the homepage hover states.”
HEAVY HINT OF VANILLA With graphical direction and assets in place, focus would of course switch to making things like animation tick with the coding bit. Making the front end come alive and behave as desired would be the responsibility of senior front-end developers Chris Yaxley and Alex Baulch, with the pair clear on what technologies to deploy. “We decided early on to use Vanilla JavaScript,” enthuses Yaxley. “This not only gave us a saving in �ile size, but after completing a project without jQuery, we felt like we understood the code base better meaning that it would be easier for us to maintain. There were a few holes left by jQuery’s absence, but these were �illed with NPM modules such as Axios, which we used for HTTP requests. To make our code neater we employed Browserify allowing us to require these modules only
32 _____________________________________________________________design diary
WHEN JUICE MEETS BEER
A LINGERING AFTERTASTE “Thesite maybe live, but we’re constantly looking atwaysto perfect it,” assertsHaydenEast. That’s
We also made use of a lot of new ES2015 JavaScript features, which “ we translated for older browsers when we needed them. We also made use of a lot of
live as the campaign rolled out,” Hayden East answers
new ES2015 J avaScript features, which we then
when recalling the pressures associated with readying
translated for older browsers using Babel JS.
this demanding project for launch. “The upside to this,
“To ensure we faithfully recreated the designs we
”
of course, was that a great deal of people would be
relied on FlexBox. Although we didn’t go as far as using
visiting the site.” That they would and continue to do
it for the whole layout, it was used in most modules to
so, discovering a dotcom that uses the Camden Town
help vertically aligned text and height matching
Brewery’s signature black, red and white logo colour
modules. Recreating the drop shadow boxes from the
scheme to bold effect. True to the opening motto of
beer packaging to form the buttons was one of the
“Great Beer Lives Here”, the team has delivered an
most challenging CSS problems. It was seemingly
experience where the product immediately introduces
simple at �irst, but making it cross-browser with a
itself to the customer – something so integral to initial
reusable SASS mixin that allowed for both a hover and
brief. Nicely, though, the company story is never far
click state became a longer process.”
away either, and is so far proving effective in welcoming drinking partners old and new into the
LAST ORDERS, PLEASE
Camden fold. “Together with the rebrand, the site has
“The new consumer website was an integral part of
those that are only hearing about the brewery for the
Camden’s above the line campaign so needed to be
�irst time.”
received a lot of positive feedback from those who’ve been with Camden from the beginning, as well as
because Studio Juiceare an agencywhere the handovero f a �inished[project] isoftennot the
endbut thebeginning ofanother phase.With thesiteseeminglyready togo public, theteam would usethe timeafterlaunchto look atpossible improvements while brie�ingall stakeholders on howmaintainit mosteffectively. “Nowthat there’s a greaterfocus on content,those �irstfew weeks after launchwere really important tous in termsof seeingwhetherthenew designwas �it forpurpose. For us,the handoverprocess isn’t a cutoff. Once we’re fullyhappywith thesite, we willsupply guides thatoutline bestpracticeand content requirements,but we’re still on hand for anytechnical issuesor contentqueries thatmay crop up.We’ll also hold a seriesof CMSworkshops so thateveryone is con�identmanaging the site – forthisprojecttheemphasiswas on understanding themodular system and howto make the most ofit inthe future. Wewantto make theprocess as comfortable as possible, no matter whatyour background is. Around thistime we mightalso discuss the possibilityof phasetwo concepts,which is always exciting for us.”
design diary _____________________________________________________________ 33
Creating digital products and connected spaces that in �luence everything from car sales, Hawaiian getaways and football games, Odopod fuse strategy, design, and technology to help leading companies innovate Key Clients Sephora Tesla Levi’s Stadium Hawaiian Airlines GoPro
who Odopod what Design Research, Digital Products, Service Design, Transactional Platforms, User Interfaces, User Experience, Retail Experiences, Mobile Applications, Television Interfaces, Consumer Electronics where Odopod,391 Grove Street, San Francisco, CA 94102 web odopod.com
34 _____________________________________________________________________ pro file
Strategists
Designers
Account/ Producers
Developers/ Technology
Operations
O
dopod was founded in 2000 by Tim
With such a distinctive name, the URL wasn’t di�icult
Barber, Jacquie Moss, and David Bliss,
to obtain.”
who met studying architecture in
How agencies connect with their clients can take
The ‘business’ of design is often a key factor when deciding which clients to work with. For some agencies, clients need to meet some minimum
place across many channels. Molly explains how
criteria before they are taken on. How does Odopod
now a leading digital agency and a member of the
Odopod approaches this: “We’ve been fortunate over
approach this aspect of their business? Molly
Publicis Worldwide family. Over the years, Odopod
the years that most of our new clients come to us
explained: “We care about the brands and clients.
has remained at the forefront of creating digital
through referrals from teams who have worked with
This is a mutual relationship and one that drives
spaces that are useful, thoughtful and cool.
us before or who’ve had some experience with our
future business and work.”
college. What began as a small shop is
Prior to Odopod, the founders ran a small digital agency called Circumstance Design. Think of it as
work in the world.” “We have a strong reputation in the industry for
Molly continued: “We don’t have size requirements for project work. It’s really about �it and opportunity.
Odopod v1.0. Circumstance Design was sold during
high-quality work. Clients come to us looking for our
For example, we do a lot of lean innovation sprint
the dot-com bubble. When that bubble burst in
level of rigor, thinking, and polish, as well as our ability
projects that lead to more sizable projects in the
2000, the founders had a lot of time on their hands
to transform business and push them in new
long-term, but might not seem huge at �irst. And by
and used the calm after the storm to craft a new
directions. Much of our work also comes from repeat
the same token, we have built a team that can handle
design �irm. Hello, Odopod.
customers. We’ve built an account services team to
large-scale projects as well.”
The name of the agency isn’t exactly ordinary. So
ensure clients keep coming back, and we’re always
Albert Poon, Executive Design Director added,
how did the team come up with such a distinctive
�inding new opportunities to provide value across
“The work we’re proudest of is the work that helps
moniker? Managing director Molly Dowd explains:
departments. Of course, we do actively pitch
our clients solve a meaningful problem. We want our
“Odopod is a designed word. It’s a combination of
business through competitive RFPs – that comes with
output to matter and make a difference whether it’s
two-terms. ‘Odo’ is the island that Godzilla came from
being in the industry – though we have a pretty great
helping clients clarify their value, delighting their
– a land of big things – and a ‘pod’ is something
track record of winning projects that we’re most
customers, or bringing a new product or service to
compact and e�icient, a place where things grow.
excited about.”
the world.”
pro file _____________________________________________________________________35
Often a design agency can point to a piece of work as a great example of their agency’s ethos. Albert outlined why the app for Levi’s Stadium (home
beacons to assist with way�inding, turning the stadium into a kind of connected place. Odopod worked with the client to reimagine all aspects of the
to the San Francisco 49ers) is solid proof of what Odopod stands for and can achieve. “The work we did on the Levi’s Stadium app is an example of a thoughtfully designed digital product, informed by lots of research with football fans. It needed close collaboration with the client.” Albert continued, “Sports fans are becoming more sophisticated about today’s contemporary sports venues and live entertainment experiences. Prices for
fan experience. Albert continued, “Another example of transformative work is the retail experience we did for Tesla. We worked with Gensler, their architecture �irm, to design a new kind of car-buying experience. Rather than sell their cars in expansive suburban paved lot, we wanted to i ntroduce Tesla, a completely new kind of car company, in a completely new kind of way.
“A team is curated based on that individual project need. We’re huge believers in cross-disciplinary collaboration, but it’s also not uncommon for us to have a strategy-only project, or a design-only project” live events have never been higher. If you can convince somebody to buy a ticket to your stadium experience, CMOs have license to sell, talk, and offer things to them, but how do theywant to do that? The ticket is merely license to start a conversation. It is
“We collaborated with them to imagine a real-world experience in an upscale retail space with digital components tightly woven in. Instead of focusing on a cool animation or video, we worked with their sales associates to understand prospective customers.
explicit customer action that indicates a willingness to listen, consume, and buy.” Odopod’s design makes the stadium experience much more immersive and enjoyable. Fans can use the app to assist with parking, ticketing, ordering food with in-seat delivery, and watching on-demand game replays (complete with multiple angles). The app also leverages new technology including Bluetooth
What questions were they asking? What concerns did they have? Did they know how electric cars work? From this insight, we designed the digital components as part of an integrated business-critical experience. It had to answer these questions that helped explain the car and its technology.” How Odopod approaches each project they are involved with includes a number of factors. “We
Levi’s Stadium is home to theSan Francisco 49ersand is located inSantaClara, CA— theheartof Silicon Valley. From its earliest conception, the 49ers imagined this venue to be the most technologically advanced stadium in the league and in all of sports. As the 49ers began selling seat licenses to fans, they promised a handful of ambitious features. Paperless tickets and parking passes, on-demand in-seat food and beverage delivery, live video, and instant multiple-angle replays were the most prominent new features. Partnering with VenueNext, Odopod was challenged with creating a mobile interface that not only delivered on this, but worked well within the context of a live event. Odopod began the engagement not by sketching and imagining interfaces, but by going to the team’s old stadium — Candlestick Park — and seeing how fans moved through the venue, how they managed their tickets and passes, how and when they bought food and what was good or bad about their experience. As suspected, fans most enjoyed being at the stadium for the immersive, communal experience — being with fellow fans and being part of the energy of a large and passionate crowd. Odopod discovered how di��icult and what a hassle it was to go to a game. Driving, parking,
Molly Dowd, managing director “Weexecutea wide variety of projectsat Odopod and, as such, we have experienced teams of strategists, user experience designers, visual designers, developers, and producers. A team is curated based on that individual project need. We’re huge believers in cross-disciplinary collaboration, but it’s also not uncommon for us to have a strategy-only project, or a design-only project. Each project is speci�ically tailored.”
36 _____________________________________________________________________ pro file
Grayden Poper, Senior Art Director (Left) and Hope Tweed, Designer, Level 2 (Right) creating their next digital masterpieces.
moving around the stadium, buying food, and using the restrooms weren’t easy. To address the context of a live game, Odopod designed an interface that adapts to di�ferent situations and locations. It wanted the application to be easily usable with one hand — accounting for a beer or hot dog in the other hand. it took advantage of the app’s location awareness to deliver content and options highlighting the nearest and most convenient resources. Before game day, the app prompts users to set up their app — that way they can load in their tickets, prepurchase their parking pass, set up a payment method, and sign into their loyalty account. Once it ’s set up, users can quickly access their digital tickets and parking passes from the persistent drawer at the bottom of the screen, no matter where they are in the app. At the stadium, the app sorts food and beverage options by proximity, and notes the current wait times. Fans can see the most convenient options �irst, gaining a sense of how quickly they can expect to complete their respective purchases. The app also highlights wait times for the nearest restrooms. Sounds like a mobile app �it for one of the most technologically advanced stadiums in the world.
Collaboration is a keycomponent of Odopod’s success.
execute a wide variety of projects at Odopod and, as
to best understand their business challenges and
such, we have experienced teams of strategists, user
applying our design expertise to help them think
experience designers, visual designers, developers,
through their problems, their unique strengths and
and producers,” Dowd explains. “A team is curated
situations, and to create meaningful solutions. Of
based on that individual project need. We’re huge
course, aesthetics, novelty and emotion matter, but
believers in cross-disciplinary collaboration, but it’s
great design employs these things in service of a
also not uncommon for us to have a strategy-only
great solution.”
project, or a design-only project. Each project is speci�ically tailored.” With a diverse client roster that produces a
Albert expanded: “For design, we have been traditionally an Adobe shop. Interaction designers primarily use Illustrator for their drawing. Visual
multitude of work in many formats, is the toolset that
designers primarily use Photoshop for all their work.
Odopod uses equally diverse? Albert’s said: “Design
We commonly supplement with Keynote for
solves problems. But just as design takes many
presentations and light animations. And we are
forms, so do the tools we use to problem solve. At
always looking for new prototyping tools as our core
Odopod, we are focused on working with our clients
capabilities evolve with technology. We currently use Flinto and Pixate for mobile prototypes. We have used Invision for desktop and large screen prototypes.” “Of course, our industry has seen a huge upswing in prototyping – and we’ve certainly seen rising interest in that as a service from our existing clients and new clients. In today’s cross-device, mobile-�irst world, we are asking our digital experiences to do more and be more useful. It’s no longer enough to be clever or create clever copy or design. Odopod is being asked more and more to deliver real utility. To accomplish that, we have turned to prototyping as a way of expressing the idea or the design to our clients and to their customers. It’s become invaluable and we’ve focused a lot of energy to get better and faster at delivering great prototypes.” “We’re just on the other side of a period of tremendous upheaval in Web technologies,” Albert said. “It’s been an exciting few years where the inherent complexity of multi-screen web apps was addressed by the application of new standards and more rigorous software engineering practices, primarily automation tooling and work�lows. While the pace of this change has slowed, we’ll continue to
Reviewing notes and brainstorming is always fun at ANIMAL
pro file _____________________________________________________________________37
see re�inements
in the entire development stack that
empower developers to sidestep mundane tasks and spend more time focusing on truly valuable engineering work. “We’re very excited about Progressive Web App technologies, and other projects that narrow the gap between what’s possible in native mobile apps and what’s achievable on the web. Native apps have their place, but if I can avoid navigating an app store and installing software to accomplish the task at hand, that’s a good thing. Google’s Physical Web project and Web Bluetooth APIs hold a ton of promise. It seems natural that the web will become the primary way we interact with publicly accessible connected stuff.” And how we all interact with content is often on mobile devices. How much of an in�luence do they have on design at Odopod? Albert Poon outlined their
Albert Poon, executive design director
approach: “Mobile is where the consumer is. You have
“The work we’reproudestof is theworkthathelps our clients solve a meaningful problem. We wantour outputto matterandmakea di�ferencewhetherit’s helping clients clarify theirvalue, delightingtheir customers, or bringing a newproductor service to the world.”
to design experiences for the channel where they’ll be used. We tend to design primarily for mobile, then scale up gracefully to bigger viewports. I think we’r e
“It seems natural that the web will become the primary way we interact with publicly accessible connected stu�f” beyond debating the merits of Responsive Design. The Web runs on a multitude of devices, and managing a single codebase is naturally easier than duplicating logic in separate, dedicated applications. Granted, it took time to get the necessary patterns and work�lows into practice, and for mobile hardware and browsers to advance, but today we can’t imagine developing for the Web any other way.” An agency is effectively only as good as the people it employs. What qualitiesdoes Odopod look for in a prospective employee, and what advice would they give to anyone looking to take a step into the industry? “We strive to maintain an environment that inspires creativity and collaboration,” said Molly. “We seek out extremely bright and talented individuals.
Year
Year
Year
Year
Year
Year
2000
2005
2006
2008
2009
2010
No. of employees
No. of employees
No. of employees
No. of employees
No. of employees
No. of employees
3
3
3
15
15
50
Odopod is founded back at the beginning of a new century. Exciting times ahead.
After �iveyearsin their old home it was time to move on to their new home in Hayes Valley.
The work producedfor Nike Skateboarding puts Odopod on the map.
Odopod is a founding Member of SoDA (Society of Digital Agencies).
WithOdopod onthe up it was time to give something back. The birth of Hack Days.
It’sOdopod’s tenyear anniversary. Time to celebrate with a Bash at Bimbos.
38 _____________________________________________________________________ pro file
SarahGao, Interaction Designer, Level 1 putsthe �inishing touchesto Odopod’s support of Pride Week in San Francisco.
Tesla Motorsis radically rethinking the car. With help from Odopod, it’s also rethinking the way ca rs are sold. Odopod worked with the team at Tesla to create a digitally enhanced retail experience that engages the public and generates sales. They recently partnered to upgrade and relaunch their in-store retail experience, after launching the original version together in 2010. This latest e�fort rethinks the Model S con�igurator – and also factors in the Model X. Beyond customising Tesla vehicles, prospective buyers have a closer connection to transactions. Services such as real-time pricing bridge the gap between con�iguration and purchase. The resulting showroom experience is seamless, faster and more immersive. Visitors progress from the front of each Tesla store to the back. Up front, the Go Electric Station answers common vehicle questions and alleviates
customer concerns about owning an electric vehicle by allowing users to replicate their driving habits. Meanwhile, the Innovations Station explores Tesla’s advanced technologies. As visitors move farther into the store, they have the option of con�iguring a Model S inside and out, and seeing those designs transferred to a large-scale in-store display. At the rear of the store, interested customers meet with sales sta�f to purchase a Tesla. This digitally driven retail experience engages the public and generates sales. A centrally managed system lets Tesla’s team dynamically publish content to its hundreds of stores worldwide. In addition, analytics data from each retail location is sent back to Tesla’s headquarters, so they can see how visitors are exploring content. The platform is designed to grow as Tesla does.
Not all follow the same path on the journey, but an
this heated conversation is the role of women in the
interesting point of view and talent will get you far. We
agency. Odopod sees the importance of women
take great pride in the work we do and thrive on both
working in all aspects of the digital industry –
big picture thinking and attention to detail.
particularly in leadership roles and in the �ields of
“Our teams motivate themselves. As leaders of the company, our job is to create a productive, nurturing environment, to set a high bar for quality and to
coding, development and technology, which are notoriously underrepresented and overlooked. But what does the future hold? “We are always
assist the team in achieving it. Everyone in the studio
evolving,” said Albert. “The Internet of Things is
brings the talent that makes the work great. Odopod
driving new connected everyday objects and
is 49 per cent women and 51 per cent men. In the
connected places. We’re doing some really
creative technology �ield, this is stellar. The Odopod
interesting things around connected home and new
leadership group is 42 per cent women. We’ll
retail experiences.”
continue to push to make this statistic even better.”
Albert added, “What’s happened in the last eight to
The tech industry continues to struggle with the
nine years – the smartphone era – is incredible,
dominance of men, and one neglected area within
almost unimaginable proliferation of connected things, sensors, and cloud computing. We’re just at the very beginning of really taking advantage of what all this technology can do. It’s in cars, our appliances,
Year
Year
Year
Year
our medical devices, retail stores and public spaces.
2011
2012
2015
2016
All this creates new opportunities. Ones we can’t wait
No. of employees
No. of employees
No. of employees
No. of employees
to shape into the experiences of tomorrow.”
50
50
50
70
Recognition for Odopod as they are awarded Small Agency of the Year.
Thelaunch ofNest. Created Tesla Stores – the beginning of push into retail.
Fifteen years in andit’s the launch of PlayStation Vue and push into products
Sixteenyearson and working on top secret projects that they can’t tell us about.
There is little doubt that Odopod will be one of the core agencies creating and driving exciting, new experiences across digital channels and platforms. With an eye on the future and a skilled team determined to innovate, Odopod will continue to lead where others follow.
39 pro file _____________________________________________________________________
WHAT’S NEW WITH
WEB FONTS PROS REVEAL THE LATEST TRENDS & TOP TECHNIQUES Abc123 120pt Montserrat ExtraBold
TYPEWOLF FOUNDER TALKS TYPE TRENDS
CLEARLEFT DISCUSS THE FUTURE OF FONTS
40 ________________________________________________________________ feature
BONNE MARQUE DELIVERS BEST PRACTICES
Abc123 51pt Tungsten Semibold
WHAT’S NEW WITH WEB FONTS
Above: This is not a good example of fonts
in action. Condensed typefaces are usually only considered for larger titles, or identity design – not body copy. www.niwaki.com/store/tobisho-sr1-secateurs/ Left: This is how type on the web today
should be happening. The fonts are complementary and the text is shimmering with a modern e �fect www.kikk.be/2016
TYPE TODAY is as essential today as it has ever been
There are so many fonts to choose from, but picking the right one
It’s easy to be lazy when selecting fonts, always referring back to old favourites. The more you get into it, the more you realise, despite the myriad typefaces that exist, only a small percentage are worth considering to stand the test of time. In fact, Massimo Vignelli, renowned Italian graphic designer once said you only ever need 5; Bodoni, Helvetica, Century, Times New Roman and Futura. A good point, to some extent – but alas, things today move so quickly if every brand had only these 5 typefaces, we’d all suffer brand blindness. Effectively, everything stems from current culture and the question is not ‘is it cool now?’, but ‘is it appropriate?’. A typeface popular ten years ago may still be loved by one person, but loathed
by another. But if used in a design relating to ten years ago, who’s right? There are also people who would only consider using something if they feel it’s ahead of the curve, and we’ll always need those
past few years where the “If I can use them all, I will” approach to font selection was ubiquitous; a sign we’ve evolved out of the early stages of experimentation. Designs now are becoming more
change makers – they help evolve where we are now. A good piece of advice is to remember that while trends are important for some brands or projects, it’s more important you select the right typeface over the one thats currently “en vogue”; a key skill of a good designer. Just as a good DJ can judge the crowd and play the appropriate record at the right moment, a good designer can read a message and select a typeface sympathetic towards it. We’re seeing a calming down of the antics of the
re�ined with a clean, minimal aesthetic widely adopted. The advent of ‘website-in-a-box’ platforms like Squarespace and Shopify, have brought with them their own design language; originally designed for CMS simplicity (big square blocks, bold clear typography) the style has expanded into a ongoing theme we see more and more of, even if a website isn’t using those platforms. Despite the plus points of simplicity for the user it’s important to keep an eye on maintaining a strong sense of identity from project to project.
HOW TO SPOT A TREN Where do you look for the latest trends? It’s not as obvious as it seems It’s a well known fact that many trends, whether it be colour, pattern, music, or even typefaces stem from fashion design. Part of a fashion designer’s job is to see into the future as they desi gn clothes people will want to wear, not this coming season –
reference for seasonal colour trends a we can do the same in type. The look currently on its way out is the stark, Gotham Black or Bold set in uppercas from around �ive years ago. At presen
the one after. It’s how ideas �ilter down to high street shops. Most of the inspiration behind it is current culture, but designers are not adverse at going backwards to go forwards. Designers study what people are wearing and how, the music and art being made now to get a feel of the current vibe. Sometimes they’re far off, other times, just around the corner, but nine times out of ten if you look at a collection or an idea from a big designer this season, you can expect to see it everywhere in a year or two.
we’re deep into geometric and rounded fonts such as Circular or Sailec set in regularly capitalised case often seen around in a Windows default blue. And next? I’m predicting more futuristic, digital looking fonts that represent a clean, modern e�icienc y. The example opposite is set in a very modern, square type. Watch out this will be
Colour group Pantone uses fashion as their
everywhere soon.
feature _________________________________________________________________
41
TYPEWOLF TALKS TRENDS Typewolf supremo Jeremiah Shoaf is a pro designer and keen typophile. He gives his thought on what ’s trending WebDesigner asked Jeremiah, ‘what’s trending in world of web fonts and web typography?’ Here’s what he had to say. “Geometric sans-serifs have been insanely popular the last few years—Futura, Proxima Nova, Brandon Grotesque, Circular and GT Walsheim seem to be used absolutely everywhere on the web. That being said, I think we are beginning to see a reverse trend of serifs becoming more popular. High-density displays are becoming the norm and these screens are better able to render the �ine details of serif typefaces. Delicate, high-contrast display serifs set at large sizes look incrediblygorgeous on Retina screens, so I think this is a trend we’ll seemore of in the future”. The world of type, fonts and typography are typically looking to the next trend, but the classics are here to stay. Jeremiah recommendshis favourite and some of the new kids on the block. “As far as classics,I think Avenir will never lose its appeal. It’sgeometric yet has a slight humanist touch that gives it warmth, setting it apart from other geometric sans-serifs that tend to feel cold
Jeremiah Shoaf ---------------------------------------------------------------------Freelance Designer & Creator of Typewolf www.typewolf.com twitter: @typewolf ----------------------------------------------------------------------
“I think Avenir will never lose its appeal”
and sterile. Adrian Frutiger considered Avenir his �inest work andI haveto agree. “For newer typefaces, I think Swiss foundryGrilli Type are doing really innovative work. They have a smallhandful of families buteachone strives to do something different. GT Haptik, for instance, was designed so the uppercase couldbe readableby a blindfolded person touching the letters with their �ingers. Grilli Type’s designs still focus on legibility, so their innovation is far from being a gimmick”.
CHOOSING A FONT: THE DECISION MAKING PROCESS WHAT’S THE MESSAGE?
HOW HAVE OTHERS DONE IT?
CREATE A MOODBOARD
TEST YOUR PAIRINGS
TYPOGRAPHIC TWEAKING Finally, once typefaces are
Always start with the
There’s no shame in taking a
Dont jump into the design
It’s usually good to select a
message. This informs
long look at competitors and
yet, simply create a large
couple of fonts at this stage.
chosen, begin looking at
everything in design –
other brands or people
canvas and start typing. Take
So look at headings and
how you can set it out on
including the font selection.
doing a similar thing to see
the key words from the
body copy separately. Check
the page. Will titles be
Ask ‘what’s the vibe’ and
how they’ve elected to
content and try it out in
out www.typewolf.com for
tracked out? Upper or
frame it as an emotion: is it
deliver their message. Try to
various different fonts –
expert help and guides on
lowercase? What size will
excitable, sombre, relaxed
prepare a list and highlight
you’ll soon see which is
which styles work well with
everything be set in? Once
or tense?
the good and bad points.
starting to work best.
other styles.
done, start designing.
42 ________________________________________________________________
feature
WHAT’S NEW WITH WEB FONTS
GET YOUR BODY COPY RIGHT It could be argued that 95 per cent of web typography is creating body copy. Here’s my tips for setting body text
1
DON’T MAKE LINES TOO LONG
Keep your line length between 35 and 70 characters. Anything over 100 characters per line starts to become di�icult to read. ___________________________________________________
2 Above: The evergreen Avenir font creates the headlines on the green-friendly cleaning product site Method. The light version it is used here. methodhome.com
KEEP THE LINE HEIGHT RIGHT
Keep your line height around 1.5. Web designers tend to go overboard with line
height – a larger overall line height may make your design look “open and breathable” but it hinders easy readability. ___________________________________________________
3
BREAK PARAGRAPHS UP
4
KEEP IT NORMAL
5
A D D CO LO UR , KE E P
Avoid “walls of text” on the web. Online readers tend to skim more, so breaking paragraphs up into smaller chunks can make your content easier to digest. ___________________________________________________
Don’t set body text with a display face and avoid using the 100 or 200 weights that many fonts contain. The 400 weight (also known as normal, regular or book) is usually the best option for paragraphs. ___________________________________________________
Above: Grilli Type are a foundry doing innovative work with fonts. GT Haptik is a good example of what they have on offer. Check out the site for more info and free trial fonts www.grillitype.com
CONTRAST
Text can still be perfectly readable if it isn’t black on a white background—try experimenting with color. As long as you are using adequate contrast, you can create a stronger, more memorable brand.
What do you need to know to create the perfect
� STEPS TO GREAT TYPOGRAPHY �inish? Read on… THE LEGAL LIMIT
LINE HEIGHT
WORDS PER LINE
SIZE
READABILITY
One font for an entire
albeit tricky to get a real sense of emphasis. Two fonts is recommended – one for headings/titles and another for body copy. Three fonts is pushing it. Ask yourself
There are many viewpoints on line height. The typeface which should always determine the best choice. On a sans-serif paragraph of text, 130�160 per cent is considered best. Remember to read it a few times – don’t
Set your paragraph widths so that your readers don’t spend their time losing track of where they are, or get fatigue through constantly moving eyes (too short lines). As a rule, ten to 15 words (50�75 characters)
Body copy is increasing in size – it’s not uncommon for type to be set up to 24px now. Large is �ine but do it for the right reasons. Consider mobile, and test constantly and compare what works best for you and
There are exceptions to the rule of making type as easy to read as possible, but if your goal is to get the user to achieve something in particular, don’t go too wayward with your font selection. It’s worth paying
why you’d need three.
judge purely on appearance.
per line.
achieves your de�ined goals.
for well-designed type.
website is �ine,
43 feature ________________________________________________________________
WHAT DOES THE FUTURE HOLD FOR WEB FONTS? OpenType Variable Fonts, jointly developed by Microsoft, Google, Apple, and Adobe will be the future of web fonts. It is a single typeface file that behaves like multiple fonts but a fraction of the file size. They work by defining the variations to a font that make it bold, condensed, etc. See more at medium.com/@tiro/12ba6cd2369 Richard Rutter ---------------------------------------------------------------------Typography evangelist and co-founder of Clearleft Richard has worked with leading font foundries as well as designing compelling experiences for Penguin, Channel 4 and ITV
TOP FONT TOOL – TYPETESTER www.typetester.org
reader context. The current version of the
Typetester helps you to preview, evaluate,
tool enables you to set paragraphs in
compare and design with more than 2,800
different faces from themajor webfont
available typefaces for use in your web
providers, with full CSS3 type controls,
design projects.
including export. Thus, making it easy to compare fonts side-by-side. The
Why use Typetester
forthcoming version is available to preview
Typesetter does a simple job really well: it
and looks to haveall the power to
compares typefaces side-by-side in a
challenge Monotype’s Typecast.
� FONTS THAT ARE TRENDING NOW CHARTER
FF MARK
www.fonts.com/font/itc/itc-charter Designed in 1987 by Matthew Carter, Charter is a robust body face seeing a resurgence in popularity thanks in part to itsuse byMedium.
GET THE FREE VERSION
GET THE GOOGLE ALTERNATIVE
practicaltypography.com/charter.html
fonts.google.com/specimen/Montserrat
AS SEEN ON
AS SEEN ON
markboulton.co.uk
44 ________________________________________________________________
www.myfonts.com/fonts/fontfont/mark Geometric sans-serifs are not going away soon, but FF Mark is cropping up more now as a nice change to the usual suspects.
bryntaylor.co.uk
feature
TIEMPOS
klim.co.nz/retail-fonts/tiempos-text Tiempos Text is a serif family with a lovely italic and companion display font – Tiempos Headline – giving plenty of �lexibility.
GET THE GOOGLE ALTERNATIVE fonts.google.com/specimen/Volkhov
AS SEEN ON pitchfork.com
WHAT’S NEW WITH WEB FONTS
�
TIMELESS FONTS ALL DESIGNERS NEED
The following collection would last a designer a lifetime
DIN NEXT SLAB
TUNGSTEN
bit.ly/2cB3uU2 This industrial strength sans-serif font was created in the early 20th Century for railroad cars. 100 years later, Kobayashi’s 2009 revamp
bit.ly/1KkHb3S This rare sans-serif typeface is known for being persuasive, standing for unashamed modernity and passion. It can be a bold
----------------------------------------------------------------------------
made it attractive to web designers again,
choice. Using it means going for a high-
Executive Creative Director at Bonne Marque
retaining its powerful simplicity and ensuring
impact font that communicates style and wit
bonnemarque.se
the typeface is always legible.
at the same time.
Alexand er Eng zell
twitter: @engzell
BASKERVILLE
EDITOR CONDENSED
QUITADOR
bit.ly/2czd4Xj Everyone knows John Baskerville’s story. This clean versionof thefamous typeface gives it a more modern edge, which offers an interesting spin on therough original, known for beingthe
bit.ly/2djKZYI Born to capture attention and rightly popularised in the form of newspaper headlines and titles, this prominent typeface is of great use to designers. Behold the alignment
bit.ly/2deOtK4 Flexible as any other font, this distinctive typeface suits print and screen design that call for an inviting and commanding tone that’s consistently legible. The square shoulders
o�icial typeface by the US Federal government
on the tops of the uppercase letters, numerals
ensure that designers can get even spacing
after the revolution.
and ascenders.
and large counters.
HIERARCHY HELP NO STRICT RULES The right balance between text and elements is crucial
Flouting the rules can sometimes bring impressive results
Following best practices with regard
hierarchy concerns controlling the
Rather than setting strict rules, I
with Vogue, which will launch around
to typography refers to line height,
relationship between the words on
prefer the creative to follow their
early October, adheres to most best
the spacing between the letters, the
the screen with other elements, such
intuition. The Manifesto I designed
practices because of the differing
white space around the letters, the
as logo, images, icons and anything
for Involve Digital deliberately goes
requirements between an
designer’s use of bold and italics, and
else visible. Control is amongst the
against best practices with regard to
established powerhouse such as that
hierarchy. This last matter of
designer’s most valuable abilities.
line height, and it works. My work
company anda bold startup.
feature ________________________________________________________________
45
A CLOSER LOOK AT CONTEMPORARY TYPOGRAPHY Medium.com has been around since 2012 and part of its appeal is its simplicity and focus on providing a place to simply read. It ’s most recent update in 2015 brought in Kievit and Charter to continue its tradition of great typography
Neatly designed author bio that sits out of the way and set in a system font (to allow for purposely smaller type) offering a brief background to the writer
Clear bold title, set in Kievet , uses a capitalised format – no shouting incaps similar to a lot of news sites / blogs. It has a reined subtlety to it. Also the helpful by-line introducing the article plays a useful part in deciding whether to read on
Return of the system font again for the image captions. Captions are a helpful and often underused feature in web design and always used with photography in newspapers. They can bring added context to the article or page, but should always aim to be minimal and unintrusive
Body text is beautifully set in Charter at a generous 21px with a 1.58 line height. Perfect margins between the paragraphs which are also ixed at a width that allows high readability, making the whole page feel open, clean and luid
GRAFIK gra�ik.co.nz Many design studios like to boast about their credentials, big ideas to change the world or their thousands of instagram followers but in the case of Gra�ik studios its kept very simple and easy to understand. The main bold serif Stencil typeface is a design feature in it’s own right, in contrast to the minimal design and used to great e ffect. It encourages you to read, because of the size at which its set and the engaging manner in which it has been designed. Paired with the relatively neutral an d
GOOGLE FONTS fonts.google.com A site designed to house fonts was always going to have to be well
equally minimal Book sans serif its easy
considered when it came to type, and Google have achieved that supremely.
to read and follow, despite being on a
With so many typefaces on a page and the degrees in which they vary, before
black backdrop. This can often be tricky
you know it, a page can look cluttered and confusing. This is why this simple
to overcome without making ones
selection of their primary face: Roboto works so well here. It’s clear and set
eyes hurt and it is often di�icult to read,
well in upper and lower cases to distinguish actions, and the mobile version
but not here.
of the site is no less of a joy to use.
46 ________________________________________________________________
feature
WHAT’S NEW WITH WEB FONTS
INNOVATE WITH EFFECTS Playing with text e ffects is a bit like playing with �ireworks. Stay sensible and don’t do anything stupid, and they will add a contemporary feel to your fonts
CSS SHAPES AND TEXT webplatform.adobe.com/Demo-for-Alice-s-Adventures-in-Wonderland
ESTABLISH YOUR OWN LOOK Create a style that people instantly feel recognition towards Like the white shirt or the cup of tea, there’s typography styles that never tire thanks to their simplicity and timeless design. But how is it some websites just look good and even reputable, despite you never having visited them before? Generally, it’s a case of �inding fonts with classic looks. For example, using a sans serif Humanist font (e.g Gill Sans) create a look that says ‘“I’m established’ – part of the reason is that its used a good deal in London Underground’s signage. By then pairing this with an old style serif such as Garamond, Bembo or Baskerville, all of which have been used countless times in the printed form in books over the years you immediately cast and instant familiarity. They key to creating an established feel on your website is to do less – but what you do do, do well. Coming back to ensuring line height, colour and line length are considered. Don’t be tempted to go too crazy with type size, remember the goal is not for people to marvel at your smart font choice but
This is something altogether different, and comprises some smart CSS using the shapes to transform live the appearance of copy as you
interact with it. Modern browsers only at this point, but already we can begin to see the potential here – think the infamous Star Wars ‘Intro crawl’ method.
THE NEW SHADOW codepen.io/juanbrujo/pen/yGpAK
to be able to read your message clearly. Think about book design and how few may consider the typeface and ask yourself what you could do to make your design hold similar properties.
GET THE FINE DETAILS RIGHT Make sure to check and tweak any type once it has been created One of the key giveaways when it comes to seeing how considered a design is, is not only the typeface selection, but also the typesetting. Finding the right font isn’t the be all and end all, it’s just as important that you set it on the page in the right manner, might need some CSS tweaking. Always consider the line height. The standard line height can be acceptable for some typefaces but by and large, it’s advisable to increase it some. It just allows the copy to ‘breathe’ more and,
For years drop shadows have been the scorn of designers, appearing on awful looking banners and seldom used today. However, with some imagination, it’s possible to create an effect that is
smart, sophisticated and brings a smart threedimensional look to copy without the embarrassment of early Nineties websites. Check out the codepen tosee how it’s done.
particularly for longer paragraphs, when the reader is required to sit for several minutes or more, consider shortening the line length to around 15 words maximum. Choose the colour of the type carefully so that contrast is neither too low or too high. If you’re writing on a white background, select a slightly off-black eg #333333 for the body copy. This creates less contrast and helps avoid the words burning into ones retina! Equally, set too light and you’ll �ind legibility begins to drop,
feature ________________________________________________________________
47
web workshop
Create a button to activate fullscreen menu As seen on www.grannyssecret.com
Animations Ifyouruser’sPCs arefast enough, whynot embed somekind of transition animationinto thepop-up menuprocess?
Providea wayback Forcing usersto reload your website toget outo themenuisa sure-�ire way tomotivatethemto visita competitor’s page
JumpStyle is bad A careful layout allows youto minimisethe amount of “jumping” of on-screen elements whe themenu is activated.
48
Hapticfeedback
Background
Provide userswith some kindof indicationthat the elements ofthe menu are clickable,to increase discoverabilityon the site.
A semitransparentlayer is a good way toreduce any background clutter thatis oftencausedbythe underlying content.
Create a button to activate fullscreen menu DOWNLOAD TUTORIAL FILES
EXPERT ADVICE Smartphones have much smaller screens At �irst glance, this pattern provides an ideal way to make a mobilefriendly menu. Sadly, this is not the case: if the button used is too small, users will be frustrated. Check whether the menu button is clearly identi�iable for unsophisticated users visiting your website.
P
www.�ilesilo.co.uk/webdesigner
alm’s long-forgotten mobile operating
further choices. Thefullscreen menu can then be closed
system, PalmOS, rede�ined the way that
down anddoes not clutter the screen. Developers and
navigation was handled. Instead of always
users like this techniqueas the screenreal estate used
having the menu onscreen, it was
for the menu is taken up only when the controls
displayed only when the user requested it. This
comprising it are needed. Hiding unneeded elements
technique shows a very similar process: a menu button,
also allows you to reduce the amount of visual clutteron
ideally embedded in a convenient place, opens a larger,
the screen – the menu is displayed only when the user
screen-�illing menu, which allows the user to select
wants to �ind out more.
Put uncommon options out of sight What our experts think of the site
“Providing unsophisticated users with a list of 50 choices will overwhelm them. Limiting the number of choices displayed by default increases customer satisfaction and signi�icantly decreases the amount of customer care required to support your product. Pop up menus are perfectly suited to this problem” Dr Doris Maria Kohrs, CEO of abc texte
Technique
be sent to ‘absolute’ for the index property to be considered in the rendering process.
1
.
Set things up
higher z index will be shown behind elements with a
lower one.
Bring it to the screen
4
With that, it is time to bring the element into view. Keep in
mind that the z-index function implemented in jQuery is
Load Menu
$(“#myMenu”).css( “zIndex”, -10);
});
2
.
Add an event handler
5. Make it disappear again At this point, click the but ton to change the display. This,
jQuery is the gold standard for all kinds of event handling.
however, is not enough – we also want to allow users to
As our menu is to be summoned to the screen via a
get out of the fullscreen menu. Accomplish this by
button, we must implement one. In addition to that, at
reading the z-index property, adjusting the visibility of the
this stage we will also load a background image from the
DOM tree on demand.
author’s collection.
$( “#myKnob” ).click(function() {
}
else{
. . .
$(“#myMenu”).css( “zIndex”, -30);
}
$( “#myKnob” ).click(function() {
});
alert( “Handler for .click() called.” );
});
Add some content
6
Adding additional elements is made di �icult by
.
idiosyncracies of the CSS standard: it does not allow the
3
.
Add a menu overlay
z-index to be inherited. Because of this, all of the
The actual menu will be found in a secondary overlay.
elements need to be assigned a z-index: you can, for
Just like the one created in step one, positioning needs to
example, use an array of ids to simplify this task.
49
Tutorials
Build full browser screen designs Use fullPage.js to create full browser sized section designs to your single web page layout.
DOWNLOAD TUTORIAL FILES
50
www.�ilesilo.co.uk/webdesigner
Tutorials
S
ingle pagewebsiteshave beengrowingin
the size of the browser screen. The fullPage.js library will
momentumfor thepast�iveyears and
this video will �it that section.
siteto �illthe entire browserwindow. This
position: absolute;
it’s become incredibly simple. The kinds of pages that �it into this kind of site well, are
right: 0; bottom: 0; top: 0; left: 0;
2
.
The �irst page
width: 100%; height: 100%;
the pages that have very little text and are really trying to
Now the code here will develop the �irst page. This will
background-size: 100% 100%;
impress the user with imagery. If there’s too much text
have a full screen video looping in the background. You
background-color: black;
then there’s a chance that at some point the text will
can download the video at HYPERLINK “http://www.
background-position: center center;
require scrolling and that defeats the object of each
openfootage.net/?cat=17” http://www.openfootage.
background-size: contain;
section �illing the browser. Sites such as Apple use this
net/?cat=17. Use Miro Video converter to make MP4 and
object-fit: cover;
kind of effect well when they are showing off their iPhone
WebM versions of the video. Over this is the heading and
z-index: 3;}
and trying to show off the product with good clean
logo image.
Positioning the text
photography. In the tutorial we are going to focus on
#slide2 {
image of the �itbit is also positioned as that is the
background-image: url(../img/slide2.jpg);}
staticImg that is referred to here. The �itbit image was
Personal Training
#slide3 {
added in the �irst step of the tutorial.
background-image: url(../img/slide3.jpg);}
Monitor Your Progress
#section3 .imgsContainer, #staticImg . imgsContainer, #section4 .imgsContainer {
Creating the third page
9
Set Your Targets
In the HTML add the third section to create the third
z-index: 1;
page. As previously add this before the �inal div tag of the
left: 50%;
7 Setting up theslides
id “fullPage”. Here there are several images and text
display: block;
Moving back into theCSS, this adds the background size
being displayed on the page. Add your own text to this
margin-top: -288px;
tocover the full sizeof the browser for the images. The
or some placeholder text to the document.
margin-left: -636px;
.
.
position: absolute;
heading is given a little drop shadowjust to make sure
position: absolute;}
14
.
Up and down
The move down and move up classes are added with
#staticImg.moveDown .imgsContainer {top: 50%;}
#staticImg.moveDown img {top: 155px;}
#staticImg.active .imgsContainer {top: 50%;}
javascript and here you can see that the content moves
as this is o �loaded to the GPU so will always appear
Back into the HTML now to add the fourth section to the
#staticImg.moveDown {-webkit-transform:
when previously adding the HTML content in that all of
translate3d(0, 100%, 0);
the sections are wrapped in the div with the id of
Get it now! Text content.
-ms-transform: translate3d(0, 100%, 0);
“fullPage”. Save the page and switch over into the CSS
transform: translate3d(0, 100%, 0);}
again.
.
#staticImg.moveUp {
