![Page 1: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/1.jpg)
UNIVERSITA’ DEGLI STUDI MILANO - BICOCCATEORIA E TECNOLOGIA DELLA COMUNICAZIONEA.A. 2013 /2014
LABORATORIO DI COMUNICAZIONE VISIVA E DESIGN DELLE INTERFACCEIII CONSEGNA_Frontend DevelopmentGruppo 9_Giulia Camedda, Roberta Gionni, Antonio Santoro
![Page 2: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/2.jpg)
L’INDIVIDUO NEL QUARTIERE
Abbiamo scelto il nome “Bicoccaqui” per evidenziare il fatto che l’individuo si trovasse all’interno del quartiere, l’idea era quella di far quasi identificare l’u-tente con il pin geolocalizzatore, come se lo rappresentasse e lo guidasse nella scoperta del quartiere Bicocca.
![Page 3: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/3.jpg)
IL QUARTIERE / BICOCCA
![Page 4: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/4.jpg)
INDIVIDUO / QUARTIERE
L’individuo, attraver-so la sua interazione all’interno del quartie-re Bicocca, lo colora e gli fa prendere vita. Quest’immagine è usa-ta come sfondo delle pagine interne del no-stro sito sia nella ver-sione desktop che nel tablet e nel mobile.
![Page 5: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/5.jpg)
COLORILOGO
Per il nostro logo “Biccoccaqui” e per la no-stra homepage abbiamo scelto di utilizza-re un colore che fosse piuttosto neutro. Ab-biamo optato per un colore tra il nero e il grigio, infatti il nero ci sembrava troppo “mar-cato” per essere messo nell’homepage.
ALTRI COLORI
Gli altri colori utilizzati all’interno del nostro pro-getto sono colori vivaci, che caratterizzano for-temente le tribù analizzate.
R=74 G=66 B=77#4a424d
ROSSOR=238 G=99 B=78#ee634e
AZZURROR=80 G=186 B=225#50bae1
VERDER=174 G=201 B=113 #aec97l
ARANCIOR=250 G=190 B=76 #aec97l
![Page 6: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/6.jpg)
ICONE
casaqui
universitàqui
lavoroqui
duepassiqui
La categoria “casaqui” è quel-la che abbiamo riservato ai residenti. La scelta del colore arancione è avvenuta pren-dendo spunto dalle strisce che riservano il parcheggio per i residenti all’interno delle città.
La categoria “universitàqui” è quella riservata a coloro che gravitano all’interno del mon-do universitario, dagli studenti ai collaboratori, agli insegnan-ti. Il colore rosso è stato scelto come richiamo al colore degli edifici che compongono il cam-pus universitario della Bicocca.
La categoria “lavoroqui” è quella che abbiamo riserva-to ai lavoratori. Il colore az-zurro è stato scelto in quan-to viene spesso utilizzato da banche, edifici pubbli-ci e altri organi istituzionali.
La categoria “duepassiqui” è quella che abbiamo riser-vato ai city users. Il verde lo abbiamo scelto in quanto ge-neralmente è associato agli spazi pubblici, al relax, all’aria aperta, al benessere e quin-di anche al godersi la città.
La forma che abbiamo scelto per le icone è una forma che si ri fa a quella di un geolocalizzatore, per mantenere una certa coerenza con il nome e con il logo“Bicoccaqui”. stilizzazione della nostra icona di partenza
![Page 7: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/7.jpg)
casaqui universitàqui lavoroqui duepassiqui
ICONE / ATTIVE
ICONE / NON ATTIVE
![Page 8: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/8.jpg)
MACRO CATEGORIE / MENU’
UTILITA’SVAGO
TRASPORTI
RISTORO UNIVERSITA’
salute istruzione
banche uffici tabacchi
aree Wi-filibrerie
copisterie parcheggi
linee bustram
metrotreno
altri trasporti
sportcultura
aree verdibellezza
localishopping
ristoranti pizzeriefast food
bar & pubalimentari
poli didatticiorario lezioni
segreteriebiblioteche
![Page 9: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/9.jpg)
DESKTOP
![Page 10: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/10.jpg)
DESKTOP / HOMEPAGE
![Page 11: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/11.jpg)
DESKTOP / PAGINA1
![Page 12: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/12.jpg)
DESKTOP / PAGINA2
![Page 13: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/13.jpg)
DESKTOP / PAGINA3
![Page 14: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/14.jpg)
DESKTOP / PAGINA4
![Page 15: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/15.jpg)
DESKTOP / PAGINA5
![Page 16: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/16.jpg)
TABLET
![Page 17: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/17.jpg)
TABLET / HOMEPAGE
![Page 18: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/18.jpg)
TABLET / PAGINA1
![Page 19: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/19.jpg)
TABLET / PAGINA2
![Page 20: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/20.jpg)
TABLET / PAGINA3
![Page 21: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/21.jpg)
TABLET / PAGINA4
![Page 22: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/22.jpg)
TABLET / PAGINA5
![Page 23: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/23.jpg)
TABLET / PAGINA6
![Page 24: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/24.jpg)
MOBILE
![Page 25: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/25.jpg)
MOBILE / HOMEPAGE
![Page 26: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/26.jpg)
MOBILE / PAGINA1
![Page 27: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/27.jpg)
MOBILE / PAGINA2
![Page 28: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/28.jpg)
MOBILE / PAGINA3
![Page 29: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/29.jpg)
MOBILE / PAGINA4
![Page 30: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/30.jpg)
MOBILE / PAGINA5
![Page 31: BicoccaQui progetto di Comunicazione visiva e design delle interfacce](https://reader030.vdocuments.pub/reader030/viewer/2022032619/55badc15bb61ebff148b474b/html5/thumbnails/31.jpg)
MOBILE / PAGINA6