Queste sono le slide della lezione che abbiamo tenuto presso il CNOS-FAP a Bologna nell’ambito del corso IFTS su invito del nostro amico Giancarlo Gamberini. Abbiamo cercato di raccontare ai ragazzi un caso concreto di applicazione di progettazione modulare, in particolare la riprogettazione del sito istituzionale Mondadori.it che abbiamo seguito l’anno scorso, e di proporre una breve esercitazione per verificare la comprensione dei ragazzi.

2. Piacere, siamo
Bunker

3. Bunker è uno studio indipendente di progettazione
grafica. Siamo specializzati in identità aziendale,
editoria e web design.
Collaboriamo con artisti, fotografi, videomaker e
scrittori creando collegamenti tra aziende ed
emozioni.
Costruiamo progetti di qualità in ambito
tecnologico, commerciale e culturale.

4. Per essere buoni progettisti occorre conoscere la
tecnologia. I nostri designer e programmatori
lavorano fianco a fianco in un’ottica di costante
confronto e miglioramento.
Branding e identità
Art direction
Illustrazione
Fotografia
Motion e video
UI/UX
Front end
Campagne social
Digital

5. Alcuni dei nostri clienti

7. Un progetto interessante:
Mondadori.it

8. Tanto tempo fa in una
galassia lontana…

9. - Mondadori ci contatta per rifare il sito istituzionale
- Il sito è parte di una strategia digitale che
comprende l’attività sui SN
- La realtà aziendale è in evoluzione
- Viene costituito un gruppo di lavoro composto di
attori interni ed esterni
- In un incontro di kickoff si presenta il contesto
strategico…

12. Perché redesign?

13. - COMUNICAZIONE
- più spazio alle novità dell’azienda attraverso lo storytelling;
- comunicazione univoca, riconoscibile e moderna;
- look & feel con una nuova impronta grafica
- FRUIZIONE CONTENUTI
- responsive design per navigazione cross-device;
- elementi multimediali (video, foto, gallery, infografiche);
- migliore integrazione dei profili social media di tutte le property
- AUDIENCE
- interazione con lettori più evoluti;
- intercettare anche pubblico consumer-generalista;
- consolidare il rapporto con gli stakeholder corporate (analisti, investitori, istituzioni);
- consolidare audience media

14. Webranking by Comprend

15. - Classifica europea dei siti corporate
- Basata su criteri oggettivi, costantemente
aggiornati
- Permette di verificare lo stato del sito
dell’azienda e misurare progresso

17. Prima

18. Ultimo redesign: 2010

20. Responsive?

22. Contenuti molto lunghi

31. Foto piccole

33. Grafici

36. Tabelle

39. Ricerca

41. Stakeholder

42. - “Proprietari” di tutte le sezioni, loro referenti
- Azionisti, investitori e sindaci
- Lavoratori presenti e futuri
- Giornalisti
- Analisti finanziari
- Clienti finali dei marchi Mondadori

43. Benchmark

44. 2015-07-20 | 5
Bertelsmann
PUNTI DI FORZA
• Grafica chiara e minimalista
• Responsive design
• Social media
• Uso dei contenuti correlati
• Employer branding
- Grafica chiara e minimalista
- Responsive design
- Social media
- Uso dei contenuti correlati
- Employer branding

45. 2015-07-20 | 6
Hearst
PUNTI DI FORZA
• Grafica (full screen)
• Narrazione ibrida tra contenuti
istituzionali e contributi
commerciali
• Social media
- Grafica (full screen)
- Narrazione ibrida tra contenuti istituzionali e contributi
commerciali
- Social media

46. 2015-07-20 | 7
Lagardère
PUNTI DI FORZA
• Comunicazione visuale
• Infografiche
- Comunicazione visuale
- Infografiche

47. 2015-07-20 | 8
McGraw-Hill Education
PUNTI DI FORZA
• Employer branding
• Motore di ricerca interno
• Comunicazione attraverso numeri chiave
• Utilizzo dei social media
• Blog
• Video
- Employer branding
- Motore di ricerca interno
- Comunicazione attraverso numeri chiave
- Utilizzo dei social media
- Blog
- Video

48. 2015-07-20 | 9
Pearson
PUNTI DI FORZA
• Contributi esterni collegati
• Utilizzo dei social media
• Blog
• Canale Youtube
- Contributi esterni collegati
- Utilizzo social media
- Blog
- Canale Youtube

49. 2015-07-20 | 10
Sanoma
PUNTI DI FORZA
• Storytelling
• Identità aziendale e distintività
• Grafica (pagine lunghe)
• Responsive design
• Presentazione e connessione con
i brand del Gruppo
- Storytelling
- Identità aziendale distintiva
- Grafica (pagine lunghe)
- Responsive design
- Presentazione e connessione con i brand del gruppo

50. 2015-07-20 | 11
Thomson Reuters
PUNTI DI FORZA
• Responsive design
• Motore di ricerca
- Responsive design
- Motore di ricerca

51. Attacchiamo su due fronti

53. Stile grafico

54. Tipografia

64. Palette colori

67. Tabelle

72. Grafici

76. http://www.highcharts.com/demo

77. Illustrazioni?

84. O fotografie?

90. Struttura a fasce

95. Funzionamento del menu

106. Architettura

108. Mappa del sito

109. - Questionari
- Digital strategy del gruppo
- Benchmark
- Webranking

110. Chi siamo Governance Investors
I nostri
brand
Sostenibilità Media
Lavora
con noi

111. - Definizione dell’alberatura
- Ricollocazione dei contenuti

113. Non è possibile farle tutte in
Photoshop!

114. Homepage

124. I nostri brand

132. Pagina di contenuto

138. Identificazione dei blocchetti

139. - leggere e capire tutto il “contenuto”
- cominciare con dei semplici file di testo,
elencando tutti gli elementi
- man mano che si identificano dei pattern (es.
galleria foto, download pdf, etc.), creare
elemento esterno ed includerlo
- possibili tecnologie: php, python, ssi, node, kit…

140. Wireframe navigabile

145. …e la classifica Webranking?

146. http://www.lundquist.it/wp-content/uploads/2017/01/Whitepaper_Webranking_Italia-2016-2017.pdf

148. Il metodo:
Atomic design

149. Purtroppo non lo abbiamo
inventato noi

172. Patternlab

174. Style guide

177. Adesso provate voi:
Electa.it

178. Identificare i pattern

179. Prima da soli

180. Poi in gruppo

181. Esercizio: crea una nuova
sezione“interviste” usando
solo elementi esistenti

182. Grazie per
l’attenzione.
FredericArgazzi
Francesco Ceccarelli
@bnkr_it
http://bnkr.it