jueves , 22 octubre 2020
Inicio / Blog / Wireframes ¿Qué son?

Wireframes ¿Qué son?

¿Qué es un Wireframe?

Un Wireframe o prototipo no es más que un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web, una aplicación movil o un proyecto de desarrollo web. El objetivo de estos es definir el contenido y la posición de los diversos bloques de tu web. Esto incluye menús de navegación, bloques de contenido, etc… Además, te permite como interactuarán estos elementos entre sí.

En los Wireframe no se utilizan ni colores, ni tipografías ni cualquier elemento gráfico. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos de la web.

Un Wireframe también se puede utilizar para crear la navegación primaria y secundaria garantizando que la estructura cumple con las expectativas de el interesado , así como los usuarios también pueden utilizarlo como un mecanismo de retro-alimentación en los primeros tests de usabilidad del prototipo.

Ventajas de Wireframe:

  • Por mucho, son mas fáciles de modificar que por ejemplo un diseño completamente realizado, ya que no llevan todo el proceso creativo y por lo tanto se ahorra tiempo en la definición de elementos básicos.
  • Desde una perspectiva práctica, los wireframes aseguran el contenido de la página y la funcionalidad, la posición correcta de cada elemento basándose en las necesidades de el usuario y las necesidades del negocio. A medida que avanza el proyecto puede ser utilizado como un buen diálogo entre los miembros del equipo de acuerdo a la visión y alcance del proyecto.

Desventajas de Wireframe:

  • Los wireframes no incluyen el diseño, no siempre es fácil para el cliente a comprender el concepto con elementos a blanco y negro.
  • El diseñador también tendrá que traducir los wireframes en un diseño, así que la comunicación para apoyarlo es a menudo necesaria para explicar por qué los elementos de la página se colocan en tal posición.
  • Además, cuando se agrega contenido, lo que inicialmente se muestra en espacios predefinidos puede no siempre ser el espacio final que ocupara la información, ya que esta podría ser demasiada para caber en el diseño del wireframe, por lo que el diseñador y redactor tendrá que trabajar estrechamente para hacer este ajuste.

Tal vez estas ideas te podrán ayudar a mejorar tu wirefames:

1.- Obtener inspiración: En esta pagina podrás consultar algunos ejemplos I ♥ wirefames

2.- Diseñar el proceso:  El diseño es un proceso orgánico y así diferentes diseñadores acercan wireframes y su traducción a imágenes o código de diferentes maneras. Tu tienes que encontrar el proceso que te dan tus propias fortalezas y con el que estás más cómodo. A continuación, un diagrama que muestra varios procesos típicos:

37signals es conocido por propugnar el uso de bocetos e ir directo al código, aunque parece que algunos de sus diseñadores involucran también maquetas visuales en su proceso.

3.- Escoge tus herramientas:

4.-  Utiliza plantillas

Acerca de Isaac Lemus

15 años de experiencia como consultor en implementación de soluciones en open source (software libre). En la actualidad estoy a cargo de la gestión de proyectos para la capacitación y servicios de implementación open source de la empresa Conocimiento Libre. Asi como sustento el cargo de la administración y editor en jefe del portal y medios sociales https://conocimientolibre.mx

Compruebe también

ps5

Todo sobre el PS5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *