Web Graphics

2013 U-20 World Cup Module

2013 U-20 World Cup Module

In June of 2013, the U.S. U-20 Men’s National Team participated in the FIFA U-20 World Cup in Turkey. As part of Anthem, the official digital publication of U.S. Soccer and mobile app, I created an interactive module using the Bootstrap framework. The layout is responsive – mainly targeting tablets and phones. Essentially a microsite within the app, the module contained opponent info, stats and video content.

Available to view live on the web here:
http://www.thefaniola.com/pages/u20WorldCup/app.html

SVG and d3.js

This is an involved read but very cool nonetheless. Also, if it piques your interest in Sketch App, you should definitely check it out. Creating interactive prototypes quickly and easily is something that many a people have had a shot at – and this approach is definitely very interesting. Here’s the author’s main statement:

I want to share how we quickly develop interactive prototypes, by designing SVG content in graphical apps like Sketch and scripting them using d3.js. The prototypes can then be shared on the web or installed as apps on a device. This allows us to quickly get how an app will feel in the hand of users.

Full Read

Coffees of Soccer House

Coffees of Soccer House

The above menu reflects a selection of drinks that the Soccer House staff came up with after the introduction of a new Keurig machine in the kitchen. Special thanks to @nelsonm1 and @markliskevych for collaboration.

The names stem from two origins: One being a staff member’s name, thus their personal drink of choice; or a derivative of the Keurig’s “default” coffee, the Nantucket Blend – those names generally coming from a body of water in the northeast U.S.