MISTER Smart Innovation

Mister Smart Innovation è una società giovane formata da personale altamente specializzato sita al Tecnopolo CNR di Bologna, con cui è strettamente collegata operando nel mondo della ricerca scientifica.
Fanno parte di associazioni che riuniscono laboratori di ricerca e centri per l’innovazione della Rete Alta Tecnologia, integrandoli al sistema imprenditoriale del territorio regionale. Il loro obiettivo è quello di creare opportunità e collaborazioni per avere un impatto positivo sul mercato e sulla società attraverso l’innovazione.

Per questo avevano bisogno di un nuovo sito, più innovativo per l’appunto, che li rappresentasse meglio nell’immagine, avendo cura di inserire molteplici animazioni e un nuovo look più curato, moderno ed essenziale. Anche i contenuti sono stati riscritti per aggiornare e migliorare l’architettura delle informazioni, distribuendoli in modo da rendere più performante l’usabilità del sito.

Cliente

MISTER Smart Innovation

Data

2021

Area

UI e Developing

Sito web

IMG 01_Innovation (1)

IMG 1_titolo obiettivi

IMG 2_obiettivo 1

IMG 3_obiettivo 2

IMG 4_obiettivo 3

1.
Per poter definire la nuova sitemap, il primo step affrontato è stato quello di analizzare la struttura del vecchio sito tenendo in conto le indicazioni e le necessità espresse dal cliente.

2.
Abbiamo esaminato i siti di alcuni competitor e/o realtà affini per trovare potenziali caratteristiche funzionali anche ai nostri scopi e individuare eventuali best practice di settore.

3.
Abbiamo quindi creato una gerarchia più funzionale alle nostre esigenze, ridistribuendo i contenuti esistenti e prevedendo la creazione di nuovi, volti a creare uno storytelling aziendale meno istituzionale e più friendly, pur mantenendo la dovuta autorevolezza.
La nuova struttura è stata disegnata ovviamente per rispettare anche le best practice per un’user experience ottimale e offrire una navigazione fluida evitando un effetto ‘matrioska’ eccessivo, che rende demoralizzante la navigazione e inaccessibili i contenuti. Inoltre, doveva rimanere funzionale anche ai fini di una nuova grafica moderna e dinamica, ricca di animazioni.

IMG 5_titolo sitemap

IMG 6_vecchia sitemap

IMG 7_nuova sitemap

IMG 8_titolo concept

Per ideare la nuova immagine di Mister sul web, abbiamo analizzato vari aspetti, tra cui sicuramente la sua storia, il settore in cui opera e soprattutto lo spirito ambizioso e innovativo che caratterizza l’azienda.
Volevamo contribuire a trasmettere, anche visivamente

l’affidabilità e l’istituzionalità
di una società che opera ormai da 13 anni e che collabora con enti istituzionali di grande prestigio

IMG 9_foto 1

la sua anima più moderna e vivace
composta da un team giovane ma altamente specializzato e sempre aggiornato nell’ambito tecnologico e scientifico.

IMG 10_foto 2

Per unire queste due facce della stessa medaglia, abbiamo optato per l’abbinamento equilibrato di due font a contrasto, uno graziato e più elegante, quasi di altri tempi, uno lineare, geometrico e moderno, che trasmetta un appeal tech.

IMG 11_concept

Chiarezza.
nei contenuti tecnici e nel descrivere Mister, era un obiettivo cardine del progetto, raggiungibile grazie agli accorgimenti cromatici, ai titoli grandi e con posizioni di rilievo gerarchico, a un menu a tutta pagina privo di inutili orpelli e a sezioni ben bilanciate nei contenuti testuali e fotografici.

Scelta delle immagini.
che avrebbero avuto un ruolo nella definizione dell’identità visiva digitale di Mister.
Saranno scorci di laboratori e di strumenti tecnici (realizzate ad hoc nei laboratori dell’azienda), che sbirceremo attraverso le forme che le conterranno, come se fossero finestre da cui osservare il processo dell’innovazione in continua evoluzione.

Look moderno.
Oltre alla chiarezza e all’aspetto aziendale più professionale però, non ci siamo dimenticati di soddisfare anche l’altro obiettivo di progetto: risultare più catchy per il target di riferimento, dando voce al lato più innovativo e moderno di Mister.
Per riuscirci, abbiamo scelto impaginazioni non standard dei testi e soprattutto ad animazioni di entrata, di parallax e di scorrimento, come anche dei bottoni dal design ricercato e non banale.

rem6

IMG 13_titolo website

IMG 14_video menu_1

Numerose animazioni popolano le diverse pagine del sito, tra cui: effetti di movimento e parallax dei testi, transizioni di pagina dal colore sempre diverso, aloni di colore pulsanti e sfocati che arricchissimo il background.

Per realizzarle, abbiamo utilizzato diversi framework tra cui:
Swiper Per gestire i vari carousel presenti nelle pagine
Barba JS Per creare la transizione tra una pagina e l’altra
Locomotive Scroll Per gestire tutte le animazioni all’interno della singola pagina: scroll orizzontale degli elementi, effetti di parallax, eventi quando l’elemento entra nella viewport del browser.

IMG 15_layout screen

Per ottimizzare al meglio il caricamento delle pagine abbiamo sviluppato un tema che attraverso l’utilizzo del routing basato sul DOM è in grado di richiamare un file JS dedicato per quella specifica pagina. In questo modo verrano inclusi solamente gli script necessari per far navigare correttamente la pagina visualizzata. Inoltre i file JS e i file SASS vengono minimizzati per non appesantire le pagine.

Per la creazione dei vari template di pagina abbiamo utilizzato:
Bootstrap Per creare la griglia e gestire la disposizione dei componenti
Advanced Custom Field Per creare tutti i campi necessari da compilare per le varie sezioni sviluppate.

IMG 17_layout mobile

Project Team

Creative Agency Wider View
Client Mister – Smart Innovation
–
Project Management & Accounting Flavio Lenoci
UI/UX Design Sabrina Mencarelli
Developing Tommaso Costantini

Let's have a chat

For information, price quotation requests, collaboration or courses, do not hesitate to write!

Progetto precedente

Progetto successivo