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.
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.
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.
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
la sua anima più moderna e vivace
composta da un team giovane ma altamente specializzato e sempre aggiornato nell’ambito tecnologico e scientifico.
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.
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.
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.
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.
Project Team
Creative Agency Wider View
Client Mister - Smart Innovation
-
Project Management & Accounting Flavio Lenoci
UI/UX Design Sabrina Mencarelli
Developing Tommaso Costantini
Developing Tommaso Costantini
