Brand systems and the front-end they live on. Below: a client identity for Connor, a sports photographer, and three brand systems with every guideline page and export file.
Usually one person designs the logo and someone else builds the website, and they end up looking like two different companies. I do both, so the brand still looks like itself once the site is live.
One client project and three brand systems, each with its own logo, colours, type and guidelines.
A sports photographer’s mark, drawn to read as a tiny white watermark over a crowd.
The brief
- Client
- Connor, who shoots mostly sport and designs for social media.
- Where the mark lives
- On his photos as a small white watermark, as his Instagram profile picture, and on his X banner.
- What he asked for
- A bold, one-colour monogram with sports-media energy. Blue, plus black and white.
- The hard part
- It has to read in white at 24 px, over a busy stadium shot.
- Exploration
Three directions
Before Connor saw anything: three ways to draw c and v from one rule, each tested as a white watermark at 24 px over a stadium crowd.
- Exploration
More character
The first three were too quiet. Three new directions from his references: sharp and interlocked, fat and round, a stadium dot grid.
- Exploration
Fifteen ideas
Still not right, so I went wide: a stacked name, a single letter, a seal, a jersey arch, a stadium stencil.
- Round 1
Six constructions
His reference was a KC team monogram, two letters drawn as one piece. So C and V joined six ways, with straight strokes and 18° cuts only, no font.
- Round 1
The best two
Split point and Crest held up best when small. They went to blue, with their construction lines, and into the 110 px circle of a profile picture.
- Round 1
A drawn wordmark
CONNORYVISUALS drawn, not typed, with the same flat tops, 18° cuts and pointed V, then paired with the mark. His note: the mark alone didn’t read as his name, and CONNORY is Connor plus Y, his last initial.
- Round 2, dropped
C plus Y, heavier
A Y is a V with a stem, so the top of the Y could be the V of Visuals. He also sent a heavy, slanted H as a reference, so the four C and Y monograms went bold, slanted and outlined.
- Round 2, dropped
A heavy wordmark
The wordmark followed, on black and on blue. His answer: “I feel the bold doesn’t make it look better.” Back to the modern look of round 1, keeping the Y.
- Round 3
C, V and Y in one crest
He picked the Crest from round 1. The C is the outer shape, the shield’s point is the V and the letter inside is the Y. Three ways to draw it: Inner Y, Shared tip, Through stem.
- Round 3
Hand-drawn
His references were all lettered by hand. So the same C, Y and V went to a broad pen: Brush Crest, Signature, Round Brush and a hand-drawn wordmark.
- Round 3
Y and V inside the C
Ligature and Inlay set the Y and the V side by side inside the C. Fused like that, they read as a W, so he asked for one simple idea: the three letters on one line.
- Final
CYV
Three drawn capitals with one stroke weight, flat tops and 18° cuts. Only the V is blue: V for Visuals. The Inner Y stayed as his second mark.
- One stroke weight on all three letters
- Flat tops. The C ends in 18° cuts
- One angle for every diagonal in the Y and V
- Only the V is blue: V for Visuals
CYV is the main logo. The Inner Y, kept from the crest round, is his second mark for stamps and badges.
- 01White only. No blue V on photos.
- 02Bottom right or top right, wherever the photo is dark and calm.
- 03One mark height from both edges.
- 04About 4% of the short side, never below 24 px.
Top right on this one: the bottom of the shot is full of jerseys.
“Your work is truly amazing and I do think you’re really talented.”
The guidelines, page by page.
Delivered to Connor: a 13-page guide and 54 files, every mark in SVG and transparent PNG.
Some moths have scales that absorb a bat’s sonar, so the pulse goes out and nothing comes back. The product works the same way: swaps that leave no trace.
The mark is that moth drawn as one symmetrical shape, simple enough to stay readable below 24 px. It sits in amber on near-black because the app is dark, and amber is the only warm colour in it.
nothing comes back.
64
48
32
16
During a total eclipse the sun is still there, you just can’t see it for a few minutes. The mark is two circles, one covering the other.
The palette goes from deep sky blue to the orange of the corona, so the dark interface has a few blues to work with before the one warm highlight. The eclipse phases are also used as a loading animation and as a section divider.
One circle passes over the other, like in the mark. The interface shows it whenever something is loading.
64
48
32
16
In code, null means there is no value at all, which is different from zero or an empty field. Query a null trade on the chain and every field comes back except the one you need.
The mark is a ring of lit dots with one line of dots missing, which draws the empty-set sign. The lime is only used on dots and figures, never as a background.
64
48
32
16
Working together
Each project gets a fixed quote before I start. Revisions are included.
A client identity and three brand systems, with their guideline pages and export files.