Cómo trabajamos · Paso 2
Wireframes y conceptos visuales
En el paso 2 lo hablado se convierte en algo que se puede mirar: wireframes y conceptos visuales sobre los que puedes opinar pronto. Ninguna gran revelación al final, ninguna sorpresa, revisiones incluidas.
Primero la estructura, después el color. Es el orden que evita la conversación más cara del sector: discutir el tono de un botón cuando lo que está mal es dónde está el botón.
Qué pasa en esta fase
- Wireframes primero: la estructura antes del color.
- Conceptos visuales aplicados a tus contenidos reales, no a texto de relleno.
- Revisiones incluidas en esta fase, no facturadas aparte.
- Un sistema de diseño reutilizable, para que lo que venga después encaje.
- Nada pasa a producción sin que hayas visto y aprobado el diseño.
Cuando apruebas el diseño, apruebas algo concreto. No una idea contada por teléfono.
Las dos entregas de esta fase
Wireframes
El esqueleto en gris: qué hay en cada pantalla, en qué orden y a qué distancia de la acción que te interesa.
- Arquitectura de contenidos
- Jerarquía de cada página
- Recorrido hasta la conversión
Conceptos visuales
El diseño aplicado ya a tus textos y tus fotos, para que veas tu negocio y no una plantilla bonita.
- Tipografía, color y marca
- Pantallas clave en móvil y escritorio
- Estados reales: vacío, error, carga
Sistema de diseño
Los componentes se definen una vez y se reutilizan. Así el proyecto crece sin descoserse.
- Botones, formularios y tarjetas
- Reglas de espaciado y rejilla
- Reutilizable en apps y paneles
Por qué con tus contenidos reales
Un diseño con texto de relleno siempre queda bien, y precisamente por eso engaña. Los problemas aparecen cuando el titular que tenías en mente ocupa tres líneas en móvil, o cuando la foto del producto es vertical y el diseño pedía horizontal.
Por eso pedimos los contenidos antes de diseñar, aunque estén a medias. Es más incómodo al principio y ahorra rehacer pantallas después.
Accesible y rápido, desde el diseño
Hay decisiones que condenan el rendimiento y la accesibilidad antes de escribir una línea de código: un contraste insuficiente, una tipografía ilegible en móvil, una imagen enorme de fondo.
Diseñamos siguiendo las pautas públicas de accesibilidad del W3C, porque una web accesible se lee mejor para todo el mundo, no solo para quien usa un lector de pantalla.
Y además se mira con el buscador delante: la estructura que acordamos aquí es la que después sostiene el seo y posicionamiento web, así que la jerarquía de encabezados y el recorrido interno se deciden ya en los wireframes y conceptos visuales.
Qué decidimos aquí y qué se queda para después
Esta fase no lo cierra todo, y conviene saber qué entra y qué no. Lo que se decide en los wireframes y conceptos visuales es difícil de cambiar más tarde sin coste; lo demás puede esperar sin bloquear nada.
Se decide ahora:
- Cuántas páginas hay y cómo se enlazan entre sí.
- Qué acción queremos que haga el visitante en cada una.
- La jerarquía de títulos, que después es la del buscador.
- El comportamiento en móvil, que no es «lo mismo pero estrecho».
Se puede dejar para el paso 3: los textos finos, las fotos definitivas y los detalles de animación. Esas cosas se afinan con el proyecto ya construido y a la vista, que es cuando mejor se juzgan.
Cómo funcionan las revisiones
Las revisiones de esta fase van incluidas, no facturadas aparte. La razón es práctica: si cada comentario cuesta dinero, la gente se calla, y un diseño aprobado a medias se paga mucho más caro en la fase siguiente.
Lo que pedimos a cambio es que las opiniones lleguen juntas y de quien decide. Tres rondas con el equipo completo avanzan más que quince comentarios sueltos.
Y después
Con el diseño aprobado pasamos al paso 3: se construye sobre una url de pruebas que puedes ver evolucionar, con seguimiento semanal.
Los wireframes y conceptos visuales son el paso 2 de cualquier proyecto de diseño de páginas web, y el mismo sistema de diseño se reutiliza después en las aplicaciones móviles y en el software a medida para empresas.
Preguntas frecuentes sobre wireframes y conceptos visuales
¿Qué diferencia hay entre un wireframe y un diseño?
El wireframe es el esqueleto en gris: qué va en cada sitio y por qué. El diseño es ese esqueleto ya con marca, color y tipografía. Separarlos permite discutir la estructura sin que el color distraiga.
¿Cuántas revisiones entran?
Las de esta fase van incluidas. No contamos rondas; lo que pedimos es que los comentarios lleguen agrupados y de quien toma la decisión final.
¿Puedo ver el diseño en el móvil antes de aprobarlo?
Sí, y conviene. Las pantallas clave se entregan en móvil y en escritorio, porque la mayoría de tus visitas van a llegar desde un teléfono.
Todavía no tengo textos ni fotos, ¿se puede avanzar?
Se puede empezar por los wireframes, que no dependen del contenido final. Para los conceptos visuales preferimos tener al menos los textos de las páginas principales, aunque sean un borrador.
¿El diseño es mío?
Sí. Los archivos de diseño y el sistema de componentes van dentro de la entrega, igual que el código del proyecto.
¿Respetáis mi manual de marca?
Si lo tienes, se respeta. Si no lo tienes, de esta fase sale lo mínimo para tenerlo: colores, tipografías y componentes definidos y reutilizables.
Contratar este paso
Diseñar: contrata solo esta fase
No hace falta contratar el proyecto entero. El paso 2 se puede contratar por separado e incluye los wireframes, los conceptos visuales sobre tus contenidos reales y el sistema de diseño.
- Alcance detallado en su ficha
- Presupuesto cerrado por escrito
- Lo lleva el mismo equipo de principio a fin
Hablemos
Cuéntanos dónde está tu negocio y dónde quieres que esté. Respondemos en un día laborable con un consejo honesto — y con un plan, si lo quieres.
El proceso completo
Paso 1 descubrir · paso 2 diseñar · paso 3 construir · paso 4 lanzar · paso 5 crecer.