Las 10 extensiones de Chrome Indispensables para Diseño Web

¿Cuántos navegadores conocéis? Y no, no valen Vasco de Gama o Colón… ;). Antes, esa respuesta era mucho más sencilla, con el monopolio de Internet Exporer, era mucho más fácil también el diseño web, pero se perdían multitud de experiencias de usuario. Cuando diseñamos nuestras plantillas WordPress las hacemos compatibles con todos los navegadores (especificamos las versiones), pues entendemos que casi hay un navegador para cada tipo de usuario.

Sin embargo, como decíamos, hace uno años ahora estaríamos hablando de Internet Explorer, pero hoy el más usado, el que más terreno le ha comido en los últimos años a y el más usado por diseñadores y maquetadores es sin duda Chrome.

Una de las razones por la que la mayoría de diseñadores usamos este navegador es por la posibilidad de poder instalar extensiones, que nos faciliten nuestro trabajo. Por si alguien no sabe lo que es una extensión, son como pequeños programas que instalamos en Chrome y que nos pueden facilitar algunos aspectos de nuestra navegación. Extensiones hay infinidad, desde juegos, alarmas de temperatura, ayudas para aprender un idioma…. Y aunque hay de pago, la mayoría son gratuitas.

Pues bien, dentro de esas extensiones podemos encontrar algunas que nos harán nuestro trabajo, y por lo tanto la vida, un poquito más fácil. La instalación es muy sencilla, así que…. seguro que alguna de esta lista te interesa!

Si necesitas tomar imágenes de una web…

1. FireShot

¿Cuántas veces buscas hacer una captura de pantalla, pero con ImprPant pierdes calidad? Esto ya nunca será un problema. Con esta extensión podrás tomar una captura entera de la pantalla o bien del área seleccionada, como tu prefieras!

Una vez lo decidas, puedes guardar la captura en el formato que más te interese .png, .pdf …. y retocarla con el programa de retoque fotográfico que tengas.

extension-chrome-fireshoot

Instala FireShot

2. PicMonkey

Siguiendo con las imágenes, esta extensión te permitirá capturar todas las imágenes de una página web y trabajar independientemente con ellas. Una vez que seleccionamos la imagen podemos retocarla con el editor de la misma extensión.

picmonkey-descarga-extension

Instala PicMonkey

Que el color no sea el problema…

3. ColorZilla

Se acabó encontrar un color en una web y tener que hacer una captura de pantalla para usar el cuentagotas y saber cual es 😉 No más colores parecidos, pero no exactos.

Con esta extensión puedes tomar el color directamente de la web y partir de ese mismo color o bien usar un degradado.

colorzilla-extension-crhome-descarga

Instala Colorzilla

4. Palette para Chrome

Otro de los problemas relativos al color que podemos encontrar es que tenemos una imagen con una gama de colores y queramos obtener la paleta de ellos. Con esta extensión, eso quedo atrás. Basta con señalar la imagen y esta nos dará la paleta de colores correspondientes.

palete-chrome-extensiones

Instala Palette para Chrome

Combinaciones de tipografías… donde quieras!

5. Font Playground

Una de tipografías! Cuantas veces estas muy indeciso sobre cuál es la mejor tipografía para tu web, o como quedaría con tal o cual Google Font… Con esta extensión se acabaron los problemas, pues podemos probar cualquiera de las Google font en situ en nuestra web.

¿Vas a usar una combinación sans serif, o prefieres una serif?

playground-extension-tipografia

Instala Font Playground

6. What Font

Y otra más! Si por el contrario lo que nos pasa es que hemos encontrado una fuente genial en una web, pero no sabemos cuál es, esta es tu extensión. Con solo hacer «hover» encima de la fuente, sabremos qué tipo es e incluso el tamaño de la misma.

extension-eleccion-tipografia

Instala What Font

Si eres maquetador… aquí van tu top de extensiones

7. Responsive Web Design Tester

Que tu web tiene que ser responsive, creo que nadie tiene alguna duda. Pero a veces comprobarlo en todos los dispositivos se puede hacer algo difícil. Puede ser que un dispositivo especifico con un navegador determinado dé algún problema.

Pues bien, con esta extensión ya no los hay. Podrás probar tu web en multitud de dispositivos de manera que estés seguro que es responsive allá donde vaya!

responsive-design-extension-chrome

Instala Responsive Web Design Tester

8. PerfectPixel by WellDoneCode

Esta puede ser tu herramienta perfecta si eres maquetador. Con ella podrás superponer el diseño con el resultado web y ver los puntos en los que estas no coinciden.
La extensión coloca un imagen en superposición con cierta transparencia para poder así, realizar una comparación de cada uno de los píxeles y garantizar así, el 100% de precisión.

perfect-pixel-chrome

Instala Perfect Pixel

9. Check My Link

Son muchas las ocasiones en las que tras escribir un post con múltiples enlaces, alguno de ellos no funciona. Seguro que hemos puesto una «h» de más, o se nos ha colado una coma. Sea como fuere, con esta extensión podemos comprobar cuales de los enlaces de nuestra web funciona y cuáles no.

Código de color universal: en verde lo que está bien y en rojo los no válidos!

corrector-link-chrome

Instala Check My Link

Ante todo… no pierdas el tiempo!

10. StayFocusd

Esta extensión puede venir bien a más de uno… Internet es taaannn amplio que a veces incluso mientras estamos trabajando, tendemos a perder el tiempo en webs, que no deberíamos. Si quieres aumentar tu productividad, esta es tu extensión. Además de poder comprobar de el tiempo que pasas en cada una de las web por las que navegas, podrás bloquear ciertos contenidos durante un periodo de tiempo.

extension-para-no-perder-tiempo

Instala StayFocus

Estas son algunas de las extensiones que pueden ayudarte en tu trabajo como maquetador o diseñador. ¿Conoces algunas más? 🙂

Comentarios (12)

  1. La herramienta para probar responsive que trae el propio Chrome me parece lo mejorcito. Trabajo con ella todos los días (… que me toca maquetar) y no la cambio por ninguna extensión extra xD

  2. A mi concretamente la extensión PicMonkey me encanta, solo le falta que quitara la marca de agua de las imágenes y ya sería increible.

  3. Muy buenas todas. Justo estaba necesitando una como What font. Yo no soy diseñador, soy copy y créeme valoro mucho este tipo de información. Muchas gracias por compartir.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *