Prototipado interfaces WEB
Importancia del Prototipado en el desarrollo WEB
La persona
encargada del UI se va a centrar en diseñar la página web en base a la
creación de wireframes y mockups en los cuales representará el color,
degradados, tipografías y el diseño visual general del sitio. Cuando un usuario
entra en una página web, la primera impresión visual que tendrá de ella podrá
determinar en gran medida si nuestro sitio web le gusta o no y esto es muy
importante ya que en base a esto el usuario podrá entender y utilizar el sitio de una forma más o menos efectiva. Es muy
importante por tanto conseguir un diseño atractivo pero no puede quedar de lado la utilidad y el uso intuitivo ya que el objetivo central de un desarrollo es que el sitio cumpla con los requerimientos que se plantearon al comienzo del proyecto y que el usuario del mismo pueda usarlo con facilidad y comodidad.
Modelos de Prototipo.
1.- Boceto (sketch)
El sketch
es un dibujo o boceto inicial de un sitio web. Este dibujo poco detallado puede
estar realizado sobre papel, pizarra o cualquier formato que permita realizar
cambios de manera rápida. Se trata de un diseño de muy bajo detalle en donde se
visualiza por primera vez el conjunto de elementos fundamentales de una web.
2.- Esquema de página (wireframe)
Un
wireframe es la representación de la estructura básica de la página web en la
que se especifican los elementos de forma esquematizada. Es un diseño a bajo
nivel en el que se establece claramente la jerarquía de los elementos, los
contenedores y la organización del contenido.
Ejemplo gráfico:
Se suelen utilizar herramientas como las siguientes:
(Preferido): Wireframe: wireframe.cc
Balsamiq Mockups: balsamiq.com
Gliffy: gliffy.com
3.- Maqueta (mockup)
Un mockup
es una representación a medio nivel en el que se incluye imágenes, tipografías
y colores, aunque no tiene por qué ser definitivos. La finalidad del mockup es
conseguir una versión avanzada del diseño de la web que nos permita evaluarlo
en su conjunto, la detección temprana de puntos débiles y la realización de
cambios sin que sea demasiado costosa.
Balsamiq: balsamiq.com
MockFlow:
mockflow.com
4.- Prototipo (prototype)
El
prototipo es la representación más detallada de la web y dispone de
interactividad para comprobar el comportamiento y la experiencia de usuario.
Es, por tanto, un diseño al más alto detalle y la última fase de
conceptualización antes de la implementación web.
Por norma general, los colores, las tipografías, los iconos, y demás artefactos gráficos utilizados en el prototipo serán los que se utilicen en la página web. Sin embargo, en muchos casos, se llama también prototipo a una versión con menos detalle pero que dispone de interactividad.
Proto.io: proto.io
Sketch: sketch.com
Adobe XD:
adobe.com
Comentarios
Publicar un comentario