SELECTED WORK / VOLUME11 / BRAND, WEB & CREATIVE SYSTEMS
A distinctive website. A whole world to build on.
Volume11 began with a website I designed and built in Webflow. It grew into a product family, a cast of robots and a creative system that helps me carry the same design judgement into every new page and campaign.
DESIGN & DIRECTION Simon Bloom Webflow → design system → AI-assisted extension
Archived Volume11 homepage · the original website established the typographic voice and illustrated character.
01 / THE STARTING POINT
The design came first.
I developed the original concepts and built the first Volume11 website traditionally in Webflow. That was where I worked out the visual character: the big typographic statements, blocks of product colour and slightly eccentric robots that make the brand feel approachable.
Once I was happy with that foundation—and AI had become more capable—I extracted the design system. The aim was to carry an established design forward, making it easier to add pages and sections without having to explain or rediscover the same decisions each time.
01 · DESIGN
Concepts, composition and the original Webflow site.
02 · EXTRACT
Turn the approved visual language into explicit rules.
03 · EXTEND
Use those rules to guide new pages, images and campaigns.
02 / A FAMILY RESEMBLANCE
One character. Different jobs.
Volume11 brings several products into one visual family. Content11 and Convo11 need to explain different services, but they should feel related before you read a word.
Shared typography, purposeful colour, familiar buttons and the robot cast do that work. The system gives each product space to speak while keeping the family resemblance intact.
CONTENT11
The product message changes; the typographic voice and illustrated world remain familiar.
CONVO11
A different proposition within the same family. Archived website captures show the foundations of the system.
03 / MAKING THE DESIGN REUSABLE
From what looked right to rules I could reuse.
A finished website contains hundreds of decisions. Some are obvious, like a colour or a typeface. Others live in the relationship between things: the depth of a button, the distance below a headline, or the way a robot sits against a coloured panel.
The extraction work made those decisions explicit. It examined the existing styles, page structure, components and responsive behaviour, then organised them into a design-system package that could guide the next piece of work.
A SYSTEM PEOPLE AND TOOLS CAN READ
The result is a connected set of references. Paper makes the design visible. Written guidance explains the decisions. The component-based style guide demonstrates how those decisions behave in the website.
Where older notes and the current implementation disagree, the system records which source takes precedence. That matters: a guide is only useful if it helps the next person make the right choice.
SIGNAL & SKETCH / SYSTEM PACKAGE
DESIGN.md The design rules and their ownership.
Paper libraries Foundations, heroes, cards, patterns and imagery.
Executable style guide Examples built with the real website components.
ROBOTS.md + asset registry Character selection, provenance and image checks.
04 / INSIDE THE DESIGN SYSTEM
Colour has a job.
The system pairs a strong black-and-white structure with a small set of signals. Pink belongs to Content11, orange to Convo11, yellow to the homepage and lime to ViboGit. Violet supports comparison and editorial moments.
These are named roles with defined shades, so extending a page starts with a meaningful choice rather than an arbitrary new colour.
Actual Paper specimen · core colour roles from the marketing style guide.
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.
Case-study specimen set from the current type rules. Website H1 scale: 42 / 48 / 52 / 89.6px; this display is composed for the case study.
The small things are part of the identity.
A button carries the brand as much as a hero does. Crisp borders, hard press depth and defined hover, pressed, inverse and disabled states turn a visual treatment into repeatable behaviour.
Documenting those states means a new page inherits an interaction language as well as a look.
Actual Paper specimen · the shared BrandLink family and its interaction states.
LAYOUT / FAMILIES OF COMPONENTS
A recognisable opening, with room for different stories.
The hero library puts related page openings side by side. A common structure can hold different product names, messages, colours and illustrations. Seeing the family together makes drift easier to spot—and helps me choose a starting point for the next page.
Actual Paper specimen · Content11 and Convo11 product heroes. The library records the relationship between reusable structure and product-specific expression.
LAYOUT / BEYOND ONE SCREEN
The system has to hold when the screen changes.
The guide also records content widths, gutters, spacing and breakpoints. These are the less visible decisions that keep new pages coherent. Individual components still need judgement about when and how their content should stack.
Actual Paper layout specimen · shared spacing and responsive foundations.
05 / MEET THE CAST
Meet the Volume11 team. Then meet their wider world.
These three robots are the Volume11 team: the keyboard CRT character, the one-eyed box robot and the smiling tracked robot. They give the brand a small, recognisable cast to return to.
Around that team is a much wider wall of robots in Paper, each opening up a different narrative. Alongside the collection in Obsidian, it gives me references for new actions, moods and situations.
The Volume11 team · the three core characters, from the original Paper team composition.
CHARACTER ORIGINS / MIDJOURNEY
The robots began with hours in Midjourney.
The original robot library came out of hours spent working in Midjourney. That time established the characters and the illustrated world that became part of Volume11.
Those original robots now provide the references for new work. I usually use GPT-image-2 or GPT-image-2.5 to take a chosen character into a new situation, carrying its recognisable features and ink treatment forward.
THE WIDER WORLD / ROBOTS WITH DIFFERENT NARRATIVES
Every robot suggests another story.
The wall in Paper makes the range visible at once: recharging, keeping time, exchanging messages, moving quickly and finding things. A change of prop or pose gives the illustration something specific to communicate.
A curated wall of 24 original Paper assets · a wider set of characters, actions and visual narratives around the core team.
THE OBSIDIAN COLLECTION
The numbered collection in Obsidian provides another way into that library. Keeping the references together makes it easier to choose a character for the next brief.
04 / TV-head code
06 / Oval cyclops
08 / Lightbulb idea
09 / Waving box-head
10 / Unicycle satellite
13 / Clock holder
17 / Megaphone
18 / Plug-cable robot
29 / Calendar wheels
35 / Sparkline
43 / Egg-shaped
46 / Double speaker
FROM THE OBSIDIAN ARCHIVE
A selection from the numbered Volume11 robot collection. Keeping the characters together makes it easier to find a useful reference and return to a recognisable design.
THE START OF A NEW PROMPT
A new prompt starts with a choice: which character best suits this idea? I then describe the action, the essential props and the space the illustration needs to fill. The reference keeps the character grounded; the brief gives it a purpose.
06 / SAME CHARACTER, NEW SITUATION
Give the robot something to do.
For Convo11’s “Life gets busy” campaign, the idea was simple: people miss calls for ordinary, understandable reasons. A robot halfway up a ladder says more about that moment than a generic picture of a phone.
The saved campaign records connect each scene to its base character. Here, the keyboard CRT robot becomes a decorator, a parent with a baby and a dog walker. Its construction stays recognisable while the pose, props and little story change.
REFERENCE / KEYBOARD CRT
The face stays familiar. The story moves on.
The TV-shaped head, twin antennae, screen expression, keyboard chest and characteristic 11 marking give the model a concrete character to work from. The brief supplies the new action and the composition.
This is the actual reference asset named in the ladder, baby and dog scene records.
01 / HALFWAY UP A LADDER
A paint roller, a tray and a ringing phone that is just out of reach.
02 / HANDS FULL WITH A BABY
The same character, occupied by a much more immediate responsibility.
03 / OUT WITH THE DOG
A different everyday interruption, with the same visual humour.
07 / WHAT GOES INTO THE PROMPT
A reference is the beginning. The direction does the rest.
The brief describes the idea in practical terms: what the robot is doing, where the phone is, why it cannot answer and how the scene will fit the campaign layout.
It also protects the visual treatment. The artwork needs fine black ink, white interiors and a transparent exterior. That last distinction matters: the white face and body must stay visible when the illustration sits on a coloured card.
FROM THE SAVED LADDER PROMPT
“Preserve the character construction while changing pose.”
“The keyboard CRT robot stands halfway up a stepladder, holding a paint roller…”
“Solid opaque WHITE face/body/prop interiors.”
“Genuinely TRANSPARENT exterior background PNG.”
Excerpts from the saved ladder-scene prompt · a concrete action, a familiar character and a precise image treatment.
ANOTHER CHARACTER / ANOTHER SET OF MOMENTS
The same method works across the cast.
The phone-box robot supplies a different starting point. In the saved campaign it appears at the dentist, in the shower and driving. The situations change, but the familiar construction keeps them inside the same illustrated world.
THE REFERENCE
AT THE DENTIST
MID-SHAMPOO
BEHIND THE WHEEL
Actual reference and generated scene assets · Convo11 “Life gets busy” campaign.
FROM THE SAVED CHARACTER LIBRARY
Sometimes the change is simply a pair of wheels.
The archive also holds variations of individual robots. In this pair, the sparkline character keeps its face, body and surrounding energy while its feet become wheels.
Saving useful variations gives the next brief more starting points. Small changes can widen the range without losing the character that made the original worth keeping.
Saved base character
Saved wheel variation
FROM SCENE TO SOCIAL CARD
The illustration earns its place.
A sleeping baby. A visit to the dentist. Each scene gives an unanswered call a recognisable, human explanation—and gives the headline something specific to work with.
The image leads on the orange card; the headline leads on white. Familiar characters and a shared type system hold the pair together, while the composition changes to suit the story.
Convo11 · Life gets busy. Two finished campaign compositions: “They’ve finally got the baby asleep” and “They literally can’t talk right now.”
08 / THE WORK BETWEEN THE OUTPUTS
The useful part is the back-and-forth.
The campaign work was shaped through conversation: selecting the strongest existing layouts, changing headlines, adjusting the balance between image and type, and asking for illustrations that actually explained the message.
That is where the judgement remains. A set of options gives me something concrete to react to. The next instruction can be precise because I can see what is working and what needs to change.
EARLIER COMPOSITION
The illustration takes most of the space. The question sits below it.
AFTER ART DIRECTION
The image becomes smaller, the wording tighter and the headline much larger.
This revision came from a specific request: make the headline bigger and let the image take up less space. The change improves the hierarchy while keeping the illustration and campaign identity intact.
THE FINAL HUMAN PASS / SCALE, OVERLAP AND FEEL
Then I get my hands on the layout.
The last pass is hands-on. I scale things up, move them around and adjust the balance until the composition feels designed. The generated image and the first layout give me material to work with; I decide how the finished piece should feel.
Here I enlarged the robot and let it and the lead cards break out of the orange panel. The illustration now crosses into the white space around the headline, giving the same artwork more presence and a less contained composition.
That final judgement is part of the process: knowing when to push the scale, where to allow an overlap and when the layout has enough energy.
Final hands-on layout from the “Paid leads, forgotten follow-ups” Paper page. Compare it with the contained, larger-headline version directly above.
One of the existing Paper layouts selected as a reference.
SELECT THE STRUCTURE, THEN DEVELOP THE IDEA
The best layouts became useful starting points.
For the later Convo11 campaign, I pointed back to specific Paper compositions: a shallow illustration strip, a larger image-led layout and a black layout with artwork beside the copy. These gave the next round a clear visual direction.
“These are the kinds of different layouts I was thinking about.”
My feedback during the campaign review · 10 September 2026
Saved “Isn’t a booking” campaign alternatives · approved messages and illustrations carried into the selected layout families.
The variation comes from the relationship between type, image and space. The brand stays recognisable across a warm, image-led card and a much more typographic black composition.
09 / THE WORDS AROUND THE IMAGE
One creative. Two ways into the story.
The card is accompanied by separate LinkedIn and Facebook copy. Each caption develops the same idea for its context, instead of treating the image as the whole campaign.
The saved “Call you tomorrow” example shows the difference: LinkedIn opens out the business problem, while Facebook begins with the experience of the person waiting for a call.
LINKEDIN / EXCERPT
“Someone fills in your enquiry form after work. They have time to think about what they need, and they are ready to talk. A promise to call tomorrow leaves the next step open: no agreed time, no appointment, and no conversation yet.”
FACEBOOK / EXCERPT
“You’ve filled in the form. Now you’re waiting for tomorrow’s call, with no idea when it might come.”
Excerpts from the saved, approved caption set. Both complete platform versions are kept with the campaign.
THE BRAND LEAVES THE SCREEN · DESIGNED IN FIGMA
A little piece of Volume11 to take away.
The robots also became badges. I designed these in Figma, bringing the characters, circular lettering, colour and the 11 mark together into a family of small, self-contained identities.
Those designs were turned into physical stickers for laptops and more. It gave the brand another place to live: something people could keep, carry and put on the things they use every day.
The wider badge family. Original artwork designed in Figma, with shared circular construction and individual robot personalities.
FOUR BADGES · ONE FAMILY
The same world. A different little story.
The team badge holds the three core robots together. Convo11 and Content11 give individual characters their own space, while Silicon Peel sends the team out in a Viking boat.
The circular frame, lettering and 11 mark keep them related. The character, scene and colour give each one a reason to exist. That balance is what lets the identity travel from a website to a campaign to a sticker.
Volume11 team
Convo11
Content11
Silicon Peel
Badge artwork from the selected Figma set, shown here as design details. These designs became physical laptop stickers.
10 / KEEPING WHAT WORKS
The process became part of the system.
After working through the campaigns, I turned the recurring decisions into a reusable Volume11 social skill: a set of instructions that carries the references, character treatment and delivery requirements into the next brief.
It starts with a subject and normally develops five distinct creative treatments, each with its own illustration and separate LinkedIn and Facebook copy. The layouts remain editable in Paper, and the assets, captions and provenance stay together.
That closes the loop. The original website gives the brand its foundation. The extracted system makes those choices reusable. New campaigns test how far the language can stretch, and the useful decisions become part of the way I work next time.
I still choose what to say, what to show and what is good enough. The system makes those choices easier to carry forward.
VOLUME11 / DESIGNED TO KEEP GROWING
The lasting value is a recognisable world I can keep building.
This project now connects a website, a product family, a design system, a character library and a repeatable campaign workflow. Each new piece can draw on the work that came before it.
MY ROLE
Original concepts & Webflow design Design-system direction Robot and campaign art direction Selection, refinement and review
The foundation was designed deliberately. AI helps me extend it, with the references and creative judgement that make it Volume11.
Have a world of your own to build?
Let’s talk ↗