¿Cuáles son las ventajas relativas del diseño plano, el diseño de materiales y el esceptomorfismo?

8

He estado mirando las pautas de Google para esta cosa llamada "diseño de material" , y la he seguido un poco. Sin embargo, también veo muchos sitios que usan diseño plano: Twitter , Codecademy y Gitter , y esos son solo algunos. Luego están los que hacen uso de gradientes CSS3, sombras, etc. e imágenes detalladas para diseñar un sitio que se vea real (corrígeme si me equivoco, pero ¿no es esto lo que es el esceptomorfismo?), Como la página de inicio para Twitter Bootstrap 2 .

Por lo que entiendo, el diseño plano reduce la carga en el tráfico móvil.

¿Qué ventajas (en términos de velocidad / UX / etc., especialmente) ofrecen cada una sobre la otra?

DᴀʀᴛʜVᴀᴅᴇʀ
fuente
Creo que esta es una pregunta interesante para plantear. Mis pensamientos iniciales son que los diseños skeuomorphic podrían tener una desventaja de velocidad si dependen en gran medida de las imágenes. Supongo que eso es lo que quiere decir con diseños planos que reducen la carga de tráfico móvil. Pero como contrapunto, un diseño skeuomorphic aún podría lograrse con las muchas características disponibles en CSS3, por lo que me temo que la respuesta a si una u otra es ventajosa con respecto a la velocidad sería "a veces sí, a veces no"
JohnB
@JohnB Ni siquiera puedo acceder al sitio. Recibo un error de 'bucle de redireccionamiento' en Chrome, aunque es mejor no sumergirme en una discusión OT aquí.

Respuestas:

11

El skeuomorfismo es realmente lo contrario del diseño plano . El "Diseño de materiales" de Google es simplemente su nombre de marca para sus interpretaciones específicas del diseño plano. Sin embargo, sigue siendo un diseño plano. "FLat Design" fue acuñado por Apple cuando lanzaron iOS7. Se dio cuenta porque era el primer término utilizado, podría haberse llamado fácilmente "Diseño de materiales" si Google lo hubiera hecho primero.

La práctica del esqueuomorfismo es agregar elementos visuales que esperaría ver si el objeto fuera físicamente real en lugar de proyectado en una pantalla. Un ejemplo sería sombras y reflejos. Existen en todo en el mundo real pero en nada en el mundo digital. Agregar estos elementos skeuomorphic está diseñado para hacer que los humanos se sientan más familiarizados con los elementos digitales.

El diseño plano es lo opuesto a esto. En el "diseño plano" no hay consideración para la física y la iluminación del "mundo real". Sin embargo, los elementos digitales están hechos, sin embargo, el diseñador desea hacerlos sin preocuparse por lo que la "realidad" le haría al elemento si el objeto fuera físico.

La página de inicio de bootstrap no es un ejemplo de esceptomorfismo. Es un ejemplo de diseño plano en general. Aunque se podría argumentar que el rectángulo insertado en el medio con el efecto de "relieve" insertado también es skeuomorphic. Entonces, quizás un "híbrido" puede ser la mejor descripción.

En términos de ventajas / desventajas técnicamente, no hay razonamientos sólidos para elegir uno sobre el otro.

A menudo, para lograr imágenes de efectos skeuomorphic creíbles de alta calidad. Las imágenes aumentarán naturalmente las solicitudes HTTP y la carga del navegador. Si renuncia a imágenes a favor de CSS skeuomorphic, el CSS puede ser extremadamente complicado y grande. Si bien disminuir las solicitudes de imágenes HTTP requeriría, el tamaño adicional (kb) de un archivo CSS con elementos skeuomorphic puede superar la reducción en las solicitudes HTTP (desde el punto de vista de los usuarios).

El diseño plano generalmente se realiza fácilmente con CSS3 básico. Si se necesita una imagen en un diseño plano, lo más probable es que se necesite la misma imagen también en un diseño skeuomorphic. Por lo tanto, se compensan entre sí en términos de ventajas / desventajas. Flat Design CSS es habitualmente menos complejo y más fácil de editar, pero no tiene por qué serlo. Es muy posible crear un diseño plano con propiedades CSS muy complejas. La mayoría de los diseños planos contienen gradientes, simplemente no gradientes del "mundo real" según lo que haría la luz si el objeto fuera real. Todos los iconos iOS7-8 o Windows 8 de Apple usan degradados. Simplemente gradientes muy sutiles en lugar de "hacer que parezca que son pendientes" pendientes.

Al final, no hay una razón difícil por la que el diseño plano pueda ser técnicamente mejor o peor que el esceptomorfismo. Todo se reduce a una cuestión de preferencia por parte del diseñador. Tanto el esceptomorfismo como el diseño plano son meras tendencias de diseño sin ninguna base en razonamiento técnico.

es similar a preguntar "¿Qué es técnicamente mejor un sitio web rojo o un sitio web azul?" - no hay otra respuesta que no sea "Lo que prefieras".

Scott
fuente
1
Una nota es que los efectos skeuomorphic hechos puramente en CSS causarían una gran disminución del rendimiento más allá de solo cargar el archivo porque los gradientes, las sombras de los cuadros, etc. son muy intensos
Zach Saucier
Eludo a eso en la respuesta @ZachSaucier :)
Scott