Can Kai
Redissenydelwebd’unrestaurantqueallotjaduesmarques:CanKaialasalaiTaroaltakeaway.Duescartesnavegables,ambidentitatpròpia,quesubstitueixenelPDFquefinsarafeiadecarta.
(SCROLL) ↓
01
Visió general
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. Els vaig separar en dos recorreguts amb identitat pròpia (Can Kai per a la sala, Taro per al take away) i vaig refer el projecte sencer, del text fins a la posada en producció.
Fitxa
02
Experiència d’usuari
Del document a la carta navegable.
Un PDF trasllada la feina a qui llegeix: ampliar, recórrer i recordar on era cada cosa. Vaig 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.
La meva aportació
- 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
Prototipatge
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, vaig portar el Figma directament a codi amb assistència d’IA i vaig ajustar el ritme sobre el navegador, que és on es nota de debò.
La meva aportació
- 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
Disseny d’interfície
Dues pells sobre una mateixa estructura.
Les dues marques havien de compartir components sense semblar la mateixa cosa. Vaig 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.
La meva aportació
- 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.
Comparteix aquest projecte
Continua desplaçant-te per veure el següent cas pràctic.
CatSalut