Iris Ceramica Group
Sito
[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”align-center”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text css=”.vc_custom_1592652294271{margin-bottom: 40px !important;}”]Una nuova casa
Per la Holding della ceramica
[/vc_column_text][vc_column_text]8 Brand di fama internazionale, più di 10 showroom in tutto il mondo, 8 stabilimenti produttivi, 5 società commerciali, 3 divisioni tecniche dedicate, un museo e una fondazione filantropica.Sono i numeri aggregati che descrivono il primo player della ceramica in Italia e uno dei più grandi al mondo.
Fino al 2016 non aveva mai parlato con una voce sola, come un gruppo unito.
I tempi erano ormai maturi per farlo, per giocare un ruolo di peso sul mercato, diverso da quello esercitato fin lì dai singoli brand separatamente.
A seguito di questa importante decisione strategica, è cominciato un percorso sopratutto nella comunicazione del Gruppo, a cui l’agenzia è stata chiamata a collaborare: dall’ufficio stampa ad una nuova brand identity, dal company profile alle campagne stampa, dai social network e campagne online al nuovo sito unitario.
Proprio da quest’ultimo è partito questo viaggio;
era necessario costruire una nuova grande casa, dove ogni realtà trovasse il proprio giusto spazio e il proprio rilievo, dosare i contenuti e i pesi di ciascuno, raccogliere una storia di più di 60 anni e creare un progetto e un’architettura di relazioni stabili per il futuro.[/vc_column_text][vc_empty_space][vc_btn title=”Visit Website” style=”outline” shape=”square” color=”black” css_animation=”left-to-right” link=”url:http%3A%2F%2Fwww.irisceramicagroup.com|title:Visit%20Website|target:%20_blank|” css=”.vc_custom_1583148261422{margin-top: 20px !important;}”][thb_portfolio_attribute style=”style2″][/vc_column][/vc_row][vc_row css=”.vc_custom_1586520741208{padding-top: 30vh !important;padding-bottom: 30vh !important;}” thb_video_bg=”https://www.lucabrandolini.com/wp-content/uploads/2020/02/project_1.mp4″ el_class=”multiply”][vc_column][vc_column_text animation=”animation top-to-bottom” el_class=”text-center”]
Layers
[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”align-center”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]Ritenendo che, metaforicamente, avremmo dovuto “mettere un cappello” di gruppo attorno ad ogni singola esperienza che ne facesse parte, decidemmo, fuor di metafora, di dover di fatto “incorniciare” i contenuti del sito, lasciare loro un’identità specifica e variegata, ma ponendoli comunque subordinati a una nuova architettura.Graficamente abbiamo tradotto questo concetto lavorando su livelli o layer sovrapposti; decidemmo di collocare al di sopra di tutto una vera e propria cornice, costituita da una griglia di sottili linee, in cui inserire tutti gli elementi costanti del sito, elementi di navigazione (menu) e di identità della holding (logo); al di sotto di essa si dispiegava il mondo che ne faceva parte.[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1583176557000{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_bg=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/3.mp4″ el_class=”gif1″ thb_video_overlay_color=”rgba(249,249,249,0.8)”][vc_column][/vc_column][/vc_row][vc_row css=”.vc_custom_1583176588662{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_bg=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/5.mp4″ el_class=”gif2 gifdiv” thb_video_overlay_color=”rgba(249,249,249,0.66)”][vc_column][/vc_column][/vc_row][vc_row css=”.vc_custom_1583176610898{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_bg=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/4.mp4″ el_class=”gif3 gifdiv” thb_video_overlay_color=”rgba(249,249,249,0.44)”][vc_column][/vc_column][/vc_row][vc_row css=”.vc_custom_1583176635585{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_bg=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/1.mp4″ el_class=”gif4 gifdiv” thb_video_overlay_color=”rgba(249,249,249,0.2)”][vc_column][/vc_column][/vc_row][vc_row css=”.vc_custom_1583172467245{background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_bg=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/2.mp4″ el_class=”gif5 gifdiv”][vc_column][/vc_column][/vc_row][vc_row thb_full_width=”true” thb_row_padding=”true” css=”.vc_custom_1583175860816{margin-top: -10vh !important;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_overlay_color=”rgba(0,0,0,0.23)”][vc_column][vc_row_inner thb_max_width=”max_width” css=”.vc_custom_1581004403319{margin-top: 10vh !important;}”][vc_column_inner offset=”vc_col-lg-12 vc_col-md-12 vc_col-xs-12″ css=”.vc_custom_1583175132842{padding-top: 9% !important;padding-right: 26% !important;padding-bottom: 27% !important;padding-left: 26% !important;background-image: url(https://www.lucabrandolini.com/wp-content/uploads/2020/03/icg-mac.png?id=2998) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}”][thb_image full_width=”true” alignment=”aligncenter” video=”true” image=”2997″ video_url=”https://www.lucabrandolini.com/wp-content/uploads/2020/03/icg-screenrec.mp4″][/thb_image][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row thb_full_width=”true” thb_row_padding=”true” css=”.vc_custom_1583326509723{margin-top: -20vh !important;padding-top: 10vh !important;background-position: center !important;background-repeat: no-repeat !important;background-size: contain !important;}” thb_video_overlay_color=”rgba(0,0,0,0.23)”][vc_column width=”1/2″ skrollr=”true” offset=”vc_col-lg-offset-0 vc_col-lg-6 vc_col-md-offset-0 vc_col-md-6 vc_col-sm-offset-0″ el_class=”column-sx”][vc_row_inner thb_max_width=”max_width” thb_row_padding=”true”][vc_column_inner width=”1/3″ offset=”vc_hidden-md vc_hidden-sm vc_hidden-xs”][/vc_column_inner][vc_column_inner width=”2/3″ offset=”vc_col-lg-8 vc_col-md-12 vc_col-xs-12″][thb_image animation=”animation bottom-to-top” alignment=”alignright” box_shadow=”small-shadow” image=”3027″][/thb_image][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/2″ skrollr=”true” skrollr_speed=”250″ offset=”vc_col-lg-offset-0 vc_col-lg-6 vc_col-md-offset-0 vc_col-md-6 vc_col-sm-offset-0″ el_class=”column-dx” css=”.vc_custom_1583317153881{padding-right: 30% !important;padding-left: 20% !important;background-color: #ffffff !important;}”][vc_row_inner thb_max_width=”max_width” css=”.vc_custom_1583317168647{margin-top: 15vh !important;margin-bottom: 5vh !important;}”][vc_column_inner][vc_column_text]
Taglio Editoriale
[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner thb_max_width=”max_width” css=”.vc_custom_1583317175442{margin-bottom: 15vh !important;}”][vc_column_inner width=”1/2″ offset=”vc_col-lg-6 vc_col-md-12 vc_col-xs-12″][vc_column_text]Il taglio grafico complessivo del sito voleva essere quanto più possibile le seguenti caratteristiche: doveva essere corporate e istituzionale, perchè espressione di una Holding leader, credibile e affidabile; doveva essere pulito e essenziale per non non collidere con la caratterizzazione esistente delle singole realtà; doveva essere chiara perchè, più di tutto, aveva lo scopo di raccontare.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″ offset=”vc_col-lg-6 vc_col-md-12 vc_col-xs-12″][vc_column_text]Non stupisce quindi come l’estetica complessiva risultante è molto più riferita al mondo editoriale che al mondo del web.La scelta tipografica bilanciata tra bastoni e graziato, la preponderanza degli spazi vuoti e delle campiture testuali, il rigoroso bianco e nero, il taglio delle foto e la loro incorniciatura, fino alla struttura dell’impaginato ricordano le pagine di un libro, raccontano, appunto, la storia di un grande Gruppo, ciò di cui è fatto.[/vc_column_text][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”align-center” css=”.vc_custom_1586520577653{margin-top: 10vh !important;}”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]
Sfogliare o Navigare?
Non è stato solo razionalizzare e mettere ordine.
L’ istituzione della cornice ci ha aperto di fatto aperto alcune opportunità in ambito funzionale altrimenti non percorribili. Immaginando, come detto, il sito alla stregua di un libro, e immaginando di fruirlo, però, tramite device digitali, la componente di scorrimento orizzontale doveva emergere, come se passando da una pagina del sito ad un’altra, si sfogliassero le pagine cartacee.
Decidemmo quindi che a una navigazione verticale, da un livello di profondità ad un altro, dovevamo associarne una orizzontale che permettesse di passare agilmente tra le pagine dello stesso livello.
Passare, con semplice click, da un brand ad un altro, da uno stabilimento in Europa ad uno negli Stati Uniti, da uno Showroom a Londra a quello di Berlino.[/vc_column_text][/vc_column][/vc_row][vc_row thb_full_width=”true” css=”.vc_custom_1583326488602{padding-top: 5vh !important;}”][vc_column][vc_row_inner][vc_column_inner][thb_image_slider thb_columns=”2″ thb_center=”true” thb_pagination=”” thb_navigation=”true” images=”3031,3033,3032,3035,3034,3029,3030,3036″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”align-center”][vc_column skrollr=”true” offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]
Nato per essere flessibile
La filosofia dello scorrimento orizzontale non è stata adottata per caso, o solo per vezzo da web/UX Designer, è nata naturalmente dall’esigenza di fruizione mobile del nuovo sito. Il classico comportamento su smartphone e Tablet dello swipe orizzontale e verticale ha rappresentato il punto di partenza di un’indagine sul comportamento dei lettori rispetto a nuovi device e sull’ opportunità di partire da queste nuove abitudini, traducendole, piuttosto che ragionare con schemi di interazione del passato e adattarli a nuovi formati e strumenti. In tal senso è stato un esempio di design mobile first.[/vc_column_text][/vc_column][/vc_row][vc_row thb_full_width=”true” thb_row_padding=”true” mouse_scroll=”true”][vc_column thb_color=”thb-light-column” enable_parallax=”true” animation=”animation fade-in” el_class=”text-center”]
