Cuando estás en los primeros pasos de la creación de tu página web, una de las primeras cosas que debes hacer en términos de diseño web es escoger un estilo. En esta entrada de blog te presento los tres grandes estilos de diseño web que existen a día de hoy, sus pros y sus contras. Quiero que conozcas en qué consiste cada uno para que elijas cual te gusta más y tomes todas tus decisiones de diseño web basándote en una misma estética gráfica.
En primer lugar, quiero introducirte un concepto que quizás no te suena (demasiado): la interfaz del usuario o UI. Aunque suene muy sofisticado, la interfaz del usuario es que lo que el visitante ve en pantalla cuando entra en un entorno digital. Ya sea web, app o software.
Puede que nunca te hayas planteado cómo vas a diseñar algunos elementos de tu web como los botones, los menús, los iconos… parece que ves lo mismo en todas las webs y has asumido que hay una especie de estándar para todo el mundo. Pues no. Hay algunas diferencias que igual pasan desapercibidas y otras que no tanto. Desde los años 90 hasta hoy en día ha habido tres grandes estilos de diseño web, y actualmente coexisten mayoritariamente dos. Voy a repasar los tres de más anticuado a más novedoso.
Esqueumorfismo
Sí, es una palabra con una pronunciación complicada, casi tanto como su definición formal. Y es que la Wikipedia define el esqueumorfismo (en inglés, skeuomorphism) como una técnica ornamental o de diseño aplicado en un objeto fabricado de forma que se parezca a otro material. La siguiente imagen es un ejemplo de esqueumorfismo:
En diseño web se adoptó esta tendencia cuando empezaron a aparecer las primeras webs y aplicaciones informáticas. El objetivo era que el usuario viera en la pantalla lo mismo que en la realidad para que lo reconociera.
El gran embajador de esta tendencia ha sido Apple. Sus iconos eran unas meticulosas ilustraciones muy detalladas que representaban aquello a lo que hacían referencia de una forma muy cercana a la realidad. De esta forma, sus botones tenían relieves, sombras y parecían que se hundían al hacerles clic.
En ese momento, este tipo de diseño estaba completamente justificado. La gente estaba acostumbrándose al entorno digital: las personas cogían por primera vez el ratón de su ordenador y al moverlo movían un puntero en una pantalla. No les íbamos a complicar más la historia: los botones tenían que hundirse, los iconos tenían que parecer fotos de los objetos que representaban y los menús tenían que tener sombras y degradados como si de barras de plástico se trataran.
Ventajas del skeumorfismo
- Su principal ventaja es su motivación principal: los elementos con los que el usuario interactúa no dejan lugar a dudas. Esto es algo importantísimo para introducir a personas en el mundo digital.
- Algunas creaciones pueden ser muy bonitas y estéticas. A mi personalmente me fascinan algunos elementos gráficos creados en base a esta corriente.
Desventajas del skeumorfismo
- Es muy complicado si se quiere ejecutar bien. Se tienen que controlar las luces, los degradados, las sombras… Si no tienes conocimientos de CSS y de diseño, este estilo de diseño web es muy difícil de dominar. Requiere de mucha técnica.
- Implica más lineas de código. Esto repercute en la carga de las páginas: cuanto más grande sea el archivo de CSS, más pesará y más tardará en cargarse. Aunque para diseñar tu web con WordPress no vas a tener que escribir ni una linea de código, quiero que veas un ejemplo de código CSS para un botón diseñado en base al skeumorfismo:
Para que entiendas lo que te digo, a continuación tienes el CSS de un botón en flat design (el estilo de diseño web que a continuación te explico):
Por cierto, si no tienes ni pajotera idea de qué acabo de poner, te recomiendo leer mi artículo sobre diferencias entre HTML y CSS.
Flat design
Esta es la corriente que actualmente domina el mundo de Internet. El flat design empezó a expandirse hacia 2011 y hoy me atrevería a decir que el 90% de las nuevas webs que se diseñan se hacen en base a esta técnica. Esta corriente se empieza a extender cuando los usuarios de Internet ya tienen claro el manejo de los diferentes elementos que conforman las webs.
A diferencia de los otros estilos de diseño web, el flat design consiste en prescindir de casi todo. Quedan eliminadas las sombras, los degradados y los efectos en los elementos de la UI tales como botones, menús, iconos, etc. Es el minimalismo extremo en contraposición al gusto por el detalle del skeumorfismo.
Ventajas del flat design
- Diseños más limpios: en general, las webs basadas en el flat design son muy limpias. Al no haber sombras ni degradados hay menos riesgo de caer en horteradas, vamos.
- Es más fácil de implantar. Y más rápido ya que no tienes que ir configurando gradientes y sombras.
- La página carga más rápida y no solamente por el CSS implicado. Cuando realizas un diseño minimalista, las imágenes, los iconos y casi todos los archivos gráficos pesan menos al tener menos detalles.
Desventajas del flat design
- Puede quedar una web desangelada. Compénsalo con buenas imágenes y un buen uso del color.
Bonus: curiosidad sobre la guerra entre estos dos estilos de diseño web
Si conoces un poco la biografía de Steve Jobs sabrás que le gustaban las cosas intuitivas. Por eso el emblemático botón del iPod y la pantalla táctil del iPhone lo llevaron al más absoluto éxito cuando su empresa estaba en sus horas bajas. Él quería que todas sus creaciones fueran fáciles de entender. Por eso no quería ni oír hablar del flat design cuando otras compañías como Windows empezaron a implantarlo. Finalmente en 2013 y después de su muerte, Apple se pasó al flat design redefiniendo todas sus aplicaciones para móvil y la imagen de su marca.
Material design
El material design es como diría mi padre el «ni tan calvo ni con tres pelucas» del diseño de UI. Vamos, es un término medio entre el skeumorfismo y el flat design. El material design es una guía de estilo de UI creada por Google y parece que ha llegado para quedarse. Si tienes un móvil con Android y aplicaciones de Google, ya sabes cómo es el material design. Está enfocado principalmente al diseño de apps.
Con el material design se recuperan algunos elementos que con el flat design se habían perdido. Por ejemplo, las sombras que permiten trabajar con la profundidad y el espacio tridimensional. Pero también las animaciones suaves, los colores vivos y el uso de otros recursos interactivos como la vibración del móvil o el sonido.
Ventajas del material design
- Es muy llamativo y estético. Eso no lo podemos negar.
- Es nuevo. Y cuando de entre toda tu competencia tú eres el primero en hacer algo guay, destacas.
Desventajas del material design
- No está pensado principalmente para web. Está pensado básicamente para aplicaciones móviles y software. Aunque gran parte de su estética se puede aprovechar para webs e imagen gráfica en general.
- Es complicado de implantar pues requiere de conocimientos avanzados. La mayoría de recursos que existen para que te hagas tu web con WordPress sin tener ni idea de código aún no incorporan esta técnica.
Conclusión sobre los estilos de diseño web
Para mi, si no tienes mucha idea de diseño y de código, la única opción viable es el flat design. Si quieres incorporar algún elemento más vanguardista, opta por añadir sombras muy difuminadas a tus elementos. Con ello conseguirás la profundidad y perspectiva multinivel que el material design busca. Pero si tu dominio del diseño web es bajo, no te compliques intentando cosas supercomplicadas.
El diseño skeumórfico solamente lo recomiendo en el caso que te dirijas a un colectivo que no domina -en general- el entorno digital. La tercera edad es el ejemplo más obvio.
Sea como sea, no mezcles los diferentes estilos de diseño web. Si decides pasarte al bando del skeumorfismo, hazlo todo igual. Si por el contrario prefieres el minimalismo, que todos tus elementos sean de colores planos y simples.
¿Qué te ha parecido este artículo? ¿Qué estilo te gusta más?
