Weaver’s in-house designers supplied initial design concepts of Yarn which they described as
A service that measures the vocabulary difficulty of web pages and Phil completed the front-end and integrated it with the JSON API.
The design had to work on mobile as well as larger devices so it was clear that SVGs would need to be used, coupled with CSS animations to make sure everything looked crisp and ran smoothly across devices.
Weaver work by creating a basic design concept, passing it over to a FE dev who prototypes it then the designer suggests iterations and it goes in circles like that until it evolves into a finished product i.e. this was not a traditional waterfall model.
“Phil played an instrumental role in bringing the user-facing aspects of Yarn to life, applying himself diligently and effectively to the implementation of some intricate infographic animation challenges (not least our radial-swooshing, bouncing double donut chart!).”
Luke Razzell, founder of Weaver (@weaverluke)
The site makes use of the ChartistJS, which is a fantastic library for creating responsive graphs. This worked great but creating different types of graphs together e.g. a line chart and a bar chart so one had to be placed on top of the other with CSS.
Animating SVGs with CSS
Another issue was encountered with the animating of the SVG loading graphic (which would appear during AJAX calls to let the user know processing was going on behind the scenes). The idea was for the SVG ‘fill-up’ with colour clockwise one colour at a time e.g. start off with no colour, then the circle would become red, then the red would be erased then it would fill up with the next colour then that would be erased and so on. Then when the AJAX call came back the SVG needed to be filled-in and red. If the user resubmitted the form, the process had to start over again.
- December 2014 – Phil approached by Weaver
- January 2015 – Front-end work starts on Yarn
- February 2015 – Yarn launches
- Total FE dev time: 64 hours*
* Disclaimer – Rich Higgins another FE dev tweaked the code for launch so FE build time is likely to be a little longer than 64 hours. Rich has also added subsequent changes to Yarn as the idea has evolved based upon user feedback.