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

Blog

Patrones de diseño animados: el nuevo esqueuomorfismo

Emma Llensa 3 diciembre, 2013 Diseño gráfico 2 minutes

Esta semana en el «Curso on-line de diseño y conceptualización de apps» hablamos de las interfaces animadas y de cómo representarlas mediante prototipos funcionales. Queremos compartir con vosotros una breve introducción a este punto del temario porque creemos que puede ser de interés de diseñadores de interfaces de dispositivos móviles y diseñadores de interacción.

Esqueuomorfismo: metáforas que funcionan

Hace un tiempo hablamos en el blog sobre la dicotomía entre el diseño esqueuomórfico y el diseño plano (flat). Llegamos a la conclusión de que el diseño esqueuomórfico funcionó durante mucho tiempo gracias a la utilización de metáforas a las cuales la gente estaba acostumbrada. Las primeras versiones de iOS (el sistema operativo del iPhone, iPad, etc.) contenía multitud de ejemplos de diseño esqueuomórfico. El bloc de notas era como un bloc de notas real, la agenda se parecía mucho a una agenda de verdad, el Game Center era como un billar, el quiosco era como una estantería real de madera… Esta simulación del mundo real ayudó a los usuarios de este tipo de dispositivos a entender estos teléfonos. Con la salida de iOS 7, Apple ha abandonado el diseño esqueuomórfico siguiendo el ejemplo de Google con Android y de Microsoft con su Windows Phone.

Patrones de diseño animados: el nuevo esqueuomorfismo

Se ha abandonado este tipo de diseño, pero no se ha abandonado la intención de los diseñadores de hacer que el usuario entienda la interfaz y el funcionamiento de una app mediante la simulación de acciones y procesos del mundo físico. ¿Cómo lo han hecho? Mediante patrones de diseño animados. Si analizamos el diseño de Windows Phone o el nuevo iOS 7 nos daremos cuenta de que las animaciones ayudan al usuario a entender de dónde viene y a dónde va, dónde está la información, etc. Las animaciones y transiciones en el diseño de la interfaz de una app añaden la dimensión del tiempo a esta, haciendo que el usuario entienda mucho mejor el funcionamiento de la misma. De esta manera, con estas transiciones y animaciones conseguimos mejorar la experiencia que el usuario tendrá utilizando nuestra app.

En este ejemplo podéis ver cómo la nueva pantalla aparece de derecha a izquierda, mostrándole al usuario cómo está estructurada la información de la app.

En este ejemplo podéis ver cómo ordenar ítems en una lista de la app Clear

Gracias a estas animaciones y transiciones en la interfaz podemos ofrecer al usuario un producto mucho más fácil de utilizar (más intuitivo). Imaginaros el ejemplo de la app Clear sin que la interfaz estuviera animada: sería mucho menos intuitivo para el usuario entender cómo está reordenando los ítems de la lista. Mañana continuaremos con el tema de las interfaces animadas analizando la app Clear, así que estad atentos :-)


Related posts:

  • Los mejores 10 iconos de AppsLos mejores 10 iconos de Apps
  • Diseño de interfaz para móviles: patrones de diseñoDiseño de interfaz para móviles: patrones de diseño
  • Clear app y su interfaz animadaClear app y su interfaz animada
  • CamMe: interfaz invisibleCamMe: interfaz invisible
  • Herramientas para prototipar apps: proto.ioHerramientas para prototipar apps: proto.io
  • Los 7 errores más comunes en diseño de revistas digitalesLos 7 errores más comunes en diseño de revistas digitales
  • 11 recursos gratis e imprescindibles para diseñar apps11 recursos gratis e imprescindibles para diseñar apps
← ¿Cuánto cuesta desarrollar un libro enriquecido (app)?
Clear app y su interfaz animada →

One Response to Patrones de diseño animados: el nuevo esqueuomorfismo

  • Sara Pedrero
    12 / 3 / 2013

    Genial post, que bueno es leer cosas interesantes antes de empezar el día :)

    Sara Pedrero 12 / 3 / 2013
    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

    • Cursos de Facebook Ads en Madrid y Barcelona
    • Webinar gratis: cómo conseguir más y mejores clientes
    • Webinar gratis sobre creación de publicaciones y revistas digitales
    • 4 aplicaciones para crear revistas digitales
    • 5 herramientas para crear revistas digitales
  • 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. Web by: Emma Llensa | Consultora de marketing digital
    • English
    • Español
    • Català