MultiCoreDesign Creative Studio for Brand, Web & Print
Start a project
CASE STUDY · WEB EXPERIENCE

Tito & Candi

A trilingual website where the illustrations are the interface. Families walk through a village instead of reading a menu. This is how we designed it, what was hard, and what the tests show.

Visit titoecandi.com Start your project
ClientTito & Candi
ServicesWeb design, front-end development, accessibility, performance
Built withAstro and TypeScript, as a fast static site
LanguagesPortuguese, English and Spanish
SizeMore than 100 pages in each language set

The goal

Give children and their parents a place to explore that feels like a real village, not a list of pages. It had to work in three languages, load fast on a phone, and be safe for a young audience, with a separate area for the adults.

From the illustration to the screen

The navigation is made of the artwork itself: a wooden signpost for the menu, a map of the village, a board of characters and a school chalkboard for activities. The palette comes straight from the illustrations, with a serif for headlines and a rounded sans for reading.

  • Ink blue
  • Village green
  • Signpost wood
  • Lantern yellow
  • Paper cream

How we built it

Five steps, in this order. The first one is the one that kept everything else consistent.

  1. Write the world down onceCharacters, places and rules live in one reference. Text, images and all three languages read from it, so nothing contradicts itself.
  2. Design on top of the artWe chose the signpost, map, board and chalkboard as navigation patterns, then picked colors and type from the illustrations.
  3. Build it as a static sitePages are generated ahead of time with Astro and TypeScript. JavaScript loads only where something is interactive: the map, the board, the activities and the music.
  4. Make it light and accessibleResponsive AVIF and WebP images, a lighter headline font, and a plain text alternative for every illustrated control.
  5. Test on every buildScripted checks and an automated accessibility scan run over the whole site, so a regression shows up before anyone sees it.

What was hard, and what we did

Art as navigation, usable by everyone

Challenge: Drawings do not work with a keyboard or a screen reader on their own.

What we did: Every sign, map pin and portrait is a real link or button with a text label. The map also comes with a plain list, so nothing depends on pointing at a picture.

Rich illustrations, fast pages

Challenge: Big scenes are heavy, and phones are slow.

What we did: Each image ships in AVIF or WebP at the size the screen needs. The headline font went from 121 KB to 57 KB after subsetting, and scripts load only where there is interaction.

Three languages, one story

Challenge: Names, places and facts can drift apart once a site is translated three times.

What we did: A single reference feeds all three versions, and place names stay the same in every language. Automated checks compare the versions page by page.

A wide scene on a narrow phone

Challenge: A village scene designed for a big screen gets cropped on a phone.

What we did: On phones the scene becomes a horizontal swipe, with a hint that reads "Swipe to stroll around the Village", and the signpost menu turns into buttons.

A young audience needs extra care

Challenge: Children are the readers, but adults make the decisions.

What we did: Forms are for adults only and live in a parents area. The music is off until someone turns it on, then keeps playing between pages. No Google Analytics.

Results we measured

Numbers from automated checks on the finished site. They are not promises about traffic or sales.

  • 94 / 100 / 92 / 100Lighthouse on desktop for the home page: performance, accessibility, best practices and SEO.
  • 0Accessibility violations found by the axe scan across 102 pages.
  • 0Layout shift on the home page, so nothing jumps while it loads.
  • 1.4 sLargest Contentful Paint on the home page, on desktop.
  • 3Languages with the same structure, names and places in every page.

Scores were measured on a local build of the site. Results on the live host can differ.

The website

A tour of the pages as a visitor sees them, on a computer first and then on a phone.

Home page of the Tito & Candi website: two characters in a sunny village square, a wooden signpost menu on the left and a button reading Explore the Village
Home The first screen is the village square, with the signpost menu always in reach.
Illustrated map of Vila dos Arcanjos with the church, parish hall, school, bookshop and square, and a list of places below it
The map Tap a place on the map, or pick it from the plain list below.
The Praça Board page, a cork board with illustrated portrait cards of the characters
Characters A cork board of portraits. Each card opens that character.
The Activities page with a school chalkboard holding three activity cards: a memory game, coloring pages and spot the difference
Activities A chalkboard with a memory game, coloring pages and spot the difference.

On a phone

Tito & Candi home page on a phone, with a swipe hint over the village scene
Swipe The wide scene turns into a swipe.
Village map on a phone with the list of places stacked below it
Map The list becomes big, easy buttons.
Character board on a phone, with portrait cards in two columns
Board Portraits reflow to two columns.

Screenshots of the Tito & Candi website.

See another case: Brazilian Catholic Community in San Diego →

Have a project that needs its own world?

Start a project