Herramientas para el diseño de interfaces

7 extensiones de Chrome para diseño web

Diseño|3 min de lectura|17 de noviembre de 2015

Comparte

Compartimos siete extensiones para el navegador Google Chrome que te ayudarán a realizar tareas de las distintas etapas del diseño de interfaces, desde encontrar inspiración hasta el traspaso a desarrollo.

Todos los detalles de una interfaz digital tienen un impacto en el resultado final de un sitio web. Cada color, tipografía, espacio y característica de los elementos, pueden marcar una diferencia en la apariencia y sentido de la plataforma, e incluso influir en su capacidad para apoyar a los usuarios en la realización de tareas y generación de conversiones.

Mantener el control sobre todos los aspectos en juego no es fácil, pero afortunadamente existen herramientas que nos ayudan en este trabajo. Para el navegador Google Chrome, por ejemplo, existen varias extensiones orientadas al diseño web.

En este artículo seleccionamos siete opciones que facilitan la creación de interfaces en sus distintas etapas para asegurar la mayor precisión y calidad posible, desde la búsqueda inicial de inspiración hasta el traspaso a desarrollo front end.

Muzli

Esta extensión funciona como página de inicio en tu explorador para mostrarte las últimas novedades de diferentes sitios de diseño. Es ideal para esos momentos en los que la inspiración se demora en llegar.

Más información sobre Muzli.

Full Page Screen Capture

Permite sacar una captura de la pantalla completa, a diferencia de otras extensiones que sólo toman la pantalla visible. Puede ser muy útil cuando tienes que hacer un montaje con alguna sección de un sitio.

Más información sobre Full Page Screen Capture.

Perfect Pixel

Si quieres realizar una comparación entre el diseño y el desarrollo, esta herramienta te será de mucha utilidad. Perfect Pixel permite adjuntar tu diseño y superponerlo con una leve transparencia en el navegador, optimizando el tiempo en las últimas correcciones.

Más información sobre Perfectpixel.

Page Ruler

Con Page Ruler puedes dibujar un área en la página web y obtener sus dimensiones y posición. Esto es muy útil si necesitas agregar un elemento y quieres saber cuánto espacio puedes utilizar.

Más información en Page Ruler.

The Grids

The Grid

Esta herramienta muestra la grilla de construcción y baseline, la cual puedes modificar para realizar pruebas. Si quieres que todo esté perfectamente alineado, The Grids será tu extensión preferida.

Más información sobre The Grids.

Colorzilla

Permite tomar un color con un cuentagotas para ver su código hexadecimal y valor en RGB. Además, indica el tamaño del contenedor y la clase en la que está aplicado.

Más información sobre Colorzilla.

WhatFont

Como su nombre lo indica, su función es reconocer las tipografías utilizadas en un sitio web. Al arrastrar el cursor sobre ellas, WhatFont muestra el nombre y si haces click verás el detalle de tamaño, variable, interlineado y color.

Más información sobre WhatFont.

Recuerda que estas herramientas te serán útiles solo si cuentas con una estrategia y un diseño bien pensados. Si tienes una propuesta detallada y una buena planificación, las tareas se pueden llevar a cabo con mayor facilidad y es posible integrar estos apoyos para aumentar la eficiencia en las distintas etapas.