EST. 2026 · JQJ.CCJOURNEY · QUEST · JUNCTIONAn independent folio

Icons / 3 MIN READ

One seal, three iterations: give every change a reason

Compare shape, spacing, and accent on one canvas, turning “make it nicer” into decisions you can review.

“Make it more striking” can open a discussion, but it offers little direction for the next edit. A small seal has few elements, making it a useful exercise in turning impressions into concrete questions. The three rounds below are an exercise you can carry out yourself, not a case study claiming results for a real client. The aim is not to prove that version three is best. It is to understand what each change solves and what it costs.

Round one: establish the silhouette

Place “JQ” on identical canvases and try a square, a circle, and an outline. Keep the text, colour, and preview size fixed while comparing the relationship between the container and its letters. A circle may concentrate the visual weight; a square may establish a firmer boundary. These are directions for observation, not universal branding rules. Choose a shape that carries the letters clearly and write one sentence explaining why.

A coordinate centre is not necessarily an optical centre. Open spaces and long strokes change the distribution of weight. Reduce the icon or look at it with softened focus. If the letters need moving, make a small adjustment and compare again at the same size. Record something specific, such as “the left side feels empty, and shifting right increases the imbalance,” rather than “it feels wrong.” SVG coordinate guidance

Round two: make room

Keep the silhouette and adjust only the inner space, border thickness, and letter size. A delicate double line in a large preview may merge into a ring at a small size. When internal gaps disappear, the letters also become harder to distinguish. Try removing an inner frame and giving the boundary and subject more room. Inspect at 16 and 32 pixels before returning to the large view to check the balance of stroke weights.

Keep a comparison image at the same size for every round and identify one main difference. Changing text, shape, colour, and background together makes it difficult to know which change helped. The decision log can be a single line: “Removing the inner frame makes the small silhouette clearer.”

Round three: add one accent

Once the monochrome version works, introduce cinnabar or another accent. It might occupy the frame, background, or one small mark; it need not appear in all three. Inspect the colour version in greyscale. If someone can understand a function only by distinguishing red from green, add a text or shape cue. Colour can establish character without carrying interaction information on its own. W3C guidance on colour

Exercise: start from the Ink ring example and keep three records: A for silhouette, B for space, and C for accent. Note the reason to retain each version, its remaining problem, and the context where it works best. Download and inspect the actual files. You may choose B as the final result: less colour may suit the current site. Archive the alternatives instead of stacking all their ideas into one mark, leaving a traceable starting point for the next revision.

JOURNEY · QUEST · JUNCTION

An observation kept. A question left open.

Write back ↗

Continue reading

03

From SVG to favicon: start small

Move from an editable source to a browser tab by separating coordinates, pixels, and file formats—and testing each destination.

Icons3 min read
↗
← Return to the annalsExplore the reading paths →