Google siempre pone en nuestras manos herramientas para hacernos la vida un poco más fácil.
Y la verdad es que con tantas opciones que hay, es difícil saber cuáles son las mejores extensiones de Google Chrome que deberíamos tener instaladas en el navegador.
Además, añadir una extensión de Chrome es tan fácil como poner el nombre en el buscador, abrir su página y descargarla.
Si te dedicas al diseño web o estás relacionado directamente con esta profesión, te va a venir muy bien saber cuáles son las mejores para poder adaptar las tendencias de diseño a tus páginas webs de forma práctica.
ÍNDICE DEL ARTÍCULO
Wireframify
Hay veces que entramos en una página web llena de elementos muy bien distribuidos y pensamos que nos encantaría que nuestra web fuese exactamente igual.
O en el caso de si eres diseñador, te encantaría crear una página web con esa distribución para tu cliente, ¡sería una pasada!
Pero piensas, ¿cómo está distribuida esta web? Es entonces cuando empiezas a imaginarte bloques y cajas en tu cabeza.
Pero aun así, hay webs que se te resisten y ves algunos elementos superpuestos que no sabes exactamente cómo están distribuidos.
Esto se soluciona con la extensión Wireframify.
Esta extensión de Google Chrome te organiza la web en secciones, mostrándote todos los elementos que componen la página web.
Puedes ver las distribuciones de las páginas webs con la extensión Instant Wireframe Share on X
En la imagen te enseño un ejemplo de mi home.
Como puedes ver, arriba a la izquierda tengo mi logotipo de Bego Romero, por lo que Instant Wireframe muestra el campo de la imagen, junto con el menú.
Si vamos a la parte de la página vemos como lo primero que tenemos es un separador (la barra de color rosa) con un pequeño espaciado tanto arriba como abajo del elemento.
Descubre la comunidad de diseñadores web.
Nos encontramos ahora con los últimos artículos del blog, donde vemos sus imágenes y sus cajas de texto.
¿Ves que abajo de los artículos tenemos una especie de caja más oscura? Esto significa que aquí hay otro elemento que simplemente crea un espacio.
Esta herramienta puede ser muy práctica a la hora de diseñar una página web, ya que podemos copiar las disposiciones de otras webs para que queden con una estructura similar.
¿Verdad que ahora es más sencillo?
También puede interesarte:
Mejores tipografías gratis para descargar
Qué es una landing page
Windows Resizer
¿Cuántas veces te ha pasado que tu página web se ve perfecta en tu ordenador, pero llegas a una pantalla más pequeña y algunos elementos no se ven como esperabas?
Se ven más grandes, más pequeños, en una posición distinta… Te suena, ¿verdad?
Con la extensión Windows Resizer, al seleccionar los píxeles del dispositivo que quieras consultar, la ventana de tu navegador Chrome se redimensionará a la medida exacta.
Así podrás consultar cómo se ve tu página web en cualquier dispositivo que necesites en tan solo un clic.
La ventaja que tiene es que si no están predeterminados los píxeles que buscas, puedes añadir las dimensiones personalizadas y redimensionar a la medida que necesites.
Esta herramienta me gusta sobre todo para utilizar en diseño web a la hora de modificar los Media Querys en CSS, ya que así podemos saber los píxeles exactos para incluir en nuestro código y modificar los elementos.
Whatfont
La elección de tipografías no es una tarea fácil a la hora de diseñar tu página web.
Pero, ¿y si te digo que puedes copiar, de una forma muy sencilla, las tipografías de cualquier web?
Con la extensión Whatfont podrás ver qué tipografías usa cualquier página web de una forma muy sencilla.
Y no solo te dirá la tipografía, sino que podrás ver el estilo (negrita, cursiva…), el peso, el tamaño, el espaciado y el color de la palabra o frase.
En este caso vamos a ver las tipografías de 40 de Fiebre, ya que son unas letras originales.
Con la extensión hemos podido comprobar que utilizan la fuente “Lust Pro” con un tamaño de 70 píxeles.
Si la quisiéramos tener igual en el diseño de nuestra página web, ya tendríamos los tipos de tipografías que utilizan en esta página y solo sería cuestión de incluirla.
¿A que ya no vas a tener nunca más dolor de cabeza con las tipografías? Ahora copiarás la página que más te guste.
Colorpick Eyedropper
Lo mismo que sucede con las tipografías, pasa con los colores.
Muchas veces hemos visto una imagen con un color chulísimo, pero no hemos sabido llegar al tono exacto para utilizarlo nosotros.
Con Colorpick Eyedropper tendremos todos los colores a nuestro alcance, ya que con un clic y poniéndonos encima del elemento, tendremos el código de color.
En este caso he cogido al propio Google para enseñarte la extensión.
Conforme vas pasando el ratón por encima de sus letras, te va diciendo el código de color que tiene.
¡Ya solo es cuestión de copiar y pegar el código del color para nuestro diseño!
TALLER 100% ONLINE Y GRATUITO
¿Quieres aprender a hacer tu página web profesional?
Page Ruler
Page Ruler lo que hace es generar una regla online, es decir, te medirá los píxeles de las secciones que tu indiques.
Y te preguntarás, ¿para qué me sirve a mí esto?
Cuando diseñamos una página web, hay que redimensionar las imágenes que vamos a incluir en cada sección para que la página no cargue más de lo que podría cargar, y el tiempo de carga no sea más elevado.
Por otro lado, si queremos incluir un fondo a un elemento, si lo hacemos en las medidas adecuadas, nos aseguramos que en las distintas pantallas en las que lo veamos, ese fondo va a quedar tal cual esperamos, y no va a quedar oculta ninguna parte de la imagen.
Web Developer
Una de las grandes ventajas de Web Developer es poder ver el CSS personalizado de otras páginas desde la opción CSS, y “View CSS”.
Se nos abrirá una ventana con los códigos que utiliza la web que estamos inspeccionando.
Otra de las opciones que me encanta de esta herramienta es la posibilidad de ver el atributo ALT de todas las imágenes de nuestra web.
Seguro que al igual que a mí, a ti también se te ha olvidado alguna imagen sin este atributo.
Otra cosa que te permite esta extensión es ver el tamaño de las imágenes en píxeles, por lo que si vemos que alguna excede las dimensiones de donde está situada, deberíamos optimizarla.
Además, nos permite también visualizar los anchor text, inspeccionar cada elemento y ver su información.
Otra de las cosas que utilizo a diario a la hora de escribir un post es investigar los títulos de la competencia, y esto con esta herramienta es muy sencillo. Te lo voy a explicar.
Si nos vamos a un artículo y en la extensión clicamos sobre Información y sobre “View Document Outline”, se nos abrirá una ventana con la distribución de los títulos H como la siguiente:
Otra de las ventajas que tenemos con esta extensión es que en la opción de Información, “View Color Information”, nos permite ver la paleta de colores de la web que estemos analizando.
Por otro lado, en Miscellaneous, tenemos una opción llamada “page ruler”, donde se nos activará una regla virtual en la que podremos medir los elementos de nuestra web, sin necesidad de descargar una nueva extensión de Chrome.
Como ves, esta herramienta es fantástica para ver pequeños fallos que hemos cometido en nuestra web y podemos solucionar, pero tienes que tener en cuenta que muchos de estos aspectos no entrarán dentro del presupuesto de tu página web, sino que están relacionados con el SEO y tendrás que solicitarlos aparte.
Además, nos da mucha información de otras páginas webs y la nuestra para poder llevar a cabo muchísimas acciones.
Para mí, es la mejor extensión de diseño web y marketing que existe. Es una herramienta muy completa.
Stylebot
Cuando hablamos de modificar el código de nuestra página, muchas personas lo ven un mundo el cual no quieren ni visitar.
Pero, ¿y si te digo que con esta extensión puedes seleccionar tus elementos, modificarlos visualmente y te genera el código CSS automáticamente?
Te voy a enseñar cómo hacerlo utilizando Stylebot.
En esta imagen de mi home he seleccionado con la fecha el título, y he empezado a aplicarle estilos.
Primero se le ha aplicado una negrita, unas mayúsculas y una barra por encima de las letras.
Luego le he aplicado un fondo de color rosa y he cambiado las letras a un color blanco.
Una vez tengo ya decorado mi título, voy a la pestaña de “Edit CSS” y me aparecerá el siguiente código:
h1.q_slide_title span {
font-weight: bold;
font-variant: normal;
text-transform: uppercase;
text-decoration: overline;
background-color: #ff637d;
color: #ffffff;
border-style: solid;
}
Ahora solo quedará irnos en nuestro WordPress a “Apariencia”, “Personalizar”, “CSS personalizado”, y copiar el código.
¡Ya tendremos nuestro título modificado a CSS!
Dimensions
Dimensions es otra herramienta para poder medir los píxeles que tienen los elementos, pero de una forma mucho más sencilla y visual.
Solo tienes que clicar sobre ella y buscar la medida exacta para que te diga los píxeles que tendrá.
CSSViewer
Con CSS Viewer lo que haremos es, en vez de modificar nuestro CSS, podremos investigar el CSS de las páginas webs.
Una vez tengamos abierta la web, seleccionamos la extensión, y vamos elemento tras elemento inspeccionando cómo tiene elaborado su código, nos dará toda la información que necesitemos.
Broken Link Checker
Conocemos diferentes herramientas para comprobar los enlaces rotos de nuestra página web, pero con una simple extensión llamada Broken Link Checker, podemos comprobarlo en segundos.
Una vez estamos en la página web que queremos analizar y pulsamos el botón de la extensión de Google Chrome, empieza a realizar el análisis, y todos los enlaces se ponen en color verde.
Cuando terminamos el análisis nos dice si tenemos enlaces rotos en nuestra web, y nos da la opción de analizar todas las páginas del site, por lo que es una manera muy cómoda de ver esos enlaces que tan poco nos gustan.
Color Tab
La herramienta Color Tab es de Colorhunt, y lo que hace es crear paletas de colores cuando abres una pestaña nueva en Google Chrome.
Existen muchos generadores online de paletas de colores, pero la ventaja de este es tenerlo instalado en el navegador y nos puede dar muchas ideas cuando estemos dudosos sobre qué colores elegir en nuestros diseños.
Además si te metes en la web de la extensión puedes filtrar las paletas por cálidas, populares, nuevas o aleatorias.
TALLER 100% ONLINE Y GRATUITO
¿Quieres aprender a hacer tu página web profesional?
PerfectPixel
Con la extensión PerfectPixel de Google podemos hacer una superposición de imágenes en nuestra web, para ver la colocación exacta de los elementos en píxeles en nuestra página web.
Vas a poder comparar también los tamaños de las imágenes para que una vez vayas a montar la web, te queden perfectas en el sitio que habías pensado antes.
YSlow
Muchas veces cuando creamos una página web, a la hora de optimizar, vemos que la velocidad de carga es más alta de lo que esperábamos.
Podemos acudir a páginas externas como el Test Pingdom, el cual nos ayuda a analizar la velocidad y a identificar qué es lo que está llevando a nuestra página web a cargar tan lento.
Pero también tenemos la opción de medirlo con una extensión llamada YSlow.
Esta extensión te dirá el peso del Javascript, CSS, imágenes, etc. de tu página web.
Podrás también comprobar las reglas que cumple o no cumple tu web, como la compresión gzip, si los CSS están minificados, etc.
Es una extensión que nos dará pistas acerca de la optimización de nuestra página web y de cómo mejorarla.
Muzli 2
La extensión Muzli lo que hace es que por cada pestaña nueva que abras en Chrome, te enseña diferentes diseños de páginas webs los cuales pueden darte ideas para tu propio diseño.
Esta herramienta no aporta funcionalidades en sí, pero hay días que estamos muy poco inspirados y nos viene bien que nos aporten ideas. Con esta herramienta, las ideas vendrán solas.
Además, no solo te aporta diseños web, puedes ver tendencias, noticias, ilustraciones súper innovadoras, artículos de expertos en el diseño web, etc.
Web Developer Checklist
La extensión de Google Web Developer Checklist escanea tu web y te dice de su checklist (SEO, usabilidad, accesibilidad…) qué es lo que cumple y qué no, sacando conclusiones e informándote acerca de qué necesitas mejorar.
Está conectado con Google PageSpeed, así que puedes ver en todo momento tu puntuación sin necesidad de irte a otra ventana.
Además, en cada apartado, te facilita un documento explicativo para en cada opción podernos detallar qué es lo que deberíamos mejorar.
¿Qué extensiones debo tener en Chrome para diseño web?
Como ves, hoy en día es muy fácil descargar cualquier extensión de Chrome gratis, incluirla en nuestro navegador y que nos facilite un poco el trabajo.
Existen multitud de extensiones que podemos descargar, pero también es verdad que muchas no son útiles para lo que estamos buscando.
Me encantaría que me dijeras si conoces alguna herramienta más que se me haya pasado o no conozca y sea perfecta para esta lista.
¿Conoces alguna otra extensión de diseño web que incluirías?
¿Utilizas a diario alguna de estas extensiones?
Descubre la comunidad de diseñadores web.
30 comentarios en «15 Mejores Extensiones para Google Chrome de Diseño Web»
Buenísimo Articulo!
Me ha encantado Color Tab, es lo que me hace falta. Muchas veces me quedo sin inspiración al realizar web’s. Muchas gracias por el artículo!
Saludos
Muchísimas gracias!!!
Este blog ha sido un gran descubrimiento 🙂
Muchísimas gracias por el trabajo realizado. ¡Vamos a ponerlo en práctica!
Muchísimas gracias Luisa!!!
Genial aporte Bego, voy a probarlas, muchas gracias por compartirlos
Muchas gracias!!
Puff con estás extensiones del Chrome son lo mejor! Te ayudan muchísimo. Gracias por tu post.
Gracias a ti Amparo 😉
¡Hola Bego! Enhorabuena por el post, no conocía muchas de ellas 😱
He flipado con StyleBot, me parece una herramienta brutal para los que somos reacios a tocar el código de nuestra web (que somos muchos).
Yo te recomiendo Picture in Picture, sirve para ver vídeos de cualquier plataforma en segundo plano mientras hacemos otras tareas. ¡Yo la utilizo todos los días y es súper útil!
Espero que te sea de utilidad. ¡Un saludo!
Mil gracias por el consejo Rubén, me alegro un montón que te haya gustado!!!
Un abrazo 😉
Hola Bego, gracias por tu aporte, hay que sacarle provecho a esas extensiones que nos recomiendas. Aprovecho para sugerirte que modifiques la barra lateral de la opción para compartir por RRSS, ya que se monta sobre el texto y perturba un poco la lectura.
Gracias Henry, lo tendré en cuenta! Un abrazo 😉
Una magnífica recopilación, la añado a Favoritos para investigar con calma 🙂
Gracias Ramón, la verdad es que estas extensiones me ahorran faena de tener que buscar con el inspector cada una de las cosas. ¡Son una maravilla!
Empiezo a visitar tu web mas a menudo de lo que debería debido a mis obligaciones de todo tipo, puede ser que esté enganchandome???
Gracias por los magnificos contenidos
jajajaja, ¡eso es bueno! Muchísimas gracias Jose, espero que estés aprendiendo mucho con los posts 🙂
¡Hola!
Es genial el uso de extensiones, y la facilidad que ofrecen para realizar tareas que son más complicadas y requieren de más tiempo para su desarrollo. Actualmente hago uso de la extensión Piktochart para hacer infografías y me gusta mucho.
Muchas gracias por el post Bego, es muy valioso, lo añado a marcadores para leerlo cuando sea necesario.
¡Saludos!
Hola Ricardo,
Muchas gracias por las palabras, la verdad es que las extensiones nos agilizan un montón. Yo antes trabajaba sin ellas, y desde que las descubrí hago todo de una forma más eficiente.
Un saludo 😉
Algunas de esas extensiones hacen básicamente lo que puedes hacer con el inspector del navegador. F12 al poder!
Está claro, pero no todo el mundo sabe utilizar el inspector, por lo que agiliza el trabajo a muchas personas.
¡Gracias por el aporte!
Un saludo 😉
¡Muy buena recopilación, Bego!
Algunas las conocía… pero he encontrado otras muy útiles ?
¡Muchas gracias Isaac! La verdad es que son una pasada, y agilizan mucho el trabajo.
¡Un abrazo!
Genial tu aporte, me ayudará muchísimo ya que estoy aprendiendo sobre creación de páginas web.
Yo llevo un tiempo usando Piktab una extensión que me muestra una serie de gráficos (íconos, fotos, vectores, incluso video tutoriales sobre gráficos) libres de derechos de autor. El contenido se muestra cada vez que se abre una nueva pestaña en chrome.
Saludos y gracias
Sin duda probaré la extensión que dices. ¡Muchas gracias por tu aporte!
Saludos Bonny 😉
Me ha encantado la recopilación, algunas las uso y otras me vienen de maravilla!!!
Me alegro que te haya gustado y que hayas descubierto nuevas herramientas para tus diseños!!
Un abrazo 😉
Hola bego muy buen aporte te recomiendo
CSS peeper
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
Y Loom para grabarte a ti y tu pantalla; y enviarle un video email a tu cliente.
Saludos desde La Paz México.
Hola Luis,
Muchísimas gracias por tu recomendación, ya que me hacen aprender a mí también y conocer nuevas herramientas para el diseño web.
He estado viendo las dos, sin duda las probaré y pondré en práctica.
Saludos 😉
Hola Bego, una recopilación genial 😉
Tras la reciente incompatibilidad de Firebug con firefox, me he pasado a chrome para el desarrollo, con lo que voy un poco perdido. Tu colección sobre sus mejores extensiones ha sido de gran ayuda.
¡Pienso probarlas todas!
Tal vez eche de menos Session Manager, que esa sí la uso. Si no la conoces deberías probarla.
Suerte con tu nuevo proyecto!!!
Hola Ernesto, me alegro mucho de que te haya sido de gran ayuda, yo desde que descubrí estas extensiones me ahorro mucha faena.
En cuanto a Session Manager, no la conocía y desde luego que la voy a añadir a mi barra de Chrome! Además de incluirla en la próxima actualización del post.
Muchísimas gracias por tus palabras y por el aporte,
¡Un abrazo!