Anno nuovo design nuovo… Solo che ci ho messo un po’ più del previsto. Tra progetti iniziati, accantonati e ripensati alla fine siamo arrivati a Febbraio.

Il vecchio tema di webquadro, che tra poco sarà disponibile per il download gratuito, mi piace ancora ma lo trovo un po’ troppo semplice per come si sta evolvendo webquadro.

Da pochi di mesi sono un web designer freelance a tempo pieno e quindi ho la necessità di uno spazio più complesso dove convogliare clienti e semplici appassionati di web design.

Quella che segue è una descrizione del processo creativo che ha portato a questo nuovo layout. Il risultato puoi giudicarlo nei commenti ma cerca di essere magnanimo :-)

Dimensioni

Per prima cosa ho deciso di sfruttare tutto lo spazio a disposizione offerto dalle nuove risoluzioni con  980px di larghezza. In passato ti avevo consigliato 960 pixel come misura ideale ma in questo caso avevo proprio bisogno di quei 20px in più.

Tutto è stato misurato in funzione dei contenuti. Per esempio la parte legata ai post è stata ingrandita per dare spazio al nuovo formato 16:9 di youtube.

Header

Questa è la parte a cui ho prestato più attenzione. Del resto è la prima cosa che si vede!

La scelta di portare il menu sopra il logo è stata voluta per dare maggiori importanza alle macro sezioni del sito. Il blog (la passione), il portfolio (il lavoro) e i contatti (me). Menu a caratteri cubitali in netto contrasto con il resto del sito.

Per  il logo ho scelto un posizionamento assoluto in modo da poter giocare con il contrasto bianco/grigio e con l’ombreggiatura. Avrei voluto usare la proprietà rotate offerta dai CSS di terza generazione per inclinare il logo ma purtroppo Internet Explorer…

Tramite le api di twitter e questo tutorial finalmente mostro l’ultimo tweet del mio account.

Ricerca personalizzata tramite Google Search ma modificata nello stile per adattarla al nuovo layout seguendo quanto già spiegato in questo post.

Le categorie sono mostrate in un’unica riga subito sotto il logo in maniera quasi impercettibile. Lo so forse sono troppo piccoli i link ma ho deciso di dare risalto alle categorie del blog tramite altri strumenti che introdurrò in seguito

Per concludere, una serie di  button per le varie condivisioni sui social e per i feed rss. In futuro conto di integrarli con altri link ai download o alle categorie più importanti del blog.

Il blog

Qui forse ho esagerato!

Non nascondo di essermi del tutto inamorato dei titoli giganti. A qualcuno potrebbe sembrare una scelta azzardata ma a me piace pensare che sia un modo semplice e chiaro per mostrare “di cosa sto parlando”. L’ispirazione definitiva mi è venuta guardano il sito web di wearepixel8.

Per quanto riguarda i metadati del post l’ispirazione e anche il punto di riferimento è Nick LA e il suo recente redesign di n.design studio. Anche io come lui ho deciso di mostrare le categorie di appartenenza del post in maniera più visuale associando un immagine a ciascuna categoria.

I Commenti

Per i commenti non ci sono sostanziali cambiamenti se non l’evidenziazione dell’autore, il gravatar più grande e la separazione di trackback e pingback dal flusso naturale dei commenti. Inoltre ne ho invertito l’ordine in modo da rendere più agevole la lettura della discussione.

I Tag

Webquadro sta crescendo e con lui il numero di tag. Ho pensato di inserire la tag cloud subito dopo il contenuto in maniera prorompente e con i colori in contrasto. Questo perché non evidenziando i singoli tag nei post ho sentito la necessità di valorizzare questo metodo di suddivisione.

La Sidebar

Questa sezione la considero ancora work in progress. Ho aggiunto gli articoli più commentati e gli ultimi inseriti ma le idee sono ancora tante e verranno inserite un poco per volta.

Da notare l’effetto hover sulle liste che secondo me è molto carino ;-)

Il Portfolio

Qui il lavoro più duro è stato adattare la funzione wp_list_bookmarks di wordpress ai miei scopi. In questo modo ora posso gestire l’inserimento di nuove creazioni direttamente dall’amministrazione creando un link nel blogroll.

I progetti realizzati sono descritti in maniera sintetica e suddivisi per tipologia. In breve tempo prometto di completare il portfolio anche con i lavori di computer grafica.

I contatti

La scelta è particolare. Ho inserito nel footer una breve bio/introduzione affiancata da una form contatti e  completata da tutti i link utili a restare in contatto. Cliccando su contatti si accede ad una pagina vuota con un “freccione” che rimanda al footer sopra descritto. L’ho trovato un modo carino ma soprattutto diverso per descrivermi.

404 Not Found

bisogna sempre prevedere un link corrotto od un errore di digitazione che porta inesorabilmente  ad un bel 404. Nella precedente versione in questi casi offrivo una lista delle categorie presenti. Ora oltre al messaggio (bene in evidenza) di errore invito il visitatore ad utilizzare la ricerca.

I Font

Uso quasi esclusivo di Helvetica con qualche tocco di Georgia giusto per alternare un po’. Con l’aiuto della proprietà letter-spacing sono riuscito ad ottenere titoli e menu più “compatti”

I Colori

Sono un amante dei grigi, non ci posso fare niente. Quelli nelle mie creazioni  ci saranno sempre. Da notare però il cambiamento da #333 a #444 per i testi che li rende meno pesanti soprattutto a queste dimensioni e il netto cambio di rotta verso il rosso (il tema precedente di webquadro era basato sull’azzurro)

Avanti con i commenti…