¿Cómo hacer una cuadrícula neumórfica?

| Última modificación: 22 de julio de 2024 | Tiempo de Lectura: 2 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

En el diseño de una aplicación o web puedes agregar diferentes formas geométricas que te ayuden a obtener una UI práctica que tenga un impacto en el usuario logrando la mejor UX. En este post, te explicaremos cómo hacer una cuadrícula neumórfica.

Pasos para hacer una cuadrícula neumórfica

Lo primero que debes hacer si quieres saber cómo hacer una cuadrícula neumórfica es elegir el programa de diseño que vamos a utilizar, nosotros te recomendamos usar Sketch, que es muy completo y sencillo de manejar.

🔴 ¿Quieres entrar de lleno al Desarrollo Mobile? 🔴

Descubre el Desarrollo de Apps Móviles Full Stack Bootcamp de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Desarrollo de Apps Móviles por una semana

Después es necesario agregar un rectángulo y acomodar sus proporciones para que su forma sea cuadrada.

Al tener esa figura geométrica, podemos ir modificando aspectos como las sombras y las iluminaciones, debido a que una figura neumórfica debe tener estas particularidades, que le den ciertas características visuales que tengan concordancia con un objeto real.

Según esto, debemos elegir de dónde vienen las luces. Para esto podemos utilizar varios rellenos con el fin de generar degradados, lo que influye en la intensidad o la transparencia de la cuadrícula.

En la web puedes encontrar una página llamada Neumorphism.io, en la que puedes visualizar una cuadrícula neumórfica e irla modificando según el tamaño, el radio, la distancia, la intensidad, el desenfoque y la forma que quieras; además, tienes la posibilidad de copiar el código CSS para aplicarlo en la interfaz de usuario que estás desarrollando.

En caso de que te interese explorar algunos de los programas de diseño gráfico, te invitamos a leer nuestro post Top 5 de programas más usados en diseño gráfico, en donde te hablamos sobre algunos software, tanto pagos como gratuitos, que son muy usados en este campo.

Ahora que sabes cómo hacer una cuadrícula neumórfica y ya puedes agregarla en uno de tus proyectos de diseño gráfico, ¿te gustaría aprender cómo puedes desarrollar y diseñar una aplicación? Si tu respuesta es sí, te invitamos a conocer nuestro Desarrollo de Apps Móviles Full Stack Bootcamp, con el que aprenderás más pautas para diseñar y mucho más.

Jose Luis Bustos
Jose Luis Bustos

Lead Software Architect & Coordinador del Bootcamp en Desarrollo de Apps Móviles iOS & Android.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo de apps móviles ios & Android

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado