Illustrating Electronics in SVG — Part 1

As a product designer for Circuits I’ve designed and built about 120 components in SVG for the Autodesk Electronics Lab, an online electronics simulator. As I have moved on to a new role, now is a good time to write up the design principles.

Introduction

For an example of how the virtual environment relates to the physical world, check out this video.

Image for post
Image for post
Image for post
Image for post
Arduino Uno (Image by Sparkfun)
Image for post
Image for post
Image for post
Image for post
Servo (Image by Sparkfun)
Image for post
Image for post
Image for post
Image for post
DC Motor (Image by Actobotics)
Image for post
Image for post
Image for post
Image for post
Breadboard with basics (Images by Sparkfun)

Design principles

Image for post
Image for post

Colors and Gradients

In general I tried to limit the colors, but making sure brands were represented well. For the wires we arrived at 12 distinct colors.

We used gradients for a while but they were causing all kinds of trouble with multiple instances on the same canvas and thumbnail rendering so we removed all of them.

Image for post
Image for post

Strokes
The strokes that represent the wire were all the same width to fit the breadboard. For a long time I avoided outlines to minimize rendering resources. Later when it was clear the performance impact was minimal, I started adding outlines again. First starting with only 1px strokes, but later making exceptions to that as well.

Image for post
Image for post
Evolution of level of detail with strokes

Projection Type

Image for post
Image for post

Shadows and Highlights

The light is assumed to be under a very slight angle, giving a sense of the height of the components. I didn’t have a fixed ratio, just eyeballed it. All shadows and highlights are #FFF and #000 elements with adjusted opacity.

I added a way to change to adjust the shadows based on orientation, but that was never implemented on production.

Image for post
Image for post

Typeface and roundness

The general labels are FF Netto. A friendly, welcoming font that worked really well with the roundness of the components. I made a typeface based on FF Netto where every character was represented by single width strokes. Again trying to keep the filesize minimal and most detail in glyphs get lost at that size anyway. In hindsight I would have used the actual expanded font though, since the anti-aliasing of fills is usually better than strokes.

For components with a silkscreen (the white labels on the boards), I tried to make the typeface to match the general look of the component. Variable text fields, like on the multimeter were set in Arial, just to keep things simple.

Image for post
Image for post

Units

The first component I drew was a breadboard. To space the holes I drew one and then Copy/Pasted in Place and moved them 10 units over with Cmd+Arrow Left. This corresponds to a default lead spacing for chips. The first batch of components was drawn in relation to the breadboard, it was only later that I started drawing everything to exact dimensions.

Image for post
Image for post
In the early days everything was drawn in 1 file, in relation to the breadboard

Interaction Design

Image for post
Image for post

Motion and states

Coming up in Part 2 — Design Tools

Image for post
Image for post

Thank you for reading! For more, follow me on Twitter or Dribbble or subscribe to my channel on Medium.

Written by

Lead Designer @autodesk working on design systems. Pushing pixels @weworkweplay

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store