¿Qué debo hacer para aprender a crear wireframes?

Answer 1

En primer lugar, ¿por qué quieres crear wireframes?

¿Eres un diseñador? ¿Un gerente de producto? ¿Un desarrollador? Responder a eso podría impactar la mejor manera para que aprendas la habilidad.

He estado usando varias herramientas desde hace algunos años como parte de las tareas de mi gerente de producto para aclarar las características y los requisitos con los clientes, diseñadores y desarrolladores. Los aprendí probando cosas y prestando mucha atención a los comentarios que recibí de mis partes interesadas en mis wireframes.

Personalmente, me gusta la simplicidad y el poder de usar la herramienta Lápiz. Incluso he creado un curso de Udemy sobre cómo usarlo. Para aquellos interesados, use el siguiente enlace para obtener un cupón de descuento para el curso: ¡Fundamentos de armado de alambre con la herramienta de lápiz gratis! Contiene consejos sobre más que los aspectos técnicos de wireframing, como por ejemplo, cómo hacer que su trabajo sea más efectivo y eficiente, cómo cablear para casos de uso específicos, etc.

Buena suerte,

Emir

Answer 2

He probado algunas de las herramientas en línea y sigo dando vueltas para simplemente hacerlas en Photoshop … o en realidad pongo un lápiz en un papel y lo dibujo, lo escaneo y le envío el boceto al cliente.

En cuanto a aprender a hacerlos … piense en cómo son los planos para la construcción de edificios o los planos de planta para los diseñadores de interiores. Esto es básicamente lo que estás haciendo para los sitios web. Los wireframes se utilizan para el diseño y la colocación de los elementos en la página antes de realizar cualquier diseño real. Algunas personas lo llevan un paso más allá y crean wireframes funcionales. Es decir, están codificados para que funcionen los menús y otras funciones. Si eres el tipo que codifica primero y diseña alrededor de eso, ese es un buen método. Personalmente, soy todo lo contrario, pero también hago un buen trabajo explicando la funcionalidad a un cliente o mostrando otros ejemplos que ayudan a explicar la funcionalidad. Esa es la segunda parte del cableado: poder explicárselo al cliente. ¿Por qué elegiste el diseño que hiciste y para colocar las cosas donde se colocan? ¿Cómo se relaciona todo con los objetivos del proyecto? ¿Cómo se conectarán las distintas áreas de contenido con el público objetivo?

Answer 3

Empieza a dibujar. Lluvia de ideas sobre el papel. Una vez que tenga una buena idea del diseño del contenido, puede descargar versiones de prueba del popular software wireframing y convertir sus bocetos en wireframes. El objetivo es tener en cuenta todo el contenido y las características, y no agregar detalles como el color, las imágenes o las fuentes que distraen a las personas del objetivo de la estructura alámbrica.

Answer 4

Los wireframes y las maquetas también son tan importantes en un proceso de diseño como un prototipo. Cuando un Wireframe se convierte en Mockup, representa una versión refinada y bien estructurada del diseño visual final con gráficos e imágenes.

Echa un vistazo aquí

Importancia de los wireframes y maquetas en el diseño de UI / UX

Answer 5

Dibuja tu idea en un pedazo de papel, esa sería la primera etapa de los marcos de alambre. Una vez hecho esto, si desea probar herramientas particulares, sugiera echar un vistazo a Balsamiq. También eche un vistazo al libro electrónico sobre cómo encuadrar su idea.

Answer 6

Hay muchas herramientas diferentes para esto.

Personalmente, me gusta Axure. Permite crear esquemas de conexión rápida que se pueden convertir rápidamente en prototipos de alta fidelidad que se pueden compartir fácilmente.

Answer 7

Los wireframes son tan simples como bocetos de baja fidelidad que demuestran el flujo de usuarios, así como las características propuestas para un sitio web. Hay un montón de constructores de estructuras de alambre gratis, mi favorito es gomockingbird.com, que permite la colaboración.

Cameron Chapman escribió una gran guía que creo que es una lectura obligatoria para cualquier persona interesada en diseñar para la web: http://sixrevisions.com/user-int …

Answer 8

Además de las otras respuestas aquí, he encontrado puntos de poder interactivos útiles en el pasado, sobre todo porque pueden ser fáciles de compartir con otros (en un entorno corporativo, al menos)

Answer 9

He estado usando Balsamichq desde siempre. Ahora uso la versión de Google Drive. Muy bueno para colaborar.