P45
Craftsmen engage themselves in complex tasks. The complexity of those tasks often gives a simplicity to their lives.
A little while back I built a rough prototype SVG Icon Maker on the theme of grid based diagramming because I found existing tools too fiddly and crafting SVGs by hand too tedious. P45 is another, more refined, experiment; a Svelte library for programmatically crafting grid based SVGs.
My aim is to make drawing and diagramming quicker and easier. In this case I'm focusing on scenarios where pixel perfection is uneconomic. As craftsmen we're inclined to precision; it's in our nature. But unlike painting fine art, meticulousness rarely pays off when drawing small web icons, especially SVGs.
Grid based diagramming aims to improve design speed, consistency, and experience by constraining users to a grid. Trading-off freedom of expression for speed of expression.
There are many online and desktop vector design tools making use of grids. However, I've yet to find one that is free, focuses on speed of expression over precision, and use grids for more than just reference and proximity snapping. The best tools I've found tend to be commercial. But that just means they are incentivized to be feature rich, so they satisfy as many different audiences as possible, and to get thier customers to spend as much time in the tool as possible, so they become dependent and upgrade. Everything is a trade-off. I want a clutter free diagramming tool so I spend as little time fiddling around in it as possible. That is, I'm not happy with the current set of trade-offs.
The Grid
Those skilled in mental visualisation are able to effortlessly work out grid coordinates in their head. The rest of us will want a visual grid on hand as reference. For non-trivial icons, it helps to do draw them out on paper first. Mapping the coordinates to code is the easy bit.
After creating a fair few diagrams I'm finding the grid based approach is working even better than I had anticipated. It's not perfect and a paper grid to hand helps a lot. But it's a great start and there is plenty of potential for features and alternative API designs. The bottleneck in my work is fast shifting towards colour choice, brush settings, and other styling aspects.
Here's an example icon on a 9x9 grid. For more detailed icons I'd probably increase to a 13x13 or 17x17 grid. The grid should be as small as possible to avoid the precision trap but large enough to craft the desired icon.
I've added points to represent the nodes and made the whole SVG huge just for demonstration. This tool is designed for icons rather than images. You'll notice that not all corners or shape origins are centered on a node. I've applied minor offsets, in select places, so the icon looks right. A little offsetting is expected but a lot suggests either the grid is too small or I'm needlessly fussing over small details again.