Actualizado a enero de 2023.
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 2023. 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 2023, 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
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 2023
Ahora, sin más dilación, vamos a ver los mejores recursos para diseño en frontend en 2023. ¡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
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 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 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 2023. 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 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 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 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
¿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 Twitter, Instagram 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.