Context
La Tapería is a small interactive web app at https://lataperia.holasebastian.com. It is not a restaurant site and not a static portfolio visual. It works more like a miniature product: enter the bar, pick from a pantry, assemble a tapa, save or share the combination, and wait for Doña Oliva to judge the plate.
The interesting part is the constraint. The project had to feel local, funny, and specific without becoming a generic food game. Spanish tapas, Mexican botanas, pixel-art craft, and conversational UI all needed to live inside one compact interface.
Problem
- Food builders often become either utility forms or novelty toys. This needed to feel like a designed product object with a clear loop.
- The ingredient space needed enough structure to support play: panes y bases, quesos, embutidos, del mar, encurtidos, vegetales, salsas, toppings, and raros.
- The brand voice had to carry the experience. Labels, empty states, presets, metadata, and feedback all needed the same point of view.
- The site needed to be shareable and legible outside the app, with canonical metadata, Open Graph imagery, a manifest, sitemap entries, and preset URLs.
Approach
Designed the app around a simple ritual: walk into the bar, build the plate, receive judgment. The interface is intentionally small. It uses a pantry, a plate, house combinations, and a verdict panel instead of a large navigation system.
The live experience exposes the product model directly. House combinations such as La Gilda, Pan, tomate y jamón, Final de fiesta, Mar y huerta, El Atrevido, Esquites de barra, and La Tostada work as examples, shortcuts, and taste references. The pantry categories keep the builder legible while still leaving room for strange combinations.
Decisions
- Treat Doña Oliva as interface infrastructure, not decoration. Her verdict, mood, and empty-state copy explain the state of the app while giving the product a voice.
- Use pixel art as a system language: ingredients, character, plate, border treatment, and motion all follow the same low-resolution logic.
- Keep the builder loop short. Add ingredients, clear the plate, save the combination, share it, or start from a house preset.
- Make presets addressable through URLs, so a combination can exist as a stateful artifact rather than only a moment inside the session.
- Support discovery with production metadata: Spanish locale, canonical URL, web app schema, manifest, sitemap, Open Graph image, and Twitter card.
Impact
- Shipped a complete public-facing web experiment with a coherent product loop, visual system, and voice.
- Turned a narrow food concept into an inspectable interface system: taxonomy, state, feedback, presets, sharing, and metadata.
- Built a reusable pattern for small editorial tools where character, structure, and interaction carry the brand without needing a large marketing page.