it

TPI – Senza giri di parole

Rebranding Web // 2017

Co-Design ~ Experience Design ~ Front-end Visita il sito
The client

Color palette & Typography


The new typography for The Post Internazionale merges the classical style of Times with the modern Proxima Nova Alt, thus reflecting the temperament of the editorial staff.

Times, a timeless font, has created a name for itself – right from its debut, in 1932 – for its ease of readability, and its sophisticated and strong personality. Against the classic note of Times, we set Proxima Nova Alt, a simple and versatile font, often named the Helvetica of web. Its great variety of weights allowed us to play around, combining styles to make texts more dynamic.

The colour palette of TPI has also been redesigned, introducing a brighter shade of red – the colour which had defined the brand in the past – making the graphic layout more vivacious. The combination of different shades of grey pulls together the colour palette, creating a more engaging and modern mood, while at the same time keeping the layout crisp and simple, without distracting from contents.

Color palette & Typography

Design System


We worked within a design system where widgets were atoms, the basic components of the UI. These are snippets of code controlling the graphic outcome of functions and interactions. These are compositions that set apart and outline the different types of content.

For the TPI project we defined a number of widgets to give visual continuity to the large amount of content on the website.

The main task was to channel the real soul of TPI through a dynamic and flexible layout. The modular grids have always been a distinguishing feature of physical newspapers, to underline the importance of a specific headline, an articles and related contents,  within the constraint of typographic print.

The user interface for TPI has accepted the challenge, transferring the typographic grids into a digital environment, granting it an harmonious look that can handle content with ease, in an situation, giving the staff the freedom to easily recombine the graphical and textual elements, according to the editorial needs.

Design System & Modules

Focus


We designed a dynamic homepage to ensure an ever faster, more timely and high-quality editorial service.

The staff can chose between three different openings, according to the need of the moment:

  1. Breaking News, a 12-column grid that spans the whole width of the screen, to emphasize important news with a huge communication impact on the user.
  2. Breaking News with related news: a 9 + 3-column grid to link the breaking news with related in-depth feature stories.
  3. Main News: a 9 + 3-column grid to emphasize primary and secondary news.

The new graphic layout of TPI also gives a higher emphasis to foreign-news reportage, to interviews and editorials from the staff or contributors from all over the world.
The light-colour background is broken down by the content blocks, through the use of colour and photos that further emphasize the news.

Focus
Responsive Intro

Mobile first


The new UI has been designed to better adapt to the readers’ needs and to the screen of mobile devices. Advertisement, which plays an important role in guaranteeing a free and high-quality service, has been placed to be as unobtrusive as possible, not to interrupt the information flow.


Mobile First

Do you like how we work? Contact us!

Come and say hi on Facebook and Twitter.
Please, rotate the screen
or view the website on other screen.