Web i Disseny Mòbil

Teatre Lliure

L'emblemàtic teatre d'arts escèniques va apostar per un restyling total de la seva pàgina web. Des d'Omatech apliquem la guia d'estil predeterminada al disseny web que creem i realitzem el desenvolupament i posada en marxa de la web cultural amb sistema de ticketing.

Imatge de capçalera Teatre Lliure

El repte

Teatre Lliure condensa a la seva pàgina web un gran nombre de funcionalitats, com la cartellera, un sistema de ticketing per a l'adquisició d'entrades, així com un repositori de l'historial d'obres. Des d'Omatech ens vam encarregar d'unificar les diferents utilitats en una única web connectant les diferents plataformes en un sol site.

DESCRIPCIO DE LA IMATGE

El disseny

Les obres,
les grans protagonistes

Les autèntiques estrelles de Teatre Lliure són les obres i per conseqüència els cartells d'aquestes, diferents entre si creen una web plena de color i alegria, per això el focus ha de recaure sobre ells. Per a realçar el protagonisme dels espectacles vam apostar per una interfície austera, amb una combinació monocroma amb tocs de color vermell. A més, vam crear la iconografia exclusivament per a aquest projecte.

Amb el propòsit de millorar la usabilitat i l'experiència d'usuari apostem per una sincronia entre elements en moviment i estàtics a tot el site. Per a algunes de les animacions es va utilitzar Scroll per a reduir l'espai, com per exemple a la capçalera de la pàgina.

Més informació

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE
  • Photoshop

    Photoshop

    Eina pel retoc fotogràfic.

  • Sketch

    Sketch

    Editor gràfic utilitzat per a l'aplicació web.

Tipografia

Helvetica Bold

Roboto Bold sample

Helvetica Regular

Roboto Regular sample

Colors

Primaris

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

Components

DESCRIPCIO DE LA IMATGE

Icones

  • Icona: Dialeg
  • Icona: Ticket
  • Icona: Calendari
  • Icona: Cadira de rodes
  • Icona: Orella
  • Icona: Dues mans
  • Icona: Sofà
  • Icona: Facebook
  • Icona: Instagram
  • Icona: Youtube
  • Icona: Linkedin
  • Icona: Twitter
  • Icona: Whatsapp
  • Icona: A

Interaccions

Interaccions
i prototipat

El prototipat és un dels punts clau abans de la maquetació final, consisteix a realitzar un esbós del contingut, la distribució d'aquest i l'organització de les diferents pàgines.

Realitzar aquest procés ens permet comprovar que tota la navegació funciona, realitzar tests d'usuari, obtenir les primeres conclusions abans de passar a la fase de maquetació, i realitzar les correccions necessàries amb el client.

Més informació

Imatge amb relació d'eines
  • Invision

    Invision

    Prototip interactiu fet amb Invision

  • Invision

    Figma

    Disseny realitzat amb l'aplicació Figma.

  • Disseny Teatre Lliure en dispositiu mòbil
  • Disseny Teatre Lliure en dispositiu mòbil
  • Disseny Teatre Lliure en dispositiu mòbil
  • Disseny Teatre Lliure en dispositiu mòbil
  • Disseny Teatre Lliure en dispositiu mòbil
  • Disseny Teatre Lliure en dispositiu mòbil

Mobile first

El dispositiu l'esculls tu.

Tota la navegació, la interfície i les interaccions es van plantejar tenint com a referència la versió per a dispositius mòbils, ja que la font del trànsit era principalment des d'aquests dispositius.

Accessibilitat

Accessibilitat sense oblidar el moviment

A Omatech som extremadament estrictes amb la implementació d'una maquetació totalment accessible, realitzant tests de contrast, velocitat, lectura de pantalla i l'optimització del markup per a aconseguir una càrrega del contingut ràpida i neta.

Sense perdre de vista l'accessibilitat i la usabilitat, a la fase de maquetació es van implementar petites animacions al contingut que van ajudar a crear una navegació més atractiva i dinàmica.

Imatge bloc del Teatre Lliure Exemple de codi CSS Logos de HTML, CSS i JS

Sostenibilitat

Preocupació pel medi ambient

El món digital aporta respostes al problema mediambiental que existeix a escala global, un clar exemple és la reducció del consum del paper i per tant la desforestació massiva de boscos i selves. No obstant això, la realitat queda molt lluny de la perfecció, i només l'ús i manteniment de la xarxa suposa unes emissions de CO₂ de 800 milions de tones.

Per a reduir les emissions, des d'Omatech apostem fort perquè tots els nostres projectes digitals siguin més sostenible i facin un consum mínim d'energia quan aquests reben visites. Per a aconseguir el nostre propòsit ens basem en tres pilars: la reducció de la grandària i pes de les imatges, l'optimització del codi i facilitar una bona experiència d'usuari.

Més informació

Un arbre

Optimització

Core Web Vitals com a mesura per a un bon posicionament

Tenir un bon posicionament al cercador de Google és elemental per a aconseguir la visibilitat digital desitjada i així tenir unes bones mètriques a l'abast. L'algoritme de Google premia aquelles webs que prioritzen els elements que milloren l'experiència d'usuari.

El motor de cerca més conegut a escala mundial avalua principalment tres aspectes: la velocitat de càrrega del contingut (LCP), l'estabilitat del seu disseny (CLS) i la capacitat de resposta o interacció (FID).

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

Programació a mida

Desenvolupament ambiciós

Una de les nostres premisses és una programació meticulosa per a dur a terme els requisits de cada projecte. El nostre objectiu és oferir solucions de qualitat, flexibles i modulars, perquè puguin créixer i adaptar-se a un mercat que canvia constantment.

Pel Teatre Lliure vam fer un treball molt ambiciós i vam implementar un framework PHP amb un excel·lent codi robust i escalable. Vam implementar Laravel- mySQL, que ofereix un resultat reutilitzable i fluid per als treballs de manteniment posterior.

Perquè les funcions complexes de la web funcionessin correctament vam apostar per Javascript, un llenguatge que permet tenir sota control gairebé tots els mecanismes existents per a sites, així com elements gràfics i multimèdia. A més, per a fer aquest tipus d'accions vam utilitzar biblioteques de Javascript.

Més informació

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE
  • Laravel

    Laravel

    Utilitzant el framework de códi obert

  • MySQL

    MySQL

    Base de dades d'emmagatzematge

Integracions

Tot connectat al mateix site

Per a teatre Lliure un requisit indispensable era facilitar la navegació dels usuaris pel web, així com simplificar tots els processos de registre i compra.
La gestió de venda de les entrades és possible gràcies a la plataforma SecuTix, que disposa d'un servei Single Sing On (SSO), el qual permet als usuaris de teatre Lliure vincular el seu inici de sessió a la pàgina amb aquesta plataforma.

A més, també vam utilitzar els seus Webservices (API Restful) per a recuperar les dades dels usuaris, la informació de les diferents sessions i els passis als espectacles.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

Migració de dades

Càrrega dinàmica

A Omatech som extremadament estrictes en la implementació d'una maquetació totalment accessible, realitzant tests de contrast, velocitat, lectura de pantalla i l'optimització del markup per a aconseguir una càrrega del contingut ràpida i neta.

Sense perdre de vista l'accessibilitat i la usabilitat, a la fase de maquetació es van implementar petites animacions al contingut que van ajudar a crear una navegació més atractiva i dinàmica.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

CMS

Gestió de contingut intuïtiu

Per a la gestió del contingut es va substituir el Drupal existent per la nostra Editora pròpia per a gestionar i actualitzar tot la informació del web, el sistema de ticketing i les aplicacions d'una manera fàcil, senzilla i intuïtiva. Per a facilitar la tasca d'actualització i que es pugui fer des del front end, vam apostar per un estàndar de prgramació MVC (Model-Vista-Controlador).

Així ens podem assegurar que les contínues modificacions que es realitzen al web de teatre Lliure es puguin dur a terme fàcilment i sense complicacions, sense deixar de banda la identitat corporativa i la imatge de marca preestablertes.

A Omatech som experts en crear pàgines autogestionables.

DESCRIPCIO DE LA IMATGE
Tens un projecte digital en ment i no saps per on començar? Et donem un cop de mà? 👋