Nuestro equipo de diseño siempre está buscando nuevas herramientas y tecnologías para facilitar nuestro trabajo y mejorar nuestros diseños. Ya hemos escrito sobre nuestras mejores opciones de herramientas de diseño, y cómo usamos los plugins de Figma para potenciar nuestro flujo de trabajo.
En este post, los miembros del equipo de diseño de Juice Studio comparten sus 10 extensiones de navegador Chrome imprescindibles para los diseñadores de UX/UI. Aunque son útiles para los diseñadores de productos, también son muy útiles para la ingeniería y el control de calidad.
Muzli 2 para inspirarse en el diseño
Todo diseñador necesita estar al día de las últimas tendencias digitales. La mayoría de nosotros navega por plataformas como Dribbble y Behance en busca de inspiración, pero a veces navegar por todo el contenido puede ser abrumador. Pero, ¿y si pudiéramos descubrir estas inspiraciones cada vez que se abre una nueva pestaña del navegador?
Con la extensión del navegador Muzli para Chrome, cada vez que abres el navegador ves, como lo describe Muzli, «el diseño más fresco, la UI, la UX y las noticias y tomas interactivas de toda la web.» La forma en que se integra orgánicamente con la experiencia de navegación es impresionante.
Fonts Ninja (o WhatTheFont) para identificar fuentes
Aquí hay dos grandes soluciones para el mismo problema. Ambas extensiones del navegador Chrome te permiten pasar fácilmente el ratón por encima de cualquier texto para ver de qué fuente se trata, así como el tamaño, el peso, la altura de la línea, el espacio entre letras y el color.
SVG Grabber para descargar vectoriales
Siempre preferimos utilizar iconos y logotipos vectoriales en nuestros productos de diseño, ya que se traducen mejor a cada pantalla y resolución de dispositivo. Y a veces necesitamos una forma rápida de cogerlos de las páginas existentes. La extensión del navegador SVG Grabber Chrome compila y muestra todos los gráficos vectoriales escalables (SVG) de la pestaña del navegador seleccionada, de forma sencilla. ¡Es un ahorro de tiempo!
Window Resizer para analizar los puntos de interrupción
Esto se explica por sí mismo, ¿verdad? A los diseñadores les suele gustar utilizar pantallas más grandes y múltiples pantallas durante el proceso creativo. Por lo tanto, es fácil olvidar que la gente experimenta las aplicaciones y las páginas web en una amplia gama de pantallas de diferentes tamaños.
La extensión para el navegador Chrome Window Resizer hace que sea fácil probar y previsualizar cómo se ven nuestros diseños (y también nuestras inspiraciones de referencia, por supuesto) en diferentes ventanas y tamaños. Con unos pocos clics o accesos directos preestablecidos, puedes emular varias resoluciones en tiempo real.
ColorZilla para identificar las especificaciones de color
Los colores son una parte importante de cualquier interfaz de usuario. Aportan significado al contenido y «encanto» a cualquier pantalla, y también pueden afectar a la accesibilidad de un producto digital. La extensión del navegador ColorZilla para Chrome permite descubrir los elementos de color de una página web con sólo pasar el cursor por encima. Muestra los códigos RGB y HEX, permitiéndote copiarlos en el portapapeles fácilmente.
Wappalyzer para perfilar la tecnología subyacente
Dado que trabajamos estrechamente con los desarrolladores, es útil estar al día sobre la tecnología utilizada para construir los productos. La extensión del navegador Wappalyzer Chrome para ver fácilmente los frameworks, las bibliotecas, los CMS y otros elementos que se han utilizado para crear una página web concreta.
aXe DevTools para comprobar la accesibilidad de la web
En Juice Studio, el desarrollo de aplicaciones accesibles es una prioridad empresarial. Para todos nosotros, la accesibilidad es una mentalidad que te guía a través de cada fase del proceso de desarrollo de la aplicación, desde el descubrimiento hasta el desarrollo.
aXe DevTools es una ligera y práctica extensión del navegador para Chrome que comprueba rápidamente cualquier página web y está respaldada por el axe-core de Deque, uno de los motores de pruebas de accesibilidad más fiables del mundo.
GoFullPage para capturas de pantalla a toda página
Cuando investigamos y evaluamos referencias para nuestras soluciones de diseño, hacemos capturas de pantalla de los ejemplos. La extensión GoFullPage para el navegador Chrome nos ayuda a capturar una pantalla de toda la página, sin necesidad de unir manualmente cada ventana gráfica.
Hace capturas de pantalla de la página y permite guardarla en diferentes formatos.
Baseliner para la alineación de cuadrículas
La extensión para el navegador Chrome Baseliner es una herramienta única que ayuda a los diseñadores y desarrolladores a alinear los elementos de una página y a mantener la línea de base. Añade una capa de cuadrícula CSS totalmente personalizable en la parte superior de una página web, manteniendo el contenido de fondo utilizable.
Extensión extra para Chrome: Grammarly
Esto no está directamente relacionado con la práctica del diseño, pero es una de las extensiones más populares utilizadas por nuestro equipo. Grammarly es más que un simple corrector de textos. Como afirma la empresa, «es una herramienta que te ayuda a escribir con confianza, a encontrar las mejores palabras para expresarte y a comunicar tus ideas con facilidad.»
Como hemos dicho anteriormente, la comunicación es una de las habilidades más importantes para un diseñador. Esta herramienta nos ayuda a dar lo mejor de nosotros mismos a la hora de comunicarnos internamente y con nuestros clientes.
