THE WEB DESIGNER MISSION

THE WEB DESIGNER MISSION

Pro tools, pro builds, pro sites

Designers and developers may have the know-how, but not
everyone does. Why not give your visitors some helpful advice

Staying secure online isn’t
always at the forefront of web
designers’ and developers’
minds. When designing and
building it is rarely high on the list of
priorities. How secure are the browsers we
are testing in? How secure is Firefox? How
secure is Chrome? How secure is Edge?
How secure is Safari? You get the picture,
but do you know how secure they are?
Many make the assumption that all are safe
and any issues will be dealt with by the
vendor. And this is the case, but the vendor
needs to know how we are using their
browsers. When was the last time you
updated your browser? We are making the
assumption that as web designers and
developers this is done without fail. If not,
why not update now.
Passwords are the key security option
online, but how often do you change yours,
and is it a recycled password used in all
your social media accounts? Do you get

the browser to remember your password
for ease of use? Did you know that if you
can get on someone’s machine, and they
use Firefox, you can quickly access any
saved logins via Preferences>Security? If
there is no master password all you need to
do is press Show Password and you’re in.
This is maybe something that should be
relayed to all users and visitors of your site.
Mozilla recently ran a private survey to
find out how people are using their browser
so they can further improve it. They asked
a series of questions including their level of
knowledge for protecting themselves
online. Frighteningly, over 90% of people
didn’t know much about protecting
themselves online, while 11.5% admitted that
they knew nothing.
We often forget that our sites can be
viewed across the entire globe and not just
in the country of origin. The survey
revealed that respondents in France were
the least confident about their knowledge

Frighteningly, over 90% of
people didn’t know much about
protecting themselves online

Mozilla’s survey into browser security revealed that certain countries were far more aware of the risks

8 _______________________________________________________________________header

of how to protect themselves online, with
one in five people admitting that they knew
nothing and needed help.
The survey also revealed that many had
real privacy concerns and had gone as far
as altering their online behaviour.
Interestingly, people in the UK and Australia
were the least likely to have changed their
behaviour online in the last year. But, if
people are changing their behaviour this
could have an impact on what sites people
visit and how they use a site. Surely the
more friendly and reassuringly secure a site
is, the more likely it is to be visited.
Fear is not any site’s friend, so what is it
that worries web users the most? Eight out
of every ten people fear being hacked by a
stranger, while unauthorised access to
personal accounts topped the votes. Four
out of ten people were concerned about
being spied on by state actors, such as
governments and law enforcement
agencies. While not so high on the list, 61%
of respondents were still concerned about
being tracked by advertisers.
The respondents were asked if they
would like to learn more about how to
protect themselves and their personal
information online. Unsurprisingly, a
massive 92% of respondents wanted
learn more about how to protect
themselves online. Even those with st ng
knowledge of online privacy protecti
80% wanted to learn more.
So, what does this tell us? While i is no
the responsibility of website owne to plug
security holes in browsers or eve duc
visitors, offering visitors some frie y and
useful tips (for example add a m ster
password in Firefox), could be a
step
forward in ensuring your visito stay safe.
And it could have the added b nus of
bringing more kudos to your and.

Get Web
Designer
digital
editions
Get your hands
on a collection
of the best
contemporary
techniques
If you need an instant hit of Web
Designer, then check our digital
specials. ‘The Web Apps
Handbook Volume 2’ and ‘The
Developer’s Guide to JS’ reveal
the best tools and methods to
build apps with web technologies
and how to get started with ES6
and npm.
Don’t forget ‘Animate with
HTML & CSS’ and ‘3D and the
Web’. We cherry-pick a collection
of the best animation and 3Drelated techniques to add interest
to any project. Plus, check out
‘20 Quickfire HTML & CSS
Techniques’. How can you get
your hands on a digital edition?
Head over to bit.ly/1hsGYgl,
download the free Web Designer
d nd them waiting for you
an in-app pu

Header
Inspiration

Sites of the month

02.

01.

03.

01. Chalke

04.

chalke.com.au
An animated, multi-coloured logo
immediately grabs your attention.

02. Le voyage de Tom
levoyagedetom.up.coop
Join in with Tom’s journey via this
beautifully illustrated site.

03. Taptaro
taptaro.co
The simple rollover effect fits perfectly
with what the app is trying to achieve.

04. Dreamscapes
lufthansa-dreamscapes.com/en
Need a holiday? Be tempted by this
smart online brochure.

Graphics

Colour picker

Typesetter

WordPress

bit.ly/2n2owo2

bit.ly/2mm4zFM

bit.ly/2mmpbOh

wpopaldemo.com/owen/

Tobias Hall

Cherry Pie

We love Tobias Halls’ works and this
collection of illustrations simply reinforces
the fact that he is a very talented artist

#F7D70D

Buket

Owen

18 styles and textures that are different

Four homepage layouts and optimised for

but compatible with each other. Includes

mobile. Includes a page builder for bespoke

decorative, script sans outline and more

layouts and is SEO optimised

#F9CA21

#EF4463

#F05061

#F26651

header_______________________________________________________________________ 9

Header
Resources
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag

webkit

Discover the must-try resources that
will make your site a better place

PWABuilder
preview.pwabuilder.com

PWA Builder brings together a collection
of tools to build a Progressive Web App.
Its premise is to take data from an
existing site you have created and use
that to generate a cross-platform PWA.
Users can use the web-based approach
or download the node-based CLI. It also
includes the App Image Generator to
create app icons for various platforms.

Rough.js

Dwitter

AR.js

roughjs.com

dwitter.net
Sign up to the social site that brings
together short and impressive
JavaScript demos. Comment, edit and
browse other people’s demos.

github.com/jeromeetienne/AR.js

A lightweight, standalone Canvas-based
library that lets users draw in a sketchy,
hand-drawn style. Create lines, curves,
arcs, polygons, circles and ellipses.

Jerome Etienne is looking to make AR
for the web a reality. It is open source,
free of charge and works on any browser
with WebGL and WebRTC.

TOP 5 Web conferences – April 2017

Get yourself a seat at the biggest and best conferences coming your way soon

UX In The City
uxinthecity.net/2017/oxford
Returning for its second year,
UX in the City: Oxford is a
hands-on event for the User
Experience community.

React
Amsterdam
react.amsterdam
A full-day conference on all
things React, featuring practical
and visionary talks.

10 _____________________________________________________________________header

Now What?
2017.nowwhatconference.com
Head to Sioux Falls to join in with
two days of insightful talks and
hands-on workshops about how
to improve your website.

Generate –
New York
generateconf.com/new-york
A two-track, one-day
conference packed with insight,
inspiration and practical advice.

FEDC
bit.ly/1AkB5Zb
It’s all about front-end design.
This is a conference for web
pros who love their community,
the Web and learning.

Header
Opinion

8 ways to get cash
from the taxman
Is your agency entitled to R&D tax credits?

T

Adrian Williamson

ax relief might not be uppermost in the
minds of anyone working on a website.
Yet some of the more complex projects
can technically be classed as Research
and Development, which means that agencies or
e-commerce companies may qualify for R&D tax
credits and, in many cases, can claim back significant
sums from the taxman.
To ensure you don’t miss out, the trick is to
understand the type of projects – or parts of the
projects – that might be eligible. The rules exclude
any work using tried and tested technologies along
with design, storyboarding or anything related to
user experience.
The projects most likely to be eligible are complex
and bespoke jobs, where the work crosses over to the
back end of the site and where innovative solutions
and technologies are required.
So, what are the eight most common areas for
successful claims? Read on to find out more.
1). Making sites mobile friendly. With responsive
design, most sites work automatically on mobiles these
days. However, problems often arise in getting native
APIs to integrate with different platforms on different
devices. Even when they can be made to work, they
may not be able to respond fast enough, deal with the
level of expected traffic or the supply the data users
require. Resolving these issues can be complex and
costly but the work is likely to qualify for tax credits.
2). Moving services online. Allowing customers to
book online is a great idea as it
offers them 24-hour access
without the need for an
operator. However in many
sectors – from holidays and hire
firms to social housing –
services often rely on legacy
systems operated by trained
staff. Therefore web developers
typically face the challenge of making an expert user
system available for self-service, while accessing data
from various back-end systems. Not surprisingly,
self-service is a common theme in R&D tax credit
claims.
3). Rewriting a CMS. With more complex websites, it

Technical analyst

jumpstartuk.co.uk
linked to the same CMS and sites pulling in data from
multiple sources. Another area likely to qualify for
claims!
4). Product modelling and storage. While sites with
simple product offerings can be created with an
off-the-shelf template, problems arise where the
product offering is more complex, for example with
different design options, colourways or combinations,
or where the system needs to check availability and
thus link to a back-end database before accepting an
order. This type of integration development work may
well qualify for tax relief.
5). Pricing and promotions. Again, developers may
have to be more inventive where there are complicated
pricing structures or promotional offers such as ‘buy
one get the second half price’ or ‘free bag with every
dress’. Promotions like these can be problematic in
store as staff attempt to work out which apply, which
don’t apply and which can be used in combination. It’s
no surprise that replicating them automatically online
creates even more headaches!
6). Sequencing payments. With some types of
purchase, such as travel bookings, equipment hire or a
bathroom refit, it is common to take deposits or make
staged payments. Again, this may require companies to
develop new integration technology solutions.
7). Eligibility. In some cases, orders can only be
accepted where buyers provide proof of identity or
eligibility, such as checking their credit score or
qualifications. Developers will need to find ways to link
to other back-end databases for
verification while trying to ensure a
swift and seamless process.
8). Fulfilment. Where goods are
being despatched directly from a
third party, the system will need to
integrate with a third-party site to
check stock and arrange delivery –
typically retailers that ship directly
from overseas manufacturers or work in partnership
with logistics companies.
Do you recognise any of these situations or have a
project that may fit the bill? If so, speak to a specialist
adviser, as interpreting the rules correctly and using the
right terminology is crucial to the success of any claim.

Web developers face the challenge
of making an expert user system
available for self-service… a common
theme in R&D tax credit claims
is not usually the content creation where problems arise
but the way it integrates with the CMS system. While
standard CMS systems can cope with a multitude of
applications, in some cases developers may have no choice
but to adapt the CMS or rewrite it altogether. Examples we
have seen include a company with 600 domain names

header_______________________________________________________________________11

Header
Resources
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag

webkit

Discover the must-try resources that
will make your site a better place

WebGradients
webgradients.com
Are you in need of a good-looking
linear gradient quickly? Then check
out this free collection – there are 180
linear gradients to choose from. They
are perfect for backdrops and all you
need to do is copy and paste the CSS
browser-friendly code. If you don’t
want code, you will also find a .PNG
version of each gradient.

SoundManager 2

Anchorme

BigPicture

bit.ly/2nkZGg6
SoundManager 2 offers a single,
powerful API that uses HTML5 audio
where supported. Go retro and re-create
playlists via turntable and cassette.

alexcorvi.github.io/anchorme.js
A JavaScript library that can detect URLs
and emails in text and convert them to
clickable HTML anchor links. It can be
used to extract a list of links from a page.

github.com/henrygd/bigpicture
Lightweight and frameworkindependent BigPicture is a JavaScript
image/video viewer that supports
YouTube, Vimeo and direct links.

TOP 5 WordPress themes – April 2017

Add contemporary style and functionality with this latest collection

Elise

Bary

Elston

Everything

bit.ly/2miyspJ
A clean magazine theme with a
focus on imagery and fonts. It is
neatly split into sections and
has clever layout additions.

demo.roadthemes.com/bary/
Bright and bold e-commerce
theme incorporating a host of
sections, including both
Portfolio and Blog options.

bit.ly/2mCUOos
Suave, stylish and sophisticated
is what the Elston theme is all
about. Neat, vertical navigation
keeps the focus on the page.

bit.ly/2nkXkxI
How many styles do you need?
One, but the Everything
WooCommerce-backed theme
has over 25 to choose from.

12______________________________________________________________________header

Grand
Conference
bit.ly/2mCOjli
Planning your own conference?
Don’t spend a fortune; this
theme has everything you need.

Header
Opinion

Are chatbots
here to stay?
New technology can quickly fade into obscurity, so what lies ahead for chatbots?

T

Andrew Gazdecki

here were those who thought TV would
go away in a few years, and I can still
remember several prognosticators who
rejected the internet as the Nineties
version of the CB radio. While the chatbot isn’t as
groundbreaking as television or the world wide web,
they are here. So, that leads to the question: will
chatbots still be a thing a couple of decades from now,
or will they go the way of the Pet Rock?
The difference between a fad and a trend is that fads
are momentary diversions while trends are things that
add tangible value to our lives. That is why fads come
and go while trends become part of our daily lives. All
fads do is provide a momentary distraction from
whatever in life we need a break from. Granted, the line
between fad and trend can get blurred, but it’s the part
with tangible value that always wins out. Look at
fashion. The trend is that we need clothes so we don’t
die from exposure. The style part would be the bell
bottoms, Eighties shoulder pads or the grunge look.
That is the distraction/fad part.
This same concept not only applies to chatbots but
is also an example of how trends work. Look at what
chatbots do. People hate phone trees. Chatbots are
helping to chop the phone tree down and salt the earth
any place its roots have touched, by giving customers
the ability to directly engage a business without feeling
that they’re being herded like cattle.
Customers want to talk to someone working at the
business they are contacting.
Those companies want to
engage customers actively. The
problem is, hiring the number
of people needed to handle live
chat for every customer isn’t
cost effective. Chatbots are the
perfect compromise.
Customers get to actively engage with the company,
albeit not with a real person, and the company can
accommodate that. While the chatbot can’t handle
everything, it can help figure out what a customer
needs, and answer fundamental questions or funnel
the more complex problems to live agents. This
provides tangible value to chatbots, on both sides of
the consumer equation.

CEO at Bizness Apps

biznessapps.com
likely determine the stickiness of chatbots. The
customer experience will need to improve in order for
the end user to accept this new technology. AI will
ultimately be the key to creating a good chatbot user
experience.
The way chatbots can enhance a user experience is
another reason they will be a lasting trend. Siri, Cortana,
Alexa or Google’s nameless AI assistant are all personal
assistants you can find on newer smart devices.
Assuming they hear you right, it is incredibly handy to
be able to ask one of them a question when your hands
are full. All you have to do is ask it something like you
would a know-it-all friend, and you’ll get an answer. This
could be anything from inquiring about local
restaurants while in a city you’re visiting, or settling an
argument about TV trivia while on a road trip with
friends. It’s going to be these indispensable, casual uses
that will keep chatbots with us for a long time.
AI chatbots aren’t going to be limited to our phones.
One day soon, they will be working the self-checkouts
at the grocery stores, and helping marketers better
reach customers. Reading between the lines, many of
you are thinking, “Great! More annoying ads.” But what if
the ads were relevant? Imagine a chatbot with
sophisticated enough AI that it can have enough insight
to figure out exactly what it is a customer wants. Instead
of receiving semi-random ads, the various AIs inside
and outside your devices talk to each other so they can
tell you about products you would be truly interested in.
Think of it in terms of all your friends
getting together and actively
figuring out what to get you for
Christmas versus one of them
grabbing a box of cheese and
sausage.
The bottom line is this: bots are
here to stay. And if developed
correctly, they will help to grow yet another tech niche
– bot fads. If you think this is a trend that will stay, then
you should try creating a chatbot for your business.
Just like you can build mobile apps by using an app
maker (biznessapps.com), there are chatbot creators
that allow you to create your own chatbot without
doing any coding (hongkiat.com/blog/
tools-to-build-chatbots).

Imagine a chatbot with
sophisticated enough AI that it can
have enough insight to figure out
exactly what it is a customer wants
Another reason chatbots are a trend that will stick
around is that they are linked to an even larger trend –
Artificial Intelligence, or AI. AI has had an impact on our
daily lives for decades, but as impressive as it is, what we
see now is the equivalent of the pre-web bulletin boards.
The earth-shattering advances have yet to come, but they
will be here soon enough. As AI grows and gets better, so
will chatbots. The swiftness of this technology will most

header______________________________________________________________________ 13

Parklife 2017

www.parklife.uk.com
Designer: Project Simply – projectsimply.com
Development technologies HTML5, jQuery, PHP, CSS3

14____________________________________________________________________ lightbox

Manchester agency Project Simply
serves up a beautifully illustrated and
colourful HTML extravaganza for
Parklife music festival

Li htBox
Parklife 2017

#E41B81

#AD82B8

#0ACFCB

#EA6033

Above

Above

Guy Hand, most probably a custom font, appears in
Extra Bold to provide the quirky handwritten text

Heaton Sans is again an uncommon sans serif font, styling
the subsequent page and stage headings

lightbox ____________________________________________________________________ 15

LightBox
Parklife 2017

Above

A flickering TV lines effect sits behind the launch video to add a touch of retro authenticity

Above

Above

A flashing neon sign animation attracts the viewer’s attention and introduces them to the
opportunity to get a VIP ticket for the festival

The Parklife 2017 site is finished off with an equally impressive illustrated footer

16____________________________________________________________________ lightbox

LightBox
Parklife 2017

Create animated floating effects
Use CSS keyframe animations to activate animated content that draws the attention of your visitors
1. Document initiation
The first step is to initiate the HTML document, which
consists of the HTML container that stores the head and
body sections. The head section is used to store
descriptions of the document as well as links to external
resources – the CSS file in this case. The body is used to
store the visible content elements, to be added in the
next step.

<!DOCTYPE html>
<html>
<head>
<title>Floating Animation</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
</head>
<body>
</body>
</html>

2. Visible content
The visible content is stored inside the document’s body
container. The animated elements will have a class name
of ‘float’, allowing us to be selective of where the
animation effect will appear. This enables us to use the
effect as many times as we need to without adding

complexity to the CSS rules.

<h1 class=”float”>Page Title</h1>
<p>This is sample content.</p>
<img src=”image.jpg” class=”float” />

3. Initiate style file
With the HTML now fully defined, the next stage is the
creation of the CSS rules for presentation. Start a new file
called ‘styles.css’ and insert the code for this step. These
first rules set the content to cover the full web page with
a black background and white text by default.

html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #000;
color: #fff;
}

4. Title and animation class
Our animation specifically requires title text to be aligned
centrally, hence the need to define a rule for this.

Elements that have the ‘float’ class applied to them
require relative positioning and two animations applied to
them – ‘wonky’ and ‘hover’. Both of these animations are
set to last for two seconds and to repeat infinitely.

h1{
text-align: center;
}
.float{
position: relative;
animation: wonky 2s infinite, hover 2s
infinite;
}

5. Wonky animation
The wonky animation changes the state of the element
to rotate from left to right. This is achieved by defining
specific keyframes for the element to transition between.
The first frame is at 0% of the animation, which starts
rotated left at -0.5 degrees. A second frame is set halfway
through the animation at 50% to rotate the element
towards the right. The element is then set to transition
back to the original state using the last frame at 100%.

@keyframes wonky
{
0% {transform: rotate(-0.5deg);}
50% {transform: rotate(0.5deg);}
100%{transform: rotate(-0.5deg)}
}

6. Hover animation
The strategy used for the hover animation is the same
used for the wonky animation defined in step 5. The
difference in this animation is that it transitions between
the top positioning attribute being five pixels above and
below the original content positioning. With elements
using relative positioning, they will animate in relation to
their original position.

keyframes hover
{
0% {top: 5px;}
50% {top: -5px;}
100%{top: 5px;}
}

Call to action

Consider how this effect can be used as part of
UX design for guiding users through a process
such as completing a form.

lightbox ____________________________________________________________________ 17

2017 Make Me Pulse

2017.makemepulse.com
Designer: Make Me Pulse – makemepulse.com
Development technologies HTML5, JavaScript (Cannon.js), SVG, WebGL

18____________________________________________________________________ lightbox

According to this interactive New
Year’s greetings card from digital
dreamers Make Me Pulse, “Great ideas
are made to be experienced”

#C0C8DF

#8797C3

#69789A

#545454

Above

Maison Neue by Timo Gaessner for Milieu Grotesque exclusively styles the tiny amount of italic text

lightbox ____________________________________________________________________19

LightBox
2017 Make Me Pulse

Above

Each new screen brings with it a new interactive animation. The surprise is how the user is going to interact

Above

Above

After interacting with the current animation users can move on to the next
one by sliding across the button

The mobile experience replicates the desktop experience,
giving users full interaction

20 __________________________________________________________________ lightbox

LightBox
g
Make Me Pulse 2017

Create an animated title effect
Use CSS transition to animate webpage content titles to appear into view from fog
1. Document structure

3. Initiate style file

Initiate the webpage document by defining its document
structure. This consists of the HTML container, which has
two sections – the head and body. The head is used to
contain descriptive information such as the title, as well as
links to external resources. In this case, the head links to
the CSS stylesheet. The body is where the visible
webpage content is placed in the next step.

The HTML content is now complete, so initiate the next
stage by creating a new file called ‘styles.css’. This file will
contain the CSS rules, in which we will start by defining
the default page settings. The main HTML and body
containers will be set to cover the full webpage with a
black background and white text by default.

<!DOCTYPE html>
<html>
<head>
<title>Title Morph</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
</head>
<body>
</body>
</html>

2. Page content
The page content for our example consists of a
navigation containing links, along with a series of sections
that correspond to the navigation links. Each of these
sections contain a title, which the CSS rules will be set to
animate into view when their container section is
activated from the navigation menu.

<nav>
<a href=”#first”>Option</a>
<a href=”#second”>Option</a>
<a href=”#third”>Option</a>
</nav>
<article>
<section id=”first”>
<h1>First Title</h1>
</section>
<section id=”second”>
<h1>Second Title</h1>
</section>
<section id=”third”>
<h1>Third Title</h1>
</section>
</article>

html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #000;
color: #fff;
}

4. Article sections
An article element is used as a container for the sections,
allowing them to be grouped together for positioning.
The article uses relative positioning and padding to make
sure that its child sections appear in relation to it without
conflict with the navigation. Child sections are set to
appear at the far left. They are set invisible by default,
while the target selector makes them visible when they
are selected from the navigation.

article{
position: relative;
padding-top: 5em;
}
article section{
position: absolute;
opacity: 0;
width: 100%;
}
article section:target{
left: 0;
opacity: 1;
z-index: 9999;
}

article section h1{
position: absolute;
top: -1000em;
left: 0;
font-size: 4em;
width: 100%;
text-shadow: 0 998em 2em #fff;
transition: text-shadow 1.5s;
}
article section:target h1{
text-shadow: 0 998em 0 #fff;
}

6. Navigation settings
Although the navigation isn’t part of the text effect, it is
required to activate the title animations. We set the
presentation rules to format the navigation so that its
links can be easily selected for activating the different
page titles. Another way to consider the activation of the
title effect is through JavaScript in response to events
such as the page loading.

nav{
display: block;
width: 100%;
padding: 2em;
text-align: center;
}
nav a{
color: #fff;
text-decoration: none;
padding: 1em 2em;
margin-right: 1em;
}
nav > a:hover{
border-bottom: .5em solid #c00;
}

5. Title effect

Attention seeking

Consider how the use of these animated title
effects can be used as a tool to allow your
visitors to identify whether or not the page
is of interest to them.

The animated title is achieved by applying a transition to
the text-shadow attribute. The fog effect requires the text
shadow to transition from full to zero blur, meaning that
the original text shouldn’t be in view. This is achieved by
making the original text use absolute positioning and
placing it above the visible page area. The text shadow is
positioned the (almost) equivalent amount of space
below where the text is so it appears on the visible page.

lightbox ____________________________________________________________________ 21

City in the Cloud

theatln.tc/2jg8Vvv
Designer: Level2D – level2d.com

Development technologies Django CSRF, HTML5, Typekit, jQuery

22 ___________________________________________________________________ lightbox

With art and coding from Level2D
and partnering with Microsoft Cloud,
this site visualises how data is
transforming modern cities

#DED556

#6B9E5C

#69CDA9

#FACE37

Above

Above

Acumin Pro Wide from Adobe is used across the
standfirst qualifiers found within each mapped area

Druk Condensed Super Web font by Berton Hasebe
provides the tight, bold type that announces the site

lightbox ___________________________________________________________________ 23

LightBox
City in the Cloud

Create a scrollable
zoom navigation
Create a content section that has CSS zoom features for navigating and expanding content
1. Page document

display: block;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: #000;
color: #fff;

The first step is to initiate the HTML document, which
defines the document, its head and body. The head
section is used to contain links to external resources (CSS
and JavaScript files) and descriptions of the document
such as the title. The body section is where the visible
content will be placed in the next step.

<!DOCTYPE html>
<html>
<head>
<title>Zoom</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
<script src=”code.js”></script>
</head>
<body>
</body>
</html>

2. Body content
The content placed inside the document body is what
will become visible to the user. Our example consists of
two buttons for zooming in and out, along with the article
frame and its zoomable section. All controllable elements
are assigned an ID that will be used for referencing them
via JavaScript and CSS where necessary.

<button id=”zoomOut”>-</button>
<button id=”zoomIn”>+</button>
<article>
<section id=”box”>
<p>Content can be inserted too!</p>
</section>
</article>

3. Initiate the styling
With the HTML content now complete, it’s time to create
a new file called ‘styles.css’, which is loaded into the
document from the HTML head section. This file is used
to define the visual presentation rules for the page. We
start these definitions with the rule to make sure that the
HTML document and its body are presented to cover
the full screen.

html,
body {

Hidden Extras

Use the ability to zoom and scroll content to
reveal additional information or simply to expand
upon available navigation options.

24___________________________________________________________________ lightbox

}

4. Article container
The article container is used as a visible ‘viewport’,
enabling us to set the width, height and position of the
zoomable content. We use the ‘vw’ and ‘vh’ unit
measurements to set their size in relation to the user
screen width and height. A margin is also used to
centrally position the article container, while overflow is
set to allow for content scrolling.

article{
display: block;
width: 50vw;
height: 75vh;
margin: 0 auto 0 auto;
overflow: auto;
}

5. Content box
The element assigned with an ID of ‘box’ is where the
zooming functionality will take place. The zoom is made
from using the transform property’s scale attribute – set
to 1 by default for full size. A background image is set,
although you could use imagery and absolute positioned
elements as an alternative to this. The animated zoom
is activated via the transition property – set for all
elements to ease out the transition between changes for
a set period of time.

#box{
display: block;
transform: scale(1);
transition: all .2s ease-in-out;
padding: 10em;
text-align: center;
background: url(image.jpg);
background-size: 100% 100%;
width: 100%;
height: 100%;
}

6. JavaScript initiation
With all of the presentation rules now complete, the
last part is to define the responses to user interface
navigation. This is achieved through JavaScript, so

create a new file called ‘code.js’. Start this file with code
specifying an instruction to ‘wait until the page has
loaded’. In here, we start with defining the ‘zoom’ and
‘zoomStep’ values that will be used to control the
zooming speed and presentation.

window.addEventListener(“load”, function()
{
var zoom = 1;
var zoomStep = 0.2;
*** STEP 7
});

7. Zoom controls
The last step is to write the event listener code for the
zoom buttons identified with IDs of ‘zoomIn’ and
‘zoomOut’ in the HTML. These event listeners will update
the ‘zoom’ variables defined in step 6 and apply them to
the CSS-style attribute of the zoom box. The ‘zoomStep’
variable is used as part of this update calculation,
meaning you can easily change the zoom speed by
changing this value from step 6 to a different value.

document.getElementById(“zoomIn”).addEvent
Listener(“click”,function(){
zoom += zoomStep;
document.getElementById(“box”).style.
transform = “scale(“+zoom+”)”;
});
document.getElementById(“zoomOut”).addEven
tListener(“click”,function(){
if(zoom > zoomStep){
zoom -= zoomStep;
document.getElementById(“box”).style.
transform = “scale(“+zoom+”)”;
}
});

NEW YORK 27-28 APRIL 2017
14 talks, 4 workshops, 2 amazing days: learn about practical
frontend solutions, design systems, the future of the web & more!

SARA SOUEIDAN

JENNIFER BROOK

PETER SMART

CATT SMALL

www.sarasoueidan.com

www.jenniferbrook.co

www.petesmart.co.uk

www.cattsmall.com

FREELANCE FRONTEND
WEB DEVELOPER

LEAD DESIGN RESEARCHER,
DROPBOX

HEAD OF UX AND PRODUCT
STRATEGY, FANTASY

PRODUCT DESIGNER,
ETSY

TICKETS ON SALE NOW

www.generateconf.com

The

magic
of
stories
Drink in the 3D fairytale world of Campo alle Comete
brought to life by Italian digital artisans AQuest

W

here’s the wine? After a cursory glance at the Campo alle Comete site
you may be wondering exactly what we are talking about. Campo alle
Comete is an enchanted 3D world filled with sea, cypresses and
perfectly matched sounds. The soothing soundtrack and subtle
swaying animations mesmerise the viewer and compel them to
explore deeper into the fairytale dimension that lies before them. The viewer will still be
wondering what lies ahead, but they will not be able to resist the urge to do as they are
told and ‘Drag to Discover’.
Capturing a viewer’s attention is a key component in the process of getting them to
stay and explore further. And this is exactly what Nicoletta Ceccoli’s illustrations do. They
enchant, they enthrall and they engage. Like the beginning of any good story, first
impressions count and the 3D environment of the homepage is hard to resist.

26_____________________________________________________________ design diary

THE MAGIC OF STORIES

PROJECT

CAMPO ALLE
COMETE
WEB
CAMPOALLECOMETE.IT/#!/EN

AGENCY
AQUEST

WEB
AQUEST.IT/EN

PROJECT
DURATION
4 MONTHS

design diary _____________________________________________________________ 27

GOING FROM 2D TO 3D
A client with a new brand of wine says hello. They
want you to bring their brand to the masses. What do
you do? First you ask the client what they want and
then you tell them what you can do. From here the
ideas start to flow, and from the ideas come a
concept. 3D artist Michele Resenterra reveals a little
more of what the client wanted and how the initial
ideas developed. “The client wanted to use Nicoletta
Ceccoli’s 2D illustration, representing the winery. We
understood immediately that if we wanted to make

The website’s design
used a 2D illustration
by talented artist
Nicoletta Ceccoli

28_______________________________________________________________ dessign diary

the project more interesting, we had to do something
more and be brave. The tough part was analysing the
illustration: we fractionated and studied it to be able
to duplicate it. Turning from 2D to 3D means to
re-create some non-existent parts. We also studied
the texture and the light, since they had to be very
coherent with the original one. This illustration
became then a 3D model and the navigation
experience needed to be playful, keeping the
e of the brand itself
itself.”
dreamy and magical atmosphere

Now the user has been tempted it’s time to move into the next phase. Still no sign of
any wine, but users can explore the 3D world and drink in the beauty of everything that
lies in front of them. Super smooth animation and natural movement may seem simple,
g and the whole experience starts to head south and disappointment
but get it wrong
soon sets in. No
o such problem here, as perfectly timed and fluid animations ensure that
o go where they need to go. Small, pulsating circles are scattered across
the user gets to
the 3D landscap
pe calling to the user to investigate. A click and a swoosh and finally the
its real self. We told you there would be wine, in fact some very
story starts to reveal
r
good wine.
The brains behind the build are Italian agency AQuest, based in beautiful Verona, the
home of Shakespeare’s Romeo and Juliet. Famed for its beautiful architecture and
ne is in the DNA of the country. When the opportunity to work with a new
rolling hills, win
brand came calling, art director and graphic designer Fabio Minerva knew it would be
hard to resist. So
S the agency didn’t, as Minerva reveals, “We’ve always been very keen
on working on a project related to the wine sector and being able to be somehow
ne is a big deal, not only in Italy, you know? Working on something so
innovative. Win
socially ‘untoucchable’ was challenging. The premises and request, coming also from
e to try something new. The audience is quite used to ‘plain’, old-school
our client, were
communication
n when it comes to wine and we wanted to blow the dust off of it. Since

THE MAGIC OF STORIES

Communication with the
client was important in
order to effectively grasp
their brand identity

the brand is new too, we could have more freedom and be even more creative.
Moreover, the client is a true art lover, so we could really dare this time!”
The anticipation of a new project brings excitement and creativity comes to the fore.
The team can immediately start visualising what they could do with a project, but
before this happens AQuest need to talk to the other party involved. They can provide
the initial brief before it is time to start communicating on the next level. Project
manager Valentina Papisca suggests it is a “very delicate and intense moment, during
which the two parties need to communicate a lot.” How do they communicate and how
is the client involved? “Emails and Skype calls were scheduled on a regular basis. We
really needed to engage the client in the process, in order to share with us the real
brand identity. We then worked on it and kinda redesigned it for the web.
“In this project, talking to the client and involving them in our brainstorming was
very important for us, because it’s the best way to understand if we were on the same
page. Therefore we could trust each other and sharing ideas was very easy for both of
us. It’s an unconventional project and working closely with the client was the best
choice to feel free and confident.”
Getting visual is when a project really starts to take off. With a concept in hand it’s
time to make the magic happen, but cracking open Photoshop and Illustrator and
starting to design ad hoc only adds hours to a schedule. As art director and

THE TEAM

Alessandro
Franceschini

Daniele
Pelagatti

Elettra
Zuanazzi

Fabio
Merlin

SOUND
DESIGNER

MONOGRID
FOUNDER

SOCIAL MEDIA &
COPYWRITER
ER

CEO & CREATIVE
DIRECTOR

Michele
Resenterra

Valentina
Papisca

Fabio
a
Minerva

VIDEO
MAKER

PROJECT &
ACCT. MANAGER

ART DIRECTO
OR /
NER
UI/UX DESIGN

design diary _____________________________________________________________ 29

THE MAGIC OF STORIES

GETTING READY
TO LAUNCH
With a masterpiece in hand now is the time to let the masses get a
glimpse of all the months of hard work. As soon as a site hits the
live web everyone will be able to see it and make their own
judgment. How will the site be perceived? How will it be
publicised? Project manager Valentina Papisca gives an insight
into how AQuest dealt with the launch phase: “Feedbacks luckily
were very positive: the project’s been in the spotlight from the
go-live. We are very confident about our adherence to the initial
requests and expectations, having found time after time the best
solution for every problem. And more: the website features and
the consequent word-of-mouth have positively impacted on the
brand awareness and memorability. Campo alle Comete has a
huge marketing and communicative potential; this website could
represent a perfect touch point for a number of possible Adv/PR
initiatives. Guess what? We’ve got a ccouple of interesting ideas
about that, who knows…”

graphic designer Minerva explains, “The major challenge was figuring out a design
able to create a coherent connection between the website’s evocative experience and
an intuitive user navigation.” The user is critical in the creation of a design; no-one
wants to see a beautiful site blighted by an atrocious navigation experience.
“When you start from
scratch like this, this
feeling is both
comforting and
stimulating. At first, we
focused on the proper
navigation approach to
show this amazing world,
finding the proper place
and position for the
product. From here we
had the idea to include the bottles in a 3D model (actually, now some 3D elements
are printed on the ‘real’ wine bottles’ labels), giving the opportunity to explore the
characteristics of every single wine.”
As is often the case, agencies team up to bring other talents to the table to help
get a project finished. For Campo alle Comete, creators AQuest collaborated with
Monogrid, a multidisciplinary creative studio based in Florence, Italy. They handled

We truly believe
that for us a project
doesn’t end once
online: here its own
journey starts

www.brand-design.dk

30 ____________________________________________________________ design diary

the back-end duties for the pro
But, as founder Dani
gatti reveals,
T site is completely
n
it wasn’t as complex as expected: “T
naged through
a simple JSON configuration system, he
no complex b ck-end system
was used at all. The biggest challenge from t d
ent point of view
was to make sure the site falls back graciously on many browsers as possible,
and of course to optimise the experience to be smooth and pleasant on a
multitude of hardware platforms.”
With all the core components in place it’s ready, steady, go, full steam
ahead. First up is the launch phase (see Getting Ready to Launch above),
but an agency’s involvement in a project rarely ends here. Analysing how a
site is performing is one process that an agency needs to be involved in. They
can’t just brush off any issues and run away, they still need to be in contact
with the client as Minerva explains, “After the go-live, collecting data and
understanding the user’s behaviours are critical steps. From the client
perspective, the need to revise and analyse the project is very common.
Indeed, we truly believe that for us a project doesn’t end once online: here
its own journey starts and all the unlimited possibilities for changing and
evolving come along the way. I want to underline this concept because
AQuest isn’t just a well-known digital creative agency: our team is strongly
data-oriented. Uncommon? Weird? It probably is, but we have to match
creativity with strategy to consider a task really complete.”

SITE HIGHLIGHT

“The most important
t
feature
f t
off a website
b it iis the
he discovery
feeling, the way a user can browse and explorre.
In order to understand the vision about this project,
oject you
have to pay close attention to the point of view we’ve
chosen to describe the Campo alle Comete brand.
It’s not just about showing what the company produces,
but mostly sharing the feelings and sensations that make
this website unexpected and peculiar.”
Fabio Minerva – Art director and graphic designer

The magical site takes
you to another world
as you navigate the
dream-like 3D landscape

design diary ______________________________________________________________ 31

TRY 5
ISSUES
SAVE
UP TO

83%
Never miss an issue
LVVXHVD\HDUDQG\RX·OOEHVXUH
to get every one

Delivered to your home
)UHHGHOLYHU\RIHYHU\LVVXHGLUHFW
to your doorstep

Get the biggest savings
*HW\RXUIDYRXULWHPDJD]LQHIRU
OHVVE\RUGHULQJGLUHFW

Simply visit www.imaginesubs.co.uk/SPRING171

Hotline 0844 856 0644

Choose from our
best-selling magazines
SAVE
82%

Games TM

SAVE
76%

How It Works
SAVE
80%

Digital Photographer

SAVE
80%

All About History
SAVE
80%

Retro Gamer

SAVE
80%

World of Animals

See our entire range online
www.imaginesubs.co.uk/SPRING171
7HUPVDQGFRQGLWLRQV7KLVRIIHUHQWLWOHVQHZ8.’LUHFW’HELWVXEVFULEHUVWRUHFHLYHWKHLUÀUVWLVVXHVIRU…$IWHUWKHVHLVVXHVVWDQGDUGSULFLQJZLOODSSO\
1HZVXEVFULSWLRQVZLOOVWDUWZLWKWKHQH[WDYDLODEOHLVVXH2IIHUFRGH635,1*PXVWEHTXRWHGWRUHFHLYHWKLVVSHFLDOVXEVFULSWLRQSULFH’HWDLOVRIWKH’LUHFW
‘HELWJXDUDQWHHDYDLODEOHXSRQUHTXHVW7KLVRIIHUH[SLUHVst0D\&DOOVZLOOFRVWSSHUPLQXWHSOXV\RXUWHOHSKRQHFRPSDQ\·VDFFHVVFKDUJH

2))(5
(1’6
31ST MAY
2017

KNOW THY USER
At Greenwood Campbell full service really means full service, with their mantra of ‘Know Thy User’ for every piece of work. Able
to command today’s digital marketing landscape, they decode user interactions and create new, rich environments
reenwood Campbell (formally
IADigital) was launched as a
two-man bedroom business
focused on .NET development.
The two founders, Adam
Greenwood and Ian Campbell,
started the agency in 2009, having previously
worked together at a software company.
Here they worked on some amazing projects
together, but felt that they could do it better on their
own. They began creating their secret business plan
behind the scenes – which had to be quickly sped
up when Adam managed to get both of them fired
by accidentally emailing their boss their personal
agency start-up plans!

34 _________________________________________________________________pro file

The next day they managed to convince one
client to make the jump across and put their trust in
Ian and Adam, and IADigital was born – this client
still works with Greenwood Campbell to this day.
Individually, Adam started his career selling
aviation spares for over ten years before moving
into an IT role. It was here that he designed the
architecture of a bespoke ERP system, which was
rolled out across all of their international offices –
the start of building digital solutions.
Ian has a degree from Bournemouth University
in Computing. He started out as a software engineer
and support technician, gradually working up to
digital project manager before launching
Greenwood Campbell.

On their first day in business, Adam and Ian
agreed to shake hands every morning and every
evening – showing the beginning and end of their
working day. This would define their switch from
business partners to roommates. To this day this
tradition remains.
All 41 members of the team shake hands with
each person at the start and end of each day,
ensuring everyone spends a bit of time connecting
to one another – it’s where Greenwood Campbell’s
‘digital traditionalism’ was born.
“In 2015, IADigital rebranded to Greenwood
Campbell – in six short years we had grown from a
‘tech house’ into a full-service digital agency and a
new name, brand, website and ethos was required,”

who Greenwood Campbell
what Digital strategy, user experience
(UX), digital design, mobile design, digital
marketing, information architecture,
front-end development, .NET
development, web analytics
where Granville Chambers, 21 Richmond
Hill, Bournemouth, Dorset BH2 6BJ
web greenwoodcampbell.com

key clients
Dixons Carphone
s
LV=
s
Ramsay Health Care
s
Prostate Cancer UK
s
VisitScotland

The mantra of Know Thy User
is communicated loudly and
clearly across Greenwood
Campbell’s office

pro file_________________________________________________________________ 35

said Adam. “At this stage we emphasised our unique
approach to delivering award-winning digital work:
our ‘Know Thy User’ ethos. We don’t put pen to
paper or finger to keyboard until we truly
understand our customers and their users. Users
are at the heart of everything we do and we have
developed our deliverer process around this over
the last ten years.”
Some agencies spend a great deal of time
deciding a name, but for Greenwood Campbell this
wasn’t something they agonised over. “It does have
a big impact – we came up with a shortlist of around
ten names including things such as Surf Digital and
Coast Digital. We then spent the day trying to find
whether the domain was available based on these
ten. We had settled on AIDigital but the domain
wasn’t available so we switched it and became
IADigital – so I suppose the domain came first!”
Ian continued: “When we rebranded to
Greenwood Campbell we once again checked all of
the URLs starting with .com, co.uk then .net. We
were lucky to change to a unique name and all be
available – both agency name and the URL are just
as important. You want to be unique but you also
need to be found.”
The rebranding of the agency was also a great
opportunity for them to overhaul their presence on

INDUSTRY INSIGHT
Adam Greenwood
Co-founder and MD

“I’m incredibly proud of the culture
we have created. I wanted to build
a place that I would want to come
to every morning. As a team we
created our core values and every
one of us personifies them”

36 _________________________________________________________________pro file

No, not Sherlock Holmes’ study, but
one of the meeting rooms that
Greenwood Campbell use

the web. Adam outlined their approach: “A new
website was a huge focus for us when we
rebranded to Greenwood Campbell. Maintaining it
is extremely important – how can we sell digital
solutions if our own website isn’t innovative,
impactful and disruptive?
“It is a big priority for all of our team to keep it up
to date – it is mentioned in the morning stand-up
every day to ensure changes are being made
regularly. We do big updates every three to six
months. Our latest was adding a new ‘build your
team’ feature which follows the user’s journey and
creates the team they would be working with,
based on the services they have looked at. When it
came to the build, we allowed our developers to be
as creative as they liked. We provided no brief. It
simply had to be innovative, use the latest
technology and make an impact. It needed to

encompass our new brand and showcase our team,
work and expertise.”
Adam also said: “We are so proud of what they
created and achieved and it is our biggest asset. The
buzz the site created has been amazing and new
business comes in through people phoning and
saying ‘I love your website, I want to work with you.’
2016 was a fantastic year for the site as we won two
Gold Lovie awards, a Drum Cream award and
another five nominations.”
As a relatively new agency, the founders have
built their business one step at a time, but as Adam
explains, last year saw some changes: “Over the last
couple of years we have built a marketing and sales
team who have focused on building leads through
events and networking. We host on average 20
events a year showcasing our offices, team and skills
to 60-80 attendees. Because of this team, we are

:,17(5·6,17(51$7,21$/6&+22/),1′(5
Winter’s approached Greenwood Campbell
to develop an online platform for parents
to find the perfect school for their child
when moving abroad. The vision was an
end-to-end online subscription directory
with an online portal for both schools
and parents – showcasing over 12,000
schools worldwide.
As a newly founded startup, Winter’s
had very specific goals, targets and a
demanding schedule. From concept,
scoping, UX, build, testing and deployment
– the Winter’s team needed to launch the
website within a six-month timeframe.
After researching a number of different
concepts with Winter’s we created a
flexible and clean design system, which
was easy to understand and could
adapt to the startup’s own changing
business requirements.
We created a unique custom-built map
using Google with geospatial distance
and area calculations, enabling parents to
search for English-speaking schools based
on location. Results are ordered by

wintersschoolfinder.com

distance from the centre of the area in
view, all performed dynamically as the
visitor moves the map.
Parents are also able to create a
portfolio for their child, allowing them to
specify unique skills and interests such as
favourite sport, offering personalised
criteria search results. Meanwhile,
subscribing school members are able to
manage, edit and customise their own
profile – providing two different user
journeys within the unique site.
Schools are also able to manage
everything about their profile on the site,
simply adding videos, images,
prospectuses and student availability.
The Winter’s team manage the entire
site with an easy-to-use open source
content management system, which
also provides management information
and reports.
The innovative creation launched with
brilliant feedback from users and resulted
in interest from investors and expansion of
the business into Asia.

now becoming very well-known due to our
marketing communications, events and award wins,
which are now resulting in work coming directly to
us, rather than us having to attract it.”
It’s often the case that an agency will become
known in the marketplace for a piece of groundbreaking work. The danger then is that they are
asked to simply repeat that kind of work for new
clients. Greenwood Campbell have actively ensured
they have a diverse skill set that they bring to each
piece of unique work. Adam outlined the ethos
within the agency:
“Our latest work with The Training Room
showcases how we have developed as an agency –
it is a project which included all of our services
including build, design, UX, strategy and digital
marketing. This is a great achievement for us to
move from a purely .NET tech house, to being able
to undertake a project of this size.
“Using the latest version of Kentico CMS, we
provided a platform with a user-friendly CMS,
combining e-commerce functionalities with a
two-way integration with Salesforce. We carried
out extensive scoping workshops and UX
research – talking to students within the industries
about exactly what they require when searching
for courses.
“From this we created a user-focused sleep design
with easy navigation to specific courses featuring a

pro file_________________________________________________________________ 37

*5((1:22’&$03%(//
With the recent repositioning, restructure and
agency rebrand, the Greenwood Campbell
website needed to not only emphasise
Greenwood Campbell’s new identity but also
put us on the map as a highly skilled and
vibrant agency.
The objective of the website was to be a
skilled and engaging experience, encouraging
new client opportunities and growth – which as
a result increased brand awareness, traffic and
engagement with the new Greenwood
Campbell brand.
The site features a virtual tour of the
Greenwood Campbell studio, providing a fully
immersive and engaging user experience while
showcasing the culture, team and ethos of the
agency. It boasts rich media, high-quality
imagery and imaginative content, targeting
leading brand marketers and business owners.
Personalisation makes this site really special,
tracking user behaviour and adapting the
experience to the user’s specific objectives. As
the marketer navigates throughout our
services, a team of employees would be
working with builds in the background based

sidebar menu, live chat and enquiry form. We also
integrated a personalised student log-in area for
those already training. We added personalisation
into the site based on the user identity – beautician,
personal trainer or IT expert. Greenwood Campbell
increased the use of all of The Training Room’s
organic channels including Facebook, Twitter,
Pinterest and Instagram. We merged the 30+
location-based profiles on Facebook that existed
into one leading account.”
Adam concluded: “We created user-focused
content for these accounts including blog posts,
video content and one-off campaigns including
quizzes and competitions, all focused on a variety
of courses, no longer preferential to personal
training. This has been supported by paid social
ads driven with content-based themes across all
platforms. We also rebranded their imagery, logo
and design to a more modern visual approach to

greenwoodcampbell.com

on what services they viewed, which is then
showcased to them at the end of their journey.
The Greenwood Campbell website has
become a real talking point amongst clients,
peers and prospects. In the ten months post
launch, site traffic increased by 309 per
cent and average time spent increased by 76
per cent. Our bounce rate decreased by 83 per
cent implying our visitors are more engaged.
The Greenwood Campbell site has been
recognised in the Awwwards and CSS Design
Awards as their ‘Site of the Day’ averaging
g
a 7.66 score, judged by leading designerss

and developers across the world and totalling
over 100,000 views.
The Greenwood Campbell website has won
five international awards including two Gold
Lovie Awards – the highest accolade in digital
within Europe, against 1,500 entries across 40
countries. It has also been named The Drum
Cream Awards Silver Winner, the Awwwards
and CSS Design Awards Site of the Day, and
has been named a finalist in a further five
national awards including with Wirehive 100,
The UK Agen
Agency Awards and The
Digital Entre
epreneur Awards.

boost engagement with the young audience
and support the move to a multi-sector provider.”
Such a diverse range of clients means
approaching work from unique perspectives, and
Ian explained how they approach the astonishing
work they produce: “When working on a large-scale
project, the timeline will vary according to the
number of third-party integrations and the level of
any technicalities within the scope of the work, as
well as whether there is any UX or digital marketing
input required as part of the scope of work.
“The project team will change depending on the
requirements from the client, however the core team
members will always include the account manager,
who is the face of the client within the agency
and will be an escalation point for the client should
this be required. They will also be the main contact
point for financials on a project, and for discussing
future work.

“A project manager will control the scope, budget,
timescales and quality of a project, and will also
manage resources internally within the agency.
Project managers will also be the day-to-day contact
for clients to discuss aspects of the project. A
business analyst will expand on the brief received
from the client, and will be responsible for
strategising with the client, confirming the scope and
requirements of the project, as well as setting the
success criteria for the project.
“And the Development team will comprise of the
necessary resources to fit with the requirements of
the project, and can be scalable based on timescales
on the project. It would typically consist of two
back-end developers, one front-end developer, one
designer, one user-experience consultant, one digital
marketing expert and one quality assurance analyst,
who is responsible for internal testing and useracceptance testing triage and liaison.”

TIMELINE
Year

Year

Year

Year

Year

2009

2011

2011

2013

2015

No. of employees

No. of employees

No. of employees

No. of employees

No. of employees

2

3

3

10

24

Founded by Adam
Greenwood and Ian
Campbell, originally
as IADigital.

The two founders
move out of the back
bedroom and into
their first office.

Greenwood
Campbell secures
Dixons Carphone as
first big-brand client.

Greenwood
Campbell have a rapid
expansion, moving to
their second office.

The agency hits a
major milestone with
£1m turnover and
moves to third office.

38 _________________________________________________________________pro file

Adam also said: “For some of our clients, where
there is more of a digital marketing focus, additional
resources may be utilised, which can include
content, PPC and SEO. We can (and have) also
included video within our websites where required.
We have been known to shoot campaigns and
footage to be included both online and on social
media. In terms of the elements of a project, it is
usually broken into planning, scoping design and UX,
build, internal testing, user-acceptance testing and
finally the site launch.”
Greenwood Campbell offer a range of services,
which has meant becoming adept at developing a
wide skill set. Marek Miś, Head of Creative, outlined
the tools the agency currently use: “We use Adobe
for anything creative and .NET for build. Also UXPin,
Hub Planner, VSO and Basecamp. It’s great that
there are lots of new frameworks and technologies
which we can experiment with – there is always
something new. I think this will continue to evolve to
include new hardware interfaces such as VR,
holograms or sensors built into smartphones to
keep up with the latest inventions.”
Marek continued: “At Greenwood Campbell rather
than developing native apps, which we feel are
becoming less popular, we build responsive websites
and web apps. However, we have lots of experience
in building responsive websites. Now, being able to
harness the advantages of Progressive Web App
features gives us the opportunity to develop an
app experience.
“We are playing around internally at the moment
to be able to potentially offer this as a service. As
well as this, server-side JavaScript, Node.js and

Creating a fun atmosphere has been
one of the key drivers the founders
have strived to maintain as the
agency has grown

INDUSTRY INSIGHT
Ian Campbell
Co-founder and technical director

“Our latest work with The Training
Room showcases how we have
developed as an agency – it is a
project which included all of our
services including build, design,
UX, strategy and digital marketing.
This is a great achievement for us
to move from a purely .NET tech
house, to being able to undertake a
project of this size”

Year

Year

Year

Year

2015

2015

2016

2016

No. of employees

No. of employees

No. of employees

No. of employees

24

24

41

43

In order to move
into new territories,
a rebranding
was in order.

Greenwood Campbell wins their
first major UX project working with
LV= for a new service they built in
just six weeks.

Further expansion
sees the opening of an
office in London’s
Chancery Lane.

Lovie award
winners, Drum award
winners & 12 further
nominations.

pro file_________________________________________________________________ 39

$*(1&<%5($.’2:1
)281′(56

OTHER

1 x Managing director
1 x Technical director

1 x Marketing Director
1 x Marketing Manager
1 x Marketing Executive
1 x New Business Director
1 x Head of Customer
Engagement
1 x Financial Controller
1 x Accounts Assistant
1 x Head of Talent
1 x Videographer
1 x Executive Assistant

‘(9(/230(17
7($0

1 x Development Director
1 x Digital Architect
2 x Senior Developers
1 x Creative Developer
1 x Front End Dev
1 x Mid-weight Developer
1 x Junior Developer
8 x Support Developers
1 x UX Practitioner
1 x Designer

‘,*,7$/
0$5.(7,1*
7($0

&/,(17
6(59,&(6

1 x Account Director
1 x Account Manager
1 x Senior Account Executive
2 x Account Executive
2 x Senior Project Managers
1 x Project Manager
1 x Project Executive

1 x Senior Digital
Marketing Manager
1 x Senior Digital
Marketing Executive
2 x Digital Marketing
Executive
socket.io in combination with Firebase or Heroku as
a dev environment is grabbing our attention due to
their ease of use for newbies in back end. We see a
future in crossing the disciplines and using skills
across both, giving the opportunity to deliver
real-time advances and reach user experience. Also,
push notifications are the new kid on the block in
marketing channels. They are now available in
browsers, not only native apps, and the possibilities
are endless!“
The use of social
media within a client
brief, and also as a
key marketing tool
for any agency are
now core across
digital marketing. “Social media adds a ‘human’
element to a brand identity which isn’t available on a
website,” said Ian. “A contact form on a website
doesn’t feel as responsive as a Facebook message
or a tweet. You can be reactive and personable,
create a voice and adjust your marketing strategies
quickly when required. All things not possible on a
website.
“Our main aim is to create shareable content
directing straight to the site – you can reach a huge
number of people without paying a penny. Social
media gives the opportunity to target your desired
audience – particularly in B2C markets where targets

are based on ‘interests’. Tools like Facebook have
provided access to this which was never possible
before, allowing websites to go straight to the
person they want, without the individual searching
for the company.”
An agency is effectively only as good as the
people it employs. What qualities do you look for in
a prospective employee and what advice would you
give to anyone looking to take a step into the
industry? Adam
explained: “We’re big
believers of ‘you can
train skills but you
can’t train attitude’ at
Greenwood
Campbell. Creativity,
hustle and passion should come naturally along with
genuine excitement towards the digital industry and
where it’s headed.
“We’re really proud of the culture we’ve created
and want to make sure that whoever we bring in to
join us, they embody it, integrate with ease and
bring their own uniqueness. So, for anyone looking
to join an agency, do your research and be yourself!
Company values are a great indication of what it’s
like once you’re in. Ours are ‘Friendly, Awesome,
Hard Working, Fun, Loyal and Team Working’ and
were all created by the people that work here. Most
companies will hire someone they like providing

´:HGRQ·WSXWSHQWR
SDSHUXQWLOZHWUXO\
XQGHUVWDQGRXUFXVWRPHUV
DQGWKHLUXVHUVµ

Marek Miś, Head of Creative, Greenwood Campbell

40_________________________________________________________________pro file

/9 48,&.&29(5
JUHHQZRRGFDPSEHOOFRP
Founders
Adam Greenwood &
Ian Campbell
Year founded
2009
Current employees
43
Location
Bournemouth + London
Services
Design & build
Support & hosting
Digital strategy
Digital marketing
User experience
they are at least 80 per cent there. Especially
y those
that dedicate time to training and developing
g their
staff, like us.”
And what does the future hold for Greenw
wood
Campbell? “Our biggest thing is growth – by 2020
we aim to have a £10m turnover, 120 staff across
five offices in three continents,” said Adam. “In
addition to that we want Greenwood Campb
bell to
be regarded as the best agency in the UK baased
on respect, reputation and award-winning wo
ork.
Ambitious – yes. Achievable – absolutely.
“We have some exciting projects coming up
u
this year focused on developing more of ourr
Know Thy User project approach. We’re also
o
experimenting with VR integration with our
website and some wearables. We’re excited tto
monitor how the artificial intelligence and the
e
Internet of Things will develop in 2017.”
Clearly for Greenwood Campbell the futurre is
bright, as they expand their sphere of influen
nce
across even more of the digital marketing
landscape. Brands understand they need to make
unique and personal connections with their
customers. Agencies that place their customer
understanding first, seeking to uncover whatt
motivates them and then have the ability to craft
will be
digital experiences that hold their attention, w
gly
able to showcase their talents with increasing
daring work.

lv.com

LV= wanted to test whether their customers
would purchase life insurance via a mobile
device. From kick-off to completion including
user research, designs, testing and prototype
presentation, the project needed to be
completed within a six-week timeframe.
With a pure focus on UX, the project outline
was to design, develop and test a series of
prototypes for LV= customers. The challenge
was to produce a mobile experience, which
acted and behaved as a native mobile app. In
order to optimise the conversion rate, we
needed to streamline the number of steps
involved in purchasing life insurance, while
keeping UX at the heart of the project.
The project consisted of four key stages
– wireframes, design, HTML and testing. Our
understanding of the psychology of users
meant we knew certain elements were
pivotal to the project’s success: understanding
of the content, feeling and security and
reasons for purchase.
From this our specialist CE and UX teams
created three functional mobile prototypes for
‘Quick Cover’ life insurance. Once the
prototypes were built we focused on Real
World User testing,
g, looking
g at the number of
stages the customer would need to pass
through, their questions and response paths,
whilst also tracking eye and finger movement.
Greenwood Campbell then analysed
hundreds of user comments and reactions,
going onto quantify this into hard data. We
then used the data to make consumerled recommendations to optimise

the final product. The project combined key
elements of UX, an understanding of user
behaviour, plus the development of creative
and technical solutions.
We completed 70 tests with 35 unique
users and analysed 497 comments. We
provided a negative vs positive breakdown
on each prototype, which were then broken
down across key features.
While LV= initially approached us with an
ad hoc, prototyping project, Greenwood
Campbell provided a total mobile offering.
Throughout the development we advised
on other elements which pushed the
boundaries of the LV= brand with a softer
tone of voice, playful copy, alternative icons
and imagery within the prototypes.
The findings showed a higher conversion
rate for the second prototype, which 50 per
cent of users selected, and the number of
people willing to purchase life insurance
on a device rose from 15 per cent to 40
per cent. Critically, the project highlighted
that from those users who were tested,
100 per cent of them stated that they
would purchase life insurance via the web
app
pp consistently.
consis
y.

pro file__________________________________________________________________ 41

PRO TOOLS
YOUR ESSENTIAL COLLECTION
FOR BETTER BUILDS

42 ______________________________________________________ feature

50 HTML, CSS & JS PRO TOOLS

JAVASCRIPT TOOLS

ESSENTIAL DEVELOPMENT NEEDS CATERED FOR

“EASY TO LEARN, USE AND TEACH.
WITHOUT QUESTION, THE BIGGEST
IMPROVEMENT TO MY TEAM’S
DEVELOPMENT WORKFLOW AND SPEED
HAS BEEN BRINGING NPM INTO THE FOLD”
Matt Leach
Head of Development
thinkingjuice.co.uk

NPM

REACT.JS

npmjs.com

facebook.github.io/react

npm makes it simple for developers to share and reuse code, and it makes it
easy to update the code that’s being shared. npm is one of the most powerful,
feature-rich package managers around. Find, share, distribute and reuse
code packages from thousands of developers, all from a terminal window.
npm is distributed with Node.js by default, which means that when Node.js
is downloaded, npm gets installed automatically on the development
environment. npm makes it possible for digital teams to draw on the
expertise of experts that have developed solutions to specific problems.

React is a UI library developed by Facebook to facilitate the creation of
interactive and reusable UI components. It runs on the client side as well as the
server side, working together in unison. React utilises the concept Virtual
DOM, which selectively renders subtrees of nodes based upon state changes.
It does the least amount of DOM manipulation possible in order to keep
components up to date. It works great for teams, strongly enforcing UI and
workflow patterns. It’s very young in comparison to other libraries, but with a
strong commercial backing, it’s worth the time investment.

THE MOST POWERFUL JS PACKAGE MANAGER, PERIOD

THE FLEXIBLE JS LIBRARY FOR BUILDING USER INTERFACES

CHROME CANARY DEVTOOLS

GULP

gulpjs.com

jslint.com

Debugging JavaScript consumes valuable time,
can often be frustrating, and usually results in the
realisation that there is one ‘school boy’ error!
Google Chrome’s extensive developer tools have
grown in line with the demands of web
technology, and the JavaScript debugger
exemplifies this. Code is halted during execution
and all the values of every variable available are
listed, then diagnosed swiftly and efficiently.

Gulp should be embodied into development
workflows of any size. It’s a programmer’s dream
toolkit for automating all the painful and
time-consuming tasks in a development workflow.
Minification and code validation alone makes
Gulp the first step for any new development
project. It might look daunting at first to those
uncomfortable in terminal, but will save plenty of
time over multiple projects.

JavaScript has developed into more than a nursling
language to replace bloated Java tasks on the web.
It’s now used to power large and complex projects,
and it is even more essential that positive coding
practices are honoured. JSLint helps developers
program to a better quality, without getting in the
way of creative coding. It finds everything from
syntax errors to application-breaking mistakes,
informing developers of what needs fixing.

developers.google.com/web/tools/chrome-devtools

FINGERPRINTJS2

JSLINT

github.com/Valve/fingerprintjs

jscompress.com

JSCOMPRESS

SCRIPTSRC

SLICK.JS

JS-COOKIE

Knowing users is vital for
any web build. Fingerprintjs2
is a lightweight library,
providing the process of
gathering any data visible
from a web browser.

Command-line tools can be
too intimidating for some.
JSCompress is the easiest
way of minifying JavaScript
code and making it ready for
use in production.

Stop searching the web for
the latest and greatest
hosted JavaScript libraries,
as ScriptSrc has collated
them all into one must-bebookmarked webpage.

Responsive, scalable and
simple to use. Carousels and
sliders are now expected
behaviour of almost any site.
Slick.js is the most effective
jQuery solution there is.

Setting web cookies couldn’t
get easier. JS-Cookie is
supported in all browsers,
and is lightweight and simple
to use. It also supports JSON,
PHP and Tomcat.

scriptsrc.net

kenwheeler.github.io/slick

github.com/js-cookie/js-cookie

feature ______________________________________________________ 43

50 HTML, CSS & JS PRO TOOLS

HTML TOOLS

WHEN IT’S TIME TO BUILD, THIS COLLECTION IS JUST WHAT YOU NEED

EMMET.IO
emmet.io

THE ESSENTIAL TOOLKIT
FOR WEB DEVELOPERS
Most text editors allow the re-use of frequently
used code snippets. While snippets are a great way
to speed up development, all implementations
have common issues. Emmet takes the snippets
concept to a whole new level. Dynamically parsed
CSS-like expressions can be input, which produces
an output depending on what is typed. Emmet is
developed and optimised for web developers, but
can be used with many programming languages.

04. Groups, siblings
and descendants

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title></title>
</head>
<body>
</body>
</html>

With the Boolean operator we can generate child
elements, for example ‘div>p’ would create a p tag inside a
div. The plus symbol allows us to make siblings, for
example, using the command ‘header+footer’. We can use
brackets to group elements, so combined with the above,
the command ‘body>(header+(footer>p.paragraph))’
would generate the below code:

01. Create elements

03. Multiplication

Emmet is a plugin for a wide range of text editors like Atom
and Sublime Text that allows developers to save time
writing HTML. It’s great if you need to, for example, create
a div with a class, using the command ‘div.classname’.

Emmet is immensely useful for writing repeatable blocks
of code. With the command ‘ul>li*5’ we can generate a ul
element, with 5 li children. We can even number our
blocks from 1 through 5 by using ‘ul>li.$*5’.

<div class=”className”></div>

02. Create a document
The ‘html’ command enables us to create the boilerplate
markup for any new HTML file, including head and body
tags and a title. We can even specify the version we want
to use with a colon e.g. ‘html:5’.

<ul>
<li class=”1”></li>
<li class=”2”></li>
<li class=”3”></li>
<li class=”4”></li>
<li class=”5”></li>
</ul>

<body>
<header></header>
<footer>
<p class=”paragraph”></p>
</footer>
</body>

05. Other attributes
In addition to classes we can attach other attributes to
elements with relatively ease. The command ‘p[title=”Hello
world”]’ generates a p tag with a title attribute. We can do
the same for ids, values and data attributes.

<p title=”Hello world”></p>

SUBLIME TEXT

DCODES

SITESUCKER

PAGESPEED TOOLS

FOUNDATION

Sublime is the IDE of choice
for many developers, and
for many good reasons. It
has a fantastic package
manager, and is fully
customisable to behave
exactly how you desire.

A real timesaver! dCodes is a
library of HTML for all the
common elements often
used on a website.
Everything from accordions
and embedding scripts to
buttons and webforms.

This is a Mac-only application
that pulls down a reliable
clone of any crawlable
website. SiteSucker does the
necessary rewrites, which
allows for easy use of the
code locally.

pagespeed

A HTML framework to speed
up the build of beautiful
responsive websites, apps
and emails. It is semantic,
human readable and
customisable. It’s very
designer friendly.

sublimetext.com

dcodes.net

44 ______________________________________________________ feature

ricks-apps.com

developers.google.com/speed/

Google’s PageSpeed Tools
are most effective when
applying finishing touches to
any site. Reports are
detailed, and modules can
make it easy to action upon.

foundation.zurb.com

50 HTML, CSS & JS PRO TOOLS

CHECK YOUR SITE
NO MATTER HOW GOOD YOUR HTML IS,
IT COULD WELL BE BETTER

DIRTY MARKUP
dirtymarkup.com

The perfect solution to inherited code that’s
already compiled, or just plain messy. Dirty
Markup features an easy-to-use interface for
tidying HTML, CSS and JS effortlessly. It features a
well-documented REST API, and some great
third-party apps.

ADOBE EDGE ANIMATE

GOOGLE MOBILE-FRIENDLY TEST

adobe.com/uk/products/edge-animate.html

search.google.com/search-console/mobile-friendly

Knowing if the website meets Google’s criteria for
mobile success is crucial. ‘Mobile first’ is the
primary approach when designing and building
digital applications, and the mobile-friendly test
tool provided by Google makes sure that method
is respected positively.

THE FASTEST AND MOST INTUITIVE
SOFTWARE FOR HTML5 BANNERS
Since HTML5 became the default standard for
digital display advertising, Edge Animate has made
it very accessible for digital production teams to
adopt the standards as efficiently as possible. Edge
Animate is powerful software that enables the
creation of interactive animations for the web. It
also provides the tools for digital publishing and
rich media advertising, supporting desktop and
mobile browsers effortlessly. The UI is very much
in line with PS or Illustrator, and the timeline and
canvas workspace is very beginner friendly.
Edge Animate’s output is generated code using
validated HTML5, JavaScript and CSS. For a
developer, it allows immediate interrogation of the
code itself. For designers, it’s the perfect tool for
building effective animations without spending
time programming. Although Adobe has ceased
direct support of the software, the online
community is vast and there are plenty of tutorials,
sample projects and videos.

W3 MARKUP VALIDATOR
validator.w3.org

“ADOBE EDGE FITS NICELY INTO YOUR WEB
TOOLKIT. IT’S SIMPLE TO USE AND THE
RESULT OF SOME SIMPLE ANIMATIONS
WILL BRING YOUR PROJECTS TO LIFE”
Guy Stradling
Digital Director
thinkingjuice.co.uk

A11Y

MODERNIZR

BLUEGRIFFON

For many web developers,
accessibility is often overlooked.
The A11Y project is a set of
guidelines and resources to help
ensure web developers have the
information as accessibility
friendly as possible.

Modernizr detects the
availability of next-generation
web technologies in a web
user’s browser. This enables
developers to tailor the user’s
experiences based on the actual
capabilities available.

For those that don’t take to
coding as a core skill,
BlueGriffon is a user-friendly,
design-focused software that
outputs validated and tested
HTML. A designer’s tool for
prototyping flat HTML.

a11yproject.com

modernizr.com

A free service used to check the validity of a
production environment. Sites are defined by
technical specifications, which usually include
machine-readable grammar and vocabulary.
Checking against these constraints is called
validation, and this is what this tool does.

bluegriffon.org

GTMETRIX
gtmetrix.com

GTmetrix provides concise insight on how well a
webpage loads and suggests actionable
recommendations. It provides testing from
multiple regions and even useful custom triggers,
making GTmetrix an automated digital marketer!
All in a legible, non-techy format too!

feature ______________________________________________________ 45

50 HTML, CSS & JS PRO TOOLS

CSS TOOLS

GET YOUR STYLING RIGHT WITH THIS COLLECTION

FONT AWESOME
fontawesome.io

If there is ever a need for accessible, clean and
licence-free iconography, Font Awesome has it
covered. Everything provided are scalable
vector icons that can instantly be customised to
almost any project’s needs. This can be
anything from size and colour, to drop shadows
and transforms – anything that can be done
with the power of CSS. The cheatsheet provided
online is a great reference to get started as
quickly as possible!

“SASS ALLOWS DEVELOPERS AND DESIGNERS
TO WRITE THEIR CSS IN A MORE STRUCTURED
WAY AND OFTEN CUT DOWN ON THE LINES OF
CODE WRITTEN. THIS IS GREAT FOR PAGE
PERFORMANCE AND MAINTAINABILITY”

PICNIC CSS
picnicss.com

Picnic CSS is a lightweight and beautiful CSS
library, giving an impressive array of tools
ranging from pop-up modals to button styling.
The main benefit of using Picnic over
alternative frameworks is that it is designed
to be integrated directly into existing projects
easily. Written in SCSS and extendable to
grow with any web build, Picnic CSS is an
impressive yet light offering into the CSS
frameworks available.

CANIUSE
caniuse.com

Without question, this is the most useful tool
available for any experimental front-end
developer that wants to push the thresholds
with CSS. The easy-to-understand interface
gives a very clear answer as to whether a CSS
rule can be used in certain devices and
browsers. CanIUse is vital when addressing
browser support for the latest web techniques,
and should be bookmarked by every designer/
developer working with web technology.

SASS

sass-lang.com

01. Define our colours
We can use variables in Sass like we would in
JavaScript. Once you’ve determined which colours
your project will use, we’ll create variables for each
of them. We define variables with a dollar sign.

02. Creating the map
A Sass map is a lot like an object in JavaScript, or
any other key-value store. It’s very useful for utility
classes like padding, margins, font sizes and so on.
In this instance we’ll be creating colour classes to
style text. The map you’ll see on FileSilo contains
the colours we just defined.

03. The loop
We’re going to loop over our map with an ‘each’
loop, using the key as the class name. For each row
in our map we should end up with a class, for
example ‘colour-sunset-orange’. We could add

LIGHTHOUSE
bit.ly/2mn3Xia

Lighthouse is an automation tool for
improving the quality of built web
apps. Once provided with a URL,
Lighthouse runs a series of tests
against the given URL, then
generates a report on how well that
URL performed. These results are
listed as usable actions to improve
the website.

46 ______________________________________________________ feature

Tim White
Digital Developer
thinkingjuice.co.uk
more rows to our map if we wanted to add
more classes.

04. One step further
Using the Sass ‘darken’ function, we’re going to
modify our loop to create darkened versions of
each colour. Sass also has a ‘lighten’ function
that works in the same way, but for the sake of
this example we’ll keep things simple.

05. Wrap things up
The code we wrote should have generated six
classes, one for each colour and its darkened
version. As you can see, with Sass we can speed
up tasks like defining utility classes and very
quickly assemble the foundation code that makes
up our projects.
GET THE FULL CODE FROM FILESILO.CO.UK

CSS SPECIFICITY
GRAPH GENERATOR
bit.ly/2mmOQ8J

In theory, CSS should increase in
specificity, with things like utility
classes at the start and type selectors
at the end. The Specificity Graph
Generator helps developers identify
which styles need moving down,
aiming for a steady upward curve.

50 HTML, CSS & JS PRO TOOLS

PALETTON

CHROME DEVTOOLS WORKSPACE

paletton.com

THE MOST POWERFUL COLOUR SCHEME DESIGNER
One of the biggest bug bears for any developer
is choosing the right colour palettes. Paletton is
an online tool that provides an easy method for
creating colour combinations and palettes of
colours that work well together. The major
advantage of Paletton is that it doesn’t use the
modern computer RGB colour space, instead

taking advantage of a classical colour wheel and
applying colour theory. When used, it works
within a specially created RYB colour spectrum,
as opposed to what a typical graphics
application uses. The ability to export into
multiple languages and image formats allows for
quick integration with any web project.

bit.ly/2mI5Ybv

More often than not, developers will find
themselves trying new things in web browser
development tools. Workspace is an effective
method to commit any changes made in
real-time. Using the Inspect Element tools to be
instantly reflected back into code can make
some incredible time-savings, all while giving
the perfect visual editing platform.

EASINGS
easings.net

Trying to remember which animation easing
does what can be difficult, but the right one can
produce a killer effect that finishes off projects.
Easings.net has produced a great resource that
provides superbly produced tutorials for every
possible easing there is. With CSS, SASS and JS
snippets, there is no reason to go elsewhere for
easing needs.

GOOGLE FONTS
fonts.google.com

CODEPEN

codepen.io

CODEPEN IS THE SHOWCASE OF BEAUTIFUL CODE
CodePen is a fantastic tool for testing out bugs,
collaborating and finding new inspiration. It’s very
much the Pinterest of code. It works by allowing
coders to create ‘pens’, which are sets of HTML,
CSS and JavaScript. These can then be displayed
in a profile, can collect feedback, and edited at a
time that’s suitable. CodePen includes some
great features to help write CSS faster than a
standard IDE.
Not only is CodePen the perfect place to test
front-end code, it consists of some of the most
talented and exceptional coders around.
Developers can work collaboratively as a team from
any environment, whenever they want to, with a
great emphasis on positive encouragement and
learning. The community is friendly and supportive,

always moving towards the goal of a more beautiful
web. The perfect tool to start any journey to being
an awesome front-end developer.

FABRICATOR
fbrctr.github.io

Fabricator is built on Node.js, a
platform for building fast, scalable
network applications. There are
pre-built installers for each platform
provided. Organise design systems
to be as effective as possible. The
taxonomy is completely
customisable, be it components,
structures, elements or atoms.

Forget Comic Sans! The main reason to choose
any online font service is to access fonts that
are outside the old-school ‘web safe’ library.
Google Fonts is free, easy to implement and
widely used online. With no licensing issues to
get in the way of creativity, Google Fonts and
CSS @font-face are essential for low-budget
web builds.

AUTOPREFIXER
autoprefixer.github.io

Unfortunately, browsers are not all built the
same. Support across the major browsers is
much better but still slightly different. Just write
normal CSS according to the latest W3C specs
and Autoprefixer will produce the necessary
code for older browsers. It supports selectors
like :fullscreen and ::selection, unit functions
like calc() and at-rules like @keyframes.
Because Autoprefixer is a postprocessor for
CSS, Autoprefixer can also support
preprocessors such as Sass, Stylus or Less.

CHROME ANIMATIONS
DEBUGGER
bit.ly/2mF5v8q

Chrome’s Animations panel allows
devs to see a timeline of all CSS
animations on a page as they’re
fired. Change their length, reposition
and slow down to 50 or 25% speed.
Perfect for timing and sequencing
transitions and animations.

feature ______________________________________________________

47

50 HTML, CSS & JS PRO TOOLS

UX/UI TOOLS

SKETCHING, PROTOTYPING AND USER JOURNEYS ENSURE A BETTER BUILD

“THE INCLUSION OF HOTJAR TO OUR
PLATFORM HAS ENABLED US TO
QUICKLY INTRODUCE UX AND UI
CHANGES TO OUR SOCIAL MEDIA TOOL,
SWIFT SOCIAL, INCREASING USER
RETENTION AND SIGNUPS”
Arni Lochner
CEO & UI/UIX Designer
sotech.io

HOTJAR

hotjar.com

Understanding how consumers use digital assets like
websites is the most critical aspect of being a
professional within the digital industry. It’s crucial to
appreciate if a beautiful design is actually performing.

ICONFINDER

INVISION

Looking great but killing customer journeys is
madness for any brand. By not measuring real users’
interactions, opportunities to convert them into loyal,
profitable customers are overlooked.

CANVA FONT COMBINATIONS

iconfinder.com

invisionapp.com

canva.com/font-combinations

Iconfinder is the one of the largest collections of
both premium and free-to-use webicons available
on the internet. Iconfinder has an easy-to-use
search, icon categorisation that’s flexible and a
great community of designers behind it. With
tiered pricing for teams and individuals, and all
assets available in usable formats like Adobe
Illustrator (AI) and Photoshop Shapes (CSH), there
is no reason to not use Iconfinder!

An incredibly easy-to-use, powerful designshowcasing tool, perfect for prototyping and
gathering feedback. Upload design files and add
animations, utilise gestures and transitions to
transform static designs/screens into clickable,
interactive prototypes. Invision allows designers
to produce better, faster and more collaboratively
with real-time, in-browser design collaboration
and presentation tools.

Canva provides a robust and easy-to-learn design
interface for producing professional-quality digital
designs. The Canva Font Combinations tool takes
the pain out of finding a font pairing, sourcing the
right complementary typeface to a provided font
family. The library of webfonts is diverse enough
for most modern web builds, and the preview
widget post font selection gives examples of
cutting-edge designs that support the results.

48 ______________________________________________________ feature

50 HTML, CSS & JS PRO TOOLS
LASTPASS
lastpass.com

LastPass is the best solution for password
management. With a fantastic Google Chrome
extension, incredible password management setup
and market-leading security measures, LastPass is a
real lifesaver. Fantastic for teams to keep logins in
sync too.

MAMP PRO
mamp.info

MAMP PRO is the commercial, professional-grade
version of the also incredible local server software,
MAMP. MAMP PRO allows easy installation and
administration of multiple development environments,
without having to do anything dangerous to a
computer/environment.

FILEZILLA

BALSAMIQ MOCKUPS

filezilla-project.org

balsamiq.com

Balsamiq Mockups is a quick and simple
wireframing software that gives the tools
needed to develop concepts and ideas easily,
prototyping visually stimulating interfaces as
rapidly as possible. It reproduces the
experience of sketching on a whiteboard, and
has multiple themes to give as much creativity
as possible for produced ideas. All work is
version controlled, and with great third-party

support, exporting to HTML is also possible!
Useful if there was a need to take a prototype
and turn it into something a bit more interactive.
The output is very developer-friendly too,
allowing rapid collaboration between design
and build. Core functionality and requirements
could be scoped and agreed using Balsamiq,
giving a headstart of production of the web
build itself.

FileZilla is a fast and reliable cross-platform FTP, FTPS
and SFTP client with lots of useful features and an
intuitive user interface. It is the default choice for
many developers because of its extensive list of
features and behaviours.

BROWSERSTACK
browserstack.com

Giving instant access to all real mobile and desktop
browsers, BrowserStack is the cost-effective solution to
having a diverse testing lab. There is no longer a need
for a library of devices and virtual machines. A very
cost-effective subscription that’s worth every penny.

SOURCETREE
sourcetreeapp.com

SourceTree takes advantage of Git in an easy-to-use
application that provides an intuitive environment to
help learn Git. Even advanced developers can be more
productive with visual Git flow, changesets and
stashes. A must-have for any digital team.

CROWDFLOWER
crowdflower.com

Crowdflower is a powerful web service that is
perfect for gathering insights and running test
scripts on designs and live web builds. The
system allows its users a method of distributing
tasks to a global audience, all while maintaining
quality and budget control. It combines machine
learning and human collaboration into a single

platform. Crowdflower provides a clear and
analytical approach to assessing real human
interaction and emotion to web builds in the
form of custom-built test scenarios.
A/B testing with data analysis only goes so far.
Crowdflower offers the option to test UI against
real behaviour, in real time with real people.

WAPPALYZER
wappalyzer.com

Wappalyzer is a cross-platform utility that uncovers the
digital technologies used on websites. It detects
everything from CMS and e-commerce platforms, to
web frameworks and analytics tools. The Chrome and
Firefox extensions are must-have.

feature ______________________________________________________ 49

web workshop

Create animated lineby-line text effects
As seen on nobody.nyc

Info panel
Clicking on the Info button brings
up an appropriate panel over the
top. This has some lovely animated
scribble drawings of the team.
team

Jump to top
As this is a single-scrolling
website the name Nobody
Studios links back to the
top of the page, and there is
an animated strikethrough
effect when the user rolls
over this.

Scrolling text effect
Every few seconds each
line of text scrolls up so that
the underscore sits at the
top and Nobody_ sits at the
bottom, then the whole
thing repeats back.

50

Scrolling down

More animations

As the user scrolls down the page
there is sample work, which when
clicked on loads into the page
without leaving.

All content that loads in or scrolls
into view arrives with flourishes of
animation including typing effects
and easing letters into place.

Create animated line-by-line text effects
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner

EXPERT ADVICE
Simplicity shines
The Nobody.nyc site keeps to a
very minimal, almost ‘type’-only
interface. This has the advantage
of no huge loading times or image
sizes. More importantly though, the
client work that is brought into the
site really stands out, as it’s obvious
that this is where the team harness
their creativity.

W

hen most websites in the field of
design focus on imagery and
colour, sometimes doing the exact
opposite can enable your site to
completely stand out as something immediately
different. That is definitely the case for the New York
design studio called Nobody Studios. This is a playful pun
on the body element of webpages, but Nobody doesn’t
just limit themselves to the web – they are problem
solvers that focus on design and branding with whatever
solution they see fit cascading from that.
Their website mainly focuses on typography and if
you don’t click on anything you will only see type in

the content. As soon as you start to delve deeper
into their portfolio, the content begins to get interesting.
Client work is loaded into the page and presented
to the user with typewriter-effect animated text being
applied to the screen. This makes their message
pop while the graphics are all strictly from their
client solutions.
Of course, with most designers there is a little
self-indulgence, but even this is hidden away for
Nobody. Only after you click on the Info button does
a strange animated Japanese sumo wrestler appear,
above a great selection of scribbled portraits of the
team, drawn onto the screen as animations.

Keeping it all together
<comment>
What our
experts think
of the site

“Many sites try to keep to the idea of a one -page website even if they are
loading extra portfolio content and displaying it onto the screen. Nobody does
this with its work section and it helps the user to always feel orientated as they
never really go deep into the site, they’re always at the top level.”
Mark Shufflebottom

Technique
1. Create the scrolling text
The scrolling text effect on the home screen of the
Nobody.nyc site is created by using JavaScript to move
content in an array and write this into the screen. The
first step is to make the background black and the text
white with CSS.

body {
background: #000;
font-family: Helvetica, Arial, sans-serif;
color: #fff;}

2. A place to go
In the body section of the code, an empty div tag with
the id of ‘text’ needs to be added. This will be written
into by JavaScript in the code section. For now it’s fine
to be empty.

<div id=”text”>
</div>

Every 100 milliseconds the ‘addText’ counter will add
another line of text.

reset();
function reset() {
counter = 0;
timer = setInterval(addText, 100);
}

5. Add each word
Now the ‘addText’ function is created and here the first
six words are added with a for loop to move through
the array of words. These are then written in as separate
paragraphs into the ‘text’ div tag.

function addText() {
var content = “”;
for (i = 0; i < 6; i++) {
content += “<p>” + words[i] + “</p>”
}
block.innerHTML = content;

3. Add the JavaScript

6. Move words

Add script tags below the div tag and then add these
variables. First there is a reference to where the text will
go, then an array of the words in the starting order.
There’s also a counter and a timer variable that will be
used in the next few steps.

In the ‘else’ statement, there is a counter that moves up
each time and the words are moved to the last position
of the array. When this reaches five the timer is stopped,
and it pauses for one second before calling the reset
function and starting again.

var block = document.getElementById(‘text’);
var words = [“_”, “N_”, “NO_”, “NOBO_”,
“NOBOD_”, “NOBODY_”, “NOBOD_”, “NOBO_”,
“NO_”, “N_”];
var counter = 0;
var timer;

4. Get started
The first thing that needs to happen is to reset the timer
to start running. This is done by calling the reset function.

if (counter == 5) {
clearInterval(timer);
timer = setTimeout(reset, 1000);
} else {
var temp = words[0];
words.splice(0, 1);
words.push(temp);
counter++;
}
}

51

Tutorials

Build an interactive
JavaScript header
Make an image-rich, interactive sliding header in PixiJS with a
beautiful, glass-like logo that refracts the background content

52

DOWNLOAD TUTORIAL FILES
www.filesilo.co.uk/webdesigner

Tutorials

G

etting a unique look for the landing of
your website is probably something
that all web designers spend a lot of
time planning and executing. It is, after
all, the very first thing that your site visitors will see and
so it’s often an important place to make a big impact
with them.
In this tutorial the site header will be the main theme,
but you could also use this for other graphical content
within your site project. The PixiJS library is being used
because it has a very sophisticated scene graph for
creating rich, interactive graphics and creating
parent-child relationships with the content. Not only that
but it has blending modes, an asset loader, filters and is
both mouse and touch responsive. One of the great
features of Pixi is that it renders to the HTML5 Canvas
element or, if the browser has WebGL capability, this is
used instead. WebGL is usually hardware accelerated by
the graphics card, so Pixi will automatically switch over to
that for faster graphics. It’s important to point out that
Pixi is actually only a 2D engine, so unlike other
WebGL libraries this doesn’t load 3D models. This
project will take advantage of Pixi’s filters and create
glass displacement effects on the screen for a really
stunning logo effect.

1. Link the library
To start the project, copy the ‘start’ folder onto your
computer and open it in your favourite code editor.
Open the ‘index.html’ file and add the link in the head
section of the page, to incorporate the Pixi library into
this page. This is available from pixijs.com but we’ve
included it in the folder ready for you.

<script src=”pixi.min.js”></script>

WebGL content of PixiJS to the page, so there is not a
complicated CSS setup for this project.

<style>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
</style>

the setup function is called once all of the images have
been loaded. This stops errors occurring in the code
because certain elements haven’t been loaded.

PIXI.loader.add(“img/logo_NRM.png”).
add(“img/logo.png”).add(“img/bg.jpg”).
add(“img/mountains.png”).add(“img/trees.
png”).add(“img/cloud1.png”).add(“img/cloud2.
png”).add(“img/blur1.png”).add(“img/blur2.
png”).load(setup);

3. Define Pixi

6. The setup function

Now it’s time to set the script tags that will contain the
rest of the code. In this section the code sets up a new
Pixi application, which is set to display to the full width
and height of the browser window. This is then inserted
into the DOM so that it is visible on the page.

Now the setup function is defined – remember this is
called after all of the images have been loaded. The
position of the x axis is just set to 0, but this will be set as
soon as the mouse is moved later on. The count variable
is used to fade in and out of some of the background
colours in the display.

<script type=”text/javascript”>
var app = new PIXI.Application(window.
innerWidth, window.innerHeight);
document.body.appendChild(app.view);
</script>

4. Set the globals
Now the code sets up the global properties that will be
applied to the project. The stage is set to be interactive
and a whole series of variables are declared, most of
which will hold images. A new container is defined that
will hold all of the scenery images in the group.

app.stage.interactive = true;
var posX, bounds, displacementSprite,
mountains, trees, cloud1, cloud2, blur1,
blur2, logo, count;
var container = new PIXI.Container();
app.stage.addChild(container);

2. Set up the page

5. Preload the images

While still in the head section, add in the style tags here
and set up the basic styling of the body tag. There will
only be a canvas tag on the page that will hold the

In this section of code a Pixi Loader element is set up.
This preloads all of the images that are added into this
section. Notice that at the very end of this, it defines that

function setup() {
posX = 0;
count = 0;

7. Add the displacement image
When images are loaded via the preloader they are
called with the PIXI.loader.resources command. This
image is the displacement image and is placed in the
centre of the screen by setting the anchor position in the
middle of the image, then placing this at half of the width
and height of the screen.

displacementSprite = new PIXI.Sprite(PIXI.
loader.resources[“img/logo_NRM.png”].
texture);

Displacement map

A displacement map simply refers to an image
that is used to warp other images – in this case,
warping the background as if the logo is made
of glass.

Left

The logo is in place in the centre of the screen, however
with nothing behind it there is nothing to displace on
the screen
Top left

Placing the background image into the scene, the glass
displacement can just about be seen around the edge of
the text. It will be much more noticeable as the
background moves
Top right

There are coloured light effects in the background, and
later these will pulse on and off to give a ‘northern lights’
look to the sky

53

Tutorials
Build an interactive JavaScript header

var displacementFilter = new PIXI.filters.Di
splacementFilter(displacementSprite);
displacementSprite.anchor.set(0.5);
displacementSprite.x = app.renderer.width /
2;
displacementSprite.y = app.renderer.height /
2;
app.stage.addChild(displacementSprite);

8. Add the main logo
The logo is called from the loader resources, and this is
then held in the more manageable variable of ‘logo’ as a
Sprite. The anchor and positioning of the logo is set and
then added to the stage in the centre. The opacity is set
to 50% so that the image can be seen through.

logo = new PIXI.Sprite(PIXI.loader.
resources[“img/logo.png”].texture);
logo.anchor.set(0.5);
logo.x = app.renderer.width / 2;
logo.y = app.renderer.height / 2;
logo.alpha = 0.5;
app.stage.addChild(logo);

9. Set the glass displacement
Now the displacement filter is added to the container
element. The scale of the filter needs to be set on both
the x and y axis. This is set to a relatively large 120, and
it’s a good idea to experiment with this and try different
values. This seems to work well for the purposes of
this tutorial.

container.filters = [displacementFilter];
displacementFilter.scale.x = 120;
displacementFilter.scale.y = 120;

Preloading

The term ‘preloading’ means that certain content
is loaded before it will be called to be used. This
prevents images suddenly appearing in the
display because they have just finished loading.

Right

Several of the scenery layers are in place including the
mountains, clouds and trees. These will move with the
mouse to create a parallax effect
Top left

The final cloud layer is in place in front of the trees and the
scene assembly is complete. Next we can make it interact
with the mouse and animate the coloured swashes
Top right

The background moves with the mouse input and the
refraction of the trees can clearly be seen in the letter ‘R’ as
well as around the letters

54

10. Add the background
The displacement won’t work unless it has something to
displace in the background, so here the background
image is placed into the container. Note that the logo and
displacement image are placed directly on the stage, but
this is placed inside the container, which is behind the
displacement image.

bg = new PIXI.Sprite(PIXI.loader.
resources[“img/bg.jpg”].texture);
bg.width = app.renderer.width;
bg.height = app.renderer.height;
container.addChild(bg);

11. Fading colours
There are two coloured blurred images that are
placed just over the background image. Later on
these will be animated to fade in and out so that there
is interest in the background, a little like northern lights
in the sky. This first blur is placed over to the left of
the screen.

blur1 = new PIXI.Sprite(PIXI.loader.
resources[“img/blur1.png”].texture);
blur1.anchor.set(0.5);
blur1.scaleX = 3;
blur1.x = app.renderer.width / 4;
blur1.y = app.renderer.height / 2;
container.addChild(blur1);

12. Second blur
The second blur image is positioned over to the right by
placing it three quarters of the way across the screen.
This is done by finding half of the width of the screen,
then adding a quarter of the width onto this. The first blur
was slightly easier by just placing it a quarter of the way
across the screen.

blur2 = new PIXI.Sprite(PIXI.loader.
resources[“img/blur2.png”].texture);
blur2.anchor.set(0.5);
blur2.scaleX = 3;
blur2.x = app.renderer.width / 2 + app.
renderer.width / 4;

blur2.y = app.renderer.height / 2;
container.addChild(blur2);

13. Build the scene
Now in front of the background sky elements, some
mountains will be placed on the screen. These will react
to the mouse movement on the x axis so that there is a
slight parallax movement left and right. This will also
show off the displacement of the glass logo in the
foreground.

mountains = new PIXI.Sprite(PIXI.loader.
resources[“img/mountains.png”].texture);
mountains.anchor.set(0.5);
mountains.x = app.renderer.width / 2;
mountains.y = app.renderer.height (mountains.height / 2);
container.addChild(mountains);

14. Add some clouds
In front of the mountains the next element to be added
will be a large cloud image. This is positioned at the top
of the screen with the soft edge of the cloud towards
the bottom of the screen. As previously this will react to
the mouse movement in order to make the screen
more interactive.

cloud1 = new PIXI.Sprite(PIXI.loader.
resources[“img/cloud1.png”].texture);
cloud1.anchor.set(0.5);
cloud1.x = app.renderer.width / 2;
cloud1.y = cloud1.height / 2;
container.addChild(cloud1);

15. Plant the trees
Now the trees are placed into the scene. These are in
front of the previous content, so you should start to see a
build up of the scene being created with the many layers
of the environment. Each one of these ‘layers’ will move
at slightly different speeds to the mouse input.

trees = new PIXI.Sprite(PIXI.loader.
resources[“img/trees.png”].texture);
trees.anchor.set(0.5);

Tutorials
Build an interactive JavaScript header

Create a
normal map
The displacement of the
logo occurs by using a
very specific image type
known within 3D graphics
and game programming
as a ‘normal’ map. A
normal map stores the
direction of light at each
pixel; the directions are
known as ‘normals’, hence
the name. The red, green
and blue channels of the
image are used to control
the direction of each
pixel’s normal. When you
look at a normal map you
can make out the original
shape, but it looks like
someone has picked up
the channels and moved
them off centre. Usually
normal maps have a
purple/blue background
colour to them. In order
to get a normal map the
logo image was placed
into a special app called
CrazyBump which
generated the file. There
are a lot of free apps that
will create these kinds of
image files, so find one
that works for you.

trees.x = app.renderer.width / 2;
trees.y = app.renderer.height – (trees.
height / 2);
container.addChild(trees);

16. Drifting clouds
Now the foreground clouds are placed in the scene.
These are positioned towards the bottom of the screen
with overlap on both sides so that it can move over the
top of the other content. As it’s at the bottom of the
screen these clouds will be for atmospheric effect in front
of the trees.

cloud2 = new PIXI.Sprite(PIXI.loader.
resources[“img/cloud2.png”].texture);
cloud2.anchor.set(0.5);
cloud2.x = app.renderer.width / 2;
cloud2.y = app.renderer.height – (cloud2.
height / 2);
container.addChild(cloud2);

17. Register movements
The next line of code simply calls the ‘onPointerMove’
move function if either the mouse moves or, if on a
touch device, the touch input is moved. The final part of
the setup function simply calls the loop function to
continuously run, and then there is the final closing
bracket of the setup function.

app.stage.on(‘mousemove’, onPointerMove).
on(‘touchmove’, onPointerMove);

loop();
}

18. Move around
The ‘onPointerMove’ function is declared now and this
simply finds the x position of the input from either the
mouse or finger. This information is stored in the global
variable of ‘posX’. This will be used to move the scenery
around in a parallax style based on where the mouse is.

function onPointerMove(eventData) {
posX = eventData.data.global.x;
}

19. Work out the screen delta
The next function is called by each of the layers of our
scene to work out their position on the screen. This is
created by figuring out the position of the mouse, half
the width of the screen and the amount that each layer is
to be moved.

function deltaX(amount) {
var a = posX;
var b = app.renderer.width / 2;
var c = amount;
return ((a – b) / c);
}

20. Infinite loop
The loop function is called after the scene has finished
setting up and this is then called to run as close to 60

frames per second as possible through the
‘requestAnimationFrame’. Then each of the parallax
movements is called for the scenery that is to move
based on the mouse.

function loop() {
requestAnimationFrame(loop);
mountains.x = app.renderer.width / 2 deltaX(3);
trees.x = app.renderer.width / 2 deltaX(1.8);
cloud1.x = app.renderer.width / 2 deltaX(2.2);
cloud2.x = app.renderer.width / 2 deltaX(1.1);

21. Fade in and out
The final step is to set the two background blurs to
fade in and out based on a fluctuating sine wave.
The second blur is just slightly offset so that they are
not exactly in time with one another. Save the page
and then view the animated interactive header in
your browser.

count += 0.01;
var count2 = count + 0.95;
blur1.alpha = (Math.sin(count) * 0.5) +
0.8;
blur2.alpha = (Math.sin(count2) * 0.5) +
0.8;
}

55

Tutorials

Create a dashboard UI
design with Sketch
Learn how to create a mini dashboard user
interface using the Sketch design app

56

DOWNLOAD TUTORIAL FILES
www.filesilo.co.uk/webdesigner

Tutorials

U

nless you’ve been living (and working)
under a rock for the last few years,
anyone working in the web design
industry will know something about
Sketch, or actually use it in their daily workflow. If you’re
one of those designers that can’t pull away from
Photoshop, and have heard about Sketch but haven’t had
the chance to learn it, then this tutorial is for you.
Sketch is fast becoming the defacto design app for
web and UI designers worldwide. It’s unfortunately only
available for Mac, and from our understanding it will likely
stay that way for the foreseeable future. So, what makes
Sketch so awesome that many designers are now
ditching Photoshop? Upon opening up Sketch you’ll
notice a clean, unbloated interface with only half the
toolset compared to other design programs. This is
because the app provides only what’s necessary for web
and UI design – it’s that simple. Oh, and it’s all in vector.
However, what Sketch lacks, its plugins make up for.
Sketch plugins are a great way of extending Sketch to
such a degree, you’ll wonder why you ever used
Photoshop over the last few years – yes it’s that good!
So what we’re going to do is learn the basics of Sketch
by creating a mini dashboard UI. We will be using a few
plugins and will also go through as many tools and
features as we can to accomplish our goals. So go ahead
and download the free trial of Sketch, open it up and let’s
get started!

done without worrying about plugins, there are a few
that really speed up your workflow. Head over to
sketchapp.com/extensions/plugins/ and search for a
plugin called Content Generator. Clicking it will take you
to its GitHub repo where you’ll find further instructions
on how to install it.

3. Get to know Sketch
Sketch was built for the purpose of UI design and
compared to its counterparts (such as Photoshop),
Sketch only gives you the tools that you’ll need for the
job. However its similarities to apps such as Photoshop
are there to see, such as a layers panel on the left and a
tool’s bar at the top. Open up Sketch and spend some
time getting familiar with the interface.

5. Customise the toolbar
One of the good things about Sketch is the way you
can customise the interface specifically for your needs.
Right-click on the toolbar and choose Customize Toolbar.
You will now be able to click and drag any tool onto
the toolbar. Needless to say this saves you a bit of time
while working.

6. Create navigation sidebar
To give Sketch a good testing, we are going to create
a mini dashboard UI. The first thing we’re going to do
is create the navigation sidebar for the dashboard.
Select the Rectangle tool and drag out a shape that is
165px wide and the full height of the document (550px).
Don’t worry about the colour, we will sort that out in
the next step.

4. Set up a new document
Create a new file (Cmd+N) and look for the Insert icon at
the top left of Sketch. Once clicked you’ll be presented
with several options that you can select, but we want to
choose Artboard. Once you create an artboard, you’ll
notice predefined page layouts over on the right. Open
up the Responsive Web Design tab, choose Desktop and
resize to 1,000 x 550px.

1. Install Sketch
The first step we need to take is to install Sketch. Head
over to sketchapp.com and download the trial version. If
at the end of your trial you would like to purchase Sketch
(which we are sure you will) then it is only $99 at the time
of writing.

2. Content Generator plugin
Sketch’s various plugins and extensions certainly make
up for any shortfalls. Even though you could get a lot

Infinite canvas

Sketch’s canvas is infinite, meaning you can create
as many layouts or screens as you could possibly
need within one document.

Left

Sketch has quite a number of plugins/extensions that
make it so useful, as there’s now so much you can do
with it
Top left

Getting to know the Sketch interface before you get
started is obviously important, however you will see quite
a few similarities to other design apps
Top right

At first you’ll think Sketch doesn’t offer much in terms of
tools, but there are quite a few and you can customise
the toolbar

57

Tutorials
Create a dashboard UI design with Sketch

7. The inspector panel

9. Use the plugin

12. Layer groups

As soon as you drag out a shape, the inspector panel on
the right-hand side becomes active. As you’ll see there’s
a lot we can do in this panel, and the first thing we will do
is change the fill colour to #354153. Next, remove the
stroke by unchecking Borders. In the top of the
inspectors panel, we can make sure the size of our shape
is exactly how we want it.

It’s now time for us to use our handy new Content
Generator plugin we installed in step 2. Make sure your
circle shape is selected and then, up in the bar at the
very top of your screen, you’ll see an option called
Plugins. Hover over or click on that, and in the dropdown menu choose Content Generator>Persona>
Photos>Male or Female.

Just like Photoshop and other design apps, Sketch
enables you to group layers. Select both the lines and
press Cmd+G on your keyboard. Then copy and paste
the group and move one around 330px down. Now
we can begin to add some links and icons in between
these separators.

10. Add names
This is when we see the power of the Content Generator
plugin, and how it can really help speed up your
workflow. Select the Text tool and click under the image
we just added. Then click off it and back on it again. With
it now selected we can go back up to the Content
Generator plugin, and choose Persona>Names>Male or
Female (depending on what image you used).

8. Persona circle

11. Line separator

Now select the Oval tool from the toolbar. Drag out a
circle that is around 77 x 77px and place it at the top
of the sidebar we created in the last step, then
centre it. Don’t worry about the background colour as
we will be placing an image of someone in here in the
next step.

Select the Line tool and drag out a line underneath the
name we just created, ensuring it is 1px thick and spans
across the width of the sidebar. Change the colour of this
to black and turn down its opacity to 25%. Then copy
and paste the line and move it 1px down. Change the
colour to #6D6D6D – this will give the separator a
slight highlight.

Vector-based app

Sketch is a vector-based application similar to
Adobe Illustrator, which is what makes it such
a good choice for UI designers.

Top left

Using the content generator for the first time makes you
realise just how useful this plugin is and you’ll be using it
all the time
Top right

Not only does the content generator plugin pull in images,
it can also generate random names and other content
such as numbers and dummy text
Right

The design is almost complete, and all there is left to do is
to finish off the chat section with more comments

58

13. Edit button
What you often find on dashboards is an icon that
allows you to edit your profile. So we’re gonna need
to find ourselves a small pencil icon and place that
next to our profile image. The easiest and cheapest
place to find icons is by visiting flaticon.com. Once
you find a suitable icon, create a small circle next to
the profile image, give it a white border and set
the fill to #B8E986.

Tutorials
Create a dashboard UI design with Sketch

Rounded corners and vector tools
Sketch has many more tools and features that
we haven’t been able to explore during this
tutorial. One feature we should look at in more
detail is how you can create rounded corners
on a specific corner. So, for example, if we
wanted to create a rectangular button that
only has the top two corners rounded, but the
bottom edges stay sharp.
We can do that by first dragging out a
rectangle or square on a blank canvas and
double-clicking on it to go into editing mode.
This will bring up a bunch of new tools within
the inspector panel on the right. Now click on
one of the corners so the little circle is active,
and then in the inspector panel we can adjust
the Radius slider to whatever we want.

14. Add the Home icon

17. Complete the top bar

19. Percentage circles

What we need now is a house icon. So, using the Flaticon
website we were on previously, locate a house icon, set
its colour to white and download it either as a SVG
(because Sketch is vector) or a PNG. Resize and position
it underneath our top separator. Then we can give this a
name of ‘Home’ and put a background colour behind it
using the rectangle tool to show that the page is active.

The top bar is going to have a search feature, so you
will need to find a search icon using the flaticon.com
website. Position it top left and then create a blue square
over on the right with a user icon inside. Lastly, add a cog
icon that users will use to change the settings, and then
place a small green circle that shows the user is active/
logged in.

We want our dashboard to have an indicator of how
many jobs have been applied for and so on. Create a
circle that is 200px and remove its border. Set the fill to
#D8DEE4. Press Cmd+D to duplicate that circle on top,
then hold down the Alt + Shift keys and drag it down to
around 180px. Select them both and click the Subtract
operation located top right of the toolbar.

15. Finish the navigation sidebar
Now that we have the home icon and text added, we can
go ahead and add the rest. Because this is going to be a
dashboard for a job search candidate, we will need a
Resume/CV link, My Applications and Calender. Try and
use similar-style icons here and turn down the opacity
slightly on both the icons and text.

20. Finish up the
percentage circles
18. Resume buttons and title
In this step we will add in a few buttons and a job title.
The buttons will enable the user to edit their resume/CV.
Create a rectangle that is about 105 to 35px. We can give
it some rounded corners by using the Radius slider,
setting it to 8px. Then create two small circles at 35 x
35px, and place the pencil icon in one and a delete (bin)
icon in the other.

Copy and paste the circle and move the new one over to
the right. Then press Cmd+D to duplicate on top. Select
the Rectangle tool and drag out a rectangle that covers
only half of the circle, then select both the circle and
rectangle and click Subtract again. This will enable us to
change the fill colour of only one half. Add some content
in the middle of each circle.

16. Create the top bar
Using the Rectangle tool, drag out a shape that spans
across the top inner section (833px) and set the height to
62px. Uncheck the fill in the inspector panel and give it
an inner border of 1px with the colour set to #ECECEC.
Then create two vertical lines and position them at either
end as though they are buttons.

21. Chat section
The last section will be our chatroom. We’ve created
a rectangle that is around 300 x 345px with a grey
background and placed it bottom right. We can then
add a small box within and begin to add in some content.
What we can do is create three circles that are 47 x
47px and use the Content Generator plugin to add
random personas. Then it’s just a case of creating
some speech bubbles.

59

Tutorials

Responsive fullscreen
layouts with Flexbox
Harnessing the power of Flexbox, discover how to create a card
that adjusts and centres to the viewport

60

DOWNLOAD TUTORIAL FILES
www.filesilo.co.uk/webdesigner

Tutorials

T

he layout we’ll be creating consists of a big,
fullscreen background image, with a dark
gradient applied over the top of it. We’ll
need to use blend modes in the browsers that
support it and transparency for those that don’t (we’re
looking at you Edge) to dampen the image. The
background then has a card placed over the top of it,
always centred in the viewport, no matter how big or
small the viewport is.
The card too is adaptive to the viewport, with the
image stacked above the content of the card on mobiles
and some smaller tablets and then aligned to the left of
the content on larger screens. The social buttons will
always be aligned to the bottom of the card.
The card will also adjust in height depending on its
contents, eventually causing the automatic scrollbars to
kick in. As the viewport grows the image will be moved to
the left of the content and scaled to cover the entire
left-hand side of the card. The bulk of the work is done
with Flexbox and the entire layout consists of less than
200 lines of CSS.
This tutorial supports Edge and most modern
browsers, although support for IE10 can be achieved
using Autoprefixer (http://srt.lt/Tf1A5B) by changing
some of the min and max values to fixed units.

1. File and folder structure
We start by creating a project folder with two folders
inside it, one for the CSS and the other for images. We
then create the index file for the project, saving it in the
root folder and the main CSS file saved in the CSS folder.
We’ll also source an image to use as the splash and save
it in the images folder.

2. The HTML head
Inside the index file we start the HTML with the HTML5
Doctype and HTML opening tag, followed by the head
tag and contents, the title of the document and then
meta tags for the character set and viewport scaling (so

the layout plays nice on mobile) – we then need to link
the main style sheet. A starting structure can be found at
http://srt.lt/J4f7Ex.

<head>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8”/>
<title>Flexbox Layout Tutorial</title>
<meta name=”viewport” content=”
width=device-width,initial-scale=1
“>
<link rel=”stylesheet” href=”css/main.
css”>
</head>

3. Onto the body
Inside the body tag we’re going to create a few elements.
We’ll create the card as an `article` element and the
image as an `aside` element inside of the card, along
with a `section` element that will contain the contents of
the article.

<article class=”card”>
<aside class=”card__image-container”>
</aside>
<section class=”card__contents”>
</section>
</article>

4. Make a start on the CSS
Jump over to the main.css file and we can make a start.
We’ll begin by using a browser reset called sanitize.css
(http://srt.lt/t9fHt) and then import our fonts from
Google (fonts.google.com).

@import url(‘http://srt.lt/Q6P0nY’);
@import url(‘http://srt.lt/b4tY7’);
*,
*::before,
*::after {
box-sizing: border-box;
}

5. Fullscreen background image
We’ll style the body tag as our background, that way we
don’t need any containers. We can do this using multiple
backgrounds and Flexbox to achieve our layout. We’ll also
include our font and some other basic styling properties.
We’ll position and size the background using `center` and
`cover` as their property values.

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image:
linear-gradient(rgba(0,0,0,0.8),
rgba(0,0,0,0.6)), url(‘../images/splash.
jpg’)
}

6. Blending and @supports
We can use the background-blend-mode property to
apply a different gradient, which we can then blend with
the background. We’ll be using a trick to make sure Edge
doesn’t just get a dark gradient as the background due to
lack of support for blending.

@supports(background-blend-mode: multiply) {
body {
background-image:
linear-gradient(#4A4A4A, #212121),
url(‘../images/splash.jpg’);
background-blend-mode: multiply;
} }

@supports

The @supports rule can be used to test support
for certain features, allowing fallbacks to be put in
place. It isn’t supported by Internet Explorer (IE)
but IE will skip the declaration altogether.

Left

The image on the left is using the fallback gradient, the
image on the right is using the blend mode
Top left

We’ve now got the card centred in the viewport thanks to
the Flexbox properties we’ve added to the body
Top right

The properties we’ve applied will stop the image taking
over the entire screen but allows the image to be scaled
to fit the container

61

Tutorials
Responsive fullscreen layouts with Flexbox

7. Style the card

9. Flex the card contents

The card styling, since we want the card to adapt to the
viewport, will also be a flex container. We’ve applied a
maximum width and minimum height along with some
basic cosmetic properties. However, because the card
has no content there’s nothing displayed on the screen.

Since we want the card contents to always be displayed
stacked on top of one another vertically, we can change
the axis of the flex-container and then use the flex
shorthand to allow the body to grow and shrink, and the
header and footer to take as much space as they need.
.card__contents {

.card {
display: flex;
flex-direction: column;
max-width: 62rem;
min-height: 75vh;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

8. Card content and structure
Next we’ll add our image to the card and build the
structure for the card’s content inside the HTML,
consisting of a header, body and footer. We’re splitting
the content like this so that we can fix the footer at the
bottom of the card. We’ll also add some content in
these new elements.

<aside class=”card__image-container”>
<img class=”card__image”
src=”images/splash.jpg”>
</aside>
<section class=”card__contents”>
<header class=”card__header”><h1>…</
h1></header>
<section class=”card__body”>…</section>
<footer class=”card__footer”>…</footer>
</section>

The BEM
methodology

You might have noticed, and may or may not be
familiar with, the double-underscore naming
convention being used thoughout the tutorial.
BEM stands for Block, Element, Modifier.

Top left

The card’s contents are now split along the horizontal
axis when the screen is large enough, however the image
does not fit the container
Top right

By overriding the `max-height` onscreen enough
to display the content along the horizontal axis, we can
allow the image to fill the remaining space in the container
Right

The bolder slab font used for the headline gives the
content clear hierarchy. We’ve also adjusted the line
height and font size

62

display: flex;
flex-direction: column;
}
.card__header, .card__footer {
flex: 0 0 auto;
}
.card__body {
flex: 1 1 auto; }

10. Style the card image
We can hide the image element in the HTML and stop
the selection in case the container overflows the content.
We can then apply the image to the card’s container with
the cover property to fill the container.

.card__image-container {
max-height: 15rem;
background: url(‘../images/splash.jpg’)
no-repeat center center/cover;
}
.card__image {
opacity: 0;
pointer-events: none; }

11. Little bit of tidying
We’ll apply a margin to the top of the card’s footer and
align its contents to the right, and then remove the
automatic margin added to the top of the title as we’re
using the h1 element.

.card__footer {
margin-top: 2rem;
text-align: right; }
.card__title {
margin-top: 0; }
.card__contents {

padding: 2rem; }

12. Change direction with
Media Queries
The layout we have will work great for small screens but
could better utilise the space available on larger screens.
We’ll accomplish this by changing the direction the axis is
following inside of a Media Query – as the screen is now
larger we can afford to reduce the minimum height too.

@media only screen and
(min-width: 53rem) {
.card {
flex-direction: row;
min-height: 60vh;
} }

13. Override the previous
max-height
Now that the card’s contents are divided along the
horizontal axis on larger screens, the image isn’t covering
the entire space available in the column. This is because
of the `max-height` property we’ve already set. We can
override this inside the Media Query.

@media only screen and
(min-width: 53rem) {
.card__image-container {
max-height: inherit;
} }

14. Full control
The split in the card’s contents at the moment is
handled slightly differently (and automatically) by
different browsers. We’ll specify the grow, shrink and
basis properties to gain full control over the layout.
Inside the Media Query we’re allowing the contents to
grow as much as is needed while only allowing the
image to shrink.

.card__image-container {
flex: 0 1 45%;
max-height: inherit;
}

Tutorials
Responsive fullscreen layouts with Flexbox

A basic introduction to BEM
BEM (getbem.com) was developed by Russian
search engine Yandex and is extremely useful when
working in a flexible and modular way.
The B for block-level elements should be named,
and then children of the block should be named
using the name of their parent block. This is
followed by a double underscore to illustrate their
relationship, and then the element name.

`.block__element`
The M for modifier is represented using a double
dash. You would use this to name modified versions
of either blocks or elements.

`.block__element–modifier.`
An example of this would be our card element,
although we’re not using any modifiers. Our
card element is the block and then all children
become elements.

`.card, .card__header.`

.card__contents {
flex: 1 0 55%;
padding: 3rem; }

15. Style the title
We’ll use a secondary font for the title and specify a much
larger font size to help convey the hierarchy of the
content. We’re using rem units for the font size so we’re
always relative to the base font size. It’s worth noting that
the line-height value doesn’t need a unit type.

h1 {
font-family: ‘Roboto Slab’, serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 1.3333; }

16. Social buttons HTML
For each of the social icons we’ll create a link element and
use the i element to create our icons, opening each one
in a new tab. We’ll place this inside the footer of the card’s
contents. These could easily be turned into share buttons,
but for now we’ll make them links to our social profiles.

<a target=”_blank” href=”…”
class=”social-button–twitter”>
<i class=”icon–twitter”></i>
</a>

17. Include an icon font
Next we’ll import Font Awesome from a CDN (http://srt.
lt/p2b4) and create the class for each icon. We’ll also be
turning each social button into a flex container in order to
be able to easily centre the icon inside the button. You
could also download and include the fonts locally (this
will fix any cross-origin issues).

@import url(‘http://srt.lt/p2b4’);
[class^=”icon–”] {
font-family: ‘FontAwesome’;
font-style: normal;
line-height: 1;
}
[class^=”social-button”] {
display: inline-flex;
margin-right: 0.1rem; }

18. Create each icon
Now that we’ve included an icon font, we’ll create each
icon by setting a unicode value as the content of the
`before` pseudo element. We can find the unicode values
we need by referencing the Font Awesome Cheatsheet
(http://srt.lt/GfXoW).

.icon–twitter::before {
content: ‘\f099’;
}
.icon–facebook::before {
content: ‘\f09a’;
}
.icon–pintrest::before {
content: ‘\f231’; }

19. Create each social button
Now we have the correct icons we’ll create the basic style
for each of the buttons – as before we’re using the CSS3
`[attribute^=value]` selector. This enables us to find all
elements beginning with a certain string and apply
classes to them all. We’ll add some more properties to
the social buttons.

[class^=”social-button”] {
display: inline-flex;

align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
font-size: 1.4rem;
border-radius: 50%;
text-decoration: none; }

20. Colour the social icons
The only thing missing from the social icons now is the
colours. We’ll create each class and apply the background
colour from that social network. We can use this CodePen
as a reference to get the colours (http://srt.lt/oBdD1).

.social-button–twitter {
background-color: #32b9e7; }
.social-button–facebook {
background-color: #4b70ab; }
.social-button–pintrest {
background-color: #d63533; }

21. Some final touches
We’ll finish up by making the icons white as well as adding
a transition for the background colour on the social icons.
We’ll also specify a slightly darker background colour for
each of the social buttons on hover. We can use the
CodePen for reference again (http://srt.lt/oBdD1).

[class^=”social-button”] {
color: white;
transition: background-color
150ms ease-in-out;
}
.social-button–twitter:hover {
background-color: #2a9dc4;
}

63

web workshop

How to create a fade in
content navigation
As seen on bergluft.hervis.at/chapter/1

Fixed navigation
The main navigation uses fixed
positioning, allowing it to
remain in the same place as the
user scrolls down the page.

Home
navigation link
The brand logo is
used to enable people
to navigate back to
the starting page. This
is handy for anyone
who gets lost.

Activation
button
Clicking on this
triangle button
expands the content
area to fit the full
webpage, while
also introducing
additional content.

64

Social media links

Original positioning

Links to social media channels
provide options for visitors to
interact with the brand
through channels they may be
more familiar with.

The positioning of the
original content section is
placed to appear as a box
within the full page, allowing
for other UI elements.

How to create a fade in content navigation
DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner

I

nformation architecture is the practice of
designing content to be easily and efficiently
accessible. A part of what we know as UX
design in web circles, information architecture
includes everything from the separation of content into
sections and chapters, through to the creation of
navigation features such as table of contents and
sitemaps. Good information architecture is useful to both
users and search engines like Google because it results
in content that is easier to search for and understand.
Our workshop focuses on the use of two main
HTML5 features – the CSS target selector and the
section container – to enable users to select content
sections they wish to view. To enhance the visual

appeal of this information architecture feature, we will
also make use of CSS transitions to animate the
introduction of content sections.
The application of this type of content navigation to
websites has several advantages for both SEO and the
user experience. The most obvious is allowing visitors to
access content without being overwhelmed with too
much information. Meanwhile, the placement of related
content inside section containers can also make it easier
for search engines to understand your content.
Similarly, users can navigate to access different parts
of the content without needing to reload the webpages,
saving on time and bandwidth; especially good for your
hosting costs and people on limited mobile data plans.

Technique

5. Section default

1. HTML document
The first step is to create the HTML document
structure, which consists of a head and body section.
The head section contains the document title and link
to the external CSS stylesheet. The body will contain
the visible page content created in steps 2 and 3.

2. Navigation HTML
The navigation is made from a HTML5 nav container,
which contains a series of links. These links start
with a hash symbol, which indicates to the browser
that the link is referencing an ID element on the
existing page. The first link uses a hash referencing no
ID name to allow users to navigate back to the top of
the page.

3. Article sections
The group of sections is placed inside an article
container. Each section has an ID that is referenced
from the navigation created in step 2. These sections
also contain the content that is to be presented when
they are activated. In this example, we use h1 elements as
the example content.

<article>
<section id=”first”>
<h1>First Title</h1>
</section>
<section id=”second”>
<h1>Second Title</h1>
</section>
<section id=”third”>
<h1>Third Title</h1>
</section>
</article>

4. Initiate the CSS
After the completion of the HTML, the next step is to
initiate the CSS; create a new file called ‘styles.css’. Start
this file with the style rules defined in this step (see
Filesilo) – which will set the HTML and body to cover the
full page without a border margin. The default font with
dark background and light text is also set in this step.

The default section style is set at 70% of the browser
width and height using the vw (view width) and vh (view
height) measurement units. A background size of 100%
is set for both horizontal and vertical sizing of the
background images to be applied to the section
containers. Invisible opacity is set to hide the section by
default, while a transition is applied to all attributes to
allow for their animated changes.

section{
position: absolute;
opacity: 0;
width: 70vw;
height: 70vh;
top: 15vh;
left: 15vw;
background-size: 100% 100%;
transition: all .5s; }

6. Section titles
The h1 elements used as the section titles are presented
with a semi-transparent background and positioned fully
out of view to the left by default. A transition on all
attributes allows for changes to be animated over a
duration of 0.75 seconds. An inline block display is set so
that the element doesn’t automatically cover the full page
width, with clear set to ‘both’ to ensure the title is on its
own row.

7. Targeted section
Sections appear as they are selected via the URI – as
referenced in the HTML navigation. The CSS target
selector detects when an element is being targeted by
the URI. In response, we change the position, width,
height, opacity and z-index of the section to ensure it is
fully visible and covers the screen above all other
sections, while the child h1 is moved into view. These
changes are animated via the previously applied
transition rule.

section:target{
top: 0;
left: 0;
width: 100vw;
height: 100vh;

<comment>
What our
experts think
of the site

Reduce costs for everyone
“Designing your content presentation with
single-page navigational content sections
avoids unnecessarily reloading webpages.
Avoiding page loading, which includes the
repeated HTML template code, means less
demand on your server bandwidth and
usage of user data allowance.”
Leon Brown, web developer and e-learning content
creator at Nextpoint

opacity: 1;
z-index: 9000;
}
section:target h1{
left: 0;
}

8. Containers
Each of the content sections require a background
image to be assigned to them; placing them in the CSS
keeps the HTML uncluttered and is also easier to
manage. The navigation container is set using fixed
positioning so that it is always visible – and with a z-index
above the content sections.

#first{ background-image: url(image1.jpg); }
#second{ background-image: url(image2.jpg); }
#third{ background-image: url(image3.jpg); }
nav{
position: fixed;
display: block;
width: 100%;
padding: 2em;
text-align: center;
z-index: 9500;
}

9. Navigation links
Finally, the navigation links need to be styled with spacing
and a visible change when they are hovered over to
indicate their interactivity. Hover interaction presentation
is achieved by setting separate border styles for this state
using the hover selected. The first link in the navigation is
also set to have no horizontal padding.

nav a{
color: #fff;
text-decoration: none;
padding: 1em 2em;
margin-right: 1em;
}
nav > a:hover{
border-bottom: .5em solid #c00;
}
nav a:nth-child(1){
padding: 1em 0; }

65

DESIGNER’S
GUIDE TO

ADOBE CC
HOW PHOTOSHOP, ILLUSTRATOR AND XD CAN
TAKE YOUR PROJECTS TO THE NEXT LEVEL

66________________________________________________________________ feature

DESIGNER’S GUIDE TO ADOBE CC
In this feature key Adobe CC tools and work
processes will be discussed in relation to the
Adobe CC suite’s cross-platform functionality, as
well as offering useful tips to improve your
workflow as a designer. The Adobe CC suite
provides a great range of products that grant
access to the latest releases of the Adobe
platforms, allowing you to take your design career
to the next level. Mastery of the Adobe suite takes
patience and constant practice.
In contemporary design careers, designers are
more often than not required to design for a large
range of media such as print, apps or websites. No
longer are designers purely limited to one specific
field of interest. Graphic designers are required to
have digital and web knowledge while web
designers are required to have print media
knowledge. It is the nature of the design industry.
Although designers should find their speciality, they
can no longer ignore other design fields. As a result,
designers therefore require a larger set of tools and
platforms to edit, design and produce their
deliverables in the fast-paced design industry.
With Adobe CC designers are granted access to
the CC Master Collection. This collection gives
designers the ability to work in the latest Adobe
platforms and update new features as the Adobe
suite updates. The features are updated instantly
instead of designers having to wait months for the
next version release as with previous Adobe
versions such as CS5 and CS6. Designers also gain
access to additional useful features such as the
Adobe Typekit fonts. File hosting is another useful
function as each subscription includes 2GB of cloudbased file storage.
It is the designer’s responsibility to stay up to
date with the platforms and software they make use
of by constantly updating their skill set and learning
new tips and tricks of the trade. This feature will
provide just that with valuable professional advice
and methods to improve your efficiency and speed
as a designer.

WHAT’S NEW IN ADOBE CC?

ADOBE CC IS EXTREMELY USEFUL IN A WEB DESIGNER’S WORKFLOW
AS IT OFFERS A QUICK AND EASY SOLUTION WHEN IT COMES TO
TRANSFERRING VECTORS. YOU COULD CREATE AN ICON IN ADOBE
ILLUSTRATOR CC AND BY SIMPLY COPYING AND PASTING THE FINAL
ICON INTO ADOBE PHOTOSHOP CC IT WILL BE PLACED AS A SMART
OBJECT ON THE NEW CANVAS.
behance.net/tdp1

A quick glance at the latest updates

New dialog box – PS/AI

you but also returns any available tutorials on
Adobe Learn.

The dialog box feature will save designers
time when starting new documents. This
feature provides presets and templates as
thumbnails in six distinct categories that will
enhance the designer’s workflow. Each preset
provides the most commonly used dimensions
with customisable options.

AI redesign – AI
The new Adobe Illustrator CC received a redesign.
The updated interface incorporates a flat look and
feel with additional controls provided for colour
control or adjustments.

Search feature -PS
The search feature allows the designer to
navigate through Photoshop for specific
results. This is useful when searching for any
specific tools, as it not only finds the tools for

Text – AI
Designers are now able to import text into a path or
shape, which makes it easier to place text into
Illustrator. The selection of fonts has also become
easier with real-time previews of selected fonts.

CHOOSE A PLAN
Designers can customise their Adobe
suites to their specific requirements

Adobe does offer various plans for
prospective subscribers. The plans are
divided into three categories: Individuals,
Business and educational options for
students, teachers or institutions. Adobe
does not force designers to buy the entire
Adobe suite however, as it offers different
selections of available apps at varying
monthly subscription fees.

feature ________________________________________________________________ 67

DESIGNER’S GUIDE TO ADOBE CC

ILLUSTRATOR ICONOGRAPHY

Stand out from the crowd with your own custom icons

4 MUST-HAVE
FREE PLUGINS
Fleurify
wundes.com/JS4AI
This extension will create floral shapes in
Illustrator, which are great for developing
new patterns, logos or icons.

Close All Paths
bit.ly/2mZNggk
This useful plugin enables the designer to
close all the open paths in the document
currently opened without connecting
touching paths.

Layer Export
metaphorical.net/note/on/layer_export
Layer Export allows the designer to export
each layer in the document as separate
PNG or PDF files.

ArtOptimizer

01. Sketch

02. Trace

03. Refinement

04. Transfer

zevrix.com/artoptimizer.php
The ArtOptimizer extension reduces the
size of Illustrator links by eliminating
excess image data, while simultaneously
performing essential image adjustments
in the process. Check out the free trial

Sketch out the icons on
a piece of paper. Once
the final sketches have
been completed the
sketches should be
scanned in digitally.

Open the scanned-in
image in Illustrator CC
and start tracing your
hand-drawn icons as
vector shapes with the
Shape or Pen tools.

Once the icons have
been traced they
need to be refined in
order to ensure that
the line work is neat
and crisp.

When the icons have
been completed in
Illustrator they will
need to be transferred
into Photoshop CC as
Smart Objects.

TUTORIAL: HOW TO TRANSFER VECTOR SHAPES INTO PHOTOSHOP
Follow these steps in order to learn how to
successfully transfer vector shapes from Adobe
Illustrator CC into Adobe Photoshop CC.

01. Copy into Photoshop
The first step is to copy the vector shapes bit by
bit into Photoshop CC. Avoid placing in large
sections of vector shapes at one time as this will
flatten all the vector shapes into one big Smart
Object. Select the shape, then File>Copy>Paste into
Photoshop CC.

68________________________________________________________________ feature

02. Paste as Smart Object

03. Transform

Once the vector shape is pasted into Photoshop CC
a pop-up will occur. Paste the shape as a Smart
Object so that it can be rescaled. If the ‘Add to my
current library’ option is selected the vector shape
will be transferred into the library for future use.

Once the shape is pasted as a Smart Object it will
automatically be scalable in the Free Transform
mode. Scale the shape to your desired size and
dimensions while holding down the Shift key to
constrain its proportions.

DESIGNER’S GUIDE TO ADOBE CC

ILLUSTRATION

Check out this quick guide to help you produce better illustrations for your projects

5 PLUGINS TO
PURCHASE
Gold Rush
bit.ly/2mBnlcg
This plugin enables the designer to create
metallic, glitter and foil effects in Illustrator.
This plugin is extremely useful when
applying it to typographic approaches.

Pattern Studio
01. Concept sketch

02. Vector shapes

Before an illustration can begin digitally a concept
sketch needs to be drawn and mapped out. This
will save the illustrator the frustration of figuring
out the composition digitally.

The illustration will then be drawn out shape
by shape in Illustrator as vector shapes by
making good use of the handy Shape tool or
the Pen tool.

bit.ly/2mioQel
Pattern Studio allows the designer to create
new and interesting patterns for their
designs almost effortlessly.

Magic Exporter
bit.ly/2mSSU3q
This saves the designer time by
automatically exporting files, creating new
folders and organising your workflow.

Ai->Canvas
blog.mikeswanson.com/ai2canvas
This plugin exports vectors and images in
Illustrator directly into HTML5 using
JavaScript, making it ideal for web design.

Phantasm
03. Additional detail

04. Layers

Once the basic shapes have be drawn out in
Illustrator CC additional detail should be added
into the vector shapes, which will add depth to
the illustration.

By placing specific sections onto layers it is easier
to navigate the illustration and becomes useful
once you start importing the vector shapes into
Photoshop CC.

04. Apply

05. Repeat the process

The Smart Object will only be successfully placed
once you have pressed the Enter key to validate the
selection. Once the vector shape from Illustrator CC
has been successfully placed into Photoshop CC as
a Smart Object, the layer should be renamed and
the object can be dragged around on the canvas to
the desired location.

This process should be repeated until all the vector shapes, that form the illustration, from Illustrator are
placed into Photoshop CC as Smart Objects. You can now scale and move as desired.

fave.co/2nf4ZkG
Phantasm bridges the gap between
Photoshop and Illustrator by providing
bitmap-editing functions. All the effects are
non-destructive and editable.

feature ________________________________________________________________ 69

DESIGNER’S GUIDE TO ADOBE CC

PHOTOSHOP WORKING WITH LAYOUTS

In this section we will look at how the layout is assembled in Photoshop CC

Once the final illustration has been
imported into Photoshop CC as Smart
Objects, one final process should be
completed. Texture will be added into
the illustration as a means of
countering the flatness of vector
shapes in order to create additional
depth and visual interest. This can be

done by either adding in texture as
an image overlay or by using the
Brush tool. Create a new layer above
the Smart Object. Select the Brush
tool and set the mode to Dissolve.
Lower the Opacity and Flow, then
select a colour and brush onto the
empty layer.

W
p
When
the illustration is complete
the
typographic approach needs to be
developed. The typography plays a
big role in the website’s readability
and legibility. Since the illustration acts
as the main feature of this particular
website, the typography selected was
minimal and simplistic. When applying
typography it is important to structure
the type according to a hierarchy.
This is achieved by playing around
with different font sizes, colours
and weights.

ALIGNMEENT

Alignment in layout
is extremely im
mportant
in web design. U
Use rulers
to set a grid and a
guideline to
o help
get pinpo
oint
accurac

10 EXTENSIONS TO POWER UP PHOTOSHOP

Extend the capabilities of the image-editing tool

CSS Hat

WebZap

Subtle Patterns

Web Font

Flaticon

csshat.com
CSS Hat automatically
generates CSS code for the
layer of your choice. It
measures the layer size, font
specifications and colour.

webzap.uiparade.com
WebZap enables the designer
to create website mockups
of their designs. It’s useful
for building and editing
fast mockups.

bit.ly/2mBHZsB
This allows for a collection of
beautifully applied textures
and patterns to be
downloaded directly into
Photoshop CC.

bit.ly/2mDkNfd
This plugin enables the
designer to use Google
web fonts in Photoshop,
granting access to more
than 1,000 fonts.

flaticon.com
This platform grants
designers access to over
35,000 flat vector icons as a
Photoshop CC plugin that can
be used in your designs.

70 ________________________________________________________________ feature

DESIGNER’S GUIDE TO ADOBE CC

IMPROVE YOUR
PRODUCTIVITY
Use Smart Objects
Use as many Smart Objects as you possibly
can during your design process in order to
retain the image quality when it is rescaled
and adjusted.

Hide with layerr m
masks
Always use layer ma
ask
ks to hide
portions of your laye
er instead of
erasing the image, which is se n
as destructive editing.

Organise layers
Try to organise your layers by
labelling them and gro
g ouping
er. This
relevant layers togetthe
will save time when you e
looking for a specificc la
ayer.

ESSENTIAL EDITING Tips for interacting and designing with Photoshop CC
Artboards
This may seem like an obvious tip but it is
extremely useful. When designing different
variations it is useful to duplicate the original
artboard and create the changes on the new
artboard. You will then be able to consider the
changes on the design next to the original design.

Merge layers
Often when illustrating effects need to be applied
onto a flattened image. In Photoshop you may need
to merge all these layers while still retaining your
original layer structure. Press Cmd+Shift+Alt+E. This
will combine all your layers in one instance.

Layer opacity
Often in web design you will play around with the
opacity of text or design elements. You can quickly

adjust a layers opacity by selecting the Move tool
(V) and pressing any number on the keyboard.
The number 1 will set the opacity to 10%, 5 to 50%
and so on.

Clipping masks
Clipping masks are extremely useful as they clip a
layer into the layer beneath it. All changes made to
the layer will only appear in the dimensions of the
layer it is clipped into. This is useful when adding in
texture or detail into specific shapes or layers.

Units of measure
In design and web design you will often need to
swap between unit increments. You can quickly
adjust the units by right-clicking on your
document’s rulers. Press Cmd+R to activate
your rulers.

New brush
Quickly change the ssize of
he brush
the brush by using th
scale shortcut. Simply enlarge
and decrease your b
bru
ush
size by using the leftt and
right brackets.

Faster exports
Save time by quickly
y
exporting a file with a
predetermined
compression, level a
and
d
file format. Also assig
gn
n
a shortcut to this
feature to quicken th
he
export process.

Renamy

Adobe Color CC

Sitegrinder

Perfect Resize

PSD Cleaner

klaia.com/Renamy
This extension lets the
designer rename multiple
layers at one time by
selecting multiple layers
at once.

color.adobe.com
Adobe Color is an underrated
platform that acts as a colour
picker. It is a designer’s best
friend when selecting
beautiful colour combos.

sitegrinderblue.com
This plugin helps designers
transform their Photoshop
designs into webpages
without needing to slice or
code anything.

bit.ly/2mRXnmZ
This is a plugin that
allows images to be blown
up and resized without
losing or destroying the
image’s sharpness.

bit.ly/1tPKjK0
The more layers you have
the more messy a design can
become. Avoid the manual
heartache of organisation
and do it automatically.

feature _________________________________________________________________ 71

DESIGNER’S GUIDE TO ADOBE CC

ADOBE XD

Adobe Experience Design is an app that enables users to
effectively wireframe and prototype interactive designs

WHAT’S NEW
IN ADOBE XD?
Custom grids
Designers are now able to set up custom
grids for their artboards. A simple feature
that was lacking in the previous versions of
Experience Design.

Shapes
The new updates enable designers to
change the corners of the rectangle shape
independently from the other corners. In
previous versions all corners were linked to
one another.

Drag and drop
A much-needed feature that has recently
been added to XD is the dragging and
dropping of assets from the browser of your
choice. Images can also be dragged into
Experience Design by using embedded
images from Illustrator.

CREATING WIREFRAMES

Wireframing forms an essential part of the design
process. Wireframes should be seen as the visual
guide or foundational structure of a website.

tracing simple geometric shapes provided from the
toolbar on the left-hand side. The shapes should
then be clearly labelled in order to indicate which
section belongs to the spatial zone.

Getting started
The first step is to create a new document in
Experience Design. You will then be asked to set up
the dimensions on the desired canvas. The skeletal
framework can be plotted out onto the canvas by

process. Clearly indicate which elements are
buttons with visual cues (ie. colour changes or
shape outlines).

Alterations
Buttons
Once the foundational structure has been
completed the website’s buttons need to be placed,
which will be made use of in the prototyping

Only once the wireframe has been successfully
created, signed off and all alterations have been
made to the compositional layout, should the
prototyping process begin.

BUILDING PROTOTYPES
What is it?
A prototype should be viewed as an early model
of your product or website, solely created to test
the concept and functionality of the design and
interactions. The prototyping phase should be able
tto pick up on any logical navigational issues that
arise or design considerations overlooked, and
a
n give the designer an overall impression of
w users will interact with their interface.

Ge started
The w
wireframing process (see above) has to be
comp
pleted before the prototyping can begin in
ence Design.

Link to
t pages
The first step to prototyping is to make the
es interactive. This is done by linking
wireframe

72 ________________________________________________________________ feature

buttons to specific pages in Experience Design.
In the top left of the interface the designer will
switch from Design mode to Prototype mode.
To create a link simply select the button, drag
the pop-up arrow to the desired linking page,
then select the transition type and easing of the
page transition.

Test it out
Once all the desired links have been created
the designer can test the functionality of the
prototype by entering a live preview. This is
simply done by selecting the play button on the
top right-hand side of the interface, which will
then prompt a new pop-up. This new pop-up
will enable you to test all the created links. A
recording of the interaction can be saved in a
MOV file format.

CREATE
THE
IMPOSSIBLE
w w w. p h o t o s h o p c r e a t i v e . c o . u k

Available
from all good
newsagents and
supermarkets

ON SALE NOW
y Striking imagery y Step-by-step guides y Essential tutorials
PHOTO EDITING

DIGITAL PAINTING

PHOTO ART

TOOL GUIDES

BEGINNER TIPS

BUY YOUR ISSUE TODAY

Print edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
Available on the following platforms

facebook.com/PhotoshopCreative

twitter.com/PshopCreative

10 BEST
NODE.JS

FRAMEWORKS
NODE.JS COMES WITH A BATCH OF FRAMEWORKS
THAT SAVE YOU FROM RE-INVENTING THE WHEEL.
HERE’S A SELECTION OF BEST.

74 ________________________________________________________________ feature

10 BEST NODE.JS FRAMEWORKS

KARMA

karma-runner. ithub.io/1.0/index.html

GOOD FOR
t

.BLJOH DSPTTCSPXTFS UFTUT PG
MBSHF BQQMJDBUJPOT NBOBHFBCMF CZ
SFEVDJOH EFWFMPQFS XPSLMPBE

t

*NQSPWJOH DPEF RVBMJUZ JO QSPKFDUT
XIFSF VOJU UFTUJOH EJTDJQMJOF UVSOT
PVU UP CF MBDLJOH

TEST WEB APPS AUTOMAGICALLY “WPJE UIF UFEJVN PG MBVODIJOH VOJU UFTUT JO WBSJPVT CSPXTFST CZ IBOE
1. Install Karma

3. Create some tests

4. Kick it off

Karma is browser- and testrunner-agnostic: this
means that developers are free to mix and match
which parts of the framework are to be added to
their project. For the following steps, we will
assume that tests written using the Jasmine
framework will be run in Google’s Chrome browser.
$ npm install karma –save-dev
$ npm install karma-jasmine karma-chromelauncher jasmine-core –save-dev

Karma is useful only when provided with a set of
test cases to run. As this story is not a tutorial in the
usage of Jasmine, simply take the snippet of code
accompanying this step and place it in the folder
containing the configuration file.
describe(“A suite”, function() {
it(“contains spec with an expectation”,
function() {
expect(true).toBe(true);
});
});

When all is set, start Karma’s internal toolchain by
entering ‘karma start’ along with the name of the
configuration file to be processed. The program will
react by opening a browser window, which will
then show a selection of questions as shown in the
image below.
tamhan@TAMHAN14:~/nodespace$ karma start
my.conf.js

2. Create a configuration
The Karma team makes developers’ lives easier by
providing a full-blown configuration utility. It walks
you through the set-up process in a step-by-step
fashion, finally emitting a configuration file that can
be edited with an editor of your choice whenever
changes are needed.
tamhan@TAMHAN14:~/nodespace$ karma init
my.conf.js
Which testing framework do you want to use ?
Press tab to list possible options and Enter to move
to the next question.
> jasmine

5. Make changes
Karma can be configured to keep an eye on the file
system containing your project files. Changes to
unit tests and/or files can be used as triggers to
cause a re-run of the entire library. Keep in mind
that this can cause quite a bit of resource use in
large projects.

6. Terminate execution
Be aware that closing the browser window will not
make Karma shut up; the utility will, instead, fire off
another instance of Chrome. The only way to close
Karma involves sending it the kill command, which
is best accomplished by selecting the terminal
window and pressing Ctrl+C.

feature ________________________________________________________________ 75

10 BEST NODE.JS FRAMEWORKS

SOCKET.IO

JUIVCDPNTPDLFUJPTPDLFUJP

Even though WebSocket support in browsers has
improved, implementing communications systems
by hand is a tedious task that most developers
should avoid.
Socket.io provides a complete implementation
of a cross-platform event system. In the simplest
version, various clients connect to the server
instance hosted inside of Node.js. They then
provide events, which are fanned out to clients
using a simple API:
<script src=”/socket.io/socket.io.js”>
</script>
<script>
var socket = io(‘http://localhost’);
socket.on(‘connect’, function(){});
socket.on(‘event’, function(data){});
socket.on(‘disconnect’, function(){});

</script>
As systems grow, they tend to become overloaded
as the number of the events exchanged grows.
The product provides a more intelligent operation
mode called namespacing. In this case, clients
connect themselves to namespaces: in principle, a
namespace is like a chatroom in the IRC protocol.
Clients must then specify which namespace the
message is intended to be delivered to, thereby
eliminating overhead:
var nspIncoming = io.of(‘/incoming’);
var nspOutgoing = io.of(‘/outgoing’);
Finally, namespaces can furthermore be
subdivided into rooms to give developers even
more granular control over delivery.
In addition to the availability of a variety of
clients for JavaScript, Socket.io also comes with a

GOOD FOR
t

5SBOTNJUUJOH SFBMUJNF FWFOU
JOGPSNBUJPO BDSPTT WBSJPVT
CSPXTFSCBTFE DMJFOUT JO B IJHIMZ
FGmDJFOU GBTIJPO

t

5SBOTNJUUJOH SFBMUJNF FWFOU
JOGPSNBUJPO BDSPTT QMBUGPSN
CPVOEBSJFT BOE JOUP UIF NPCJMF
EFWJDF TQBDF

batch of SDKs for popular mobile and even
desktop platforms. This allows developers to use
their Socket.io server as a control point for clients
with various other operating systems and
programming languages.

REACT NATIVE GBDFCPPL JUIVCJPSFBDUOBUJWF
When Facebook first introduced React Native,
many developers considered the framework a
knee-jerk reaction to the success of Telerik’s
NativeScript programming environment.
The framework uses many of the abstractions
found in the desktop version of React, and
enhances them by providing a series of bindings
that connect React Native modules to the GUI
stack of the platform and to the native execution
environment. When done right, a React Native
application is all but indistinguishable from an
application created using the native tools.
When React Native first came out, it suffered
from weak documentation and the lack of an
ability to create cross-platform user interfaces. As
time went by, the weaknesses were eliminated – in
recent versions, HTML elements returned in

render() functions are automatically converted to
the various native user interfaces:
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;
class WhyReactNativeIsSoGreat extends
Component
{
render()
{ return (
<View>
<Text>
Just use native components like ‘View’ and ‘Text’,
instead of web components like ‘div’ and ‘span’.
</Text>
</View> ); } }
Another very interesting aspect of the product is
its high-performance plug-in API, which makes

NATIVESCRIPT EPDTOBUJWFTDSJQUP
Onlookers might describe React Native as the ugly
stepchild of NativeScript. Being maintained by
Telerik, NativeScript is a cross-platform product for
developers who need constant commercial
support and have a thing for high-end integrated
development environments.
In principle, the concept is much the same: a
JavaScript runtime is provided with bindings that
allow applications to interact with the underlying
operating system. NativeScript differs from React
Native in that it divides UI and logic code more
cleanly. When paired with the (relatively expensive)
online IDE from Telerik, developers can even use
WYSIWYG features while working on their code.
Developers can also use the free-of-charge
offline version hosted inside of the Node.js
environment. It provides the same compiling and

76 ________________________________________________________________ feature

GOOD FOR
t

%FWFMPQJOH DSPTTQMBUGPSN NPCJMF
BQQT XIJMF TIBSJOH MPHJD CFUXFFO
UIF WBSJPVT PQFSBUJOH TZTUFNT

t

5SBOTGPSNJOH 3FBDU BQQMJDBUJPOT
JOUP ATFEFOUBSZ POFT VTJOH
FYQFSJNFOUBM QMVHJOT GPS 8JOEPXT
BOE NBD04

adding native functionality to your program really
easy. This feature can be used to add support for
modules not supported by React Native’s wrapper
classes: please do keep in mind that a project is
usually better served by a native code base once
plug-in code starts to become extremely complex.



debugging features, but without any graphical
support for the creation of user interfaces.
Making a decision between NativeScript and
React Native is somewhat complex: if you don‘t
have existing intellectual property that needs to be
recycled, simply download evaluation versions of
both products and pick which suits you better.

GOOD FOR
t

$SFBUJOH DSPTTQMBUGPSN NPCJMF
BQQMJDBUJPOT XJUI NJOJNBM FGGPSU

t

$SFBUJOH DSPTTQMBUGPSN NPCJMF
BQQMJDBUJPOT VTJOH B XFCCBTFE *%&
XJUI WBSJPVT DPNGPSU GFBUVSFT

SOURCE: www.telerik.com

10 BEST NODE.JS FRAMEWORKS

COOKIE OQNKTDPNQBDLB FDPPLJF

GOOD FOR

HANDLING COOKIES

t

4UPSJOH DPPLJFT PO DMJFOUT
XPSLTUBUJPOT XJUI NJOJNBM FGGPSU

t

1FSTJTUJOH TNBMM BNPVOUT PG
JOGPSNBUJPO CFUXFFO JOWPDBUJPOT
PG ZPVS XFCTJUF

“O FGGFDUJWF XBZ UP TUPSF EBUB PO ZPVS DMJFOUT XPSLTUBUJPO

1. Install Cookie
Deploying Cookie to a new project could not be
easier: simply open the npm console and enter the
command shown accompanying this step.
Warnings about npm being unable to install an
optional unsupported dependency can be ignored
as they are not of significance.
tamhan@TAMHAN14:~/nodespace$ npm install
cookie

2. Start up
When the installation was successful, proceed to
instantiating the relevant elements via require()
calls. The following example uses the HTTP server
contained in Node.js in order to save us from the
effort of having to code a dedicated server.
var cookie = require(‘cookie’);
var escapeHtml = require(‘escape-html’);
var http = require(‘http’);
var url = require(‘url’);

3. Create a request handler
Npm’s primitive HTTP server requires the presence
of a request handler function that gets invoked as
requests come in. In our case, onRequest is created
inline and is passed into http.createServer in order
to start a server listen on port 3000.
function onRequest(req, res) {

var cookies = cookie.parse(req.headers.
cookie || ‘’);
. . .
}
http.createServer(onRequest).listen(3000);

4. Parse incoming cookies
The next step involves parsing the cookie header
field to find out whether the current request comes
with cookie information. The res object is set up to
return HTML mark-up to the client’s browser.
function onRequest(req, res) {
var cookies = cookie.parse(req.headers.
cookie || ‘’);
var name = cookies.name;
res.setHeader(‘Content-Type’, ‘text/html;
charset=UTF-8’);
if (name) {
res.write(‘<p>Welcome back, <b>’ +
escapeHtml(name) + ‘</b>!</p>’);
} else {
res.write(‘<p>Hello, new visitor!</p>’);
}
}

5. Set a cookie
The next step involves writing a cookie to the
client’s browser. This is accomplished by sending a

specific flag in the HTTP header; in addition to
specifying the content to be written, web
applications must also define how long the cookie
should be kept in remanent memory.
if (name) {
res.setHeader(‘Content-Type’, ‘text/html;
charset=UTF-8’);
res.write(‘<p>Welcome back, <b>’ +
escapeHtml(name) + ‘</b>!</p>’);
} else {
res.setHeader(‘Set-Cookie’, cookie.
serialize(‘name’, String(“Hello World”), {
httpOnly: true,
maxAge: 60 * 60 * 24 * 7 // 1 week
}));
res.statusCode = 302;
res.setHeader(‘Location’, req.headers.
referer || ‘/’);
res.end();
}

6. Test the application
With that, enter node index.js and navigate to the
URL http://localhost:3000/. During the first
loading process, the website will reload once as the
values of the cookie are written to the browser.
After that, the stock user ‘Hello World’ will be
greeted at every reload.

feature ________________________________________________________________ 77

10 BEST NODE.JS FRAMEWORKS

SAILS.JS TBJMT TDPN
MVC frameworks for Node.js come dime a dozen.
Sails.js puts itself apart from the rest of the pack by
its high-performance ORM engine. It supports four
databases out of the house, and can be connected
to more than 30 others via various adapters
provided by the developer community.
While Sails.js appears to be more complex than
its competitors at first glance, the increased
complexity is more than offset by the sheer power
of the framework. For example, REST APIs can be
created using a variety of blueprint utilities that
generate most of the backend code for you.
One really neat feature can be found in the /api/
responses folder, where a group of JavaScript files
provide the standard response logic used to
handle various types of HTTP response with
minimal effort. Another nifty aspect involves the
creation of the actual views; Sails.js forgoes the
deployment of a custom templating engine, and
settles for the well-known and widely accepted EJS
engine instead.
Finally, keep in mind that Sails comes with a full
commercial support option starting at $600/
month. If a subscription is taken, the core team
behind Sails is always at your disposal if problems
ever do occur.

$SFBUJOHBXFCBQQMJDBUJPOXJUI
B3&45”1*JOUFSGBDFBOEWBSJPVT
EBUBCBTFJOUFHSBUJPOPQUJPOT

BUNYAN

THINK
ABOUT
GOING NATIVE!

OQNKTDPNQBDLB F

JUIVCDPNUSFOUNOPEFCVOZBO

Keeping tabs on log files is helpful in a variety
of situations – in addition to figuring out what
happened during a hack, you can also collect
information on both user behaviour and
system performance.
Sadly, hand-written logging programs tend to
reach their limits as the amount of information to
be managed becomes larger and larger.
Fortunately, the Bunyan team provides a welltested workaround.
Enabling Bunyan in application is really easy:
once the framework is installed via npm, simply
deploy the following bit of code that also shows
how to emit a message:

GOOD FOR
t

protocol: ‘file:’,
slashes: true
}))
Developers are largely left to their own devices
t $SFBUJOHBEFTLUPQBQQMJDBUJPO
VTJOHXFMMLOPXOXFC
when creating the page content; Electron provides
UFDIOPMPHJFT
a recent version of the Chromium rendering
engine, which can be combined with one or more
After the discontinuation of AppJS,
JavaScript GUI engines responsible for
developers seeking to create native
creating a native-looking version of the
applications using JavaScript were
various widgets found in the
left sitting in the dark. Electron
underlying platform. Code is
– incidentally managed by
executed inside of the V8 runtime
GitHub – plans to continue where
environment, which ensures
Even though Electron
the AppJS team left off.
decent performance.
looks like a web designer’s
dream come true, finding
In general, applications based
Another interesting aspect of
developers for a native
on Electron behave much like a
the runtime environment is its
solution can be easier
normal webpage. The main
ability to interact with the native
in some cases.
difference is that the developer
user interface. For example, the
needs to create an instance of the
following snippet creates the well-known
BrowserWindow class, which then holds
symbol blinking animation commonly used in
the program’s contents being displayed
Windows 7’s task bar:
by the runtime.
const {BrowserWindow} = require(‘electron’)
const {app, BrowserWindow} =
let win = new BrowserWindow()
win.once(‘focus’, () => win.
require(‘electron’)
flashFrame(false))
let win
win.flashFrame(true)
function createWindow () {
win = new BrowserWindow({width: 800,
height: 600})
Actual content is then provided via one or more
HTML files, which can be loaded into the window
using its loadURL method:
win.loadURL(url.format({
pathname: path.join(__dirname, ‘index.
Sending email from a web application usually
html’),
turns out to be quite a bit of work. Fortunately,
NodeMailer works around the problem; it provides
developers with an variety of plug-ins that
integrate into your email server infrastructure.
This means that you can provide your own
SMTP server, which is then used for sending
messages. In addition to that, the product can
var bunyan = require(‘bunyan’);
also be configured to use services like Google’s
var log = bunyan.createLogger({name:
Gmail via predefined adapters:
‘myapp’});
let transporter = nodemailer.
log.info(‘hi’);
createTransport({
log.warn({lang: ‘fr’}, ‘au revoir’);
service: ‘gmail’,
It takes but a cursory look at the structure of
auth: {
the API to convince yourself of similarities to
user: ‘gmail.user@gmail.com’,
pass: ‘yourpass’ }
Android’s Logcat system – log messages can be
});
grouped in various priority levels to simplify
The main obstacle involves the licensing used:
post-facto analysis.
recent versions of the framework fall under the
Bunyan really shines due to its command line
EPL license, which is further documented at
utility which is shipped with the rest of the
bit.ly/2mxHLou. Fortunately, older versions are
framework. It takes the log files, and provides you
available under the well-known MIT licence, with
with a convenient way to analyse their contents
commercial licensing being available on request.
without having to create a textual parser by hand.
For example, limiting yourself to warnings is
accomplished by passing in -l:
$ node hi.js | bunyan -l warn
[2013-01-04T19:08:37.182Z] WARN: myapp/40353
t 4FOEJOHFNBJMGSPNB/PEFKT
on banana.local: au revoir (lang=fr)

GOOD FOR

NODEMAILER

GOOD FOR
t

ELECTRON FMFDUSPOBUPNJP

&GGFDUJWFMZLFFQJOHBUBCPOMPH
mMFTFNJUUFECZMBSHFTZTUFNT

78 ________________________________________________________________ feature

GOOD FOR

BQQMJDBUJPOXJUIPVUHPJOHDSB[Z

10 BEST NODE.JS FRAMEWORKS

TESSEL UFTTFMJP
A dedicated co-processor
makes handling time-sensitive
tasks easy by abstracting
critical code from the
JavaScript runtime.
Ethernet and Wi-Fi
transmitters make
connecting a Tessel 2 to
existing networks a
breeze. Wi-Fi configuration
is handled by the t2 utility.
Dedicated ports enable you
to add various dedicated
hardware extensions from the
Tessel ecosystem. A variety of
sensors are available.

As the first-generation Tessel was somewhat
limited due to its underpowered processor, the
Tessel team packed out the big guns for the second
generation. The Tessel 2 has an ample amount of
memory for running JavaScript logic, and comes
with a dedicated second core for handling real-time
tasks. In short, it is the most efficient way to control
hardware from JavaScript.

HASSLE THE TESSEL!

A 520MHz processor ensures
that ample performance is
made available for complex
measurement and process
control tasks.

.BOZUBTLTBSFCFUUFSTFSWFECZBNPSFQPXFSGVMQSPHSBNNJOHMBOHVBHF

GOOD FOR
t

$SFBUJOHEJBHSBNTBOEPUIFS
DPNQMFYWJTVBMJTBUJPOTGPS
FNCFEEFEEFWJDFTXJUI
NJOJNBMFGGPSU

t

3FVTJOHMPHJDCFUXFFOEFTLUPQT
BOEFNCFEEFETZTUFNTXJUIPVU
IBWJOHUPEVQMJDBUFDPEF

1. Deploy support software
In addition to the LTS version of Node.js, the Tessel
runtime environment requires the presence of a
few support libraries that allow your host
workstation to access the process computer. On
Ubuntu, installing the utilities is easily accomplished
via a few command-line utilities.
apt-get install libusb-1.0-0-dev libudev-dev
npm install -g t2-cli
sudo t2 install drivers

2. Verify Tessel presence
After successfully executing the steps, a command
line utility named T2 awaits your orders. Plug the
Tessel into your workstation, and wait 30 seconds
for the booting process. After that, invoke t2 list to
check whether the process computer was
successfully detected by your workstation.
t2 list

3. Create a new project
Tessel projects should be created with the t2 init
command. Switch into a folder where the project
should reside, and invoke the commands
accompanying this step to make the t2 utility
create a complete project skeleton for you.
mkdir tessel-code
cd tessel-code
t2 init

4. Add some code
In the next step, a blinking program should be
created to test hardware functionality. Its code

should not provide any surprises to developers
who are experienced in handling Arduinos or
other process computers.
var tessel = require(‘tessel’);
tessel.led[2].on();
setInterval(function () {
tessel.led[2].toggle();
tessel.led[3].toggle();
}, 100);
console.log(“I’m blinking! (Press CTRL + C to
stop)”);

5. Run the code
The final step involves deploying code to the
process computer. Simply execute ‘run’. In addition
to a USB connection, you can also set up Wi-Fi.
Keep in mind that ‘run’ copies the process control
program to the RAM; a different command must
be used if you want it to survive a cold reboot of
the process computer.
t2 run index.js

feature ________________________________________________________________ 79

Developer tutorials

Code custom post
types in WordPress
Sort your content semantically and improve your admin panel
organisation with custom post types

80

DOWNLOAD TUTORIAL FILES
www.filesilo.co.uk/webdesigner

Developer tutorials

C

ustom post types are a powerful feature in
WordPress that can streamline your
administration process and organise your
content into groups when other
taxonomies aren’t distinct enough. Used in combination
with post metadata, templates for archives and
single-page templates, you can add detail to your
front-end content while maintaining a sleek, accessible
and user-friendly admin panel.
Post types are primarily used for content that is
semantically different to the rest, typically when the item
can be set in a particular format like recipes or tutorials. In
this tutorial, we’ll be using events as an example. An event
always has a date, time and location, and while you could
publish them as normal posts and assign a category to
distinguish them from the other posts, the administration
process can eventually become muddled and
disorganised. Using custom post types, the events can be
removed from the flow of normal blog posts and treated
separately, and it will make it obvious for authors where to
add a new event in the admin panel. We can prompt the
author to fill in the required information using meta fields,
and use custom templates to display the list of events in
an archive with an expanded view in single-post format.

4. Add a post

‘public’ => true,
‘has_archive’ => true,
) ); }

2. Admin panel display
By default, the panels in the admin panel display will
appear as a regular but stripped-down post. You will
already be able to create and save items as your custom
post type. They will be saved similarly to normal posts
but without revisions.

Add your first Event post. You can see that currently
there are only basic options with title and content. The
only screen options available are Slug, Layout and
Additional settings. Viewing the post will display it in the
theme’s single.php format. We’ll expand and customise
these later.

3. Flush the permalinks
If you get ‘not found’ or incorrect pages for your new
post type archive and single pages, try flushing the
permalink cache. Go to Settings>Permalinks, select a
different structure and save the change. Then revert
back to your previous settings. This should get those
new links working.

1. Initialise custom post types
Use the code below inside functions.php to set up
your post type. The name ‘svm-events’ will also be the
archive slug. The ‘public’ and ‘has_archive’ attributes
will give the post types its own archive page and admin
panel display.

add_action( ‘init’, ‘create_post_type’ );
function create_post_type() {
register_post_type( ‘svm-events’,
array(
‘labels’ => array(
‘name’ => __( ‘Events’ ),
‘singular_name’ => __( ‘Event’ ) ),

Use a unique name

Choosing a unique custom post type name like
‘svm-events’ will create less chance of conflict
with other post types, especially if you’re writing
a plugin!

Left

Once the custom post type is initialised, the edit screen appears in the
admin panel. Add new events as you would posts!
Top left

The edit page by default is a stripped-down version of normal posts and
pages: title and content with no tags categories or revisions
Top right

The default post view uses the theme’s single.php template, with a URL
structure of [domain]/[post type name]/[post slug]

81

Developer tutorials
Code custom post types in WordPress

7. Custom single template
Create a copy of your theme’s single.php file and call it
‘single-svm-events.php’. The theme will use this new
template for displaying your single-view events. Use the
loop as usual, and customise the code inside the loop to
decide how your event will display:

<article id=”post-<?php the_ID(); ?>” <?php
post_class(‘event-container’); ?>>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</article><!– #post-<?php the_ID(); ?> –>

8. Add supported functions
Add thumbnail support, author control and versioning to
your custom post type – make sure that thumbnails are
enabled in your theme! Alter the original initialisation
array in functions.php to add the following code after the
‘has_archive’ => true, line and before the closing brackets:

5. Archive page population

6. Custom archive template

Your archive page will automatically display the custom
post types at /svm-events URL. By default it will use the
theme’s archive.php file for the layout. As you can see it
will look like your other posts for now, but we’ll customise
this next.

Create a copy of archive.php and save as archive-svmevents.php, where svm-events is your custom post type
name. The theme will then use this template instead for
showing your list of events. You can use the WordPress
loop as usual; replace the contents of the loop with the
layout of your choice:

Flushing permalinks

If you’re creating a plugin and can’t manually flush
permalinks, use a function that automatically does
it on activation. Look up the use of the flush_
rewrite_rules() function on the WordPress Codex.

<article id=”post-<?php the_ID(); ?>” <?php
post_class(‘event-container’); ?>>
<h2><a href=”<?php the_permalink(); ?>”><?php
the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</article><!– #post-<?php the_ID(); ?> –>

Top left

Add a new field group from the Custom Fields panel. Use multiple field
groups to organise meta boxes for different areas of the edit page
Top right

Add a field for each piece of metadata. The field name is the variable used
with the get_field() function to display it in your templates
Right

New fields display on the edit screen once saved. Use the position option
on the field group to choose where on the edit screen they appear

82

‘supports’ => array( ‘title’, ‘editor’,
‘author’, ‘thumbnail’, ‘revisions’),

9. Add thumbnails to template
To allow thumbnails to display, add the following code
into your archive and single pages where you want the
thumbnails to display. The surrounding IF statement will
check if there is a featured image set before trying to
display it.

<?php if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif; ?>

Developer tutorials
Code custom post types in WordPress

Using post
type queries
A normal loop will serve
just fine in most
instances, but if you want
to use your custom post
types for something other
than the usual, querying
by post type as in step 19
will give you a more
customisable return array.
In this instance, with
events, it could be useful
to query the post types
and return them in order
of when the event is
scheduled, not when the
post itself was published.
Event pages are usually
ranked in date-ascending
order, with the next event
coming up at the top of
the list. Similarly, you
could use this type of
query to create a sidebar
widget for upcoming
events. By using the
meta_key, order_by and
order parameters, you
can select and order by
any ACF field.

14. Add tags to post type
Add the following at the end of your register_post_type()
array before the closing brackets to add support for tags.
The default tag box will now appear when adding or
editing a new event post type.

‘taxonomies’ => array( ‘post_tag’),

15. Create custom taxonomy
Define a new taxonomy to categorise your events by
Event Type by adding the following PHP in functions.php
after the create_post_type() function. This will add a new
Event Type taxonomy that acts like categories and adds a
new meta box on the Events edit screen.

10. Advanced Custom Fields
Distinguish events from other post types: attribute
metadata to them and customise the admin panel and
the output. Install the Advanced Custom Fields plugin for
a comprehensive way to add, save and customise
metadata fields. Add your new field group to event post
types using only location rules.

11. Use metadata in templates
Once you’ve created some fields through ACF, they’ll
appear on your Event editor page. Save some metadata
onto your Event posts, and use the following code within
the archive and single loops to display the output where
‘event_link’ is the name of the ACF field:

<?php if (get_field(‘event_link’) != “”;
?>echo get_field(‘event_link’); ?>

12. Add labels
Further customise your admin panel by changing more

labels. Look up the WordPress Codex for the full list of
labels available in the register_post_type() function. Labels
that you set here will be used in the admin panel display.
Add these after the ‘singular_name’ => __( ‘Event’ ) ), row:

‘menu_name’ => __( ‘Event Listings’ ),
‘name_admin_bar’ => __( ‘Event’ ),
‘add_new’ => __( ‘Create New Event’),
‘add_new_item’ => __( ‘Creating New Event’),
‘new_item’ => __( ‘New Event’ ),
‘edit_item’ => __( ‘Edit Event’ ),

13. Rewrite URL slug
Your custom post type name, for example ‘svm-events’,
may not be the most URL-friendly. Add the following code
before the closing brackets of the register_post_type()
function in functions.php to change the archive url to
‘/events’ while keeping the same post type name. Flush
the permalinks afterward as in step 3.

‘rewrite’ => array( ‘slug’ => ‘events’ ),

add_action( ‘init’, ‘create_event_taxonomy’ );
function create_event_taxonomy() {
register_taxonomy(
‘event-type’,
‘svm-events’,
array(
‘label’ => __( ‘Event Type’ ),
‘hierarchical’ => true,
));}

16. Display taxonomies
Use the PHP code below on your archive-svm-events.php
and single-svm-events.php to display a list of event types
set for each event and tags. In the case that no Event
Type or tags are set, it will display blank, otherwise it will
display a comma-separated list for each.

echo get_the_term_list( $post->ID,
‘event-type’, ‘Event Type: ‘, ‘, ‘, ‘’ );
echo get_the_term_list( $post->ID, ‘post_tag’,
‘Tagged: ‘, ‘, ‘, ‘’ );

83

Developer tutorials
Code custom post types in WordPress

Top

The sidebar menu is updated with a custom icon, Tags and
Event Type links, and has been positioned under Posts. Labels
have meaningful alternatives
Right

Single view has been expanded with custom field output and
taxonomies, and styled to put an icon on the title to add visual
identification as an event

17. Change admin panel order

20. Add events to main blog query

21. Get post type on blog

You can choose what position your custom post types
appear in the menu by adding the following code to the
end of the register_post_types() array before the closing
brackets. A position of 5 will put it after Posts, 10 after
Media, 20 after Pages and so on.

Use this code in your functions.php file to include the
svm-events post type in the main blog with regular posts:

Use get_post_type() within your blog loop to return the
post type. This is useful if you want to display the event
posts differently to regular posts when they’re within the
main loop. Use the following IF statement to display
different content depending on the post type:

‘menu_position’ => 5,

18. Change admin panel icon
Update the icon that displays next to your custom post
type on the admin panel by adding the following code to
the end of the register_post_types() array before the
closing brackets. Insert your own icon URL or use
WordPress’ pre-installed Dashicons for a selection of
matching icons:

‘menu_icon’ => ‘dashicons-calendar-alt’,

19. Query by post type
Use a query to alter the loop, and display your custom
post types in order of an ACF field – like event_date rather
than when the event post was published. You could use
this query in a sidebar to make a quick-view list of your
events for other pages:

$the_query = new WP_Query(array(
‘post_type’ => ‘svm-events’,
‘posts_per_page’ => -1,
‘meta_key’ => ‘event_date’,
‘orderby’ => ‘meta_value’,
‘order’
=> ‘ASC’ ));
if( $the_query->have_posts() ):
while( $the_query->have_posts() ) : $the_
query->the_post();
//content here
wp_reset_postdata(); endwhile; endif;

84

add_filter( ‘pre_get_posts’, ‘change_blog_
query’ );
function change_blog_query( $query ) {
if ( is_home() && $query->is_main_query() ||
is_feed())
$query->set( ‘post_type’, array( ‘post’,
‘svm-events’ ) );
return $query;
}

if ( get_post_type( get_the_ID() ) ==
‘svm-events’ ) {
//display events format
} else {
//display regular post format
}

Special offer for readers in North America

6 issues FREE
When you subscribe

FREE

resource
downloads
eve y issue

O

T e o ly magazine
n ed to design
and develop
an
stt n ng websites

Quote

r

Online at

www.imaginesubs.co.uk/wed

*Terms and conditions

This is a US subscription offer. You will actually be charged £80 sterling for an annual subscription. This is equivalent to
$105 at the time of writing, exchange rate may vary. 6 free issues refers to the USA newsstand price of $14.99 for 13 issues being $194.87, compared
with $105 for a subscription. Your subscription starts from the next available issue and will run for 13 issues. This offer expires 31 May 2017.

USA3
for this
exclusive
offer!

Developer tutorials

Add facial recognition
into a photo library
Use tracking.js to add intelligent functionality to a website or
app by having it understand and respond to visual images

86

DOWNLOAD TUTORIAL FILES
www.filesilo.co.uk/webdesigner

Developer tutorials

B

eing able to interpret and react to images
has many powerful applications and can
greatly improve the user experience of a
page or app. Its uses range from facial
recognition, perhaps the best-known example of which is
Facebook’s friend tagging, through to camera-based
control systems similar to the Xbox Kinect.
The underlying principles of image processing, or
computer vision, are complex, and not something we
would want to implement from the ground up when
creating an app. Fortunately, there are a number of
libraries for the web that have done the hard work for us,
making the functionality surprisingly straightforward to
use and providing high-performance implementations.
One such library is tracking.js (trackingjs.com), which
provides a range of APIs for common computer vision
tasks such as feature detection and colour recognition.
These provide the building blocks to bring a wide
range of clever functionalities to our pages and apps
without needing to think about algorithms to read
individual pixels from an image.
In this tutorial, we’ll use the object-tracking API
provided with tracking.js, along with some of its prebuilt classifiers designed to detect facial features, in
order to successfully build facial recognition into a
simple photo gallery.

1. Install tracking.js
If you have Bower, you can use it to install tracking.js from
the command line. Otherwise you can download it from
trackingjs.com. Once you’re done, navigate to the
‘tracking’ directory.

C:\Users\You\Path> bower install tracking.js

2. Set things up
Before we begin building our page, we need to set up a
local HTTP server, as tracking.js won’t work without one.
For this tutorial, we’ll use the one available via npm. If you

already have Node downloaded and installed, install and
run your HTTP server from the command line, then
navigate to http://localhost:8080/.

C:\Users\You\Path\tracking> npm install
http-server
C:\Users\You\Path\tracking> http-server

3. Create the page
The structure of the page we’ll build will be a dynamic
grid of images, with a simple header and background.
We’ll use JavaScript to display the images, so for now let’s
create an index.html file to serve on your HTTP server,
import our own CSS and JavaScript in the HTML head
and add a basic page title to the body.

<head>
<meta charset=”utf-8”>
<link rel=”stylesheet” href=”gallery.css”>
<script src=”gallery.js”></script>
</head>
<body>
<h1 class=”gallery-title”>Face Finder</h1>
</body>

4. Import tracking.js
We now need to import the tracking.js libraries. In
addition to the main library, we’ll include the feature
classifiers for face, eyes and mouth, which are packaged
as separate JavaScript files. We’ll add these scripts to our
HTML head.

<!– Import tracking.js library and facial
classifiers –>
<script src=”tracking/build/tracking-min.
js”></script>
<script src=”tracking/build/data/face-min.
js”></script>
<script src=”tracking/build/data/eye-min.
js”></script>
<script src=”tracking/build/data/mouth-min.

js”></script>

5. Style the page
Now we have a blank page with only two words on it.
Let’s format them and add a basic coloured background.
We’ll modify gallery.css to do this, and once done,
that’s all the static elements on the page that need to
be created.

.gallery-title {
margin-top: 2vw;
margin-bottom: 2vw;
text-align: center;
font-size: 15vw;
font-family: “Trebuchet MS”, sans-serif;
color: rgb(47,79,79);
}
body {
background-color: rgb(230, 226, 229);
}

6. Define the images to appear
Now we need to start writing JavaScript to dynamically
load images onto the page. Let’s create a variable listing
our image paths, and listen for a window.onload event to
know when to start loading the images.

var imageGallery;
var imageList =
[
“images/1.jpg”,

Web components

We’ve chosen to use JavaScript to implement
the tracking.js functionality for browser
compatibility. However, the library also
provides web component support by extending
native elements as an alternative method.

Left

Download the tracking.js library files from trackingjs.com/ or install
using Bower from the command line
Top left

Running the npm HTTP server from the command line enables us to
serve up pages accessible at localhost:8080, avoiding issues with CORS
Top right

We’ve created a page and added images dynamically to it, but they aren’t
sized or laid out correctly. We’ll need some CSS to fix this

87

Developer tutorials
Add facial recognition into a photo library

“images/10.jpg”,
“images/12.jpg”,

]
window.onload = function() {
imageGallery = createGallery(imageList); }

7. Dynamically load the images
Now we need to write a createGallery function to
add the images from the list onto the page. We’ll have
this return a list of the objects it created, which will
become important later as we’ll need to be able to easily
access them.

/* Take an array of image paths and add each
one to the page, returning their object
references */
function createGallery(images) {
var imageobjects = [];
images.forEach(function(image) {
var imageobject = createImage(image);
imageobjects.push(imageobject);
});
return imageobjects; }

8. Add an individual image
What’s now missing is the createImage function, which
adds an individual image to the DOM. More precisely,
we’ll actually have it create a div of class image-container,

Waiting for
images to load

When adding images to the page dynamically with
JavaScript, we need to ensure they’ve fully loaded
before trying to manipulate them with tracking.js.
Therefore, we tie the track function to a ‘load’ event.

which holds the image itself. This container will be used
later to hold boxes highlighting faces in the image.

/* Create a new image within a div from the
specified source */
function createImage(src) {
var image = document.createElement(“img”);
var div = document.createElement(“div”);
div.classList.add(“image-container”);
image.src = src;
div.appendChild(image);
document.body.appendChild(div);
return image;
}

9. Grid layout
If we load the page now, we have a set of images, but
they’re inconsistently sized and formatted badly, unlike a
real image gallery. Let’s add some CSS to apply a grid
layout. This can be tweaked to adapt to screen size, or
you could use Bootstrap.

.image-container {
display: inline-block;
margin-bottom: 8px;
margin-right: 8px;
width: calc(25% – 8px);
}
img {
width: calc(100%);
}

10. Trigger facial recognition
Now we’re ready to start adding facial recognition to the
page. We’ll do this by adjusting our page load function to
also iterate through the list of image objects on the page
and call a function on each one, which performs the facial
feature tracking.

window.onload = function() {

Top left

We’ve developed a responsive grid layout to the images.
Our facial recognition will need to react to this as the
position and size of features will change
Top right

We can switch the tracker to detect eyes instead of faces.
Eye is another built-in classifier that comes with tracking.js
Right

We can inspect the page to see how the boxes identifying
faces have been added to the DOM. Within each
image-container div, we have the image itself and a div for
each face identified

88

imageGallery = createGallery(imageList);
trackAllImages(imageGallery);
}
function trackAllImages(imageArray) {
imageArray.forEach(function(image) {
trackImage(image);
});
}

11. Apply tracking to an image
Now let’s take a look at the individual image tracking
function. This is where tracking.js comes into play. We’ll
create a tracking.ObjectTracker object and call its track
function on our images. The ObjectTracker takes a
constructor that specifies which feature classifiers we
want to use.

function trackImage(image) {
image.addEventListener(“load”, function() {
var tracker = new tracking.
ObjectTracker([“face”]);
tracker.setStepSize(1.7);
tracking.track(image,tracker);
});
}

12. React to tracking events
The ObjectTracker generates ‘track’ events when it finds
features in the image that match one of the specified
classifiers. These events carry data which provides a
bounding box around the feature. We need to extend the
trackImage function to handle these events.

tracker.on(“track”, function(event) {
event.data.forEach(function(box) {
window.plotBox(image, box.x, box.y, box.
width, box.height);
});
});

Developer tutorials
Add facial recognition into a photo library

Setting up a
HTTP server
If you haven’t already set
up a local web server for
development, it’s well
worth doing so, as
various technologies will
require this to work
correctly. It’s the same for
tracking.js, as it will not
work if you try to run
your pages from your
local filesystem due to
Cross-Origin Resource
Sharing (CORS) policies in
the browser. A local
server will enable you to
test functionality in an
environment equivalent
to hosting it online,
accessed via the URL and
port localhost:8080.
There are plenty of
free HTTP servers out
there. The node
http-server, available at
npmjs.com/package/
http-server, is extremely
lightweight and as good a
starting point as any.
Don’t worry, you don’t
need to be familiar with
Node.js to use it. Follow
the simple instructions to
install, and you’ll be ready
to go in no time.

13. Create the boundary box

15. Resize the page

17. Re-run the tracking

Next we need a function that displays a box on the page
showing where tracking.js found a feature. We’ll create
the plotBox function, which will add a div to the parent div
of the image, sized according to the boundary data
tracking.js gave us.

Now our facial recognition is up and running! When the
page is loaded, you’ll see boundary boxes displayed on
every image where a face was found. However, there’s a
problem to overcome. Resizing the page scales the
images, but does not re-trace the facial recognition. Let’s
start by removing the incorrect boxes when we resize.

When our resize timer expires, it’s time to re-run the facial
recognition. Since we already have an event handler for
each image, the easiest way would be to fire a ‘load’
event again for each image. So to keep things simple, let’s
do just that.

/* Plot a box over a specfied image */
function plotBox (element, x, y, w, h) {
var box = document.createElement(‘div’);
element.parentNode.appendChild(box);
box.classList.add(‘feature’);
box.style.width = w + ‘px’;
box.style.height = h + ‘px’;
box.style.left = (element.offsetLeft + x) +
‘px’;
box.style.top = (element.offsetTop + y) + ‘px’;
};

14. Style the boundary box
The div we created will be invisible by default, so let’s style
it with CSS to display it as a white-bordered box. You’ll
notice that when the plotBox function created it, we
added the feature class to enable us to do this. We’ll also
apply absolute position so it overlays the image.

.feature {
border: 3px solid rgb(255,255,255);
position: absolute;
}

window.onresize = function()
{
var features = document.getElementsByClassN
ame(“feature”);
while(features[0]) {
features[0].parentNode.
removeChild(features[0]); } }

16. Deal with resizing
Now we need to re-run the facial recognition once the
page has been resized. The tracking algorithms are
computationally expensive, so we don’t want to tie this to
an onresize event, which would cause it to run repeatedly
while the page is being resized. Instead, let’s set a timer to
detect when the resizing has finished.

var resizeTimer;
window.onresize = function()
{

clearTimeout(resizeTimer);
resizeTimer = setTimeout(“retrackAllImages(
imageGallery);”, 500); }

function retrackAllImages(imageArray) {
imageArray.forEach(function(image) {
image.dispatchEvent(new Event(“load”));
}); }

18. Find other features
Now that we have a fully working page using tracking.js,
we can experiment with the functionality to learn more
about how the library works. The trackImage function
encompasses the functionality we might want to change.
For example, we can add additional classifiers to detect
eyes and mouths, which are provided with tracking.js. As
you start to look for more precise details, you may start to
see some false positives or missed features. You’ll also
see a performance impact.

var tracker = new tracking.ObjectTracker([“fac
e”,”eye”,”mouth”]);

19. Track colours
We can also switch the type of tracker completely. Let’s
say we want to pick out colours from the images instead.
We can replace the ObjectTracker with a ColorTracker.
ColorTracker doesn’t support setStepSize, so you’ll need

89

Developer tutorials
Add facial recognition into a photo library

Under the hood of
computer vision
tracking.js provides a high
level of abstraction, but
beneath its easy-to-use
exterior, there are some very
low-level operations going on.
Computer vision requires us to
analyse images at the pixel
level, applying various
algorithms to identify patterns
and characteristics. It isn’t an
exact science, and the field is
continuously evolving as these
algorithms are made quicker,
more precise and tailored to
new use cases.
Understanding what’s
happening behind the scenes
isn’t easy, but gives you
greater power to customise
the library to your individual
needs. For example, you could
create your own object
trackers beyond those for face,
eyes and mouth that come out
of the box.

to remove that line, but otherwise the ColorTracker will
generate the same events as ObjectTracker. It also returns
the colour in the event data as well as the bounding box.

var tracker = new tracking.
ColorTracker([‘cyan’]);

20. Track custom colours
tracking.js comes with built-in support for finding cyan,
yellow and magenta, but we can make a few changes to
track any colour we want based on RGB values. Let’s try
defining the criteria for identifying a red region.

tracking.ColorTracker.registerColor(‘red’,
function(r, g, b) {
if (r > 150 && g < 50 && b < 50) {
return true; }
return false;
});
var tracker = new tracking.
ColorTracker([‘red’]);

21. What next?
There are plenty more things you can do with tracking.js.
We’ve used it for static images, but you can also apply its
trackers to videos, or to live webcam input. The trackers
can also track video elements, and will generate ‘track’
events in the same way they do for images.

tracking.track(myVideo, tracker, { camera:
true });

How to find out more
The team behind tracking.js have put together a
great set of tutorials on the project’s homepage
(trackingjs.com/), which are well worth exploring
to discover more of what the library can do.

90

Discover another of our great bookazines
And save 20% on your first order when you buy direct from us
BRAND
NEW!

otoshop
eative Annual
over the most creative projects
Photoshop CC, CS and Elements
s, as this collection of practical
es is bursting with essential
s and step-by-step tutorials.

you buy direct from us

not available anywhere else

super-safe ordering

www.imagineshop.co.uk
Magazines, back issues & bookazines.
Use the code “WELCOME20” when you make your first order to receive your discount

Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com

+44 (0)1225 687832

COURSE LISTINGS
Featured:

Makers Academy
www.makersacademy.com
Twitter : @makersacademy
Facebook: MakersAcademy

About us
Makers Academy is a fully immersive,
12-week computer programming
boot camp. With their help, you will
learn the principles of software
craftsmanship and they’ll also help you
get your first job. They’re Europe’s
number-one developer boot camp,
running highly selective classes of the
offline course every six weeks, and a

remote course every 12 weeks. They
take a ‘learn by doing’ approach,
through project-based work. Students
are encouraged to work in pairs on
coding challenges, with weekly tests,
culminating in a final project. They help
set up job interviews via their network
of hiring partners including
ThoughtWorks and Deloitte Digital.

Europe’s #1 developer
boot camp, running highly
selective classes of our
offline course every six
weeks, and a remote course
every 12 weeks


.

What we offer
s 0OTJUF
12 week full-time coding
course from the on-site
campus in London

s 3FNPUF
12 week full-time coding
course remotely from home

5 tips from the pros
3FTFBSDI BMM ZPVS PQUJPOT
Do your research into lots of
different boot camps, read the
reviews, read the student blogs
and reach out to previous
graduates and speak to them.
%BCCMF JO DPEF
Although the course is for
beginners, it’s important that
you’ve started to at least try to
learn to code on your own.
1SFQBSF GPS UIF JOUFSWJFX
We send you everything to
prepare for the interview. Make


92

sure you go through all the
resources and give yourself two
weeks to prepare.
#VEHFU
The course is full-time for three
months and it can take up to
three months after to secure a
job. It’s important to financially
plan for the period you won’t
be working.
7JTJU VT
Book a visit and come visit us!
Come see the Makers Academy
HQ in person and learn more.

Richard Watkins
Science teacher to junior developer
at Shift
Makers Academy was frustrating and
daunting but amazing and I wouldn’t
change any of it. I landed the job 28
days after finishing the course.

Ina Tsetsova:
Email campaign manager to
graduate software developer at
ThoughtWorks
I found a really nice community and
I’ve met really cool people. I got a job
quicker than I expected.

Hannah Carney
3D designer to junior developer at
Play Consulting
Makers Academy not only focuses on
your learning for code, but they also
focus on your well-being. Work feels
like fun and I’ve finally found a job I love.

Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com

+44 (0)1225 687832

WE GOT CODERS

UDEMY
www.udemy.com

www.wegotcoders.com
hello@wegotcoders.com

Twitter: @udemy
Facebook: udemy

We Got Coders is a consultancy that
provides experts in agile web
development, working with startups,
agencies and government. Take one of
their 12-week training course that covers
all that is required to become a web
developer, with highly marketable
full-stack web development skills.

The inspiration for Udemy began in a
small village in Turkey, where founder
Eren Bali grew up frustrated by the
limitations of being taught in a
one-room school house. Realising the
potential of learning on the internet,
he set out to make quality education
more accessible. Udemy is now a
global marketplace for learning and
teaching online. Students can master
new skills by choosing from an
extensive library of over 40,000
courses including HTML, CSS, UX,
JavaScript and web development.

40,000+ courses: There is a
course for every designer and dev
Self-paced learning: Learn how
to code at your own pace

THE
IRON YARD
www.theironyard.com
Twitter: @TheIronYard
Facebook: TheIronYard
The Iron Yard is one of the world’s
largest and fastest-growing in-person
code schools. It offers full-time and
part-time programs in Back-End
Engineering, Front-End Engineering,
Mobile Engineering and Design. The
Iron Yard exists to create real, lasting
change for people, their companies
and communities through technology
education. The in-person, immersive
format of The Iron Yard’s 12-week
courses helps people learn to code
and be prepared with the skills needed
to start a career as junior-level
software developers.

12-week code school: Learn
the latest skills from industry pros
Free crash courses: One-night
courses, the perfect way to learn

sClassroom-based training
sReal-world work experience
sEmployment opportunities

FUTURELEARN

www.futurelearn.com
feedback@futurelearn.com
Choose from hundreds of free online
courses: from Language & Culture to
Business & Management; Science &
Technology to Health & Psychology.
Learn from the experts. Meet educators
from top universities who’ll share their
experience through videos, articles,
quizzes and discussions.

sLearn from experts
sFree courses
sAll-device access

GYMNASIUM

www.thegymnasium.com
help@thegymnasium.com
Gymnasium offers free online courses
designed to teach creative
professionals in-demand skills.
Courses are all self-paced and taught by
experienced practitioners with a passion
for sharing practical lessons from the
design trenches.

sGain real-world skills
sGet expert instruction
sCareer opportunities

93

Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com

+44 (0)1225 687832

HOSTING LISTINGS
Featured host: Netcetera

www.netcetera.co.uk
0800 808 5450

About us
Formed in 1996, Netcetera is one of
Europe’s leading web hosting service
providers, with customers in over 75
countries worldwide.
As the premier provider of
data centre colocation, cloud hosting,
dedicated servers and managed web
hosting services in the UK, Netcetera
offers an array of services designed to
more effectively manage IT

infrastructures. A state-of-the-art data
centre environment enables Netcetera
to offer your business enterprise-level
colocation and hosted solutions.
Providing an unmatched value for your
budget is the driving force behind our
customer and managed infrastructure
services. From single server to fully
customised data centre suites, we focus
on the IT solutions you need.

What we offer

sData centre colocation

sManaged hosting – A full

range of solutions for a costeffective, reliable, secure host.
sCloud hosting – Linux,

Windows, Hybrid and Private
Cloud Solutions with support
and scalability features.

Premier provider of
data centre colocation, cloud
hosting, dedicated servers
and managed web hosting
services in the UK

– Single server through to full
racks with FREE setup and a
generous bandwidth.
sDedicated servers – From

QuadCore up to Smart Servers
with quick setup and
fully customisable.

5 tips from the pros
1. Reliability, trust, support
Reliability is a major factor when it
comes to choosing a hosting partner.
Netcetera guarantees 100% uptime,
multiple internet routes with the ability
to handle DDOS attacks, ensuring your
site doesn’t go down when you need it.

2. Secure & dependable
Netcetera prides itself on offering its
clients a secure environment.
It is accredited with ISO 27001 for
Security along with the options of
configurable secure rackspace available
in various configurations.

3. 24/7 Technical support
Netcetera has a committed team of
knowledgeable staff available 24/7 to

94

provide you with assistance when
you need it most. Our people make
sure you are happy and your problems
are resolved as quickly as possible.

4. Value for money
We do not claim to be the cheapest
service available, but we do claim to
offer excellent value for money. We
also provide a price match on a
like-for-like basis, as well as a price
guarantee for your length of service.

Testimonials
Roy T

“ I have always had great service from Netcetera. Their technical support is
second to none. My issues have always been resolved very quickly. ”
Suzy B

“ We have several servers from Netcetera and their network connectivity is
top-notch, with great uptime and speed is never an issue. Tech support is
knowledgeable and quick in replying. We would highly recommend Netcetera. ”

5. Ecofriendly
Netcetera’s environmental
commitment is backed by use of
ecocooling and hydroelectric
power. This makes Netcetera one of
the greenest data centres in Europe.

Steve B

“ We put several racks into Netcetera, basically a complete corporate backend.
They could not have been more professional, helpful, responsive or friendly. All
the team were an absolute pleasure to deal with, and nothing was too much
trouble, so they matched our requirements 100%. ”

Get your listing in our directory
To advertise here contact Chris
chris.mitchell@futurenet.com

+44 (0)1225 687832

Supreme hosting

SSD web hosting

www.cwcs.co.uk
0800 1 777 000

www.bargainhost.co.uk
0843 289 2681

CWCS Managed Hosting is the UK’s
leading hosting specialist. They offer a
fully comprehensive range of hosting
products, services and support. Their
highly trained staff are not only hosting
experts, they’re also committed to
delivering a great customer experience
and are passionate about what they do.

Since 2001, Bargain Host have
campaigned to offer the lowest possible
priced hosting in the UK. They have
achieved this goal successfully and built
up a large client database which includes
many repeat customers. They have also
won several awards for providing an
outstanding hosting service.

sColocation hosting
sVPS
s100% Network uptime

sShared hosting
sCloud servers
sDomain names

Budget hosting

www.hetzner.com
+49 (0)9831 505-0

with high-performance hosting products
as well as the infrastructure for the
efficient operation of sites. A combination
of stable technology, attractive pricing,
flexible support and services has enabled
Hetzner Online to strengthen its market
position both nationally & internationally.

Hetzner Online is a professional web
hosting provider and experienced data
centre operator. Since 1997, the company
has provided private and business clients

sDedicated/shared hosting
sColocation racks
sSSL certificates

UK-based hosting

www.cyberhostpro.com
0845 5279 345
Cyber Host Pro are committed to
providing the best cloud server
hosting in the UK; they are obsessed
with automation. If you’re looking for a
hosting provider who will provide you
with the quality you need to help your
business grow then look no further
than Cyber Host Pro.

Value Linux hosting

patchman-hosting.co.uk
01642 424 237
Linux hosting is a great solution for
home users, business users and web
designers looking for cost-effective and
powerful hosting. Whether you are
building a single-page portfolio, or you
are running a database-driven
eCommerce website, there is a Linux
hosting solution for you.

sCloud VPS servers
sReseller hosting
sDedicated servers

sStudent hosting deals
sSite designer
sDomain names

Cluster web hosting

Flexible cloud servers

www.fasthosts.co.uk
0808 1686 777

All-inclusive hosting

UK based and operating 24/7 from
dedicated UK data centres. Fasthosts
keep over one million domains running
smoothly and safely each day.
Services can be self-managed through
the Fasthosts Control Panel.

sDedicated servers
sCloud servers
sHosted email

elastichosts.co.uk
020 7183 8250

www.1and1.co.uk
0333 336 5509

operates across ten countries. With a
comprehensive range of highperformance and affordable products, 1&1
offers everything from simple domain
registration to award-winning website
building tools, eCommerce packages and
powerful cloud servers.

ElasticHosts offer simple, flexible and
cost-effective cloud services with
high performance, availability and
scalability for businesses worldwide.
Their team of engineers provide
excellent support 24/7 over the phone,
email and ticketing system.

1&1 Internet is a leading hosting
provider that enables businesses,
developers and IT pros to succeed
online. Established in 1988, 1&1 now

sEasy domain registration
sProfessional eShops
sHigh-performance servers

sCloud servers with any OS
sLinux OS containers
s24/7 expert support

95

Free with
your magazine
Essential assets
and templates

Exclusive
video tutorials

Get textures, fonts,
backgrounds and more

Learn to code/create with $OOWKHDVVHWV\RX·OOQHHG
HTML, CSS, JS & PHP
to follow our tutorials

Tutorial
project files

Plus, all of this
is yours too…
‡$OOQHZWXWRULDOILOHVWRKHOS\RX
PDVWHUWKLVLVVXH·V+70/&66
and JavaScript techniques
‡PLQXWHVRIH[SHUW-DYD6FULSW
videos from Pluralsight
(www.pluralsight.com)
‡ZDWHUFRORXUWH[WXUHVDQG
elements from Go Media
‡JUXQJHWH[WXUHVIURP
Jacobson Design Shop

Log in to www.filesilo.co.uk/webdesigner
Register to get instant access
to this pack of must-have
creative resources, how-to
videos and tutorial assets

Free
for digital
readers too!
Read on your tablet,
download on your
computer

The home of great
downloads – exclusive to
your favourite magazines
from Future!
Secure and safe online
access, from anywhere
Free access for every
reader, print and digital
Download only the files
you want, when you want
All your gifts, from all your
issues, in one place

Get started
Everything you need to
know about accessing
your FileSilo account

Unlock
every
issue



Follow the instructions
on screen to create an
account with our secure FileSilo
system. Log in and unlock the
issue by answering a simple
question about the magazine.

gifts from more than 45 issues
Access our entire library of resources with a money-saving
VXEVFULSWLRQWRWKHPDJD]LQH²WKDW·VPRUHWKDQIUHHUHVRXUFHV



You can access FileSilo
on any computer, tablet
or smartphone device using any
popular browser. However, we
recommend that you use a
computer to download content,
as you may not be able to
download files to other devices.

Over 50 hours
of video guides

More than
400 tutorials

Over 210
creative assets

Let the experts teach you
to create and code

Get the code you
need to get creative

Templates, fonts, textures
and backgrounds

Head to page 32 to subscribe now


If you have any
problems with
accessing content on FileSilo,
take a look at the FAQs online
or email our team at the
address below.
filesilohelp@futurenet.com

Already a print subscriber?
+HUH·VKRZWRXQORFN)LOH6LORWRGD\«
Unlock the entire Web Designer FileSilo library with your
unique Web ID – the eight-digit alphanumeric code printed
above your address details on the mailing label of your
subscription copies – also found on any renewal letters.

More th
han
90
00 re
easo
ons
s
to
o sub
bscriibe

More
added
every
issue

WEB DESIGN’S
LATEST TRENDS
What are the hot topics in web design today? Layouts, Microinteractions,
Chatbots and Augmented Reality are here to stay. Find out how to use them in
your projects today

PROTOTYPING
WITH MARVEL

Learn how to use the app to turn
sketches and mockups into designs

MULTIPLE
BACKGROUNDS

Share backgrounds across multiple
elements with Multiple.js

FULLSCREEN
CSS MENUS

Employ the power of CSS and JS to
create all-screen navigation

Visit the WEB DESIGNER online shop at
for back issues,
issues books and merchandise

98 _____________________________________________________________ next month

CODE WITH THE
MEDIA SESSION API

Build your own podcast with
custom UI components

ALL IN YOUR NEXT

WEB DESIGNER
Issue 261 on sale

Thursday 27th April 2017

9000

9001

 

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *