Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design

Consejo rápido: Esquinas redondeadas hechas correctamente

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by steven (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:

Artesano doblando 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:

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:

Navegación del menú desplegable - UI/UX con CSS3 por Jonathan Moreira

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!

Icono de una tabla Snooker por JJ-Maxer
Icono de un app de postales por Aditya Nugraha Putra
Iconos por chnvan
Interfaz de usuario de resultados de búsqueda por Martin Karasek
Icono de la aplicación Veggie Meals por Max Rudberg
Botón de carga de archivos por Fares Farhan
Botón de bloqueo BPM (ON) por Paul Flavius Nechita
Botón de inicio de sesión por Brad Haynes
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.