Worköholics, comunicación y proyectos digitales.

Una mirada a la evolución del diseño de interfaz

UI/ UX

Desde la primera página online creada en 1991 la velocidad del cambio en el área del diseño web es equiparable a la del desarrollo de tecnologías como las telecos, los ordenadores y los dispositivos electrónicos. Imparable.

Pasado. Intuiciones y primeras aproximaciones.

En la década de los 90 nadie conocía la manera correcta de diseñar una página web, sólo se aplicaban algunos principios para jerarquizar la información basados en la tipografía. Los primeros sitios web eran páginas simples basadas en texto, sin gráfica y creadas con HTML cuyo fin (en la mayoría de los casos) era dar cabida a la mayor cantidad posible de información en una sola pantalla. Por suerte, el desarrollo de internet y la aparición del ADSL permiten incorporar las primeras imágenes a la web, y a finales de la década ya encontrábamos diseños que empezaban a incorporar elementos Flash al diseño basado en tablas.

En este periodo el diseño de cada página web se basaba en las preferencias, ideas y el buen o mal gusto del diseñador (web master!) y el cliente. Los sitios web de aquella época se caracterizaban por estar sobresaturados de información y contener mucha gráfica y animaciones flash que saltaban y destellaban.

A medida que el diseño web se reconoce como una nueva disciplina, comienzan a asentarse los fundamentos del diseño de interfaz y surgen las primeras tendencias que irán transformándose a medida que se desarrolla la tecnología y los lenguajes de programación.

En el año 2000 las hojas de estilo en cascada (CSS) permiten gestionar de manera separada el diseño y la programación, la estructura del sitio.

Entre el 2000 y el 2005 se desarrolla el lenguaje JavaScript, uno de los primeros intentos exitosos de dotar a la web de inteligencia. Con JavaScript los diseñadores pueden animar menús de navegación sin necesidad de utilizar Flash. Las barras de navegación comenzaron a colocarse en la parte superior de la página y los menús desplegables se convirtieron en una opción más popular.

El contenido creado por el usuario aparece en escena y en 2005 empezamos a oír hablar de la llamada “Web 2.0″.

  • Las redes sociales se orientan a involucrar al usuario en la creación de contenido y compartirlo con otros.
  • Contenido interactivo
  • Colores brillantes
  • Esquinas redondeadas
  • Gradientes y reflejos
  • Patrones en el fondo
  • Insignias de “oferta especial” pegadas a las paginas web

Con la llegada de la web 2.0 el enfoque del diseño se centra más sobre la publicación de contenidos (artículos, gráficos, etc.), que en sólo vender productos, tal y cómo se había hecho hasta el momento. Al principio el producto era lo importante y la estrategia y el diseño giraban entorno a él.

Con el tiempo el usuario pasará a estar en el centro de todos los procesos dando paso al ‘User Centered Design’, el diseño centrado en el usuario, que cambiará la manera de enfocar la estrategia, el diseño y el marketing.

En el año 2009 el HTML5 empieza a ganar popularidad como una eficaz alternativa a Flash, gráficos avanzados, vídeo y desarrollo de aplicaciones.

En 2011 el diseño web se ve significativamente influenciado por la difusión y el desarrollo de los sistemas operativos iOS y Macintosh.

La característica más destacada de esta nueva tendencia será el ‘Skeuomorphism’, el uso de elementos de diseño muy similares visualmente a sus homólogos en el mundo real.

  • Elementos que se parecen a la tela, cuero u otro material físico con textura y suturas realistas
  • Elementos tridimensionales
  • Esquema de color naturalista
  • ‘Cortinas’, cintas o sellos
  • El relieve de la letra
  • Combinación de diferentes tipografías
  • Grandes fotos

Con la crecida de los dispositivos móviles surge “Responsive Design“, una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla.

El 2012 se verá marcado por un nuevo acontecimiento, la aparición de ‘Metro’ de Windows que derivará en el estilo que hoy conocemos como ‘Flat design’ o diseño plano, con su menos es más, el gran principio del minimalismo. Este estilo será incorporado más tarde a los productos del sistema operativo Apple.

  • Minimalismo
  • Bidimensionalidad, sin sombras y profundidad
  • Contenido en primer plano
  • Retorno de colores brillantes
  • Tipografía interesante
  • Fotos de calidad e incluso vídeo como fondos

En 2013 el diseño plano o ‘Flat design’ se afianza con la aparición del sistema operativo iOS 7x. Y la guía de estilo que iOS había creado para mantener coherencia entre sus diseños y sistemas operativos se va renovando con cada nueva actualización. Esta guía ha sido y es un referente en el diseño de aplicaciones.

Presente. La centralización del usuario.

Con el desarrollo de la tecnología y la crecida de los dispositivos móviles la manera de consumir internet y el paradigma de la interacción ha cambiado.

Cada vez son más los internatutas que acceden a la red en movilidad. Y es aquí tratando de poner al usuario en el centro de todos los procesos cuando se empieza a priorizar la estrategia, la estructura de contenidos, el diseño y el desarrollo pensando en los dispositivos móviles y surge el ‘Mobile First Design’.

Con el desarrollo de las pantallas táctiles (una vez más unido al desarrollo de la tecnología) el usuario pasa a relacionarse directamente con el contenido, con sus gestos y hay que pensar la manera en la que diseñamos esos contenidos. Pasamos así de hablar de diseño de interface, a hablar de diseño de interacción.

En 2014 Google lanza Material Design, un concepto, una filosofía, unas pautas enfocadas al diseño, que busca combinar el diseño visual con la tecnología con el fin de mejorar la experiencia de usuario. Material Design recibe su nombre por estar basado en objetos materiales, en la realidad táctil. Piezas colocadas en un espacio (lugar), con un movimiento y tiempo determinado. Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal. Un intento por aproximarse a la realidad desde los dispositivos virtuales. El diseño se convierte así en un objeto tangible con propiedades físicas. El usuario se sumerge en el mundo y trabaja con el objeto y no con el plano de la pantalla. La animación no sucede por sí misma, el movimiento aporta significado y refleja las características del material, aplicando la lógica de las transiciones entre sí.

Material Design nace con un objetivo, adaptarse a todas las pantallas y a todos los sistemas operativos.

Trata de crear un lenguaje visual que sintetiza los principios clásicos del buen diseño con la innovación y las posibilidades que ofrecen la tecnología y la ciencia.

Algunas características de Material Design son:

  • Colores brillantes
  • Tendencia hacia el minimalismo
  • Diseño con coherencia
  • Uso de las sombras y la profundidad en el diseño
  • Utilización de iconos, generalmente planos
  • Animaciones con transiciones lógicas
  • La interfaz se ve y se siente como papel: la pantalla es una hoja de papel, y sobre ellos se utiliza la tinta.

En diciembre del 2014 IBM lanza IBM Design Language, que trata de establecer un lenguaje común entre los diseñadores,desarrolladores y el usuario. En IBM Design Language la base del concepto del movimiento toma los principios de la animación de Disney.

Una de las tendencias que continua desarrollandose es la simplicidad y el minimalismo en la creación del diseño y la generación de contenidos para no distraer al usuario y ayudarle a entender y a trabajar con esos contenidos.

Futuro. Nuevas formas de interacción.

Nacerán nuevas formas de interacción. En un futuro a corto/medio plazo los ordenadores de mesa dejarán de ser el referente para la navegación web, puesto que quedarán reducidos al uso profesional/laboral.

La tendencia general apunta hacia diseños simples, personalizados, fáciles de entender y orientados a guiar al usuario para que realice ciertas acciones. La posible masificación del Internet de las Cosas seguirá impulsando estos cambios.

Seguirá creciendo la navegación a través dispositivos que permitan la movilidad (wareables): smartphones, tablets, phablets, smartwaches…

Una de las tendencia a la que apunta el diseño web y aplicaciones es la animación. El movimiento seguirá creciendo e implementandose a medida que mejore la tecnología y los lenguajes de programación tal y como ocurrió con el desarrollo de tecnologías como CSS3, HTML5 y JavaScript.

El desarrollo de las nuevas tecnologías permitirá el desarrollo de nuevos interfaces que conectarán el mundo físico con el digital, como HP Sprout que permite escanear en 3D cualquier objeto y digitalizarlo.

Por otro lado la integración del mundo real y cómo los objetos se perciben en el mundo virtual pasará a otro nivel y se percibirá en detalles como la incidencia de la luz y cómo las sombras de los objetos se proyectan en la pantalla en función de la posición de la fuente de luz.

Otra de las tendencias es la incorporación de otros sentidos como el sonido. Hasta el momento se le ha dado poca importancia porque existe la percepción de que el sonido en web puede ser molesto y distraer al usuario, pero tal vez sea porque aún no sabemos cómo trabajar adecuadamente con el sonido. Por ejemplo en el mundo automovilístico hace mucho tiempo que se tiene en cuenta en el diseño de interacción. server hosting ip . Existen departamentos de diseño de sonido que tienen en cuenta los diferentes tipos de sonidos como las puertas de cierre, los botones al pulsarlos, y por supuesto el sonido del motor. Esta es una tendencia lógica, ya que la experiencia de la interfaz de usuario es más agradable y el lenguaje de comunicación humano más efectivo cuando se combinan más sentidos.

De la misma manera en los estudios de diseño web aparecerán diseñadores que trabajen en el campo de las sensaciones táctiles y gustativas. En un futuro próximo habrá pantallas (ya hay en versión beta) con la posibilidad de sentir la textura de las superficies pintadas a través de los dedos.

En definitiva, la tendencia general en diseño web y diseño de interface apunta hacia diseños personalizados e impactantes que tratarán de crear una experiencia unificada independientemente del dispositivo desde el que se navega y mejorar la experiencia de usuario.

CUÁNDO

Miércoles 24 de Junio de 2015

QUÉ

+ UI+ UX

QUIÉN

Nagore Frias

Front-end Developer y Marketing Digital

DÓNDE

Bilbao

COMPARTE


Nagore Frias

Front-end Developer y Marketing Digital

  • CUÁNDO:

    Miércoles 24 de Junio de 2015

  • DÓNDE:

    Bilbao

  • QUÉ:
    UI , UX
  • COMPARTE:
  • Blog