Un comensal decide en medio segundo si tu restaurante le sirve para el martes. La mitad de esa decisión es color. La otra mitad es la primera frase que lee. Hacemos las dos en esta lección, en ese orden, a propósito.
Lo que vas a poder hacer al final
- Elegir una paleta de marca de 3 colores que pase contraste WCAG AA en teléfonos.
- Afinar la voz en tres ejes: formal↔casual, clásico↔moderno, conciso↔cálido.
- Elegir un par tipográfico de título + cuerpo de 6 opciones curadas.
Versión en lenguaje sencillo — la lectura rápida
Elige tres colores para tu marca. Revisa que pasen en un teléfono. Mueve tres controles para fijar tu voz: ¿formal o casual? ¿Viejo o nuevo? ¿Corto o cálido? Elige un par de tipografías de seis opciones. Tu sitio ahora se ve como tuyo.
Si llegaste de la Lección 6a, tu posicionamiento informa las paletas sugeridas abajo — las paletas de partida según cocina van más cálidas cuando te ubicaste hacia lo casual, más frías cuando te ubicaste hacia la alta cocina. Si llegaste de la Lección 6b, respira — esta lección es más ligera que la que acabas de hacer.
Por qué color primero
El color llega al cerebro antes que las palabras. Un comensal mirando tu sitio en el bus no lee tu menú primero — forma una impresión de calidez, precio y tono a partir de tu fondo y tu acento antes de que cualquier frase se registre. Si tus colores se sienten como un comedor italiano fino cuando vendes comida vietnamita rápida para llevar, el resto de tu sitio tiene que pelear para ganarse la confianza.
La buena noticia: no necesitas un diseñador para elegir bien tres colores. Necesitas tres reglas. Elige colores que vayan con lo que ve un comensal cuando entra. Asegúrate de que el texto se lea sobre el fondo. No elijas más de tres. El widget de abajo aplica las tres reglas, y te da una paleta de partida ajustada a tu cocina.
Tu paleta
Tómate veinte segundos para mirar tu vista previa a la derecha. Los colores ya no son cualquier cosa — son tuyos. Fíjate en la ficha de cocina arriba de tu nombre y en el botón "Reservar una mesa": ambos pintados en tu color de acento. Si la advertencia de contraste está amarilla o roja, cambia tu acento o tu fondo hasta que esté verde. Un sitio que falla el contraste pierde a todo comensal que lee en un teléfono al sol, que son casi todos.
Si estás atorado: Elige la sugerencia adecuada a tu cocina arriba. Ya viene revisada para contraste, encaja con las convenciones visuales de restaurantes en esa cocina, y es fácil de refinar en la próxima lección cuando empieces a añadir fotos.
Qué significa "voz" realmente
Voz no son las palabras que escribes — eso viene después. Voz es el registro en el que viven las palabras. El mismo restaurante puede describirse como "una experiencia gastronómica italiana moderna y refinada" o "salsa roja, sillas duras, las recetas de mi abuela" y no son el mismo lugar. Elige la voz ahora y la escritura en cada lección siguiente se vuelve más fácil porque sabes hacia dónde apuntas.
Lee estos dos ejemplos — los dos para el mismo restaurante mexicano imaginario.
Formal · clásico · conciso
"Cocina mexicana contemporánea en Silver Spring. Tortillas hechas cada mañana. Se recomienda reservación."
Casual · clásico · cálido
"Tortillas a mano, salsa molcajeteada cada mañana, las recetas de mi mamá. Pásale. Te acomodamos."
Los dos son buenos. Ninguno es "el correcto". El primero pertenece a un restaurante con mantel; el segundo a un puesto de mostrador con un solo cocinero. El truco es saber cuál de los dos eres tú.
Tu frase de presentación
Todavía no necesitas escribir tu página de "Acerca de". Necesitas una frase — la manera en que le describirías tu lugar a un cliente del barrio que le explica a un primerizo "¿qué tipo de lugar es este?" Escríbela ahora. Se guarda en tu contexto y las próximas lecciones la usan.
Mira la vista previa a la derecha. Tu frase ahora aparece debajo del nombre de tu restaurante — esa es la línea de promesa. Léela una vez. ¿Está de acuerdo con tus colores? Una frase cálida y casual en colores corporativos fríos se siente como una mentira. Una frase formal y concisa en colores juguetones se siente como una parodia. Si pelean, cambia el que sea más fácil. El color toma treinta segundos. La frase toma un pensamiento.
Afina tu voz
Ahora hacemos la voz granular. Tres controles deslizables — formal ↔ casual, clásico ↔ moderno, conciso ↔ cálido — cada uno con una frase de muestra en el extremo. No estás eligiendo palabras; estás eligiendo el registro en el que las palabras se sientan. Desliza cada uno hasta que la muestra se lea como un cliente del barrio le describiría tu lugar a un desconocido.
Vuelve a leer las tres muestras. Juntas describen el mismo restaurante en tu registro. Ahora lee la frase que escribiste arriba y revisa: ¿se sitúa en el mismo punto de cada slider? Si "formal · clásico · conciso" se siente correcto pero escribiste una frase casual de 22 palabras, uno de los dos está mal. Usualmente el slider tiene razón — la frase es solo un primer borrador.
Elige un par tipográfico
La tipografía es la última pieza definitoria de marca antes de que pasemos al menú. No necesitas saber terminología tipográfica — necesitas reconocer el tipo de lugar al que se parece cada par. Seis pares curados cubren el rango de restaurantes para los que es este bootcamp; cada uno es un stack de fuentes del sistema en el selector, así funciona sin una sola petición de red, y luego el generador de la L14 emite el @import de Google Fonts correspondiente para el sitio descargado.
Mira la vista previa a la derecha de nuevo — el nombre de tu restaurante ahora viste la cara de título de tu par elegido. Si un cliente del barrio se acercara a la puerta y el letrero estuviera renderizado en esta tipografía, ¿asumiría que llegó al lugar correcto? Si la respuesta es "no, eso parece otro restaurante", prueba otro par. Puedes cambiar esto en cualquier momento antes de la Lección 14.
Tu sitio dejó de ser una plantilla.
Elegiste una paleta de tres colores apropiada para tu cocina, con contraste revisado para legibilidad en teléfonos, y escribiste la frase que ancla cómo suena tu restaurante a un desconocido. Todo guardado en este navegador.
De aquí en adelante, cada pantalla del bootcamp — y el sitio que descargarás en la Lección 14 — viste tus colores y cita tu frase.
Enlace opcional, cuando estés listo: el Brand Suite de Muntin toma tus tres colores y propone tipografía, tablero de inspiración, y letreros. Muchos operadores lo saltan por ahora y lo revisitan más adelante.