Web_Designer_UK__May_2018

FORM AND FFUNCTION
TIMELINE
whythenotionofcustomtoolsisvery
strong on the dev side of FFunction.
Internally,wemostlyusecustom
languagesthattranspiletoJavaScript/
HTML/CSS and a custom set of libraries
for component-based UI and animated,
interactivedatavisualisation.Datavizisa
demanding field that pushes web
browsers to their limits. If you want to
innovate, chances are there’s no library
out there that covers your needs — if
you limit yourself to what’s already
available, you’ll need to compromise on
your ideas and, at the end of the day, limit
your technical abilities.
“We’re critical engineers; we believe in
the value of a deep understanding of how
technology works and the power of
technology ownership. That is why we
spend the time to create custom tools that
give us the independence we need to
preserve our creative freedom.”
How technology is developing and how
this can be harnessed for creative
applications is something FFunction is
always keen to explore. Sébastien
continues: “HTML/CSS/JavaScript are here
to stay: they’re the basic building blocks
for the Web. But the ecosystem that sits
on top of these core technologies is
changing fast. Technologies like jQuery
wereagreatoptionafewyearsback,but
don’treallycutitnowadayswhen
visualisations have to be more than
animated bar charts.
“Libraries like D3 and React are
currently the better options, but they
won’tcoverallyourneeds.Reactisnot
very good at data visualisation as it has an
overhead that is directly proportional to
thenumberofdatapointsyou’re
mapping, and has a model that is not
optimal for animating elements. D3 is
great for data visualisation in general,
and mapping in particular, but lacks the
structure required for larger applications
or more complex visualisations that
integrate interactive controls.
2008
Sébastien and Audrée
meetoverabeer.Shortly
after,FFunctionisborn.
Employees 2
2010
The Worldwide
Infographic Boom.
Edelman becomes a
regular FFunction client,
and FFunction is busy
creating infographics and
dashboards for its
Fortune 500 clients.
Employees 3
2012
First major interactive
dataviz contract, for
National Geographic.
Employees 4
2014
Recipient of the AIGA
Justified, plus Top Studio
at the Kantar Information
is Beautiful Awards.
Employees 5
2015
Demand is ramping up
for FFunction’s work. The
studio lands major
application contracts
with Google, DAI/USAID.
FFunction becomes a
certifiedBCorp.
Employees 7
2017
FFunction decides to
develop its first product,
a project planning
software called Min.
Employees 9
Since we
started using
Zeplin, the
designers
spend much
less time
reviewing the
finished
projects, as
they’re pretty
much pixelperfect
from
the get-go
“In our development kit, we designed
primitives that scale well across this
spectrum,fromsimpleanimated
visualisations to complex data-driven
components that interact with each other.
Wemanagedtostrikethisbalance partly
because we’ve used and learned from
libraries such as D3, React and others, but
also because our work has become more
complexasthestudiohasgrown.”
Asmoreinformationisnow consumed
on mobile devices, how does this impact
FFunction’s approach to each project?
“I’ve said this before: mobile dataviz is not
justadesktopdatavizinminiature — it’s a
different thing entirely,” said Audrée. “I’ve
triedlotsofdifferenttacticsto create
dataviz for mobile. Smaller devices force
you to develop succinct data visualisations
that get your points across cleanly. My two
main strategies are to reduce the amount
of information and use small multiples.
“It’sthe‘smallifyorsimplify’ approach.
Small multiples (AKA trellis charts, lattice
charts, grid charts, panel charts) are
incredibly handy if you want to make
dataviz that works equally well on mobile
or desktop. It’s just a series of similar
graphs or charts that use the same scale
andaxes,whichallowsforeasy
comparison. In the desktop version, they
can sit next to each other, and in the
mobile version you can stack them up.
When he was still with NPR, Brian Boyer
championed the notion of ‘small multiples
on desktop, GIFs on your phone’, which I
thinkisalsoasupergoodsolution.”
As the environment that FFunction
workswithinisconstantlyshifting, what
technologies are attracting its attention
at the moment? Sébastien comments:
“There’s been a boom in tools that
facilitate the design process, from the
creation (Sketch, Figma, Webflow) to the
collaboration and delivery (InVision,
Zeplin). This all helps having a smoother
flow of work while also increasing quality
and efficiency.
“For instance, since we started using
Zeplin, the designers spend much less
time reviewing the finished projects, as
they’re pretty much pixel-perfect from the
get-go. On the other hand, there is a
plethora of new data-visualisation tools,
but, for me, none of them strikes the right
balance of creative freedom and
sufficiently powerful data manipulation
features. It’s really difficult, because you
don’t want something overly simplified like
a data-driven Illustrator, but you don’t want
something that only Computer Science
majors would be able to use. I’m looking
profile___________________________________________________39