Visual Inspector, edición web al momento y sin código

Visual Inspector, edición web al momento y sin código

Visual Inspector
Atelié de Tres 2017

Visual inspector, Herramienta para equipos multidisciplinarios

Visual inspector es una extensión para Chrome desarrollada por Canvas Flip. Una web app dedicada al desarrollo de prototipos web y app. Recientemente Canvas Flip anunció el lanzamiento de esta extensión para el navegador Chrome. A simple vista parece como cualquier otra extensión de chrome que nos permiten inspeccionar los elementos de un web. Sin embargo Visual Inspector va más allá.

Además de poder ver que fuentes se están ocupando, para lo cual es mucho mejor FontFace Ninja, paleta de colores o las imágenes que se muestran. Verificar distancias entre los elementos. También podrás modificar de manera muy sencilla algunas características de la página. Podrás cambiar tamaños de letras, pesos tipográficos e interlineado. Alto y ancho de contenedores. Añadir sombras, rellenos solidos y degradados. Cambiar color y espesor de lineas. Esto es lo que hace de Visual Inspector una herramienta muy interesante de usar. Podrás rápidamente realizar algunis cambios visuales que te permitirán hacer adecuaciones futuras.

Si bien es cierto que de momento están un poco acotadas las acciones a realizar. Ya que si eres desarrollador (Diseñador o programador) sabrás que con el inspector de Google puedes realizar estas mismas modificaciones e incluso ir más allá. Definitivamente el acierto de Visual Inspector es el de brindarnos una interfaz amigable con prácticamente cualquier usuario que tenga nociones básicas sobre desarrollo web.

¿Qué nos ofrece Visual Inspector?

En definitiva está herramienta es un gran aporte para grupos de trabajo multidisciplinarios. En esencia Visual Inspector está enfocado a diseñadores que trabajen dentro de grupos de desarrollo o que se dediquen sólo a la parte de maquetación. Ademas su uso está enfocado a aquellos que probablemente no estén familiariazados con el uso de codigo. Esto es evidente debido a las limitadas opciones de edición. Casi exclusivamente limitadas a texto y color y una que otra cosa más.

Prueba diferentes combinaciones de color

Dentro de las caracteristicas que podremos modificar es la paleta de colores utilizada en la página. Para esto encontraras una pestaña en dónde podrás desde copiar cualquiera de los colores utilizados, como también modificar dichos colores. Una vez que hayas modificado alguno de estos, podrás ver el cambio en tiempo real. Podrás también dar amrcha atrás a dicho cambio con sólo un click.

Visual Inspector
Atelié de Tres 2017

 

Obtén cualquier imágen sin buscar en el código

También podrás exportar las imagenes que estén cargadas en la web, cosa que es bastante útil y sencilla de realizar. Aunque recordemos que estó siempre estará limitado al uso de propiedad intelectuál, sin embargo como referencia me parece que su uso es bastante práctico.

Visual Inspector
Atelié de Tres 2017
Muestra los cambios realizados a tu equipo

Una de las caracteristicas que destaca de herramientas similares y que no podrás realizar con el inspector de google es la de exportar tus cambios. Una vez seleccionado el elemento al que le hayas modificado alguna de sus características podrás exportarlo como PNG. Esto te será muy utíl para compartir con tu equipo ya que los cambios se borrará una vez que hayas cerrado el explorador. Personalmente yo recomiendo que tomes captura de la pantalla completa, ya que esto proporcionará un contexto mas amplio sobre los cambios realizados.

Visual Inspector
Atelié de Tres 2017

¿Debes usar Visual Inspector?

En lo personal lo he probado para verificar una web que estoy desarrollando junto con una programadora y me ha ayudado a verificar que los tamaños y distancias entre elementos sean iguales a los de mi maqueta sin tener que darme un chapuzón en el código. Ojo creo que herramientas como esta hacen que reabramos la pregunta que siempre está en el aire cuando hablamos de diseño web ¿Necesitar saber escribir codigo si eres diseñador?. En lo personal creo que si debemos saber escribir codigo y hay muchas razónes por la que esto debería ser así. Sobre este tema ahondaré mas y escribiré una publicación al respecto. Seguramente ya haz leido al respecto en algunos blogs sobre noticias de diseño. Incluso algunos diseñadores y diseñadoras relevantes han escrito al respecto. Mi aportación será hacerlo en español y desde mi experiencia trabajando con equipos en México y el resto del mundo.

Visual-Inspector una herramienta de oro para diseñadores web Clic para tuitear

En conclusión Visual Inspector es una muy buena herramienta, esperemos que con el pasar del tiempo tenga más opciones de edición. Para esto me parece que como para casi cualquier cosa que involucre al diseño. La complementación con otras herramientas es fundamental para un mejor desarrollo de los proyectos. Descarga esta extensión y experimenta su uso. Como muchas cosas en diseño, no todas las herramientas son útiles para todos. Sólo tú podrás dar tú conslusión personal. Suerte.

Material extra

Pagina oficial de Canvas Flip

CSS pepper, ¿Competencia o herramienta complementaria?

Deja un comentario