Las 15 mejores extensiones para Google Chrome de diseño web

extensiones-chrome-diseno-web
Las 15 mejores extensiones para Google Chrome de diseño web
4.9 (97.14%) 7 votes

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.

Instant Wireframe

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 Instant Wireframe.

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

instant-wireframe-ver-organizacion-web

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.

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

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 esta extensión, 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.

saber-tipografia-web-whatfont

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.

saber-color-web-colorpick

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!

Page Ruler

Esta extensión 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 esta extensión 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:

web-developer-investigar-titulos-competencia

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.

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.

Editar-css-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

Esta 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 esta extensión 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.

Como-ver-CSS

Broken Link Checker

Conocemos diferentes herramientas para comprobar los enlaces rotos de nuestra página web, pero con una simple extensión, 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

Esta herramienta 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.

PerfectPixel

Con esta extensión 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

Esta extensión 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 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?

Soy Bego Romero, diseñadora web especializada en WordPress. Ayudo a emprendedores y empresas a llevar su proyecto al mundo online para conseguir sus objetivos y enamorar a sus clientes con un diseño creativo y único.

Luchadora e inquieta por aprender del entorno digital, siempre en constante formación para crecer tanto a nivel profesional como personal.

Bego Romero
info@begoromero.com

Soy Bego Romero, diseñadora web especializada en WordPress. Ayudo a emprendedores y empresas a llevar su proyecto al mundo online para conseguir sus objetivos y enamorar a sus clientes con un diseño creativo y único. Luchadora e inquieta por aprender del entorno digital, siempre en constante formación para crecer tanto a nivel profesional como personal.

18 Comentarios
  • Ramón
    11:30h, 25 abril Responder

    Una magnífica recopilación, la añado a Favoritos para investigar con calma 🙂

    • Bego Romero
      11:34h, 25 abril Responder

      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!

  • Jose
    09:54h, 25 abril Responder

    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

    • Bego Romero
      09:57h, 25 abril Responder

      jajajaja, ¡eso es bueno! Muchísimas gracias Jose, espero que estés aprendiendo mucho con los posts 🙂

  • Ricardo Muñoz
    09:05h, 10 marzo Responder

    ¡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!

    • Bego Romero
      13:00h, 12 marzo Responder

      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 😉

  • borra
    13:22h, 27 febrero Responder

    Algunas de esas extensiones hacen básicamente lo que puedes hacer con el inspector del navegador. F12 al poder!

    • Bego Romero
      13:41h, 27 febrero Responder

      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 😉

  • Isaac Clavero
    09:42h, 20 febrero Responder

    ¡Muy buena recopilación, Bego!

    Algunas las conocía… pero he encontrado otras muy útiles ?

    • Bego Romero
      09:46h, 20 febrero Responder

      ¡Muchas gracias Isaac! La verdad es que son una pasada, y agilizan mucho el trabajo.

      ¡Un abrazo!

  • Bonny
    04:52h, 13 enero Responder

    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

    • Bego Romero
      10:57h, 17 enero Responder

      Sin duda probaré la extensión que dices. ¡Muchas gracias por tu aporte!

      Saludos Bonny 😉

  • Maria del Carmen González Betancourt
    15:53h, 12 enero Responder

    Me ha encantado la recopilación, algunas las uso y otras me vienen de maravilla!!!

    • Bego Romero
      10:58h, 17 enero Responder

      Me alegro que te haya gustado y que hayas descubierto nuevas herramientas para tus diseños!!

      Un abrazo 😉

  • Luis Cota
    09:31h, 29 diciembre Responder

    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.

    • Bego Romero
      11:58h, 31 diciembre Responder

      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 😉

  • Ernesto
    08:54h, 26 diciembre Responder

    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!!!

    • Bego Romero
      13:22h, 26 diciembre Responder

      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!

Escribe un Comentario

Responsable: Begoña Romero Orozco
Finalidad: Gestión de los comentarios de las publicaciones
Legitimación: Consentimiento del interesado
Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. Los boletines electrónicos o newsletter están gestionados por entidades cuya sede y servidores se encuentran dentro del territorio de la UE o gestionados por entidades acogidas al acuerdo EU-US Privacy Shield.
Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
Si no facilitas los datos solicitados como obligatorios, puede dar como resultado no poder cumplir con la finalidad para los que se solicitan