Es difícil ahí fuera una mirada al brutalismo en el diseño web

Los sitios web brutalistas fueron lanzados a la luz pública recientemente cuando brutalistwebsites.com de Pascal Deville golpeó a Hacker News y se volvió viral. Esta colección muestra el lado menos cálido y difuso de la web: echemos un vistazo y veamos si podemos inspirarnos en el brutalismo..

Edificios brutales

"Brutalismo" (o "Nuevo Brutalismo") es un término que ha estado recorriendo las escuelas de arquitectura durante más de medio siglo. Se refiere a una forma en bruto de la arquitectura con características tales como superficies rugosas sin acabado, formas inusuales, materiales sólidos (como el hormigón), formas masivas y pequeñas características en contraste..

Desde Fuck Yeah Brutalism

"... lo que caracteriza al Nuevo Brutalismo ... es precisamente su brutalidad, su je-m'en-foutisme, su mentalidad sangrienta". - Reyner Banham, 1955

Sitios web brutales

Los sitios web brutalistas, al igual que sus primos arquitectónicos, son un antídoto para la web más popular y suave. Vivimos en una era de diseño web emocional; donde nosotros, como diseñadores de interfaz y experiencia, nos superamos para ofrecer a los usuarios empatía y comprensión. Donde los productos atraen a los clientes de la manera más amigable y fácil posible. Los colores son atractivos, las imágenes están pulidas, el tipo es suave y está hecho a mano.

Mirando sitios web brutalistas, adjetivos como estos vienen a la mente:

• duro
• áspero
• escabroso
• incómodo
• crudo
• confrontación
• cínico

Es una escuela de pensamiento que me gusta; Podría argumentar que mi propio sitio web (que no he cambiado en mucho tiempo) tiene un toque de brutalidad:

Entonces, ¿cómo definir realmente un sitio web brutalista? Examinemos algunas características típicas..

Código bruto brutal

En primer lugar, vale la pena mencionar que esto no es algo puramente estético. El brutalismo es algo que surge del núcleo mismo de un sitio web: su código. Los sitios web brutalistas tenderán a tener un formato simple, un marcado, estilos en línea, falta de optimización, pero también no tendrán nada complejo para sopesar las cosas. Echa un vistazo a la suma total de la cabeza del documento para brutalistwebsites.com!

El código bruto, como la mayoría de los aspectos del brutalismo, arrastra las cosas a una forma más burda.

léxicoVulfpeck

"No estaba intentando diseñar un sitio web" brutalista "- Seth Thompson

Fuentes del sistema brutal

Hablando de arrastrar cosas a una forma más cruda, hubo una vez en la que no estaban disponibles vastos catálogos de fuentes web acogedoras. Times New Roman y Arial funcionaron bien gracias.

craigslist.org

¡Ffffound! siempre ha permitido a los usuarios hacer la conversación, permitiendo que la interfaz de usuario asuma un papel de apoyo con colores y fuentes simples.

ffffound.com

Tener que amar un poco de Familia tipográfica: Courier, monospace;

fictivekin.com

"Quería crear un sitio que no se pudiera crear utilizando Squarespace". - Andrew Herzog

Colores brutales

Las fuentes del sistema van de la mano con una paleta del sistema. La web era un lugar más sencillo cuando los diseñadores se limitaban a 216 colores gloriosos seguros para el navegador. Un gris, un azul, un rojo. Y tal vez un beige, con algo de color burdeos. Y si necesitaban profundidad, había biseles para salvar el día..

lifeactionrevival.org

"Mi brutalismo es una forma de diseño contradictorio o poco cooperativo: Internet sufre de un exceso de orden" - Brandon Joyce

pwr.site

Más rojo:

andrewseid.comwebsafe2k16.com

Mmm, el verde más puro..

laurelschwulst.com

Imágenes brutales

No te asustes, estos no son en realidad brutal Imágenes, más como imágenes que se remontan a una era anterior a los filtros de Instagram y SnapChat.

undergrounderground.com/gifarngren.neteatock.com

"No lo llamaría Brutalist, simplemente lo llamaría normal" - Laurel Schwulst

Lenguaje brutal

Supongo que el contenido crudo también cuenta, ¿verdad??

www.andreaperato.comjustinjackson.ca/webmaster

Final brutal

Bien, hemos terminado aqui.