PROS REVEAL THEIR BUILD SECRETS 7 STEPS TO GREAT 3D DESIGN 10 MUST�KNOW THREE.JS TIPS 8 PROJECTS TO INSPIRE (WITH CODE) INTERACTI VE WEBGL VISUALISATION & CODE A 3D MELT EFFECT PLUS: BUILD AN INTERACTIVE
RESPONSIVE VIDEO MASKING WITH SVG GENERATE GENERATE A STATIC STATIC BLOG BLOG WITH GULP CROSS�PLATFORM NETWORKING WITH HUMBLENET ANIMATED INTROS WITH CSS
ISSUE 265
Meta Welcome
Welcome to the issue THE WEB DESIGNER MIS SION To be the most accessible and inspiring voice for the industry, offering cuttingedge features and techniques vital to building future-proof online content
Steven Jenkins Editor
Add wow to the web with 3D
3
Highlight
D was touted as the next big thing for the
Johnny Slack is a whiz with three.js and shows you
web back as far as we can remember
how to create a mind-bending 3D melt effect. You
– 2012. But technology and browser
cannot fail to be impressed. Again, code is included.
support rarely catch up until years later.
To top off the feature, our resident 3D expert Mark
Finally, the web has caught up and 3D
Shu�lebottom reveals ten of his most valuable three.js
environments are now a permanent part
tips and shows how to build a 3D environment.
of the internet. This makes now the
Keeping 3D company we have JavaScript. Matt
perfect time to jump in and start mixing
up your designs with 3D.
Crouch answers your questions. He takes a look at the big issues and gives the answers you need to
In our latest lead feature on page 42, digital
succeed. With over 20 essentials solutions, this is a
designers Marpi, Johnny Slack and Mark
feature you cannot miss. Check it out on page 66.
Shu�lebottom give an insight into a new dimension.
Elsewhere we have a close-up look at the latest
Marpi reveals the seven steps to great design and the
update to Node package manager, npm. Find out
inner workings of his many impressive projects. Code
why you need to be using it today. Plus we have
is included so you can jump in and experiment.
plenty of quality tutorials to keep you learning. Enjoy.
“
We’re not a full“ service agency and we won’t ever try and wing it. We focus on our strengths
Make it run fast and fluid – 60fps, all the t he time. Around 50% of the work is making sure it runs and looks good everywhere. everywhere. But it’s worth it
”
Web Designer talk to the small but perfectly formed Createful Page 34
”
Follow us on Twitter for all the news & conversation @WebDesignerMag Visit our blog for opinion, freebies & more www.creativebloq.com
FREE – exclusive with this issue
63
Designer resources Video Tuition Assets
– 144 minutes of expert video guides on Angular from Pluralsight (www.pluralsight.com) – 50 Abstract Art Textures Text Highlighter Pro – 12 Photoshop actions – Tutorial �iles and assets
www.�ilesilo.co.uk/webdesigner ___________________________________________________ ________________________________________________ ______________________3 meta _________________________
Meta Contributors
This issue’s panel of experts Welcome to that bit of the mag where we learn more about the featured writers and contributors…
Designer Harriet Knight Senior Art Editor Will Shum Editor in Chief Amy Hennessey Contributors Jake Davis, Daniel Ward-Murphy, Marpi, Johnny Slack, Mark Billen, David Howell, Paul Betteridge, Leon Brown, Mark Shufebottom, Steven Roberts, Luke Harrison, Tam Hanna, Simon Jones, Matt Crouch, Phil King, Philip Morris Photography James Sheppard All copyrights and trademarks are recognised and respected
Web 3D experts This issue we have a trio of 3D experts. Digital artist Marpi
(marpi.pl) and audio-visual coding artist Johnny Slack
(johnnyslack.co), along with our very own Mark Shu�lebottom, reveal how to build impressive 3D experiences for the browser. Learn how to create with WebGL and three.js. Page 42
“
3D environments have become part of the internet, and with support across all types of devices, they are the best way to get more immersive experiences to everyone ”
Simon Jones
Mark Shu��lebottom
Simon has always used npm as his package manager of choice. In this issue he takes a closer look at the updates to the latest release and reveals what improvements they will bring to your work�low and projects. Page 74
Steven Roberts
Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto. In this tutorial, Mark is creating a fully interactive environmental visualisation using the WebGL library three.js. Page 50
Paul Betteridge
Steven is the lead front-end developer at Better Brand Agency in Middlesbrough. In this issue he takes a closer look at responsive video masking and explores its possibilities with the help of of SVG and Clip Path. Page 56
Tam Hanna
Paul has 15 years’ experience leading digital organisations and pioneering digital marketing, across a plethora of competitive markets. He is a ‘Google Leader’ and this issue lets you know how to boost your ranking with essential SEO. Page 62
Leon Brown
Tam is a coding veteran who loves to experiment. This issue he introduces you to the cross-platform networking library HumbleNet, which uses WebRTC and WebSockets to emulate a lossy protocol. Page 86
4 __________________________________________________________________________ meta
Leon is a freelance web developer and trainer who assists web developers in creating e��icient code for projects. This issue he reveals a host of techniques, as seen on the top-class websites featured in our Lightbox. Page 14
Matt Crouch Matt is a front-end developer at Cinolla. How can you improve the performance of your code? Should you still be using jQuery? In this issue, he answers a mixture of questions covering all you should know as a JavaScript developer. Page 66
Luke Harrison Luke is a web developer from She��ield, UK who is all about scalable and e��icient front-end architecture. In this issue he explores how to generate a static blog with the help of Gulp and Mozilla’s Nunjucks. Page 80
Cutting-edge features, techniques and inspiration for web creatives Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…
The tools, trends and news to inspire your web projects
Web developers: want to make money? The latest Skills Up report from global tech publisher Packt takes a look at the tools and trends that will make devs rich, maybe
W
Get Web Designer digital editions Get your hands on a collection of the best contemporary techniques
hen it comes to web
and salary report. In a nutshell, the report
survey – which included respondents from
Need an instant hit of Web
development, it is pretty
takes a look at the tools developers are
the US, UK, Brazil, Australia and India – it
Designer? Check out our digital
easy to assume that
using, who’s getting paid the big bucks, and
revealed the average salaries of developers
specials. The Web Apps Handbook
JavaScript is top dog.
some of the emerging trends that web
and tech professionals. As you might
Volume 2 and The Developer’s
developers should be on the lookout for.
expect, it’s the US that comes out on top.
Guide to JS reveal the best tools
They earned an average of £104,000,
and methods to build apps with
But, obviously it’s not that simple. Imagine turning up for an interview and saying
The report is based on replies from
‘I’m great at JavaScript’. We think they
over 4,700 respondents from across the
compared with Europe that sat at £75,000,
web technologies and learn how to
might want to know a little more than
globe. In its executive summary it
while North Asia came in at around
get started with ES6 and npm.
that. JavaScript is the basis for thousands
revealed that full-stack development is
£55,000. To put this into some kind of
Don’t forget Animate with
of different libraries and is included in
dominating as a technical role across
perspective, it wasn’t web developers that
HTML & CSS and 3D and the
endless frameworks.
industries; 60% of respondents have either
topped the list. The big earners by role
Web. We cherry-pick a collection
a ‘reasonable amount of choice’ or a
were big data engineers, security engineers
of the best animation and 3D-
mind, such as React and Angular. But web
‘signi�icant amount of choice’ over the tools
and information architects.
related techniques to add interest
development is not just about JavaScript
they use at work; developers need to work
either – there are hundreds of libraries that
in an environment they love – IDEs are
a developer could have in their arsenal, but
among the most loved tools; 47.57% of
you cannot learn them all, so it’s very much
respondents say their manager has less
popular? In a straight top tools chart
Techniques and Amazing Websites
a matter of choosing the right ones to
technical knowledge than they do; there’s a
(including all job roles), it was Python that
and How to Build them Vol 04 .
ensure that you get the job you want. And,
container revolution happening – Docker is
was happily sitting at number one.
if the libraries and tools that populate your
being learned across today’s tech
Elsewhere in the top ten were Git, Java and
a Web Designer digital edition?
dev arsenal are in demand, you can make a
workforce; and Python remains consistently
Docker, with JavaScript coming in at
Head to bit.ly/1hsGYgl , download
little more money than expected.
popular across job roles.
number 11. Other notable tools included
the free Web Designer app and
React, Jenkins, Sublime Text and PHP.
�ind them waiting for you as an
Drilling down by role revealed differing
in-app purchase.
There’s a few that spring immediately to
Global tech publisher Packt recently released Skill Up 2017, its developer skills
Looking further into the report what else did we learn? As well as being a global,
But, we all know web developers aren’t in just for the money; they are in it for the love. More importantly, what tools were
results. For web developers, Git was
“
Full-stack development is dominating as a technical role
number one; for mobile developers, Xcode
”
was top choice. But, if you are looking to boost your salary above the average, there are certain tools that can help you achieve this. By role, web developers needed to know Fiddler and Bootstrap. But, as we have mentioned, it’s not all about the money. So, what tools are web developers and tech pros planning to learn? Docker, Python, Angular and Jenkins. For web developers speci�ically, it was Docker, Angular and React. We have only skimmed the surface here. Get your hands on the full report (www.packtpub.com/books/info/packt/ skill-report-2017-direct-download ) and �ind out how you can start making the big bucks and discover the tools and skills that
Want to add kudos and cash to your development role? Then think about Docker
Discover the must-try resources that will make your site a better place
NexusUI 2.0 nexus-js.github.io/ui Nexus ‘is a collection of HTML5 interfaces and JavaScript helper functions to assist with building web audio instruments in the browser’. The
Puck.js
CSS database
Pinhole-js
latest version has a more conventional
www.puck-js.com
jonathantneal.github.io/css-db
github.com/tidwall/pinhole-js
JavaScript API, a pared-down collection
So what is Puck? It’s an ‘open source
What’s happening with CSS? Check this
Need a very simple API for visualising
of interfaces, and uses SVG graphics
JavaScript microcontroller you can
list of CSS features a nd where they are in
data structures? No bells or whistles, just
instead of canvas graphics to add a more
program and debug wireles sly’. Take
the process of becoming implemented
clean lines and solid colours? Check out
user-friendly approach.
control using standard HTML and JS.
web standards.
this 3D wireframe drawing library for JS.
TOP 5 Web conferences – September 2017
Get yourself a seat at the biggest and best conferences coming your way soon
The joy of interactive prototyping Discover how it can provide a better development journey Jake Davis
P
Design director at Pocket App
www.pocketapp.co.uk
rototyping is a process that has existed
with or will react differently to a proposed piece of
since the inception of ‘product design’.
functionality than expected. Companies spend large
In the world of web and application
amounts of time and money on A/B testing and
development, the idea of prototyping is
focus groups to try and optimise their interface based
not new either.
on user and business objectives. None of this is
Many developers have created beta releases of
possible with only the feedback of the business,
their builds, to sense-check functionality and to help
designs and developers – it requires the insight of the
validate the project for additional funding or client sign
end users themselves.
off. The idea of interactive prototyping, however, is a
The interactive prototype also becomes a testing
step even before that, utilising the designs to feign a
ground for all new functionality or changes in approach
user experience without a single line of code being
that will inevitably crop up during the development
written. In the world of rapid and agile development
process. Utilising this design-only prototype can aid in
cycles, this has become a necessary step to ensure
getting approval from the project stakeholders and
time is not wasted developing an idea that would
validation from user groups before reworking code in
never satisfy the end user.
the development environment. To gain the full bene�it
When sending through a set of designs to a client or
of the prototyping process, it needs to be considered a
developer, especially in organisations where the design
live �ile throughout the project’s life span, constantly
team is separate from the front-end team, it’s very
updated with each new phase, alteration and bug �ix.
di�icult to work out a �low for a user when viewing each screen in isolation. Historically, web and app developers would rely on wireframes, design mock-ups and
With each of these changes there
“
Getting the build in the hands of the end users is invaluable
”
will be different treatments to achieve the same goal. Using the interactive prototype can allow for numerous versions to be
videos to relay the experience to any stakeholders or
or requires numerous taps may on paper seem �ine, but
created and tested with quick succession. When
team who would need to build the solution. Interactive
once actually dropped onto the screen may seem clunky
approaching a new implementation, it’s always best to
prototyping tools – now built into many UI design tools
or too hidden. This is the point where rework is required to
try out as many solutions as possible; however, this can
or low-cost platforms – utilise the designs and hot spots
alter an interface element that had already been ‘signed
be time-consuming to do using development and is not
to allow for the creation of a tappable, swipable or
off’, or has been present throughout but had not been fully
a true representation using just �lat designs. This can
pinchable vision of the proposed user experience.
understood until all members of the team were able to play
help try, test and validate the perfect approach from the
Grabbing a mobile and tapping through the designs or
around with the build in their hands. It’s a lot easier to
bank of available ones, rather than just the one we
perusing a web design, while clicking away on call to
facilitate this during a design prototype stage than with a
happen to develop.
actions, is the easiest way to present a proposed �low in
beta build.
the setting it will actually be used. Not many people
This ability, for people to get their hands on the
In summary, embedding prototyping into any developer’s work�low may seem to some as an
would buy a mattress without being able to jump
experience before development, extends to that of the end
unnecessary step in the world of rapid development-
around on it a bit �irst – this is the digital UI equivalent!
users, who can give valuable feedback on the proposed
based prototyping; however, it can reduce rework
solution. This is the key reason it is so important for web
substantially when dealing with clients, stakeholders
wider project team – all have visibility of this interactive
and application developers to go through this process for
and, most importantly, end users. It allows the
prototype, it also removes the age-old issue of
all technical builds. Getting the build in the hands of the end
proposed design and experience to be demonstrated
misinterpretation of �low or expectation gap. Members
users is invaluable: it allows for test groups to be put
as it was meant to be, in a way that the user can
of the project (both client and internal) are not always
together and validate the approach and idea. Over the
physically navigate and connect with. It could be the
able to translate the repercussions of decisions made
many projects that I have been part of at Pocket App, every
difference between when a client or stakeholder
during the design process, particularly on �low while
single one has bene�ited from the utilisation of interactive
works out that they do not agree with the proposed
looking at something as systematic as a wireframe to
prototypes. Even following all the best practices, user
design – this could be either during the early design
visualise the �low. An element that according to the
research, latest trends and industry experience, there will
phase, or many months and caffeine-fuelled coding
wireframe is only accessible by a complicated gesture
still be areas of the experience that users will not resonate
nights later.
If the client, designer and developer – along with the
Discover Discover the must-try resources that will make your site a better place
UI Kitten bit.ly/2silV8y UI Kitten is a mobile framework with a set of easily customisable elements. It offers a bunch of commonly used elements as a single dependency with
Local SEO
Moon
Flow
similar UI design. The main bene�it is
bit.ly/2tZZnhI
moonjs.ga
danross.co/�low
that users can create their own
Ranking your business is becoming
Moon describes itself as ‘a minimal,
So what is Flow? It is a typeface built for
con�igurations and reuse them in the
more important than ever. In the �irst of
blazing fast library for building user
wireframing. It’s free and it comes in
development process. So, con�igure
this series of posts, �ind out about best
interfaces’. It is smaller and faster than
three weights – circular, rounded and
them once and use anywhere.
practices and how to work with Google.
Vue, React and Angular.
block. Go get it now.
TOP 5 CodePens to inspire
Feast your eyes on this impressive collection of code examples
One of these key pitfalls is attitudinal. At any stage of
Some people may read the above and think ‘that’s
the process, it is not helpful at all to think as websites as
why a specialist website agency makes sense’, but I
a ‘product’. In fact, it is really harmful. For us, it is a
would argue my previous question ‘how can we
multifaceted communication tool.
effectively communicate your brand when we don’t
In terms of guiding our staff, we encourage a spirit
know you that well?’ argues extremely well against this
that attacks these projects with a can-do attitude but
position. In my experience, website builds are easier
also a knowledge that it is not a simple challenge.
when you know the brand already, but, if you don’t,
When we receive inbound requests from potential
then I would want an agency with brand planners to
clients, it is fair to say that most of them are treating it as
undertake the task of getting from a point of little
a simple thing, as a product. Their expectation of cost,
knowledge to plenty. Whilst I am sure there are many
and the time it will take to create, is really low. Whilst we
capable people within specialist agencies who are good
may have seen every kind of di�iculty, it is hard to
at this bit, for a planner this is a regular challenge. New
effectively warn clients of mistakes they haven’t seen
client, new industry, new competitors and understand
nor made yet, nor think that they will make.
the brand proposition, then quickly move forwards.
There are lots of things that can make the website
The specialist versus multi-discipline agency
creation process di�icult. Our most common issues
argument is not one that is going to go away in a hurry,
are the areas where clients need to contribute. Poor
but whatever the right decision, I would urge more
visual branding, a lack of strategic brand work/
client-side directors to think about the right agency mix
client-side clarity on who they are and late/inadequate delivery of site copy and content (if we aren’t doing this part). But there is another fundamental. How can we
(and hired internal skills) for their
A large website build project project will typically touch nearly every department in the agency
effectively communicate your brand when we don’t know you that well? In my role, this is my key consideration. With
business. It is clear to see a lot of reactive decisions being made (e.g. ‘I need a website, who should I call?’) rather than proactively thinking about the bigger picture. One more complication we face
the brand and that there is consistency across their
in the delivery of a great website is that nothing stands
channels. But then the words are the key priority. We need
still for long and it is constantly evolving. We are
direction, our creative team can make it look great and
to follow any strategic brand work in place and ensure lead
currently making small tweaks to our website process
on-brand, our dev team can make it work, our digital
messaging represents their tone of voice (how they sound),
at the moment, having appreciated that we need a
marketing team can protect and raise site performance
is �itting for their positioning (who they are for) and crucially
de�ined process for each de�ined build and that new
and exploit the crucial landing pages in any paid push.
their value proposition (why people should use them).
tools available can affect our preferences.
But the role of the Strategy & Planning team is to make
A large website build project will typically touch nearly
I guess ultimately the challenge is at best fun and at
sure that the end result works as ‘communication’ for
every department in the agency. Alongside Strategy &
worst it gives us something to think about. We are
the brand.
Planning it will touch Design, Development, Account
proud of the work we do in this area, but we are always
Management, Copywriting and Digital Marketing. I see
looking for better ways to communicate the challenge
elements may change but generally the design and the
words as just as important as pictures and it is Copywriting,
and the process to our clients. We don’t want to be the
core messaging stays put. It is our client’s most
crucially steered by Strategy & Planning, that will deliver
agency saying ‘hey, this isn’t easy’ at a crucial time
important communication tool.
excellence in this area.
where our potential client needs con�idence, but we
We look at it as a three- to �ive-year campaign. Yes,
So what do we need to ensure? Well, �irst of all we need to make sure that visually it is representative of
Due to the number of departments these projects touch, the internal communication challenge that agencies face is
also want better informed, educated and realistic clients. Then the magic can happen.
Save Tropical House savetropicalhouse.no Designer: Good Morning – good-morning.no Development technologies HTML5, howler.js, Express (Node.js), Facebook SDK
On your marks, get set, go. As the train is pulled back, the whole scene is lowered to give a di�ferent perspective. As soon as it is released, the user is thrown into the game
Above
Above
In keeping with the theme of the site, the Go button features neat little �lipper animation e�fects
Have your very own pinball machine wherever you go. Enjoy the �lipping action without the need for a keyboard
Create an animated wobbling text effect Use CSS and JavaScript to make individual letters of a word appear with a wobbling animation e�fect font size to be de�ined for this example without any other elements also inheriting this formatting.
h2{ font-size: 3em; }
4
.
Wobbly elements
The JavaScript created in step 2 allows for CSS to apply attributes to each individual letter. This step applies attributes to be shared across all wobbly letter items – speci�ically their display and position modes, along with the animation to use. Using this approach avoids the need to repeat these de�initions when applying formatting to speci�ic letters.
To avoid the CSS getting unnecessarily complicated, all letters use the same animation rules, but need to appear to be animating independently from each other. An easy
1
.
HTML document de�inition
2
.
JavaScript processing
way to achieve this is to apply different delays to their
Initiate this project by constructing the HTML document
Create a new �ile called code.js. This �ile is for JavaScript
animation starting times. The nth-child s elector allows
template and content. The HTML document container
code required to alter the HTML on the page so that
this to be applied in a way that all text appears wobbly
stores the head and body sections. The head section’s
animation can be easily controlled from the CSS. In this
regardless of the character count.
primary role is to load external resources – the CSS and
case, we are looking for all elements that have a ‘wobbly’
.wobbly span:nth-child(4n){ animation-
JavaScript. Meanwhile, the body stores the visible content
class to have each letter of their text content to be
delay: 0s; }
– an h2 element with a ‘wobbly’ class that will be used by
We learn how two supersonic digital agencies joined forces to take off on a journey to illustrate the statistics behind one of Europe’s busiest airports
PROJECT STATS
EXPECTING SOME OF THE BUSIEST
Brussels Airport in Numbers microsite
FLIGHT TRAFFIC DAYS ON RECORD,
stylishly communicates the incredible
THE CONTROLLERS OF UK AIRSPACE
statistics associated with its operations.
PROJECT DURATION 1 month, 3 weeks
ISSUED A STARK WARNING RECENTLY.
As it says, the facility is “an extraordinary
If our skies continue to host more and
place” that can be expressed by the
more planes chartering an increasingly
myriad of services it provides every day
NO OF PEOPLE INVOLVED
bewildering number of routes, the
– from serving coffee to handling
8
current system for management won’t be
baggage. The project would be a
able to cope. It’s a sobering problem
collaborative effort between two Belgian
indeed, especially given the mind-
agencies, leading B2B marketing �irm
boggling brilliance with which air tra�ic
BBC and digital developer Three-Sixty.
controllers keep the millions of
Having worked with Brussels Airport
commuters, pilots and staff safe up there
Company for over a decade, BBC also
already. With this month’s featured site
boasts full-service experience with other
linked directly to winged travel, it got us
B2B clients including Pentair, Samsung,
thinking up in our own Web Designer
Thermo King and many more. “The brief
control tower. Could our already heavily
was straightforward: create an online
populated internet ever grow and
platform where people can discover what
expand to such strain? In many ways it’s a
Brussels Airport really stands for and
similar conundrum with storage and
what it accomplishes in an exciting,
speed certainly an issue as online
surprising way that is highly accessible
demand intensi�ies. Luckily, though,
too,” the BBC team explain. “We basically
we’re not quite there on both fronts and
got facts and numbers about the airport
at least one new URL has successfully
and got to work with that.” Tasked up and
checked in, boarded and taken off with
ready for the job, it was soon time to
�lying colours. Designed to promote
gather in the departures lounge to
Belgium’s less cluttered clouds, the new
consider the trip.
NAMES & POSITIONS Team Three-Sixty: – (Front-end) Development & Design/UX consultancy: Michael Vleminckx
•
Lead front-end developer Niek van der Laak
•
Concept, UX Jurgen van Laetem
•
Digital project management
Team BBC – Concept, Project Management & Design: Mieke Verelst
•
Project management Dave Lesy
•
Art director Ben Van Looy
•
Front-end development advisor
“ We basically got facts and numbers about the airport and got to work with that ”
“ We knew we had to �ind a way that would draw visitors into all these extraordinary numbers ”
AMAZING AIMS
numbers and make sure they wanted to
Jurgen van Laetem. “Front-end
“To us, it was both familiar and new,” replies
click through and discover them all.”
development is not their core business,
BBC’s Mike Verelst when quizzed on the
The client was aiming for ‘amazement’ as
and, hey, we’re always up for a challenge.
very �irst perceptions of the project. Indeed,
one of the goals for the experience, so the
This was a major one and not just because
the existing relationship with the client
BBC team set out by searching to �ind an
the deadline was rather tight!”
provided a mutual trust straight away and
appropriate creative direction to get there.
created immediate licence for daring
“As it turned out, we did not have to look
SMOOTH TAKE�OFF
approaches to communication. “We had
that far, since all the elements were already
Once agreed, this three-way working
already created a quiz website and a movie
in place. It was a matter of combining what
arrangement was a typical setup for the
in previous years, also built on facts and
was already there, including their new logo,
Three-Sixty guys. Used to a work�low that
numbers about the airport. Now the brief
the facts and a photography book that
involves the client and BBC, everyone
was come up with something ‘completely
appeared a while ago.”
decided that the shorter project deadline
different’. This time, for one, Brussels
In addition, BBC would take that
probably demanded less time spent
Airport offered us a more thematic
collateral and also approach its technical
deliberating in meetings. “Keep it simple,
approach, with the facts organised around
partner for digital work, Three-Sixty. “They
keep it functional, was the motto,” explains
different aspects of life at the airport. So we
come looking for us when they need help
Three-Sixty’s concept, UX dude Niek van
knew we had to �ind a way that would draw
to develop some ‘digital awesomeness’ as
der Laak. “There always is a direct, daily
visitors into all these extraordinary
it were,” says digital project manager
contact between BBC and Three-Sixty to check on progress, tech-issues and delivery of content, but the work�low was pretty straightforward this time. We got the design and got to work, period.” Within this, several milestone meetings were also agreed to present progress updates, suggest solutions, showcase design concepts and reveal test results. “Obviously, the client has to stay involved,” he continues. “You can’t present a �inal result and then say, this is it, please don’t change anything.” The BBC team echoes this perspective also, knowing full well they could lean on such a trusted long-term partner without going consultation crazy. “We presented the concept, the copy, the design, the images and the grids,” con�irms BBC’s Dave Lesy, art director. “They took development from there, and we just let them determine which effects they’d implement and where. So once we’re on that ‘ride’ together, it’s basically planning simple follow-up meetings and daily chats or calls, because we know they will do the job. We have that that kind of relationship. relationship.”
PERMISSION TO LAUNCH If the arrangement of how the thing would be staffed was so easy, then what about interpreting interpreting the brief itself? Again, the parties could count on previous experience with the client and what they bring to the table. Having already created movie and quiz content for the airport, the brand awareness was there, but the �irst challenge was turning hard, cold facts into something engaging. “The brief was, again, to steer away from a dull and factual online report,” says BBC’s Mike Verelst. “Since the airport had already arranged the numbers thematically, the ‘chapters’ almost presented themselves. It wasn’t hard to determine which pages the website would need, then. The airport had also just
“ Designs and concepts in Photoshop don’t always work as intended in browsers after slicing ”
clear we didn’t have enough space. When scrolling, the address bar turned out to be a problem. So we came up with a solution where we created a separate design to give the user the right feedback, turning your mobile device to landscape.” That choice to go landscape came from
using the wonderfully expressive photographic assets, with the layout devices and the ‘grids’ especially useful for superimposing superimposing the facts without losing visual focus. “The biggest challenge for
“Mind you, the grids were one thing,” grins Mieke Verelst. “But that did not mean
We ask Three-Sixty co-founder and head of design and development Michael Vleminckx to identify a standout aspect of the site and why it brings particular pride to the team?
“The �luent process from design to frontend with a near 100% visualisation of the intended designs and concept, this is something that stands out for us in this instance. That is always hard to achieve and especially for this website. Just look at the grids, the visual variation and the different languages. To achieve all those things it’s crucial to get on the same page with everyone right from the start.”
that every detail page would look the
marketing campaign, rather a component
same. If you want to get your story across,
of an ongoing corporate marketing plan.
and make your visitors stay, you need
Brussels Airport has a strong social media
creative freedom to give every page a
presence, so the website was put out there
different look. Drawings, photographs,
100% organically and on social.”
infographics, and little elements that move.
So, what about the actual numbers?
Three-Sixty understood what was needed
Considering that they play such a
on every page when they saw the designs,
fundamental part in describing Brussels
and they made it work.”
Airport, it seems inconceivable the team wouldn’t know what the site was turning
Subscribe and save 20% Every issue, delivered straight to your door Never miss an issue
Delivered to your home
Get the biggest savings
13 issues a year, and you’ll be sure to get every single one
Free delivery of every issue, direct to your doorstep
Get your favourite magazine for less by ordering direct
What our readers are saying about us… “I’ve been a reader of Web Designer
“Love the latest magazine that
Magazine since the early days.”
I purchased today”
@sixrevisions via Twitter
@navigation_web via Twitter
“My favourite magazine!!!” @eduardomurillo via Twitter
Subscription offer
Pick the subscription that’s right for you MOST FLexIBLe
GREAT vALue
Subscribe and save 20%
One year subscription
4 Automatic
renewal – never miss an issue 4Pay by Dirct Dbit
Grat offrs, aailabl world-wid 4On paymnt, by card or chq
4
Rcrring paymnt of £34 ry si months, saving 20% on the retail price
Nam of bank
Instruction to your Bank or Building Society to pay by Dirct Dbit
A simpl on-off paymnt nsrs yo nr miss an iss for on fll yar. That’s 13 isss, direct to your doorstep
UK £67.60 (saving 20% on the retail price)
Originator’s rfrnc
7 6 8 1 9 5
Europe €81.55
USA $103.20
Rest of the world $103.20
Pay by card or chq
Addrss of bank
Pay by Crdit or Dbit card Visa Postcode
Account Name
Amex
Card nmbr
Expiry date
Account no
Sort Cod
Mastercard
Plas pay Ftr Pblishing Ltd Dirct Dbits from th accont dtaild in this instrction sbjct to th safgards assrd by th Dirct Dbit garant. I ndrstand that this instrction may rmain with Imagin Pblishing Limitd and, if so, dtails will b passd on lctronically to my Bank/Bilding Socity. Banks & Bilding Socitis may not accpt Dirct Dbit instrctions for som typs of accont
Pay by Chq
Signature
Signature
I enclose a cheque for
Date
£
Mad payabl to Future Publishing LTD
Date
Your information Name
Address
Tlphon nmbr
Mobil nmbr
Email address Postcode nPlease
tick if you want to receive any communications from Future and its group companies containing news, special offers and product information.
Please post this form to Future Publishing Ltd, 3 Qnsbridg, Th Laks, Northampton, NN4 7BF, United Kingdom
Order securely online myfavouritemagazines.co.uk Speak to one of our friendly customer service team Call 0344 848 2852
These offers will expire on Saturday 31 Oct 2017
*Prics and saings ar compard to bying fll pricd print isss. Yo will rci 13 isss in a yar. Yo can writ to s or call s to cancl yor sbscription within 14 days of prchas. Paymnt is non-rfndabl aftr th 14 day cancllation priod nlss cptional circmstancs apply. Yor stattory rights ar not affctd. Prics corrct at point of print and sbjct to chang. Fll dtails of th Dirct Dbit garant ar aailabl pon rqst. uK calls will cost th sam as othr standard d lin nmbrs (starting 01 or 02) ar incldd as part of any inclsi or fr mints allowancs (if offrd by yor phon tariff). For fll trms and conditions plas isit: bit.ly/magtandc Offr nds 31/10/2017
SMALL BUT PERFECTLY FORMED
DRIVEN BY THE SINGULAR VISION AND PASSION OF THE FOUNDER, CREATEFUL CONTINUES TO STRIVE FOR EXCELLENCE, AS IT CRAFTS NEW EXPERIENCES FOR ITS EXPANDING CLIENT ROSTER
34 _____________________________________________________________________ pro file
who Createful
key clients
what Web Design, Web Development, Mobile Websites, Mobile Apps, iPhone Development, Marketing, PPC, and SEO
LV=
where 99 Holdenhurst Road, Bournemouth, BH8 8DY web www.createful.com
Createful describe themselves as small but perfectly formed. Based in Bournemouth, the agency was founded single-handedly by Kriss Bennett. Kriss wanted to build a motivated team with the expertise to create amazing mobile solutions, with the same p assion for the digital world. The agency is the creative expression of Kriss, who left school at 16 and went to Bournemouth and Poole College and later Bournemouth University, where he studied software engineering. Kriss also worked at a local computer company and built his �irst bespoke eCommerce website and bespoke back-end order management system that integrated with the Protex payment gateway (now called SagePay) in 1998. He then went on to work for BAE Systems in the defence sector before moving on to local digital agency Redweb. “I left Redweb to set up my own business in February 2010,” Kriss explains. “It was a fantastic opportunity to work with Lush Cosmetics soon after. We launched their �irst mobile app with them in 2011, and we then went on to work with them on a range of projects.”
“When I got engaged to my then fiancée Natalie, we couldn’t find an app to help with organising our big day, so I decided to build my own” Kriss continues: “Another springboard project on the Createful journey was our Wedding Planner app. When I got engaged to my then �iancée Natalie, we couldn’t �ind an app to help with organising our big day, so I decided to build my own. It has a simple user interface and helps with everything from budget planning to choosing the guest list and creating a seating plan. “It’s since gone on to win two international awards and been downloaded in over 100 countries. When the �irst version of the app was launched in 2012, we had three employees. We’re now going strong with a team of 14 and have had seven and a half years of growth working with amazing clients.
pro file _____________________________________________________________________35
BOURNEMOUTH AIR FESTIVAL 2017 bournemouthair.co.uk Since the �irst event in 2008, Bournemouth Air Festival has Q. You were recently awarded G�Cloud 9
welcomed millions of guests, raised
supplier status for the public sector
almost £100,000 for Air Festival
framework. What does this mean?
charities and has been awarded a
“Receiving the G�Cloud 9 supplier status is
gold standard as Visit England’s
a huge privilege for Createful, and
Tourism Event of the Year in 2015.
highlights our nationwide recognition
It’s an event that takes place over a
within the digital community. In simple
weekend and features a wide range
terms, the status means public sector
of aerial and nautical displays, as
bodies and organisations can use our
well as events along the beachfront,
creative design and development services
through the gardens and town.
for web and mobile, without needing to
We’re really excited about the
run a fully �ledged tender procurement
new site, and worked closely with
programme, which is often a lengthy and
the council to produce a beautiful,
complicated process. The status also
�lexible and robust solution. Built
places us on the ‘Digital Marketplace’, a list
on an open-source CMS, it was key
of suppliers that has been updated with
that we gave the client as much
new search and �iltering tools. This list
control as possible over the layout
makes it easier for buyers to �ind what
and content of the site, as the event
they’re looking for on G�Cloud.”
goes through three key stages in
Kriss Bennett, founder and MD
the lead-up to the festival, during the weekend itself, and in the weeks following.
Kriss named his agency after
Page load times were also a key
brainstorming many words that he liked
consideration, as the website sees
the sound of. “Createful just �lew off the
over a million hits per year, with
tongue,” said Kriss. “It’s a made-up word
more than half of these occurring
that is unique, so if you Googled it you
across the weekend of the festival.
would �ind us. Createful.com wasn’t
A large portion of tra��ic is from
available at the time, though we did
mobile and hand-held devices, so
secure this later, but createful.co.uk was,
we’ve worked hard to optimise
so we went with that as a start. What’s
every image we added to the site,
fantastic is how people use the word
using SVG �iles wherever possible,
‘createful.’ It becomes an adjective in the
and leveraging a raft of caching and
same way that Google has become a
loading techniques to ensure fast
verb. We’ve had clients in meetings
load times.
saying: ‘Hey, that’s a createful idea’.” Each agency approaches how it �inds clients differently. For Createful, the strength of the relationships with clients has meant long-standing commercial partnerships have been forged. As Kriss explains, “Word of mouth has been key and we have a
locally and nationally as a trusted supplier
We’re always looking to take on bigger
prominent, street-front presence in
in a heavily regulated industry.”
projects, but that doesn’t mean we’ll
Bournemouth’s Lansdowne business
All agencies want to push the
neglect the smaller ones. We carefully
district. Having said that, we do pitch for
boundaries of what is possible technically
consider what would be fun and
work and we’re conscious we need to do
and creatively. However, they are still a
interesting for the team to work on. Plus,
more of that to win business.”
business. It is always important to carefully
we also like to have our own internal
choose clients that allow a level of creative
projects to develop on the go. Our
�inancial services business LV= for over
freedom and that also ensure the
Wedding Planner and My Garage Tracker
three years now, and it’s fantastic that
relationship is lucrative enough.
apps are few examples of this.”
Kriss adds, “We’ve been working with
such a large organisation recognises us as
“We choose to work with clients we
Kriss continues, “With any new project,
a trusted partner for digital projects. We’ve
align with, we work with clients of all
we’ll ask ourselves if it’s core to what we
worked with them on a variety of projects,
shapes and sizes from startups and
do. We’re not a full-service agency and we
from creating customer-focused mobile
individuals through to large corporates,”
won’t ever try and wing it. We focus on
apps, to facilitating innovation days, staff
Kriss outlines. “It’s about aligning budget,
our strengths and would rather partner or
projects and other business initiatives.
time and quality with the project
refer work that’s not central to what we do
Every client is important to us, but to be
expectations. We work across sectors
and would pass on a project that doesn’t
able to work with LV= gives us great kudos
and don’t focus on any speci�ic vertical.
align with our values.”
36 _____________________________________________________________________ pro file
Above The new look for the Bournemouth Air Festival site ha d to en sure its design worked on a range of devices Right The creative environment moves fast. Createful can quickly develop their idea, all powered it would seem with a good s uppl y of bananas
KRISS BENNETT Founder and managing director “With any new project, we’ll ask ourselves if it’s core to what we do. We’re not a full-service agency and we won’t ever try and wing it. We focus on our strengths and would rather partner or refer work that’s not central to what we do and would pass on a project that doesn’t align with our values.”
pro file _____________________________________________________________________37
1× Managing Director
TIMELINE
2011 After Createful is founded, the agency releases the �irst mobile app for Lush Cosmetics. No. of e mployee s: 3
2012 Createful moves into its �irst o��ice at the enterprise Pavilion at the Arts University, Bournemouth. No. of e mployee s: 3
2012 The Pronto to-do and reminder app wins FWA app of the day. No. of e mployee s: 3
2012 Createful is awarded Best Employer award at the ‘Open 4 Business’ awards. No. of e mployee s: 4
2012 The Wedding Planner for iPad app wins a Silver Lovie award in the Utilities and Services category. No. of e mployee s: 4
2013 Createful moves to a new, larger o��ice space in central Bournemouth. No. of e mployee s: 6
1× Creative Director
1× Marketing Executive
The core of an agency is often the founders’ desire to break out on their own, or they have been frustrated by the design process in agencies they have worked within. For Createful the ethos they have developed has many strands, including an effective strategy for their clients, which is in turn developed from creative and technical innovation. The projects for Lush are a good example of how a client aligns with Createful’s ethos as Toby Pestridge, creative director, explains: “Kriss has a wealth of experience in software development and digital. Having worked with national companies prior to founding Createful, he balances his technical knowledge and experience with a business understanding and ability to marry the creative and technical with an eye for design and almost regimental attention to detail. “The team would agree that one of Kriss’s greatest values is his drive and effort to fully understand our clients and the needs of their businesses. This enables us to deliver the right solution and excellent value to our clients, whilst at the same time always maintaining the fun place to work we have. We’re committed to a fantastic work/life balance and everyone supports each other in our team.” How an agency approaches each project is governed by many factors. For Createful, projects can take anywhere between three and 18 months to
1× Front-End Developer/ Designer
1× Financial Director
3× Web & Mobile Developers
complete. Createful also pride themselves on being ultra-agile in that they c an complete a project which includes design, build, develop and iterate an app in under four weeks. Adrian Hopper, commercial director, says: “We did just that recently for a high-end jewellery-based app. Launched at this year’s Cannes Film Festival by the diamond trading company Nemesis International, their imperative was a launch in time for Cannes, so this was an immovable quick turnaround deadline. “Every project is different, but roles will generally involve team members working on project management, user experience, creative design and development in varying quantities depending on the bri ef,” Adrian continues. “Mostly our project teams have four or �ive people working on a project collectively, with input from the wider team to support them as needed. “There is no one par t that is always the most time-consuming. You do need to start off well, de�ining and conveying
38 _____________________________________________________________________ pro file
1× Business Development Executive
Above The famous Createful colouring wall! Createful ask all their clients and visitors to colour in a bit at a time Above rig ht Members of the Createful team developing world-class project s for thei r widening and diverse client base Right Createful’s front-end designer Michelle Dinan (left) and experience designer Ben Young (middle) walk through some wiref rame layout s
1× Commercial Director
1× Senior Developer
1× Office Manager
1× UX Designer
1× Project Manager
2014 A new brand website is launched for the fashion brand Animal. No. o f empl oyees : 7
2014 The Colourless children’s storybook app wins Best Mobile App at the Wirehive 100 awards. No. o f empl oyees : 7
NEMESIS INTERNATIONAL nemesisinternational.com As one of the premier
sale. This was more than
in a surprisingly short
test and iterate. This
rough diamond sourcing
a simple sales tool – it
time period. The result
allowed the client to
and trading companies
incorporates complex
blends behind-the-scenes
review the app on their
in the world, Nemesis
pricing algorithms, remote
complexity with a simple,
own devices to help evolve
International plays a
data tables that control the
solid user interface.
and re�ine the app to meet
pivotal role in the pricing
price of each individual
and forecasting of
stone, and a searchable
great example of working
diamond supply.
index of every piece
Agile: with a very short
available by cut, carat,
delivery schedule, we
initial deployment, we’re
clarity and more.
worked closely with a
now working with Nemesis
remote client in Dubai in
International on the next
Nemesis International approached us to create a bespoke solution that
With an immovable
This project was a
the needs of both the business and their users. Following the successful
would enable their expert
launch deadline, we
quick incremental delivery
phase of the project,
sta�f to manage the
designed and produced an
sprints to rapidly build out
enhancing functionality
catalogue of items for
elegant, intuitive solution
functional requirements,
and user experience.
the requirements at the outset and making sure expectations are agreed and shared on both sides of the table. Once that’s done, we can build it . While always trying to avoid scope creep, we work agile so as requirements evolve we still deliver.”
Dorset businesses enables us to meet the client early on during the process. In terms of expansion, we are growing our commercial side of the team, and are focusing on networking and exploring sectors we haven’t worked with previously. The most exciting project can grow from the smallest of conversations – we’ll never
online SaaS tools. In an ever-evolving industry we’re constantly re-evaluating the languages and tools we use to deliver the best results effectively.” Toby continues, “As web developers, we would like to see a SASS/LESS approach adopted more widely. The future is more in line with unifying standards and
Q. Many of Createful’s projects are local
and how are you looking to expand?
turn down anybody who wants to drop in for a conversation. The coffee’s always on and we’re always keen to hear new ideas.” Adrian Hopper, commercial director
“It’s easy to pick up the phone or send an email, and you’ll probably end up with the information you require. However, face-to-face meetings from the start of a client-agency relationship enable both sides to gain insight into the other’s ways of working, professional expectations and,
To achieve the outstanding results that Createful have achieved, they use a wide range of tools that Toby outlines: “There is a whole suite of tools we use to deliver projects, and the list is always evolving.
reducing variance between browsers. Typically, you must do lots of different things to make all browsers work when you are developing a site. We’d like them to adopt the same standards and we’d like to see more design processes embedded into the browser itself – that makes a lot of sense to us.” With clear trends for mobile platforms to become the norm with all digital design, Createful has embraced these
of course, their personality. “The best projects we’ve worked on are built on trust and openness. Focusing on
We currently use a combination of Sketch, Adobe Creative Cloud, Apple Xcode, Android Studio, PHP Storm and many
changes across all its client projects. Indeed, the agency almost dropped the word ‘responsive’ from its marketing and
to o�ice location – Bournemouth, Dorset. What are the advantages to this
2014 Awarded runner-up for Fastest Growth category at the Wirehive 100 awards. No. o f empl oyees : 7
2015 LV= returns to Createful for its second mobile app. No. o f empl oyees : 10
2017 New website launched for the 2017 Bournemouth Air Festival, celebrating its tenth festival event. No. of emplo yees: 14
2017 Nemesis International commissions an app to be launched at the Cannes Film Festival 2017. No. o f empl oyees : 14
39 pro file _____________________________________________________________________
communications materials. Today, clients expect their sites and apps to be fully responsive as standard. As consumers now use multiple devices and multiple channels to communicate with the brands they covet, this has meant design agencies have had to ensure they deliver a uni�ied approach to their client briefs. “More and m ore, the transition we experience between states of ‘o�line’ or ‘online’ is increasingly �luid,” says Kriss. “A time is coming where the need to pick up a phone or use a computer to carry out ‘online’ tasks becomes a thing of the past – we are already seeing it with the growth of voice UI.” Kriss continues, “Today’s software development is all about UX (user experience). User experience beats everything else when it comes to mobile, and the decision between native or hybrid systems can heavily in�luence the success of that experience.
LV= UX & INNOVATION WORKSHOPS Recently awarded ‘Insurance Provider of The Year’ at the 2017 Which? awards, LV= are a proven brand in the personal and healthcare insurance market. We’ve worked on a number of projects with them over the past few years.
team led a UX workshop to help interdepartmental teams arrive at an agreed structure for a customer-facing process �low decision tool. Seemingly simple multi-part forms can have deceptively complex rules behind the scenes.
workshops and navigating the varied demands of clients and users alike resulted in a positive outcome for all. The project is ongoing, but we’re really enjoying engaging with a client that prioritises i nnovation and a best-practice approach to the
The most recent has seen us creating and facilitating a series of information workshops. As part of an internal innovation series, we ran a workshop with the digital team at LV= on rapid prototyping. This focused on using Marvel’s in-app prototyping kit (marvelapp.com), which allows users to either
Our expertise in running
user experience.
“In the long run, the biggest detraction of hybrid apps is that we will likely spend more time �ixing and tweaking the app because of user complaints about UI elements or performance-driven issues. Native apps have the added advantage of functions that are speci�ic to the OS on which the app is built (e.g., camera, GPS, address book, etc). Furthermore, a native approach offers the best-in-class security for a mobile application, the best
approach to design problems focuses on what happens o�line – considering the entire user experience, whether that’s client or customer. What in�luences and
family and businesses of course include social media networks. For Createful, building social media support into the websites and apps they create is vital, but
performance, a highly responsive user interface, and access to all native APIs. In other words, the original investment may be higher, but time and money will be saved in the long run while offering a great user experience and an industrystandard app performance.” Ben Young, Createful’s experience designer, also explains: “Regardless of the technological medium, a core part of our
forces lead people to do what they do? Those emotional drivers rarely centre around digital — they’re more concerned with just getting things done or solving a problem, staying in touch with friends, or relieving frustrations or pain points. The tools we make happen to use the web, but that’s not their raison d’être.” The multiple channels that consumers now use to communicate with friends,
Createful also listen to social media. Kriss points out: “If you use social media well, it can be great for a business. Properly targeted social media helps get rid of a lot of noise. For example, we use it to direct people to our in-house My Garage Tracker app which helps you keep an eye on important dates affecting your car. It shows you when your MOT is up, your tyre pressures need checking and how long you have before the insurance
sketch out a design by hand, or use the built-in tools to quickly bring ideas to life. In a separate project, two of our design and front-end
TOBY PESTRIDGE Creative director “As web developers, we would like to see a Sass/LESS approach adopted more widely. The future is more in line with unifying standards and reducing variance between browsers. We’d like them to adopt the same standards and we’d like to see more design processes embedded into the browser itself – that makes a lot of sense to us.”
40 ____________________________________________________________________ pro file
renewal is due, that kind of thing. We listen on social media for people s aying they’ve forgotten their next MOT date or whatever and interact with them to introduce the app. It’s a perfec t example of a ‘Createful idea’. Social media is all about creating content that has genuine, not contrived, value.” Createful is a compact agency with just 14 full-time employees. As such, choosing the right people to join the team is crucial. Kriss outlines what he’s looking for when considering new team members: “It’s important to have an online presence
Right The creative space of Createful o�fers work and leisure in an environment that balances both Below Project manager Nicole Cook makes sure everything the agency does runs smoothly! Bottom Createful’s creative director Toby Pestridge is also their in-house Google Analytics expert, and runs sessions for clients on getting the most out of their website stats
FOUNDER
SERVICES
Kriss Bennett
Digital Strategy & Innovation
YEAR FOUNDED
Web Design & Development
•
m o c l . u f e t a e r c
•
2010
Mobile App Design and Development
CURRENT EMPLOYEES
•
User Experience and Rapid Prototyping
14
•
LOCATION
Bournemouth, UK
and persona that you can evidence with a portfolio,” he says. “Ask yourself what you are passionate about and be
Hosting, Support and Web Security
the right amount of resource to throw at the projects we take on.” Kriss concludes, “We’ll continue to
ready to show how you’d work with that
reward creativity and risk-taking and
passion. Be adventurous in bringing ideas
celebrate difference. Part of the joy of
to the table and exploring technology.
working at Createful is having a good
You need to be keen to learn in this
work-life balance. That remains really
ever-evolving industry.
important to us. We’re really excited about
“When we’re looking at prospective
the new website we’ve designed and built
employees we want to see someone who
for the Bournemouth Air Festival, taking
is con�ident and honest about their
place over the coming August Bank
experience and who has the ‘Createful
Holiday, and how that will evolve. As an
vibe’,” Kriss continues. “That means natural
information portal, the site is a vital means
inquisitiveness, an appetite to solve
of communication and there will be at
problems and a hunger for learning. It also
least 1.5 million page views this year. We’ve
helps if you love cake. We’re an agency
a great relationship with the organisers
powered by cake, from doughnuts to
Bournemouth Tourism and Bournemouth
cheesecake. At the same time, we do have
Council and we hope the site will go from
some keen gym-goers who make a point
strength to strength over many years.”
of burning off the calories!”
A glance at the client roster Createful
And how does Kriss intend to grow
now have speaks volumes about what
Createful? “We are keen to grow our team,
they bring to the table. Whether
turnover and pro�itability, but we’re not
developing for a government project, or
looking to diversify. We remain true to
an app that will touch millions of users,
our core offering: We don’t have
Createful never forget that technical skill
aspirations to be a mega agency with all
needs to be balanced with inventive
the bureaucracy that goes into managing
insight. As the digital channels continue to
lots of people and projects. We want to
expand, agencies like Createful are vital, as
remain a solid, high-growth agency with
they react to and shape trends.
41 pro file ______________________________________________________________________
WEB 3D
THE THIRD DIMENSION AND BROWSERS ARE COMING EVER CLOSER. WEB DESIGNER GETS THE PROS TO REVEAL ESSENTIAL TIPS AND TECHNIQUES THAT HARNESS THE POWER OF WEBGL AND THREE.JS TO HELP YOU BUILD BETTER EXPERIENCES FOR THE WEB
he web, as we know it, is constantly changing and evolving. What we still can
remember as a simple and straightforward medium gained another dimension a few years ago, and it doesn’t look like it’s going to stop there either. What was once part of science�iction movie visual effects is now possible on a tablet lying on your couch, and there are buildings covered in large-scale interactive installations that are actually just fullscreen Google Chrome windows. WebGL is a permanent part of internet as we know it, WebVR is settling in and WebAR is taking its �irst steps. What this means is that you are already able to travel through three-dimensional environments, in virtual reality, connected through a worldwide network and see other people there – what’s more futuristic than that? Not only has the technology became
3D environments have become a permanent part of the internet, and with support across all types of devices, they are the best way to get more immersive experiences to everyone
more advanced, but also the tools have become simpler and more accessible for developers and designers. What does this mean? It means that new immersive experiences are not far away. Read on to start building today.
Marpi - marpi.pl
7 STEPS TO GREAT 3D DESIGN Essential tips to help make a beautiful and captivating experience
1
Why are you doing it?
Let’s start from the beginning. Everyone’s doing things for a reason. Would you like people to experience what you imagined? Play with it? Maybe surprise them and show them something they’ve never seen before? You just want to try it? There’s no wrong answer, and the reason will shape the result.
2
It should feel good
Whenever someone mentions the ‘look and feel’ of an experience, the look is easy to describe, and in most cases i t’s a straightforward plan: make it pretty. The feel is more ephemeral – it’s somewhere between high frame rate (keep 60fps!), �luid animations (a lot of easing, follow rules of physics or break them on purpose) and general consistency of the experience. You’re making a small world, so it has to make sense.
3
Make it interactive
As you progress in creating your experience, you’ll notice it’s actually plenty of space once you have this one extra dimension. Fill it with a lot of
different things. Let people look around and discover, let them be curious. And while you’re at it, you’ll see they have amazing ideas.
4
Let people create
Let them build, break, rearrange. Generate something new? It’s an interactive piece – through the interaction, in a way, they’re the makers. And they’re good at it. Let them create, let them save and share. There’s something great when they
6
Work on all the people
7
Keep releasing
Meet up with your least tech-savvy friends, show them what you’ve made, but don’t say anything about it. Let them click around, �igure it out. Analytics are good, but seeing someone’s reactions can give you actual insight into what you’ve made, how it makes people feel. And you only have a couple of seconds to get people’s attention – make sure their �irst action is always ‘correct’.
come back saying “look what I’ve made!”.
5
Work on all the platforms
Make it run fast and �luid – 60fps, all the time. Around 50 per cent of the work is making sure it runs and looks good everywhere. But it’s all worth it: there are a lot of p eople out there. While you test on different devices, you’ll notice they have different capabilities too – use them! Some have multi-touch, some have gyroscope, some have microphones. They can all meet in the same space, and they’ll all
One of the biggest strengths of releasing projects on the web is the ease of changing and �ixing it. You can even release it as experiments �irst, one by one; as you get better, they’ll form a more and more complete project. And once you’re done, you’ll already have people waiting for it.
A QUICK GUIDE TO CREATING 3D Marpi gives an insight into how he built Resonate, and his selection of essential libraries WHAT ARE WE MAKING AGAIN? Let’s make 100 triangles �lying around and rotating to the music. Since they have identical distances to each other, and slightly different rotation, they will form abstract waves, or �lowery patterns. And to make different colours, we don’t have to colour the actual pieces – they stay default white. What we will change, are the lights – we’ve got two of them; changing to random colours will give us a nice variety of colourful gradients.
QUICK INTRO Since we’re dealing with three dimensions, the setup will be similar to what we do in real life. Imagine a movie set: you’ll need a camera, lights and a scene with some objects in it. Without any of this, nothing’s going to happen. Or it’s just going to be really dark. Same thing here. After we initiate three.js with its renderer, we’ll set up the scene, create a camera and put it in the right position: renderer = new THREE. WebGLRenderer({antialias: true}); document.body.appendChild(renderer. domElement); scene = new THREE.Scene(); camer a = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000); SEE RESONATE IN ACTION classes.marpi.pl/resonate
Once we have this, we’re ready to put our triangles in. They will all share the same material, but each one has a different geometry. Geometry is the 3D structure, a scaffolding that de�ines all the points inside, and the material is a 2D visual form wrapped around it. That forms a mesh: // objects var material = new THREE.
three.js
TweenMax
Web Audio API
WebVR
threejs.org
bit.ly/2vF8Yrz
mzl.la/ 2f7nXqw
webvr.info
The most widespread, �lexible and easy-to-use WebGL engine out there. There’s a ready example for every important part of it – just go to
One of (many) animation libraries, versatile enough to work with DOM elements, JavaScript variables, three.js objects, will tween
Not only is it great for playing/generating music, it can also help with getting raw values of spectrum analysis that can be used for audio reactive
One of the best parts about the open web, it opens up to new devices and technologies as it evolves. Using additional libraries
threejs.org/examples , pick one and start playing with it!
pretty much anything, anywhere. And really nicely, too.
animations - your VJ visuals, synced with any music.
inside three.js can fully transform any existing project into VR.
MeshPhongMaterial(); for (var i = 0; i < 100; i++) { var geo = new THREE.TorusGeom etry(.1 + i * .2, .1, 10, 3) var mesh = new THREE.Mesh(geo, material); scene.add(mesh); }
GET THE CODE github.c om/marpi/resonat e
WEB 3D
8 PROJECTS TO INSPIRE Marpi has a must-see collection of 3D demos. Here he chooses those that are guaranteed to impress
A fully generative environment, �illed with heavily anime-inspired mecha like robots/spaceships. It started as a prototype and ended up a large scale art installation, VR world and a 3D printed collection of people’s creations.
Visualising any public GitHub project as a unique 3D ASCII creature, determining its combination of shapes, colours and size based on the coding languages used within. Press Alt + 1, 2 , 3 … for cheat codes.
Proof of concept for making a generative spider movement that would feel real – and trigger the same feelings spiders do. The look, bones animation and movement are generated from pure code, so you do feel afraid of JavaScript.
Eutow demo.marpi.pl/archan/eutow github.c om/marpi/eutow One sunny September day, a conversation with Indian artist Archan Nair sparked an ongoing collaboration. There’s a special mix of appreciation of building 3D worlds, virtual reality and hallucinogenic-themed visual systems.
It can be a site, a VR world, an art installation, anything you want. And don’t try to learn it, learning is not fun. Just grab any of the code and Marpi – Digital artist start playing with it.
Black Rain demo.marpi.pl/archan/black_rain github. com/marpi/bla ck_rai n A mix of melancholy and maps, refractions and re�lections, a cold NY night in the rain, amazing and haunting. Mix Codrops’ rain experiments from Lucas Bebber with Archan Nair’s visuals, touching on Blade Runner ’s territory.
Odra
Maratropa
Biomes
odra.city github.c om/marpi/odra
maratropa .com github.c om/marpi/maratrop a
demo.marpi.pl/biomes github. com/marpi/bi omes
What if music was generated the same way as graphics? They both have themes, systems and are built from smaller pieces that have to work
Imagining the Twitter universe as a, well, universe. Each pro�ile becomes an abstract, religious-like statue with their followers around it. You can jump
An exploration of generative landscapes, somewhere between Minecraft and Alien universes, with SSAO and Screen Space
together. And since it’s mixed with those generative creatures, in a way, they’re playing live.
between them in three dimensions, using node structure, forming sort of an arti�icial brain.
Re�lections using super shiny EchartsGL engine this time. The land long before time.
GO NATURAL WITH WEBGL The most recent work at johnnyslack.co is a ten-part series that uses only real-time waveforms to animate natural forms in WebGL. Each piece is made with three.js and uses vertex animations to manipulate 3D geometry. By passing a variety of curves, waves and algorithms through a selection of organic models, animations are created in real-time. This allows for lightweight load-times and also the ability to easily interact with the animations at run-time.
As part of Cartelle, we recently launched the new interactive WebGL homepage for Fornasetti.com. Visitors can travel down an infinite 3D tunnel wrapped in their latest patterns Johnny Slack – Cartelle co-founder
WEB 3D
THE MELTER This technique explains how to ‘melt’ a 3D object using the three.js library
1
Setup the three.js scene
Go ahead and grab the three.js library and include it in your site. You’ll need to instantiate the WebGLRenderer, the Scene and PerspectiveCamera. After these are instantiated, you will need to render the scene on RequestAnimationFrame.
your textures at a low cost. Once you’ve created your bump map image, you can impl ement it by simply applying it to the material like below. Also, you’ll need to adjust the scale of your bump map to �it the scale of your model.
2
material.bumpScale = .008;
Next, lights need to be added to the 3D scene.
In this example, two lights will be used: an ambient light and a point light. The ambient light serves as an overall global colour for the scene, while the point light will emit light that diminishes with distance. This will give the scene some contrast. var ambientLight = new THREE.AmbientLight( 0xccccccc ); scene.add( ambientLight ); var pointLight = new THREE.PointLight(
5
Use the vertex animator
Throughout his site, Johnny utilises a game extension by Jerome Etienne for three.js that makes it easier to do vertex animations. This extension allows easy access to each vertex of a model at the frame rate, making it straightforward to manipulate vertices using waveforms. The ‘ Vertex Animation’ extension is available via Etienne’s GitHub. We’ll g o further into how it’s used in the next steps.
Now that the scene has been set up, the 3D model needs to be loaded in. The model can be loaded using any supported format (JSON, OBJ, DAE, etc). Below is an example of loading a DAE model. In this example, it’s very important that the model has enough polygons to perform vertex modi�ications. The deer skull that’s being used in this example has 3,500 polys. If the poly count is too low, the vertex animations will be too explicit and distorted. loader = new THREE.ColladaLoader( ); loader.load( 'dae/deer_skull/deer_skull. dae', onLoadCompleteHandler );
4
This will push points down at the rate de�ined by the meltAmount. Remember to also call ‘update’ on your vertex animation in the render cycle.
When a point has reached the ground, it needs to be pushed outwards to achieve a melt effect. The code below is determining which direction in the X and Z axes to push the vertex so that you get a uniform displacement. The conditional ensures that only points that have reached the lowest bounds of the model (the ground) are pushed outwards. if (position.y < bbox.min.y) { var centroid = bbox.max.clone(). add(bbox.min.clone()).divideScalar(2.0); pushVector = position.clone().
6
Start melting
Melting a piece of geometry involves a few overall steps. First, each point is continuously pushed downwards. When a point reaches the ground, it’s pushed outwards using what we’ll call a ‘push vector’. Next, we’ll give the points that gather along the bottom a thickness so the melted geometry isn’t completely �lat. In order to achieve this, Johnny has ported code from Skeel Lee’s VFX shader in Houdini and modi�ied it.
7 downwards
Start moving the vertices
Below is an example usage of using the vertex animator to continuously push a model’s geometry towards the ground.
sub(centroid); pushVector.y = 0; }
9
Make the melt feel natural
The code below uses noise to create randomness in the movement so the melt feels organic. The noise variables can be tweaked to get the effect desired. The noise is then applied to the push vector along with meltAmount and spreadAmount to control the rate and size of the melted pool. This outward vector is �inally calculated and then applied to the vertex itself. var n = noiseAmplitude * generator.getVal( (position.x) * noiseFrequency + noiseOffset); var outwardVector = pushVector.
var vertexAnimation = new THREEx.
multiplyScalar( ((meltAmount *
Add a bump map
VertexAnimation(geometry, function(origin,
spreadAmount) + n) * outwardSpeed );
Bump maps are perfect for adding depth to
position, delta, now){
position.add( outwardVector );
10
Give the melted pool thickness
The code explained so far will achieve the melt effect, but two things are wrong with it. First, the pool will feel quite �lat, because all of the points have melted to the same Y position. Secondly, since they all share the same Y, too many points will be stacked at the same height, which can c ause �lickering. To avoid this, a thickness is applied at the melt rate: position.y += meltAmount * poolThickness;
11 Users can interact with the 3D model and view from multiple angles
Try it out on other models With the code above, any model with
enough polygons can be melted. You can check out the code at bit.ly/2tBptmZ (zip �ile) and swap out the model with anything you’ d like. Have fun!
TIPS TO CREATE IMPRESSIVE CONTENT WITH THREE.JS Explore how you can improve performance and get more out of your three.js scenes
1
3 USE HEMISPHERE LIGHTS
CACHE SCENE ELEMENTS
The hemisphere light gives you two coloured lights in the scene: a sky colour and a ground
If you are going to be manipulating 3D elements
colour. The light is cast into the scene from above and fades between the two. The intensity can
in your scene, such as moving models around,
also be set to give the right atmosphere. Since this light is picked up by your 3D models, it is
it’s a good idea to set up a global variable for
perfect for adding ambience in a scene: simply choose a colour that is similar to your
each of these elements that you want to move.
background or the top of your scene for the sky colour, then choose a similar colour to the �loor
In your code, you can assign the light or model
and voilà, models will take on the colouring of the scene.
to that variable. You can call those variables from any function to move it, animate or change it in any way and this will be quicker than looking up the object in the scene by its name.
4 DON’T USE SHADOWS ON MOBILE Shadows are awesome for making objects look like they are sitting in the scene: they add depth and improve the contrast. These shadows are dynamically created images that are transparent and placed over the scene to add the shadow into the correct positions. They are calculated each frame from the position of the light and the projection onto the scene, as such they can slow rendering down. If you query the browser width and detect it’s below a certain size for mobile, say 960 pixels, you could just set your scene to turn off the shadows!
2
5
OPTIMISE WITH BUFFER GEOMETRY PRIMITIVES When adding three.js primitive models, you will see that there are general geometries such as BoxGeometry, IcosahedronGeometry, etc, but there is also a ‘Buffer’ version of those. If you want to add a cylinder to a scene, instead of using CylinderGeometry, use CylinderBufferGeometry instead. The Buffer Geometry uses typed arrays and is therefore better for performance, so always use the Buffer version of the primitive. Raw Buffer Geometry is harder to work with, but in the case of the primitives, it’s much the same, as the primitive is set to do the hard work.
CREATE A TEMPLATE Many web designers use an HTML template that
If you want to add a cylinder to a scene, instead of using CylinderGeometry, use CylinderBufferGeometry. The Buffer Geometry uses typed arrays and is therefore better for performance
contains the body section, and a head section with dummy links to JS and CSS �iles. The reason they do this is so they can just get on with writing the content, �illing in the name of the stylesheet and they’re good to go. Similarly, you will �ind that every 3D scene contains similar items, such as the scene, the renderer, lights, possibly post-processing effects, maybe loading a model, so make a template that will give you an empty scene, ready to �ill. This could be placed in a function in its own JavaScript �ile and this can be called from your ‘init’ function.
WEB 3D
6 POST�PROCESSING ON MOBILE Post-processing is the cool effects that make your scene go from okay to awesome. It’s �ilm grain, bloom, depth of �ield and the like that gives a much more polished look to what you are making. Each post-process is a shader pass – a dynamically generated image – so if you are adding �ilm grain and RGB effects, that’s two dynamic images to be created and displayed. If you are doing this post-processing on mobile, copy the separate shader code into one shader. This makes it calculate it all in one go and will give a better frame rate on mobile.
7 LIMIT DRAW CALLS If you had 10,000 particles, each with a different material, the CPU wouldn’t be able to feed the GPU fast enough, so the GPU remains idle and your scene performance low. This is kind of oversimpli�ied, because it also depends on the number of points of geometry that the material is added to. An object with �ive points and one material is �ive draw calls with the same shader, but if it has �ive materials then it has �ive draw calls with �ive shaders. It can be quite complicated to get your head around, but try to create instances of the same objects or share the same material where possible. This isn’t an issue in most cases, but can be if your scene gets quite large.
8 TRANSPARENT BACKGROUNDS For some of your projects you may want to put an image behind the 3D scene or even a gradient instead of a plain background. In 3D this can be quite hard to do because the image has to cover the size of the screen, so calculating its position and scaling would drive you insane. CSS can easily make images or gradients cover the background, so it would make sense to use that. All you need to do in your code is tell the renderer to render your scene with a transparent background: var renderer = new THREE.WebGLRenderer( { alpha: true } );
9 USE A MODELLING PACKAGE Trying to build scenes out of three.js primitives in code can be a long, slow slog. It’s generally pretty hard trying to map out the objects positioning and set the camera to look at them. Instead, visually create scenes with a 3D modelling app: three.js now has loaders for a large amount of popular model formats, but the main ones used will probably be FBX or COLLADA – even Photoshop can export COLLADA models! You can name individual models within the scene and control them via code afterwards, caching them in global variables for easy access. Probably one of the issues you are likely to face is getting the scale right between modelling package and three.js – generally you need to scale the model down.
10 ACCESSING INDIVIDUAL MODELS If you’ve loaded a model scene in the COLLADA model format, every individual model gets wrapped in an Object3D. This is just a wrapper that i s used as a ba se class of most display objects. You may be wondering why this matters, so let’s explain. You can use the following to grab a model named ‘blue’ (named in the modelling package): b = scene.getObjectByName( "blue", true );
If you try to do something like a Raycast event to see if the user has clicked on this, it won't work until you get the actual model. This is always the �irst child of the Object3D: b = b.children[0];
This will give you the access that you need to make this object clickable. It will also allow you to access the materials of that object in case they need changing dynamically within the scene.
Create interactive 3D visuals with three.js Let your users explore e�fects on the environment with this interactive input slider that controls 3D WebGL visualisation
WEB
3D
DOWNLOAD TUTORIAL FILES
50
www.�ilesilo.co.uk/webdesigner
Tutorials
O
DRAG THE SLIDER TO CHANGE THE LEVEL OF
ne of the main reasons to include
mouseX = 0, mouseY = 0, windowHalfX =
WebGL on your HTML page is so that
CO2
window.innerWidth / 2, windowHalfY = window.
the graphics you display can be
innerHeight / 2, camera, scene, renderer,
interactive for your users. If the content
water, waterHt = 1;
Linking up the libraries
isn’t going to do anything on the screen or doesn’t
2
change in any way, then it’s far easier to display an image
The 3D content is being displayed through three.js, which
TextureLoader();
instead. In this tutorial the 3D content on display is going
is included here. A Collada model will be added to the
var composer, shaderTime = 0, filmPass,
to be an interactive scene that is a little like the kind of
scene later. The extra library to load this is included, along
renderPass, copyPass, effectVignette, group,
thing that can be found in our sister magazine How It
with a basic tween library. The next lines all link up to post
lastVal = 0;
Works but the big difference here is that instead of it
processing effects that will add the �inishing polish.
.
var textureLoader = new THREE.
Initialising the scene
being just an illustration, it will be interactive with the user
<script src=”js/three.min.js”>
5
being able to control what happens in the scene. The
<script src=”js/ColladaLoader.js”>
The init function is a large part of the code, ensuring the
model will spin around slowly so it can be seen from all
<script src=”js/tween.min.js”>
scene is set up with the right look at the beginning. A
sides and also the mouse will control zooming in and out
<script src=’js/postprocessing/
container is added to the page, and this is where the 3D
on the X axis and up and down on the Y axis. The scene is
EffectComposer.js’>
scene will be displayed. A camera is added and some
an environmental simulation looking at the levels of CO2
<script src=’js/postprocessing/RenderPass.
background fog to fade out the distance.
and what happens. The user controls the levels using a
js’>
HTML input range slider. As the user adds more CO2,
<script src=’js/postprocessing/ShaderPass.
more smog will appear in the scene, the water levels
js’>
createElement(‘div’);
will rise as the increase in temperature melts more polar
<script src=’js/postprocessing/MaskPass.
document.body.appendChild(container);
ice caps, then trees will disappear as they become
js’>
3
opposite direction will reverse the effects. If only it was
After the scene has rendered each frame, a number of
that easy in real life!
post process effects will be added. These are the libraries
.
that empower the �ilm grain effect, a tilt shift blur at the
Display elements
To start the project, open the ‘start’ folder in your code
var container = document.
camera = new THREE.PerspectiveCamera(75,
Post processing shaders
using a tween library and dragging the slider in the
.
function init() {
SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
immersed in water. The elements are animated in and out
1
.
camera.position.set(2000, 100, 0); scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0xb6d9e6, 0.0025);
top and bottom of the screen, then �inally a vignette to
renderer = new THREE.WebGLRenderer({
fade out to the edges of the screen.
antialias: true
IDE. Open up index.html and you will see there is a basic
});
Adding the variables
page scaffold there with some code already. In the body
4
section, add the display elements here that will be used
Some of the code has been completed for you. You will
as the interface to the 3D content.
see a comment where to add the rest of the tutorial’s
.
Shaders
code. A number of variables are used in this 3D scene, which look after screen resolution, various 3D models
Shaders are special programs written in a ‘C’ like language that sends all the information to the graphics processor for quickly running effects. As such they are very e�icient. Take a look at one such as the ‘VignetteShader.js’ to see if you can follow what it’s doing!
and post processing. Two important variables are the
waterHt for the water height and the lastVal, which
remembers the last position of the slider.
max=”7” step=”1” value=”0”
var SCREEN_WIDTH = window.innerWidth,
oninput=”showVal(this.value)”>
SCREEN_HEIGHT = window.innerHeight,
Left
The basic layout of the page is shown here before the 3D scene has been added. The image is a transparent PNG at the top of the screen and there is a range slider at the bottom Top left
The params() function is called in step 9, which sets the parameters for the post processing vignette and �ilm grain e�fect Top right
The �irst group of clouds can be seen in the scene. The others are hidden and will be visible when controlled from the slider by the user
51
Tutorials Create interactive 3D visuals with three.js
6
Setting the renderer
FilmShader);
var y = 60 * Math.random() + 60;
The renderer is given a background colour and the
effectVignette = new THREE.ShaderPass(THREE.
var z = 400 * Math.random() - 200;
resolution is set to the same size as the pixel ratio of the
VignetteShader);
sprite = new THREE.Sprite(material);
screen. Shadows are enabled in the scene, and it’s placed
copyPass = new THREE.ShaderPass(THREE.
sprite.position.set(x, y, z);
on the page in the container element. A hemisphere light
CopyShader);
.
11
is added, which has a sky and ground colour.
.
Composing the e�fects
Scaling the cloud
renderer.setClearColor(0xadc9d4);
8
renderer.setPixelRatio(window.
The effects have to be stacked up in something called an
in the scene. Every group of clouds after the �irst group is
devicePixelRatio);
effects composer. This takes each effect and applies the
scaled down so that they are virtually invisible to the
renderer.setSize(SCREEN_WIDTH, SCREEN_
styling to it. Then it is all displayed as a �inal scene on the
renderer. This is how they will be made visible later by
HEIGHT);
screen, which you will see when the render function is
scaling them back up to their full size, as this will give a
renderer.shadowMap.enabled = true;
added later.
good tweening effect.
.
The cloud is scaled up to a size that allows it to be visible
renderer.shadowMap.type = THREE.
7
.
Loading the cloud image
9
container.appendChild(renderer.domElement);
The params function is called and this sets the individual
Now the Collada Loader is set to load the s cene.dae
var light = new THREE.
parameters for the post effects. A new group is created
model. When it �inishes loading, the model is scanned
HemisphereLight(0xa1e2f5, 0x6f4d25, 0.5);
and this will hold all of the scene content within it, to make
and any object that happens to be a mesh is made
scene.add(light);
it easy to rotate the group of objects. A transparent PNG
to cast shadows and receive shadows to give some extra
image is loaded as a cloud material to be used as a sprite
depth to the scene.
Shader variables
.
within the scene.
12
Loading the model
PCFSoftShadowMap;
.
var loader = new THREE.ColladaLoader();
The variables that will control the shader post process
params();
loader.options.convertUpAxis = true;
effects are given their values here. These variables will be
group = new THREE.Group();
loader.load(‘scene.dae’, function(collada) {
used later to add values that will control the look. If you
scene.add(group);
look in the params function you will see this already completed for you.
var dae = collada.scene;
var cloud = textureLoader.load(“img/cloud.
dae.traverse(function(child) {
png”);
renderPass = new THREE.RenderPass(scene, camera);
if (child instanceof THREE.Mesh) {
material = new THREE.SpriteMaterial({
child.castShadow = true;
map: cloud, opacity: 0.6, color:
child.receiveShadow = true;
hblur = new THREE.ShaderPass(THREE.
0x888888, fog: true
HorizontalTiltShiftShader);
});
} });
vblur = new THREE.ShaderPass(THREE. Eight groups are created inside the �irst for loop. These
As the model is now ready for display it is set to the right
eight groups all get 35 clouds added to them in the
size to �it the scene. The code needs to speci�ically control
second for loop. Each cloud is placed in a random
the height of the water so the water model is found in the
location above the scene. The groups will be turned on
scene and passed into the global variable. Similarly the
and off with the slider by the user to show smog being
main light needs to be found so that it can be set to
added and removed in the visualisation.
project shadows.
To have shadows in a scene, the renderer has to have shadows enabled, models need to be set to cast shadows and receive shadows, then �inally the light source needs to send the shadows from its position. That’s a lot to do, but the results are de�initely worth it!
Top left
The model has been added with the main light set to emit shadows onto the scene. There is something substantial to look at in the scene so the tilt shift blur effect can be seen at the front and back of the scene Top right
With the mouse and touch events set up, the scene becomes reactive to the mouse movement, zooming in and out while being able to tilt the scene up and down Right
With everything working, you can see the background fog clearly as you move the mouse so that the camera gets a higher vantage point on the scene
.
for (j = 0; j < 8; j++) {
13
Finding speci�ics in the scene
10
filmPass = new THREE.ShaderPass(THREE.
Casting shadows
52
Double for loop
VerticalTiltShiftShader);
.
dae.scale.x = dae.scale.y = dae.scale.z =
var g = new THREE.Group();
0.5;
for (i = 0; i < 35; i++) {
dae.updateMatrix();
var x = 400 * Math.random() - 200;
group.add(dae);
Tutorials
Create interactive 3D visuals with three.js
Collada models The Collada model format was originally developed at Sony Computer Entertainment with the collaboration of many 3D software companies as a way to share digital assets. The name Collada actually stands for COLLAborative Digital Assets, with the �ile extension ‘DAE’ standing for Digital Asset Exchange. The model is basically an XML �ile so your code editor can open it and read it, but don’t start adjusting anything! As XML is a web-based format it makes it a good choice for loading your models. In this example, we’ve used Cinema4D, but almost all 3D apps will work. In the model, many of the objects have been named in the 3D package before exporting, such as the ‘Water’ model. This allows the code to identify that and manipulate it in real time.
water = scene.getObjectByName(“Water”,
window.addEventListener(‘resize’,
easing(TWEEN.Easing.Quadratic.InOut).
true);
onWindowResize, false);
start();
water = water.children[0];
}
waterHt += 0.07;
light = scene.getObjectByName(“SpLight”,
new TWEEN.Tween(water.scale).to({ y:
Rendering each frame
true);
16
light = light.children[0];
The render function is set to be called as close to 60
back to their original size with an elastic tween. Save the
document.addEventListener(‘touchstart’,
if (val != lastVal) {
scene and view the web page from a server either hosted
onDocumentTouchStart, false);
if (val > lastVal) {
locally on your own computer or on a web server. You will
document.addEventListener(‘touchmove’,
new TWEEN.Tween(group.children[val].
be able to interact with mouse movement and the slider
onDocumentTouchMove, false);
scale).to({ x: 1, y: 1, z: 1}, 800).
to change the scene display.
53
web workshop
Create an animated intro with sliding images As seen on
�lavinsky.com Slide right The portfolio of work is located off the screen to the right. Clicking the link in the top right slides this onto the screen.
Slide le The about menu item is located in the top left. When selected the about section slides on from the left side of the screen, completely �illing it.
54
Exploring further
Rollover animation
Sliding images and text
Selected works are also found on the homepage, a small arrow in the bottom left of the page hints that there is content below.
As the user places their mouse over the images they ease apart to reveal the text whilst also changing from a black and white image to full colour.
As the site loads the intro animation slides the images onto the screen from the bottom left and right to �inish over the text. The text letters also move into place.
Create an animated intro with sliding images DOWNLOAD TUTORIAL FILES
EXPERT ADVICE
A strong direction for the yearly redesign
Black and white There is great contrast in the site section because the site is themed around black and white. When the user clicks the about or portfolio section the screen colour changes from white to black. When scrolling down the page, content is also found in alternative black and white sections.
www.�ilesilo.co.uk/webdesigner
What our experts think of the site
“Every year, I redesign my portfolio. This year, I wanted to �ind a fair balance between interaction and simplicity, and �ind a more assertive art direction. I chose to work on a black and white design to give more impact to assets. I chose the Compacta font to create a contrast with the simplicity of the design.” Flavien Guilbaud, Art Director
Technique 1
.
Intro animation
Headlining the show
4
.
The next two CSS rules position the headline in the middle of the s creen, vertically and horizontally. The
These steps recreate the intro animation found on
headline text size is increased to give it more impact and
�lavinsky.com . The code here should be added to the
to extend beyond the edges of the images.
body section to wrap the content in a div that will hide
#heading {
any over�low elements. Inside here will be the heading
position: absolute;
with the front and back image.
top: 50%;
left: 50%;
transform: translate(-50%, -50%); }
#heading h1 {
Welcome
font-size: 10em; }
5
.
Sliding photographs
The slide CSS class has common elements st yled up for
2
.
Styling up the content
both of the photographs with the width, height and the
Create either a separate style sheet or some style tags
positioning. The transform origin is moved just to help
and then add the basic page styling to remove the
with the rotation and the animation is set to play once
default browser margin and padding. The container is
and hold on the �inal keyframe using a slight easing out.
made to �ill the page, hiding any over�low content as the
.slide {
images will start from an over�low position.
width: 400px;
3
html,body {
height: 600px;
margin: 0; padding: 0;
position: absolute;
width: 100%; height: 100%;
top: 50%;
font-family: ‘Oswald’, sans-serif; }
left: 50%;
#container {
transform-origin: center center;
position: relative;
animation-duration: 1.2s;
width: 100%; height: 100%;
animation-fill-mode: forwards;
overflow: hidden; }
animation-timing-function: ease-out; }
.
Front and back
6
.
Moving into place
Now the unique style is added for the front and
Now the keyframes for both of the images are created so
back elements so that they have a unique image that
that the images move into place from their starting
is set to cover the div. The animation keyframes are
positions and end in their �inal destination over the text.
linked up with the animation-name and the initial
Save the code and test it in the browser to see the
transformation is set.
animation move into place.
#back {
@keyframes slideTop {
background: url(img/back.jpg) no-repeat
from {
center center;
transform: translate(-200%, 100%)
background-size: cover;
rotate(0deg);
animation-name: slideTop;
to {
}
transform: translate(-200%, 100%)
transform: translate(-52%, -52%)
rotate(0deg);
rotate(5deg);
}
}
}
#front {
@keyframes slideBelow {
background: url(img/front.jpg) no-repeat
from {
center center;
transform: translate(100%, 120%)
background-size: cover;
rotate(0deg);
animation-name: slideBelow;
to {
transform: translate(100%, 120%)
transform: translate(-48%, -48%) rotate(-
rotate(0deg);
5deg);
}
}
}
}
55
Tutorials
Responsive video masking with SVG Explore the possibilities of hiding video clips behind an SVG mask with the help of Clip Path
DOWNLOAD TUTORIAL FILES
56
www.�ilesilo.co.uk/webdesigner
Tutorials
M
asking has been used in design and
documentation for the API (http://srt.lt/L7pF0 ).
print for centuries and has been
Placebo
var tag =
achievable using graphics
document.createElement(‘script’)
programs such as Photoshop for
;
almost as long as CSS has been around. However,
tag.src =
masking on the web has been a whole other story,
“https://www.youtube.com/iframe_api”
but we’re �inally getting natively supported – by the
;
browser’s rendering engine and implemented in CSS –
…
Import fonts and apply some basic styles 5
.
masking on the web!
At the moment we have the video loaded into the page and our SVG clip path de�ined. We’ll move over to the CSS
new methods: masking and clipping. They will both
Create the video player inside the iframe
‘mask’ an image by using different code and in different
Using the documentation for the API again we’ll add a
a chunky font (Ubuntu from Google Fonts) and import it
ways. Due to them being separate properties, browser
script tag to the page to load the API and create the
along with Sanitize. Next we’ll style the body and our slice
support differs for each property. At the time of writing
iframe which will hold the video. We’ll also add
container.
clip-path has wider browser support.
id=”js-player”>
to the HTML, inside our basic
@import url(‘http://srt.lt/Q6P0nY’);
structure, to load the iframe into.
@import url(‘http://srt.lt/P7WoP’);
...
body {
The new support in CSS is implemented using two
In the tutorial we’ll be masking a YouTube video using SVG. We’ll be using a (well known) hack to make the
3
.
video’s iframe responsive and use the new clip-path
and create some basic styles to begin with. We’ll choose
function onYouTubeIframeAPIReady() {
background-color: #000;
property to mask the video. We’ll also be using the
player = new YT.Player(‘js-player’, {
font-family: ‘Ubuntu’, serif;
YouTube JavaScript API to load in the video and regain
height: ‘390’,
.slice {
control of the video after the mask is applied. As a bonus
width: ‘640’,
position: relative;
we’ll also create an animated outline for our mask for
videoId: ‘-JJAXwAaA2w’,
display: block;
when the video is loading. It’s still pretty early days for
events: {
max-width: 85vw;
these new properties so full browser support isn’t likely to
‘onReady’: onPlayerReady
land for maybe a year or two, but here’s how to get
}
started if you’re one of the lucky ones.
});
margin: 0 auto;
}
}
}
Responsive iframe/video hack
6
…
.
Next we’ll apply the well known hack for making the iframe tag responsive. The code works by relatively
We’ll start by creating a new HTML, CSS and JS �ile and
Create the SVG we’ll be using to mask the video
linking them in our newly created HTML �ile. We’ll also
Moving over the HTML inside our div with the class
iframe and stretching it to �it the container. The ‘hacky’ bit
create a basic structure to hold our video and mask.
video-container we’ll create an SVG and de�ine our clip
1
.
HTML Setup
4
.
path, inside the defs tag. From here we could create almost anything; we could use shapes or paths to create
our mask, but we’ll use the text tag to mask the band
