Diseña y publica tus sitios rápidamente

Limpia los estilos de tu sitio con el Cleaner

¿Qué es el Cleaner?

El Cleaner (limpiador en español) es una herramienta que es muy útil al diseñar: te ayuda a mantener una constancia en cuanto a márgenes, espaciado, tipografías, tamaños de letra y más. Un sitio “limpio” y consistente es atractivo y fluye naturalmente.

El Cleaner obtiene ciertos valores como base y comienza a aplicarlos para homogeneizar las diferencias o inconsistencias en el sitio.

¿Cómo funciona?

A continuación te presentaremos un ejemplo de cómo funciona el Cleaner.

Si tienes una app pero su alineación no es la correcta (puede ser porque los márgenes son diferentes), puedes acceder a sus dots de estilo y corregir este error rápidamente. Sin embargo, ¿qué pasa si tienes 20 apps y ninguna tiene los valores correctos en los márgenes? Te tomaría mucho tiempo estar revisando cada app individualmente. En una ocasión como esta puedes utilizar el Cleaner, el cual comparará los valores, tomará el mímino como base y los aplicará a los márgenes opuestos.

Es decir, si tienes una app que tiene 23 pixeles en el margen superior y 20 en el margen inferior, el Cleaner se encargará de tomar el valor más pequeño (en este caso los 20 px del margen inferior) y aplicarlos al margen superior para que ambos queden iguales. Y este es solamente una de las situaciones en las que te será útil el Cleaner.

Limpia tu sitio al hacer clic en el botón del Cleaner.

Botón del Cleaner

Botón del Cleaner

Al hacer clic en su botón, obtendrás una vista previa de cómo quedará tu sitio una vez que apliques los cambios del Cleaner. Tienes la opción de aplicar (Apply) o revertir (Revert) los cambios que se te presentaron. Dichas opciones están en la parte superior de la página.

Botones de "Revert" y "Apply"

Aplica o revierte los cambios propuestos

Además, puedes decidir si quieres aplicar los cambios a las tipografías (Clean Font Sizes & Styles), a los márgenes (Normalize Margins & Paddings) o a ambas opciones.

Opciones del Cleaner

Selecciona las opciones que quieras y haz clic en “Save and Clean Again”

Áreas afectadas

Hemos dividido las áreas afectadas en dos categorías:

1. Tipografías

2. Márgenes y espaciado

A continuación te explicaremos a qué nos referimos con cada una.

Tipografías

Aquí te explicaremos las diferentes áreas en las que trabaja el Cleaner para limpiar el estilo de tu sitio.

Consistencia

Al hablar de consistencia, nos referimos al tamaño de la tipografía, la tipografía en si y al alto de la línea de las etiquetas H en un solo bloque. Es decir, si dos textos diferentes pero con una misma etiqueta (por ejemplo, H1), tienen una tipografía, tamaño o altura diferente, el Cleaner se ocupará de tomar los valores del primer texto y hacer que el resto de los textos con esa misma etiqueta dento de ese bloque, tengan las mismas propiedades. En otras palabras, todos los textos con etiqueta H1 en ese bloque, tendrán la misma apariencia.

He aquí un ejemplo de dos textos con etiquetas de H2 y formatos diferentes.

Así es como se ven antes de aplicarles los cambios del Cleaner.

Estos textos no son consistentes

Estos textos no son consistentes

Las etiquetas H2 después del Cleaner

Ahora los textos son consistentes gracias al Cleaner

Ahora los textos son consistentes gracias al Cleaner

Tamaños

Esta revisión se aplica solamente para textos Normales. Un texto normal no debe exceder los 16 px en tamaño; en caso de que así fuera, el Cleaner se encargaría de cambiarlo a 16 px. Este texto normal es considerado el Valor Base o P.

Un texto normal antes de aplicar el Cleaner.

Texto normal

Un texto normal con un tamaño mayor a 16 px

Un texto normal después de aplicar los cambios del Cleaner.

Texto normal después del Cleaner

Como podrás ver, el texto cambió para mostrar las propiedades correctas

Proporciones

El Cleaner también se encarga de revisar la proporción de tus textos para que se muestre la jerarquía establecida en las etiquetas H de forma visual. Es decir, si tienes una etiqueta H5 con un tamaño de 65 px y una etiqueta H1 con un tamaño de 60px, ambas etiquetas se corregirán de a cuerdo a nuestro Valor Base o P (en este caso, 16 px). Después, el Cleaner eligirá el tamaño para cada etiqueta de acuerdo al siguiente orden: P, H1, H2, H3, H4, H5 y H6 en donde P es el valor más pequeño y H1, el más grande.

H1 antes del Cleaner

Aquí, el valor de H1 es igual al valor de P

H1 después del Cleaner

Nuestro H1 fue modificado de manera proporcional a los valroes de P

Altura

La altura se refiere al espaciado entre las líneas de texto y es muy importante en el diseño. Los espacios en blanco son muy importantes en los bloques de texto para que la vista del lector descanse y no se sature de texto. El cleaner se encargará de que la altura sea consistente en tu sitio. Esto lo hará bloque por bloque considerando los tamaños de las letras. Esto quiere decir que si tienes cierto número de app de texto en un bloque con el mismo formato (por ejemplo, H3), todas serán ajustadas con la misma altura.

He aquí un ejemplo de dos párrafo antes de utilizar el Cleaner

Line Height antes del Cleaner

Como verás, la altura es inconsistente

Estos son los mismos párrafos después de utilizar el Cleaner.

Line Height después del Cleaner

La altura de la línea es igual para ambos párrafos

Interletraje

El Interletraje es el espaciado que se aplica entre letras. Esto se hace con el objetivo de crear un balance entre los caracteres en las palabras. Si el interletraje no es correcto, el Cleaner se encargará de perfeccionarlo.

El interletraje antes del Cleaner Cleaner

Antes del Cleaner

El espaciado entre las letras no es consistente

El interletraje después del Cleaner

Después del Cleaner

El Cleaner corrigió el interletraje del texto

Márgenes

El Cleaner también se encargará de ajustar los márgenes de todas las apps, columnas, contenedores y bloques. Los márgenes puedes afectar tu diseño: si no están bien establecidos, tu sitio se verá inconsistente. Por ejemplo, si tienes una app con un margen superior de 20px y uno inferior de 35 px, el Cleaner logrará que ambos márgenes midan 20px cada uno.

Márgenes antes de utilizar el Cleaner.

Antes del Cleaner

Las apps no están alineadas correctamente

Las apps con los márgenes ajustados.

Después del Cleaner

Los márgenes de las apps están alineados

Como puedes ver, el Cleaner puede perfeccionar los estilos de tu sitio con un solo clic. ¡Pruébalo ahora!

Si tienes dudas o alguna opinión que quieras compartir, háznoslas saber en la sección de comentarios.