Las 10 mejores extensiones de Chrome para diseñadores (1/2)

extensiones para tu navegador para chrome utilidades para web herramientas

Las extensiones de Chrome nos ayudan a optimizar nuestro trabajo.

Tanto si eres diseñador web como gráfico, estoy segura de que a veces navegando por la web has visto algo que te ha gustado y has pensado: ¿esto cómo estará hecho?, ¿qué tipografía habrá utilizado?… Navegando y buscando inspiración te pueden surgir este tipo de preguntas. No siempre va a ser fácil encontrar las respuestas a esas cuestiones cuando te apetece robar como un artista. A partir de hoy, con la ayuda de este post, no te hará falta ser un Chris Coyier para descifrar esa información. Te traemos las herramientas necesarias para facilitarte esa ardua tarea de identificar elementos en web (y así poder “apropiarte” de ellos).

Seguro que has oído hablar de las extensiones de Chrome. Todos los navegadores tienen las suyas, pero Google, en especial, es el rey en recopilar herramientas a cascoporro, sin ton ni son. El problema es que hay tantas que lo normal es que ni nos molestemos en averiguar si alguna que nos puede ser de utilidad.

En esta ocasión, te vamos a mostrar las extensiones más útiles para tu navegador Google Chrome.

1. Window Resizer

extensiones para tu navegador para chrome utilidades para web herramientas window resizer
Si eres desarrollador web, esta app no puede faltar en tu navegador. Cuando estamos creando una página web, siempre visualizamos el responsive escalando la ventana; aunque no sea una vista totalmente exacta de cómo se verá el responsive, nos solemos apañar con este método más rudimentario (y rápido).

Ahora, con esta extensión de Window Resizer, podremos redimensionar nuestro navegador de forma exacta según la pantalla del dispositivo que queramos visualizar e incluso, añadir una resolución personalizada por nosotros. Vamos, que podemos “redimensionar” nuestra forma de trabajar.

2. WhatFont

extensiones para tu navegador para chrome utilidades para web herramientas whatfont
WhatFont es una gran ayuda tanto para los desarrolladores web como para los diseñadores gráfico. Esta herramienta nos revela las tipografías utilizadas en las webs en las que estamos navegando, lo cual es una gran ayuda cuando es difícil encontrar esta información a través del inspector de elementos, o cuando eres diseñador y no tienes ni idea de cómo realizar esta búsqueda a través del código de la página.

3. Awesome Screenshot

extensiones para tu navegador para chrome utilidades para web herramientas awesome screenshot
Si eres usuario de PC, esta extensión te será extremadamente útil: se acabó el hacer capturas de pantallas, pegarlas en el Paint, cortar y guardar (a los usuarios de Mac esto casi le podría sonar a chino). Gracias a Awesome Screenshot podemos hacer capturas de pantallas con un método muy parecido al utilizado en Mac: seleccionando la zona que queremos capturar; incluso podemos hacer screen de una web completa, desde el header al footer, haciendo scroll en ella.

4. Page Ruler

extensiones para tu navegador para chrome utilidades para web herramientas page ruler
Para mejorar nuestra precisión a la hora de medir espacios y dimensiones en web, la extensión de Chrome Page Ruler nos permite realizar selecciones de fragmentos de una página. Hecha la selección, aparecerán unas guías indicándonos la medida exacta del elemento.

5. Yslow


Una de las extensiones a la que más partido le puede sacar un desarrollador web. Yslow no sólo calcula la rapidez de carga de la página, sino que también nos dice qué la está ralentizando. Pone a prueba nuestra página utilizando como parámetros 23 reglas/consejos estandarizados por Yahoo. Es una herramienta muy útil para saber qué errores estamos cometiendo a la hora de diseñar el site y así poder optimizar el tiempo de carga de nuestra página.

Yo aconsejo el empleo de estas extensiones de Chrome sobre todo cuando vamos a desarrollar páginas que no funcionan a través de un gestor de contenidos. Si vamos a trabajar una web con un gestor de contenidos, como WordPress por ejemplo, la interacción con estas extensiones no van tan fina y podrían confundirnos.

Próximamente, ¡la segunda parte llena de más utilidades!

2 comentarios en “Las 10 mejores extensiones de Chrome para diseñadores (1/2)”

Dinos lo que piensas

Tu email no se mostrará ;)