martes, 7 de mayo de 2013

07. Introducción al Desarrollo Web: Prototipado y Prototipos.

El wireframing o prototipado en el diseño web es el conjunto de dibujos que representan cómo estarán organizados los elementos web de nuestro proyecto.

Pese a incluir únicamente los aspectos más relevantes de nuestra página o aplicación es importante llevar este tipo de prácticas siempre antes de empezar a programar, para crear una referencia que permita definir su estructura y distribución visual. (Referencia: Prototipado en el diseño web).

Séptima clase del curso INTRODUCCIÓN AL DESARROLLO WEB, producido por Sergio Luján Mora de la Universidad de Alicante. Para la clase de hoy, que cierra el primer módulo del curso, aprenderemos sobre el prototipado y su importancia en el desarrollo de nuestros proyectos web.


Contenido de la clase
1) Prototipado: wireframes, mockups y prototipos.
(09:36 minutos)
2) Prototipos visuales de alta fidelidad.
(11:56 minutos)

Duración de la clase
21:32 minutos.

Para quienes están aprendiendo HTML5, este link les será de gran utilidad: Referencia: GUIA HTML5.

Si todavía usas HTML4, te recomendamos el siguiente link: Referencia: CURSO DE HTML.

A continuación la clase para este día...

1) Prototipado: wireframes, mockups y prototipos.

La importancia de prototipar una aplicación web antes de implementarla, los diferentes tipos de diagramas para representar la navegación, la estructura y el funcionamiento de una aplicación web.


2) Prototipos visuales de alta fidelidad.

Evolución del mock up, atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), software de diseño (trabajar en capas, medir, editar imágenes), 5 consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), 5 consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).


Si deseas saber más sobre este curso, haz clic abajo: