Recetas que
salen del vídeo.
Guía de estilo para un diegodoal.com que se actualiza al ritmo del canal: subes el vídeo, pegas el link, revisas la receta y publicas. Tu web de siempre, ordenada para que la mantengas tú.
Cómo está hecho
Todo el diseño sale de un archivo, tokens.css. Los componentes nunca llevan un color ni una medida escrita a mano: piden «el color de acento» o «el radio mediano». Si mañana cambias el amarillo, cambia en los botones, los minutos, los subtítulos y esta misma página, sin tocar nada más.
--amarillo-400: #ffc700--color-acento: var(--amarillo-400).minuto { background: var(--color-acento) }Pruébalo
Estos controles cambian tokens en vivo. Mira cómo se mueve toda la página, incluida la receta de abajo.
Color
Tu amarillo se queda. Lo demás sale de la lógica de Sanzo Wada: el libro japonés de 1933 de combinaciones de color. No hay blanco ni negro puros. La tinta es café, no negra, y el verde agua es el único frío. Para el papel hay tres opciones en el panel de arriba («Papel»): el gris de tu web, un celadón sacado de Sanzo o crema.
Las tiras son los colores originales del libro. Abajo, cómo quedan en la web: tu #ffc700 en lugar del amarillo de c118, y el papel aclarado para leer cómodo.
El amarillo siempre es «vídeo». Minutos, capítulos y subtítulos. Nada más usa amarillo, así que si algo es amarillo sabes que te lleva al vídeo.
Semánticos · los que usan los componentes
Primitivos
Tipografía
Poppins, la que ya usas, con los títulos de sección en mayúsculas como tu «MÁS RECETAS». Caveat solo para los rayones.
contadores1:29:18 Poppins no trae cifras tabulares: cada dígito va en una caja fija y el contador no baila.
Espacio y forma
Espacio
Radios
Toque mínimo
Todo lo que se pulsa mide al menos --toque (). Se cocina con el móvil en la encimera y los dedos sucios.
Piezas
Todas las piezas de la web, con el porqué de cada una. Si algo nuevo no se puede hacer con ellas, probablemente sobra.
El subtítulo
Tus subtítulos amarillos con borde negro ya son tu marca. En la web aparecen solo sobre fotogramas del vídeo, con la frase exacta de ese momento: la captura explica sola el paso.
JakobVon RestorffDeja reposar el arroz 5 minutos tapado antes de servir; el socarrat termina de hacerse fuera del fuego.
Rayones
Como cuando señalas con la cuchara en el vídeo. Solo para lo que dirías de pasada: un truco, una advertencia, lo que todo el mundo hace mal. Máximo uno por pantalla. Nunca para decorar, ni en títulos ni en la navegación.
Von Restorff
Tarjeta de receta
Foto, cocina, tiempo y título. Sin extracto ni «Leer más →»: menos que decidir para quien mira y menos texto que mantener (y ningún strudel con la descripción del pollo teriyaki).
HickCarga cognitivaBotones y minutos
Negro para la acción principal, contorno para la secundaria. El minuto es amarillo porque es vídeo: abre el reproductor flotante en ese segundo.
Fitts
Enlaces de afiliado: si compras algo, me llevo una pequeña comisión y a ti te cuesta lo mismo.
Lo que uso
Tu lista de Amazon ya está en la bio de Instagram. Aquí aparece en la receta donde lo usas: el flujo detecta los utensilios que nombras en el vídeo y los cruza con tu lista. Estos son productos reales de tu lista. El aviso de afiliado va siempre a la vista: lo pide Amazon y genera confianza.
Temporizadores
Salen solos cuando un paso dice un tiempo («unos 5 minutos a 170 °C»). Son oscuros porque el amarillo es del vídeo, y dicen «Iniciar» para que se entienda que se tocan. Corriendo llevan un punto que late; al terminar suenan, vibran y parpadean. Siguen contando aunque cierres la página.
Carga cognitivaFitts- 2 cosas para revisar
350 g maicena revisar · 45 g mantequilla de tu web
Borrador y «revisar»
Lo que el flujo no puede confirmar se marca con una línea discontinua en vez de inventarlo. Se publica cuando lo revisas.
TeslerCocinando
Dos piezas para cuando ya estás con las manos en la masa.
Modo cocina
Pantalla completa, un paso a la vez y la pantalla siempre encendida. Arriba, los ingredientes de ese paso ya escalados y una barra de progreso; abajo, lo que viene después para adelantarte. Se avanza con dos botones grandes o deslizando de lado. Si recargas, vuelves a donde ibas.
FittsCarga cognitiva
Reproductor flotante
Tocar un minuto abre el vídeo flotando, en ese segundo, sin salir de la receta. Se arrastra desde «mover» y al soltarlo cae a la esquina más cercana; el botón ⤢ cambia entre chico, mediano y grande. Nunca tapa los botones del modo cocina. Mientras suena, el paso que estás viendo se marca solo.
JakobDohertyLa receta, armada
Esta es la receta real que salió de tu último vídeo, /receta/burger-pollo-frito, hecha solo con las piezas de arriba. Prueba las raciones, los minutos y el modo cocina.
Por qué así
Cada decisión tiene detrás un principio conocido de UX (de Laws of UX). No es gusto: es cómo la gente usa una web de recetas con el móvil en la cocina.
Ley de Hick
Más opciones, más tarda uno en decidir.
Tarjetas con cuatro datos y filtros cortos. Nada de «Leer más».
lawsofux.com ↗Ley de Fitts
Lo grande y cercano se toca antes y mejor.
Todo lo pulsable mide 44 px o más. En móvil, una barra fija abajo con ingredientes y modo cocina.
lawsofux.com ↗Ley de Jakob
La gente espera que tu web funcione como las que ya conoce.
Receta en el orden de siempre (datos, ingredientes, pasos) y cocinas como tus destacados de Instagram.
lawsofux.com ↗Carga cognitiva
Cuanto menos hay que recordar, mejor se hace.
Ingredientes que se tachan, raciones que recalculan y un minuto en cada paso para no tener que buscar en el vídeo.
lawsofux.com ↗Von Restorff
Lo distinto es lo que se recuerda.
Un solo rayón por pantalla y el amarillo solo en minutos y subtítulos. Si todo resalta, nada resalta.
lawsofux.com ↗Umbral de Doherty
Por debajo de 400 ms, la web se siente instantánea.
Páginas estáticas en Cloudflare: cargan rápido incluso con mala cobertura en la cocina.
lawsofux.com ↗Ley de Tesler
La complejidad no desaparece: alguien tiene que cargarla.
La carga el sistema, no tú. Pegas el link y revisas; transcribir, ordenar y sacar fotogramas va solo.
lawsofux.com ↗Efecto estético-usabilidad
Lo que se ve cuidado se percibe más fácil de usar.
Tus fotos y tus subtítulos hacen ese trabajo. Por eso no hay stock ni adornos.
lawsofux.com ↗Pico y final
Se recuerda el mejor momento y el último.
El pico es el plato terminado arriba del todo; el final, tu truco y el vídeo para verlo hecho.
lawsofux.com ↗Lo que no se ve
Cada receta publica sola los datos que Google necesita para mostrarla como receta (foto, tiempo, valoración) y el vídeo con sus capítulos. Hoy la web no tiene ninguno. La página de ejemplo ya los lleva.
{
"@type": "Recipe",
"name": "Mapo tofu casero",
"totalTime": "PT30M",
"recipeYield": "4",
"recipeCuisine": "China",
"recipeIngredient": ["400 g tofu sedoso", "…"],
"recipeInstructions": [ … ],
"video": {
"@type": "VideoObject",
"hasPart": [{ "@type": "Clip",
"name": "Freír el doubanjiang",
"startOffset": 271 }]
}
}
De paso, para YouTube
Con los mismos datos sale la descripción del vídeo con capítulos, ingredientes y el link a la receta. El tráfico va del vídeo a la web y de la web al vídeo.
El archivo
La web tiene unas 30 recetas; el canal, muchas más. Pasar los vídeos antiguos por el mismo flujo llena el archivo de golpe, y cada uno es una búsqueda más en Google que acaba en ti.
Reglas
● Sí
- Frases tuyas, sacadas del vídeo.
- Cantidades en gramos, cifras tabulares.
- Un minuto del vídeo en cada paso.
- Fotos de tu cocina, nunca de banco de imágenes.
- Colores solo de la paleta: nada de #fff ni #000.
- Amarillo solo para el vídeo.
- Cambios de diseño solo en
tokens.css.
● No
- «Descubre esta deliciosa receta…»
- Historias largas antes de los ingredientes.
- Sombras, degradados, emojis de adorno.
- Colores o medidas escritos a mano en un componente.
- Publicar sin revisar: la última palabra es tuya.
Archivos
tokens.cssLos valores. Lo único que se toca para cambiar el diseño.
diegodoal.cssLas piezas. Solo leen tokens.
diegodoal.jsRaciones, filtros, tema, modo cocina, temporizadores y reproductor.
Sirven igual en Squarespace (pegados en el CSS personalizado), en EmDash o en Astro.