Wireframe es el esqueleto de la interfaz. Antes que colores e imágenes, defina estructura y diseño. Esta guía le muestra cómo crear wireframes efectivos para aplicaciones móviles.
¿Qué es la estructura alámbrica?
Definición
Representación visual de baja fidelidad de la estructura de la interfaz.
Propósito
Céntrese en el diseño, la jerarquía y la funcionalidad.
Sin
Colores finales, imágenes reales, tipografía detallada.
¿Por qué crear estructuras alámbricas?
Velocidad
Rápido de crear e iterar.
Enfoque
En estructura, no en detalles visuales.
Comunicación
Alinear ideas con las partes interesadas.
Economía
Encuentre problemas antes del diseño final.
Validación
La prueba fluye temprano.
Tipos de estructura alámbrica
Baja fidelidad
Bocetos simples, bloques básicos.
Fidelidad media
Elementos más detallados y reconocibles.
Alta fidelidad
Próximo al look final, sin color.
Cuándo usar cada uno
Bajo para explorar, medio para validar, alto para especificar.
Elementos de estructura alámbrica
Contenedores
Cuadros que definen áreas.
Marcadores de posición
Representación de contenidos.
Navegación
Estructura de navegación.
Tipografía
Jerarquía de texto.
Botones/CTA
Elementos interactivos.
Anotaciones
Explicaciones del comportamiento.
Proceso de creación
Referencias
Analiza aplicaciones similares.
Lista de características
Lo que debe estar en la pantalla.
Bosquejo
Comience en papel.
###Digital
Cambie a la herramienta digital.
Iterar
Refinar con comentarios.
Estructuras metálicas de papel
Ventajas
Ultra rápido, sin curva de aprendizaje.
Materiales
Papel, bolígrafo, plantillas.
Cuándo utilizar
Exploración inicial, lluvia de ideas.
Limitaciones
Difícil de compartir digitalmente.
Herramientas digitales
figura
Componentes, rápidos, colaborativos.
Bosquejo
Sólo Mac, popular.
Balsamiq
Centrado en wireframes de baja fidelidad.
caprichoso
Rápido y hermoso.
###AdobeXD
Ecosistema de Adobe.
Componentes comunes
Encabezado
Logotipo, título, acciones.
Barra de pestañas
Navegación principal.
Tarjetas
Contenedores de contenido.
Listas
Artículos repetidos.
Formularios
Entradas y botones.
modales
Superposiciones.
Jerarquía visual
Tamaño
Más grande = más importante.
Posición
Arriba = más importante.
Contraste
Resalte los elementos clave.
Espaciado
Relacionado con el grupo.
Capacidad de respuesta
Móvil primero
Empieza por el más pequeño.
###Puntos de interrupción
Definir adaptaciones.
Priorización
¿Qué cabe en cada talla?
Estructura alámbrica versus maqueta
Estructura alámbrica
Estructura, sin aspecto final.
maqueta
Aspecto completo y estático.
Prototipo
Interactivo, navegable.
Secuencia
Estructura alámbrica → Maqueta → Prototipo.
Prueba de estructuras alámbricas
Pruebas de guerrilla
Pruebe rápidamente con cualquiera.
Haga clic en Pruebas
¿Dónde harían clic?
Comprensión
¿Entiendes la estructura?
###Comentarios
Recoger e incorporar.
Documentación
Anotaciones
Explicar conductas.
Flujos
Cómo se conectan las pantallas.
Estados
Vacío, error, cargando.
Traspaso
Para diseño visual.
Colaboración
Partes interesadas
Muéstralo antes de dibujar demasiado.
Desarrolladores
Comprender la estructura desde el principio.
###Revisar
Sesiones de retroalimentación.
Control de versiones
Cambiar la historia.
Errores comunes
Muy detallado
Estructura alámbrica convirtiéndose en maqueta.
Saltar paso
Vaya directamente a las imágenes.
Sin prueba
No validar con los usuarios.
Mucho tiempo
Gastar demasiado en la perfección.
Conclusión
Los wireframes son la base de un buen diseño. Defina la estructura antes de decorar, pruebe con antelación y repita rápidamente. El resultado son interfaces bien pensadas antes de invertir en diseño visual.
##Preguntas frecuentes
1) ¿Necesito una estructura alámbrica para cada proyecto? Para proyectos importantes, sí. Acelera y reduce el retrabajo.
2) ¿Qué nivel de fidelidad utilizar? Bajo para explorar, medio en la mayoría de los casos.
3) ¿El cliente necesita aprobar la estructura alámbrica? Sí. Antes de invertir en diseño visual.
4) ¿La estructura alámbrica reemplaza al prototipo? No. Wireframe es estructura, interacción de pruebas de prototipo.
5) ¿Cuánto tiempo dedicar a los wireframes? Suficiente para validar la estructura. No perfecciones demasiado.
Lea también
- Flujo de navegación de la aplicación: cómo diseñar viajes intuitivos
- Microinteracciones en Apps: Guía Completa
- Diseño centrado en el usuario: Guía completa de UCD
- Diseño de interacción: Guía para experiencias digitales intuitivas
- Flujo de navegación de la aplicación: herramientas en la vida cotidiana
- Flujo de navegación de la aplicación: herramientas para escalar