- Escrito y revisado por José Peña
- Fecha de publicación:
- Fecha de revisión:22/02/2024
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.
Hay que adaptarse a las tendencias de diseño web y las necesitarás para trabajar de forma rápida y comoda
15 Extensiones de Chrome para Diseño Web que no te pueden faltar
Todas las extensiones de Google Chrome para Diseño web que vas a ver son gratuitas
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.
Extensiones 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.
Si quieres vivir de internet ¡Suscríbete!
Recibe Trucos / Consejos sobre SEO y Monetización
Información básica sobre protección de datos:
- Responsable: José Manuel Peña Fernández
- Finalidad: recoger y tratar los datos personales que te solicito para gestionar la solicitud que realizas en este formulario de contacto.
- Legitimación: tu consentimiento de que quieres comunicarte conmigo.
- Destinatarios: tus datos serán guardados en Webempresa, (proveedor de hosting de Tu Web de Cero) dentro de la UE.
- Derechos: tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
- Información adicional: Puedes consultar la información adicional y detallada sobre protección de Datos en mi Política de Privacidad.
Un diseñador web profesional debe tener siempre a mano estas herramientas.
〉〉 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.
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
Te interesa leer este artículos sobre la psicología del color
〉〉 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
〉〉 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.
〉〉 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.
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.
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
〉〉 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.
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.
〉〉 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.
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.
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.
〉〉 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.
〉〉 Image downloader: 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 para subirlas optimadas en peso por ejemplo.
Es útil para bajar las propios fotos de tu página o el logotipo 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:
Las mejores herramientas de edición de fotos
Programas para hacer un logo gratis
Descarga esta útil extensión
〉〉 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.
Te interesa leer.
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 page builder 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.
〉〉 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.
Si quieres aprender más sobre CSS y ver que no es tan difícil, puedes leer un Tutorial muy completo para principiantes aquí
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 déjame un comentario!
