CAN KAI
CAN KAI
CAN KAI
CAN KAI
Redissenydelwebd'unrestaurantqueallotjaduesmarques:CanKaialasalaiTaroaltakeaway.Duescartesnavegables,ambidentitatpròpia,quesubstitueixenelPDFquefinsarafeiadecarta.
(SCROLL) ↓
01
Project Overview
Dos serveis, dues marques, un sol web.
El web anterior havia quedat enrere i tota l'oferta vivia dins d'un PDF: lletra minúscula al mòbil, zoom constant i cap manera d'arribar a un plat concret. A sobre, la sala i el take away compartien document tot i ser dos negocis amb públic i moment de consum diferents. Vam separar-los en dos recorreguts amb identitat pròpia —Can Kai per a la sala, Taro per al take away— i vam refer el projecte sencer, del text fins a la posada en producció.
Details
02
User Experience
Del document a la carta navegable.
Un PDF trasllada la feina a qui llegeix: ampliar, recórrer i recordar on era cada cosa. Vam convertir la carta en contingut estructurat, agrupat per categories i amb un filtre que deixa a la vista només allò que es busca. Reescriure els plats va formar part de la mateixa feina.
(El que vam fer)
- Arquitectura de continguts: separació de la sala i el take away en dos recorreguts independents, amb navegació pròpia.
- Sistema de categories: classificació de plats i begudes perquè el filtre substitueixi la lectura lineal del PDF.
- UX Writing: revisió de noms i descripcions de la carta per llegir-se en pantalla i no en paper.
- Mobile first: disseny del recorregut pensant primer en el telèfon, que és des d'on es consulta la carta.
03
Prototyping
Del Figma al codi, sense escales.
Bona part de la proposta és moviment: transicions d'entrada i sortida i un parallax diferent a cada secció. En lloc de simular-ho amb pantalles quietes, vam portar el Figma directament a codi amb assistència d'IA i vam ajustar el ritme sobre el navegador, que és on es nota de debò.
(El que vam fer)
- Figma com a font de veritat: estructura, tipografia i espaiats tancats al fitxer abans d'escriure cap línia de codi.
- Traducció assistida per IA: pas directe de disseny a components de front-end, sense capa intermèdia de prototip.
- Ajust en navegador: calibratge de durades, corbes i capes de parallax sobre el codi ja muntat.
04
UI Design
Dues pells sobre una mateixa estructura.
Les dues marques havien de compartir components sense semblar la mateixa cosa. Vam construir una estructura única —fitxa de plat, capçalera de categoria, barra de filtres— i dues pells que la vesteixen: Can Kai amb Jost sobre crema i negre; Taro amb Anton sobre negre i taronja.
(El que vam fer)
- Sistema de disseny: tipografia, color i espaiats definits en dos temes intercanviables sobre els mateixos components.
- Components de carta: fila de plat amb línia de punts i preu a la mateixa base, reutilitzada per a carta i begudes.
- Desenvolupament i publicació: implementació del front-end i posada en producció a cankai.es.
Can Kai i Taro ja no reparteixen un PDF: reparteixen una carta que es llegeix. Tancar el projecte de punta a punta, del text fins a la producció, deixa una base ordenada on canviar la temporada no obliga a repensar el web.
Continua desplaçant-te per
veure el següent cas pràctic.
PADLL | App DesignPADLL | App DesignPADLL | App DesignPADLL | App DesignPADLL | App DesignPADLL | App Design