Views
8 months ago

Web_Designer_UK__May_2018

FORM AND FFUNCTION Below

FORM AND FFUNCTION Below and opposite The offices of FFunction are clearly those of data obsessives. The precise separation of the plant life is no accident we think “We tend to be early adopters of new tools and plugins. There are new ones coming out all the time, and we like to give them a try. We draw user flows in OmniGraffle. Also, we use the Adobe suite a lot (naturally), and Sketch for user interfaces. We prototype using Invision and Craft, and the designers send their files to the devs via Zeplin. We also sketch on old-fashioned paper a lot” AUDRÉE LAPIERRE Co-founder and creative director MAIZE SEED SYSTEM MAP Internal tool for organisation The Maize Seed System is an interactive map of the agricultural and trade network in sub- Saharan Africa. This data-driven application is used for sharing knowledge and identifying connections among system actors — such as seed suppliers, farmers, importers and policymakers — in order to better understand how to improve investments, programs, and interventions within the maize seed system as a whole. The need for a stronger and more impervious maize network is more pressing each year, as the effects of climate change become more evident worldwide. Across much of sub- Saharan Africa where maize is the most important staple crop, production is primarily rain-fed, which makes farmers vulnerable to food insecurity. Approximately 40 per cent of Africa’s maize crop suffers a loss in yield due to drought conditions, endangering the livelihoods of millions of smallholder farmers and several hundred million consumers. DAI, an International development company, is working with other agencies and organisations including USAID to establish a new climate-resilient maize initiative to help solve these problems. Mapping out the maize seed system as it currently stands is an important first step; the next will be using the information generated to identify the right solutions, and provide them. Right FFunction created a detailed map of the current maize seed system as a vital first step to improving supply reliability of maize 38 ___________________________________________________profile

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