Los 4 mejores marcos de diseño en 2018

La batalla de los marcos de diseño ha seguido creciendo más competitiva con cada año que pasa y está en pleno apogeo ahora en 2018. Se puede decir que todo el espíritu de los marcos de diseño de código abierto comenzó cuando Twitter creó Bootstrap a mediados de 2010. El siguiente en la escena fue la Fundación de Zurb. Estos dos siguen siendo los marcos de diseño más populares del mercado. Sin embargo, desde entonces se les ha unido un gigante de peso pesado en forma de Google y su Diseño de Materiales.

Cabe señalar que, si bien gigantes como Microsoft y Apple han publicado directrices y recursos para ayudar a los diseñadores a crear diseños de interfaz de usuario (Fluent Design de Microsoft & Interacción humana de Apple), no ofrecen marcos oficiales en forma de componentes HTML, CSS & Javascript. Por lo tanto, para el alcance de este blog, no los incluiremos.

El cuarto marco que discutiremos es un esfuerzo impulsado por la comunidad de código abierto que ha estado ganando una cantidad increíble de impulso últimamente es Bulma. Es una historia increíble de cómo un proyecto de desguace como este se ha convertido en el favorito del mundo del desarrollo progresivo de aplicaciones web & con capacidad de respuesta móvil.

1. Bootstrap

 Bootstrap

Quizás el marco de diseño más conocido en el mundo actual, y con una buena razón. No solo fueron los primeros en la escena, sino que redefinieron la industria del diseño de UI/UX para siempre. El Bootstrap de Twitter llevó a cabo una inmensa cantidad de re-trabajo que los diseñadores & desarrolladores estaban haciendo en cada nueva aplicación web. Tener que volver a construir contenedores y diseños, escribir el mismo CSS de nuevo se estaba convirtiendo en una tarea, y con los diseños responsivos para dispositivos móviles llegando a la vanguardia, Bootstrap fue un regalo del cielo. Los desarrolladores podrían crear prototipos rápidamente con interfaces de usuario y andamios de aspecto limpio y pulido que generarían diseños típicos de páginas & para ellos desde el primer momento.

Desde su creación, Bootstrap se ha mantenido al día con los tiempos, evolucionando continuamente (Bootstrap 4 es la última compilación de vanguardia) para no solo mantener el diseño fresco, sino también adoptar las últimas tendencias de desarrollo que están disponibles, como lo hizo con SaaS, y ahora con su soporte para frameworks front-end como React & Vue. No hay duda de que cuando se trata de un marco de diseño completo, bien construido y probado en el campo que lo tiene todo, Bootstrap es el rey indiscutible.

2. Foundation

 Zurb Foundation

Lo que comenzó como un proyecto interno en la agencia de desarrollo de diseño & Zurb, finalmente se convirtió en el segundo marco de diseño más grande de la web. El equipo de Zurb descubrió que tenían que reutilizar componentes HTML, CSS & Javascript con frecuencia y seguían necesitando extraerlos de otros proyectos. Para aliviar este cuello de botella en su proceso, decidieron construir un marco interno que utilizarían en sus proyectos. Finalmente, en 2011, decidieron hacerlo de código abierto al ver que la web se movía hacia diseños móviles receptivos, con la esperanza de dar impulso a ese movimiento.

Desde entonces, han lanzado actualizaciones continuamente (Foundation 6 es la última compilación), asegurando que su marco no se vuelva obsoleto, lo que es algo que puede suceder en el mundo del diseño en un abrir y cerrar de ojos. También tienen proyectos de código abierto disponibles que proporcionan integración con marcos de interfaz como Vue, y apoyan oficialmente React de todo corazón.

¿Necesitas diseñar un producto?

Nuestro equipo de diseñadores de experiencia de usuario puede convertir un resumen de proyecto en un prototipo visual, colaborando con usted en cada paso del camino.

3. Material Design

 Material Design

Una vez que los marcos de diseño comenzaron a aparecer en todas partes y ganaron tanta popularidad como lo hicieron, era solo cuestión de tiempo que Google saliera al ring. Con Material Design, Google cubrió todas las bases, desde la web hasta los dispositivos móviles, los relojes inteligentes y los televisores. Su último marco de interfaz (Flutter) también abarca el Diseño de materiales y no vemos que Google cambie las cosas en el momento en que haya recibido comentarios fantásticos de la comunidad de desarrollo de aplicaciones web sobre lo fácil y limpio que es el Diseño de materiales. Personalmente, también nos gusta usarlo aquí en Cygnis Media.

Cuando se trata de admitir marcos de front-end, el diseño de materiales podría ser el mejor de todos. Tienen soporte para Angular, Vue & React y tienen una gran cantidad de componentes y bibliotecas de terceros disponibles en la web.

4. Bulma

Bulma Design

Fácilmente el marco de diseño menos conocido en esta lista, Bulma es relativamente nuevo en comparación con los demás. Construido y adoptado por la comunidad de código abierto, lo que hace que Bulma sea realmente atractivo es lo ligero que es. Personalmente, también me encanta su aspecto limpio y su diseño práctico pero estéticamente agradable. La base de código también está extremadamente bien escrita, con una barrera de entrada baja para que los nuevos desarrolladores de front-end entren sin tener que aprender una sintaxis desalentadora.

Bulma ha sido adoptado de todo corazón por la comunidad de Vue — ambos son marcos desfavorecidos que han llegado con objetivos similares y han superado a sus contrapartes más grandes y establecidas — y tienen un fantástico proyecto de código abierto llamado Buehy que proporciona componentes de integración de Vue &.

¿Necesita crear una aplicación web?

Con compatibilidad multiplataforma, las aplicaciones web siguen siendo el medio definitivo para un producto. Cuéntanos sobre tu proyecto para una consulta gratuita.

Conclusión

En este punto, probablemente haya probado los marcos de diseño big 3. Si en 2018 quieres probar un nuevo marco de diseño que sea rápido, ligero, pero también práctico e inteligente, dale una oportunidad a Bulma, especialmente si lo estás emparejando con Vue.js. Es ideal para andamios, paneles de administración y paneles de control. Buena suerte & ¡feliz diseño!

Compartir:

Deja una respuesta

Tu dirección de correo electrónico no será publicada.