Los primeros bocetos para un proyecto de desarrollo web

1. WIREFRAMING
LOS PRIMEROS BOCETOS

2. Wireframing es al diseño web como los planos a la arquitectura

3. Antes del diseño
Antes de comenzar con los elementos gráficos
hay que diseñar la estructura
Ayuda a definir dónde vamos a colocar la
información

4. Wireframing
Representación de baja fidelidad del diseño que nos
ayudará a definir la estructura donde colocaremos
el contenido

5. WIREFRAMING
ELEMENTOS BÁSICOS
contenido

6. Antes del diseño
Se recomienda trabajar con una estructura de
columnas
La más popular es la de 12 columnas

7. WIREFRAMING SOBRE UN SISTEMA DE 12 COLUMNAS
ELEMENTOS BÁSICOS

8. WIREFRAMING SOBRE UN SISTEMA DE 12 COLUMNAS
ELEMENTOS BÁSICOS

10. SOBRE UN SITIO REAL
ELEMENTOS BÁSICOS

11. Herramientas
960 Grid System
960.gs
UX Pin
uxpin.com
Balsamiq
balsamiq.com
Axure
http://www.axure.com

12. Prototipo
Un prototipo es un medio de representación de alta
fidelidad del producto final, que simula la interacción
de interfaz de usuario.

13. Prototipo
Debe permitir al usuario :
Experimente la interacción con la interfaz
Probar las principales interacciones de una manera
similar al producto final

14. Prototipo
Puede que no luzca exactamente como el producto
final pero puede ser muy similar.
A menudo se omite para reducir costos y acelerar el
tiempo de desarrollo.

15. BALSAMIQ
HTTP://BALSAMIQ.COM/PRODUCTS/MOCKUPS/

16. UXPIN
UXPIN.COM

17. AXURE
HTTP://WWW.AXURE.COM

18. HTTP://BZA.CO/BUY/151657/TEMASEKCLOTHINGS/HTEEML
The 20 best wireframe tools
http://www.creativebloq.com/wireframes/top-wireframing-
tools-11121302/2

19. ADRIANA ATZIMBA TIENDA MARTÍNEZ
atzimbatm@gmail.com