Prototipado Web con la herramienta Wires

Cada vez hay más herramientas web disponibles para ayudarnos a diseñar nuestras webs, en este caso se trata de una herramienta que nos ayuda a crear el diseño de nuestra web de manera gráfica y que tiene como objetivo básico sacarnos el lápiz y papel al que muchos estamos acostumbrados. De esta manera podemos diseñar como se verá nuestro sitio o el de nuestro cliente, antes de empezar a programar. Esto es fundamental cuando nuestro cliente no tiene claro el diseño, ya que mediante la función Compartir podemos mostrarle la idea y solo si esta conforme comenzamos a trabajar, así nos ahorramos los dolores de cabeza.

En la imagen superior se muestra un diseño incompleto que realice para mostrar aquí, se puede ver que el diseño esta en blanco y negro, como si se tratara de un dibujo a lápiz  y que el fondo esta cuadriculado, lo que nos permite alinear las distintas divisiones y textos de manera más sencilla. Todo lo que esta en la página se agrega como Widgets, simplemente hacemos clic en el botón inferior y aparece un listado con las siguientes 9 opciones: rectángulo, que básicamente es una Div con bordes, texto, placeholder, que vendrían a representar imágenes o vídeos (esa es mi visión), iconos, lineas, menús (verticales y horizontales), pestañas (Tabs), formularios y botones. Abajo dejo una imagen del menú de Widgets.

A todos estos widgets podemos arrastrarlos y cambiarles el tamaño, y a la mayoría también podremos cambiarles ciertas características haciéndoles doble clic, por ejemplo el texto se puede modificar de esta manera y el texto de los botones también, en el caso de los iconos podremos elegirlos de una lista cuando le hacemos doble clic y a las divisiones les podremos cambiar el tipo de borde de la misma manera. Otra de las opciones con las que contamos es la de colocar los widgets en diferentes capas, ya que a la derecha tenemos las opciones para subir (up), bajar (down), enviar al frente (top), o al fondo (bottom) que actuaran sobre el widget seleccionado.

También podemos crear más de una página por sitio (o proyecto) lo que nos permite dar una mejor idea de mismo a nuestro clientes o a nosotros mismos. Por último se puede destacar que Wires es gratis con un limite de diseño de tres sitios y que si queremos crear más deberemos pagar 6 dolares al mes, lo cual nos da acceso a la creación de diseños de manera ilimitada.  Para todos los interesados dejo el link aquí http://quirktools.com/wires/ .

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Deja un comentario