Hoy me apetecía escribir este post para hablar sobre las tendencias en el diseño web. Creo que es interesante reflexionar al respecto, pues en clase ha surgido un debate muy enriquecedor sobre como fluyen estas tendencias a lo largo de los años y como nos van moldeando (en muchas ocasiones) casi sin darnos cuenta. Aunque conforme va avanzando el tiempo me considero un desarrollador más centrado en el código que en el diseño (quizá no tengo ese don natural para la imagen y/o el color), creo que conocer los aspectos fundamentales del diseño, así como investigar sobre ello me hará un profesional mucho más formado.

Aunque alguno de mis compañeros han argumentado cosas distintas, creo que el cambio en las tendencias del diseño web no está enfocado a facilitarnos la vida al manejar internet, sino que esto está directamente relacionado con los nuevos paradigmas que han surgido con los famosos frameworks y la idea de las Single Page Application o aplicaciones que se ejecutan en una sola página. Estos frameworks han establecido esta forma de desarrollar para los programadores, que a su vez se ha visto como una solución que encaja perfectamente con la situación actual: webs dinámicas, con gran carga gráfica que es necesario que procese el ordenador del cliente.

Este cambio constante en las formas de mostrar las páginas webs también se debe a la necesidad de hacerse notar, como se puede ver en este artículo en donde se analiza la controversia surgida a raíz de que Twitter decidiera cambiar los colores de alguno de sus botones. Creo que esto, más que mejorar la interfaz (pues en mi opinión estaban más claros antes), surge de la idea de dar que hablar y destacar entre la amalgama de compañías que existen en el mercado.

Para continuar con el tema, la imagen superior muestra una de estas tendencias: el Neomorfismo. Hace unos años, cuando comencé a profundizar en el desarrollo web, recuerdo que me resultó muy llamativa esta técnica. El diseño es simple y básicamente es aplicar unos cuantos efectos con CSS para generar esa sombra/luz que da la sensación de que el botón, o el elemento sobre el que está aplicando, sale o se hunde de la pantalla. No obstante, investigando un poco, pude comprobar como este efecto no favorece en nada la accesibilidad. Detrás de cada una de estas tendencias también suele haber un componente psicológico, ya sea para generarnos dopamina con un color o para que compremos de una manera más sencilla.

Por último, realizamos en clase un Kahoot sobre varios conceptos de diseño. En esta ocasión no hubo suerte, pues quedé quinto. No obstante, me sirvió para afianzar algunos conceptos sobre paletas de colores ya que, como dije en anteriores post, normalmente suelo recurrir a paletas ya definidas y no me paro a pensar en los colores que se han usado para crearlas: complementarios, monocromáticos, etc.

Se hizo también uno parecido sobre tipografías, en el que casualmente quedé en la misma posición (no estaba preparado). También realizamos la elección de delegado y subdelegado de clase (para nada amañada) en donde salí elegido como subdelegado junto con Ana, la delegada.

Finalmente, el último día de clase se nos propuso la tarea de reflexionar sobre la complicación a la hora de leer las webs actuales. Personalmente (no se si será por mi edad) pero cada vez encuentro más complicado leer textos en la web: las fuentes suelen ser demasiado pequeñas y los fondos muy claros, lo que termina molestándome a la vista. Sobre esto, y más, se nos plantearon las siguientes preguntas:

¿Quién es David Carson?

Se trata de un diseñador gráfico americano que ha destacado fundamentalmente por sus innovadoras propuestas en el campo de las revistas (magazines) así como por el uso experimental de la tipografía. Su historia es bastante interesante, pues también ha trabajado como director.

¿Puedes poner alguna obra suya?

Me ha llamado la atención este proyecto enfocado en el mundo del surf (del que también es fanático). Creo que se aprecia cómo combina las formas con la tipografía para conseguir un diseño solo apto para los mejores bolsillos (las tablas rondan los 3.000 dólares). Está claro por qué lo llaman un “transgresor”.

¿Quién es Kevin Marks? ¿A qué se dedica?

Se trata de un desarrollador de software y activista británico. Su historia pasa por haber trabajado en Google, ha realizado diversos programas tipo podcast y ha recibido premios por su blog. Su información en Wikipedia es bastante escueta y su LinkedIn aparece como privado, pero parece ser que trabaja en una empresa llamada XCentium, una consultora digital.

¿Podrías encontrar un ejemplo de página con los problemas que menciona el artículo?

Para mí un ejemplo claro es esta web sobre venta de coches. La conocía desde hace un tiempo ya que previamente al ciclo realicé un curso del SEF sobre desarrollo de aplicaciones web y vimos varios ejemplos de este tipo. En esta web se aprecia claramente lo que comenta el artículo: elementos transgresores (más o menos estéticos, dependiendo de la opinión de cada uno) que llaman la atención pero que dificultan totalmente la usabilidad de la web. Se hace muy complicado moverse entre secciones, así como saber cuál es el orden lógico entre elementos (¡la vista se vuelve loca!).

¿A quién echan la culpa del problema?

A las grandes compañías como Twitter, Facebook y Apple, pues recomiendan guías de estilo que al final terminan siguiendo el resto de desarrolladores. Al final, este trío de grandes, recomiendan una serie de sugerencias, pero, a la postre, ellos terminan realizando lo opuesto.

Averigua una forma de poner el nivel de contraste entre texto y fondo no inferior a 7:1.7.

Una solución sería obviar estas modas pasajeras y regresar a los principios tipográficos de la impresión en papel. Mantener el tipo de letra en negro y variar el grosor y tamaño de la fuente. A esto se le suma el mejorar el diseño para las personas que leen en pantallas más pequeñas (e incluso más tenues). Es evidente que esto es arriesgado, pues desmarcaría al que aplicase estos principios del curso del diseño actual de la web.

¿Qué temas trata el artículo relacionados con la accesibilidad web?

Trata el tema de las personas daltónicas, así como lo comentado anteriormente sobre el ratio de opacidad. También comenta el hecho de que el uso de ciertas tipografías hace que la lectura sea muy incómoda, así como una colocación desordenada de los elementos en la web. Los elementos en 3D también pueden ser un punto negativo, pues no todas las personas los aprecian de la misma manera. En resumen, el artículo comenta que el acceso a los contenidos no se realiza de una manera relajada y cómoda.

Me ha gustado una frase en especial dicha por Marks:

Internet (…) Es una herramienta de uso universal. Y las mejores herramientas no son las de diseño más vanguardista, sino las que pueden usarse de manera más cómoda y sencilla.

Tras todo lo visto toca sacar conclusiones. Me ha parecido muy interesante el uso de Kahoot como herramienta de aprendizaje, favorece la competitividad sana y ayuda a afianzar conceptos. Además, el incidir en aquellas respuestas en donde hemos fallado me parece muy útil, ya que nos da tiempo a rectificar los conocimientos que no habíamos interiorizado bien. Lo que si es cierto es que me gustaría poder realizar más prácticas o proyectos relacionados con el desarrollo web, en el sentido de hacer pequeñas webs (usando los conceptos aprendidos en clase) pero en donde podamos plasmar nuestras capacidades en HTML, CSS, Bootstrap o cualquier otro framework.

Creo que unos conceptos básicos de diseño son fundamentales, pero estaría bien trabajarlos transversalmente junto con el resto de materias que estamos dando en el ciclo. En mi caso, este verano estuve practicando y recordando cosas sobre CSS; para ello realicé diversos proyectos para aprender la colocación de los elementos y todos los entresijos de CSS, cosas que al final nos acabaremos encontrando en nuestro día a día como desarrolladores. Creo que sería muy enriquecedor hacer este tipo de tareas. No es necesario pensar mucho en qué proyectos podríamos hacer, la web Dribbble cuenta con gran cantidad de diseños o mockups (ver imagen superior).

Un ejercicio interesante sería replicar algunas de estas webs con solo HTML y CSS. También se podría realizar intentando “copiar” la web de Google o la de Apple. Aunque no sepamos cómo realizar ciertas partes de la web, un ejercicio fundamental en la vida del desarrollador web es ser autodidacta, lo que nos haría aprender a buscarnos la vida. No obstante, las pocas semanas que llevamos de curso me están sirviendo para aprender muchas cosas que desconocía y estoy muy contento en cómo se está desarrollando la asignatura.