15 Extensiones de Chrome para diseño web imprescindibles

Cuando vas a crear una página web necesitas contar con las mejores extensiones de chrome para diseño web.

Si cuentas con extensiones de chrome de diseño, programas o herramientas que te faciliten la tarea como diseñador web, estas harán que el desarrollo del proceso de creación de tu sitio sea más fácil.

Imagina saber el color de una determinada web, el tipo de letra, poder usar herramientas de diseño web para editar imágenes o para crear códigos personalizados CSS a golpe de clic, una maravilla ¿verdad?

Todo esto vamos a verlo en este artículo, cuando veas las extensiones de google chrome para diseño web que te muestro, las colocarás como favoritas y las tendrás siempre a mano.

INDICE

15 Extensiones de Chrome para Diseño Web que no te pueden faltar

En este post vas a ver las mejores extensiones de chrome y alguna herramienta online que te van a facilitar mucho el trabajo de diseño de páginas web desde tu propio navegador de manera muy rápida y sencilla.

Voy a desglosarlo por grupos en función de el uso que tienen.

Cuando diseñas, tienes que aprovechar al máximo el tiempo, con estas complementos de chrome para diseño web, todo será más fácil.

Vamos a ello.

elementor proExtensiones de Chrome para diseño web en tipografías y colores

Las tipografías y los colores forman una parte esencial en el diseño web, poder contar con aplicaciones como son las extensiones de Google chrome para facilitar la tarea es un lujo.

Whatfont: extensión de diseño web para fuentes y colores

Whatfont es una extensión de Google Chrome que usarás muy a menudo.

Lo bueno que tienes este tipo de extensiones de chrome para diseño web que ofrece la barra de tareas del navegador de Google es que te permiten realizar cualquier función a golpe de clic

 

La elección de tipografías no es una tarea fácil a la hora de diseñar tu página web, te puedes volver loco escogiendo una que encaje con el proyecto que estás realizando.

¿y si te digo que puedes copiar, de una forma muy sencilla, las tipografías de cualquier sitio?

 

Con la extensión Whatfont, podrás estudiar qué tipografías que usa cualquier página de una forma muy fácil.

Selecciona el icono de la extensión, haz clic en la letra que quieres reconocer y la herramienta te mostrará cual es, además no sólo eso sino que además te indica el color el tamaño, estilo o grosor de la letra.

Como ves en la imagen te lo da todo.

 

extensiones de chrome whatfon

 

Una herramienta imprescindible que te puede ahorra mucho tiempo.

Si te ha gustado no te pierdas más abajo otra que te mostrará en un clic como se ve tu web con otra letra transformándola por completo

Instalar Whatfont

 

Colorzilla: extensión de diseño de páginas web para copiar el color de la competencia

¿Te gustaría usar el mismo color que una web que has visto? Sin problema.

Con la extensión de chrome colorzilla es muy fácil  localizar un color en una página .

Una vez instalada, haz clic en el pincel(cuentagotas) pincha con el ratón en el color del sitio que te gusta y listo, pega el código hexadecimal en tu sitio.

 

Y no sólo eso, ya que podrás estudiar la gama de todos los colores que utiliza una determinada web o usar un editor de gradiantes para los colores.

Sencilla, rápida y efectiva.

Descargar Extensión Colorzilla 

 

Color Hex Palettes: la paleta de color que necesita un diseñador web

Esta no es una extensión de chrome pero sí una herramienta de trabajo de diseño necesaria.

Se trata de una extensa paleta de colores (50.000 tipos).

Busca entre su amplia paleta de colores la gama que te guste y te mostrara de cada uno de los distintos tonos el código.

Este programa online te permite además ver el código RGB de un color seleccionado y los porcentajes que utiliza.

 

En base al color escogido muestra colores monocrómaticos o complementarios de un color que necesitemos.

Además si escogemos un color, ofrece ejemplos con variantes CSS para establecer bordes o sombreados

 Ir a Color Hex Palettes

 

Circulo cromático: la ruleta de color para tu web o blog

Una herramienta online de gran utilidad.

Este aplicación de internet es imprescindible si queremos tratar el color con todas sus variantes.

A través de una rueda de colores te muestra aquellos que son similares o análogos y los que serían totalmente opuestos para poder usar como llamada a la acción.

 

Si no tienes gusto o tienes dificultades para mezclar colores, con esta herramienta de diseño online lo tendrás muy fácil,

En el video del principio, ya te expliqué como funciona este programa de mezcla de color.

Ir a Circulo Cromático

 

Google Font Previewer para Chrome: extensión de diseño para cambiar la fuente

¿Y si te digo que puedes escoger cualquier página al azar y ver como sería el resultado del diseño si le cambias la letra?.

Mira la imagen para ver como quedaría la web de Rubén Alonso con otra tipografía.

 

Google Font Previewer para Chrome

 

La verdad es que escoger  el tipo de letra para una web es muy pesado y te puede quitar mucho tiempo, incluso una vez terminado el diseño se te puede antojar otra tipografía  y te aseguro por experiencia que no sabrás cuando parar, con esta extensión es muy probable que te decidas pronto

Con esta extensión de Google chrome podrás estudiar el tipo de letra que tendría tu web en vivo simplemente eligiendo la tipografía que quieres probar y ver como quedaría en tu web.

 

Cuando te decidas todo será más fácil de aplicar.

Descargar la extensión

 

¿Sobre que temática quieres que te hable?

Suscríbete y elige un GRUPO

Recibe los últimos artículos, trucos, tips de Seo, Marketing o Diseño Web

 

Extensiones de google chrome para tamaños y resoluciones de pantalla

No todos los diseños se ven igual en todos los sitios, necesitas herramientas para estudiar si el diseño es perfecto

Responsive web design tester: extensión de diseño de visualización en dispositivos

Típica pero necesaria aplicación.

Puedes analizar en tu navegador mediante esta extensión para diseño web como se ve en los distintos dispositivos.

Como ya sabes es primordial que el diseño de tu sitio sea responsive y con esta extensión puedes ver si la web se adapta a todos los dispositivos móviles.

 

En la actualidad se navega más a través del móvil que desde el desktop, tienes que pensar en un diseño adaptado a ello, con esta extensión de google chrome verás rápida y fácilmente si tu web se ve perfecta en todos los dispositivos.

Descargar esta herramienta

 

Windows Resizer: ¿cómo se ve tu web o blog en otras resoluciones?

Cuando diseñas una web el resultado quieres que sea perfecto, esto a veces es complicado porque juegan muchos factores que hacen que el resultado sea distinto dependiendo de la pantalla en que se vea.

Con esta extensión conseguirás ver el resultado en diferentes resoluciones para ajustar el responsive.

 

Utiliza las resoluciones por defecto o indica la que necesites estudiar.

Este programa de chrome facilita mucho la labor para poder incluir Css si fuera necesario.

Descargar

 

Herramientas de diseño de páginas web para edición y maquetación

Todo diseñador web necesita herramientas para editar imágenes o maquetar diseños para uso propio o para clientes, con esta herramienta y extensión de chrome ganarás tiempo.

Ninja mock: crea bocetos con este instrumento de diseño

Ninja mock no es una extensión de google chorme pero sí una programa de diseño online que te permitirá crear con un sistema de arrastrar y soltar bocetos para identificar los distintos elementos que tendrá una web.

Si quieres crear una vista previa de lo que será el resultado de tu diseño o bien quieres explicar a tu cliente como va la estructura con Ninja Mocks es fácil.

 

Con este programa online gratuito al que accederás mediante usuario y contraseña o a través de tu cuenta de gmail podrás organizarte y ganar tiempo.

Ir a Ninja Mock 

 

Drag design: extensión de chrome de diseño web en vivo

Esta extensión de Crome permite que muevas (arrastrando y soltando) distintos elementos ficticiamente dentro de una web, de esta manera podrás ver como quedarían unos determinados cambios sin tener que editar tu sitio

Se trata de una extensión para que visualices o muestres a un cliente un cambio puntual que un momento dado puede venir bien.

 

También puedes hacer tu propio rediseño de una web que te guste con la intención de adaptar el diseño a tu sitio nuevo.

Para utilizarla sólo tienes que hacer clic en la extensión con el botón derecho del ratón encima del elemento que quieres mover o editar.

Descargar 

 

Extensiones de chrome para imágenes y edición de capturas

Las extensiones de chrome que vas a analizar ahora agilizan mucho el trabajo.

Awesome screenshot: edita las capturas de las imágenes con esta gran extensión

Herramienta muy útil para trabajar con capturas de pantalla, simplemente una vez este instalada en tu barra de extensiones, podrás hacer clic en  las diferentes opciones de capturas de pantalla a distintos tamaños.

extensión awesome screenshot

 

Lo bueno que tiene es que puedes editar la captura directamente usando lapices, colores, objetos o añadir textos.

Una vez terminado puedes descargar la imagen

Además puedes utilizar grabación de videos gratuitamente de forma sencilla, útil por si quieres mandar a un cliente un vídeo rápido.

Descargar Awesome screenshot

 

Fire shot: herramienta de google chrome para crear pdf

Con Fire shot podrás transformar en un segundo una captura en pdf, esto puede ser muy útil para guardar el usuario que quiera guardar un post al poder crear artículos descargables en tu sitio por ejemplo.

Esta extensión de Google chrome es tan simple como rápida.

Permite hacer una captura completa o parcial o por areas o también  guardar como png o jpg

 

Una vez realizada la captura puedes tambien enviarla por email o imprimir.

Una extensión muy buena para los usuarios de un blog o para la comunicación con el cliente o para el propio diseñador web que quiera guardar elementos.

 Instalar Fireshot

 

Image spark: una extensión de chrome para descargar imágenes de una web

Esta extensión de chrome es muy práctica para descargar fotos de una web.

Aunque esto no es normal ya que no es legal, sí puede usarse y ser útil para practicas, muestras o modificar imágenes de nuestra propia página web.

Es útil para bajar las propios fotos de tu página para reajustar o editarlas nuevamente.

Una vez tengas la web tienes que pinchar en la foto que quieras descargas e incluso descargar todas de golpe


Te interesa leer:

30 Bancos de imágenes gratis


Instalar Image Spark

 

Page ruler: mide las fotografías en un clic

Mide cada imagen con esta fantástica herramienta de diseño desde tu navegador.

Esta extensión de chromelo que permite es que mediante indicadores extensibles, obtienes las medidas exactas de las imágenes que selecciones, de esta manera podrás ajustar mejor el diseño usando imágenes específicas que necesites.

 

Muestra las medidas exactas desplazando el ratón.

Piensa que las imágenes que subas no pueden estar escaladas, poco ayuda que necesites una imagen de 400×300 y la subas a 950x 600, se verá más pequeña y estarás consumiendo recursos.

Instalar Page Ruler


Te interesa leer.

Cómo optimizar las imágenes

Cómo mejorar la velocidad de una web


Extensiones de chrome para personalizar el CSS

El CSS forma parte del diseño web , hoy día aunque menor médida sigue siendo necesario en ocasiones, con estás 2 herramientas de chrome apenas necesitarás conocimientos de código.

Stylebot: personaliza tu diseño con CSS

Cuando hablamos de modificar el código css la gente se asusta.

Pero, ¿y si te digo que con esta extensión puedes seleccionar tus elementos, modificarlos a tu manera a través de la herramienta y esta te da el código? ¿Sorprendente verdad?

 

Aunque cada vez es menos necesario usar CSS debido al uso de maquetadores o plantillas adaptadas perfectamente al diseño, en ocasiones es necesario usar CSS para personalizar algún elemento a nuestro gusto.

Con esta extensión de chrome es muy fácil.

Simplemente una vez instalada, ábrela y selecciona el elemento de la web que quieres modificar, cambia el tamaño, color o márgenes y haz clic en editar css cuando hayas terminado, este código generado será el que tendrás que insertar en tu sitio.

 

¿Cómo?

Haz clic en el panel de control de tu WordPress en Apariencia>personalizar CSS, copia el código, observa que se han realizado los cambios y listo.

Descargar Stylebot

 

Live CSS Editor: herramienta de diseño web de CSS

Si la anterior te gusto está también es muy buena ya que te permite realizar cambios en vivo y ver como quedarían en un sitio determinado.

Si no quieres realizar los cambios en tu  página puedes hacerlo en esta extensión de chrome y luego copiar el código en tu web de la misma manera que la anterior herramienta de diseño.

Este tipo de extensión es muy útil para realizar pruebas de CSS.

Instalar

Conclusión

Las extensiones de google chrome  para diseño web son necesarias si quieres ahorrarte trabajo, imagina el tiempo que perderías escogiendo un color o una letra por ejemplo sin este tipo de herramientas.

Yo no puedo vivir sin ellas, por eso te recomienda estas extensiones de diseño, pruébalas y dime si te gustan en los comentarios, y si además, necesitas más que sirven para más funciones, aquí tienes una amplia variedad de ellas que van a facilitarte mucho el trabajo en todos los campos que necesites.

 

¿Tú conoces alguna otra extensión de chrome imprescindible que utilices en tu día a día? Cuéntamelo en los comentario 😉

¡Compártelo y dame tu puntuación!

15 Extensiones de Chrome para diseño web imprescindibles
5 (100%) 4 votes

Soy Diseñador Web en Badajoz y Consultor de Marketing Digital | Trabajo como freelance haciendo diseño web para clientes que desean hacer crecer su negocio a través de Internet | Además, enseño en mi Blog cómo crear páginas web absolutamente de cero
Me puedes encontrar en las redes sociales.

8 comentarios en “15 Extensiones de Chrome para diseño web imprescindibles

  1. ¡Madre mía José! Me has descubierto un mundo entero. Llevo tiempo pensando en aprender lo básico de diseño web para poder cambiar la imagen de mi blog y dejarla tal y como quiero, pero esto me ha dejado loca.

    ¡No tenía ni idea de que existían extensiones de Chrome casi para todo! Ya tengo el post más que guardado en favoritos. ¡Gracias por crear contenido de calidad! 🙂

    Un saludo,
    Marta

    • ¡Gracias Marta!

      La verdad es que hay extensiones para casi todo como dices, a mi me encantan y tengo la barra de navegación cargada de ellas, agilizan muchísimo el trabajo.

      Me alegro que las puedas aprovechar.

      ¡Saludos!

Deja un comentario

329 Compartir
Twittear185
Compartir62
Compartir54
Buffer28
+1