Dev Log ยท Websites, Design, Logo
The site wears the logo now, not just top left
The website had been dark brown with gold since the start. The logo beside it was
beige with a navy monitor: a bright box on a dark ground, looking pasted in. Since today
it is the other way round. The site has taken the colours of the logo, rather than the
logo taking the colours of the site.
Everything measured, nothing guessed
The palette was not picked but counted out of logo.png, 116,000 pixels, six colours
covering 98 per cent of the area:
- #EFEAD3 paper, the ground of the whole site
- #FBFAE8 the surface inside the screens
- #031C42 navy, for frames and body text
- #753917 brown, for every heading, as in the wordmark
- #A9894A brass, for rules and borders
- #7A6335 the same brass darkened, wherever it has to carry type
That last one was the only real snag: gold on beige reaches only 2.7 contrast. On the old
dark ground it was a text colour 56 times over. So it had to split: one variable for
ornament, a darker one for text.
The monitor is the building block now
A cross-section through the logo shows the frame is not a single surface but four tones
side by side: an almost black outer edge, the casing, a darker and a lighter inner edge.
That rebuilds in three lines of CSS, sharp at any size.
The corner was more interesting. In the logo the frame has no corner at all in the top
right: the top edge runs to point 222 and breaks off, the right edge only resumes at
163. In between, the pixels fly away. The panels do exactly that now: the frame breaks
open because the squares fly off. No trail without a break, no break without a trail.
The 17 squares were measured individually and exist in three size steps. Simply scaling
down was not enough: at 30 per cent the smallest would be 1.2 points across and would blur
into grey. Each step carries only what still reads as a square at that size.
Eight sections down to five
The front page was the standard stack. Hero, card wall, categories, about me, tech stack
with icons, poll, community, form. Now there are five:
1. Hero, the monitor from the logo at page size, with its neck and base
2. The Shelf, all ten things in one place, sorted into finished and on the workbench
3. Workshop Log, the news as a dated list instead of a wall of cards
4. About me
5. Contact
Nobody arrives looking for a category. Anyone coming in through Anpfiff1 is looking for
Anpfiff1, not for the drawer marked "Games". For a one-person studio, *finished or in
progress* is the one piece of information nobody else can give.
Tech stack and community are gone as separate sections. Eight tiles saying "Version
Control" and "Design Tools" tell a visitor nothing; anyone interested in the tools is on
their way to the Solo-Dev Guide anyway.
And the invisible part
Measuring turned up plenty that has nothing to do with colour:
- Three photos on the Rudolstadt page weighed 1.27 MB between them. As WebP, cropped
to 4:3 and in three widths: 96 KB. Ninety-two per cent less.
- 160 images loaded immediately for no reason, although they sat ten screen heights
further down.
- The server compressed nothing at all. One mod_deflate block later, the front page
goes over the wire at 13 kilobytes instead of 49.
- 34 scroll-triggered fade-ins are gone with nothing in their place. Nothing gives
away a template page faster, and on weak devices it costs frame rate.
What I had to take back
I had redrawn the logo as SVG: sharp at any size, recolourable, three kilobytes. The
comparison at real display size disproved it. The Heidecksburg is a fine line drawing, and
redrawing turns its lines into thin polygons that wash out at 130 points. The raster image
is simply more legible there.
What survived is the actual point: the logo no longer has a background baked into it and
stands freely on any tone, at 10 kilobytes instead of 14.
Warm regards from the workshopDigitale Manufaktur Rudolstadt