January 15, 2017

Materialize, mis pensamientos en diseño web

Estos son los pensamientos que tengo tras haber utilizado Materialize en un proyecto de la vida real. Una pequeña review para todos aquellos interesados.

Recientemente me encuentro en un proyecto de diseño web. Necesito realizar una landing page para un negocio pequeño. He decidido utilizar el framework Materialize CSS para tal propósito. Estos son los pensamientos que tengo tras haberlo usado.

Logo de Materialize
Logo de Materialize

¿Qué es Materialize CSS?

Primero que nada, definamos. Materialize CSS es un framework, que te ofrece una hoja de estilos, un archivo Javascript y algunas fuentes. Todo está bien configurado para poder crear un sitio web; enfocándote en el HTML, y dejando a un lado el estilo. Está basado en el Material Design, creado por Google. Busca ser estándar en web, como en aplicaciones móviles. Sin embargo, en esta ocasión me enfocaré en el diseño web.

Entonces, ¿qué tan positivo es usar un framework para estilos? En lo personal, me parece que es algo muy positivo en muchas ocasiones.

Primero que nada, te permite abandonar un poco el CSS, lo que, en lo personal, me parece asombroso. Soy una persona a la que jamás le ha agradado el diseño web; soy alguien más del backend, y para todos aquellos que son como yo, esta clase de herramientas les parecerán asombrosas. No obstante, tampoco es un genio sabio que sale de la lámpara y viene a resolverte el día. Claro que necesitarás nociones, aunque sean mínimas, de CSS. Y por supuesto, necesitas conocer HTML (al menos un poco).

¿Por qué Materialize?

Entonces, si necesito tener nociones de CSS y HTML, ¿cuál es el beneficio? Primero que nada, si eres terrible como yo en el diseño web, ya tienes un consejero. Materialize, no solo te ofrece muchísimas opciones para estructurar sencillamente tu sitio; también te brinda una extensa y completa documentación que tan solo con verla te dará muchísimas ideas que puedes utilizar. Y si el HTML tampoco es lo tuyo, también te brinda snippets para que los implementes en tu código rápidamente.

Segundo, es personalizable. Puedes cambiar el color de texto, de objetos; puedes implementar fácilmente iconos web, provistos por Google como parte del Material Design, entre muchas otras cosas.

Definitivamente, le dará un estilo muy limpio y atractivo a tu sitio web; lo que es sorprendente de decir tomando en cuenta que casi no necesité escribir código CSS.

Una de las cosas que más me agradó de Materialize, son todos los objetos potenciados por Javascript que incluye. Desde unos limpios sliders, carruseles de imágenes, menús desplegables limpios (que son muy complicados de hacer sin CSS); hasta cosas más avanzadas como toasts, parallax, pestañas, y mucho más. Igualmente hace uso de algunos plugins adicionales, como Pushpin, para simular contenidos con estilos distintos al hacer scroll; o Scrollfire, para realizar acciones conforme te acerques al elemento con la función, como una animación para aparecer, etc.

Otra cosa, es extremadamente ligero.

Materialize te da una gran experiencia de usuario
Materialize te da una gran experiencia de usuario

Diseño Responsivo

Lo más asombroso de todo, en mi opinión, es la responsividad. Para un desarrollador de front-end, una de las cosas más tediosas es tener que reescribir su código; sin embargo, es necesario para darle estilo a su sitio dependiendo de la resolución del dispositivo. Y aunque es tedioso, se debe hacer. No es muy agradable ver una página con la misma estructura en el móvil, que en la computadora. Tienden a necesitar que realices zoom. En ocasiones incluso es complicado presionar un botón porque es muy pequeña la pantalla.

Esto no sucederá si usas Materialize. El framework se adapta perfectamente a la resolución que necesitas (Nota: Evita los iframes, en ocasiones son de lo peor).

También es compatible con todos los navegadores modernos, lo que está perfecto.

Materialize es muy responsivo
Materialize es muy responsivo

¿Desventajas?

Sí, claro que tiene desventajas y puntos negativos. Primero que nada, Materialize está basado en el diseño establecido por Google. En mi opinión es algo negativo; esto requerirá un poco más de tu creatividad para no hacer lucir tu página como otro producto de Google. Sí, el diseño de Google es bastante limpio y moderno, cosa que podemos tomar de Materialize. Y gracias a la cantidad de colores provistos para aplicar de forma fácil, no tendremos mucho problema; sin embargo, queda en la capacidad de cada quién decidir que tan personalizado está.

Otra desventaja es que, a pesar de que su comunidad es demasiado amplia; podría no ser tan grande como en otros frameworks más antiguos. Sin embargo, mientras no quieras hacer cambios exponenciales, creo que no tendrás problema en encontrar apoyo.

Materialize ha existido por menos de 3 años. Esto significa que aún tendrá varios problemas si te encuentras con proyectos enormes. Sin embargo, considero que para un proyecto que no va a necesitar tantas modificaciones de estilo, este framework es perfecto.

¿Alternativas?

Sí.

Si deseas seguir los lineamientos del Material Design, hay varias alternativas que igualmente son muy buenas; como Material Design Lite, o Material-UI. Aunque claro está, que si eres un Google Fan, debes utilizar Polymer, creado por tal empresa.

Si estás de acuerdo con aventurarte en otros diseños, tienes que probar Bootstrap. Es de lo mejor que podrás encontrar.

Pensamientos finales

Debo admitir, que me ha encantado. Materialize, en mi opinión, es un framework para el futuro, algo que conviene manejar. Su enfoque hacia la experiencia del usuario es muy positivo. Lo hace un framework muy adecuado para una navegación memorable; denota profesionalismo y modernismo.

Si tienes dudas sobre Materialize, o algún otro framework de front-end, no dudes en decírmelo en los comentarios.

Otros posts similares: