Sitio web
Diseño de wireframe para sitio web de marketing
Un wireframe de marketing de Acme combina cinco regiones de página numeradas con una barra lateral de especificaciones, y muestra dónde las notas de diseño coinciden con el layout implementado o difieren de él.
Casos de uso del wireframe
- Planificación de landing pagesOrganiza las secciones de marketing antes de empezar el diseño visual o la producción de textos.
- Revisión de layout responsivoComprueba los cambios de escritorio a móvil con notas explícitas de puntos de ruptura.
- Traspaso de diseñoMantén juntas las decisiones estructurales y las indicaciones de implementación.
Aspectos destacados del traspaso con redlines
- Barra lateral redlineLos pines numerados conectan las regiones visibles con las filas de especificación correspondientes.
- Reglas responsivasEl comportamiento de cada punto de ruptura está escrito junto a la sección de página correspondiente.
- Estructura de baja fidelidadLos bloques neutros muestran la composición sin sugerir contenido final.
- Orden de lectura compartidoEl lienzo y las anotaciones siguen la misma secuencia numerada.
Cinco regiones de la página y sus notas de especificación
1 / 1
Landing page de marketing de Acme
El artefacto presenta “Acme · Marketing Landing” como un wireframe de escritorio de baja fidelidad con una capa redline. Su principal valor es la trazabilidad: el lienzo de la izquierda muestra la composición propuesta de la página, mientras que el panel de la derecha explica qué se espera de cada región numerada. Esto hace útil el diseño para debatir la estructura antes de definir recursos de marca, textos finales o comportamiento de producción.
La cabecera visible establece el contexto de trabajo con “WIREFRAME · REDLINE”, “DEVICE DESKTOP 1280”, “FIDELITY LOW” y “REV A”. Estas etiquetas presentan la captura como una especificación de diseño y no como una página de marketing terminada. La zona de dirección con estilo de navegador dice “acme.example / home”, lo que da a la página una ruta concreta sin verificar el servicio subyacente.
Lienzo
El área grande de la izquierda muestra el orden de la página: navegación, hero, prueba social, cuadrícula de funciones y pie de página.
Especificación
El panel de la derecha convierte esas regiones en notas concretas, como dimensiones, puntos de ruptura y alineación.
En qué ayuda este wireframe
Este diseño es adecuado para la planificación inicial, la crítica y el traspaso de una página de marketing. Ofrece al equipo un objeto compartido para decidir qué secciones pertenecen a la página y qué cambios responsivos requieren un acuerdo explícito. Como el contenido sigue siendo en su mayoría bloques neutros, quienes revisan pueden centrarse en la composición y las reglas, en lugar de confundir textos o imágenes provisionales con mensajes validados.
Planificar una landing page
Los cinco pines reservan las regiones de navegación, hero, franja de logotipos, cuadrícula de funciones y pie de página. El pie de página tiene cuatro columnas de barras provisionales, no enlaces funcionales ni una fila legal. La abstracción aclara el orden de las secciones y su peso relativo, pero no puede validar el texto final, la identidad de los socios ni el rendimiento de conversión.
Revisar la intención responsiva
La barra lateral propone ocultar los logotipos en móvil, una regla de 960px para la cuadrícula de funciones y un pie de página de dos columnas por debajo de 1000px. En cambio, el CSS real usa un único punto de ruptura a 1000px o menos: apila el contenedor, el hero y las funciones, hace estático el panel de anotaciones y cambia el pie de página a dos columnas. La franja de logotipos sigue visible. Estas diferencias convierten la página en un ejemplo de revisión de especificaciones, no en una prueba de que se implementaron todas las notas.
De la navegación superior al pie de página
La especificación usa una numeración uno a uno. El pin ① identifica la fila de navegación neutra; su comportamiento fijo de 64px y su condensación al desplazarse son una nota, no una navegación implementada. El pin ② identifica el texto y un marcador multimedia con una cruz. La cuadrícula real del hero es de 1fr/0.85fr, lo que da al texto algo más de ancho, pero el marcador tiene una altura mínima de 188px en lugar de una proporción 16:9 impuesta.
| Región | Intención escrita | Fuente real |
|---|---|---|
| Navegación | Fija, 64px, se condensa al desplazarse | Formas div estáticas; sin controlador de desplazamiento. |
| Contenido multimedia del hero | Espacio 16:9 | Ancho flexible, altura mínima de 188px; sin regla de proporción. |
| Franja de logotipos | Se oculta en móvil | Los cinco bloques provisionales siguen visibles. |
| Cuadrícula de funciones | Tres en fila a ≥960px; separación de 8px | Tres columnas por encima de 1000px; separación flex de 10px. |
| Pie de página | Cuatro columnas y fila legal | Cuatro columnas greybox; dos a ≤1000px; sin fila legal. |
Composición del hero
Las notas especifican un H1 de 48/56, un subtítulo de 18/28 y un par de acciones formado por un CTA principal y otro ghost. La captura muestra las barras de texto alineadas a la izquierda y los dos bloques de acción junto al gran marcador de imagen con cruz. Esta disposición hace legible el énfasis previsto, aunque la imagen de baja fidelidad no permite establecer cuál será el recurso visual final, el recorte o la interacción.
Prueba social, funciones y cierre
El pin ③ reserva cinco espacios neutros de logotipo con el mismo ancho, no socios con nombre ni verificados. El pin ④ coloca tres tarjetas de funciones en una fila de escritorio, con bloques de icono de 38px; su separación flex real es de 10px, pese a la anotación de 8px. El pin ⑤ reserva cuatro columnas de pie de página, pero ninguna fila legal. Los bloques repetidos hacen comparables las regiones y dejan sin resolver el contenido y el comportamiento finales.
Diseño visible y límites de capacidad
La navegación greybox y las formas de botón o de apariencia de enlace son divs sin comportamiento de clic ni de envío. El elemento fijo real es el panel de especificaciones de la derecha, que pasa a ser estático a 1000px o menos; la navegación no se fija ni se condensa. La dirección acme.example es texto del marco del navegador, no un destino. Las dimensiones de las anotaciones son requisitos de diseño que deben conciliarse con la implementación, no garantías de producción.
El nombre de muestra, la ruta y las cifras de la especificación son ilustrativos. El manifiesto incluido declara la autoría de OpenDesign y la licencia MIT, pero no concede licencia independiente para cada recurso representado. La captura muestra un wireframe y sus notas, no respaldos de socios, servicios conectados ni resultados de conversión.
Cómo crear un diseño de wireframe para sitio web de marketing en OpenDesign
Define la secuencia de la página
Empieza con una landing page de marketing al estilo Acme que incluya navegación superior, un hero de dos columnas, una banda de prueba social con cinco logotipos, una cuadrícula de tres tarjetas de funciones y un pie de página de varias columnas. Mantén la primera versión en baja fidelidad para que el espaciado y el orden sean fáciles de revisar.
Prompt sugeridoCrea un wireframe de baja fidelidad de una landing page de marketing titulado “Acme · Marketing Landing”. Usa una página con ancho máximo de 1320px, una barra lateral de anotaciones de 280px, una cuadrícula de hero de 1fr/0.85fr, pines numerados ①–⑤, un marcador de imagen con una cruz, cinco espacios neutros para logotipos, tres tarjetas de funciones y un pie de página de cuatro columnas. Asocia cada pin con una nota de especificación y distingue visiblemente los requisitos propuestos del CSS implementado. A 1000px o menos, apila la barra lateral, el hero y las funciones, y haz que el pie de página tenga dos columnas. Mantén inertes las formas de navegación y de CTA; no insinúes datos enviados ni servicios conectados.
Añade notas de layout específicas
Añade una fila de la barra lateral por cada región numerada. Registra por separado la altura de navegación propuesta, la escala tipográfica del hero, la combinación de CTA y la proporción del contenido multimedia, frente al CSS real. Indica explícitamente las diferencias sin resolver: las notas de 16:9 y 8px de la fuente no imponen una proporción ni coinciden con su separación de 10px entre funciones.
Revisa los estados responsivos
Compara el punto de ruptura real de 1000px con la regla de funciones de 960px de la anotación. Confirma que la barra lateral pasa a ser estática, que el hero y las tarjetas de funciones se apilan y que el pie de página pasa a dos columnas. Decide de forma explícita si se implementarán el ocultamiento de logotipos en móvil y la navegación fija que se condensa; ninguno existe en esta fuente.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño web para estudios de diseño de IA
El diseño web para estudios de diseño de IA de OpenDesign convierte el concepto de un estudio local-first en una landing page editorial que facilita consultar habilidades, experimentos y método.
Sitio web
Diseño de sitios web de infraestructura de IA
Un concepto de landing page de infraestructura de IA de estilo suave, con métricas de ejecución de ejemplo, tarjetas de funciones anidadas, movimiento sutil y una única invitación comercial.
Sitio web
Diseño de sitio web para recorridos nocturnos por Bianjing
Un recorrido nocturno interactivo por una Bianjing imaginada de la era Song, que combina una ciudad fluvial persistente, poesía, faroles y un ritmo de capítulos multilingüe.
Sitio web
Diseño de sitio web de revista brutalista
Diseño de sitio web de revista brutalista convierte una edición con forma de publicación impresa en un sistema web de lectura legible, combinando tipografía contundente con una estructura editorial medida.
Sitio web