Google nos facilita estas herramientas para hacernos la vida más fácil. Contar con extensiones de chrome para el diseño web te van a ayudar a facilitar la tarea como diseñador web.
Cuando te dispones a crear una página web es clave contar con las mejores extensiones de Google chrome para diseño web.
Estas extensiones te ayudaran a saber el color de una página web determinada, las medidas de una foto, el tipo de letra o para crear códigos personalizados de CSS.
Además, añadir una extensión en Google Chrome es tan sencillo como poner su nombre en el buscador, abrir la página en cuestión de la extensión y descargarla.
Page Ruler
Esta extensión permite mostrarte las medidas exactas de una imagen desplazando el ratón, de esta forma podrás ajustar mejor el diseño de la web usando imágenes específicas que necesites.
Page Ruler te permitirá escalar de manera exacta las imágenes antes de subirlas a la web, ya que podrás medir los pixeles de las secciones que le indiques.
Esto te permitirá subir imágenes del tamaño perfecto para la web, que no estén distorsionadas y mejorar la velocidad de carga de tu web.
Colorzilla
Esta extensión de Google Chrome te permitirá localizar el color de una web en un solo click.
Una vez la tengas instalada la extensión, haz click en el pincel y pincha con el ratón en el sitio en que quieres saber en código del color. Es una herramienta sencilla, rápida y efectiva con la que puedes conocer el código CSS para hacer degradados.
Otra extensión muy similar es ColorPick Eyedropper, con un clic y poniéndonos encima del elemento, tendremos el código de color.
Whatfont
Elegir tipografías para una web no es una tarea sencilla, te puedes volver loco a la hora de buscar una que encaje con el proyecto que estés realizando.
Pero, ¿y si te aseguro que gracias a esta extensión va a poder copiar, de forma sencilla, las tipografías de cualquier sitio web?
Whatfont te permitirá ver las tipografías que usa cualquier web, el estilo (negrita, cursiva…), el tamaño, el peso, el espaciado y el color de la palabra o frase.
Solo tienes que seleccionar el icono de la extensión, hacer click en la letra que quieras saber la tipografía y la herramienta te mostrara cual es. Es una herramienta que te permitirá ahorrar mucho tiempo.
FireShot
Podrás realizar capturas de imágenes de una página web, editar las capturas de pantalla y guardarlas en PDF/JPEG/PNG/GIF/BMP.
Esta extensión de Google Chrome es tan simple en su uso como rápida. Te permite una captura completa, parcial o por áreas.
Windows Resizer
Como diseñador web, cuando diseñas una web quieres que el resultado sea perfecto en cualquier tipo de dispositivo (ordenador, portátil, tablet, móvil) en el que se vea.
¿Cuántas veces te ha pasado que la web se ve perfecta desde tu ordenador, pero después en otra medida de pantalla más pequeña algunos elementos no se ven como esperabas?
Con esta extensión de Windows Resizer, te permitirá consultar como se ve tu página web en cualquier dispositivo con tan solo un clic. Esto te permitirá ajustar el responsive de tu web.
La ventaja es que vas a poder añadir dimensiones personalizadas y redimensionar tu web a las medidas que necesites para el dispositivo en cuestión.
Esta herramienta es perfecta a la hora de modificar los Media Querys en CSS, ya que podrás saber los píxeles exactos para modificar el código de tu web y modificar los elementos.
Wireframe
Wireframe te permitirá entrar en cualquier página web y ver su distribución. Es muy útil a la hora de arrancar un proyecto ver porque te permite indagar en las web que te gusten para sacar ideas de como colocar los elementos.
Esta extensión de Google Chrome organiza la web en secciones, mostrando todos los elementos de los cuales se componen una determinada página web.
Web Developer checklist
Podrás comprobar si tu página web esta diseñada siguiendo las buenas practicas el lo relativo al SEO, usabilidad y rendimiento avisándote de cualquier error que detecte.
Una de sus mayores ventajas es la posibilidad de ver el CSS de otras web desde opción CSS, y View CSS. Se nos mostrara una ventana con los códigos de la web en cuestión que estemos analizando.
Otra de las opciones es la posibilidad de ver los atributos ALT de las imágenes de la web. También nos permitirá ver el tamaño de las imágenes en píxeles.
Tenemos otras opciones como poder ver los anchor text (inspeccionar cada elementos y ver su respectiva información) e investigar en los post los títulos que pone tu competencia. Esto ultimo resulta de mucha utilidad a la hora de escribir un post el poder saber los títulos que pone tu competencia.
Otra ventaja que tiene esta extensión es que con la opción «View Color Information», nos permitirá ver la gama de colores de la web que estemos investigando.
Instalar Web Developer Checklist
Stylebot
Con esta extensión vas a poder seleccionar los elementos de tu web, modificarlos a tu gusto a través de la herramienta y esta te dará el código.
Podrás manipular el aspecto de cualquier web uniendo las funciones que tiene la misma extensión como con código propio.
Simplemente con instalarla, la abres y seleccionas el elemento en cuestión de la web que quieras modificar, cambia su tamaño, sus márgenes o el color y haz clic en editar CSS, este código proporcionado será el que tendrás que añadir en tu web.
Full Page Screen Capture
Con esta extensión podrás realizar captura de pantalla de una web al completo, no solo la fracción de la web que se muestra desde la ventana del navegador.
Es mi opinión en una herramienta muy útil para guardar el contenido de una web que se valla a dejar de ver y quieras recopilar información sobre ella.
Instalar Full Page Screen Capture
CSSViewer
CSSViewer nos permitirá investigar el CSS de las páginas web, lo que nos ayudara a modificar nuestro CSS.
Simplemente teniendo la página abierta, seleccionamos a extensión y podemos ir elemento tras elemento inspeccionando el código del mismo para darnos toda la información que necesitemos.
Broken Link Checker
Se conocen en el sector diferentes herramientas en el que puedes comprobar los enlaces rotos que tiene una web como Screaming Frog. Pero con esta extensión lo podrás comprobar en unos pocos segundos.
Una vez dentro de la web que quieras analizar y pulsamos el botón de la extensión Broken Link Checher, se empieza a realizar el análisis y cada uno de los enlaces se pone en color verde.
Cuando se termina el análisis nos muestra si tenemos enlaces rotos en la web. También nos da la opción todas las páginas del sitio, por lo que resulta una manera cómoda de poder ver esos enlaces.
YSlow
Puedes acudir a páginas web como Pindgom, el cual nos ayuda a analizar la velocidad web y a identificar los factores que están llevando a nuestra página web a cargar más lento de lo que debería.
YSlow te permite analizar la velocidad de carga de una página web y seleccionar los elementos que están bloqueando la web. Además, esta extensión te sugiere como puedes optimizar su desarrollo para mejorar así la velocidad lo que te ayudara de cara al SEO de la web.
Esta extensión nos dirá el peso del Javascript, CSS, imágenes, etc. Puedes comprobar que reglas cumple o no cumple la web, somo la comprensión gzip o si los CSS están minificados.
CSS remove and combine
Es una extensión que te va a permitir analizar los estilos CSS de cualquier web.
Te permite modificar o eliminar elementos y crear un CSS propio que vas a poder descargar para que lo puedas utilizar en algún otro proyecto. Esto te permitirá ahorrar tiempo en la fase de diseño de la web.
Instalar CSS remove and combine
Drag design
Drag design nos permite mover (arrastrando o soltando) distintos elementos de manera ficticia dentro de una web. De esta forma podrás ver como quedarían un número determinado de cambios en web sin tener que editarlo de manera real.
Es una extensión que te permite visualizar o mostrar a un determinado cliente un cambio puntual que en un momento dado puede servir de mucha utilidad.
También te permite realizar un rediseño de una web que nos guste con la idea de adaptar dicho diseño al diseño de tu página web.
Image downloader
Es una extensión que te permite descargar fotos de una web de manera rápida y sencilla.
Resulta muy útil a la hora de bajar las fotos de tu página web para reajustarlas o editarlas de nuevo. Una vez estas dentro de la web tienes que pinchar en la foto que quieras descargar e incluso tienes la opción de descargar todas las fotos de la web de golpe.
Conclusión
Hoy en día resulta muy sencillo descargar cualquier extensión de Google Chrome de manera gratuita, incluirla en el navegador y que no ayude a facilitarnos un poco más nuestro trabajo.
Existe una amplia variedad de extensiones que podemos descargar, pero la verdad que muchas no nos van a servir de utilidad para lo que estamos buscando.
