My Social Web » web design

Ecco il nuovo My Social Web!

Riccardo Esposito — Sun, 22 Jan 2012 09:36:59 +0000

Approfitto dello spazio riservato al Sunday Morning per presentarti la nuova veste grafica di My Social Web. Niente di eclatante, sia ben chiaro, i colori dominanti sono sempre il bianco e nero…

È una questione di leggerezza. Rispetto al vecchio tema Vigilantes, nel minimalismo di Code Reduction c’è quell’eleganza che cercavo da più tempo. Le sue caratteristiche fondamentali:

Stile minimalista;
Ottimo per iPhone, smartphone e iPad;
Colore e immagine del background personalizzabili;
Immagine dell’header personalizzabile;

Tutto qua, niente di speciale, ma è proprio questo il motivo che mi ha spinto a scegliere questo tema.

Come vedi la sidebar è rimasta quella di prima e non ci sono pagine nuove ma non temere: nei prossimi giorni ci saranno grandi novità tra i servizi di My Social Web.

E adesso la domanda: ti piace il nuovo look? Secondo te posso migliorare qualcosa? lascia il tuo parere nei commenti!

Ciao! Ecco il nuovo My Social Web! e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

Blogger cambia faccia e si avvicina a WordPress

Riccardo Esposito — Sun, 10 Jul 2011 21:56:22 +0000

Scommetto che quando hai letto la notizia del rebranding di Blogger (insieme a Picasa) hai temuto per i tuoi articoli, per i tuoi contenuti, per tutto il lavoro che hai fatto sul tuo blog.

E immagino che tu abbia tirato un sospiro di sollievo quando hai scoperto il restyling del pannello di controllo. Un restyling dominato dai colori bianco e arancio, che allarga gli spazi di lavoro e che si avvicina un po’ a WordPress. Tu non credi?

Per avere un’idea di quello che sto dicendo basta visitare il link Blogger in Draft ed entrare nella pagina principale, quella dove puoi gestire tutte le risorse del tuo blog.

La lista degli articoli è scomparsa e al suo posto ci sono moduli informativi: statistiche, articoli della Guida Blogger, informazioni rapide (visualizzazione delle pagine quotidiane, numero dei post, commenti pubblicati, commenti in attesa di moderazione) che ti permettono di avere sotto controllo la situazione con un’occhiata.

A sinistra trovi un menù con le principali attività del blog come la creazione di pagine e post, la gestione dei commenti, lo studio approfondito delle statistiche.

Ma allora è tutta una copia di WordPress? Assolutamente no! La semplicità è sempre quella che contraddistingue la piattaforma Blogger, nell’editor degli articoli lo spazio dove scrivere non è soffocato dai moduli e le grafiche sono vicine allo stile che contraddistingue Google Plus: i pulsanti rettalgolari con i bordi arrotondati, le linee pulite…

Continua il percorso di rinnovamento dell’universo Google. A proposito, a te piace il nuovo pannello di controllo di Blogger?

Ciao! Blogger cambia faccia e si avvicina a WordPress e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

9 tool per creare wireframe

Riccardo Esposito — Tue, 08 Feb 2011 22:29:06 +0000

I wireframe sono indispensabili per creare una bozza del tuo prossimo sito per sviluppare (da solo, con i colleghi o insieme ai clienti) un valido discorso di usabilità e sottolineare problemi che è meglio risolvere prima che poi.

Come sono fatti questi wireframe? Non sono molto piacevoli da vedere perché, in effetti, si tratta di una bozza del sito composta da blocchi incolore, testo e didascalie. Puoi utilizzare un qualsiasi programma di fotoritocco per creare un wireframe ma sul web ci sono molti strumenti che ti possono dare una mano. Io ne ho scelti 9:

FlairBuilder – Iniziamo con un’ottima applicazione (a pagamento) web based per creare wireframe, prototipi di siti web e bozze di applicazioni iPhone. FlairBuilder è sicuramente uno degli strumenti principali nel settore del web designer.

Balsamiq Mockups – Sembra un disegno ma è un wireframe creato con Balsamiq. Ecco un tool ideale (anche questo a pagamento) per far lavorare insieme product manager, designer, sviluppatori e clienti prima di scrivere il codice ed evitare di perdere tempo prezioso per correzioni inutili.

Cacoo – Crea wireframe e diagrammi modificabili online da più persone contemporaneamente. Con Cacoo, infatti, le modifiche effettuate dagli utenti appaiono in tempo reale sul progetto. L’account può essere gratuito o a pagamento (4.95 dollari al mese).

Wirify – Bottone da aggiungere sul tuo browser per trasformare ogni sito web in un wireframe. Lo so, adesso ti starai chiedendo quali sono i motivi per fare un passo indietro e trasformare un sito web in un wireframe. Dovrebbe essere il contrario ma il team di Wirify ha la risposta che cerchi.

Pencil Project – Altra componente per browser (ma c’è anche la versione standalone) che ti aiuta a progettare il tuo sito web. Rilasciato con licenza GPL version 2, Pencil Project mi piace perché è uno strumento facile, immediato e open source.

Denim – Denim uno strumento pen-based per progettare interfacce con pad elettronici e stilo. Sembra proprio un disegno fatto su un pezzo di carta ma qui siamo di fronte a un file digitale che puoi modificare, appuntare, arricchire con note di qualsiasi genere…

MockFlow – Hai praticamente tutto quello che ti serve e le interfacce che sono dinamiche. L’account a pagamento (4,91 dollari al mese) permette di creare un numero infinito di progetti e di chiamare a raccolta tutti i collaboratori di cui hai bisogno. L’account gratuito, invece, ha come limite un progetto e 2 collaboratori.

iPlotz – Possiede le caratteristiche dei wireframe tool visti finora ma la sezione dedicata al supporto (forum, snippets, tutorial) è ben fornita e ci sono diverse soluzioni di pagamento, oltre a una versione gratuita che permette di creare un solo progetto di 5 pagine.

Mockingbird – L’idea che suggerisce Mockingbird è quella di essere uno strumento veloce, professionale e rapido da usare. Non c’è niente da installare, è tutto web e facile da esportare in PDF o PNG. Anche in questo caso ci sono diverse soluzioni di pagamento.

Aspetta… prima di metterti a lavoro non ti dimenticare l’indispensabile guida di Smashing Magazine e gli strumenti indispensabili per creare wireframe: carta e penna! No, non sto scherzando e leggi un po’ cosa ne pensano in questo articolo a proposito del paper wireframing

Fonte immagine

Ciao! 9 tool per creare wireframe e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

Downtime di Tumblr? Tutta colpa dei Tumbeasts!

Riccardo Esposito — Mon, 31 Jan 2011 23:03:41 +0000

Quante volte ti è capitato di trovare il servizio di microblogging temporaneamente fuori uso? Negli ultimi tempi è successo con una frequenza quasi fastidiosa e per questo motivo Oatmeal ha scritto una lettera molto interessante…

In poche parole il blogger/fumettista suggerisce a Tumblr di seguire l’esempio di Twitter (Fail Whale) e incolpare un animale immaginario per i ripetuti downtime. Questi animali nati dalla creatività di Oatmeal sono i Tumbeats, e come puoi ben vedere hanno già iniziato a rovistare tra i server…

E sai qual è la novità? Dopo l’annuncio via Twitter della famosa lettera Tumblr ha accettato il consiglio di Oatmeal e ha creato una pagina Service Unavailable 503 con i Tumbeats. Il messaggio lasciato nella pagine chiarisce lo stato delle bestiole: “Forse abbiamo dimenticato di alimentare il Tumbeasts selvatici che vagano per il nostro datacenter!”

La lezione di questa storia? Impara ad ascoltare chi ti sta intorno e cogli al volo le opportunità che ti vengono proposte su un piatto d’argento!

Ciao! Downtime di Tumblr? Tutta colpa dei Tumbeasts! e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

7 Clone Theme per WordPress

Riccardo Esposito — Sun, 28 Nov 2010 22:27:15 +0000

A volte vorresti mollare tutto e cambiare qualsiasi cosa della tua vita? Questo accade anche a chi possiede un blog: lo guardi ogni giorno, curi ogni piccolo dettaglio, ma alla fine ti rendi conto che vorresti rinnovarlo dalla A alla Z.

Se non hai alcuna voglia di cedere alla tentazione di una grafica minimal e hai deciso che vuoi stupire i tuoi visitatori allora ti suggerisco di trasformare il tuo blog in un social network o in un motore di ricerca. Possibile? Certo, basta scegliere uno di questi Clone Theme:

Woogle

Impossibile non iniziare questa selezione di temi WordPress con Woogle, una scelta che riprende le linee del classico motore di ricerca Google.

Google Chrome

Ancora un rimando ai prodotti di Mountain View grazie a questa interessante grafica per WordPress, una deliziosa copia di Google Chrome.

Facebook WordPress

Il tema clone per WordPress più famoso è sicuramente quello di Facebook. Io preferisco quello messo a disposizione da Foxinni che permette anche di cambiare colore.

TweetPress

Ovviamente c’è spazio anche per Twitter, il social network che si trasforma in WordPress (o viceversa) grazie al tema TweetPress.

Digg-like WordPress Theme

Digg-Like WordPress è il tema che riprende le linee di un altro grande social network… indovina un po’ quale?

Tumblelog

La forza di un blog WordPress e il design essenziale di un Tumblr si incontrano grazie al tema tumblelog, la soluzione ideale per chi ama lo stile del microblogging.

iBlog

Facile appassionarsi ai prodotti della Apple e lasciarsi conquistare dalle linee pulite del tema iBlog, il modo più semplice per trasformare il tuo blog in un piccolo spazio vicino alla filosofia di Cupertino.

Post Scriptum

Prima di procedere con l’installazione ti consiglio sempre di leggere le istruzioni del tema che stai per adottare, rispettare eventuali incompatibilità, consulatere le istruzioni presenti nella sezione Utilizzo Temi di WordPress Italy.

Ciao! 7 Clone Theme per WordPress e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

Migliora il design per il tuo blog in 10 minuti

Riccardo Esposito — Thu, 19 Aug 2010 21:14:17 +0000

Quanto tempo abbiamo trascorso a ribadire che content is king? Certo, scrivere ogni giorno contenuti di qualità vuol dire trasformare il tuo blog in un punto di riferimento, ma questo non vuol dire abbandonare tutto in resto.

Alcuni errori di design possono causare diverse noie, piccoli e grandi problemi che rischiano di ripercuotersi amaramente sul tuo blog. E pensare che bastano 10 minuti per controllare tutti i punti di questa semplice lista…

Assenza (o eccessivo uso) di formattazione – Te l’immagini 20 righe di testo completamente privo di formattazione? E 20 righe di testo completamente immerso nel neretto e nel corsivo? In entrambi i casi il risultato estetico è pessimo.

Font troppo piccolo o troppo grande – La dimensione del font è molto importante per l’equilibrio estetico e, soprattutto, per la leggibilità dei contenuti. Guai a utilizzare un font che costringa i lettori ad alzarsi dalla sedia per capire cosa c’è scritto.

Sfondo e colori troppo vivaci – Eccoci nel cuore della faccenda dedicata alle scelte di design. Quando scegli il colore dello sfondo e dei moduli assicurati sempre che ci sia un buon contrasto con il font. E manda al diavolo quei colori sgargianti che fanno venire il mal di testa!

Link poco distinti dal testo – Questa regola si posiziona a confine con i criteri di usabilità: guai a non evidenziare i link con un colore ben differente da quello del font. E, come suggerisce anche Jakob Nielsen, un colore differente tra link visitati e ancora da visitare.

Icone social - Elementi fondamentali per un blog che si trova a confrontarsi con le moderne piattaforme di social networking. L’importante è scegliere le icone e i pulsanti che si adattino allo stile del tuo blog tra le tante possibilità offerte da Iconfinder.

Immagini di scarsa qualità – Immagino sia inutile perdere altro tempo per sottolineare quanto siano importanti immagini di buona qualità…

Troppa pubblicità – Nessuno ti vuole criticare per la tua scelta di pubblicare annunci pubblicitari, Adsense e banner ma cerca sempre di mantenere la giusta armonia con il design del tuo blog. Non esagerare con il numero delle inserzioni e con le insegne lampeggianti.

Pop up e barra di navigazione – Alcuni servizi e plugin per WordPress permettono di inserire barre di navigazione con strumenti di navigazione, notifiche, pop up e icone per iscriversi ai canali Twitter, Facebook e Feed Rss. Pensaci bene: tutto questo è veramente?

Tutta la conoscenza del web design per blogger si conclude con questi pochi punti? Assolutamente no: questa è solo un riassunto delle regole fondamentali. Se vuoi ancora consigli per migliorare l’estetica del tuo blog c’è solo un modo: seguire assiduamente il network di Smashing Magazine.

Ciao! Migliora il design per il tuo blog in 10 minuti e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

7 temi Grid-Based per WordPress

Riccardo Esposito — Mon, 09 Aug 2010 21:56:53 +0000

Inutile negare la mia passione per i blog dallo stile pulito e minimalista. Questo non significa che io non riconosca l’utilità (e la necessita) di un design più articolato, di una maggior capacità di personalizzazione e di una navigazione più articolata.

Per questo ho deciso di completare la mia lista di temi WordPress con questi esempi di grafiche grid-based (cioè a griglia) che puoi utilizzare sul tuo blog per creare spazi web innovativi e decisamente fuori dal comune.

MonoKrome

Arthemia

Mansion

Autofocus

Grid-A-Licious

Aperio Prototype

Tanzaku

Ciao! 7 temi Grid-Based per WordPress e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

27 esempi di Twitter Status creativi

Riccardo Esposito — Mon, 17 May 2010 22:51:38 +0000

Spesso si parla di nuovi layout per il proprio blog, ma anche i social ogni tanto hanno diritto a una buona rinfrescata grafica. Prendi ad esempio Twitter: cosa puoi cambiare oltre alle icone, allo sfondo e ai piccoli dettagli?

Semplicemente puoi modificare il tuo Twitter Status, le finestre in cui i tweets vengono visualizzati sul tuo blog, e abbandonare i widget di default. Chet Studio ne ha raccolti 27 e io te ne anticipo un paio, quelli che mi sono piaciuti di più:

Gabediaz

SquaredEye

Pasquale D’Silva

P.S. Alcuni esempi sono scomparsi dai blog di riferimento ma vale la pena prendere spunto dalle immagini riportate sull’articolo. Comunque puoi sempre rifarti con questi ulteriori 40 esempi di Twitter Status creativi che esplorano anche diverse soluzioni widget dedicate alle sidebar.

Ciao! 27 esempi di Twitter Status creativi e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

Come ottimizzare l’immagine di una Facebook Fan Page

Riccardo Esposito — Sun, 03 Jan 2010 21:42:07 +0000

Non credo che si tratti di una rivelaione se ammetto il mio debole per le Facebook Fan Page, la punta di diamante per chi desidera aumentare la visibilità dei propri contenuti attraverso gli strumenti del network di Mark Zuckerberg.

Purtroppo le Facebook Fan Page non sono predisposte ad accettare le attenzioni web designer: puoi migliorane il posizionamento nei motori di ricerca, ma l’immagine del profilo è uno dei pochi elementi che consente di modificarne la struttura estetica. Uno spazio che, per questo motivo, ti conviene sfruttare al meglio:

L’immagine della tua Facebook Fan Page è quell’elemento che dà il benvenuto ai visitatori, e che permette di far riconoscere i tuoi aggiornamenti nello streaming della home page. Quindi, non devo sprecare troppe parole per farti capire che sto parlando di un dettaglio di fondamentale importanza!

Eppure l’ottimizzazione delle immagini di una Facebook Fan Page non passa solo attraverso la qualità e il numero dei pixel, ma soprattutto attraverso i pixel che ne determinano la larghezza e la lungezza.

La larghezza utile è di 200 px, ma nelle thumbnail e nelle miniature dei link pubblicati bacheca si nota una perdita di spazio intorno ai bordi. Per questo motivo il team di Mashable consiglia di racchiudere le informazioni utili (magari il logo, il titolo o il pay off del tuo business) all’interno di 176 px.

La lunghezza, invece, non ha un valore definito e può variare in base alle necessità della tua pagina. Nella Facebook Fan Page di My Social Web ho utilizzato un’immagine lunga, che arriva quasi a toccare il bordo di uno schermo 1280 x 800 px (in quella di Victoria’s Segret Pink addirittura lo supera), ma tieni ben presente che il ridimensionamento a 176px della thumbnail è comunque valido.

Per questo motivo ti conviene concentrare le informazioni più importanti nella parte superiore dell’immagine, sempre all’interno dei 170-176 px.

Ciao! Come ottimizzare l’immagine di una Facebook Fan Page e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.

Vuoi leggere ancora qualcosa?

60 esempi di footer per il tuo blog

Riccardo Esposito — Tue, 29 Dec 2009 22:42:37 +0000

Scommetto che hai già sistemato ogni aspetto del tuo blog. Scommetto che hai perfino steso un’ottima pagina about me, capace di descrivere per filo e per segno il tuo operato, ma ti sei dimenticato del footer.

Questo perchè probabilmente lo reputi un elemento poco importante, destinato a essere ignorato dai tuoi visitatori. Non credo che questa sia la riflessione più saggia, e ti suggerisco di dare uno sguardo a questi 60 esempi di footer creativi per dare nuova linfa vitale al tuo blog:

20 great WordPress Footer Designs for Inspiration
25 Stylish Website Footer Designs
Geek Trends: 15 Footers with great usability

Dopo questa carrellata di capolavori ti è venuta una voglia matta di ripensare totalmente il tuo footer? Come darti torto! Se hai un blog WordPress e non sai dove mettere le mani ti consiglio di dare uno sguardo a questa ottima guida! Help Design, invece, ti spiega con particolare precisione come inserire nel footer i widget che solitamente usi nella sidebar.

Fonte Immagine

Ciao! 60 esempi di footer per il tuo blog e' un post scritto da Riccardo Esposito, signore e padrone di My Social Web, che ti consiglia di dare uno sguardo anche alle Guide per Blogger.