Casi ningún cliente llega con las dos piezas resueltas. Llega con una idea, un producto que ya vende y una pregunta concreta: ¿contrato primero la marca o primero la web? La duda es razonable, porque las dos cosas son caras y nadie quiere pagarlas dos veces. He tenido esta conversación decenas de veces y la respuesta honesta es que depende de dónde vive tu negocio. Lo que no depende de nada es el orden de las decisiones, y ahí es donde la gente se equivoca y rehace trabajo.
Contenido
Aquí tienes la regla que aplico cuando un cliente necesita las dos cosas. Después van los tres escenarios posibles, lo que se puede aplazar sin riesgo y lo que sale caro si lo dejas para después.
Puntos clave
- Regla general: primero se cierra lo que más tarda en cambiar y sobre lo que se apoyan las demás piezas. Si vendes por internet, la web no puede esperar meses.
- Existe una «identidad mínima viable» que desbloquea la web sin el manual completo: logotipo, tipografía, dos colores y formato de imagen.
- La marca hay que probarla a tamaño de favicon antes de aprobarla. Un logo que solo funciona en grande es un problema de web.
- Lo barato de cambiar después son los colores y la tipografía, si están centralizados. Lo caro son las imágenes, las maquetas y las piezas ya impresas.
- En los 21 meses que van de enero de 2025 a octubre de 2026 he registrado 367 impresiones de búsquedas que piden web y marca a la vez. Nadie las está cubriendo bien, ni yo.
La respuesta corta: primero lo que condiciona al resto
Primero la marca cuando la marca es tu activo principal. Si vendes en tienda física, en feria o en el lineal de un supermercado, tu identidad viaja en packaging, etiquetas, rótulos y vehículos. Ahí el sistema visual manda y la web es una pieza más que se adapta a lo que ya está decidido.
Primero la web cuando tu negocio vive en internet. Si vendes online, la web no puede esperar seis u ocho semanas a que se cierre un manual de marca. Lo mismo si captas clientes por buscador o si tu producto se decide comparando en pantalla. Se cierra la base visual mínima y se empieza a construir.
Cuando se dan las dos condiciones, y es el caso más común, el orden correcto es este. Primero las decisiones que la web necesita para maquetarse, después la web, y por último el sistema completo de identidad. No es un compromiso a medias: es la secuencia que evita rehacer.
| Escenario | Qué va primero | Qué puede ir en paralelo | Riesgo si lo haces al revés |
|---|---|---|---|
| Vendes online o captas por buscador | Base visual mínima (logo, tipografía, color) | Desarrollo web y contenidos | Enseñar una web sin criterio visual durante meses |
| Vendes en tienda, feria o packaging | Identidad visual completa | Web informativa | Reimprimir etiquetas y rótulos al cambiar el logo |
| Marca nueva sin nombre decidido | Naming y posicionamiento | Nada. Lo demás depende de esto | Diseñar una identidad para un nombre que va a cambiar |
Qué es la identidad mínima viable
La identidad mínima viable es el conjunto de elementos sin los cuales una web no se puede maquetar bien. No es un logo suelto, son cinco decisiones concretas:
- Logotipo en versión principal y en versión reducida (la que entra en la barra de navegación y en el favicon).
- Tipografía para títulos y para texto, con sus pesos.
- Dos o tres colores con sus códigos, más los neutros de fondo y texto.
- Formato de imagen para las piezas que van a aparecer en la web (proporción, tratamiento, si llevan texto encima).
- Un criterio de aplicación: cómo se comporta la marca sobre foto, sobre color plano y en blanco y negro.
Todo lo demás puede esperar. El manual de identidad completo, la papelería, el packaging, las aplicaciones de merchandising y los mockups de presentación no son necesarios para empezar a construir la web. Son necesarios para que la marca aguante el crecimiento, y eso llega después.
Si quieres ver qué incluye cada nivel, en el servicio de identidad visual y branding está desglosado por tramos, desde el logotipo suelto hasta el sistema completo con manual de uso.
La prueba del favicon
Antes de aprobar un logotipo, pruébalo a 32 píxeles de ancho y en un cuadrado de 40 píxeles. Es el tamaño al que va a vivir en la pestaña del navegador, en la cabecera de la web, en el avatar de Instagram y en el icono de una app. Google muestra ese favicon junto a tu resultado en el buscador, así que un icono ilegible te resta visibilidad justo donde más importa (Google Search Central, Define Website Favicon for Search Results, consultado el 8 de octubre de 2026). Si a 32 píxeles la marca se convierte en una mancha, el problema no es el favicon: es el logo.
La segunda prueba es la barra de navegación. Muchos de los logos que llegan a mi mesa son horizontales y muy largos, y obligan a reducir el menú en móvil. La tercera es el fondo oscuro y el fondo claro. Una marca que solo funcione en uno de los dos va a dar problemas en cualquier web, porque el usuario puede estar en modo noche.
Qué pasa si diseñas la marca sin mirar la web
El error más caro que veo no es elegir mal los colores, es diseñar la marca sin pensar en los soportes digitales. Una identidad hecha solo para gran formato suele fallar en cuatro sitios:
- El logotipo no tiene versión reducida, así que la cabecera de la web queda desequilibrada o pierde el símbolo.
- La tipografía es demasiado fina y desaparece en pantallas con brillo bajo o con mala resolución.
- El color principal no tiene contraste suficiente con el blanco, así que los botones y los enlaces no se leen. El mínimo exigible para texto normal es una relación de 4,5 a 1 (W3C, WCAG 2.2, criterio 1.4.3, consultado el 8 de octubre de 2026).
- Las proporciones no encajan en los formatos de imagen que la web y las redes necesitan (cuadrado, vertical, cabecera). Cada pieza se recorta mal y el resultado parece improvisado.
Hay un dato que explica por qué esto importa tanto en pantalla. El estudio de Nielsen Norman Group sobre cómo se lee en la web, publicado el 30 de septiembre de 1997 y todavía vigente en su método, midió tres mejoras de usabilidad: escribir de forma concisa mejoraba el resultado un 58%, hacer el contenido escaneable un 47% y combinar las dos cosas un 124% (NN/g, How Users Read on the Web, consultado el 8 de octubre de 2026). La web no se lee, se escanea. Una marca que necesita cinco segundos de contemplación está peleando contra el medio.
Cuando la marca está pensada también para pantalla, esto se resuelve en el diseño y no después. Ecohemp es el caso de una marca creada para el canal digital, donde la credibilidad y la claridad del producto deciden la compra. Verdeluz iba en la dirección contraria: transmitir arraigo y peso institucional para un aceite que también se enseña en pantalla.
Qué pasa si haces la web sin la identidad cerrada
Aquí el daño no es visual, es económico. Una web construida sobre una identidad provisional hereda esas decisiones en cada rincón. Los colores están en el CSS y la tipografía en los estilos globales. El logo aparece en el favicon, en las imágenes destacadas, en las plantillas de correo y en las imágenes de compartir en redes.
Lo que se cambia barato después:
- Colores y tipografía, si están centralizados como variables y no escritos a mano en cada sección. Cambiar tres valores puede repintar la web entera en una tarde.
- El logotipo en cabecera y pie, porque suele ser un archivo único y con versión reducida.
- Textos y jerarquías, que se editan sin tocar diseño.
Lo que se cambia caro:
- Imágenes y fotografías con la paleta antigua o con el logo dentro.
- Maquetas, mockups y piezas de presentación que ya se usaron con clientes o en redes.
- Material impreso: tarjetas, etiquetas, catálogos, cartelería.
- Imágenes de compartir y vídeos, que se regrabaron o se reeditaron.
La regla práctica que le doy a mis clientes cuando la web tiene que salir antes que la marca: cerrad tipografía y color primero, aunque el logo todavía esté en revisión. Son las dos decisiones que atraviesan toda la web, y una vez fijadas, el logo se puede terminar sin tocar la maquetación.
Si tu caso es que la web corre prisa y la marca no está definida, lo más honesto es saber cuánto cuesta cada escenario antes de decidir. Lo tengo desglosado en cuánto cuesta una página web en 2026, con precios reales y no con horquillas de agencia.
El orden cuesta dinero: lo que se rehace en cada caso
Puestos a decidir, esto es lo que se repite en cada escenario.
| Escenario | Qué se rehace | Cuánto trabajo es |
|---|---|---|
| Identidad primero, web después | Nada. La web se maqueta sobre el sistema cerrado | Ninguno |
| Base mínima primero, manual completo después | Piezas de presentación y manual. La web no se toca | Bajo |
| Web primero, identidad después, con colores y tipografía centralizados | Imágenes y piezas gráficas que llevan el logo viejo | Medio |
| Web primero, identidad después, con estilos escritos a mano | Maquetación, estilos, imágenes, favicon y piezas de compartir | Alto |
La diferencia entre las dos últimas filas no es el orden, es la arquitectura. Una web construida con tokens de diseño (colores y tipografía como valores centrales) sobrevive a un cambio de marca sin cirugía. Una web donde cada sección lleva sus colores escritos a mano hay que repasarla entera.
Y hay una señal que confirma que la gente no separa estas dos compras. En los 21 meses que van del 1 de enero de 2025 al 6 de octubre de 2026 he registrado 13 consultas que mezclan web y marca en la misma frase. Suman 367 impresiones y cero clics, y diez de ellas incluyen la coletilla «branding distintivo». Búsquedas como «diseño web freelance en wordpress con branding distintivo» aterrizan hoy en mi página de diseño web, con una posición media entre el puesto 43 y el 76. La conclusión es simple: la gente pide el paquete completo con sus propias palabras y nadie lo está cubriendo bien. Ni yo.
Cómo lo hago yo cuando el cliente necesita las dos cosas
Trabajo marca y web con la misma cabeza, y eso cambia el orden de las decisiones. El proceso que sigo tiene cuatro fases:
- Contexto. Una sesión para entender el negocio, el público y la competencia. Sin esto, ni el logo ni la web tienen criterio, solo estética.
- Sistema base. Logotipo, tipografía y color, validados a tamaño de favicon y sobre fondo claro y oscuro. Aquí se cierran las decisiones que atraviesan toda la web.
- Web. Maquetación y desarrollo con ese sistema ya cerrado, con las imágenes y los formatos definidos en la fase anterior.
- Sistema completo. Manual de identidad, papelería, aplicaciones y las piezas que van llegando: packaging, catálogos, campañas.
Este orden tiene una ventaja que no se ve en el presupuesto: no hay traspaso de información entre un diseñador de marca y un diseñador de web distintos, porque son la misma persona. El briefing no se pierde por el camino y la coherencia no depende de que dos proveedores se lean los archivos del otro.
Si el proyecto es solo web, el trabajo sigue estando en mi página de diseñador web freelance, porque ahí explico el proceso técnico con WordPress, la optimización y la entrega. Lo que cambia cuando entran las dos piezas es el punto de partida, no el método.
Checklist antes de encargar cada pieza
Antes de encargar la web, ten cerrado o decidido:
- Logotipo vectorial (SVG o AI), con versión reducida y versión en negativo.
- Tipografía de títulos y de texto, con sus pesos y quién tiene la licencia.
- Colores con códigos hex, incluidos los neutros de fondo y de texto.
- Favicon y avatar cuadrado para redes.
- Proporciones de las imágenes que vas a usar: cabecera, destacada, cuadrado, vertical.
Antes de encargar la identidad, ten claro:
- Dónde va a vivir la marca: web, tienda, packaging, feria, vehículo, uniforme.
- Los tamaños mínimos a los que se va a ver, del favicon a la lona.
- Si va a haber tienda online o aplicación, porque cambian los requisitos de color y de contraste.
- Si el nombre está decidido y comprobado. Si el naming está en el aire, no diseñes nada más hasta cerrarlo.
Un logotipo sin esta información acaba siendo una pieza que gusta en la presentación y da problemas en producción. Si quieres entender por qué hay tanta confusión con los términos, lo explico en qué es un logotipo y qué no, donde distingo entre logotipo, símbolo y signo de marca.
Preguntas frecuentes
¿Puedo lanzar la web con un logotipo provisional?
Sí, siempre que la tipografía y el color estén cerrados de verdad. El logo es la pieza más visible de cambiar después, pero también la más contenida: suele aparecer en la cabecera, el pie, el favicon y las imágenes de compartir. Si esos cuatro sitios se maquetan pensando en un cambio futuro, sustituirlo es una tarde de trabajo, no un rediseño. Lo que no funciona es lanzar la web con tipografía y colores provisionales, porque esos sí atraviesan todas las secciones.
¿Es más caro hacer la marca y la web con el mismo diseñador?
No necesariamente. La ventaja no está en el precio por pieza, está en el retrabajo que evitas. Cuando hay dos proveedores, cada decisión de marca llega al diseñador web ya tomada, y cada problema que aparece en la maquetación obliga a volver al diseñador de marca. Ese ir y venir es lo que se paga dos veces. Con la misma persona, la validación de tamaños, contrastes y formatos se hace antes de maquetar, no después.
¿Cuánto tarda si hago las dos cosas?
Depende del tramo de identidad que elijas. Un logotipo suele estar listo en unas dos semanas, una identidad visual completa entre tres y cuatro, y un branding con naming y definición de marca entre seis y ocho. La web, si es a medida con WordPress, suele ir entre tres y cinco semanas. Si se encadenan como explico arriba, un proyecto con logotipo y web corporativa se resuelve en unas cinco o seis semanas. La fase de contexto y el sistema base se solapan con el arranque de la web.
¿Se puede cambiar la identidad después sin rehacer la web?
Sí, si la web se construyó con los colores y la tipografía centralizados. Cambiar el valor de un color y de una fuente repinta toda la web de forma automática. Lo que hay que rehacer son las imágenes que contienen el logo antiguo, las fotografías con la paleta vieja y las piezas de compartir. Por eso insisto tanto en no escribir colores a mano en cada sección. Ahí está la diferencia entre una web que sobrevive a un cambio de marca y otra que hay que rehacer entera.
¿Mi logo ya existe, solo quiero la web, hace falta arreglarlo?
No hace falta un rediseño, pero conviene una revisión técnica antes de maquetar. Se comprueba la versión vectorial, que exista una reducción legible para el favicon, que funcione sobre fondo oscuro y que las proporciones encajen en los formatos de imagen que la web necesita. Si el logo solo existe en PNG sobre fondo blanco, el primer trabajo es reconstruirlo, no usarlo tal cual.
¿Necesito el manual de identidad antes de empezar la web?
No. El manual es el documento que garantiza la coherencia cuando la marca ya se aplica en muchos sitios, y eso llega cuando hay más piezas que gestionar. Para maquetar la web necesitas las decisiones, no el documento: qué tipografía, qué colores, cómo se comporta el logo y qué formatos de imagen se usan. El manual se escribe después, con casos reales de aplicación, y sale mejor.
Qué hacer ahora
Si has llegado hasta aquí, tu caso es uno de estos dos. O sabes dónde vive tu negocio y ya puedes decidir el orden, o sigues con la duda porque tu producto se vende en los dos mundos: online y en físico. En ese segundo caso, el camino es el que uso siempre: contexto, sistema base, web y sistema completo.
Cuéntame en qué punto está tu proyecto y te digo sin rodeos qué toca primero. Trabajo con empresas de toda España y llevo tanto la marca como la web, así que no vas a tener que coordinar a dos proveedores.
Si quieres ver antes cómo queda esto en proyectos reales, en el portafolio están los casos, y en sobre mí está el resto del contexto. También tengo el hub de servicios de diseño gráfico con el resto de piezas que puedo asumir: papelería, cartelería, catálogos, packaging y merchandising.
Imágenes: composición de marca del estudio, con fondos generados con IA.
Sobre el autor: Raúl Martínez es diseñador gráfico y web freelance con más de una década diseñando identidades visuales y webs para empresas de toda España. Escribe sobre branding, diseño de marca y desarrollo web desde la práctica diaria del estudio.
