Blasting News 102014

#0 1 - Brief 2 - HomePage 3 - HomePage Responsive 4 - HomePage UX 5 - MainPage 6 - MainPage Responsive 7 - MainPage UX

Mockups

Matteo Forni - 8-10-2014 - m.forni@boba.land

#1 L’articolo 32 del contratto di lavoro giornalistico, descrive alla voce “...motivi di risoluzione del rapporto”, come il giornalista possa recedere il contratto anche per motivi legati al cambiamento del “colore” della testata.

E’ scontato il fatto che, le testate giornalistiche italiane, siano prima di tutto testate di propaganda e, in effetti, il giornalismo italico, è nato, cresciuto nella militanza.

Questo tipo di approccio fazioso ed appunto politico del cronista poteva sicuramente andar bene qualche anno fa, quando internet non esisteva o comunque era molto poco diffuso e le informazioni che arrivavano ai lettori erano filtrate in via esclusiva da un ristretto numero di persone.

Oggi la reperibilità delle notizie fresche via internet è assai migliore/maggiore, della possibilità di rimanere stupefatti da una notizia dopo aver comprato il cartaceo. Non solo. La maggior parte delle testate sono politicizzate, quindi distorte, quindi antiobiettive. Perchè il lettore deve spendere un euro per un quatidiano?

Il giornalismo indipendente è incredibilmente motivante e gratificante. Lo stipendio morale che si riceve dalla stima e dall’autorità conferita dai lettori, senza alcuna ingenua retorica, vale molto più di qualsiasi guadagno materiale e, soprattutto, rinvigorisce quel famoso quarto potere che tanto bene farebbe alla democrazia traballante di questo paese.

Serve dunque un luogo elegante, nel quale questa potenza riscoperta dell’informazione possa giungere con tutta la sua autenticità, a noi, quando più lo riteniamo opportuno. Mi sento dunque invitato a realizzare una piattaforma dai connotati storici, eroici, come il giornalismo di 40 anni fa: attualizzando l’esperienza allo strumento di lettura - la macchina - l’immagine in bianco e nero dello scrittore, neutra come il suo colore, ci ricorda che qui si fa solo informazione.

Matteo Forni - 8-10-2014 - m.forni@boba.land

#2 Blasting Home Page CROSS MEDIALE La progettazione della home page blastingnews.com, mi ha suggerito un atteggiamento nella composizione delle informazioni, di tipo cross mediale.

Media di varia naturala adattati in modo da poter condividere lo stesso spazio, e lo stesso valore nell’osservatore. Grazie alle potenzialità dei numerosi framework in js o jquery, i blocchi seguono una regola fissa per il ridimensionamento e la frammentazione.

PRIMA LETTURA Nei primi 650px l’utente che approda su blastingnews.com può osservare il prodotto finito della piattaforma, ovvero l’articolo. Questo si alterna alle immagini dei blaster che autografano le news con una immagine in bianco e nero.

Non da meno è la presenza del pannello grazie al quale l’utente può iscriversi con i propri account social.

SECONDA LETTURA

In queste viste miste, è rappresentata la home page del sito, con l’adattamento delle dimensioni dei blocchi per un formato tablet o phablet.

Un orologio indica l’orario locale, invitando l’occhio del lettore a valutare la “freschezza” di alcune notizie.

Matteo Forni - 8-10-2014 - m.forni@boba.land

Dalla mia analisi il ruolo del blaster è di gran lunga il traino dell’intera piattaforma: nella seconda lettura infatti ho inserito uno slideshow, il cui div comprende: l’immagine, il cognome, le skills e la fotgrafia in b/n dello scrittore.

#4 Blasting Home Page Responsive OTTIMIZZAZIONE L’approdo sul sito web non mostra nessun testo/contenuto nascosto. L’effettistica di front end si basa solo su css. Ogni testo è visibile e leggibile e non necessita nessun adattamento ad immagine, per eventuali comparse o effetti di scorrimento.

Un notevole vantaggio per l’ottimizzazione, se pur l’interfaccia sia ampiamente di tendenza.

PALETTE COLORE Di seguito la palette sulla quale mi sono basato, per lo sviluppo di gran parte del progetto.

Main

#FF0000

Main

#FF0000

Background #FF0000

In queste viste miste, è rappresentata la home page del sito, con l’adattamento delle dimensioni dei blocchi per un formato tablet o phablet.

E’ stata garantita la presenza di ogni informazione presente anche nella vista di home precedente, ovvero quella full size.

Matteo Forni - 8-10-2014 - m.forni@boba.land

Background #FF0000

TV e Gossip

LAVORO

CRONACA

#FF0000

#2E3192

#C3272D

TV e Gossip

SOCIETA’

ESTERI

#FCEE21

#662D91

#00A99D

SPORT

TECNOLOGIA

AMBIENTE

#F7931E

#8DFFE4

#22B573

#5 Blasting Home Page UXD

L’orologio in Homepage comunica l’ora locale dell’utente. Si può settare, ed offre immediatamente un raffronto con gli orari di pubblicazione delle news.

active

hover

CRONACA

CRONACA

di Said Ahul

SEGUI di Said Ahul

Per seguire un Blaster basta passare con il mouse sopra la sua foto.

Join Now Publish news, photos and videos Reach +10 mln people Earn up to 150€ per content

La rivisitazione dell’iscrizione via Social, utilizza il font del logo, adattando ad un formato “flat” i bottoni ed i blocchi.

Matteo Forni - 8-10-2014 - m.forni@boba.land

Cos’è Blasting News? Ce lo dice un menù a comparsa

#6 Blasting Main Page FULL SCREEN Ho progettato l’interfaccia della main page così che essa potesse sfruttare tutto lo spazio a disposizione nel monitor.

Il risultato ne è una progressiva differenziazione delle notizie presenti in home, le quali si alternano a sezioni dinamiche, come breaking news e social trends.

COLONNE L’home page si presenta divisa in tre colonne che ritrovano nell’ordine di lettura, da sinistra verso destra, una progressiva diminuzione delle dimensioni dei blocchi, ed un ancor più schematica composizione dei contenuti.

In questo caso si è abbandonata l’ipotesi di una configurazione che sfrutti framework di natura difficilmente indicizzabile: ai contenuti sono assegnate delle dimensioni fisse.

SPAZIO AL MULTIMEDIALE

Queste due viste propongono la home page nel loro naturale adattamento a fullscreen.

Ho scelto una base a tre colonne, così da favorire l’esperienza di navigazione anche con menù aperto: questi infatti, una volta che sopraggiunge da destra sulla pagina, riporta garantisce l’equilibrio dell’immagine di testa.

Matteo Forni - 8-10-2014 - m.forni@boba.land

Prima di accedere al footer della pagina ed alle modalità di iscrizione su blastingnews.com, ho introdotto una funzionalità che raccolga, aldilà della categorie/sezioni, tutti contenuti multimediali presenti in quel determinato momento nella piattaforma.

Nell’esempio a sinistra, gallerie fotografiche e video convivono lungo una timeline.

#7 Blasting Main Page Responsive MENU’ OPEN Nel ridimensionamento responsivo (come nel fullscreen), il menù offre un contrasto netto, al momento della comparsa da destra, sull’intera pagina, concentrado su di esso gran parte dell’attenzione. Per questo motivo ho inserito dei tools utili all’utente che vadano a completare la sua esperienza generale sul sito: un meteo geolocalizzato(...), un pannello per la ricerca generale.

BANNERS Attualmente sono predisposti due banners pubblicitari, che si insediano nella colonna di destra. Così sia in un ipotesi di ridimensionamento via device, sia nell’ipotesi naturale della vista desktop.

Il menù aperto incolonna a destra, in una solida sintesi cromatica, tutte le sezioni, i contenuti ed alcuni nuovi tools come il meteo, ed il centro di ricerca. Il menù gode di una scrollbar del tutto indipendente dalla navigazione della main page.

In questa versione responsiva l’impaginazione ritrova le due colonne, spostando nella lunga colonna di sinistra, gran parte dei contenuti.

Matteo Forni - 8-10-2014 - m.forni@boba.land

#7 Blasting Main Page UXD

Il pannello meteo da un altra informazione di complemento alla navigazione dell’utente.

Uno slideshow a metà tra le due colonne, mostra i video consigliati del momento. Si possono scorrere e guardare direttamente dalla homepage.

Ogni blocco-notizia è composto da un immagine, un titolo (o una parte di esso), un sottotitolo o parte del testo, ed alcune icone che ne segnalano le iterazioni social ricevute dal contenuto.

In blastingnews.com, si può osservare sulla fotografia principale del blaster in home, un hover insolito, il quale riporta i dati del blaster, relativi alla sua attività di indipendent journalist.

Matteo Forni - 8-10-2014 - m.forni@boba.land

#7

Matteo Forni - 8-10-2014 - m.forni@boba.land

#7

Matteo Forni - 8-10-2014 - m.forni@boba.land