Web y Diseño Movil

Teatre Lliure

El emblemático teatro de artes escénicas apostó por un restyling total de su página web. Desde Omatech aplicamos la guía de estilo predeterminada al diseño web que creamos y realizamos el desarrollo y puesta en marcha de la web cultural con sistema de ticketing.

Imágen de cabecera Teatre Lliure

El reto

Teatre Lliure condesa en su página web un gran número de funcionalidades, como la cartelera, sistema de ticketing para la adquisición de entradas, así como un repositorio del historial de obras. Desde Omatech nos encargamos de unificar las distintas utilidades en una única web conectando las distintas plataformas en un solo site.

DESCRIPCIO DE LA IMATGE

El diseño

Las obras,
las grandes protagonistas

Las auténticas estrellas de Teatre Lliure son las obras y por consecuencia los carteles de estas, dispares entre si crean una web llena de color y alegría, por eso el foco debe recaer sobre ellos. Para realzar el protagonismo de los espectáculos apostamos por una interfaz austera, con una combinación monocroma con toques de color rojo. Además, creamos la iconografía exclusivamente para este proyecto.

Con el propósito de mejorar la usabilidad y la experiencia de usuario realizamos una gran apuesta por una sincronía entre elementos en movimiento y estáticos en todo el site. Para algunas de las animaciones se utilizó el Scroll para reducir el espacio, como por ejemplo en la cabecera de la página.

Más información

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE
  • Invision

    Photoshop

    Herramienta para retoque fotográfico.

  • Invision

    Sketch

    Editor gráfico utilizado para la aplicación web.

Tipografía

Helvetica Bold

Roboto Bold sample

Helvetica Regular

Roboto Regular sample

Colores

Primarios

  • #FFFFFF
  • #000000
  • #BDBDBD
  • #FC0000

Componentes

DESCRIPCIO DE LA IMATGE

Iconos

  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA
  • Icona: NOM DE LA ICONA

Interacciones

Interacciones
y prototipado

El prototipado es uno de los puntos clave antes de la maquetación final, consiste en realizar un boceto del contenido, la distribución de este y la organización de las distintas páginas.

Al realizar este proceso nos permite comprobar que toda la navegación funciona, realizar tests de usuario, obtener las primeras conclusiones antes de pasar a la fase de maquetación, y realizar las correcciones necesarias con el cliente.

Más información

DESCRIPCIO DE LA IMATGE
  • Invision

    Invision

    Prototipado interactivo hecho en Invision.

  • Invision

    Figma

    Diseño realizado con la aplicación Figma.

  • DESCRIPCIÓ IMATGE
  • DESCRIPCIÓ IMATGE
  • DESCRIPCIÓ IMATGE
  • DESCRIPCIÓ IMATGE
  • DESCRIPCIÓ IMATGE
  • DESCRIPCIÓ IMATGE

Mobile first

El dispositivo lo eliges tú.

Toda la navegación, interfaz e interacciones se plantearon teniendo como referencia la versión para dispositivos móviles, ya que la fuente del tráfico era principalmente desde estos dispositivos.

Accesibilidad

Accesibilidad sin olvidar el movimiento

En Omatech somos extremadamente estrictos en la implementación de una maquetación totalmente accesible, realizando tests de contraste, velocidad, lectura de pantalla y la optimización del markup para conseguir una carga del contenido rápida y limpia.

Sin perder de vista la accesibilidad y usabilidad, en la fase de maquetación se implementaron pequeñas animaciones en el contenido que ayudaron a crear una navegación más atractiva y dinámica.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

Sostenibilidad

Preocupación por el medioambiente

El mundo digital aporta respuestas al problema medioambiental que existe a nivel global, un claro ejemplo es la reducción del consumo del papel y por ende la deforestación masiva de bosques y selvas. Aunque no es oro todo lo que reluce, y sólo el uso y mantenimiento de la red supone unas emisiones de CO₂ de 800 millones de toneladas.

Para reducir las emisiones desde Omatech hacemos una fuerte apuesta para que todos nuestros proyectos digitales sean más sostenibles y que hagan un consumo mínimo de energía cuando reciben visitas. Para conseguir nuestro propósito nos basamos en tres pilares, la reducción del tamaño y peso de las imágenes, la optimización del código y facilitar una buena experiencia de usuario.

Más información

DESCRIPCIO DE LA IMATGE

Optimización

Core Web Vitals como rasero para un buen posicionamiento

Tener un buen posicionamiento en el buscador de Google es elemental para conseguir la visibilidad digital deseada y así tener unas buenas métricas en alcance. El algoritmo de Google premia esas webs que priorizan los elementos que mejoran la experiencia de usuario.

El motor de búsqueda más conocido a nivel mundial evalúa principalmente tres aspectos: la velocidad de carga del contenido (LCP), la estabilidad de su diseño (CLS) y la capacidad de respuesta o interacción (FID).

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

Programación a medida

Desarrollo ambicioso

Una de nuestras premisas es una programación meticulosa para llevar a cabo los requisitos de cada proyecto. Nuestro objetivo es ofrecer soluciones de calidad, flexibles y modulares, para que puedan crecer y adaptarse a un mercado que cambia constantemente.

Para Teatre Lliure hicimos un trabajo muy ambicioso e implementamos un framework PHP con un excelente código robusto y escalables. Implementamos Laravel- mySQL, que ofrece un resultado reusable y fluido para los trabajos de mantenimiento posterior.

Para que las funciones complejas de la web funcionaran correctamente apostamos por JavaScript, un lenguaje que permite tener bajo control casi todos los mecanismos existentes para sites, así como elementos gráficos y multimedia. Además, para hacer este tipo de acciones utilizamos bibliotecas de JavaScript.

Más información

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE
  • Laravel

    Laravel

    Usado el framework de código abierto.

  • MySQL

    MySQL

    Base de datos de almacenamiento

Integraciones

Todo conectado en el mismo site

Para Teatre Lliure un requisito indispensable era facilitar la navegación de los usuarios por la web, así como simplificar todos los procesos de registros y compra.
La gestión de venta de las entradas es posible gracias a la plataforma SecuTix, que dispone de un servicio Single Sing On (SSO) el cual permite a los usuarios de Teatre Lliure vincular su inicio de sesión en la página web con esta plataforma.

Además, también utilizamos sus Webservices (API Restful) para recuperar los datos de los usuarios, la información de las distintas sesiones y los pases a los espectáculos.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

Migración de datos

Carga dinámica

En Omatech somos extremadamente estrictos en la implementación de una maquetación totalmente accesible, realizando tests de contraste, velocidad, lectura de pantalla y la optimización del markup para conseguir una carga del contenido rápida y limpia.

Sin perder de vista la accesibilidad y usabilidad, en la fase de maquetación se implementaron pequeñas animaciones en el contenido que ayudaron a crear una navegación más atractiva y dinámica.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

CMS

Gestión de contenidos intuitivo

Para la gestión del contenido se substituyó el Drupal existente por nuestra Editora propia para gestionar y actualizar toda la información de la web, sistema de ticketing y aplicaciones de una manera fácil, sencilla e intuitiva. Para facilitar la labor de actualización, y que se pueda hacer desde el front end, apostamos por un estándar de programación MVC (Modelo-Vista-Controlador).

Así nos aseguramos de que las continuas modificaciones que se realizan en la web de Teatre Lliure se llevan a cabo fácilmente y sin complicaciones, sin dejar de lado la identidad corporativa y la imagen de marca ya preestablecidas.

En Omatech somos expertos en crear páginas autogestionables.

DESCRIPCIO DE LA IMATGE
¿Tienes un proyecto digital en mente y no sabes por dónde empezar? Te echamos una mano. 👋