[01] VOLUME11 / BRAND, WEB & CREATIVE SYSTEMS01 / VOLUME11
A website became
a creative system.A website
became a
creative system.
I designed Volume11 in Webflow. Then I turned its visual language into a system for new websites, robot characters and campaigns.
01 / THE FOUNDATION
The design
came first.
I developed the original concepts and built the first Volume11 website in Webflow. Big typographic statements, purposeful colour and slightly eccentric robots gave the brand its voice.
The next challenge was continuity. As the product family grew, I needed new pages to feel like Volume11 without explaining the same decisions from scratch.
02 / MAKING IT REUSABLE
A strong foundation.
Built to extend.
I extracted the established design into a connected system: colour, type, spacing, components, imagery and responsive behaviour. The aim was to make future work consistent without rediscovering every decision.
The style guide shows the system in use. DESIGN.md explains the rules and intent. Paper brings the visual families together. Each reference has a distinct job; together they provide a strong foundation.
ONE FAMILY. THREE DISTINCT IDENTITIES.
Colour has a job.
Volume11 has its own yellow-led identity. Convo11 uses orange; Content11 uses pink. Shared black-and-white foundations, typography and character drawing keep them related.
VOLUME11
#F2C740
The parent brand / homepage
CONVO11
#FA7E45
Conversations / product identity
CONTENT11
#FC467D
Content / product identity
Within the wider palette, lime signals ViboGit and violet supports comparison and editorial moments. Each hue has defined shades for consistent use.
TYPE / THE VOICE OF THE WEBSITE
Two typefaces.
A clear hierarchy.
Overpass Mono gives the large statements their distinctive rhythm. Overpass makes longer explanations easy to read. The scale changes across screen sizes, with specific exceptions recorded where the design needs them.
OVERPASS MONO / DISPLAY
Turn it
up to 11.
OVERPASS / BODY
A recognisable voice, with room for the message to breathe.
Volume11 website H1 scale: 42 / 48 / 52 / 89.6px across screen sizes. This display is composed for the case study.
STYLE GUIDE / SEE & TEST
Colour, type, spacing, components and interaction states. The executable guide uses real website components so the examples demonstrate behaviour as well as appearance.
DESIGN.md / APPLY & EXTEND
Written rules, design intent, responsive constraints and source ownership. It explains what stays consistent, what can vary and which reference takes precedence.
Paper keeps the visual families visible alongside these references. New work returns to the same foundation, with human judgement at every step.
THE WORKING CONTRACT
DESIGN.md
Paper libraries
Executable style guide
ROBOTS.md + asset registry
Rules, component behaviour, character references and provenance. Kept together for the next brief.
03 / CHARACTERS WITH A JOB
From exploration
to a cast.
Hours of Midjourney exploration established the ink treatment, proportions and personalities. I kept a library of useful robots, then selected recognisable base characters to return to.
With a chosen reference, prompting becomes more specific: preserve the construction, change the pose or give the character a new task. Convo11’s “Life gets busy” scenes show that process in action.
EXPLORATION ARCHIVE / Selected robot references, including an original Midjourney drawing from the robots working page.
THE BASE / KEYBOARD CRT ROBOT
Keep the identity.
Give it a new job.
The chosen reference fixes the CRT head, antennae, keyboard chest and 11 mark. The prompt changes the action, props and pose while preserving that construction.
Example direction: put the robot halfway up a stepladder with a paint roller and an unanswered phone. Keep fine black ink, opaque white interiors and a transparent exterior.
CONVO11 / LIFE GETS BUSY — The same character, carried into three finished social posts.
SMALL EDITS. NEW ROLES.
From the robots working page: references, targeted edits and reusable feature scenes are kept together for the next brief.
04 / ART DIRECTION
One system.
Many expressions.
Volume11’s yellow-led identity, Content11’s pink and Convo11’s orange carry through to social. Shared type, illustration and structure keep the family recognisable across different messages.
Within each brand, I vary image scale, typography and the balance of light and dark. The system supports different campaign styles; art direction makes each composition work.
The system provides continuity, not a single template. The same brand can lead with a character, a photograph, a short illustration strip or a strong typographic statement.
ONE CAMPAIGN, THROUGH THE EDITS
Once a direction is chosen, the detail matters. Here, scale and hierarchy change through successive art-direction passes.
THE FINAL HUMAN PASS
Let the idea
break the frame.
The robot and lead cards move beyond the orange panel. More confidence, more movement — using the same core artwork.The robot and lead cards move beyond the orange panel. More confidence and movement, using the same artwork.
ONE IDEA.
TWO CONVERSATIONS.
LinkedIn speaks to the business handling missed enquiries. Facebook speaks to the person waiting for a reply. The artwork stays recognisable; the caption meets its audience.
Artwork, approved captions and their source stay together.
05 / BEYOND THE SCREEN
A brand you
can take with you.
I designed the badges in Figma, bringing the robots, circular lettering, colour and the 11 mark into a family of small identities. They became physical laptop stickers.
Volume11 brings the team together. Content11 and Convo11 give individual characters their own space. Silicon Peel sends the team out in a Viking boat. Shared construction holds the family together.
06 / KEEPING WHAT WORKS
The process became
part of the system.
Recurring campaign decisions became a reusable social skill. A subject normally leads to five creative treatments, each with its own illustration and separate LinkedIn and Facebook copy.
The editable layouts, assets, captions and provenance stay together. I still choose what to say, what to show and what is good enough. The system helps me carry those choices into the next piece of work.
01 / START WITH THE IDEA
A subject, a clear message and the right character reference.
02 / EXPLORE & DIRECT
Five treatments to respond to, refine and choose between.
03 / KEEP THE DECISIONS
Editable layouts, final assets, captions and provenance.
WHAT CHANGED
A recognisable world.
More ways to use it.
The original website became a reference for a growing product family, a cast of characters and a repeatable campaign process. The design decisions remain mine; they are simply easier to carry forward.
← All case studiesHAVE SOMETHING IN MIND?
Let’s make it
work beautifully.
Websites, identities and the systems that hold them together.