App WireframingApp 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
lotus-diagram-thumb-weblotus-diagram-thumb-web
Vista previa

Plantilla de diagrama de loto

Hasta las personas más creativas pueden necesitar ayuda ocasional para pensar creativamente, para ver las cosas bajo una luz diferente y generar ideas brillantes. Un diagrama de loto les dará nueva inspiración y te permitirá a ti organizar sesiones de lluvia de ideas más fluidas y eficaces. Esta técnica de creatividad permite explorar ideas colocando la idea principal en el centro del diagrama y los conceptos auxiliares en los recuadros circundantes. Esta plantilla te ofrece una forma fácil de crear diagramas de loto para lluvias de ideas, además de un canvas infinito para las ideas interminables que se generen.

Plantilla de diagrama de loto
Gantt Chart ThumbnailGantt Chart Thumbnail
Vista previa

Plantilla de diagrama de Gantt

Simplicidad, claridad y potencia: eso es lo que hace que el diagrama de Gantt sea tan popular para organizar y mostrar un plan de proyecto. Este diagrama, construido sobre una barra horizontal que representa el progreso del proyecto, desglosa los proyectos por tarea permitiendo que todo el equipo pueda ver el estado de las tareas, las personas a cargo de cada tarea y el tiempo que demandará completarlas. Los diagramas de Gantt también pueden compartirse fácilmente entre los miembros del equipo y los interesados, por lo que es una gran herramienta de colaboración.

Plantilla de diagrama de Gantt
aws-chef-automate-architecture-thumbaws-chef-automate-architecture-thumb
Vista previa

Plantilla de arquitectura de AWS Chef Automate

La plantilla de arquitectura de AWS Chef Automate es una representación visual del marco de trabajo de AWS Chef. Realiza un seguimiento de tus soluciones en la nube fácilmente y automatiza las tareas operativas a escala como nunca antes.

Plantilla de arquitectura de AWS Chef Automate
2×2 Prioritization Matrix-thumb2×2 Prioritization Matrix-thumb
Vista previa

Plantilla de matriz de prioridades de 2x2

¿Estás listo para establecer límites, priorizar tus tareas y determinar qué características, soluciones y actualizaciones debes resolver luego? La matriz de priorización de 2x2 es un lugar excelente para comenzar. Basado en el enfoque de priorización ligero, esta plantilla faculta a los equipos con una forma rápida y eficiente de saber qué es realista lograr y qué es crucial separar para alcanzar el éxito (frente a lo que es simplemente agradable tener). Y adivina qué: hacer tu propia matriz de priorización de 2x2 es fácil.

Plantilla de matriz de prioridades de 2x2
six-thinking-hats-thumbsix-thinking-hats-thumb
Vista previa

Plantilla de seis sombreros para pensar

Los seis sombreros para pensar del Dr. Edward de Bono fueron creados como una alternativa a la discusión, están diseñados para ayudar a los equipos a explorar y desarrollar ideas en colaboración. Utiliza esta plantilla para impulsar el pensamiento creativo y obtener diferentes perspectivas para que tu y tu equipo podáis tomar decisiones mejor enfundadas.

Plantilla de seis sombreros para pensar
low-fidelity-prototype-thumb-weblow-fidelity-prototype-thumb-web
Vista previa

Plantilla de prototipo de baja fidelidad

Los prototipos de baja fidelidad sirven como visiones iniciales prácticas de tu producto o servicio. Estos prototipos simples solo comparten algunas características con el producto final. Son ideales para probar conceptos amplios y validar ideas. Los prototipos de baja fidelidad ayudan a los equipos de producto y UX a estudiar el producto o la funcionalidad del servicio al concentrarse en la iteración rápida y las pruebas de usuario para dar forma a los diseños futuros. Al centrarte en esbozar y trazar un mapa de contenido, menús y flujo de usuarios, los diseñadores y los no diseñadores pueden participar del proceso de diseño e ideación. En lugar de producir pantallas interactivas vinculadas, los prototipos de baja fidelidad se centran en ideas sobre las necesidades del usuario, la visión del diseñador y la alineación de los objetivos de los interesados.

Plantilla de prototipo de baja fidelidad