PINGDOM_CANARY_STRING
Cómo hacer un wireframe

Cómo hacer un wireframe en Lucidchart

Tiempo de lectura: aproximadamente 6 min

Publicado por: Lucid Content Team

Tú no eres un creador de wireframes, pero necesitas un wireframe. Solo algo sencillo para mostrarle al desarrollador web tus ideas. Un wireframe dibujado a mano no te servirá, ya que no tienes dotes de artista, pero tampoco tienes el tiempo para aprender los aspectos del software complicado para crear wireframes.

Con Lucidchart, puedes crear y compartir rápidamente wireframes y prototipos en línea, independientemente de la experiencia que tengas como diseñador. Si bien los diseñadores de experiencias de usuario (UX) probablemente necesitarán una herramienta más sofisticada, Lucidchart es la solución perfecta para quienes no son diseñadores. Crea wireframes y prototipos refinados para expresar tus ideas de manera más precisa a los desarrolladores web y diseñadores de UX.

¿Lo mejor de todo? ¡Es completamente gratis!

Cómo hacer un wireframe en Lucidchart

Con Lucidchart puedes crear wireframes y prototipos para sitios web y dispositivos móviles. Los prototipos son modelos visuales de lo que planeas crear. Lucen muy parecidos al producto final, pero no tienen la misma funcionalidad. Por otra parte, los wireframes se centran más en simular la funcionalidad y menos en demostrar la forma.

Ambos tipos de diagrama son útiles cuando se consideran las propiedades de la UI/UX; aprovecharás al máximo tus wireframes y prototipos si los usas en conjunto. Esta guía te enseña a crear wireframes en Lucidchart a partir de plantillas o desde cero.

Ahorra tiempo con las plantillas de wireframe

Ya sea que no sepas de creación de wireframes o que desees ahorrar tiempo, empezar con una plantilla es excelente opción. Gracias a las sencillas figuras que ya están rellenas, las plantillas te evitan los aspectos básicos y tú solo debes agregar contenido. Lucidchart ofrece diversas plantillas de wireframe, que abarcan desde páginas de inicio de sitios web hasta aplicaciones móviles.

Para abrir la biblioteca de plantillas de Lucidchart, ve a tu biblioteca de documentos y haz clic en la flecha al lado de "+Documento". Desplázate por las categorías a la izquierda hasta aque encuentres la sección de wireframes.

Haz clic en una plantilla para leer información sobre ella y cuando encuentres una que sea ideal para tus necesidades, haz clic en “Crear Documento”. (O bien, haz doble clic en una plantilla para abrir un documento nuevo.) Una vez que elijas una plantilla, sigue con el paso tres a continuación.

Para obtener información sobre cómo usar las plantillas de wireframes de Lucidchart, mira nuestro video tutorial.

Ejemplo de wireframe básico de página de inicio
Plantilla de wireframe de página de inicio (haz clic en la imagen para verla más grande en Lucidchart)

¿Prefieres empezar desde cero? Sigue esta guía paso a paso para crear tu propio wireframe con Lucidchart.

1. Selecciona tu biblioteca de figuras

Antes de crear tu wireframe, debes preparar tu espacio de trabajo anclando a la barra de herramientas las bibliotecas de figuras que necesitarás. Con un documento en blanco en el editor de Lucidchart, presiona “M” para abrir las bibliotecas de figuras. Selecciona las que te gustaría usar y haz clic en “Guardar”.

Dependiendo de tu proyecto, es posible que quieras aprovechar diversas bibliotecas. He aquí algunas para que las consideres:

  • Figuras para diagramas de flujo: estas figuras geométricas estándar ya están ancladas en tu barra de herramientas. Te será útil tenerlas a la mano. Usa rectángulos para dividir un sitio web en secciones, o flechas para ilustrar el flujo de uno a otro elemento de la interfaz de usuario (UI).
  • Prototipos de UI: esta biblioteca de figuras proporciona la disposición estándar de los contenedores y widgets de la UI. Encontrarás figuras para sitios web en blanco, así como marcadores de posición de videos, mapas, gráficos, imágenes y calendario.
  • Prototipos para Android: si crearás una aplicación o una página para un dispositivo Android, aquí es donde debes buscar para encontrar teléfonos y tabletas Android, así como diálogos e íconos específicos de ese sistema operativo.
  • Prototipos para iOS: si trabajas con iPhones y iPads, los encontrarás en la biblioteca de figuras de iOS junto con los componentes de UI específicos de iOS.
  • Imágenes: no olvides la galería de imágenes. Ya sea que necesites un fondo elegante o un logotipo específico, puedes buscarlo y agregarlo directamente desde Lucidchart.

Este prototipo se armó utilizando una combinación de figuras de diagrama de flujo básicas, imágenes y la biblioteca de figuras de prototipos de UI.

Cómo crear un prototipo

2. Agrega figuras al diagrama de tu wireframe

Comienza tu wireframe con la figura más básica: el contenedor que alojará a todos los demás elementos. Dependiendo del carácter de tu diseño, este probablemente será la silueta de un dispositivo móvil o la ventana de un navegador. Lo anterior lo encontrarás en las bibliotecas de figuras de “Dispositivos iOS” y “Dispositivos Android”. Para ver ventanas de navegador, ve a la biblioteca de“Contenedores de UI”.

A medida que agregas elementos, pasa de lo general a lo específico, colocando los elementos de diseño más grandes antes de pasar a los pequeños detalles. Usa contenedores para crear secciones dentro de tu diagrama; estos pueden representar herramientas, menus laterales, etc.

Una vez que hayas colocado los elementos más grandes, empieza a agregar botones individuales y bloques de texto. Y por último, edita detalles de diseño específicos, tales como fuentes, colores, fotografías y logotipos.

3. Usa enlaces, capas y áreas de acción para agregar funcionalidad

Al terminar de diseñar tu wireframe, simula funciones del sitio web usando enlaces, capas y áreas de acción. Estas tres funciones te permiten crear botones que realmente funcionan, crear mensajes emergentes, vincular a contenido externo y desplazarte de una página a otra de un wireframe. ¡Haz la prueba en el siguiente diagrama interactivo!

Conoce más sobre enlaces, capas y áreas de acción.

4. Elabora el mapa del flujo del recorrido del usuario con prototipos

Los flujos del recorrido del usuario muestran la secuencia de un usuario interactuando con una aplicación. Estos se pueden enfocar en la experiencia del usuario con la interfaz front-end o la infraestructura back-end creada por el desarrollador. En lugar de bosquejar el flujo de un usuario empleando solo figuras de diagrama de flujo, intenta incluir prototipos a fin de que los integrantes de tu equipo se den una idea de cómo lucirá la aplicación.

ejemplo de Wireflow de una aplicación bancaria
Plantilla de wireflow de una aplicación bancaria (haz clic en la imagen para verla más grande en Lucidchar)

5. Publica, comparte o presenta

La creación de prototipos y wireframes puede requerir mucho tiempo y dedicación. Cuando termines, puedes mostrar tu arduo trabajo de varias maneras:

  • Usa el modo de presentación de Lucidchart para simular un sitio web activo. Las áreas de acción y los enlaces lucirán y se comportarán como botones y mensajes emergentes reales.
  • Inserta un diagrama dinámico en tu sitio web. A medida que actualizas tu documento de Lucidchart, los cambios se reflejarán donde sea que hayas insertado tu documento.
  • Publica tu wireframe como un PDF o un sitio web. Cualquier persona que cuente con la URL podrá ver e interactuar con tu diagrama.
  • Comparte un enlace a tu documento con tus colaboradores. Puedes solicitarles su opinión sobre tu diseño y plantearles preguntas a manera de que dejen comentarios.

¿Tienes experiencia en la creación de wireframes? Déjanos tus mejores consejos y trucos en el espacio para comentarios a continuación.

Empieza a crear diagramas con Lucidchart hoy mismo, ¡pruébalo gratis!

Regístrate gratis

Popular ahora

what does HR do

¿De qué se ocupa Recursos Humanos? 11 responsabilidades clave

Acerca de Lucidchart

Lucidchart es la aplicación de diagramación inteligente que permite a los equipos aclarar la complejidad, alinear sus conocimientos y construir el futuro... más rápido. Con esta solución intuitiva basada en la nube, todos pueden trabajar gráficamente y colaborar en tiempo real mientras crean diagramas de flujo, prototipos, diagramas UML y mucho más.

Lucidchart, la alternativa en línea para Visio más popular, es utilizado en más de 180 países por millones de usuarios, desde gerentes de ventas que mapean las organizaciones objetivo hasta directores de TI que visualizan su infraestructura de red.

Empezar ahora

  • Precios
  • Individual
  • Equipo
  • Corporativo
  • Comunícate con Ventas
Español
PrivacidadLegal
Descargar en Apple App StoreDescargar en Google Play Store
© 2022 Lucid Software Inc.