Diseño brutalista

El brutalismo es un estilo arquitectónico que apareció a mediados de la década de 1920, aunque su ascensión llegó un poco más tarde, en las décadas de 1950 y 1960. Se caracterizó por ser un estilo simple y sincero. En el brutalismo, la forma sigue la función.

Hábitat 67. Fuente: Wikipedia. Los edificios brutalistas generalmente se construyen con elementos modulares repetitivos que forman masas que representan áreas funcionales específicas, claramente articuladas y agrupadas en una unidad completa. El concreto se usa por su honestidad bruta y sin pretensiones, contrastando así dramáticamente con los edificios extremadamente refinados y ornamentados construidos en el estilo de Beaux-Arts de élite.

Sainte Marie de Tourette. Fuente: Wikipedia. ¿Guay, verdad? Pero puede que se pregunte por qué estamos hablando de arquitectura si este blog es sobre tecnología y WordPress. Bueno, la razón es simple: el brutalismo es una tendencia de diseño que podemos aplicar en el mundo web … el origen de la web y su evolución gráfica para nuestros lectores más jóvenes, la web parece algo que siempre ha existido, pero nada más lejos de la realidad . ¿La primera página web de la historia se publicó “recientemente” en 1991? Y, como puede ver, fue muy simple:

Captura de pantalla del primer sitio web. Las primeras páginas web fueron simplemente textos con hipervínculos. Pero a medida que avanzaba la tecnología, la cantidad de recursos que podrían agregar aumentaron y las posibilidades de innovación se expandieron rápidamente.
En los comienzos de Internet, nadie sabía exactamente qué era un “buen diseño” (a pesar de todo el equipaje que tenía en el mundo de la impresión), y los primeros webmasters hicieron “lo que pudieron” para crear modelos eficientes de página para presentar contenido. ¿Recuerdas los modelos de principios de los 90, todos basados ​​en las comidas? ¡Qué agradable fue Google al principio! Por supuesto, estos modelos más o menos “funcionaron” visualmente, pero fueron un desastre absolutamente interno. La estructura HTML se centró solo en el aspecto final de la página e ignoró por completo el contenido en sí, por lo que el resultado no fue accesible en absoluto. Pero todos aprendimos a “construir la web …”

Tierra … un clásico de los 90 en España, con su diseño basado en la mesa. Paletas de colores, íconos planos o realistas, animaciones … todos los detalles más finos que, combinados, se convierten en una “tendencia de diseño” y van. Pero hay una tendencia que parece constante hoy: la simplicidad, que Ruth discutió hace unos días cuando miró a Apple y sus principios de diseño. Pero la realidad es más compleja que todas. No todos los sitios web siguen las mismas tendencias. Hay personas que se alejan de las tendencias globales y exploran otras formas. Rompen el molde. Incluso puede crear la siguiente tendencia …

Brutalismo en la web El término brutalismo proviene del “concreto bruto” francés o “concreto bruto”. Entonces, si hablamos de brutalismo en la web, está claro que no estamos hablando de “concreto”, sino de “panadería”. La arquitectura brutalista quiere ser fiel a los materiales que utiliza como elementos básicos y para esto debemos luchar, como desarrolladores web. Al menos si queremos crear sitios web brutalistas. Esto plantea la pregunta: ¿Cuáles son los “materiales” que utilizamos para construir una red? Puede pensar que estos son HTML y CSS, pero observe que HTML y CSS son para la web lo que es un concreto o una grúa de construcción: son las herramientas que utilizamos para “construir” nuestro proyecto. Por lo tanto, la “materia prima” con la que trabajamos en la web es el contenido. Y eso no debería sorprenderte, porque hablé sobre ello en este sitio cada vez que mencionaba que el contenido es el rey. El bruetalismo es sincero para sus materiales, por lo que, como desarrolladores y diseñadores web, necesitamos ser honestos con nuestro trabajo y saber qué Un sitio web es y lo que no. Las web no son revistas. No hay aplicaciones. No hay paneles publicitarios. Entonces, ¿por qué deberían parecerse a alguno de ellos?
Principios de diseño brutalista web Aquí tiene algunos principios básicos que debe considerar al diseñar un sitio web brutalista: 1: el contenido debe funcionar en todas partes si crea una página web sin ningún estilo CSS y se esfuerza por la estructura que solo usa etiquetas HTML, sabe que este sitio web funcionará perfectamente en todos los navegadores del mundo. No será el sitio más hermoso, pero funcionará. Funcionará incluso en navegadores sin pantalla (sí, estoy hablando de accesibilidad). Y, si el contenido es rey, ¡es maravilloso! El contenido debe funcionar y tener sentido en un mundo sin un CSS. Eldemo de una página web definitivamente puede ayudarlo a tener su propia marca, pero también puede romperla y eliminarlo de los principios brutalistas. 2-Las interacciones del usuario con la web son limitadas y bien definidas por HTML con CSS y JavaScript, podemos crear sitios web que se parecen a aplicaciones nativas, con interacciones que parecían imposibles, animaciones notables y transiciones sorprendentes. Pero todo esto no tiene absolutamente nada que ver con el contenido … Entonces, ¿cómo diseñamos interfaces útiles en un sitio brutalista?
De manera predeterminada, los usuarios pueden interactuar con su sitio solo a través de botones, enlaces y formularios. Y solo los enlaces y los botones se pueden “dar clic”. Por eso es importante mostrarles RAW:

Nuestro sitio sigue algunos de los principios brutalistas. Puede identificar rápidamente qué es un enlace e incluso puede identificar si ya lo ha visitado o no, porque su color cambia. Desde el comienzo de Internet, los hipervínculos han seguido un modelo claro. Soy como el texto ordinario, pero su color es azul y el estilo está subrayado. Cuando se ha visitado el hipervínculo, su color cambia a púrpura, de modo que el visitante sepa que ya lo ha visitado. ¿Deberíamos incluso alejarnos de esta pureza? Los botones en nuestro sitio también son brutalistas. Se parecen claramente a los botones, incluso si aplicamos diferentes estilos para hacerlos más “modernos”. Los botones, por otro lado, describen un elemento que existe en la vida real: un botón. Un botón es algo que podemos presionar tanto en la vida real como en la web y, por lo tanto, esperar que se comporten de manera similar. Asegúrese de que sus botones se vean como botones y que su apariencia cambie cuando interactuamos con ellos. Además, úselos cuando tenga que usarlos: junto a un formulario, por ejemplo, le prometo al usuario que la información que ha ingresado se enviará al servidor y luego se llevará a otra página.
Existen sitios de 3 WEB en los navegadores web, así que permita a los usuarios “navegar” de su sitio ¿Sabe que los navegadores tienen botones para regresar y avanzar? Sé que sí, porque todos estamos acostumbrados a este patrón … y sin embargo, ¡algunos sitios web rompen este patrón hoy! Las aplicaciones de una página (SPA) usan JS para cargar el contenido dinámicamente, y algunas de ellas ignoran que hay una opción en el navegador para volver a una etapa anterior. Un diseño brutalista sigue siendo leal a Internet y nunca viola los patrones y reglas con los que está acostumbrado a un usuario. 4: los usuarios pueden llevar a cabo el contenido vertical Un sitio web no es una revista o un libro, por lo que no hay (en principio) al contenido de la página. La única razón por la cual muchos sitios hacen esto es el crecimiento artificial de las visitas, porque, para leer un artículo, el lector está obligado a visitar varias páginas. ¡No hagas eso! En un sitio brutalista, el contenido se presenta a la vez y el lector puede consumirlo a su propio ritmo, ejecutándose a medida que se adapta a ellos. No necesita perturbar al usuario con interacciones innecesarias para ver y usar lo que realmente importa: el contenido. ¿Qué piensas? Me gustan los principios brutalistas. Si no es un diseñador, aplicar estos principios es bastante fácil: deje las cosas como predeterminados (o cambian ligeramente). Pero, ¿qué piensa usted? ¿Te gusta? ¿Crees que es feo y anticuado? ¡Háganos saber en la sección de comentarios! Imagen presentada por Berenice Melis en Unsplash.