¿Qué es un Mockup o Wireframe?

0
2135

Como diseñadores o desarrolladores web, cuando nos enfrentamos a un nuevo proyecto con un cliente es de vital importancia lograr una buena comunicación con el cliente y detectar realmente sus necesidades pero esto es un problema cuando en algunos casos el cliente no sabe lo que necesita realmente o no puede explicarlo de manera adecuada.

Para evitar el tener que volver atrás en nuestros proyectos y para mostrarle al cliente una mejor visualización del proyecto, nace la idea de los mockups, maquetas o wireframes.

Wireframes en desarrollo y diseño web.


Un wireframe básicamente es un boceto básico y de baja calidad del desarrollo de una página web o el diseño de una interfaz, la finalidad de este es el mostrar al cliente un diseño o boceto rápido y facilitar la comunicación entre cliente y desarrollador.

El wireframe tiene como objetivo proporcionar la visualización del diseño o las funcionalidades de un site o incluso una App de manera netamente referencial y poder definir objetivos en una etapa temprana del proyecto, incluso hacer modificaciones de manera rápida, para evitar hacer estos cambios sobre un site o diseño real, nadie quiere que un cliente le cambie el diseño web cuando este ya está maquetado o sí? XD
Existen una variedad de software que nos permite crear estos tipos de wireframes, a continuación enunciamos algunos:
Balsamig (Demo Online)

Sitio web: http://www.balsamiq.com/products/mockups
Mockingbird

Sitio web: https://gomockingbird.com/
Lovely Charts (Online)

Sitio web: http://lovelycharts.com/
Mockflow

Sitio web: http://www.mockflow.com/
Gliffy

Sitio web: http://www.gliffy.com/uses/wireframe-software/

Wireframe para el diseño de interfaces (Apps)

En el caso de wireframes para el diseño de interfaces de dispositivos móviles o aplicaciones móviles (APPS). También contamos con algunas herramientas que nos permiten crear estos bocetos y usarlos como referencia en un proyecto para nuestro cliente, son:
Iphonemockup (Online)

Sitio web: http://iphonemockup.lkmc.ch/
Balsamig (Si también permite realizar bocetos para apps móviles)

Sitio web: http://www.balsamiq.com/products/mockups
Wireframe CC (Online, este nos permite realizar wireframes dispositivos móviles como tabletas, celulares, y también el monitor de un ordenador)

Sitio web: http://wireframe.cc/

Mockup o maqueta en diseño grafico


Las maquetas o mockups últimamente se han puesto de moda para representar un diseño gráfico o especialmente editorial.

El objetivo en el caso de este tipo de maqueta es el de mostrar al cliente una visualización de cómo quedaría su producto editorial, identidad de marca, logo, tarjetas de presentación, pagina web, papelería, etc. En un ambiente foto-realista sin necesidad de imprimir realmente y tomar una fotografía real.
Estas maquetas o mockups se pueden realizar por medio de 3 métodos:
Photoshop
Por medio de técnicas de edición avanzadas en photoshop para crear el efecto realista y de 3d.
Software de 3D
Por medio la creación de modelos realistas y detallados en software de 3d y producir imágenes realistas con estos software, comúnmente llamadas renders.
Por medio de una fotografía real.
Es posible por medio de una fotografía real y con buena calidad de iluminación crear una buena maqueta.

zp8497586rq