Designing SVGs in Sketch | Richmond Pulse Bus Line

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.

Initial SVGs of Richmond Pulse Bus Line

 

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.

 

SVGs of Richmond Pulse Bus Line

 

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.

 

 

I'm working on building the most comprehensive course available on building workflows with Google Apps Script.

Join the Course Waiting List for a Huge Discount!

* indicates required

4 thoughts on “Designing SVGs in Sketch | Richmond Pulse Bus Line”

  1. Tom says:

    Very slick. I like the second better but I think it’s more about the ways the stops construct themselves.

    1. BrownBearWhatDoYouSee says:

      Agreed. For the first one there is a point where the stops look like Pacman because of the way the strokes draw themselves. A lot of the goodness in the second one was based on Matt’s feedback. If only he had a blog or twitter for me to link to : )

  2. Tom says:

    Matt does have Twitter account – https://twitter.com/heyohbunkbunk

    🙂 Blog is coming.

  3. Heyohbunkbunk says:

    Heyohbunkbunk here! 😉 I’m sure we can fancy this up more if needed. We were a bit limited using the auto-animate of the vivus instant tool, but it’s slick regardless.

Leave a Reply

Your email address will not be published. Required fields are marked *