Archivo | ux RSS for this section

Wireframes, estructurando las bases proyectos

Hoy hablaré sobre una de las cosas que más realizo en mi día a día y que se van volviendo tanto una rutina, que muchas veces le vamos restando su importancia … Los wireframes

Primero comenzaré definiendo que un wireframe  y complementando con Nielsen, es una técnica de bajo costo que consiste en realizar un prototipo rápido de poca calidad gráfica (puede realizarse en papel o en algún software), que brinda insights tempranos en usabilidad y diseño.

Dicho de otra forma más sencilla de entender, un wireframe es una aproximación a lo que queremos que sea el resultado final del proyecto, sin entrar mucho en detalles gráficos.

En el desarrollo de cualquier proyecto como una aplicación móvil, un sitio web, un aplicativo multimedia, entre otros, los wireframes se convierten en la solución ideal para lograr un punto estratégico de comunicación entre el arquitecto de información o ux que es quien organiza la estructura del proyecto, con los ingenieros, estrategas y diseñadores que son quienes desarrollarán las siguientes etapas del mismo.

Son elementos fundamentales en etapas previas de los proyectos digitales, pueden evitar cambios o reprocesos que implican costos y retrasos en etapas futuras. Sirven además para realizar pruebas con usuarios internos o finales y realizar mejoras antes de comenzar la implementación.

Algunos puntos fundamentales a tener en cuenta en la realización de los wireframes:

  • Deben realizarse a mano o si se desarrollan de forma digital deben ser en escala de grises, con el fin de no desviar la atención ni sesgar el concepto gráfico del diseñador.
  • Acompañar las pantallas con notas que indiquen elementos destacados a tener en cuenta.
  • Son el resultado final luego de un proceso largo de levantamiento de requisitos con el cliente e investigación de referentes y competencia en el mercado.
  • Para llegar a él debemos haber pasado por un largo proceso de estructuración y estrategia con el cliente.
  • Debemos evitar elementos gráficos que puedan distraer el objetivo puntual del mismo que es distribuir contenido. Evitar usar diseños, imágenes reales y demás.
  • Se recomienda siempre comenzar los bosquejos o mockups a mano para luego pasar a hacerlos más detalladamente en algún programa.
  • Se recomienda incluir notas explicativas para facilitar la labor del ingeniero y diseñador.
  • Representar cada zona, botón, formulario y demás de la forma más detallada como hipervínculos y demás
  • Normalmente siempre se comienza con el home del sitio web, siendo la página más relevante en sitios tradicionales. En caso que sea un ecommerce, se recomienda entregar WF de home + página de producto o categoría

Tipos de Wireframes

  • Para sitios web: existen de alta y baja calidad y depende de la etapa del proceso del sitio donde nos encontremos.
  • Para APPS: no se basan tanto en páginas como tal, sino en procesos dentro de la app, se diseña por pantalla y se debe especificar muy bien que hace cada elemento. Debemos tener en cuenta sistema operativo, será nativa? para qué sistema operativoo va?
  • Sitio móvil: si es únicamente para versión m.sitioweb, debemos acomodar nuevamente pensando en tamaños de pantallas desde la más pequeña de Android hasta la más grande del mercado.
  • Responsive: fundamental categorizar de mayor a menor importancia elementos a ser mostrados, se debe acomodar todo dentro de contenedores que se vayan moviendo de acuerdo a la necesidad de la pantalla.

Realizan wireframes para sus proyectos? Qué tipo de proyectos y qué herramientas usan? Recibo sus comentarios!