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

The main goal of Electronics Lab is to create an easy environment to learn electronics. A lot of you might have never seen any of these components, so here’s a quick side-by-side of some similar components. These don’t always look exactly the same, as the enclosures change often.

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

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

Design principles

I tried to make them lovable with a minimal amount of detail, mostly because SVG rendering has limitations in terms of speed. As it became faster, we added more detail as you can see below. It’s also the difference between drawing a component in a matter of minutes versus hours.

Colors and Gradients

The canvas is HSB(210 1 96), a very light gray with a dash of Autodesk blue. It allows components like white LEDs to stand out from the canvas. Black is represented by HSB(0 0 20), leaving plenty of room to do shadows and exceptions on black components and white as HSB(0 0 100).

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.

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.

Evolution of level of detail with strokes

Projection Type

Depending on the type of component we choose a top or front view with a hint of perspective. At some point we experimented with both a top and front view that you could switch but this was never implemented.

Shadows and Highlights

Small shadows and highlights can do wonders, but we made sure most of them were on the component. This avoids obvious inconsistencies when components get rotated or start to overlap.

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.

Typeface and roundness

At this level of detail, there’s definitely a need for rounded corners to make it make it feel real. In the beginning the radius was large, trying to make boring electrical components feel welcome and fun for children. Later when the audience shifted to an older audience I started making them more tight showing a more mature feel.

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.

Units

1 unit in svg = 100 mil = 1/10 inch

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.

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

Interaction Design

The interaction design is as simple as possible, without transitions from one state to another. Some components like the light sensor are dependent on external input. Those components show a slider when selected.

Motion and states

The states are entirely controlled by the results of the circuit. The simulation calculates the values and updates the canvas accordingly. As such no easing is defined from the design side.


Coming up in Part 2 — Design Tools

We developed a code based SVG editor to design, manage and test a variety of requirements like hit areas, selected states, as well as interaction and animation requirements. It’s not sexy but it took away most of the overhead between design and development.


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