3 Shifted 3 Shapes | toastal

3 min read Original article ↗

Backstory

I was approached by the new maintainer for w3m about a building a small website (TODO at time of writing). As a long-time users & often advocate (along with slow work), I had accepted out of a sense of duty to free software on limited resources. While doing adjacent research on the topic of such site, it seemed one ‘easy’ missing component for a project was a logo. I drew some sketches in a notebook about some possible ideas & ended up sketching an option that seeemed easily doable. As such I approach & presented that design to them maintainer & later to the w3m IRC room for approval.

Planning

A lot of logo start with purely typographic & is often the easiest place to find some play on letterforms. What did I notice about w3m?

  • 3 letter word
  • 3 stems on each letterform
  • Mirrored letters in ‘w’ & ‘m’ … but also ‘3’ under certain letterforms.

That last line is exactly the type of thing for symmetry. 3s appear a lot too… even literally with the number 3.

Process

For design styles I think of ≡, 󱪾-like symbols without stems, italics, negative space letters. Ultimately I decided on a simple shape with a lot of 3 values for dimensions as a motit—in fact, I think it will be nice to make the ‘w’ & ‘m’ look more like the 3.

The ‘w’ using 3s is 33 units tall & wide, with strokes & stems of 9 units, with spacing of 3 units, & shaving 3 units off the middle bar to be more 3-like.

The 3 figure

Since SVG is vector format great for the web (& my own prior experience), it can be the foremost format. One of my favorite features of SVG is the <defs> + <use> pattern for reusable shapes. In this case, since the w, 3, & m need to appear identical with transforms (translate + rotate), we have all the tools to assemble the full minimal logo.

Color is singular & left up to the user agent + currentColor. This means it is easy to style with color if needed & ensures it matches the text color.

Feedback

Originally I had added a 15° skew on the whole logo to bring a bit of a older generational flair to the design, but the new maintainer said even that was too modern. Removing the skew was easy enough.

Maintainer + IRC approved this logo version of the 3 shapes.

Conclusion

Being a project aiming for the low-tech simplicity of a TUI, a logo should reflect this ideal to be equaly simple & compatible. Straight lines & identical elements should make this easy to recognize & easy to reproduce.