Designing SVGs in Sketch | Richmond Pulse Bus Line

July 6, 2017 | Posted in Design

Over the last few years, I’ve gotten spoiled by working with some awesome UX and graphic designers. As a result, I was able to double down on my programming skills on both the back and front ends, but at the same time most of my design skills had somewhat atrophied. I’m very comfortable using JavaScript to make SVGs from data and then make them interactive, but less comfortable designing them outside of code.

Thus, one of the challenges I’ve set for myself is to become more comfortable in the design space and learn to use programs like Sketch, Illustrator, and Photoshop to a higher degree.

Right now, I’m working with a collaborative group from VCU, U of R, Virginia Union, and a host of other folks to put together a website for faculty interested in doing community-engaged learning in their courses. As a part of that orientation experience, the group decided to focus on stops around the Richmond Pulse bus line as the “spine,” or other connective tissue, behind the organizational structure.

Inspiration

This metaphor reminded me of a cool infographic I encountered where the various systems of the human body were rendered as a subway map.

For whatever reason, this example jumpstarted my interest in creating something similar to illustrate and perhaps animate the Pulse line in RVA.

Some subsequent research unearthed this example of an animated SVG of the London and other major metro tube systems. I decided to use this as a model and use some features of the Richmond metro area to fill out the graphic since I’m focusing on a single transportation line.

Some Project Variations

Here is an early rendering of the project. There are a couple of cool things going on here. Initially, I liked the sprawling feeling you get as the interstates and streets animated in various directions. We’re also playing with some interesting techniques using gradient strokes to force the bus line to be drawn as one solid path. But, on the other hand, I wasn’t crazy about the way the individual stops were represented and the color of the streets and interstates was a bit heavy.

Kudos to Matt (heyohbunkbunk) for acting as a sherpa through the final stages of this process and providing crucial feedback to get this past good enough.

This second version lightens up the background a little bit and reimagines the bus stops as the focal point for the graphic. In the animation, they are drawn first and then connected by the bus line, which reinforces the idea of these different areas being connected by the line rather than established by the bus line as in the first graphic.

All of the animations were done very quickly using the vivus.js library. For these quick prototypes, I used the Vivus instant tool to generate the animations, but for the production version I’ll dig into the library to set additional custom options and remove the looping from the animation. While that’s helpful for a quick demo like this, the real benefit of using SVG graphics is that this graphic can easily be made interactive once it is drawn using something like D3.