giovedì 18 agosto 2011

Fuzzimo: risorse gratuite per designers

0 commenti
Vi segnalo Fuzzimo, dove potrete trovare alcune interessanti risorse (immagini, textures, pattern, vettoriali, e altro) per web designer.
Fuzzimo è un sito sulle arti visive. L'autore, Antoniu, ama creare risorse e condividerle con la comunità dei web designer. Buon divertimento e buon lavoro grazie ad Antoniu e al suo sito!
Leggi tutto...

40 ottimi siti / portfolio di fotografi

0 commenti
Se dovete realizzare il design di un sito per un fotografo, come è successo a me, vi consiglio di dare un'occhiata a questo interessante articolo di Bill Jones per thePhotoArgus: http://www.thephotoargus.com/inspiration/40-great-photographer-portfolio-websites-for-inspiration/

L'articolo presenta ben 40 siti di fotografi tra quelli con un design più moderno e accattivante. Se vi serve un po' di ispirazione, è quello che fa per voi!
Leggi tutto...

Pageflip, pdf sfogliabili, cataloghi sfogliabili online: alcune soluzioni

1 commenti
Ho notato come sia sempre più diffuso, e come gli stessi clienti richiedano sempre più di frequente, l'uso di cataloghi sfogliabili online, il cosiddetto pageflip (dal nome del primo strumento inventato allo scopo).

Esistono diversi strumenti per realizzare questo effetto, vi elenco quelli da me conosciuti, ma vi prego di segnalarmi le vostre soluzioni!

Pageflip
Il primo e originale, arrivato ormai alla versione 4. Il nuovo Pageflip è scritto interamente in AS3, supporta tutti i file immagine e gli SWF, animazioni frame by frame o animazioni realizzate via codice, anche con interazione con gli eventi del Page Flip. Possibilità di popup invisibili o visibili al mouseover. Sfondo personalizzato con immagine, colori e suoni per ogni pagina. Trasparenza a più livelli, riproduzione video.
L'ultima versione è a pagamento, con costi diversi a seconda dell'uso personale o multi sito.
La versione 2 è gratuita, ma per il suo utilizzo è richiesta una conoscenza perlomeno base di Adobe Flash e il software stesso: http://pageflip.hu/pageflip2/index.php


FlashPageFlip.com
Flash Page Flip (FPF) è un oggetto SWF pronto all'uso. Supporta file SWF e JPG. Non è un componente flash. Non è necessario usare Flash per creare il tuo libro sfogliabile con FPF, è sufficiente creare i JPG delle pagine e aggiornare l'XML (è sufficiente un programma di grafica e il blocco note di windows).
La versione Free di Flash Page Flip non dispone di funzioni avanzata ma ha alcune caratteristiche interessanti come il ridimensionamento e la navigazione.

Megazine 3 Pageflip
Megazine 3 è un pageflip realizzato in Flash che ricrea sullo schermo l'aspetto di un vero libro o rivista di carta. Ed è molto di più... può contenere oggetti multimediali come video e audio, ma anche moduli interattivi, giochi e quiz. Magazine 3 offre una flessibilità e una potenzialità uniche, grazie al suo concept di completa apertura e configurazione estesa.
Megazine 3 è gratuito fino a 50 pagine ma senza logo personalizzato (per scuole e università è gratuito senza limiti). La versione 1.x è completamente gratuita ma non più aggiornata e priva di supporto.

FlippingBook
FlippingBook HTML Edition è un set di files javascript e SWF collegati ad una pagina HTML. Quando la pagina viene caricata, il codice crea automaticamente il libro sfogliabile con le seguenti caratteristiche: zoom, stampa, salva, contenuti, navigazione.

Altri servizi:
FlipViewer
FlipBuilder
FlipCreator
Issuu
Leggi tutto...

Il wireframe: un utile strumento per progettare un sito web

0 commenti
Un wireframe è una bozza generale della struttura di un sito (e a volte delle relazioni tra le pagine dello stesso) che non tiene conto degli aspetti grafici ma si limita a delineare le aree e gli elementi principali del futuro sito.

Il wireframe è uno strumento che ci permette di:
1) semplificare strutture all'apparenza complesse
2) collocare correttamente gli elementi
3) risparmiare tempo nel confronto con il cliente e con i collaboratori

Ulteriori vantaggi che possono venire dall'uso dei wireframe sono:

  • flessibilità: con i wireframe è semplice testare diverse soluzioni di progettazione
  • pianificazione: un prototipo è la base migliore da cui partire per integrare miglioramenti e perfezionamenti
  • usabilità: il wireframe ci permette di capire quale sia la soluzione migliore in termini di navigabilità
Come si realizza un wireframe?
Ci sono tre diversi percorsi possibili:
Vi segnalo anche questo sito interamente dedicato all'argomento wireframes: http://wireframes.linowski.ca/
Leggi tutto...

55 esempi di links ai social media meravigliosamente integrati nel web design

0 commenti
Oggi vi riporto questo interessante articolo di webdesignledger.com: http://webdesignledger.com/inspiration/55-examples-of-beautifully-integrated-social-media-links-in-web-design

Credo che ormai tutti abbiano capito l'importanza dei social media, e del loro inserimento nel web design. Per far sì che l'attenzione dei vostri visitatori cada sui vostri links social, devi usare sia la strategia sia il buon gusto. Per disegnare un link social che sia un buon call-to-action, devi valutare la sua posizione, il suo colore, l'approccio, lo stile, la dimensione, tutto. Devi anche tenere a mente che devi puntare l'attenzione dei visitatori sul lato social del tuo sito ma senza distrarli da quello che è importante, come il contenuto.
Per me, un buon link social è quello che trovi subito, e quando lo trovi, ti piace.

Nell'articolo potete trovare ben 55 esempi di pulsanti social (come facebook, twitter, flickr e molto altro), perfettamente integrati nel web design.

Veramente un ottimo spunto e fonte di ispirazione!
Leggi tutto...

venerdì 12 agosto 2011

BEN, la più vasta raccolta di email newsletter

0 commenti
Quando cerco ispirazione per una nuova newsletter elettronica, mi affido a lui, BEN: Beautiful Email Newsletter.
Oltre a raccogliere un numero consistente di ottimi design di email newsletter, propone anche alcuni articoli e tutorial sull'argomento.

Sarò noiosa, ma anche questo è un sito che vale la pena aggiungere tra i preferiti ;)
Leggi tutto...

Queness: ispirazioni per i vostri design, tutorial e molto altro

0 commenti
Un altro ottimo magazine online, sempre aggiornato e sempre ricco di contenuti interessanti: Queness.
Articoli di ottimo livello, moltissime raccolte per le nostre ispirazioni, tutorial su jQuery e sul web design. Ci sono proprio tutti gli ingredienti per una miscela ad altissima percentuale di interesse!

Da leggere e consultare tutte le settimane!
Leggi tutto...

Pattern Tap, una fantastica fonte di ispirazione per gli elementi dei nostri web design

0 commenti
Come posso fare quel pulsante? Qual è il modo migliore di disegnare quel form per i commenti? Cosa metto come sfondo?
Sono tutte domande comuni per noi web designer. E spesso ci troviamo a girare per gallerie di siti in cerca di ispirazioni per questo o quell'elemento.

Pattern Tap ci viene in aiuto selezionando ed estrapolando per noi i singoli elementi dei migliori web design in circolazione: collezioni di pulsanti, pagine 404, commenti, sfondi, bordi e molto altro: http://patterntap.com/collections/

Un sito da tenere sempre tra i preferiti!
Leggi tutto...

Creare un biglietto da visita con Illustrator: progetto passo a passo

1 commenti
Vi segnalo questo ottimo tutorial di Spoon Graphics che spiega passo a passo come realizzare un bel biglietto da visita con Illustrator. Le spiegazioni sono dettagliate e il risultato professionale: http://www.blog.spoongraphics.co.uk/tutorials/business-card-design-project-walkthrough

Da leggere!
Leggi tutto...

Web Design Ledger, un altro sito da tenere sempre sotto mano

0 commenti
Come Smashing Magazine, anche Web Design Ledger (http://webdesignledger.com/) è uno di quei siti che entra di diritto nella lista dei miei preferiti senza passare dal via.
Aggiornato di frequente, propone articoli ricchi di fonti di ispirazione, risorse gratuite (e altre premium per gli iscritti), tutorial e molto altro.

Un sito da frequentare assiduamente!
Leggi tutto...

Webiconset.com, icone professionali a pagamento e gratuite

0 commenti
Io sono sempre affamata di icone, ne uso molte nei miei design e nelle interfacce del mio CMS.
Tra i preferiti ho ritrovato questo bel sito: Webiconset.com, che propone icone professionali e di qualità, sia a pagamento (ma i costi sono veramente bassi), sia gratuite.

Dateci un'occhiata ;)
Leggi tutto...

40+ Risorse utili per la progettazione di interfacce utente

0 commenti
Un altro interessante articolo da Smashing Magazine: http://www.smashingmagazine.com/2009/06/15/40-helpful-resources-on-user-interface-design-patterns/

Se c'è un comune e ricorrente bisogno di una particolare soluzione, c'è un'alta probabilità che qualcuno abbia - ormai - trovato quella soluzione e abbia fatto il noioso lavoro di cercare e costruire qualcosa allo scopo.
Per lo meno, troverai della documentazione su soluzioni generiche a problemi correlati che ti permetteranno di ottenere informazioni sulle migliori pratiche, le tecniche più efficaci, ed esempi reali delle cose che state creando.
Un design pattern si riferisce ad una soluzione riutilizzabile ed applicabile a problemi reali. Per esempio, la soluzione per navigare un sito è il menu (una lista di links che puntano a sezioni differenti del sito), una soluzione per mostrare contenuti in uno spazio ridotto sono le tabs.
Ci sono molti modi per soddisfare uno specifico requisito - e come designer - la cosa più importante che puoi fare è selezionare l'opzione che riflette meglio le necessità dei tuoi utenti.
In questo articolo, condividiamo con te il meglio del meglio, la crema delle gallerie, pubblicazioni e librerie dedicate alla condivisione di informazioni e all'esplorazione dei concetti relativi ai design pattern per le interfacce utenti. Utilizzate queste fonti per acquistare conoscenze su un particolare problema o per avere ispirazioni e informazioni sulle migliori pratiche, tecniche ed esempi di design di UI esemplari.

Grazie a Pavel Konoplitski e a Smashing Magazine per questa raccolta!
Leggi tutto...

giovedì 11 agosto 2011

Validation, un plugin jQuery per la validazione dei form

0 commenti
Vi avevo già parlato in passato di strumenti javascript per la validazione di form. Vi segnalo oggi questo plugin in jQuery di Jörn Zaefferer (non un programmatore qualunque, bensì un membro del team jQuery, nonchè capo sviluppatore nel team della jQuery UI e maintainer della QUnit): Validation.

Il plugin rende possibile la validazione lato client di form in modo semplice, offrendo molte opzioni di personalizzazione.

Demo, download e documentazione sul sito ufficiale: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Leggi tutto...

35 + 25 splendidi esempi di effetti di luce nel web design

0 commenti
Vi propongo anche oggi un ottimo articolo di Smashing Magazine: http://www.smashingmagazine.com/2009/05/07/30-examples-of-masterful-lighting-effects-in-web-design/ (ovvero, 35 esempi di effetti di luce nel web design).

Come e perchè usare effetti di illuminazione in un web design?
Usare una sorgente di luce nel modo corretto può dare senso di profondità e eleganza ad un web design. Un effetto di luce intenso crea forti contrasti tra le aree illuminate e le zone in ombra nel design, dando più realismo agli elementi. Altri siti invece utilizzano le sorgenti di luce per illuminare aree particolari del sito, per attrarre subito lo sguardo.
Nell'articolo molti esempi e considerazioni.

Anche su Design Shard trovate una collezione di 25 esempi di effetti di luce (e spazio) nel web design: http://www.designshard.com/inspiration/25-examples-of-light-and-space-effects-in-web-design/
Leggi tutto...

ImageFlow, una galleria di immagini con slider

0 commenti
ImageFlow è una galleria di immagini che riproduce un interessante effetto già visto in Flash. Una sorta di carosello di immagini, azionato spostando uno slider o con la rotella del mouse.
Completamente in javascript, non si appoggia ad alcun framework.

Demo, download e documentazione sul sito ufficiale: http://imageflow.finnrudolph.de/

Da provare.
Leggi tutto...

Color Blender, utile tool online per creare palette di colori

0 commenti
Supponiamo che dobbiate utilizzare un colore predominante per un design. E supponiamo anche che dobbiate usare qualche altro colore, a vostra scelta, ma che dopo svariate prove non siate riusciti a comporre una palette colori ben armonizzata.
Niente paura, vi viene in aiuto Color Blender, questo splendido strumento online che, sulla base del colore impostato, vi suggerirà automaticamente altri 5 colori corrispondentihttp://www.colorblender.com/

Sicuramente da provare!
Leggi tutto...

Preload in Flash che segue il mouse, un tutorial di Juliusdesign

0 commenti
Anche se Flash sta perdendo rapidamente terreno, vi segnalo questo interessante tutorial di Julius Design, che spiega come realizzare un preload in flash con percentuale progressiva che segue il mouse.
Il codice è molto semplice e ben commentato: http://www.juliusdesign.net/creare-un-preload-flash-che-segue-il-mouse/


Leggi tutto...

Realizzare gocce d'acqua realistiche in 5 minuti con Photoshop

0 commenti
Può capitare di vedere, in questi giorni estivi, parecchie pagine pubblicitarie dedicate a bibite fresche coperte di gocce d'acqua. Ma potremmo anche voler riprodurre le gocce lasciate dalla pioggia su un vetro, o semplicemente una superficie bagnata.
Ma come fare a riprodurre con photoshop delle gocce d'acqua realistiche?
E' molto semplice, e ce lo spiega il mitico Abduzeedo in questo semplice video tutorial: http://abduzeedo.com/water-drops-photoshop-5-minutes. E' possibile anche scaricare il PSD del tutorial.

Da tenere a mente!
Leggi tutto...

Effetto Foto Vecchio Stile con Photoshop

0 commenti
Il tutorial che vi propongo oggi, di photoshopstar.com, vi mostra come creare un effetto foto "vecchio stile" con un tocco di originalità: http://www.photoshopstar.com/photo-effects/old-style-photo-effect/

Partendo da una foto di un vecchio magazzino / deposito e lavorando con le regolazioni, sarà facile dare una luce molto particolare all'immagine.

Buon lavoro!
Leggi tutto...

Ispirazioni per il nostro ecommerce

0 commenti
Dovete realizzare un layout per un ecommerce e non avete la più pallida idea di dove partire? Esistono due magnifiche raccolte di ecommerce design che potete consultare per trarre spunti e ispirazioni: http://cartcraze.com/http://ecommercegallery.com/

Buon lavoro!
Leggi tutto...

martedì 9 agosto 2011

Effetto Grunge su una foto con Photoshop

0 commenti
Supponiamo di avere una foto che vorremmo far sembrare più sporca, ma al tempo stesso anche più definita e bella da vedere.
Nel tutorial, realizzato da tutorial9, Adeolu ci spiega come possiamo realizzare questo effetto senza danneggiare la foto originale: http://www.tutorial9.net/tutorials/photoshop-tutorials/easy-photo-grunge-effect/

Da leggere e riutilizzare!
Leggi tutto...

Greenpit: un altro sito indispensabile per designers e developers

0 commenti
Un altro bel sito da tenere sempre sotto controllo è GreenPit, risorse web per designers e developers.
All'interno potrete trovare articoli e recensioni su scripts javascript, xhtml & css, e molto altro.

Da leggere!
Leggi tutto...

Taste of Ink: fonte di ispirazione per i nostri biglietti da visita

0 commenti
Volete realizzare da soli i vostri biglietti da visita ma vi manca un po' di ispirazione? Oppure preferite farveli realizzare da chi ha molta più esperienza?
In entrambi i casi vi consiglio un giro su http://tasteofink.com/, dove non solo potete acquistare i template disponibili, ma potete anche semplicemente trarne ispirazione per i vostri design.


Leggi tutto...

Loop gratuiti da usare nelle nostre animazioni in flash

0 commenti
Vi segnalo due siti che avevo inserito tra i preferiti, e che contengono alcuni brani adatti alla ripetizione in loop, da usare come musica di sottofondo nelle nostre animazioni in flash o nei nostri video o ancora nelle nostre presentazioni in powerpoint.

http://free-loops.com/
http://www.templateswise.com/Free_Music_Loops/


Leggi tutto...

Cinque stili, un layout: un ottimo articolo di Psdtuts+

0 commenti
L'articolo è datato 9 dicembre 2008 ma è decisamente attuale, perchè ci consente di scoprire in poche righe quali sono i tratti distintivi di alcuni degli stili più utilizzati - ancora oggi - nel web design.
L'autore ci spiega come sia possibile, utilizzando lo stesso layout, personalizzarlo in 5 modi diversi: grungy / textured, minimale, metallico, astratto, web 2.0.

Vediamo insieme le caratteristiche salienti di questi 5 stili, anche se vi rimando all'articolo originale per immagini e spiegazioni dettagliate: http://psd.tutsplus.com/tutorials/interface-tutorials/five-looks-one-layout-how-to-develop-a-library-of-web-design-styles-at-your-fingertips/

STILE 1 - GRUNGY / TEXTURED

  • uso di texture negli sfondi
  • elementi distorti e "fuori posto"
  • elementi disegnati a mano
  • elementi "incollati" come in un collage
  • schema di colori "naturale": marroni, rossi, verdi, ocra
  • uso di caratteri serif
STILE 2 - MINIMALE
  • molto spazio vuoto
  • tipografia semplice, con caratteri sans - serif, spesso di grandi dimensioni
  • allineamenti precisi
  • divisori minimali: linee nette alte 1 pixel
  • schema di colori basilare: bianco, nero e scala di grigi
STILE 3 - METALLICO


  • uso di sfumature metalliche
  • uso di grigi
  • divisori con effetto linea incassata
  • bordi chiari da 1 pixel per sottolineare l'effetto metallico
  • elementi incassati
  • uso di ombre
STILE 4 - ASTRATTO
  • font minimali ed eleganti
  • grandi immagini come sfondo
  • aree trasparenti o semitrasparenti
  • testo direttamente nella pagina senza elementi contenitori
  • uso di colori scuri con punti di luce
STILE 5 - WEB 2.0
  • uso di sfumature in colori pastello come sfondo
  • font semplici ma corposi, con leggera sfumatura
  • uso di colori brillanti
  • uso di minuscole
  • uso di icone o illustrazioni
  • tutto è grande, semplice e amichevole
Leggi tutto...

25 menu a tendina / dropdown a più livelli

1 commenti
Sempre da Noupe vi segnalo questo articolo, che raccoglie 25 menu dropdown (orizzontali e verticali) multilivello, realizzati usando Javascript e CSS: http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html
L'articolo è datato e la grafica di alcune soluzioni lascia molto a desiderare, però possiamo riutilizzare il codice degli esempi proposti e migliorarlo a nostro piacimento ;)

Leggi tutto...

Un pannello di login a scomparsa con jQuery

2 commenti
 Vorreste creare un form di login / registrazione che sia sempre ben in vista ma che non vada ad occupare troppo spazio nella vostra pagina web? La soluzione potrebbe essere quella di creare un pannello a scomparsa, di cui sia visibile solo una linguetta. Cliccando sulla linguetta, si aprirà il pannello per intero. Il tutto grazie a jQuery.
Questa soluzione si può applicare anche ad altri elementi della pagina, come ad esempio un header ingombrante o un form di contatto.
Vi rimando all'articolo di Web Kreation per il tutorial completo, la demo e il codice scaricabile: http://web-kreation.com/all/nice-clean-sliding-login-panel-built-with-jquery/

Leggi tutto...

Premium Pixels: risorse e tutorial gratuiti

0 commenti
Ecco un'altra piccola fonte miracolosa per noi designer: Premium Pixels.
Premium Pixels è una raccolta di risorse e tutorial gratuiti per designer creati da Orman Clark.
Tutte le risorse sono gratuite, tranne piccole eccezioni. Se volete supportare l'autore, prendete in considerazione l'idea di acquistare uno dei suoi temi per Wordpress (molto belli, tra l'altro).

Da inserire tra i preferiti!
Leggi tutto...

lunedì 8 agosto 2011

Noupe, il lato curioso di Smashing Magazine

0 commenti
Tra i tanti siti da tenere d'occhio in quanto continua fonte di aggiornamento e ispirazione, vi segnalo Noupe, il cosiddetto "Lato curioso di Smashing Magazine".
Al suo interno troverete Tutorial, Ispirazioni, Gallerie, Foto e molto altro.

Da aggiungere ai preferiti!
Leggi tutto...

10 passi verso il perfetto portfolio online

0 commenti
Ci sono molti motivi per avere un portfolio personale online.
Se sei un freelancer, avrai bisogno di mostrare il tuo lavoro e permettere alle persone di contattarti. Se sei uno studente (o disoccupato), avrai bisogno di mostrare ai possibili datori di lavoro quanto sei bravo e cosa sai fare, così che possano assumerti. Se fai parte di uno studio, potresti usarlo per bloggare sulla tua vita da designer, mostrare alla gente cosa stai facendo e costruire la tua presenza online.

Cosa rende "buono" un portfolio online?

  1. Logo
    - in alto a sinistra
    - preferibilmente con il tuo nome
    - link alla homepage
  2. Tagline / Slogan
    - chi sei, cosa fai, da dove viene, scopo del portfolio: il tutto in poche (2-3) righe
  3. Porfolio
    - immagini grandi e di buona qualità
    - link alla versione online dei vostri lavori (se su web)
    - breve descrizione del progetto, incluse le abilità utilizzate per completare il progetto
  4. Servizi
    - lista dettagliata e specifica dei servizi offerti e dei settori interessati
  5. Profilo
    - descriviti brevemente: studi, esperienze, lavori precedenti, foto, premi e riconoscimenti
  6. Contatti
    - informazioni di contatto sempre chiare e facilmente accessibili
    - preferibile form mail
    - indicare anche eventuali metodi di contatto non convenzionali (facebook, twitter, linkedin, skype, ecc)
  7. Blog
    - parla di ciò che fai, dimostra che sai di cosa parli
    - prevedi un RSS feed per le iscrizioni
    - permetti commenti e feedback senza necessità di registrazione o antispam
  8. Call to action
    - ogni pagina deve contenere un pulsante che conduca a compiere l'azione desiderata (contattami, vedi il portfolio, chiedi un preventivo, ecc)
  9. Be Social
    - indica chiaramente i tuoi riferimenti ai social network, in modo che i tuoi possibili contatti possano seguirti ovunque
  10. Linguaggio e comunicazione
    - sii amichevole e personale, ma chiaro e preciso
    - non barare, non cercare di passare per quello che non sei
Maggiori consigli, informazioni ed esempi nell'articolo originale su Smashing Magazine: http://www.smashingmagazine.com/2009/02/26/10-steps-to-the-perfect-portfolio-website/
Leggi tutto...

Creare grafici dinamicamente: XML/SWF Charts e Open Flash Chart

1 commenti
Vi sarà forse capitato, nei progetti più importanti, di dover realizzare un grafico dinamico, ovvero basato su dati contenuti in un db / XML e costantemente aggiornati (come ad esempio un grafico con le statistiche di vendita, o con gli accessi al sito).
Per realizzare facilmente, e devo dire anche elegantemente, un grafico in questo modo, ci vengono in aiuto due strumenti: XML/SWF Charts e Open Flash Chart


XML/SWF Charts è un semplice ma potente strumento per creare grafici a partire da un file di dati XML. E' necessario generare un file XML per descrivere il grafico, e quindi passarlo allo strumento per creare il grafico. L'XML può essere creato manualmente o dinamicamente tramite un linguaggio server-side come PHP, ASP, ecc.
XML/SWF Charts si avvale delle migliori caratteristiche dei file XML e SWF: XML permette una  generazione flessibile dei dati, SWF fornisce la miglior resa grafica.

Open Flash Chart è uno strumento per creare al volo un grafico a partire da una sorgente di dati, che può essere costituita da un file .txt ma anche un file .php, Perl, Python, ecc...
Per creare un grafico semplice sarebbe sufficiente creare un file data.txt e puntare Open Flash Chart a questo file. Ma se quello che vogliamo veramente è un grafico dinamico con dati dinamici, tutto quello che dobbiamo fare è puntare Open Flash Chart a una pagina .php che estrapoli i dati dal database.


Leggi tutto...

Creare un cd con autorun

0 commenti
Volete creare un CD / DVD che "parta" appena viene inserito nel lettore? Un CD / DVD autoavviante / autorun?
Supponiamo che abbiate già creato il vostro eseguibile .exe (se non lo avete, dovete crearlo) e che abbiate anche un'icona .ico da associare al vostro CD.
Semplicemente create con il blocco note di windows un file con il seguente contenuto:


[autorun]
OPEN=mioeseguibile.exe
ICON=miaicona.ico
LABEL=nome che voglio che appaia come etichetta del CD / DVD

e salvatelo con il nome autorun.inf (senza l'estensione .txt).

Copiate questo file, eseguibile, icona ed eventuali altri files richiamati dall'eseguibile nel vostro CD e masterizzate. Fatto!
Leggi tutto...

Uso delle icone nel web design

0 commenti
Utilizzare correttamente un elemento grafico all'interno di un web design non è mai banale e scontato. Sì, perchè può succedere che l'elemento sia bello, accattivante, ma che non abbia una sua collocazione sensata all'interno del nostro layout. Uno di questi sono le icone.
Perchè usare le icone? Quando un visitatore entra nella nostra pagina, la prima cosa che fa è dare un'occhiata veloce al contenuto, alla ricerca di qualcosa che catturi la sua attenzione. Le icone sono un modo semplice ed efficace per raggiungere questo obiettivo.

Come usare le icone

  1. Per rendere più efficace una lista di caratteristiche e servizi
  2. Per attirare l'attenzione verso delle novità
  3. Aumentare la visibilità di titoli
  4. Aumentare l'accessibilità di testi molto lunghi, suddividendoli in paragrafi
  5. Punto di separazione tra differenti sezioni di testo
Vi consiglio la lettura di questo articolo di Smashing Magazine http://www.smashingmagazine.com/2009/03/03/how-to-use-icons-to-support-content-in-web-design/ per maggiori spunti ed esempi!
Leggi tutto...

Fantastici template per Joomla (a pagamento)

0 commenti
Rocket Theme propone ogni mese un nuovo meraviglioso template per Joomla, Wordpress, Drupal, phpBB3, Magento. Ma anche supponendo che voi non usiate Joomla, Wordpress e gli altri CMS, o che non siate interessati all'acquisto di un template, vi consiglio di dare un'occhiata a questi template perchè possono essere un ottimo spunto per i vostri design!
Senza tralasciare il fatto che ogni tanto Rocket Theme rilascia un template free, in via del tutto gratuita, come ad esempio Grunge, Quasar, e molti altri.
Leggi tutto...

Utilizzare le label come valore del campo di testo in un form con jQuery

0 commenti
Spesso disegnando un sito capita di avere uno spazio ridotto per mettere e visualizzare tutti gli elementi di un form.
La soluzione più ovvia è quella di eliminare le labels e mettere solo i campi di testo, ma poi gli utenti come capiranno cosa va inserito in quel campo?

Una soluzione sarebbe utilizzare l'attributo "value" come spiegazione, ad esempio scrivendo qualcosa come "Inserisci qui la tua email". Ma non si tratta di una soluzione ottimale dal punto di vista dei web standard.

CSS Globe quindi ci dà una grossa mano con questo tutorial Using Form Labels As Text Field Values, in cui ci spiega come, utilizzando alcune semplici istruzioni in jQuery, sia possibile nascondere le labels e visualizzarne il contenuto come valore predefinito del campo di testo.
Come si vedrà dai commenti, lo script offre spunti per miglioramenti e maggiori funzionalità, ma è comunque un buon punto di partenza per la soluzione del problema.
Leggi tutto...

Templates, grafica, tutorial e altre risorse per il tuo blog

1 commenti
CreateBlog è un ottima risorsa per noi blogger. Sono presenti parecchi layouts divisi per piattaforma di blogging, grafica di uso comune (avatar, sfondi, banner, ecc), scripts, tutorial e molto altro ancora.

Un sito che merita una visita!
Leggi tutto...

Open Designs, splendidi template gratuiti per il tuo sito

0 commenti
Di solito si è propensi a pensare che le cose gratuite siano di bassa qualità. Questo è vero in una buona parte dei casi, ma sembra proprio che Open Design sia l'eccezione che conferma la regola.
Open Designs è una community dove gli utenti, i membri e i designers possono condividere i loro web design e templates gratuiti, discutere di web design e promuovere i propri servizi. Il sito infatti non si occupa solo di catalogare e diffondere degli ottimi templates gratuiti, ma comprende anche un blog e alcuni forum per addetti al settore.
Chiaramente i template presenti sono da valutare caso per caso, in quanto ce ne sono di ottimi (ad esempio http://www.opendesigns.org/design/celestial/) e di meno buoni. Si tratta comunque sempre di un notevole servizio per i programmatori sprovvisti di capacità grafica, o per i web designer con budget ridotto!
Leggi tutto...

Splendide gallerie fotografiche in javascript

0 commenti
Vi sarà spesso capitato di dover inserire una galleria di immagini in un sito web. E quale soluzione migliore e più veloce di una galleria realizzata in javascript? E se oltre ad essere semplice e veloce, fosse anche graficamente molto accattivante?

Vi segnalo di seguito alcune delle migliori gallerie di immagini in javascript attualmente disponibili:
  1. GALLERIA (http://galleria.aino.se/)
    Galleria è una galleria di immagini che si appoggia a jQuery. Aspira a semplificare il processo di creazione di gallerie di immagini professionali per il web e dispositivi mobili. E' gratuita senza restrizioni, permette il ridimensionamento e la creazione di miniature "al volo", è integrabile con Flickr e Picasa, prevede diversi temi grafici.
    Veramente bella ed elegante, con molte funzioni (lista miniature, autoplay, zoom, ecc).
  2. (E)2 PHOTO GALLERY (http://www.e2interactive.com/e2_photo_gallery/)
    (E)2 Photo gallery è una galleria opensource realizzata con Mootools. La galleria è realizzata in modo da pescare automaticamente le immagini da una cartella indicata, il tutto per semplificare al massimo l'installazione e la gestione.
    Prevede 4 design, la visualizzazione delle miniature, l'individuazione automatica delle foto, un sistema di upload, la lettura dei Photo Meta Data, e molto altro.
  3. MINISHOWCASE (http://minishowcase.net/)
    Minishowcase è un piccola e semplice galleria online in php e javascript, che consente di visualizzare online le proprie immagini in modo semplice, senza database o conoscenza di codice, nel giro di pochi minuti.
  4. AJAX IMAGE GALLERY POWERED BY SLIDEFLOW (http://mediaeventservices.com/en/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/)
    La galleria si compone di uno scroller di immagini con effetto Cover Flow, e zoom dell'immagine selezionata.
  5. IMAGO (http://imago.codeboje.de/)
    Questa galleria vuole essere un clone di SimpleViewer, però senza l'uso di Flash. Si basa su Mootools.
  6. MOOFLOW (http://www.outcut.de/MooFlow/)
    Un'altra galleria di immagini basata su Mootools, che richiama fortemente lo slider di iTunes o il cosiddetto Cover Flow. E' dotata di autoresize automatico, autoplay, riflessi realizzati in javascript, e molto altro ancora.
  7. SLIDER GALLERY (http://jqueryfordesigners.com/slider-gallery/)
    Tutorial per realizzare una galleria simile allo showcase di prodotti usato nel sito Apple.
  8. COULOIR JS SLIDESHOW (http://couloir.org/js_slideshow/)
    Questa galleria di foto è una dimostrazione di come si possa ottenere un comportamento simile a Flash con l'uso di Javascript, HTML e CSS. Il codice viene offerto "as-is", senza supporto tecnico.
  9. JONDESIGN'S SMOOTH GALLERY (http://smoothgallery.jondesign.net/)
    Ancora una galleria basata su Mootools, piuttosto diffusa. Leggera ed elegante.
  10. ZENPHOTO (http://www.zenphoto.org/)
    Zen Photo è un sistema CMS per la gestione di immagini, audio e video, con backend per l'amministrazione completa. Il tema è completamente personalizzabile, con la possibilità di installare plugin aggiuntivi e molto altro.
  11. CSS PHOTO SHUFFLER (http://iamacamera.org/sandbox/photoshuffler/)
    Si tratta di un sostituto Javascript + CSS di un classico slideshow realizzato in Flash.

Leggi tutto...

Suoni per le nostre applicazioni

0 commenti
Avete bisogno di un file musicale per la vostra applicazione o per la vostra animazione in flash? Vi segnalo, tra i tanti, The Freesound Project.

The Freesound Project è un database collaborativo di suoni sotto licenza Creative Commons. Freesound si occupa solo di suoni, non di canzoni. Questo è quello che differenzia Freesound da altre splendide librerie come ccMixter.

Nel momento in cui scrivo sono presenti ben 118293 file musicali completamente gratuiti!
Cosa state aspettando? Correte a registrarvi!
Leggi tutto...

domenica 7 agosto 2011

Highslide JS, un altro clone di lightbox senza librerie

0 commenti
Tra i numerosi cloni di Lightbox vi segnalo anche Highslide JS, un visualizzatore di immagini, media e gallerie realizzato in Javascript.
Veloce ed elegante, non si appoggia a librerie come jQuery e Mootools. Il codice viene costantemente aggiornato ed il supporto è sempre attivo.

Da provare!
Leggi tutto...

Menu animati con jQuery

0 commenti
Realizzare un semplice rollover con jQuery è un'operazione veramente semplice ed immediata.
Diventa un po' più complicato nel caso in cui vogliamo ottenere un effetto di rollover "graduale", come nel sito http://dragoninteractive.com/.
Shopdev ci spiega in questo articolo http://www.shopdev.co.uk/blog/animated-menus-using-jquery/ come ottenere lo stesso effetto. La demo è disponibile a questo indirizzo http://www.shopdev.co.uk/blog/menuDemo.html.
Il tutorial è molto semplice, e ci permette di ottenere in pochi minuti l'effetto desiderato.

Da leggere!
Leggi tutto...

Issuu: creare gratuitamente un magazine sfogliabile

0 commenti
Avete presente il pageflip, il famoso sistema che permette di creare, a partire da immagini jpg, un finto libro / rivista sfogliabile semplicemente cliccando con il mouse, oppure prendendo e tirando un lembo della pagina stessa?
Ne esistono diversi, più o meno famosi, più o meno ben fatti. Ma ultimamente sta prendendo piede un servizio che consente di crearlo direttamente online, semplicemente registrandosi. Il suo nome è: ISSUU.
Per provarlo, visitate il sito ufficiale: http://issuu.com/

Perchè usare ISSUU?
Perchè è semplice, veloce, non necessita di conoscenze tecniche.
Perchè il magazine creato viene condiviso immediatamente con migliaia di potenziali lettori.

La versione base di Issuu è completamente gratuita, ma prevede la visualizzazione di annunci pubblicitari. Se volete evitarevi anche questa seccatura, potete sempre prendere in considerazione l'acquisto della versione Issuu Pro. Se siete degli sviluppatori, potreste essere interessati alla versione Issuu Platform.
Leggi tutto...

40 Tutorial per ottenere effetti di luce e astratti con Photoshop

0 commenti
Direttamente da Vandelay Design, altro sito ricchissimo di spunti, ispirazioni, tutorial e risorse gratuite, vi segnalo questo articolo: http://vandelaydesign.com/blog/design/photoshop-lighting-effects/
L'articolo linka a ben 40 diversi tutorial per realizzare fantastici effetti di luce, come raggi, esplosioni, linee, scintille, e chi più ne ha più ne metta!
Leggi tutto...

Effetti di luce avanzati con Photoshop

0 commenti
Vi ho già segnalato psdtuts,  come sito degno di nota, ricco di stupendi tutorial per Photoshop.

Ma oggi in particolare vi voglio segnalare il tutorial: Effetti di luce avanzati, che trovate a questo link http://psd.tutsplus.com/tutorials/tutorials-effects/advanced-glow-effects/

In questo tutorial scoprirete come creare effetti luminosi veramente brillanti usando una combinazione di stili di livello, lo strumento Penna e fusioni di colore. L'effetto finale è piuttosto stupefacente e probabilmente nel mentre avrete imparato qualcosa che non conoscevate.

[edit 12/08/2011]
In aggiunta vi segnalo anche questi 16 video tutorials selezionati da Design Shard: http://www.designshard.com/video-tutorials/16-great-photoshop-light-effect-tutorials/
Leggi tutto...

Controllare se l'IP del vostro server web è bloccato

0 commenti
Avevate un'applicazione che inviava email dal vostro sito web, e non funziona più? Firefox segnala il vostro sito come malevolo?
Una delle possibili cause è l'inserimento dell'IP del vostro server web nelle liste nere dei sistemi antispam.
Per verificare se il vostro indirizzo IP è listato nelle seguenti blocklist di Spamhaus: SBL, XBL and PBL, utilizzate l' IP Address Lookup Tool di Spamhaus, che trovate qui: http://www.spamhaus.org/lookup.lasso. Il sistema vi dirà anche cosa fare nel caso in cui il vostro indirizzo IP sia effettivamente listato.
Leggi tutto...

Un'interessante collezione di pennelli su Abduzeedo

0 commenti
Abduzeedo è un sito che offre innumerevoli motivi per essere visitato.
Propone infatti ottimi articoli con tutorial, ispirazioni, risorsa. In particolare vi consiglio di dare un'occhiata alla sezione dedicata ai pennelli di Photoshop, che potete trovare qui: http://abduzeedo.com/tags/brushes
Leggi tutto...

Realizzare in flash un cubo 3D rotante con immagini

0 commenti
Tempo fa un'agenzia mi aveva interpellato, su richiesta di un cliente, circa la possibilità di creare un cubo rotante tridimensionale, le cui facce fossero composte di immagini a sua scelta.
All'epoca avevo fatto qualche ricerca, e mi ero imbattuta in questo thread, che ho ritrovato oggi tra i preferiti, e che vi ripropongo, qualora qualcuno di voi si trovi con lo stesso problema: http://board.flashkit.com/board/showthread.php?t=681720
Viene riportato completamente il codice necessario alla realizzazione.
Leggi tutto...

Design Reviver: un altro interessante blog per operatori del web e non solo

0 commenti
Sono finita per caso, come sempre alla ricerca di ispirazioni e informazioni, su questo interessante sito: http://designreviver.com/.
Design Reviver si compone principalmente di 4 sezioni:
- Freebies
- Inspiration
- Tutorial
- Answers
In particolare l'ultima sezione ha attirato la mia attenzione, in quanto si tratta di un innovativo e rapido sistema di domanda / risposta su tematiche inerenti il web e il design.

Da aggiungere subito nei preferiti!
Leggi tutto...

venerdì 5 agosto 2011

Un libro per creare facilmente packaging e pubblicità

0 commenti
Voglio consigliare a tutti i grafici che si occupano di packaging e materiale pubblicitario questo interessante libro edito da Pepin Press: FOLDING PATTERNS FOR DISPLAY & PUBLICITY.

Questa l'introduzione in italiano:
Modelli da piegare per esposizione e pubblicità è un manuale d'istruzioni unico nel suo genere che, con le sue centinaia di ingegnosi origami e modelli pronti per l'uso, è uno strumento indispensabile per chiunque sia impegnato nel settore della grafica, del disegno industriale, della pubblicità e della stampa.
I modelli sono tutti disponibili in formato vettoriale EPS sul CD-Rom accluso e possono essere utilizzati liberamente per creare nuovi disegni, essere rimpiccioliti o ingranditi in scala e modificati per adattarli a qualsiasi uso si desideri.



Lo potete trovare anche su Hoepli: http://www.hoepli.it/libro/folding-patterns-for-display--publicity/9789057680403.asp
Leggi tutto...

Texture, una vasta collezione

0 commenti
Capita spesso di visitare siti con splendide texture sullo sfondo: legno carta capelli stoffe tessuti muri superfici metalliche...
Se stavate pensando di realizzare un layout del genere, ma non sapete dove trovare le texture adatte, siete nel posto giusto!

Di seguito un paio di link dove potete trovare tante e ottime texture per i vostri design!
http://beeex.net/freebies/patterns-backgrounds/ultimate-collection-of-free-textures-on-the-web-background-patterns-seamless-tiles-high-resolution
http://www.defcon-x.de/c4d/textures
Leggi tutto...

Ajax: raccolte di soluzioni, applicazioni e tutorial

0 commenti
Vengono impropriamente chiamati Ajax tutti quei plugin che utilizzano librerie famose come jQuery, Mootools, ecc.
In verità solo una piccola parte di questi plugin sfruttano veramente la tecnologia Ajax, Asynchronous JavaScript and XML, ovvero uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente.

Le raccolte che vi propongo quindi sono veramente Ajax solo in parte, per cui passatemi l'uso improprio del termine nel titolo di questo post ;)

Tutorial: http://tutorialblog.org/100-ajax-tutorials-and-resources/
Applicazioni: http://www.designvitality.com/blog/2007/10/43-exceptionally-useful-ajax-applications/
Soluzioni professionali: http://coding.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
Leggi tutto...

Stupende icone gratuite per i nostri design con Dryicons.com

0 commenti
Sul sito Dryicons.com è possibile trovare più di 4000 icone tra gratuite e a pagamento.
In particolare le icone gratuite sono veramente numerose e belle.
Vedere per credere: http://dryicons.com/free-icons/

Io le scaricherei tutte!!! ^_^
Leggi tutto...

Color oro in quadricromia CMYK

1 commenti
Che per ottenere un vero color oro serva il giusto pantone, o un passaggio in macchina con oro colato su una maschera predefinita, non ci piove.
Ma se per caso volete ottenere un finto oro in quadricromia, giusto per dire che ci avete provato, ecco quali sono le coordinate da utilizzare:
C 20  M 25  Y 60  K 25 (conversione in cmyk del Pantone 871 ORO)
in esadecimale sarebbe: #A79660

Buon design dorato ;)
Leggi tutto...

Realizzare un badge web 2.0 con Illustrator

0 commenti
Anche i badge, tipici del web 2.0, stanno attraversando un periodo di crisi. Dopo l'abuso degli scorsi anni, ecco che adesso vengono utilizzati più razionalmente, solo su alcuni elementi e banner.
Se avete bisogno di realizzare un badge vettoriale per una brochure, un manifesto, ecc, questo tutorial vi viene in aiuto: http://www.learnit2.com/web-2-0-badge-adobe-illustrator-tutorial/

Buon badge a tutti!
Leggi tutto...

Riflesso web 2.0 con Illustrator

0 commenti
Ormai il web 2.0 è agli sgoccioli, almeno per quanto riguarda le caratteristiche grafiche di questo stile. Riflessi, effetti glossy, ecc stanno ormai rapidamente scomparendo dai nuovi design.

Per chi però si fosse ormai affezionato al buon vecchio riflesso, ecco un tutorial su come realizzarlo con Illustrator: http://www.bittbox.com/illustrator/tutorial-web-20-logo-reflection-in-vector-format-with-illustrator

Buon lavoro!
Leggi tutto...

Ragazze e donne in vettoriale, una collezione quasi completa

0 commenti
Per alcuni progetti mi è capitato di dover utilizzare una figura femminile in vettoriale.
E cercando cercando sono capitata in questo articolo, dove vengono raccolti alcuni interessanti pacchetti di donne e ragazze in vettoriale: http://beeex.net/freebies/vectors/29-free-vector-packs-the-ultimate-collection-of-vector-girls
Decisamente da tenere sempre sottomano!
Leggi tutto...

Ancora risorse vettoriali gratuite su Free Design Magazine

0 commenti
Un altro sito da tenere sotto controllo per trovare free vector, ovvero file vettoriali da usare nei nostri progetti di design: http://freedesignmagazine.com/

Sembra interessante, che ne dite?
Leggi tutto...

Dove acquistare un template già pronto

0 commenti
Supponiamo che voi non siate web designer, ma sviluppatori. O che il vostro cliente abbia un budget talmente ridotto che sia impossibile comprendere anche la parte grafica.

Ecco allora che potete valutare l'acquisto di un template già bello e pronto. Certo, la grafica non sarà unica ed irripetibile, ma spesso di tratta di prodotti di una certa qualità.

Dove li potete trovare?
Vi segnalo qualche link:
http://www.templatesmonster.com/
http://www.templateworld.com/
http://www.templatesweb.com/
Leggi tutto...

Elements of Design, ottima fonte di ispirazione per web designer

0 commenti
Elements of Design è il migliore amico di ogni web designer.

Dovete realizzare quel pulsante, ma non sapete da dove partire? Eccolo a venirvi in aiuto con la sua strepitosa galleria di pulsanti: http://www.smileycat.com/design_elements/buttons/

Dovete realizzare un form per l'iscrizione alla newsletter, ma non sapete quale sia il layout migliore? Ecco pronta una galleria di form: http://www.smileycat.com/design_elements/email_signup_forms/


Veramente veramente utile in caso di emergenza creativa! Da tenere sempre nei preferiti!
Leggi tutto...

Ispirazioni per i web designer: le gallerie

0 commenti
Quando devo cercare spunti per un nuovo design, la prima cosa che faccio è visitare le gallerie (o raccolte) di siti online. Ce ne sono veramente tante, più  o meno affidabili.

Vi segnalo quelle che visito più spesso:
http://www.designshack.co.uk/gallery/web/all/all/all
http://www.cssmania.com/
http://bestwebgallery.com/
http://www.webcreme.com/
http://www.csselite.com/
http://cssremix.com/
http://www.thebestdesigns.com/

Segnalatemi le vostre preferite!
Leggi tutto...

jQuery Cycle, uno slideshow di immagini e contenuti in jquery

0 commenti
Anche questo plugin jQuery, realizzato da malsup.com, entra di diritto nella lista dei "must have".

Il plugin jQuery Cycle è uno slideshow di immagini e contenuti che supporta diversi effetti di transizione. Supporta la pausa al mouseover, l'autostop, l'autofit, possibilità di richiamare funzioni prima e dopo gli eventi, possibilità di agganciare eventi al click, e molto altro.
Supporta anche, ma non richiede, Easing Plugin.

Sul sito ufficiale trovate demo e documentazione: http://malsup.com/jquery/cycle/
Leggi tutto...

jCarousel, un plugin jQuery quasi indispensabile

0 commenti
Ho utilizzato molto spesso jCarousel di sorgalla.com nei miei progetti web.

jCarousel è un plugin jQuery che permette di controllare una lista di elementi in verticale o in orizzontale. Gli elementi, che possono essere in HTML statico o caricati dinamicamente (anche con Ajax), possono essere scrollati avanti e indietro (con e senza animazione).

Sul sito trovate demo e documentazione: http://sorgalla.com/jcarousel/
Leggi tutto...

Rendere una foto unica grazie agli effetti speciali realizzabili con Photoshop

0 commenti
Vi serve un'immagine spettacolare per una homepage, o anche per una pagina pubblicitaria, un cartellone, una brochure, ma avete solo una banale foto, e non sapete come fare?
Con Photoshop si possono, più o meno facilmente, ottenere effetti incredibili. Come? Ce lo spiegano i tutorial di Photoshop Lady: http://www.photoshoplady.com/photoshop-tutorial/category/photo-effect/

Ce ne sono veramente tantissimi... ora non avete più scuse per non lavorare :)
Leggi tutto...

Creare un nastro adesivo realistico con Photoshop

0 commenti
Sono molti i siti in cui viene utilizzato l'effetto bacheca, ovvero gli elementi sembrano foglietti di carta tenuti insieme da pezzi di scotch (nastro adesivo).
Come creare però un nastro adesivo con ombre realistiche, ma soprattutto che sembri appena "spezzato" da un porta nastro?

Ci viene in aiuto questo ottimo tutorial in italiano, che ci spiega passo passo come realizzare il nostro nastro adesivo in photoshop: http://www.pixelzone.it/tape.html

Da leggere!
Leggi tutto...

Bordi con effetto mosaico pixel con Photoshop

0 commenti
Tempo fa, per un sito realizzato per conto di un'agenzia, mi sono trovata nella necessità di dare un effetto un po' particolare alla foto utilizzata nella header, al posto della classica sfumatura che tanto andava di moda.
Mi è venuto in aiuto questo tutorial, http://www.photoshoplab.com/pixelated-mosaic-edges.html
grazie al quale sono riuscita ad ottenere questo effetto: http://www.scimex-sl.com/

Il tutorial spiega come ottenere un effetto mosaico pixelato da usare sui bordi delle nostre immagini.
Da leggere!
Leggi tutto...

Leggete riviste di web design?

1 commenti
L'altro anno mi volevo abbonare a una rivista di web design, per tenermi sempre aggiornata.
Il mercato italiano però non offre molte alternative.
L'unica rivista decente in cui mi sono imbattuta è Web Designer della Play Media Company: http://www.playmediacompany.it/abbonamenti/abbonamenti-01.asp?Id=70

Per noi web designer / grafici ho trovato molto interessante anche Photoshop Magazine, sempre della Play Media Company: http://www.playmediacompany.it/edicola/edicola-01.asp?Id=3030

E voi? Leggete qualche rivista? Se sì quale?
Leggi tutto...

giovedì 4 agosto 2011

Clear dei float, usate ancora il div vuoto?

0 commenti
Il primo e più vecchio modo di eliminare il problema degli elementi float era il classico div vuoto con stile clear:both;... Semplice, veloce, peccato per quel markup extra presente sulla pagina!
Oggi stanno prendendo piede i metodi di auto clear, nonostante siano necessari degli hack affinchè funzionino correttamente anche sui browser più vecchi.

Ma un metodo poco discusso e forse poco diffuso è quello di usare lo stile overflow:hidden; sull'elemento contenitore degli elementi floattanti. Veloce e indolore.

Un esempio? Allora vi rimando a Quirksmode, che in questo articolo http://www.quirksmode.org/css/clearing.html parla proprio di questa tecnica!
Leggi tutto...

wSlide, un plugin jQuery per liste con effetti slide verticale o orizzontale

0 commenti
Ritrovo un po' per caso questo bel plugin jQuery, wSlide, che consente di animare delle semplici liste, contenenti solo testo o anche immagini, con effetto slide verticale o orizzontale.

Demo e spiegazione sul sito ufficiale: http://www.webinventif.fr/wslide-plugin/
Leggi tutto...

I 10 migliori hack CSS

0 commenti
Un articolo un po' vecchiotto ma sempre attuale è questo di StylizedWeb: http://stylizedweb.com/2008/02/14/10-best-css-hacks/

L'articolo affronta alcune delle problematiche ben conosciute a noi web designer e front-end developer: allineamento verticale dei div, png trasparenti, auto clear, ecc.

Un articolo da tenere sempre nei preferiti!
Leggi tutto...

PVM Garage: un altro sito ricco di spunti e ispirazioni per noi web designer

0 commenti
Vi segnalo oggi anche questo sito: http://www.pvmgarage.com/tags/inspiration/ ricchissimo di showcase, spunti e ispirazioni per i nostri prossimi layout vincenti!

Da seguire!
Leggi tutto...

Trasforma le tue immagini in icone online con iConvert

0 commenti
Ho usato più di qualche volta questo utile tool di conversione online: http://iconverticons.com/
Accetta diversi formati grafici, e li converte in una bella icona che potete usare come più vi aggrada.

Da provare!
Leggi tutto...

Non solo Smashing Magazine

0 commenti
Oltre a Smashing Magazine, che resta il mio magazine online preferito per quanto riguarda il web design, trovo molto interessante anche http://sixrevisions.com/
Nel sito sono presenti molti articoli che trattano tematiche care a noi web designer, con esempi e riflessioni. Da seguire!
Leggi tutto...

Una collezione molto interessante di forme per Photoshop

0 commenti
Smashing Magazine ha pubblicato qualche tempo fa una interessante raccolta di forme per Photoshop, che vi ripropongo: http://www.smashingmagazine.com/2008/12/11/the-ultimate-collection-of-photoshop-custom-shapes/
Potrete trovare persone, armi, animali, mezzi di trasporto... e chi più ne ha più ne metta!
Leggi tutto...

Ancora font gratuiti per i designer più esigenti

0 commenti
Un altro vecchio sito ripescato dai miei preferiti: http://www.typenow.net/a.htm

Anche qui potrete trovare una bella selezione di font gratuiti da scaricare.
Leggi tutto...

Acquistare o noleggiare film online con http://www.filmisnow.it/

0 commenti
Ho scoperto qualche tempo fa il sito http://www.filmisnow.it/ dove è possibile, dietro abbonamento, scaricare o noleggiare parecchi film.
Finalmente un servizio che possa essere un'alternativa al download illegale!

Per maggiori informazioni: http://www.filmisnow.it/
Leggi tutto...

Più di 6500 font gratuiti

0 commenti
Al giorno d'oggi sono molti i siti che consentono di scaricare fonts gratuiti e di buona qualità.
Ho ripescato dalla mia lista dei preferiti questo sito: http://www.webpagepublicity.com/free-fonts.html#Free%20Fonts ... bruttino senza dubbio, ma con più di 6500 fonts gratuiti da scaricare liberamente.

Che dire, designer di tutto il mondo, scaricate! :)
Leggi tutto...