Web and Mobile Design

Teatre Lliure

The emblematic performing arts theater opted for a total restyling of its website. Omatech applied the predetermined style guide to the web design we created and carried out the development and implementation of the cultural website with a ticketing system.

Header image Teatre Lliure

The challenge

Teatre Lliure has a large number of features on its website, such as the upcoming shows, ticketing system for the purchase of tickets, as well as a repository of the history of plays. At Omatech, we took care of unifying the different utilities in a single web, connecting the different platforms in one site.

DESCRIPCIO DE LA IMATGE

The design

The plays,
the main protagonists

The real stars of Teatre Lliure are the plays and therefore their posters, very different from each other create a web full of color and joy, so the focus should be on them. To enhance the prominence of the shows, we opted for an austere interface, with a monochrome combination with touches of red. In addition, we created the iconography exclusively for this project.

In order to improve usability and user experience we made a big bet for a synchrony between moving and static elements throughout the site. For some of the animations, we used the Scroll to reduce the space, as for example in the header of the page.

More information

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE
  • Invision

    Photoshop

    Tool for photo touch-ups.

  • Invision

    Sketch

    Graphic editor used for the web application.

Typography

Helvetica Bold

Roboto Bold sample

Helvetica Regular

Roboto Regular sample

Colors

Primary

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

Components

DESCRIPCIO DE LA IMATGE

Icons

  • 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

Interaction

Interaction
and prototyping

Prototyping is one of the key points before the final layout, it consists of making a sketch of the content, its distribution and the organization of the different pages.

This process allows us to check that all the navigation works correctly, perform user tests and obtain the first conclusions before moving on to the layout phase. In this way, we can make the necessary corrections hand in hand with the client.

More information

DESCRIPCIO DE LA IMATGE
  • Invision

    Invision

    Interactive protoptype made with Invision.

  • Invision

    Figma

    Design made with the Figma application.

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

Mobile first

You choose the device

All navigation, interface and interactions were designed with the mobile version in mind, since the source of traffic was mainly from mobile devices.

Accessibility

Accessibility without forgetting the movement

At Omatech we are extremely strict in the implementation of a fully accessible layout, performing tests of contrast, speed, screen reading and markup optimization to achieve a fast and clean content load.

Without losing sight of accessibility and usability, this layout phase implemented small animations when scrolling, which give the navigation that attractive and dynamic touch to improve the user experience.

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

Sustainability

Concern for the environment

The digital world provides answers to the environmental problem that exists globally, a clear example is the reduction of paper consumption and therefore the massive deforestation of forests and jungles. Although all that glitters is not gold, and only the use and maintenance of the network means CO₂ emissions of 800 million tons.

To reduce emissions at Omatech, we make a strong commitment so all our digital projects are more sustainable and use minimum energy consumption when they receive visitors. To achieve our purpose, we rely on three pillars, reducing the size and weight of the images, optimizing the code and providing a good user experience.

More information

DESCRIPCIO DE LA IMATGE

Optimization

Core Web Vitals as measurement for good positioning

Having a good positioning in the Google search engine is essential to achieve the desired digital visibility and thus have good metrics in scope. Google's algorithm rewards those websites that prioritize the elements that improve the user experience.

The world's most popular search engine evaluates three main aspects: content loading speed (LCP), design stability (CLS) and first input delay (FID).

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

Personalized programming

Ambitious development

One of our premises is a meticulous programming to carry out the requirements of each project. Our goal is to offer quality, flexible and modular solutions, so that they can grow and adapt to a constantly changing market.

For Teatre Lliure, we did a very ambitious job and implemented a PHP framework with an excellent robust and scalable code. We implemented Laravel- mySQL, which offers a reusable and fluid results for subsequent maintenance work.

In order for the complex functions of the website to work properly we used JavaScript, a language that allows us to control almost all existing mechanisms for sites, as well as graphic and multimedia elements. In addition, we use JavaScript libraries to perform this type of actions.

More information

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE
  • Laravel

    Laravel

    Open code framework used.

  • MySQL

    MySQL

    Storage database

Integrations

Everything connected to the same site

For Teatre Lliure an indispensable requirement was to facilitate user navigation through the web, as well as simplify all registration and purchase processes.
The ticket sales management is possible thanks to the SecuTix platform, which has a Single Sing On (SSO) service that allows Teatre Lliure users to link their login on the website with this platform.

In addition, we also use their Webservices (Restful API) to retrieve user data, session information and show passes.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

Data migration

Dynamic load

At Omatech we are extremely strict in the implementation of a fully accessible layout, performing tests of contrast, speed, screen reading and markup optimization to achieve a fast and clean content load.

Without losing sight of accessibility and usability, this layout phase implemented small animations in the content, which help to create attractive and dynamic navigation.

DESCRIPCIO DE LA IMATGE DESCRIPCIO DE LA IMATGE

CMS

Intuitive content management

For content management, we replaced the existing Drupal with our own editor to manage and update all the information of the website, ticketing system and applications in an easy, simple and intuitive way. To facilitate the updating task, so it can be done from the front end, we opted for an MVC (Model-View-Controller) programming standard.

This way, we make sure that the continuous modifications that are made to the Teatre Lliure website are carried out easily and smoothly, without forgetting the pre-established corporate identity and brand image.

In Omatech, we are experts in creating self-manageable pages.

DESCRIPCIO DE LA IMATGE
Do you have a digital project in mind but don't know where to start? Can we give you a hand? 👋