UX · Wireframes

Wireframes esenciales

Estructuras mínimas para home, landing, ficha, contacto, blog y dashboard, pensadas para decidir qué va y qué no va antes de entrar en detalles visuales.

Qué buscamos con estos wireframes

No son diseños finales: son esqueletos que ayudan a tomar decisiones rápidas sobre jerarquía, bloques de contenido y llamadas a la acción.

Este módulo reúne layouts base para las páginas que más se repiten en proyectos: home, landing, ficha de servicio o producto, contacto, blog y dashboard. El objetivo es que puedas empezar desde un patrón en lugar de una pantalla en blanco.

Cada wireframe se entiende como:

  • Una forma de explicar la estructura a cliente, equipo o alumnado sin distracciones visuales.
  • Un punto de partida que luego puedes llevar a Figma, papel, pizarra o prototipo interactivo.
  • Una referencia rápida para mantener coherencia entre proyectos y sesiones de clase.

Páginas clave y su estructura base

Seis wireframes esenciales en formato texto, listos para reinterpretar en cualquier estilo de UI.

Home de sitio de servicios

Página principal pensada para dejar claro qué haces, para quién y qué pueden hacer a continuación.

HEADER (logo · navegación · CTA) HERO [Título principal] [Subtítulo corto] [Botón primario] [Botón secundario] [Imagen / Ilustración] BLOQUE 1 · SERVICIOS DESTACADOS [Tarjeta servicio 1] [Tarjeta servicio 2] [Tarjeta servicio 3] BLOQUE 2 · PROYECTOS / CASOS [Grid de 3–6 proyectos con imagen + título] BLOQUE 3 · TESTIMONIOS / CONFIANZA [Citas breves · logos de clientes] BLOQUE 4 · CTA FINAL [Título breve] [Botón "Pedir presupuesto" / "Contactar"] FOOTER

Landing de campaña

Pensada para una sola acción: descargar, registrarse o pedir información.

HEADER LIGERO (logo · enlace discreto a más info) HERO [Título orientado a beneficio] [Subtítulo que explica la propuesta] [Formulario corto / Botón principal] [Elementos de prueba social] SECCIÓN · BENEFICIOS [Icono + título + texto] [Icono + título + texto] [Icono + título + texto] SECCIÓN · CÓMO FUNCIONA [Paso 1] → [Paso 2] → [Paso 3] SECCIÓN · PREGUNTAS FRECUENTES [Acordeones 4–6 preguntas clave] BLOQUE FINAL · CTA ÚNICA [Recordatorio de beneficio] [Formulario / Botón principal] FOOTER MÍNIMO (legales, privacidad, contacto)

Ficha de servicio o producto

Útil para servicios profesionales, SaaS, productos físicos o packs.

HEADER BREADCRUMB (opcional) CABECERA DE FICHA [Título del servicio / producto] [Resumen corto / beneficio principal] [Precio / desde + botón principal] [Etiquetas: categoría, tipo, etc.] CUERPO COLUMNA IZQUIERDA [Sección: Descripción detallada] [Sección: Características clave] [Sección: Qué incluye / Qué no incluye] COLUMNA DERECHA [Módulo de reserva / compra / contacto rápido] [Listado breve de ventajas] [Garantías / políticas] SECCIÓN · TESTIMONIOS / CASOS RELACIONADOS SECCIÓN · SERVICIOS / PRODUCTOS RELACIONADOS FOOTER

Página de contacto

Para que la persona no se pierda entre mil opciones cuando solo quiere escribir o llamar.

HEADER HERO CONTACTO [Título claro: "Hablemos"] [Texto corto explicando cuándo y cómo respondes] BLOQUE PRINCIPAL COLUMNA IZQUIERDA [Formulario] - Nombre - Email - Asunto / motivo - Mensaje - Consentimiento de privacidad - Botón "Enviar" COLUMNA DERECHA [Datos de contacto directo] - Email - Teléfono - Horario [Mapa / ubicación (si aplica)] [Redes / otros canales] BLOQUE · PREGUNTAS FRECUENTES (opcional) FOOTER

Artículo de blog / recurso

Pensado para lectura cómoda y para que siempre haya un “qué hacer después”.

HEADER CABECERA DE ARTÍCULO [Breadcrumb] [Categoría] [Título del artículo] [Autor · fecha · tiempo de lectura] [Imagen destacada (opcional)] CUERPO [Contenido principal en columna central] [Citas destacadas / bloques resaltados] COLUMNA LATERAL (opc.) [Índice del contenido] [Artículos relacionados] BLOQUE FINAL [CTA: suscripción, contacto, descarga] [Listado de artículos relacionados / siguiente lectura] FOOTER

Dashboard sencillo

Panel para mostrar métricas clave, acciones rápidas y estado general.

HEADER (logo · navegación · usuario) BARRA LATERAL (opcional) [Navegación a secciones del panel] ZONA PRINCIPAL BLOQUE SUPERIOR [Tarjetas de métricas clave (3–4)] - Métrica 1 - Métrica 2 - Métrica 3 - Métrica 4 BLOQUE MEDIO [Gráfico principal / evolución] [Listado de actividad reciente] BLOQUE INFERIOR [Tabla / listado de items gestionables] [Acción rápida: botón "Crear / Añadir / Nueva tarea"] FOOTER (ligero, opcional)

Patrones de layout listos para copiar

Combinaciones de columnas y bloques que puedes reutilizar en distintas páginas para mantener coherencia visual.

Layout 1 · Hero + tres columnas

Ideal para presentar tres servicios o ventajas clave justo después del hero.

[HERO A UNA COLUMNA] Título Subtítulo Botones / CTA [SECCIÓN 3 COLUMNAS] [Tarjeta 1] [Tarjeta 2] [Tarjeta 3]

Layout 2 · Dos columnas asimétricas

Funciona bien para secciones de “quiénes somos” o “servicio en detalle”.

[SECCIÓN] [Columna izquierda · 40%] Título Texto Lista / bullets CTA [Columna derecha · 60%] Imagen / mockup / ilustración

Layout 3 · Grid de tarjetas

Para portfolios, listados de artículos, servicios o productos.

[SECCIÓN LISTADO] [Filtro / categorías (opcional)] [Grid de 2–3 columnas] [Tarjeta] Imagen / thumbnail Título Meta-info (fecha / categoría / precio) CTA pequeño

Layout 4 · Lista + detalle

Patrón típico de panel o página con mucho contenido filtrable.

[SECCIÓN PANEL] [Columna izquierda · 30%] Lista de items - Item 1 - Item 2 - Item 3 - ... [Columna derecha · 70%] Detalle del item seleccionado Título Contenido Acciones (editar, guardar, etc.)

Uso docente y práctico

Cómo trabajar estos wireframes

Estos wireframes están pensados para que puedas plantear rápidamente la estructura de una página sin entrar en colores, tipografías o componentes concretos. Funcionan bien tanto en docencia como en proyectos reales.

Algunas formas de usarlos:

  • Escoger un wireframe (por ejemplo, la landing) y pedir al equipo o al alumnado que lo aterrice en un caso real, manteniendo la estructura base.
  • Comparar una web existente con uno de estos patrones y detectar dónde está sobrecargada o dónde le falta contenido clave.
  • Utilizar los layouts como librería de patrones para mantener coherencia entre distintas páginas de un mismo proyecto.

Como en el resto de KIT UX UI: entra, copia, adapta a tu proyecto y, si te resulta útil, siéntete libre de mencionarlo en clase, documentación o portfolio.