Hopp til innholdet

HTML5-bannere

En tenkt annonse for minkake.no. Spillbare HTML5-bannere der man bygger riktig kake, laget med Claude.

  • Claude
  • HTML5
Bygg riktig kake: spillbannerne vist i fire formater.
Bygg riktig kake i fire formater.

Prøv banneret

Velg fire kakelag etter oppskriften. Alt du velger havner i kaken.Åpne prototypen i en ny fane (åpner i ny fane)
Lagene ruller forbi, og man har fire valg.

Formatene

Banneret 300×600 midt i spillet: kakelagene ruller forbi på båndet under oppskriften.
300×600, underveis
Banneret 300×600 etter fire valg: kaken er ferdig, med poengsum og fasit.
300×600, ferdigPoengsummen og fasiten vises først når alle fire valgene er tatt.
Banneret 160×600 midt i spillet, med en morsom beskjed etter et feil valg.
160×600, underveisFeil valg havner også i kaken, og banneret svarer med en morsom beskjed.
Banneret 160×600 med ferdig kake og poengsum.
160×600, ferdig
Banneret 300×250 med ferdig kake og poengsum.
300×250, ferdig
Det brede banneret 728×90 midt i spillet.
728×90, underveis

Tokensystemet

Tokensystemet bak bannerne. tokens.json styrer utseendet: rosa bakgrunn #ECBDCE og #F6D9E3, bringebær #B8325E, sjokoladebrun #3B2420 og #1F120F, og lys krem #FFF7EE. Fontene er Calistoga til titler og Lato til tekst, fra minkake.no. Knappene har 24 px hjørner, og animasjonene varer 700 ms. content.json har all tekst på norsk og engelsk, og template.html er én mal med layout for fire formater. build.py lager fire formater på to språk, kutter fontene, komprimerer bildene og sjekker kravene. Resultatet er åtte bannere på rundt 130 KB.
Tokensystemet bak bannerneÉn fil styrer farger, fonter, form og tempo. Byggeskriptet lager alle åtte bannerne fra den.

Vi liker å bli underholdt. Bruk av humor i kampanjer er lurt hvis man vil at folk skal huske et produkt. Derfor ville jeg lage et spill i HTML som bruker humor og interaksjon som et triks for å fange oppmerksomheten.

Jeg ville også finne ut hvordan jeg kunne lage moderne bannere raskt med Claude, uten å kode selv, og samtidig levere filer som faktisk fungerer på annonseplattformene.

Fra idé til spill

Ideen startet enkelt: et banner der man pynter en kake.

  1. Pynt kaken: Man trykket på knapper og la jordbær og strøssel på en tegnet kake.
  2. Ekte foto: Lagene er inspirert av et bilde fra minkake.no, delt opp i lag, slik at de kan stables og matche den ferdige kaken.
  3. Kaos er humor: Man kunne bygge kaken i hvilken som helst rekkefølge og ta helt feil.
  4. Spillet: Lagene ruller forbi på et transportbånd, og man må velge riktig lag etter en oppskrift, men man får bare fire sjanser til å velge rett.
  5. Belønning: Fire riktige gir 40 % avslag på kakebestillingen.

Slik fungerer spillet

  • Øverst står en oppskrift med fire lag, og den er ny hver runde.
  • Kakelagene ruller forbi på et bånd sammen med ting som absolutt ikke hører hjemme i en kake: lava, slim, eggeskall og stein.
  • Båndet går i bølger der feil ting alltid kommer først, og de mørke lagene ligner hverandre. Det riktige laget kommer sist.
  • Man har fire valg, og alt man velger havner i kaken, også lavaen.
  • Først etter fire valg ser man poengsummen og hvilke valg som var riktige.

Velger man lava, svarer banneret «Au! Lava er altfor varmt!». Det gjør det morsomt å prøve igjen.

Ett system, mange bannere

I stedet for å tegne hvert format for seg, bygde jeg et lite tokensystem i kode:

  • Designtokens: Farger, font og animasjonstempo ligger i én fil.
  • Innholdsfil: All tekst ligger per språk, så et nytt språk krever ikke ny design.
  • Én mal: Malen har egen layout for hvert av de fire formatene.
  • Byggeskript: Skriptet lager alle formater på alle språk, komprimerer bildene og pakker hvert banner som en zip.

Hvorfor tokensystem i kode?

En endring ett sted oppdaterer alle åtte bannerne på sekunder. Og man kan legge inn kundens egne fonter, slik at annonsen kjennes igjen som deres merkevare.

Tekniske krav

Bannerne følger kravene til Google Ads og andre annonseplattformer:

  • clickTag for klikkmåling og størrelsesmerke i hvert banner
  • Ingen eksterne filer; bildene er komprimert til WebP
  • Rundt 130 KB per banner med fontene innebygd, under grensen på 150 KB
  • Båndet stopper etter 25 sekunder hvis ingen spiller, slik regelen om maks 30 sekunder animasjon krever
  • Skriptet sjekker alt dette automatisk før bannerne pakkes

Min rolle og Claudes rolle

Jeg sto for idé, konsept, visuelt uttrykk, animasjon og spillmekanikk, og jeg testet og ga tilbakemelding underveis. Claude skrev koden, klippet ut bildene, laget byggeskriptet og testet bannerne i nettleseren. Jeg kan ikke kode, men jeg kunne styre hele prosessen som designer.

Hva jeg lærte

  • Et banner kan være mer enn reklame. Litt spill kan få folk til å bli værende lenger.
  • Når bannerne bygges fra tokens og én mal, går det raskt å lage nye formater, språk og varianter.
  • Å jobbe med Claude føles som å ha en utvikler ved siden av meg. Jeg kunne teste en idé på minutter i stedet for dager.
Rolle
Konsept
Design
Animasjon
Spillmekanikk
Verktøy
Claude
ChatGPT (bildegenerering)
HTML5
CSS
JavaScript
Formater
300×250, 728×90, 300×600 og 160×600
På norsk og engelsk
Leveranse
8 spillbare bannere, klare for Google Ads