CSS Peeper, una extensión de Chrome para diseñadores

¿Te has preguntado alguna vez qué fuente utiliza esa exitosa web, qué paleta de colores usa, de dónde son esos iconos tan atractivos, cuáles son los tamaños de cada uno de sus elementos, o cómo están alineados? CSS Peeper nace con el objetivo de inspeccionar cada elemento sin necesidad de indagar en los códigos de la web. 

Hasta ahora existían varias herramientas o plugins que resolvían pequeños problemas con el estilo de una web, pero todavía hacía falta una extensión de Chrome que solventara las inquietudes de los diseñadores. David Mlynarz, diseñador de productos, con la ayuda de Jędrzej Sadowski, desarrollador de aplicaciones enfocadas hacia el usuario, buscaron la forma de inspeccionar códigos para que los creativos pudieran centrarse en sus diseños.

Se acabó el inspeccionar códigos

8 tendencias y técnicas inmortales en diseño de packaging

Las nuevas tendencias en el diseño de portátiles combinan la máxima potencia con la más exquisita belleza

Aprende a trabajar la piel en tus ilustraciones de retrato

Por qué es importante aprender a diseñar para un entorno digital

Al hacer click sobre un elemento, como un título, un fondo o una imagen, CSS Peeper identifica sus propiedades. Comprueba cada estilo sin necesidad de modificar ningún plugin, identifica cada tipografía, el tipo de letra, su tamaño y alineación, entre otras funciones. También ofrece la paleta de colores utilizada en la web sin necesidad de ir analizando de uno en uno cada tono y, por cierto, ahora puedes cambiar de un valor HSL a uno RGB.

Es una interfaz sencilla y agradable de usar 

Otra de las premisas que Mlynarz quería que se cumpliera con esta plataforma era que los estilos estuviesen organizados de una manera sencilla y coherente, para que su método de interpretación resultase verdaderamente útil. Su herramienta de inspección identifica desde sombras y rellenos hasta iconos o tipografías, y te permite descargarlos en PNG, svgs o jps. Extraer las imágenes o iconos desde su código era hasta ahora algo complejo, pero CSS Peeper incluye la opción de descargar los elementos, bien de uno en uno, o como un conjunto en un archivo .zip.

Diseñar para diseñadores es una tarea complicada. Los creadores de CSS Peeper tenían claro que debían causar un impacto inicial, que debía ser una herramienta que no solamente destacase por su apariencia e imagen, sino también por su la facilidad de trabajar con ella. A día de hoy, más de 16.000 usuarios se han unido a esta plataforma indicada para facilitar el trabajo de los diseñadores que se creó a finales de 2016 y que en abril de este año renovó sus herramientas con una nueva actualización.

→ CSS Peeper