comic pop

the idea

Comic Pop turns the whole birthday site into the comic you read on the living-room floor before anyone else was up. the page is cheap newsprint, a little yellowed, with a halftone of red and blue dots printed into its corners, the way colour soaks into pulp paper on a fast press. every surface is inked: thick dark lines, hard shadows, flat bright fills, nothing that pretends to be expensive. it's loud on purpose, and it's built to get a laugh before anyone has read a word.

friends' cards become panels. the torn edges of the scrapbook look are squared off into crisp frames with a heavy ink border and a patch of halftone shading in one corner, and each friend's name sits on top in a caption box, the way a narrator's line opens a panel. the board stops looking like a wall of notes and starts looking like a page of comics everybody drew together: one panel per friend, gutters in between, each one pasted in at a slight lean.

the palette

the colours are the ones a cheap four-colour press loves. pop red is the accent: the big buttons, the name tabs, the site's name and the page you're on. burst yellow fills every action burst and the title panel in the nav. pop blue prints the dots across the nav and letters the headline on a missing page. bubble cyan marks key chips and prompts, go green means done, night purple fills the love meter, and all of it sits on newsprint and pulp card stock, with dark ink for every word.

text is always dark ink on a light ground, and every colour pair on the page is checked for contrast, so a loud page never turns into a hard one to read. pop red comes with four checked alternatives: panel blue, pickle green, punchline pink and orange soda. pick one and the buttons, the name tabs, the wordmark, the halftone and the scrollbar all follow it.

the lettering

• Bangers for the headlines: tall, punchy comic capitals in a dark outline with a stacked shadow, like the title on a cover.
• Patrick Hand for what friends write by hand: notes and captions in a neat letterer's pen, so their cards still read like them.
• Comic Neue for everything you read at length: friendly, round and easy on the eyes at any size.

the site's name gets the cover treatment on the front page: red letters, a heavy outline and a yellow action burst behind them that pops in as the page loads. a small yellow banner above it calls the site the birthday issue, and the line under the name is a speech bubble with its tail pointing back up at it, as if the burst had said it out loud.

the comic strip (the nav)

the nav is a comic strip across the top of every page: a band of newsprint printed with blue dots, in a thick ink frame with a hard shadow. first comes a yellow title panel with the site's name (on the front page, the cake), then one slanted panel for each page: cover, add a panel, the strip, island and fun fair. point at a panel and it fills burst yellow and lifts off the page. the page you're on is filled pop red, with a little burst stuck to its corner, and the music switch closes the strip as a speech bubble.

on a phone the strip becomes a tiny comic page. the title panel runs across the top, then a tier of three panels and a tier of two, like the grid on a real page. the last panel says more!, and it opens a speech bubble holding the fun fair and the music switch, its tail pointing back at the panel you tapped.

the scrollbar

even the scrollbar is part of the comic. the thumb is a white speech bubble: rounded and inked, with one sharp corner where its tail would be and three dots down the middle, like someone typing. it rides a strip of newsprint printed with a halftone in the accent colour, edged in ink like a panel border. it turns burst yellow under the pointer and takes the accent while you drag.

small boxes, like the card maker's message box and the island's menu, get a slimmer bubble on a clear groove. Firefox draws scrollbars in one colour, so there it's a plain dark-red bar on the newsprint: same idea, fewer details.

page by page

• the front page: the name on a burst, the birthday-issue banner, the tagline in a speech bubble, and the countdown told in three little panels.
• the card maker: the steps become numbered panels, the one you're on tipped and bigger, and every button is an inked panel with a halftone shade.
• the board: renamed the strip, its line written in a thought bubble and the card count shouted from a burst. the tidy button says "square up the panels", and "jumble them again" puts them back.
• the festival: fun fair in the nav, each game's best score in a caption box, and a new best lands on a burst.
• the island: hugs pop up as SQUISH!, AWWW! and MEGA HUG!, lettered like sound effects, and the menu opens as one more panel.
• a missing page: "this panel never got drawn", a burst lettered ?! and a way back to the cover.

who it suits

the comic fan, of course, and the friend who still turns to the funnies first. the class clown. the one whose group chat is mostly reaction faces and sound effects. it's made for loud, silly birthdays: a 10th or a 40th, a surprise that's going up on the big screen at the party, or anyone who'd rather be laughed with than toasted.

the island keeps its own paper-cutout world whichever look the site wears, so walking around feels the same; the look reaches its menu and the words that pop up. what friends left doesn't change either: every note, doodle, photo and clip is exactly as they made it, because a look changes how the site is dressed, never what's in it.