Recursos para Diseño en Frontend en 2022

Manos coloreadas levantadas con el cielo de fondo
Si buscas los mejores recursos hacer espectaculares diseños para frontend en 2022… Es por aquí.

Actualizado a enero de 2022.

Si eres desarrollador frontend o fullstack y estás haciendo proyectos personales lo más profesionales posibles para crecer como programador, probablemente te estés encargando también tú del diseño de la aplicación web o multiplataforma. Y quieres tener un diseño frontend increíble, y para ello necesitarás recursos, los mejores para diseño en frontend en 2022. Básicamente porque muchas veces no tenemos a ningún Diseñador UI/UX en el proyecto (no siempre tienes la oportunidad de incluir a uno de ellos en el equipo de trabajo del proyecto personal, en caso de que lo estés haciendo con un pequeño equipo, lo cual es altamente recomendable ya que será más parecido al estilo de trabajo que desarrollarás en un entorno profesional).

Y, entonces, viene el problema: que no tienes ni idea de cómo puedes hacer un diseño bonito y te empiezas a agobiar. En este artículo te daré una máxima del diseño (sin ser yo diseñador, aunque sí un apasionado de hacerle el uso de la aplicación fácil y atractiva al usuario) y te daré los mejores recursos para diseño en frontend en 2022, de forma que tengas multitud de recursos para inspirarte a la hora de desarrollar las interfaces de tus aplicaciones.

Principio básico del diseño: menos es más

Setup con escritorio, PC etc. minimalista
Tanto en el diseño frontend como en la vida, recuerda…Menos es más.

Es muy posible que quieras hacer una aplicación compleja, con muchas funcionalidades etc. Y eso está genial, ya que las aplicaciones suelen ser complejas y permitir al usuario hacer varias cosas con ellas, que precisamente es el valor que aportan las aplicaciones. Vamos a verlo con un ejemplo que precisamente me parece una obra maestra del diseño UI&UX: Tinder.

Antes de Tinder, las aplicaciones para ligar eran relativamente complejas: te hacías un perfil, tenías que poner lo que buscabas en un filtro (por ejemplo, mujer de 20 a 30 años en x ciudad) e ir viendo perfil por perfil. Esto podía ser un poco aburrido: veías a muchas chicas a la vez, pero al final como usuario tenías que prestar atención a varias cosas (fotos de distintas chicas, nombres de distintas chicas, edades de distintas chicas…) y todo ello a la vez. Esto suponía un esfuerzo atencional y además para dar like a una chica pues tenías que entrar en su perfil y ya hacer el like ahí.

Sin embargo, con Tinder, para cualquier usuario la vida era más fácil. Ya no tenía que buscar chicas tras poner un filtro, sino que pongo el filtro y un algoritmo me ofrece una por una a las chicas que teóricamente mejor encajan con lo que busco. Una por una. Y además, para darle a like, ni siquiera tengo que meterme en su perfil, sólo clickar en el corazón o hacer swipe right (mover la carta de la chica en cuestión a la derecha). Y ya, para colmo, aplican un principio clave de la psicología humana a esta conducta de hacer swipe right: el reforzamiento intermitente. El reforzamiento intermitente de esta conducta no es otra cosa que el hecho de que a veces al hacer swipe right haga match y otras no. Está demostrado científicamente que este tipo de reforzamiento consolida la conducta (que precisamente es lo que quiere Tinder que hagas, ya que de dicha forma acabarás pagando). ¿No me crees? Pregúntate entonces por qué la gente juega a la lotería aunque rara vez le haya tocado algo.

Y… ¿cuál es la clave del éxito de este UI&UX design de Tinder? Pues muy simple: menos es más. Hay que ponérselo fácil al usuario. Si puede hacer lo que iba a hacer (hacer swipe right, comprar, o lo que tenga que hacer en tu aplicación) con un sólo click o un sólo gesto en el móvil… ¿por qué complicar las cosas y exigirle que haga dos, tres o cuatro clicks o gestos para conseguir lo mismo? Cuanto más fácil se lo pongas al usuario, más contento estará con tu aplicación móvil o web app y más dinero ganarás. Simple. Menos es más. Siempre.

Recursos para Diseño en Frontend en 2022

Ahora, sin más dilación, vamos a ver los mejores recursos para diseño en frontend en 2022. ¡Jamás volverás a quedarte sin inspiración cuando necesites hacer un diseño precioso para tu aplicación web o móvil!

Awwwards

Awwwards
¡En Awwards encontrarás diseños TOP para inspirarte para tu frontend!

Awwards es una plataforma dónde encontrarás aplicaciones web premiadas por su diseño, su creatividad y su innovación. A mí me encanta porque te permite ver diseños espectaculares, las últimas tendencias de diseño etc. lo que siempre te permite exponerte a ideas que pueden enriquecer las tuyas y acabar dando lugar a que implementes en tu aplicación un diseño elegante y sobresaliente.


Dribble

Dribbble es otra plataforma imprescindible, ya que aquí también encontrarás diseños web y móvil preciosos que te permitirán obtener inspiración para tus diseños de frontend.


Pinterest

Pinterest aunque no lo parezca también es un sitio muy bueno para coger ideas de diseño. Simplemente tienes que ir al buscador y buscar un elemento del sistema de diseño. Por ejemplo, «menu web«, «modal UI» etc. y te encontrarás un montón de diseños de ese elemento en concreto que te permitirán inspirarte y coger ideas.


Muzli

Muzli es un plugin para el navegador que te mostrará cuando abres una nueva ventana del navegador historias y noticias relacionadas con diseño. Es una forma tremendamente pasiva de ir alimentando tu mente de nuevos diseños que pueden ayudarte a que acabes con un frontend espectacular.


Behance

Behance
Si necesitas otro recurso TOP para inspirarte para tu frontend… ¡No te pierdas Behance!

Behance es otro recurso muy interesante para diseño en frontend. Otro sitio con multitud de diseños que te permitirán inspirarte para que hagas un frontend asombroso.


Checklist Design

Checklist Design es un recurso super útil para tus diseños de frontend. Indispensable en este 2022. Con esta página cada vez que diseñes cualquier elemento de tu sistema de diseño (puede ser un botón, una página de error 404, o una ventana modal etc.), podrás consultar que características ha de tener dicho elemento a fin de que implementes las mejores prácticas de diseño del momento.


Uplabs

Uplabs
¡Uplabs es otro maravilloso recurso para coger ideas de diseño para tu frontend!

Uplabs es un ecommerce de plantillas de diseño. Algunas gratis, otras de pago. Lo interesante es que puedes buscar en el buscador lo que necesites y encontrar plantillas muy bonitas para inspirarte para tus diseños. ¿Qué quieres hacer una aplicación de mapas? ¡Pues buscas «maps» en el buscador y a coger ideas para tu frontend!


Landbook

Landbook es otra plataforma dónde puedes encontrar diseños según tus necesidades, también con su respectivo buscador. Muy útil.


Design Resources

Design Resources
Design Resources es un buscador de recursos de diseño TOP

Design Resources es una aplicación web muy completa dónde encontrarás todo tipo de recursos de diseño adaptados a tus necesidades: desde iconos, a herramientas de mockups, sistemas de diseño etc.


Undraw

En Undraw encontrarás ilustraciones open source que podrás añadir a tus aplicaciones web y/o multiplataforma, de forma que el estilo de las mismas sea mucho más profesional. 100% recomendable.


Colorsinspo

Digamos que eres malísimo combinando colores para el diseño de tus aplicaciones web y/o multiplataforma. Ya no tienes excusa para ello. En Colorsinspo ya encontrarás paletas de colores perfectamente combinadas para que tu frontend sea atractivo desde el primer momento.


Adobe Color

Adobe Color
¿Qué quieres generarte tu propia paleta de colores de forma visual? Pues sigue leyendo…

Adobe Color es una herramienta web muy interesante que nos permitirá crear nuestra propia paleta de colores siguiendo la regla de armonía del color que elijamos. Esto es de gran ayuda para que nuestro frontend acabe luciendo lo más maravilloso posible.


Tabler Icons

La propuesta de Tabler Icons es tan sencilla como útil: iconos para tu aplicación. Ni más ni menos. En concreto más de 1500 iconos.


Excalidraw

Excalidraw es una herramienta super útil de cara a hacer bocetos del futuro diseño del frontend. A mí me resulta muy útil cuando quiero diseñar un boceto del front de una app, y espero que para ti también lo sea.

Te puede interesar

Mars Gaming MKXTKLBES Teclado Mecánico
Si quieres llevar tu experiencia informática al siguiente nivel, sigue leyendo…

¿Tienes ganas de tener un teclado mecánico bonito, ligero, de primeras calidades y muy económico? ¿Ganas de programar escuchando ese característico ruido de teclado mientras te bebes una taza de café y escuchas un poco de música para concentrarte mejor programando? ¿Quieres un setup atractivo? Por todas esas experiencias, te recomiendo este teclado mecánico, el Mars Gaming MKXTKLBES RGB LED. Los que han probado un teclado mecánico dicen que ya no son capaces de volver a uno «normal» (técnicamente, llamados de membrana). Yo incluido. Si quieres probar y disfrutar (o no) la experiencia, y también poder dar tu opinión fundada en el futuro en este debate sobre teclados de membrana y mecánicos, es por aquí. En caso contrario, quizás algún día descubras todo lo que te habías perdido (o no).

Espero que ese artículo te sea de gran utilidad para hacer unos diseños espectaculares para tu frontend. Cualquier duda puedes contactar con nosotros por TwitterInstagram o por nuestro formulario. También, si necesitas una atención más personalizada, puedes consultar nuestros servicios.  Además, si estás pensando en comprar algún producto relacionado con informática, disfruta de nuestras recomendaciones en la sección Productos. Nos vemos en el siguiente artículo.