Una guía completa para el wireframing en el desarrollo de productos
Publicado: 2018-04-13Un proyecto de desarrollo web tiene mucho en común con la construcción de una casa. Cuando construyes una casa, naturalmente eliges a la mejor persona que puede hacer este trabajo. Querría a alguien con la experiencia, un conocimiento profundo y querría asegurarse de que el constructor tenga el proceso correcto para hacer el trabajo dentro del tiempo prescrito y dentro de un presupuesto sancionado. ¿Qué te hace estar seguro de esto? Un plano, ¿verdad? Bueno, en el campo del desarrollo web es el wireframing.
Tabla de contenido
¿Qué es el wireframe?
En palabras simples, el wireframing es una ilustración de una página web. Un wireframe es un diseño de una página web que articula qué tipo de elementos de la interfaz encontrarán un lugar en las páginas importantes. Es una parte importante del proceso de diseño de interacción.
El objetivo principal del wireframing es ofrecer una comprensión visual de una página en la etapa más temprana de un proyecto para obtener la aprobación de todas las partes interesadas y miembros de un equipo de proyecto. Los wireframes también se utilizan para crear la navegación global y secundaria para garantizar que la terminología y la estructura incorporadas en el sitio cumplan con las expectativas del usuario.
¿La diferencia entre wireframes, maquetas y prototipos?
Estructura alámbrica
Un wireframe es como un esqueleto o una estructura básica de un sitio. Wireframing está más preocupado por la funcionalidad. Por ejemplo, una estructura alámbrica de un sitio o una aplicación representará la navegación, los botones principales, las columnas, etc. Se puede equiparar con un plano de un diseño arquitectónico.
Bosquejo
Las maquetas, por otro lado, son representaciones más realistas de productos. A diferencia de una maqueta de estructura metálica, se centra en los detalles. Se cuidan todos los aspectos como colores, fuentes, iconos, gráficos e imágenes.
Prototipo
Los prototipos ofrecen una representación visual de alta fidelidad de su proyecto. Puede pensar en un prototipo como una valiosa adición a una maqueta. El prototipo, como sugiere su nombre, muestra exactamente cómo se verá el producto. La creación de prototipos implica conectar su estructura alámbrica, conectar botones a sus respectivas páginas de destino, capas de menús desplegables, etc.
Para simplificarlo aún más, estas son todas las etapas del proceso de diseño de productos, comenzando desde el boceto (la fase primaria más simple del diseño: dibujo a mano) y terminando con la creación de un prototipo.
Wireframing para una aplicación móvil
El wireframing para una aplicación móvil ofrece beneficios similares a los de un sitio web. Da una idea clara de cómo se verá una aplicación y cómo funcionará. A nadie le gusta comprar una idea vaga. Wireframing ofrece una gran facilidad durante la transición del proyecto. También reduce el costo total del desarrollo del producto, ya que se pueden realizar cambios en una etapa temprana.
Una cosa importante a tener en cuenta al realizar el wireframing para una aplicación móvil es considerar la plataforma (iOS o Android) en la que lanzará su producto. 
Cosas importantes a tener en cuenta al hacer wireframes
Al crear wireframes, es importante tener en cuenta que son solo guías sobre dónde aparecerán en la página el contenido principal y los elementos de navegación de su sitio. Como el objetivo de la ilustración no es representar un diseño visual, siempre es preferible mantenerlo simple. Ahorra tiempo y esfuerzos. Aquí hay algunos consejos que serán útiles durante el wireframing:
- Comience con wireframes simples y de baja fidelidad.
- Evite el uso de colores. Es posible que desee ceñirse a la escala de grises para representar la diferencia.
- No hay necesidad de usar imágenes. Simplemente use una forma geométrica en lugar de imágenes para ofrecer una idea general.
- Use una fuente genérica y manténgala igual durante la estructuración. La tipografía no es una parte esencial del proceso.
- No hay necesidad de estructurar todas y cada una de las páginas.
Wireframing es un procedimiento de pensar a través de problemas y especificar interfaces. Recuerde, al igual que otras formas de un proceso de desarrollo, el wireframing puede tener sus peligros si no se realiza correctamente.
Elementos esenciales ejemplificados en wireframes
Los elementos del wireframing dependen en gran medida del tipo de sitio que desea construir, los requisitos del cliente, entre otras cosas. Sin embargo, hay ciertos elementos que a menudo se incorporan como elementos de estructura de alambre estándar, como encabezado, pie de página, logotipo, campo de búsqueda, sistemas de navegación, contenido del cuerpo, botones para compartir, migas de pan.
Tipos de estructuras alámbricas
Los wireframes pueden diferir de sus procesos de producción (bocetos en papel frente a imágenes dibujadas por computadora) en la cantidad de detalles que contienen. Los dos términos ampliamente utilizados para denotar la producción de wireframing son: wireframes de baja y alta fidelidad.
- Wireframes de baja fidelidad : son fáciles y rápidos de desarrollar. Ayudan a facilitar la comunicación del equipo. A menudo, los wireframes de baja fidelidad contienen imágenes simples, texto lorem ipsum como relleno.
- Wireframes de alta fidelidad : son más adecuados para la documentación debido a su mayor nivel de detalle. Estos esquemas contienen información sobre cada elemento pequeño de la página.
¿Por qué creamos wireframes?
Aquí hay algunos beneficios significativos del wireframing:
- Wireframing juega un papel fundamental en la comunicación durante el desarrollo web o de aplicaciones. Ofrece una oportunidad a todas las partes interesadas; clientes, desarrolladores, diseñadores para visualizar y obtener una imagen clara de la estructura del sitio web.
- Es más fácil comunicar y transmitir sus ideas con wireframes.
- Los wireframes agregan claridad a los proyectos, también le permiten trabajar a través de todas las interacciones y necesidades de diseño.
- Wireframing hace que el diseño de desarrollo de contenido sea amigable.
- Los wireframes hacen que el cliente piense en sus requisitos y lo ayuda a definir los objetivos de su proyecto y su enfoque principal.
- Ayuda a recopilar comentarios sobre su producto en una etapa muy temprana.
- Los wireframes permiten a los diseñadores crear diseños para muchas secciones del sitio web, lo que conduce a un proceso creativo más fluido.
Pasos importantes en el proceso de wireframing
Algunos pasos importantes a seguir durante el wireframing incluyen:
- Investigación : una pequeña idea sobre cómo otros diseñadores están haciendo wireframes lo ayudará mucho a encontrar una inspiración.
- Seleccione su herramienta : hay varias herramientas disponibles para crear wireframes. Puede elegir uno según su conveniencia.
- Configure una cuadrícula : hay varias plantillas de cuadrícula disponibles para su descarga gratuita, incluso puede personalizar su propia plantilla de cuadrícula con la ayuda de Telerik, UI-grid, etc.
- Determine un diseño : establezca cuadros, agregue contenido si está disponible, involucre a su cliente en esta etapa para comunicar las discrepancias, si las hubiera.
- Conviértelo en un prototipo.
Algunas herramientas populares para crear wireframes
No importa qué tipo de wireframing esté buscando, baja o alta fidelidad, el uso de herramientas de wireframing lo ayuda a ser más profesional y trabajar de una manera más priorizada y organizada. Aquí está la lista de siete herramientas de wireframing que puede usar de manera efectiva:
- Balsamiq
- Flujo simulado
- InVison
- Estructura alámbrica.cc
- CalienteGloo
- pidoco
- axura
Wireframing es una de las habilidades esenciales para adquirir como desarrollador de productos. Para convertirse en un gerente de producto exitoso, debe poseer un enfoque holístico hacia la estructuración de cables y otras habilidades de desarrollo de productos, que es la base para comprender los fundamentos del diseño de productos. Sin duda, esta será su puerta de entrada a una carrera próspera en el desarrollo de productos.
Estudie cursos de gestión de productos en línea de las mejores universidades del mundo. Obtenga programas de maestría, PGP ejecutivo o certificado avanzado para acelerar su carrera.
