INSTITUTO SUPERIOR TECNOLOGICO PUBLICO

«JOSE PARDO»

Carrera Profesional: Computación e Informática

Docente:

Ing. Ramiro Amador Flores Eulogio

Semana 6Contenido Básico: Wiriframes

ORGANIZACIÓN Y ADMINISTRACION DEL SOPORTE TECNICO

• CARRERA PROFESIONAL: COMPUTACION E INFORMATICA

• MODULO : Gestión de Soporte Técnico, Seguridad y Tecnologías de laInformación y Comunicación

• UNIDAD DIDACTICA : Integración de las Tecnologías de Información y comunicación

• SEMESTRE ACADEMICO: I• SEMESTRE LECTIVO : 2015-I• CREDITOS : 3• HORAS POR SEMANA : 4• HORAS POR UNIDAD ACADEMICA: 72

¿Qué es un Wireframe?

Wireframe

• Es prototipo visual de baja calidad, es un armazón o esqueleto de lo que puede ser un sitio web o una aplicación web. En inglés son sinónimos de Wireframe: skeleton, blueprint, outline.

Sirve para darnos una idea de que áreas van a conformar el sitio, su layout, jerarquías y esquemas de navegación. No deben tener elementos finalizados de diseño (colores o tipografías)

Deben estar en blanco y negro o máximo en escala de grises, no deben tener color porque sirven más para validar la arquitectura, el layout. Los colores pueden suponer distracciones.

Beneficios de los Wireframes•Lo primero y más importante es que se pueden hacer fácil y rápidamente.•Permiten explorar múltiples posibilidades.•Sirven para levantar requerimientos de forma rápida.•Sirven para probar y validar esquemas de navegación.•Pueden utilizarse para hacer pruebas de usabilidad en etapas tempranas del proyecto.

Herramientas gratis para hacer Wireframes

1. MockingbirdExiste una versión gratuita que permite guardar un proyecto con hasta 10 páginas y pueden exportarse a pdf.

2.Lovely Charts

Este lo he utilizado para hacer diagramas, mapas del sitio y flujos de usuario, pero también sirve para hacer Wireframes.

3.CacooLo más interesante de este es que varios usuarios pueden trabajar en el mismo archivo al tiempo, la interface no me parece tan amigable puesto que ya tiene muchos controles.

4.Gliffy

5.Lumzy

6.Mockflow

7. Pencil Project

8.SimpleDiagrams

9. Denim

10.Website Wireframe

Gracias