App Wireframing

Plantilla de wireframes de aplicaciones

Acomoda los elementos para crear la mejor versión de tu prototipo

Acerca de la plantilla de wireframes

¿Qué es un wireframe?

Wireframing es un método para diseñar un sitio web a nivel estructural. Un wireframe es una composición estilizada de una página web que muestra los elementos de la interfaz en cada página.

Wireframing es una forma rápida, económica y sencilla de iterar en páginas web. Puedes compartir el wireframe con clientes o compañeros de equipo y colaborar con interesados. Los wireframes permiten a los equipos conseguir la aprobación de los interesados sin invertir demasiado tiempo o recursos. Ayudan a garantizar que la estructura y el flujo de tu sitio web satisfagan las necesidades y expectativas del usuario.

Cuándo usar el wireframing

Los equipos usan el wireframing para hacer la composición de contenido y funcionalidad en la maqueta de una página. Después podrán hacer un mapa de las necesidades del usuario, sus recorridos y navegación en la página en sí. Muchos equipos usan wireframes en las primeras etapas del proceso de desarrollo para confirmar que la estructura fundamental de una página sea sólida antes de empezar a diseñar o agregar contenido. El objetivo del wireframing es dar a entender de forma general cómo se verá una página.

Crea tu propio wireframe

Es fácil hacer tu propio wireframe. La herramienta de pizarra Miro es el canvas perfecto para crearlos y compartirlos. Para empezar, selecciona la plantilla de wireframes y luego sigue estos pasos para crear una propia.

Paso 1: Sé claro respecto a tus objetivos. Antes de empezar el wireframing, haz algunas preguntas a tu equipo, por ejemplo: ¿qué esperamos lograr con la creación de este sitio web? ¿Qué queremos obtener de esta sesión de wireframing?

Paso 2: Piensa en la experiencia del usuario. Cuando el usuario interactúa con tu producto, hace un recorrido de una parte del sitio a la siguiente. Como diseñador de la experiencia del usuario, tu objetivo es que el recorrido sea lo más fácil y agradable posible. Piensa en las interacciones del usuario, no en las pantallas individuales. Diseña para lograr un buen flujo. Haz preguntas como "¿qué es importante en esta pantalla? ¿Cómo debe el usuario interactuar con eso?"

Paso 3: Intenta incluir contenido en las primeras etapas del proceso. Si usas contenido real, será más fácil decidir si el texto previsto encajará en el diseño. En general, el contenido real produce mejor feedback.

Paso 4: Anota. No asumas que tus wireframes hablan por sí mismos. Anota a medida que trabajas en el wireframe para que sea más fácil recibir feedback.

Recuerda que Miro cuenta con la integración con Adobe XD para que puedas dar, aún más, rienda suelta a tu imaginación.

Preguntas frecuentes sobre la plantilla de wireframe para apps

¿Cómo hago una plantilla de wireframe para una app?

Puedes hacer un wireframe de una aplicación móvil usando nuestra plantilla y personalizarla como mejor te parezca. Puedes usar el lienzo infinito de Miro para simular el flujo entre las pantallas de la aplicación y tener una excelente descripción general del diseño de la misma.

¿Qué debe incluir un wireframe de una app?

Una plantilla de wireframe de una aplicación debe contener la información básica sobre el flujo de las pantallas de la aplicación, así como también cómo debe elaborarse el diseño y dónde debe ubicarse el contenido. Hay algunos elementos que debe contener el wireframe de una app: logotipo, campos de búsqueda, encabezados, cuerpo del contenido, botones y pie de página.

¿Cuales son unos ejemplos de wireframes de app?

Hay tres tipos de wireframes de apps: baja fidelidad, media fidelidad y alta fidelidad. La diferencia entre estos ejemplos de wireframe de aplicaciones es el nivel de información detallada que contienen sobre su aplicación móvil.

Plantilla de wireframes de aplicaciones

Comienza ahora mismo con esta plantilla.

Plantillas similares
creative-brief-thumb-web
Vista previa

Plantilla de brief creativo

Ideal para:

Diseño, Márketing, Desk Research

Incluso los pensadores creativos (o, quizás, sobre todo los pensadores creativos) necesitan pautas claras para orientar sus ideas en direcciones productivas y aprovechables. Y un buen creativo establece esas pautas con información que incluye audiencias objetivo, metas a cumplir, plazos y presupuesto, así como el alcance y las especificaciones del proyecto en sí. Un brief creativo es la base de cualquier campaña de marketing o publicidad y el primer paso para crear sitios web, videos, anuncios, banners y mucho más. Normalmente, el brief se elabora antes de lanzar un proyecto; esta plantilla hará ese trabajo más fácil.

Plantilla de brief creativo
official-remote-5-day-design-sprint-web.png
Vista previa

Design Sprint de cinco días oficial

Ideal para:

Diseño, Desk Research, Sprint Planning

El objetivo de un Design Sprint es desarrollar y probar un prototipo en solo cinco días. Trabajarás con un equipo pequeño, ocuparás todo el tiempo y espacio disponible de una semana y avanzarás rápidamente del problema a la solución probada con una lista paso a paso verificada. Steph Cruchon de Design Sprint creó esta plantilla para Miro en colaboración con los gurus de sprints de diseño en Google. Esta plantilla de Design Sprint está diseñada específicamente para los sprints remotos de modo que puedas hacer sprints productivos y eficientes con colegas de todo el mundo.

Design Sprint de cinco días oficial
UML Communication Diagram
Vista previa

Plantilla de diagrama de comunicación UML

Ideal para:

Diagramas, Mapas, Desarrollo de producto

La mayoría de los programas modernos consisten en muchas partes móviles que funcionan con un conjunto preciso de instrucciones. Con un diagrama de comunicación, puedes visualizar exactamente cómo esas partes funcionan juntas, lo que te brinda una comprensión más clara de tu programa como un todo. Además, el diagrama deja espacios para expandir la red de relaciones a medida que tu producto crece y evoluciona. Un diagrama de comunicación es una herramienta vital en el arsenal de cualquier diseñador de software.

Plantilla de diagrama de comunicación UML
customer-journey-mapping-pack-thumb
Vista previa

Paquete de plantillas de mapeo de experiencia del cliente

Ideal para:

Mapas, Experiencia del usuario, Talleres

Un mapa de experiencia del cliente es una representación visual del recorrido del cliente. Permite capturar la ruta que sigue un cliente cuando compra un producto, se suscribe a un servicio o interactúa con el sitio web. La mayoría de los mapas incluyen una persona específica, describe la experiencia del cliente de principio a fin y captura los posibles altibajos emocionales de interactuar con el producto o servicio. Utiliza esta plantilla para crear fácilmente mapas de viaje del cliente para proyectos de todo tipo.

Paquete de plantillas de mapeo de experiencia del cliente
Project Charter Thumbnail
Vista previa

Plantilla de plan de proyecto

Ideal para:

Gestión de proyectos, Documentación, Planificación estratégica

Los gestores de proyecto se basan en los planes de proyecto como una fuente de verdad para obtener los detalles de un proyecto. Los planes de proyecto explican los objetivos básicos, el alcance, los miembros de equipo y más elementos involucrados en el proyecto. Para la gestión de proyectos organizada, los planes pueden resultar útiles porque alinean a todos en torno al entendimiento compartido de los objetivos, estrategias y entregas de un proyecto de cualquier alcance. Esta plantilla garantiza que documentes todos los aspectos de un proyecto para que todos los interesados se informen y estén en la misma página. Conoce siempre hacia dónde va tu proyecto, su propósito y su alcance.

Plantilla de plan de proyecto
timeline-thumb-web
Vista previa

Plantilla de línea del tiempo

Ideal para:

Gestión de proyectos, Diagramas de flujo, Planificación de proyecto

Una línea del tiempo muestra un orden cronológico de fechas importantes y eventos programados. Los cronogramas ayudan a los managers de productos, gerentes de proyectos y miembros del equipo a contar historias visuales sobre el progreso y los obstáculos. Las líneas del tiempo permiten a los equipos ver de un vistazo lo que sucedió antes, qué progreso está sucediendo ahora y qué se debe abordar en el futuro. Los proyectos o productos con un propósito o entregables específicos deben basarse en un cronograma para tener éxito. Utiliza la línea de tiempo como referencia compartida para las fechas de inicio, las fechas de finalización y los hitos.

Plantilla de línea del tiempo