10 extensiones de Google Chrome para diseñadores

Si es un diseñador web que sigue el proceso de diseño estándar, sus tareas incluyen cosas como:

• investigando
• Estructura alámbrica
• Elegir un esquema de color
• Elegir la fuente correcta
• Probando varias variaciones
• Colaboración con clientes y compañeros de equipo.

Y algo más…

¿Sabes que puedes hacer todo esto y más directamente desde tu navegador? Sí, si es un profesional de Google Chrome, puede realizar todas estas tareas a través de las extensiones de Chrome. La mayoría de ellos con sólo un par de clics.

Por lo tanto, ahorre mucho tiempo y pruebe estas 10 extensiones de Google Chrome para diseñadores.

1. Probador de diseño web receptivo

Publique la actualización optimizada para dispositivos móviles de Google, ¡la capacidad de respuesta es la palabra de moda! Entonces, aquí hay una extensión que le permite probar su sitio web en todos los principales dispositivos móviles Android y Apple.

También funciona sin conexión, por lo que es una excelente opción incluso mientras trabaja en su diseño localmente. Tiene ajustes preestablecidos para todos los dispositivos populares, pero también puede agregar sus dimensiones personalizadas.

Una vez que selecciona un dispositivo para la vista previa, la pestaña actual se abre en una ventana emergente que muestra cómo se vería su página en ese dispositivo.

2. Escribe Maravilla

Las fuentes realmente establecen el estado de ánimo de un sitio, pero es una tarea difícil elegir la correcta. Conoce el ejercicio: volver a su código, hacer cambios y obtener una vista previa. Y todo esto una y otra vez.

Pero aquí es donde interviene esta útil extensión de fuente. TypeWonder te permite cambiar la fuente de cualquier sitio web en tu navegador.

Simplemente visite su sitio web y haga clic en el icono de la extensión. Se le dan varias opciones de fuente. Al hacer clic en cualquiera, se crea casi instantáneamente una vista previa de su sitio web en esa fuente. Si está satisfecho con la vista previa, puede obtener el código correspondiente para agregarlo a su sitio y su archivo CSS.

3. Empaquetador de pestañas

Investigar es un gran problema. Y si eres un diseñador que se toma en serio la investigación, puedo decir con seguridad que en cualquier momento tienes al menos entre siete y diez pestañas abiertas.

¿Qué pasaría si tuviera que obtener la opinión de su amigo diseñador o compañero de equipo sobre los sitios a los que se refiere? Marcará todas las páginas en una carpeta, exportará todo y luego elegirá el conjunto para enviar, por supuesto, después de abrir su programa de correo. ¡Menudo trabajo!

Por suerte, no tienes que trabajar tan duro. Tab Packager le permite empaquetar todas las pestañas abiertas. Y luego puede enviar a través del enlace del paquete con solo un clic. Puede compartir a través de correo electrónico, Twitter y muchos más servicios.

4. TrackDuck

La comunicación efectiva está detrás de cada proyecto exitoso. Pero puede consumir mucho ir y venir con correos electrónicos que intentan resolver pequeños ajustes o hacer grandes cambios.

Ahora bien, esto puede parecer un poco exagerado, pero TrackDuck es como una mini-Asana, exclusivamente para diseñadores.

TrackDuck es una herramienta de colaboración visual que le permite agregar sitios web como proyectos. Una vez que agrega un proyecto, puede invitar a sus compañeros de equipo. Cada vez que dejas un comentario en este proyecto (o sitio web, lo que puedes hacer simplemente haciendo clic en el ícono de la extensión), se genera una tarea sobre el comentario. Puede asignar esta tarea a sus compañeros de equipo, agregar archivos adjuntos y capturas de pantalla e integrarla con muchas herramientas de colaboración como Trello y Basecamp.

5. Color Zilla

Nunca se sabe cuándo verá un color encantador que inspirará la paleta de su próximo proyecto web.

Entonces, ¿cómo capturas cualquier color en la web?

Bueno, aquí está ColorZilla: fácilmente es el obsequio de Chrome favorito de todos los diseñadores. Su característica más básica y popular es obtener el código de cualquier color en una página web.

Otra característica es que te permite obtener el esquema de color de cualquier sitio web. Deberá hacer clic en la opción Analizador de color de la página web y aparecerá una paleta que muestra todos los colores en esa página web.

6. Qué fuente

Muchas veces te encuentras con un sitio web que utiliza la fuente, el color y el tamaño perfectos. De hecho, podría ser tan bueno que quieras usar la combinación exacta en tu sitio.

Pero ya no tiene que tomar la ruta Inspeccionar elemento: WhatFont disecciona cualquier fuente en una página web con un solo clic.

Simplemente haga clic en el icono de la extensión y coloque el cursor sobre la sección de texto que le interesa. WhatFont produce el tipo de fuente, el tamaño, la altura, el color y la familia.

7. Estructura alámbrica instantánea

Si define la jerarquía de información de su sitio web antes de diseñarlo, creará un sitio fácil de usar. Y el wireframing es la mejor manera de hacerlo.

La extensión Instant Wireframe le permite ver una estructura razonablemente buena de cualquier página web. Todavía está en beta pero hace un buen trabajo.

Si se encuentra con un sitio del que le gustaría ver la estructura metálica, simplemente haga clic en el icono de la extensión en la barra de direcciones. ¡Vale intentarlo!

8. Regla de página

Hay algunas formas de medir las dimensiones de los elementos de una página web. Pero la mayoría de ellos implican varios pasos y toman tiempo.

Page Ruler es la forma más práctica de hacer esto. Page Ruler le permite ver la altura, el ancho y la posición relativa de un elemento. También puede analizar los elementos div-wise.

Y es excelente para crear pancartas con píxeles perfectos, imágenes destacadas y otros materiales de marketing.

9. Paleta para Chrome

Los sitios web están llenos de imágenes, y no puedes decir cuándo verás una imagen lo suficientemente buena como para inspirar una paleta de colores.

Pero no tiene que preocuparse, ya que Palette for Chrome lo tiene cubierto, siempre. Simplemente haga clic derecho en la imagen que le parezca interesante y elija la opción de esta extensión. Instantáneamente creará una paleta de colores inspirada en la imagen elegida. Puede especificar la cantidad de colores que desea generar para el esquema de color.

Me hubiera gustado más si hubiera una forma de exportar el esquema de color. Pero la extensión sigue siendo imprescindible.

10. ExtensionMuzli – Desayuno de diseño

Ya sabes, cuando recién estás comenzando, te suscribes a todos los mejores blogs dentro de tu nicho. Tus feeds RSS están todos encendidos. Pero a medida que su trabajo se acumula, se desconecta un poco. Y no es que no necesites inspiración, es solo que se hace difícil ponerse al día.

ExtensionMuzli está diseñado para compensar esto. Selecciona historias de entre 12 y 15 de los mejores recursos de diseño. También hay una sección de trabajos de diseño web si está buscando cambiar.

Una vez que instale esta extensión, su nueva pestaña presentará algunas de las últimas historias de diseño inspiradoras o educativas de toda la red. Ofrece una forma ordenada de estar al tanto de lo último dentro de su nicho.

Ahí vas. Potencie su Chrome con estas increíbles extensiones de diseñador web y observe cómo se dispara su productividad. ¿Cómo divides tu proceso de diseño y qué extensiones usas para qué tareas? Me encantaría aprender más.