A visual design grammar for computational diagrams
Overview
The visual design of explanations is very important to this blog.
Understanding how best to visualise abstract concepts in computation and science for as many non-technically trained readers as possible has always been an interesting challenge.
The process of discovering this visual translation of concepts is a design question, and the design is still evolving.
This post gives an outline of the visual design grammar used throughout this blog, at present. However, it’s likely that there is still a lot to change and learn!
Text
The ‘Comic Relief’ font is chosen to promote a sense of ‘work in progress’ akin to Excalidraw.
In this sense, this font choice also intended to draw the reader into the discussion more as an active participant in the narrative, instead of a bystander to a technical exposition.
Colour
The blog has a consistent visual scheme of 3 main colours in addition to plain white.
The blue colour is used to define data objects.
Magenta is used for labelling and providing additional context, but it can also serve as a standard ‘alternate’ to black.
Black is the baseline choice for defining the diagram structure.
Arrows
The blog uses two main arrow types in all of the colours.
Solid arrow tips are used for both concept relationships and motion of data.
Hollow arrow tips are used to indicate meaning and provide more context in diagrams.
Objects
The blog uses three main object types in all of the colours.
Curved boxes with labels are used primarily for data objects.
Straight boxes with labels are used for both higher-level data objects and diagram content structuring.
Circles with labels are used to define operations which act on, consume and return objects.
Dashes and dots
The blog uses dashed and dotted lines in different ways.
Dashes in the outlines of objects and arrows are used to indicate a temporary or implied view of the object for additional context.
Dotted lines are used to indicate continuations in various situations.