Creación de Wireframes y Mockups

Fundamentales hoy día para el diseño y creación de cualquier prototipo de aplicaciones web para cualquier dispositivo, de una forma ágil y efectiva, doy repaso a lo que son los Wireframes (versión en blanco y negro más esquemática y sin fotos, ni logos) y a posteriori los Mockups (versión funcional ya si a color, con las imágenes y logos y las principales funciones de la web o aplicación desarrolladas) se han consolidado como el paso previo indispensable para cualquier buen diseñador web, surgiendo aplicaciones y estandarizándose y agilizándose así un proceso, que antiguamente hacíamos a mano y sin tanta ayuda.

A tener en cuenta que de las funciones de un Mockup, mostraremos ante todo la navegación (con una buena arquitectura de la información de base) y algunos formularios o banners animados. No se ha de porqué ir mucho más allá de momento.

Por mi parte, después del curso de CIFO de l’Hospitalet, con el mismo sobrenombre “Creación  de Wireframes, Mockups y animación multimédia con photoshop” he aprendido, entre otras, que hay herramientas de pago que seguro están muy bien, e inicialmente quise usar, como puedan ser Sketch, Balsamiq o Axure pero que si por algún motivo no puedes, también existen otras semi gratuitas como Moqups o Cacoo Diagrams que te permiten probar y crear unos cuantos wireframes o tu site map inicial.

Site Map proyecto web mockups Sala Liberat

Luego siempre tendremos la opción de bajarnos unos free “wireframe kits” para Photoshop:  ahí va uno: http://www.bypeople.com/free-psd-and-sketch-wireframing-kit/ con todo lo necesario para acabar de definir haciendo nuestra versión editable y lograr así unos estupendos mockups.

Esta entrada fue publicada en Inicio. Guarda el enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>