• Creative bits – Cool business card designs: part 1 – part 2
• DzineBlog – Cool Business Cards You Should’ve Seen: part 1 – part 2 – part 3
• CrazyLeaf Design BLog – 35 cool and inspirational business card designs
• Ago Design -More Cool Business Cards – Business Card Layout & Design: part 1 – part 2 – part 3
• Freelance Switch – 18 Smokin’ Hot Business Card Designs
• Dailypoetic’s Flickr photostream – Business cards
• FrancescoMugnai – 70 new amazing business cards

Alcune immagini si ripetono nelle varie liste elencate, ma gli spunti rimangono davvero tanti.

• semplicità, intesa come assenza di elementi inutili o ridondanti al fine della comunicazione: il contenuto assume un ruolo centrale, e tutto quello che è superfluo o ridondante viene eliminato;
• uso degli elementi tipografici, per guidare la fruizione dell’utente: margini, allineamento e gerarchia visiva per strutturare il messaggio. I font e le parti testuali assumono interesse visivo, e aiutano l’utente nell’individuare le parti importanti del contenuto;
• utilizzo dello spazio bianco (whitespace), consentendo di separare gli elementi e di focalizzare l’attenzione dell’utente su determinate aree della pagina. Questo è ancora più vero, se agli elementi vengono applicati altri principi di design, quali la proporzione, l’enfasi in modo da definire dei chiari e facilmente distinguinguibili percorsi visivi.
• uso essenziale della grafica: è infatti sbagliato considerare minimalisti solo i siti in cui è stata elimanata del tutto la componente grafica o in bianco e nero. L’importatnte è che questa non distragga dal messaggio centrale che si desidera proporre, ma che aiuti la navigazione dell’utente tra i contenuti del sito.

Una giusta alchimia di questi elementi creerà dei vantaggi evidenti e facilmente percepibili, quali un’immediata individuazione delle parti significanti della pagina, vale a dire una maggiore usabilità ed efficacia del messaggio, oltre che un appeal visivo moderno, pulito e di sicuro impatto.
Come si può notare da questa galleria proposta, il minimalismo è uno stile che si adatta a qualsiasi tipologia di sito: dal blog al portfolio, dal sito informativo a quello pubblicitario, proprio perché orientato a dare importanza al nucleo della comunicazione: il contenuto.

Seguiranno altri articoli dedicati al Minimalismo, in cui presenteremo le varie applicazione dei principi elencati sopra. Saremmo tuttavia felici se ci indicaste risorse che secondo voi meritano di essere segnalate. Grazie in anticipo.

1. 5thirtyone
   
2. Agenturblog
   
3. Aigany
   
4. Alltop
   
5. Andy Rutledge
   
6. Astheria
   
7. Authentic Style
   
8. Ben Hulse
   
9. Carbon Silk
   
10. Cherry Bloom
    
11. Dache
    
12. Daniel Scrivner
    
13. Daninko
    
14. Darrenalawi
    
15. Derek Punsalan
    
16. Designed by Anderson
    
17. Designing the news
    
18. Design TokyoCube
    
19. Dotkraft
    
20. EightFace
    

L’idea di adottare questo tipo di spazi pubblicitari non è nata da noi. Credo che voi tutti ricordiate il grande successo ottenuto da quella che fu definita “The Million Dollar Homapage“. Una semplice pagina html ricoperta da centinaia di mini banner che hanno permesso al geniale ideatore di diventare milionario.

Molti siti internet utilizzano oggi lo stesso principio per guadagnare attraverso le proprie pagine. Tra i molti esempi possiamo sicuramente citare CSS Remix e Italian Web Gallery.

Nella maggior parte dei casi, passando il cursore del mouse sul mini banner, compare una tendina (tooltip) che offre alcune informazioni aggiuntive sul banner stesso come, ad esempio, il nome, la tagline o semplicemente un link al sito che ha pagato per mettere l’inserzione.

Questa interessante funzionalità viene spesso realizzata con l’utilizzo di codice JavaScript. Ma cosa succede se l’utente naviga le pagine del sito con i JavaScript disabilitati? La risposta è molto semplice. L’utente non vedrà la tendina con le informazioni aggiuntive. Questo significa che parte del contenuto non sarà accessibile.

Interessati ad utilizzare questo sistema su CSSGlance, abbiamo cercato di capire come fosse possibile realizzare lo stesso piacevole effetto di hover, garantendo comunque l’accessibilità dei contenuti della pagina. La soluzione è molto semplice: occorre utilizzare i CSS. E’, infatti, possibile creare tooltip, sul modello di quelli realizzati con l’impiego del JavaScript, interamente con l’impiego delle tecniche CSS. Questo significa produrre una funzionalità semplice, utile e soprattutto accessibile, in quanto funziona perfettametne anche se l’utente naviga con i browser disattivati.

Ecco quello che vogliamo ottenere e, adesso, vediamo come è possibile raggiungere questo risultato, analizzando il codice utilizzato nei dettagli.

Cio’ che ci serve è una semplice lista di link. Ecco come si presenta il codice XHTML di base:

<ul>
<li><a href="http://www.google.com"> <span>Google.com</span></a></li>
<li><a href="http://www.yahoo.com"> <span>Yahoo.com</span></a></li>
<li><a href="http://www.cssbeauty.com"> <span>CSSBeauty.com</span></a></li>
...
</ul>

A questo punto non ci resta che far flottare gli elementi <li> al fine di posizionarli l’uno accanto all’altro. Occorre poi impostare un posizionamento relativo per i link, in modo da permettere agli span contenuti in essi di posizionarsi in maniera assoluta rispetto al link padre. Gli span devono avere impostata anche la proprietà display:none, che viene variata in display:block ogni qual volta il puntatore del mouse passa sopra il mini banner. Potrete facilmente risolvere i bug di ie utilizzando la proprietà z-index per il tootip e per gli altri contenitori del vostro layout.

Quello che segue è il codice CSS di base:

#miniadv ul{margin:0;padding:0;list-style:none}
#miniadv ul li {float:left;margin:0 2px 2px 0}
#miniadv a{float:left;position:relative;z-index:5; width:18px;height:18px}
#miniadv a:hover{z-index:10}
#miniadv a span{display:none}
#miniadv a:hover span {display:block;position:absolute; bottom:2em;right:2em;width:135px}

Ecco il risultato finale! Potete scaricare l’esempio (zip-9KB) e utilizzarlo liberamente nei vostri siti internet. Vi preghiamo di inserire un riferimento e un link a CSSGlance nella pagina in cui userete questa tecnica.

Concordo con l’autore quando afferma che il rischio è spesso quello di confondere il mezzo con il fine dell’accessibilità, ovvero applicare meccanicamente tecniche che riteniamo valide senza interrogarsi sulla loro reale utilità. La guida di Diodati vuole dunque essere prima di tutto un tentativo di dar voce alle richieste degli utenti beneficiari dell’accessibilità: intende fornire cioè agli sviluppatori gli strumenti di base per cercare di rendere semplice il complesso, con la consapevolezza che l’accessibilità universale non esiste e non può esistere.

Successivamente all’uscita nelle librerie, Diodati si impegnerà in un nuovo progetto, quello di rendere i contenuti del libro accessibili e consultabili liberamente sul web. Ulteriore sforzo concreto da parte di Diodati per aiutare chi si occupa di web ad affrontare la sfida con i giusti mezzi.

Se conoscete l’inglese, vi invitiamo a sottoscrivere anche il feed alle notizie in lingua inglese, perchè non tutte le notizie in lingua inglese vengono pubblicate anche il italiano.

Vi preghiamo pertanto di aggiornare i vostri feed RSS utilizzando i link che seguono:

CssGlance Gallery
http://feeds.feedburner.com/cssglance/gallery

CssGlance News (In lingua inglese)
http://feeds.feedburner.com/cssglance/news

CssGlance Notizie (In lingua italiana)
http://feeds.feedburner.com/cssglance/notizie

Grazie per la collaborazione
Lo Staff di CssGlance

Molto più recente è invece l’idea di adottare questa tecnica anche nel design dei siti Web, al fine di costruire layout equilibrati, armonici e soprattutto di facile lettura.

Per tutti coloro che sono interessati ad approfondire l’utilizzo delle griglie nel design di siti Web, vi segnaliamo delle slide molto interessanti e ben fatte sul tema, Grids are Good (right?), rese gentilmente disponibili dagli autori Mark Boulton, della Mark Boulton Design, e Khoi Vinh, Design Director di The New York Times.

Nella presentazione i due autori introducono il tema in via teorica, proseguendo con un esempio pratico ben illustrato di redesign di un famoso sito internet, www.yahoo.com, attraverso l’impiego delle griglie.

Il risultato è ottimo e offre numerosi spunti che possono tornare utili nella realizzazione di design ex-novo o di redesign basati sull’impiego di questa tecnica.

Online è disponibile anche il podcast della presentazione delle slide, tenutasi durante la conferenza ad Austin in Texas del 9-18 Marzo 2007, organizzata da South by Southwest Conferences and Festivals, ovviamente in lingua inglese.

Vi auguriamo una buona lettura e un buon ascolto. Renderemo presto disponibili altre utili risorse per gli appassionati delle griglie e del design armonico dei siti Web.

CSSGlance vuole offrire a tutti i web designer italiani esempi di utilizzo creativo ed innovativo degli standard web, in modo da contribuire, anche se solo in piccola parte, ad una progressiva riduzione del pesante ritardo che ci separa da altre realtà presenti nel panorama internazionale.

Allo stesso tempo vogliamo portare sul palcoscenico internazionale le migliori creazioni del “Made in Italy“, in quanto, esistono ottimi esempi di buon design che è giusto proporre all’attenzione di un vasto pubblico.

Oltre al rinnovamento della grafica e all’inserimento della sezione dedicata agli articoli in lingua italiana, abbiamo migliorato le modalità di ricerca dei siti attraverso le categorie, saparato i feed degli articoli da quelli della gallery e da oggi troverete nella sezione “About” i nostri profili.

Ne approfittiamo per ringraziare tutti per il grande supporto che state dando alla nostra iniziativa parlando di CSSGlance sui vostri blog, inserendo link al nostro sito e inviandoci i vostri siti.

Ci piacerebbe avere un vostro parere sul nuovo CSSGlance: commenti, critiche, suggerimenti e qualunque cosa vi passi per la testa navigando nel nostro sito. Potete lasciare le vostre osservazioni commentando questo post!