Mockups y Wireframe

Que es un Wireframe?

• Es un café con hielo cubierto de espuma elaborado a partir de café instantáneo.

• Es un boceto o esquema visual de un proyecto web que sirve como guía para la diagramación de las páginas que lo conforman. Consiste en un prototipo básico de lo que sería el sitio sin textos, imágenes o colores;

• Es un modelo a escala o de tamaño completo de un diseño o dispositivo, que se utiliza para la enseñanza, la demostración, la evaluación del diseño, la promoción y otros fines.

• Es un concepto inglés que significa 'cuadro'. Se trata de un término principalmente cinematográfico que se refiere a cada uno de los fotogramas

Une el siguiente aprendizaje

• Pagina web

• 
• Wireframe

• 
• Mockup

• 

Estas son las interfaces visuales o pantallas que deben contener los espacios para los siguientes elementos:

• Bloques de multimedia

• Espacio destinado a buscar información dentro del sitio web.

• Bloques de formulario

• Espacio reservado para ubicar un formulario, test o cuestionario para ser diligenciado por el usuario.

• Bloques de navegación

• Es el espacio reservado para las imágenes, gráficas, videos, logos, banners, etc

• Bloques de contenido

  (textos)

• Es el espacio que ocupará el texto que se está elaborando con la información entregada por el cliente.

• Bloques de búsqueda

• Son los elementos que dirigen al usuario a otros lugares a través de hipervínculos representados por botones, banners o menús.

Ventajas de los wireframes

• • Ayuda a los diseñadores a definir la estructura del proyecto web acorde con las indicaciones del cliente.

  
  

• Permite retroalimentaciones rápidas al prototipo, puesto que al ser visual facilita la comprensión del cliente y los usuarios respecto de la estructura conceptual del proyecto.

• Percibe los errores con mayor facilidad al observar la funcionalidad del proyecto a través de los elementos gráficos y visuales que lo componen

• Mejora la usabilidad del proyecto al identificar los elementos que interactúan con los usuarios a la hora de demostrar su desempeño.

Herramientas para elaborar Wireframe

• 
• 
• 
• 
• 

Realice un Wireframe de baja fidelidad para tu proyecto.

Une el siguiente

• Wireframe de alta fidelidad

• 
• Wireframe

• 
• Wireframe de baja fidelidad

•