Can Kai

Rediseñodelawebdeunrestaurantequeacogedosmarcas:CanKaiensalayTaroparallevar.Doscartasnavegables,conidentidadpropia,quesustituyenalPDFquehastaahorahacíadecarta.
(SCROLL) ↓
01

Visión general

Dos servicios, dos marcas, una sola web.

La web anterior se había quedado atrás y toda la oferta vivía dentro de un PDF: letra minúscula en el móvil, zoom constante y ninguna forma de llegar a un plato concreto. Además, la sala y el take away compartían documento pese a ser dos negocios con público y momento de consumo distintos. Los separé en dos recorridos con identidad propia (Can Kai para la sala, Taro para el take away) y rehíce el proyecto entero, del texto a la puesta en producción.

Fitxa

RolUI/UX Design & Front-end
DisciplinaWeb Design
SectorRestaurant
ClienteCan Kai
Webwww.cankai.es
Logotipo de Can Kai, el restaurante, con el lema en catalán «El japonès de Begur»
Logotipo de Taro, el take away, con el lema en catalán «De l’Empordà, per emportar»
02

Experiencia de usuario

Del documento a la carta navegable.

Un PDF traslada el trabajo a quien lee: ampliar, recorrer y recordar dónde estaba cada cosa. Convertí la carta en contenido estructurado, agrupado por categorías y con un filtro que deja a la vista solo lo que se busca. Reescribir los platos formó parte del mismo trabajo.

Mi aportación

  • Arquitectura de contenidos: separación de la sala y el take away en dos recorridos independientes, con navegación propia.
  • Sistema de categorías: clasificación de platos y bebidas para que el filtro sustituya la lectura lineal del PDF.
  • UX Writing: revisión de nombres y descripciones de la carta para leerse en pantalla y no en papel.
  • Mobile first: diseño del recorrido pensando primero en el móvil, que es desde donde se consulta la carta.
Arquitectura de la web: un router que lleva a Can Kai y a Taro, con reserva, carta, diario, cheque regalo y llamada
Inicio de la web de Can Kai en un portátil
Cuatro pantallas móviles: inicio, carta, entrantes y filtro sin gluten y vegetariano
03

Prototipado

Del Figma al código, sin escalas.

Buena parte de la propuesta es movimiento: transiciones de entrada y salida y un parallax distinto en cada sección. En lugar de simularlo con pantallas estáticas, llevé el Figma directamente a código con asistencia de IA y ajusté el ritmo en el navegador, que es donde de verdad se nota.

Mi aportación

  • Figma como fuente de verdad: estructura, tipografía y espaciados cerrados en el archivo antes de escribir una sola línea de código.
  • Traducción asistida por IA: paso directo del diseño a componentes de front-end, sin capa intermedia de prototipo.
  • Ajuste en navegador: calibración de duraciones, curvas y capas de parallax sobre el código ya montado.
Todas las pantallas de la web en Figma, por página: menú, router, inicio, cartas, take away, legales, cheque regalo, diario y 404
Inicio de Can Kai y tres pantallas de Taro en escritorio
04

Diseño de interfaz

Dos pieles sobre una misma estructura.

Las dos marcas tenían que compartir componentes sin parecer lo mismo. Construí una estructura única (ficha de plato, cabecera de categoría, barra de filtros) y dos pieles que la visten: Can Kai con Jost sobre crema y negro; Taro con Anton sobre negro y naranja.

Mi aportación

  • Sistema de diseño: tipografía, color y espaciados definidos en dos temas intercambiables sobre los mismos componentes.
  • Componentes de carta: fila de plato con línea de puntos y precio sobre la misma base, reutilizada para carta y bebidas.
  • Desarrollo y publicación: implementación del front-end y puesta en producción en cankai.es.
Carta de bebidas en escritorio, con el menú de categorías y los tés
Página de take away de Taro en escritorio, con fotos de los platos y la carta de entrantes
Carta de entrantes de Taro, con los precios en naranja sobre negro
Carta de entrantes de Can Kai, con los precios en rojo sobre crema
Tipografía de Can Kai: Jost
Paleta de colores de Can Kai: rojo, crema y negro
Tipografía de Taro: Anton
Paleta de colores de Taro: naranja, crema y negro

Can Kai y Taro ya no reparten un PDF: reparten una carta que se lee. Cerrar el proyecto de punta a punta, del texto a la producción, deja una base ordenada donde cambiar de temporada no obliga a repensar la web.

Fotografías de Taro: platos, sushi, una botella de sake y la bolsa para llevar

Comparte este proyecto

Sigue desplazándote para ver el siguiente caso práctico.

CatSalut