() translation by (you can also view the original English article)
Esto va a parecer infame para muchos de ustedes, pero veo que sucede tan a menudo que pensé que valía la pena mencionarlo. Llamaremos a este problema esquinas anidadas incorrectamente; ¡un pequeño detalle que puede arruinar un diseño brillante de otra manera!
¿Quién está siendo pedante?
Las esquinas anidadas incorrectamente se pueden encontrar en diseños de todo tipo, pero las veo con mayor frecuencia en iconos e interfaces. Si aún no tienes idea de lo que estoy hablando, echa un vistazo a estas dos imágenes de un diseño de un rectángulo - ¿cuál me tiene rechinando los dientes?
Sí, es el segundo con el que perderé el sueño.
En pocas palabras; si tienes dos esquinas redondeadas en paralelo, la esquina exterior debe tener un radio más grande que "fluya" alrededor de la del interior.
Sin querer entrar en fórmulas matemáticas (¿alguien dijo pastel?) intenta visualizar un punto central, el "origen", alrededor del cual se curva el primer radio. Ahora usa ese mismo punto para redondear tu esquina exterior:
Forma tus curvas de esta manera y encontrarás el resultado final mucho más fácil a simple vista.
Tubos de flexión
Piensa en el efecto que estás creando como si fueras a doblar una tubería:
Haces las matemáticas
Las interfaces integradas en html/css pueden ser igualmente culpables de esquinas anidadas incorrectamente. Piensa en elementos de formulario dentro de un conjunto de campos o botones dentro de un cuadro de alerta.
No es difícil ser muy preciso con él; la diferencia en el radio del borde de los dos objetos debe ser igual al espacio entre ellos. ¡Simple!
Y esto también puede ser flexible, por ejemplo:
1 |
<div class="outer"> |
2 |
<div class="inner"> |
3 |
|
4 |
</div><!--/ inner--> |
5 |
</div><!--/ outer--> |
1 |
.inner { |
2 |
width: 5em; |
3 |
height: 5em; |
4 |
background: black; |
5 |
|
6 |
border-radius: 1em; |
7 |
}
|
8 |
|
9 |
.outer { |
10 |
display: inline-block; |
11 |
background: lightblue; |
12 |
|
13 |
padding: 3em; |
14 |
border-radius: 4em; /*offset + radius of .inner*/ |
15 |
}
|
Tubo perfectamente doblado (ver la demostración).
Excepciones
Como todo en el diseño, no hay reglas concretas - siempre encontrarás excepciones. Es una cuestión de instinto.
Tomemos esta interfaz por ejemplo; el espacio entre el botón de contacto y el menú desplegable no se parece en nada a una tubería doblada. Al decir eso, me refiero a que las esquinas en esta interfaz tienen radio uniforme, así que nada se ve fuera de lugar:
Gente que lo hace bien
Creo que ya te cansaste de escucharme hablar de algo tan trivial. En lugar de llamar la atención sobre ejemplos en los que lo he visto hacerlo torpemente, ¡echemos un vistazo a un trabajo inspirador de Dribbblers donde lo hacen bien!
