Ubicuo Studio
iOS & Android books/applications developers
  • facebook
  • twitter
  • pinterest
  • vimeo
  • apple
  • Info
    • Nuestra historia
    • Equipo
    • Eventos/Workshops
    • Filosofía
    • Prensa
    • UK Gambling Sites Not On Gamstop
    • Online Casino Zonder Cruks
    • Casino Zonder Cruks
  • Apps Portfolio
  • Servicios
    • Edición digital
    • Revistas digitales
    • Videojuegos
    • Apps para museos
    • Branded Apps
    • Cursos
  • Escuela
  • Contacto
  • Blog
Select Page ...

Blog

¿Esqueuomorfismo o diseño plano (flat)?

Emma Llensa 29 agosto, 2013 Diseño gráfico 3 minutes

Hace ya meses que podemos comprobar que una de las últimas tendencias en diseño gráfico de apps y webs es el diseño flat. Este tipo de diseño tiene también su opuesto, el diseño esqueuomórfico (skeuomorphism en inglés).

¿Qué es el diseño esqueuomórfico (skeumorphism)?

Este tipo de diseño es el que imita la apariencia de los objetos físicos en entornos digitales. Por ejemplo, si nos fijamos en el diseño del calendario de iOS 5:

Diseño esqueuomórfico

Veremos que el diseño del calendario imita a una agenda física. Podemos ver la textura arrugada como de piel en la barra superior y en la barra inferior y, además, vemos como justo en la mitad del documento hay una separación que nos induce a pensar que hay dos páginas. Pero, ¿cómo puede haber dos páginas si esto es la pantalla de un iPad?

Miremos ahora la aplicación de libreta de notas de iOS:

Diseño gráfico apps

El lector de libros digitales iBooks simulando el efecto de pasar de página:

iBooks pasando de página

El éxito del diseño esqueuomórfico ha sido, precisamente, el de imitar a objetos físicos. Cuando apareció por primera vez el iPhone, seguramente los diseñadores pensaron que era mejor que se imitara a los objetos físicos para que los usuarios se acostumbraran pronto a utilizar sus dispositivos móviles. De la misma manera, seguimos llamando “escritorio” a esa pantalla que aparece cuando iniciamos el ordenador. Si el escritorio es una metáfora literaria, el diseño esqueuomórfico implica una no-metáfora visual, ya que lo que se imita se vuelve evidente.

¿Qué diría McLuhan de esto?

Si pensamos que el diseño gráfico no es sólo una mera anécdota en nuestras vidas, sino que forma parte de ellas de manera intrínseca y que, de alguna forma, nos moldea a nosotros… ¿por qué nos dejamos engañar por metáforas falsas? ¿por qué no le hablamos claro a nuestros dispositivos electrónicos y les pedimos que sean claros, que separen las cosas, que no mezclen objetos físicos con objetos digitales? Según McLuhan, todo paso de un medio a otro requiere una transición, en la que el nuevo medio aún retiene cosas del medio anterior. Así, hasta que no pasemos a otro medio (un tercer medio), no podremos dejar atrás lo retenido del primer medio.

Lo opuesto: el diseño gráfico plano o flat

Por contraposición, el diseño gráfico flat se basa en minimalismo visual, dejando de lado las texturas y los efectos de luz para pasar a simples formas y colores planos. Microsoft fue uno de los primeros en proponer un diseño gráfico plano (flat) con su Metro UI:

Diseño gráfico de apps: diseño flat Metro Windows

Le siguieron otros muchos y hoy en día hasta Apple ha abandonado el diseño gráfico esqueuomórfico para utilizar el diseño gráfico flat en su versión de iOS 7. Algunos ejemplos:

Diseño de la app Hangout de Google para iOS

Diseño de la app Hangout de Google para iOS. Vemos que no hay ningún elemento esqueuomórfico, todos los iconos y el diseño en general es plano sin sombras ni efectos de luz de ningún tipo.

El diseño gráfico de iOS 6 vs 7

El diseño de iOS 6 (a la izquierda) y el diseño de iOS 7 a la derecha. Podemos comparar la pantalla de inicio del iPhone. Si nos fijamos en el primer icono, el de la app “Messages”, veremos que en la izquierda aparece con un efecto de luz (el típico de las apps de Apple) y el fondo verde tiene una textura (rayas diagonales); en la versión de iOS 7 aparece sin el efecto de luz y sin la textura en el fondo verde.


Guía para adaptar nuestro diseño esqueuomórfico a diseño flat

Por otro lado, Apple ya ha publicado la guía para desarrolladores de apps para poder hacer la transición desde el diseño esquueomórfico al diseño flat para que cuando los usuarios se actualicen a iOS 7 no vean anticuadas las aplicaciones no actualizadas a este nuevo tipo de diseño. En la guía, Apple nos introduce a las diferencias que hay en algunas de sus apps entre el diseño esqueuomórfico y el diseño plano:

La misma pantalla en iOS 6

Diseño gráfico iOS 6

Elementos en iOS 7

Diseño gráfico iOS 7

Calendario en iOS 6

Diseño gráfico iOS 6

Calendario en iOS 7

Diseño gráfico iOS 7


 El futuro del diseño plano o flat

Como toda tendencia, habrá que ver qué futuro tiene este tipo de diseño. Seguramente, debido a que es tendencia se usará compulsivamente por muchos diseñadores. Al final habrá otra tendencia que le quite el primer puesto. De todas maneras, ya iremos viendo qué deja en herencia el diseño flat al futuro del diseño gráfico.

Related posts:

  • Cosas que los diseñadores gráficos de ámbito impreso tienen que saber cuando dis...Cosas que los diseñadores gráficos de ámbito impreso tienen que saber cuando dis…
  • Prototipos en vídeo: proceso de creación de una appPrototipos en vídeo: proceso de creación de una app
  • La ley de Fitts aplicada a los nuevos iPhone 6 e iPhone 6 PlusLa ley de Fitts aplicada a los nuevos iPhone 6 e iPhone 6 Plus
  • Herramientas para prototipar apps: proto.ioHerramientas para prototipar apps: proto.io
  • Diseñando apps: ¿Qué es el diseño coherente?Diseñando apps: ¿Qué es el diseño coherente?
  • Recopilatorio #1: sobre diseño de appsRecopilatorio #1: sobre diseño de apps
  • 9 tableros de Pinterest de diseño de apps que deberías seguir9 tableros de Pinterest de diseño de apps que deberías seguir
← ‘Escoge tu propia aventura’ quiere ser un libro digital
¿EPUB? ¿PDF? ¿Revista interactiva (App)? →

One Response to ¿Esqueuomorfismo o diseño plano (flat)?

  • Miguel de Pereda
    3 / 17 / 2016

    Artículo interesante, muy bien explicado y muy claros los ejemplos.
    Quizás el problema del esqueuomorfismo es que ha imitado la realidad excesivamente, se ha pasado de rosca, como en el ejemplo del calendario IOS6, con la rueda de los días, que no existe en un calendario real.

    Miguel de Pereda 3 / 17 / 2016
    Responder

Deja un comentario Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

  • Buscar

  • Entradas recientes

    • Webinar gratis sobre creación de publicaciones y revistas digitales
    • 4 aplicaciones para crear revistas digitales
    • 5 herramientas para crear revistas digitales
    • Carrera de diseño digital de Ubicuo Studio
    • Concurso #propositosdelfreelance para este 2016 en Ubicuo Studio
  • facebookinstagrampinteresttwittervimeoyoutube
  • Suscríbete al blog

    Introduce tu e-mail para suscribirte a este blog y recibir notificaciones de nuevas entradas por e-mail.

  • Léenos vía RSS

    RSS Feed RSS - Posts

  • Categorías

    • Cursos
    • Edición digital
    • Apps y museos
    • Branded Apps
    • Videojuegos
    • Filosofía del software
    • Ubicuo Studio

      desarrollamos Apps revolucionarias.

    • FacebookRSSTwitterVimeoYouTube
    • Curso de creación de publicaciones digitales para iPad, Android, Kindle Fire

      Abierta la convocatoria para el curso on-line de creación de revistas digitales para dispositivos móviles y tabletas con InDesign y Mag+. Infórmate aquí.

    • Aviso legal

    • Info
    • Apps Portfolio
    • Servicios
    • Escuela
    • Contacto
    • Blog
    Copyright © 2014 Ubicuo Studio. All rights reserved.
    • English
    • Español
    • Català