Pequeños o grandes cambios para pruebas y mockups.
Las páginas web y las aplicaciones móviles son el principal propósito de los desarrolladores y diseñadores web, con permiso de los videojuegos móviles.
La competencia es mucha y de calidad, por lo que ofrecer la mejor experiencia al usuario requiere muchas pruebas y errores.
Por suerte, contamos con herramientas que nos facilitan esta tarea. Con anterioridad, hemos visto cómo podemos alterar el aspecto de una página o sitio web gracias a Stylish. Sólo tú verás los cambios, pero con un poco de código alterarás todo el aspecto de páginas populares como YouTube, Google o Facebook.
Una herramienta similar es CanvasFlip Visual Inspector, que te ayuda a cambiar el diseño de una página web mientras navegas por ella.
¿Para qué pelearte con una herramienta de diseño web y con los archivos de la página si puedes trastear con ella desde tu navegador?
Diseñar al vuelo
Con tanto cambio y rediseño, hoy en día se trabaja habitualmente con mockups o prototipos. Son fáciles de hacer, requieren menos tiempo que un diseño completo, y en algunos casos son hasta funcionales.
En el caso que nos ocupa, CanvasFlip Visual Inspector se instala en Google Chrome como una extensión más.
Desde tu navegador Chrome, abres una página o sitio web, y gracias a esta herramienta tendrás la posibilidad de aplicar cambios. Así te será más cómodo planificar o probar rediseños.
Al igual que ocurría con Stylish, los cambios los ves tú en tu navegador, ya que no realizas cambio alguno en la página web. Eso ya lo harás una vez veas que el rediseño funciona y con otras herramientas. En cualquier caso, puedes hacer una captura de la página desde la propia extensión.
El propósito de CanvasFlip Visual Inspector es jugar con una web y alterar sus elementos a placer.
Analiza, cambia, guarda
En primer lugar, CanvasFlip Visual Inspector nos aporta información sobre la página que estamos viendo en Chrome.
Qué colores emplea, cuáles son las tipografías y fuentes así como otros elementos gráficos y de diseño que nos pueden servir de inspiración o ayuda para nuestra propia página web. En este sentido, esta herramienta nos ayudará a descargar los gráficos en caso de que el tamaño mostrado sea el adecuado.
La segunda función de CanvasFlip Visual Inspector, que es la que más nos interesa, consiste en rediseñar la página que visitamos. al colocar el ratón encima de cualquier elemento, éste se muestra resaltado.
En concreto, podemos retocar cualquier texto escribiendo encima. Esto afecta al contenido de un artículo, un destacado, un titular o un menú.
Respecto a los demás elementos gráficos, para moverlos tendremos que cambiar los valores X e Y en la pestaña Inspect de CanvasFlip Visual Inspector. Y en cuanto al tamaño, tan sólo tendremos que cambiar los valores de Width (ancho) y Height (alto).
Otro detalle muy práctico es la posibilidad de exportar cualquier elemento, no sólo la página al completo. Es decir, puedes guardar un botón, una columna o un menú seleccionándolo y exportándolo (en JPG o en PNG).
Desde la pestaña Colors puedes hacer lo propio alterando los colores del elemento seleccionado, usando para ello valor hexadecimal o jugando con los valores RGBA y HSB.
Menos tiempo, menos esfuerzo
Obviamente, se echan de menos algunas cosas en CanvasFlip Visual Inspector, como la posibilidad de mover elementos directamente en la página o poder importar tus propios gráficos para colocarlos a ver qué tal quedan.
Pero tal cual está diseñada esta herramienta, cumple con creces con la necesidad de aplicar ciertos cambios a una página web ya existente.
A ello hay que añadir que las funciones de análisis son muy útiles para saber qué letras, paleta de colores y elementos gráficos emplea la competencia e incluso exportarlos.
CanvasFlip Visual Inspector cuenta con un hermano mayor, CanvasFlip, una herramienta para realizar prototipos y mockups para páginas y aplicaciones.
Además, permite hacer un análisis a nivel de usabilidad para ver qué tal funcionan los cambios y si son adecuados o no.