Il punto di partenza

Il primo sito QualySource (maggio 2008 – gennaio 2009) riprende un mix di soluzioni collaudate ad alcune più innovative all’interno in una struttura tutto sommato tradizionale.

La griglia riprende i classici elementi Header, Footer per aprire e chiudere il sito e tre colonne che gestiscono menu, contenuti e “colonna di scopo” compatibile dalla risoluzione di 1200px a salire.

L’insieme cerca di essere leggero e non invadente nel tentativo di mettere in risalto i contenuti; un contenitore che dovrebbe esaltare il suo contenuto.

Punti salienti:
Header: logo dimensionalmente importante. Tentativo di differenziare i due ambiti “Web Strategico” e “Soluzioni Web”.
Footer: presenta la mappa del sito per agevolare l’utente.
Colonna sx: è la colonna dei menu. Uno principale scandito dai due macroambiti “Web Strategico” e “Soluzioni Web”. Uno  di servizio con l’acccesso alle aree piu’ trasversali (Network, DL e sito Mobile).
Colonna Centrale: contiene il testo.
Colonna dx: è la colonna di scopo. Contiene una form per il quick contact. Utile perchè presente in tutte le pagine permette di contattare QualySource in ogni momento senza dover andare in una pagina specifica.

Gli ambiti spaziali

Il dettaglio: header

Il logo è ampio, essendo leggero non appesantisce particolarmente la pagina.
La scritta QualySource viene retta da dei fili verdi che giocano in trasprenza con il logo, creando un effetto piacevole ma di ambigua lettura.

L’header “contiene” una sorta di indicatore/segnalatore di quale macrosezione stiamo navigando.
L’aggiunta di tali indicatori invece di facilitare l’utente rende l’insieme un po’ confuso e sbilanciato.

Il dettaglio: colonna sinistra

Il menù principale è chiaro, leggibile ed ordinato.

Si distinguono due macroambiti,  uno relativo al quello istituzionale ed uno relativo alle pagine maggiormente di “servizio”.

Si è scelto un trattamento grafico distinto dando più peso al menù in basso per bilanciarne la posizione meno evidente rispetto a quello principale.

L’unico effetto concesso è un mouseHover sulle voci del menù di servizio che apre anche delle “tendine” (sono state scelte perchè permettono di articolare più argomenti risparmiando spazio in altezza).
Per contro il menù principale è stato lasciato espanso per esplicitare da subito i contenuti trattati.

Il dettaglio: corpo principale

Lo spazio per il contenuto è leggermente delimitato in alto per rendere immediata l’individuazione degli ambiti funzionali senza appesantire la pagina.

La formattazione testuale e’ su tre livelli:
Titolo sezione (a destra per bilanciare i pesi), Claim e Contenuto.

Sulla destra, presente in ogni sezione, il modulo di contatto rapido occupa tutto lo spazio disponibile nella terza colonna.

Il dettaglio: footer

Il footer chiude in modo chiaro il sito riportando sulla destra la navigazione principale.

Il posizionamento è stato scelto nell’ottica di agevolare l’utente che se ha “scrollato” la pagina fino in fondo avrà probabilmente il mouse già posizionato in quella zona dello schermo (la barra di scorrimento è difatti a destra della pagina).

Analisi qualitativa

Fattori positivi (pochi in effetti):
Il sito è facilmente leggibile, i contenuti chiaramente esposti.

Il colpo d’occhio individua chiaramente gli ambiti funzionali dell’interfaccia permettendo una lettura facile e senza intoppi.

I menù sono altrettanto chiari e fruibili.

Fattori negativi (Molti a dire il vero):
A dispetto della leggibilità ci sono dei problemi nell’orientamento dell’utente che può perdere traccia della sua posizione all’interno dell’organizzazione dei contenuti.

Manca un vero e proprio navigatore e l’unica indicazione che chiarisce in quale macrosezione si sta navigando è data dall’indicatore colorato nell’header.
Si tratta di un messaggio ambiguo e assolutamente non coerente con il resto dell’interfaccia.

L’interfaccia, inoltre, è troppo neutra, non dichiara nulla, si pone come mero contenitore. L’approccio di per se corretto per un brand conosciuto può essere un minus per un marchio sconosciuto. L’utente non percepisce dall’interfaccia nulla se non la funzione, in questo modo non si può riconoscere nei servizi erogati non percependo rapidamente il valore aggiunto di QualySource.
Il lato più negativo è proprio questa neutralità che certamente pone l’accento sui contenuti ma non gli introduce o accompagna in modo abbastanza forte.

Un passo in avanti

Nel tempo ci siamo resi conto che la mancanza di carattere data dalla non ideale risoluzione degli accostamenti oltra che dall’eccessiva monotonia erano i veri punti di debolezza del logo (ed in qualche modo di tutta la parte visuale della comunicazione) .

Partendo da questo assunto e volendo non solo salvaguardare ma accentuare gli aspetti positivi abbiamo deciso di mettere mano all’immagine coordinata di QualySource partendo ovviamente dal logotipo.

Obiettivi:

• Accentuare il carattere generale;
• Accostare il lettering al logo grafico;
• Mantenere facilità d’uso nei vari contesti;
• Mantenere leggibilità;
• Ribadire la duale inscindibilità del processo creativo (Design – Engineering);

Il logo 2009

Concept:
Si è deciso di mantenere la iniziali QS però su un fondo pieno. La forma è passata da tondeggiante a squadrata. Due quadrati che però per cromia e per trama  (data dalle lettere e dal loro posizionamento) risultano molto differenti, richiamando ancora una volta la complessità e dualità della realizzazione di progetti e applicazioni web.
Le lettere Q ed S quasi scavate all’interno non sono completamente contenute nei quadrati me ne interrompono i confini, suggeriscono altro, l’apertura di QualySource alle novità, la propensione all’innovazione, all’utile rottura degli schemi quando e dove sia necessario.
Il quadrato quindi come forma razionale arricchito dalla creatività che rompe gli schemi.

Colori:
Abbiamo giocato sul rosso (passione – creatività) e sul neutro (certezze – razionalità) usandoli per riempire e contornare. Il quadrato di sinistra rappresenta la fantasia regolata dalla ragione mentre quello di destra la razionalità guidata dall’estro.

Carettere (Font):
Ancora un font moderno senza cadere nel modernismo, semplice e leggibile, piacevole  sia stampato che a video.
Ora QualySource viene sempre accostato al logo. Vi e’ una maggiore coerenza anche se si continua a non avere una perfetta bilanciatura del risultato.

Insieme:
L’insieme risulta leggibile, abbastanza marcato senza diventare pesante e si presta anche all’uso in toni di grigio.

Nella Pratica

Header sito versione 2009 (sopra)

Header presentazione versione 2009 (Sopra)

Il logo si adatta bene sia all’uso su banda bianca che grigia, accostato a destra o sinistra.
Inoltre la maggiore caratterizzazione data dai colori ne suggerisce un uso dimensionalmente meno invadente.

Ancora una volta forse l’accostamento della scritta con la grafica è la cosa meno riuscita ma certamente migliorata rispetto alla versione 2008.

Infine

L’operazione Revamp 2009 dell’immagine coordinata QualySource parte dal logo e ad un primo sguardo potrebbe sembrare una rivoluzione.

Niente di piu’ fuorviante!

Si pone infatti in un’ottica di continuità con il passato nel tentativo, in parte risolto ci pare, di sottolineare quanto di già efficace minimizzando i punti meno riusciti del vecchio logo.

Come vedremo, tutta l’operazione si poggia su questo cardine.

Evoluzione e non rivoluzione.

]]> http://qualysource.wordpress.com/2009/02/11/design-2009-logo-revamp-2/feed/ 0 qualysource QualySource Logo 2009 Header sito 2009 Header presentazione 2009 http://qualysource.wordpress.com/2009/02/09/design-2009-logo-revamp/ http://qualysource.wordpress.com/2009/02/09/design-2009-logo-revamp/#comments Mon, 09 Feb 2009 12:26:44 +0000 qualysource http://qualysource.wordpress.com/?p=23 ]]>

Background

La scelta di un marchio e’ sempre processo complesso e affascinante.

Nel nostro caso abbiamo deciso di partire…dall’inizio della fine.

Nel 2007 finiva l’avventura di SEIcom Italia, e non volendo disperdere competenza, capacita e voglia di lavorare assieme, parte dell’allora management ha dato vita ad una nuova realtà.

Da questa prima riflessione, dalla nascita di qualcosa e dal fatto che che quel qualcosa avrebbe ancora avuto a che fare con del codice di formattazione/programmazione abbiamo trovato calzante giocare sul terrmine “source” come sorgente sia in relazione appunto al codice sorgente sia in relazione alla sorgente nell’accezione di inizio.

La caratteristica che da sempre ricerchiamo nei prodotti da noi realizzati e’ la qualità, nel senso piu’ ampio del termine.
QualySource dunque.

Il Logo

Concept:
L’idea e’ quella di sottolineare l’indispensabile sinergia tra Design ed Engineering nell’ideazione e realizzazione di applicazioni web. Per questo l’uso di cerchi (anche ideali) che si compenetrano e contengono. Elementi distinti che ne contengono altri a formare un insieme piu’ complesso.
La forma è metafora del processo creativo che mette in gioco competenze differenti e cooperanti.

Colori:
Si e’ voluto dare un senso di certa capacita’ di fare, per questo la scelta di un fondo bianco usato in abbinamento al verde.

Carettere (Font):
Il lettering e’ classicamente modeno, niente “extravaganze”, cosi’ come il colore neutro vuole dare un senso di sicurezza. QualySource e’ scritto attaccato per sottolineare l’inscindibilita’ dei due concetti, l’uso della maiuscola in Source e’ citazione di notazione spesso utilizzata nella scrittura di codice.

Insieme:
L’insieme risulta leggero e leggibile, facilmente utilizzabile anche in toni di grigio.

Nella pratica

L'header del sito versione 2008 (sopra)

L'header delle presentazioni versione 2008 (sopra)

Nell’utilizzo pratico sia per uso web che per uso slideshow il logo risulta fin troppo leggero, quasi vuoto, per questo lo si e’ dimensionato generosamente.

Inoltre il non risolto accostamento delle iniziali con la denominazione estesa, quasi non facesse parte dell’insieme del logo, da un senso di incompiutezza ed aleatorietà del messaggio.

Nonostante tutto pare che il mercato degli smartphone cresca.

“Se … gli sviluppatori continueranno a migliorare le applicazioni, questo segmento continuerà a distinguersi all’interno di un mercato davvero nero”.

da THG Italia

From 8100

ad un sacco di cose, tutto e’ cambiato.

Front end

Originally uploaded by qualysource

diagonale

proseguiamo, non esattamente spediti ma quasi in bolla.

io andrei a preparare per domani, vediamo cosa se ne cava, i presupposti son buoni.

Abbiamo il sito (farcito di contenuti)

Uno spazio youTube (praticamente vuoto…per ora)

Uno flickr (praticamente vuoto…per ora)

it’s a WOW

Mobile