Ah, recuerdo bien los días ... cuando todo era un gradiente brillante y sombreado, con al menos 6 piezas de imágenes prediseñadas y una foto de 5 oficinistas de celebración. Nos encantaron las imágenes de los teclados con botones sin sentido, y las personas con efecto 3D que sostienen símbolos brillantes.

¿Y entonces qué pasó? iOS 7 apareció. La herramienta de gradiente en nuestras Photoshop comenzó a acumular polvo y eliminamos nuestra enorme biblioteca de fotos de archivo.

Diseño plano asumió el control en 2013 . Todo debía ser brillante, caricaturesco y, por supuesto, plano. De la misma manera que el diseño plano fue una reacción al skeuomorphism, estamos comenzando a ver las cosas de otra manera completamente.

Entonces, ¿cuál es el nuevo sabor del año? Me complace que haya preguntado: sitios que se parecen a la página de descargas de una compañía de software de código abierto que cerró a finales de los 90.

Esto ha sido documentado por Sitios web brutalistas , que recogió la tracción y obtuvo cobertura en El Correo de Washington y Fast Co para nombrar una pareja. Pero seguramente, ¿estos son solo sitios web de agencias de diseño pretenciosas y artistas experimentales? En la presentación de Brutalist Websites, eso es cierto en su mayoría, pero estamos empezando a ver esta filtración estética en la corriente principal. ¡Bonito! No podemos mirar el elegante diseño plano por el resto de nuestros días, ¿verdad?

Personalmente, me encanta esta tendencia. No soy el mejor diseñador web que existe, y tampoco quiero utilizar un marco trillado; lo que sea que pueda improvisar es lo mejor que puedo hacer.

Solía ​​pasar tiempo buscando en Internet el diseño web obsoleto, deleitándome con los torpes Times New Roman y los incómodos fotogramas. Probablemente porque me recordó un momento más simple, donde las personas se llamaban a sí mismas webmasters y todo estaba permanentemente 'en construcción'.

Pero, buscando aprender diseño web desde cero en lugar de adoptar un tema de WP o el marco CSS, siempre me ha avergonzado crear el sitio web simple y feo de mis sueños. "¿Cuál sería el punto?", Pensé. Mostrarlo me haría parecer ridículo. No puedo usarlo como cartera para nada sin parecer un desastre.

Ver sitios web con luz de CSS sin JavaScript a la vista me dio la confianza que necesito para dejar de trabajar en los sitios de otras personas y hacer mi propio diseño.

Mirando la selección de nuevos sitios minimalistas, noté varios temas clave que parecen estar alzando sus cabezas bellamente feas.

Monocromo

El diseño monocromático hace exactamente lo que un buen diseño debería hacer: llama la atención sobre el contenido.

001

Sin Fancy CSS

¿Recuerda los buenos viejos tiempos? Cuando todos tenían un sitio web y tenían algo que probar? El enfoque de no (o pequeño) CSS trae de vuelta esos días, y, personalmente, me hace extremadamente nostálgico de momentos más simples en los que un sitio web podría ser solo una breve biografía y una colección de enlaces.

002

Texto inclinado / superpuesto

El texto inclinado arroja al usuario un poco, y no de una manera asombrosa . En cambio, es algo que el usuario no está acostumbrado a ver, por lo que produce una impresión impactante.

Echa un vistazo a la colocación de texto experimental que usa Loïc en su sitio web . La total indiferencia por la legibilidad da a los visitantes la sensación de una tienda de alta costura que no tiene etiquetas de precios. Es tan poco informativo (y en este caso, distante) que es elegante.

004

Poco respeto por la escala o el relleno

Bloomberg poniéndose bastante experimental estos días, y me encanta. Imagine las pruebas y tribulaciones que el diseñador tuvo que pasar para obtener la aprobación del gran jefe.

La razón por la cual esto es asombroso es porque es muy diferente. No presta mucha atención a las reglas de diseño difíciles: dejar suficiente espacio entre los elementos, mantener las cosas a una escala similar e incluso asegurarse de que todo sea legible adecuadamente en todos los dispositivos.

005

Referencias a tecnología heredada

Muchos de nosotros tendremos buenos recuerdos de Windows 98 o los primeros sistemas operativos de Mac. Algunos sitios web inculcan una sensación de nostalgia, y quizás de humor, al hacer referencia al software anterior. Después de todo, mucho diseño web brutalista proviene de los "viejos tiempos".

Mira este ejemplo de Publicar HTML (estas carpetas contienen arte experimental).

006

Lo que esto significa para los diseñadores

Pensamos que flat = simplicidad, pero obviamente todavía necesitaba un montón de trabajo de diseño para hacerlo bien.

Con la estética brutalista llegando a la vanguardia, los diseñadores necesitarán depender menos de los marcos de CSS tradicionales y los sitios de códigos desde cero.

Sin embargo, no parece ser que las empresas estén utilizando esta tendencia en sus sitios. El diseño brutalista -aparte de Bloomberg y algunos otros nombres más importantes- está, en este momento, limitado a agencias de diseño, sitios experimentales y blogs personales.

Si desea crear su propio sitio web brutalista, aquí hay algunos consejos ...

Elimina el CSS de tu sitio actual

Si bien algunos sitios dependen en gran medida de CSS para el posicionamiento horizontal, es posible extraer todos los estilos de algunos sitios y aún así mostrarlos "correctamente". Aquí hay un ejemplo:

Si su sitio se basa en animaciones llamativas, JavaScript o CSS elegante, probablemente necesite volver a crearse si desea adoptar este estilo. De hecho, la razón por la que abandoné WordPress fue porque no pude encontrar un tema que se ajustara a mi visión. Al final, terminé aprendiendo HTML / CSS editando una plantilla antigua de principios de la década de 2000. Después de eso, me sentí seguro de seguir adelante y comenzar de nuevo, garabateando mi propio CSS desordenado y haciendo lo más alejado de un sitio pulido y "moderno".

Reducir a monocromo

A veces, el diseño brutalista significa diseño simple. Y eso siempre es genial para la experiencia del usuario. Reducir la paleta de colores actual a solo 2 colores (negro y otro blanco, técnicamente), puede ayudar a reducir la sobrecarga del usuario y darles una dirección más clara sobre a dónde ir. Después de todo, no ve sitios con una tonelada de colores diferentes en el área de texto porque es difícil concentrarse.

Sea creativo con el posicionamiento de texto

¿Quién dijo que tienes que tener todo alineado muy bien? El sitio web anterior de Loïc Dupasquier, por ejemplo, es una declaración audaz que dice algo sobre el diseñador. Ver exactamente lo mismo que cualquier otra contratación potencial no es un buen aspecto.

A menos que seas el diseñador más famoso en ese campo, siempre serás el segundo mejor. Al evitar las "reglas" tradicionales sobre la tipografía, te estás destacando de la multitud.

Vuelva a aprender los conceptos básicos y las formas antiguas

Para mí, no se trataba de adaptar un diseño o conjunto de habilidades a una nueva mentalidad. Aprendí los conceptos básicos del diseño web cuando los sitios en realidad se parecían a los que te he mostrado, así que todo lo que tenía que hacer era tomar una actualización rápida y ponerme a trabajar.

Recomiendo consultar el código fuente en sitios antiguos y los que aparecen en sitios web brutalistas, viejos tutoriales HTML , o esta mina de oro que presenta una lista de los primeros sitios web que aún están vivos.

Donde este estilo funciona bien (y donde no)

Al final, un sitio web siempre es un equilibrio entre la autoexpresión y la creación de la mejor experiencia para sus usuarios.

En un blog, probablemente sea mejor concentrarse en hacer que el cuerpo del texto sea fácil de digerir. Notarás que mientras que el artículo de Bloomberg en Yahoo comienza bastante raro, el cuerpo principal del texto es fácil de leer.

Entonces, cuando estás construyendo un blog, es mejor que te apegues a las convenciones para el cuerpo del artículo. Por ejemplo, CABLEADO El diseño es bastante distintivo, pero cuando se trata de los artículos en sí, usan una fuente agradable y la mantienen legible.

Para un diseñador que trabaja principalmente con corporaciones congestionadas, una cartera experimental podría poner al cliente en el momento más vital: primer contacto.

Al final, todo se reduce a conocer a su audiencia, y si puede salirse con la suya haciendo caso omiso de las convenciones.

Sal y haz algo desagradablemente brillante.