Por un aprendizaje abierto, donde todos, somos los protagonistas del conocimiento

¿Que son los Wireframes?

2 comentarios

Al leer el título anterior nos puede surgir la duda sobre qué es esto, para que sirve,etc. Un Wireframe  es una guía visual que representa un bosquejo o un borrador de los elementos que pueden tener nuestros sitios web, al igual que las funcionalidades que cumplen, sin tener en cuenta, colores, estilos, ni lenguajes de programación. El uso de esta herramienta, nos permite dar un paso importante en cualquier proceso de diseño de nuestras interfaces y primordialmente, permite la definición de la jerarquía de información del diseño haciendo más fácil la planificación, permitiéndonos ahorrar tiempo ya que esta unifica conceptos principales en la creación de una página web sin entrar en el detalle de contenido o funcionalidad.


Se puede comparar con los planos arquitectónicos de una construcción que son necesarios antes de realizar la obra. A un nivel más avanzado los wireframes pueden ser útiles para diseñar como el usuario interactúa con la interfaz; por ejemplo a través del uso de menús, botones, etc. Los wireframes pueden ser creados en diferentes medios, ya sea usando un bosquejo elaborado en una hoja de papel, en un tablero o través de herramientas tecnológicas disponibles comercialmente y  sumado a eso su nivel de contenido puede variar.

El usuario del sitio web es un factor importante a tener en cuenta al momento de desarrollar un proyecto y qué mejor forma de hacerlo de una manera sencilla y clara, donde él pueda dar sus puntos de vista de manera objetiva y no encuentren ningún elemento distractor o técnico que lo saquen de contexto. Aquí es donde aparecen las alternativas tecnológicas  para que logremos hacer nuestras creaciones y compartirlas.

Los wireframes generalmente incluyen las siguientes características:
  • Inventario de contenido.
  • Elementos cómo: cabeceras, enlaces, listas, imágenes, formularios, etc.
  • Vínculos, títulos, etc.
  • Layout o plantilla
  • Notas que nos indiquen el comportamiento de algunos elementos.|
La siguiente tabla muestra el esquema que un wireframe generalmente contiene:


Entendiendo los elementos fundamentales de lo que es un wireframe, existen numerosas aplicaciones disponibles comercialmente en internet, gratis o pagas. A continuación mencionare algunas:

IPLOTZ

Con iPlotz puedes crear Wireframes que sean funcionales al hacer click en un enlace navegable para crear la experiencia de un sitio web real o aplicación de software. También puedes invitar a otros a comentar sobre los diseños, y una vez lista, puedes gestionar las tareas para que los desarrolladores y diseñadores creen el proyecto. Para su descarga podemos acceder al siguiente link http://iplotz.com/ o trabajo online.

CACOO

Una herramienta sencilla que encontramos en la chromestore y nos permite desarrollar nuestros proyectos en línea y disponer de ellos en cualquier parte sin tener en cuenta una plataforma. Podemos desarrollar diagramas uml, prototipos de pantalla de aplicaciones y un punto a favor es que está muy marcado al trabajo colaborativo.

PIDOCO

Esta herramienta, se basa en el trabajo colaborativo en la nube y en tiempo real, con el fin de lograr crear web interactivas y prototipos de software,  probarlos, discutirlos y optimizarlos. Podemos hacer uso de esta plataforma durante 30 días y si reúne nuestras exigencias, pagar para hacer uso completo del servicio. Para mayor información podemos acceder al enlace https://pidoco.com/en

POP

Los wireframes abarcan otras plataformas como las móviles, en este caso encontramos esta aplicación de fácil uso y descarga gratuita en la app store  o la google play store. Por medio de esta herramienta, podemos hacer nuestros prototipos en lápiz y sacando una fotografía con el móvil, podemos ir agregando las funcionalidades a nuestro prototipo. Podemos acceder para obtener información adicional en la siguiente página https://popapp.in/.


En conclusión los wireframes on útiles para el diseño de una página y pueden ser tan simples como un bosquejo en una hoja de papel o más complejos con las ayudas de herramientas disponibles en el campo tecnológico.

La imagen de la portada hace parte de la base de datos de wikipedia y contiene la licencia "Creactive Commons" compartir con modificaciones. Agradecimientos a este sitio web por el uso de su imagen http://commons.wikimedia.org/wiki/File:Wireframes.png


2 comentarios :

  1. Respuestas
    1. Gracias compañera...Estamos para aprender y compartir entre todos por este medio. Ha sido una actividad bastante enriquecedora, asi que esto puede despertar nuestra ganas de compartir nuestras ideas.

      Borrar