Gonzalo TéllezFideos El Triunfo
Fideos El Triunfo
Fideos y pastas desde 1950. A partir de su marca construí un sistema de diseño bilingüe que ordena su sitio y sirve de base a su app de delivery.
Recorrer el sitioUn sitio que ya existía y una marca con pocas reglas
Fideos El Triunfo hace fideos y pastas en Lima desde 1950. Su sitio estaba publicado y la marca tenía lineamientos para redes, pero nada decía cómo se comporta un botón, cómo se arma una ficha o qué contraste se lee. Necesitaba ordenar el sitio y preparar la base de su app de delivery.
De lineamientos a un sistema vivo, en cuatro decisiones
- 01Convertí la marca en recursos de interfaz.
El rombo, el templo, la flor, la nube y los cintillos pasaron de adorno a señal: marcan secciones, títulos y transiciones.
- 02Construí un sistema de diseño bilingüe.
Componentes con sus estados, contraste medido sobre los colores de marca, voz y tono, y las clases y variables con las que se administra el sitio.
- 03Ordené el catálogo y el recetario.
Fichas de producto y recetas con una misma plantilla, y recomendaciones que se llenan solas según la etiqueta de cada receta.
- 04Optimicé el sitio página por página.
Apliqué el sistema a inicio, productos, recetas, historia y app, y medí cada espacio en producción.
Una sola fuente de verdad para la marca y su web
El sistema reúne la identidad de la marca y las decisiones de diseño de su web: color, tipografía, adornos, componentes, patrones, navegación, accesibilidad y voz, más las variables y clases con las que se administra el sitio. Es la base del sitio y de sus aplicativos futuros, y todo lo que dice está medido en producción.
Fundamentos
- 01Marca
- 02Color
- 03Tipografía
- 04Adornos e íconos
Sistema
- 05Componentes
- 06Respuestas de la interfaz
- 07Patrones
- 08Navegación
- 09Responsive
- 10Plantillas
Guía
- 11Accesibilidad
- 12Voz y tono
- 13Variables
- 14Traspaso al gestor
- 15Changelog
Con muestra viva en esta página
Dos acentos y seis formas de marca
La paleta es corta a propósito y la web no usa íconos ilustrados: repite formas de la marca que se leen como señales.
Rojo y verde, negro y blanco. Son dos acentos que nunca se mezclan en una misma pieza: el rojo abre y el verde acompaña. Cada color tiene su variable y su equivalente en el gestor del sitio.
El rombo, el templo, la flor, la nube y los cintillos pasan de adorno a señal: marcan secciones, títulos y transiciones, y toman el color de su sección.
Una plantilla para productos y recetas
El catálogo y el recetario comparten las mismas piezas, así que se ven como una sola familia y se mantienen desde un solo lugar.
Las doce fichas de producto salen de una plantilla. Etiquetas y valores comparten interlínea para alinearse en la misma grilla, y un cambio en la plantilla las corrige a todas.
Cada forma tiene su radio y no se inventan otros. El 25 es la firma del sitio: fotos, marcos, formularios, el banner y hasta el iframe de Instagram.
Variables que administran el sitio
El sitio se edita desde variables globales en su gestor de contenidos. Si cambia una, cambian todas las páginas que la usan. Estas son tres de sus familias.
- --rojoRojo · abre el inicio y las recetas
#EC1C27 - --verde-1Verde-1 · botones
#009964 - --verde-2Verde-2 · pie y banner de la app
#06704B - --verde-suaveLiteral en la clase chip
#E8F3E9 - --negroNegro · texto
#272727 - --grisGris · texto secundario
#8A8383 - --gris-medioGris medio · fondos de sección
#F5F4F3 - --fondoFondo de página
#FFFFFF - --lineaLiteral en las tarjetas
#E4E4E7
Verde suave y Línea son literales en las clases, no variables, igual que en el sitio.
- --radio-imagenFotos, marcos y formularios
25px - --radio-pildoraChips
30px - --radio-botonBotones, en sus 4 clases
60px - --radio-desplegableMenú desplegable
12px
El 25 es la firma de la marca en pantalla.
- --et-mov-durDuración de las entradas
900ms - --et-mov-shiftRecorrido de cada entrada
24px - --et-escalonEscalonado por elemento, hasta 3
110ms - --et-mov-easeUna sola curva para todo
cubic-bezier(.22,1,.36,1)
Una sola curva para todo. Cada punto se mueve con la duración y la curva de su variable.
Fotos y videorecetas con Batan
Junto a Batan producimos las fotos de producto, los bodegones y los videos de recetas. Cada receta nueva suma foto, video y su entrada.
Bodegones de la sesión de fotos: carbonara, sopa dashi y rollos primavera, cada uno con su receta en el sitio.
Un sitio publicado y una base para la app
El sitio está en línea con catálogo, fichas, recetario, historia y app, y el sistema es la referencia para lo que viene.
Lo que ves en esta página son muestras vivas: piezas sueltas del sistema, elegidas para contar el caso.
El sistema de diseño completo, v1.4, pertenece a Fideos El Triunfo y está en su poder.