¿Alguna vez te has quedado rascándote la cabeza cada vez que alguien habla de «squircles»? ¿Te confunde cómo se diferencian de los cuadrados redondeados? No eres el único.
A los diseñadores a menudo les confunden las diferencias entre los «squircles» y los cuadrados redondeados. En resumen, los «squircles» son una combinación de círculo y cuadrado —como sugiere su nombre—, mientras que los cuadrados redondeados son simplemente versiones con esquinas suavizadas de los cuadrados normales.
Si intentas imaginar estas dos formas diferentes en tu mente, probablemente parezcan casi idénticas. Pero entender los sutiles matices entre ambas es importante para determinar cómo y dónde usar cada una en tus diseños.
Echemos un vistazo más de cerca.
Todo empieza con un cuadrado redondeado
Para entender los «squircles», el primer paso es comprender los cuadrados redondeados, el punto de partida proverbial para crear un «squircle».
Un cuadrado redondeado es un cuadrado con las esquinas curvas. En lugar de las esquinas afiladas que encontrarías en un cuadrado común y corriente, las sustituyes por bordes curvos, como puedes ver en la imagen de abajo.
Lo importante aquí es notar que, aparte de las esquinas curvas, nada más en un cuadrado redondeado se desvía de un cuadrado normal. Al igual que en un cuadrado, los bordes son rectos y afilados, y pasan bruscamente a la curvatura de las esquinas.
¿Qué es un «squircle»?
Ahora, introduzcamos el «squircle». Al igual que los cuadrados redondeados, tienen esquinas curvas, pero son ligeramente diferentes.
Como puedes ver en la imagen de arriba, un «squircle» se parece mucho a un cuadrado redondeado. Sin embargo, a diferencia de un cuadrado redondeado, donde la esquina curva pasa directamente a una línea recta, en el «squircle» tanto la línea como la esquina se curvan suavemente para formar una figura un poco más circular y redondeada.
Los «squircles» han sido durante mucho tiempo una parte integral del diseño y se han utilizado para todo, desde la forma de las aplicaciones de iOS de Apple y los velocímetros de los coches Fiat hasta platos y utensilios de cocina.
Los «squircles» incluso se han utilizado en rotondas y glorietas, sobre todo por el polímata holandés Piet Hein para ayudar a descongestionar la ciudad de Estocolmo después de la Segunda Guerra Mundial.
La diferencia entre un «squircle» y un cuadrado redondeado
Como mencionamos anteriormente, un «squircle» y un cuadrado redondeado pueden parecer similares, pero son dos formas distintas.
La principal diferencia entre estas dos formas radica en sus ángulos; mientras que las esquinas de un cuadrado redondeado mantienen los 90 grados, los bordes de un «squircle» se curvan suavemente hacia afuera desde cada esquina, formando un arco.
La forma más fácil de visualizar su diferencia es en un gráfico. Si un cuadrado se ancla en un extremo del eje y un círculo en el otro, el cuadrado redondeado sería más comparable al cuadrado y el «squircle» sería más comparable al círculo, como se muestra a continuación.
Nos encanta cómo Daniel Furst, ingeniero de software sénior en Curative y exingeniero de Figma, describe la diferencia entre «squircles» y cuadrados redondeados en su artículo Desperately Seeking Squircles:
«La curvatura del perímetro de un "squircle" es continua, mientras que la de un cuadrado redondeado no lo es», dice Daniel. «Esto puede parecer trivial, una curiosidad, pero subconscientemente tiene un gran impacto: un "squircle" no parece un cuadrado al que se le ha hecho una cirugía; se registra como una entidad por derecho propio, como la forma de un guijarro suave en el lecho de un río, un todo unificado y elemental».
¿Cuál debería usar: un «squircle» o un cuadrado redondeado?
Así que quizás te estés preguntando: ¿cuál debería usar en mi próximo diseño? La respuesta es: depende.
En el blog de Flaticon de Orana Velarde, “El significado de las esquinas redondeadas”, los humanos parecen tener una aversión psicológica a los bordes afilados. Los bordes afilados se consideran peligrosos, dolorosos y negativos. Orana afirma: “Más allá de la psicología, las curvas también gozan de una mejor percepción visual. Al observar formas bidimensionales, las que tienen curvas se perciben más rápido que las que tienen líneas afiladas. El hecho de que nuestro cerebro capte la información de las curvas más rápido que la de las esquinas en ángulo recto garantiza que emocionalmente hagamos lo mismo. Por eso preferimos las curvas”.
Ambas formas ofrecen las curvas y la redondez que el ojo humano encuentra amigables y atractivas. Sin embargo, la curvatura natural de un squircle hace que la forma sea más agradable y descansada para la vista. Esto se debe a que un squircle no contiene las interrupciones bruscas y repentinas de un cuadrado redondeado, lo que permite que tus ojos sigan continuamente la curvatura de la forma.
A pesar de esto, muchos usuarios y diseñadores consideran que esta diferencia es insignificante, por lo que la mejor elección depende totalmente de las preferencias personales y de lo que mejor se adapte a tu diseño general.
Recursos sobre el squircle para diseñadores
Si buscas aprender más sobre esta forma tan encantadora o utilizarla en un proyecto, aquí tienes una recopilación de algunos de nuestros recursos favoritos para que les eches un vistazo.
- Circling the Square: Designing with “Squircles” Instead of Rounded Rectangles por Kurt Kohlstedt
- Squircle en Wikipedia:
- The Hunt for the Squircle por Michael Flarup
- The Squircle por Wolfram Mathworld
- Blog de John D Cook sobre la historia del término y la curvatura del squircle
- Desperately Seeking Squircles por Daniel Furse. Esquinas redondeadas en el ecosistema de Apple por Arthur Van Siclen
- Squirclemorphism por Uxmisfit
- Superellipse por Piet Hein
- Apple’s Icons Have That Shape for a Very Good Reason por Mark Stanton
- El significado de las esquinas redondeadas por Orana Velarde
Squircles frente a cuadrados redondeados
Tanto si eres del equipo squircle, un fanático de los cuadrados redondeados o prefieres usar un poco de ambos en tus diseños, una cosa es segura: no hay una forma incorrecta de usar ninguno de los dos.
Para mostrarnos cómo usas estas formas en tus diseños de Webflow, asegúrate de enviarlos a #MadeinWebflow — ¡estamos deseando ver lo que creas!
Descubre diseños inspiradores de la comunidad de Webflow
Made in Webflow es el lugar ideal para explorar, clonar y personalizar los sitios web más recientes creados por la comunidad de Webflow.
