Italian webdesign » Design and visual

Come scegliere lo schema dei colori per un sito web?

Ivan23 — Wed, 08 Feb 2012 13:42:12 +0000

Il design è un’aspetto fondamentale per la riuscita di una buona interfaccia grafica di un sito. Oltre alla qualità del codice “well formed”, il sito deve comunicare, emozionare e suscitare interesse nel cliente che deve comprare i nostri servizi , o semplicemente se vuole trovare qualche informazione che gli serve.
Molto spesso leggo nei vari forum o gruppi del nostro settore che si sostiene chi è web developer non abbia un senso spiccato del design e viceversa, ma io non sono d’ accordo con questa distinzione netta: naturalmente c’è una differenza dovuta alle proprie inclinazioni e percorsi di studi effettuati, quindi c’è chi ha più senso estetico dovuto ad un percorso di studi artistico e c’è chi ne ha più nello sviluppo del codice avendo basi informatiche.
Vorrei proporre in questo articolo, una serie di strumenti online che potrebbero aiutare ad evitare di bloccarsi nello sviluppo del design per una indecisione riguardo alla scelta di uno schema di colore nella creazione di un sito, (io sono uno di loro).

Color Scheme Designer 3

Color Scheme Designer 3 riporta una schermata di facile utilizzo,attraverso la quale puoi scegliere il colore da cui partire per realizzare la tavolozza dei colori. La cosa meravigliosa di questo sito è che ti propone lui stesso i 6 schemi di colore soltanto cliccando dei link in alto a sinistra. Un’altra interessante funzione di questo sito è che ti permette di emulare la visione del design in base agli utenti affetti da problematiche di vista, ad esempio cecità parziale, monocromatismo, daltonismo, e attraverso i link “preview”, “light page example”, “dark page example”, puoi direttamente avere una visione del design con colori chiari o scuri.

Dopo aver scelto lo schema colore preferito, si può esportarlo in diversi formati come: HTML/CSS, GIMP, PHOTOSHOP, XML.
Io uso questo sito per i miei lavori, me ne sono completamente innamorato.

Adobe KULER

Un’ottima alternativa a Color Scheme Designer 3 è Adobe Kuler, qui potete creare con pochi passi, combinazioni di colori basate su configurazioni standard degli schemi di colore. Un’aggiunta funzione di questo strumento è che è in grado di generare schema di colore attraverso l’upload d’immagini. La registrazione a questo sito offre agli utenti l’interscambio di tavolozze colori con gli altri, che chiunque può usufruire.

COLOURlovers

Questo sito è dedicato alla condivisione di materiale tra gli utenti, consentendo di condividere pattern di qualunque tipo e suggerisce i colori da impiegare nel mondo web design.

Pictaculous

Vi è mai capitato girando per la città o in viaggio di fotografare monumenti o che so alcune bellezze storiche del posto, e vi domandate quali colori la natura ha adottato per realizzare quel bel fiore che vi piace tanto? O quando un cliente vi manda alcune immagini per creare il suo sito e vi domandate con quale schema di colore comincio? Nessun problema, c’è Pictaculous che permette di avere lo schema di colore facendo l’ upload dell’immagine che ci interessa. Cliccando “Get my palette” ti fornirà una tavolozza di 5 colori inerenti alla tua immagine.

Se quando girate non avete il computer il sito vi permette di uploadare la vostra immagine inviandola con lo smartphone all’indirizzo colors@mailchimp.com. In pochi minuti, nella tua casella mail ti arriveranno le 5 palette di colore.

Colour Contrast Check

Uno dei fattori chiave dell’accessibilità web è quella di garantire un buon contrasto tra sfondo e testo, cioè in poche parole dovremmo garantire la leggibilità del testo. A volte, quello che sembra a noi leggibile, agli utenti con menomazioni visive può risultare illeggibile. Come dobbiamo capire quando il contrasto tra testo e sfondo è adeguato alla gran parte della percentuale di utenti? Qui ci viene di aiuto il sito “colour contrast check”. Avete due opzioni per ottenere il risultato ottimale: o scrivete il codice esadecimale del colore sfondo e testo (la modalità che uso io), o spostate i bottoni che vedete in questa screenshot. Un metodo molto utile e veloce ricavando l’ esadecimale del colore che ci interessa è usare la paletta colori di Photoshop o Gimp o se usate Chrome l’applicazione Colorzilla.Come vi approcciate alla creazione del design? Adottate queste utilities o ne conoscete delle migliori? Prima scegliete il design o lo create in base a quei contenuti che il cliente vi da?

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Illustrazioni vintage da iStockphoto, collezione CSA images

Lauryn — Tue, 24 Jan 2012 15:53:36 +0000

iStockphoto.com ci stupisce anche stavolta, fatevi un giro sulla collezione CSA images, dove troverete un sacco di illustrazioni vintage che potrebbero esservi utili per i vostri progetti.

Molto semplicemente ve la propongo sperando possa esservi utile.

A presto!

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Showcase di siti Scozzesi: webagency e turismo

Lauryn — Tue, 27 Dec 2011 14:30:03 +0000

Come segnalavo sul nostro gruppo di Facebook, in questi giorni mi sono ritrovata a navigare alcuni siti che avevo visitato l’anno scorso in previsione del mio viaggio di nozze ad Edimburgo. Ho visitato un sacco di siti dedicati al turismo, nonchè quelli ufficiali di aeroporti, autobus, alberghi. Il mio stupore è stato a dir poco grande, visto come stanno le cose in Italia, nel trovare, a distanza di pochi mesi, quasi tutti questi siti rinnovati nella grafica e nei contenuti. E di sicuro senza le grandi spese italiane di portali come italia.it.

Turismo

Webagencies

E tanto che c’ero ho curiosato anche fra le webagency di Edimburgo, ecco un bello showcase, che ne pensate?

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

iStockphoto: “presenta un amico” e vinci 20 dollari o crediti o il 20% di sconto

Lauryn — Thu, 24 Nov 2011 16:03:57 +0000

iStockphoto presenta il programma “Invita un amico”

La nuova iniziativa assegna 20 dollari, 20 crediti o il 20% di commissioni sul primo acquisto effettuato da un amico invitato. Inoltre, a ogni nuovo cliente segnalato e iscritto vengono regalati 10 crediti.

Milano, 23 novembre 2011 – iStockphoto annuncia il nuovo programma “Invita un amico” che premia i partecipanti ricompensandoli a loro scelta con un corrispettivo di 20 dollari, 20 crediti o il 20% su tutti gli acquisti iniziali dei clienti segnalati; per questi ultimi, inoltre, sono previsti 10 crediti gratuiti semplicemente aprendo un nuovo account su iStock.

Le segnalazioni agli amici possono essere inviate con un messaggio di posta elettronica, un link o un banner che iStockphoto mette a disposizione integrabile a un blog o a un sito Web. Quando un potenziale cliente partecipaprogramma ed effettua un acquisto nei 30 giorni successivi, l’utente iStock che ha effettuato l’invito riceve un corrispettivo. Il programma è aperto a tutti e partecipare è davvero semplice.

Oltre che attraverso i banner di iStockphoto o quelli personalizzabili, i partecipanti possono promuovere il programma anche attraverso link su Facebook, Twitter e Linkedin presenti sotto tutte le immagini iStockphoto. Ogni volta che una persona condivide un’immagine, il suo codice di invito personale viene automaticamente inserito nell’immagine stessa e, se la condivisione dà luogo a un nuovo acquisto, viene riconosciuto un corrispettivo.

“Il passaparola è stato un elemento essenziale per la crescita di iStockphoto fin dal suo primo giorno”, dichiara Nichole Desrosiers, Vice President of Marketing di iStockphoto. “E’ il fattore determinante dell’acquisizione di nuovi clienti e della crescita del nostro settore. Questa iniziativa è il nostro modo per ringraziare tutte le persone che continuano a promuovere il nostro servizio in maniera efficace”.

Come funziona

I clienti che hanno partecipato al programma di segnalazione precedente non devono far altro che accettare i termini e le condizioni della nuova iniziativa e aggiornare i loro link per continuare a ricevere le commissioni guadagnate.

Inoltre, è necessario seguire le seguenti regole:

Per poter partecipare all’iniziativa occorre aver acquistato almeno un pacchetto di crediti iStock o aver eseguito almeno un upload approvato come contributor.

Al momento dell’iscrizione ai partecipanti viene richiesto di scegliere il piano preferito per l’accredito dei guadagni, che può essere modificato una volta al mese.

Affinché il corrispettivo possa essere riconosciuto all’utente, i nuovi clienti devono iscriversi ed effettuare un singolo acquisto di almeno 26 crediti entro 30 giorni dall’invito.

Per il riconoscimento della commissione non è prevista né una spesa minima né un limite sulla commissione stessa. Se il cliente invitato acquista un pacchetto crediti da 20.000 dollari, l’utente che effettuato l’invito ne guadagna 3.800.

Al momento dell’iscrizione, ai nuovi clienti viene riconosciuto un bonus di 10 crediti gratuiti che devono utilizzare entro 30 giorni.

Per maggiori informazioni sull’iniziativa o per partecipare al programma è possibile visitare l’indirizzo http://italiano.istockphoto.com/my‐account/referral‐program/info.

***

iStockphoto

iStockphoto è una fonte di ispirazione creativa accessibile e immediata con milioni di foto, illustrazioni, video e contenuti audio royalty‐free controllati e file Flash®. Sfruttando la più avanzata piattaforma di ricerca del settore, i clienti scaricano un file al secondo scegliendo per progetti di business, marketing o personali all’interno di una raccolta di oltre 9 milioni di file. Costituita nel 2000, iStockphoto ha gettato le basi del rivoluzionario modello di business della fotografia basata sul micro‐pagamento, diventando rapidamente uno dei siti mondiali con contenuti generati dagli utenti più redditizi e di successo. iStockphoto versa ogni settimana royalty pari a circa 1,9 milioni di dollari. iStockphoto ha sede a Calgary, Alberta, Canada, e fa parte del prestigioso gruppo Getty Images. In Italia è attivo un servizio di assistenza raggiungibile allo 02/36021219.

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

iStockphoto si riconferma nostro sponsor anche per il 2012!

Lauryn — Fri, 11 Nov 2011 07:42:04 +0000

Sono felice di comunicarvi che il sodalizio Italianwebdesign-iStockphoto si riproporrà per il terzo anno consecutivo nel 2012.

Dopo il successo di iStockalypse che si è tenuto per la prima volta a Milano e di cui ho avuto modo di parlare anche durante la trasmissione Smart&App di La3 (Canale 143 di Sky), iStockphoto riconferma la collaborazione che ci tiene legati dal 2009/2010.

Vi ricordo con l’occasione che iStockphoto fino al 31/12/2011 offre uno sconto del 10% a chi si iscrive per la prima volta tramite questa pagina creata apposta per voi lettori di Italianwebdesign. Sarà sufficiente inserire il codice sconto WEBDES11 per ottenere subito uno sconto del 10% sul pacchetto crediti da voi scelto.

Grazie a tutti e grazie ancora a iStockphoto per la sua fiducia!

ps giusto per deliziarvi, una bellissima foto che ho acquistato per una cliente proprio in questi giorni e che ho utilizzato per il suo canale Youtube.

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Realizzare icone per iDevice [Introduzione]

Vicio — Thu, 10 Nov 2011 05:44:58 +0000

Partiamo dal presupposto che il livello grafico di un’icona dipende dalla vostra abilità creativa nel renderla unica e particolare. Si parte dal concetto basilare che tutte hanno le stesse dimensioni ed in seguito potremo lavorarci all’interno.

L’icona si presenta con angoli tondi ed il raggio varia a seconda delle dimensioni.

iTunes Artwork:

-512x512px Raggio 90px

iPhone4:

-114x114px raggio 20px

-Spotlight 58x58px raggio 10px

iPad:

-72x72px raggio 12px

-Spotlight 50×50 raggio 9px

-Impostazioni 29x29px raggio 9px

iPhone 3Gs:

-57x57px raggio 10px

-Spotlight e impostazioni 29x29px raggio 9px

Di seguito vi allego un immagine per farvi rendere conto delle effettive dimensioni su ogni device.

1) Apriamo Photoshop e creiamo un nuovo lavoro 512×512 pixel, con le guide troviamo il centro, ci serviranno per centrare la nostra icona.

2) Ora selezionate Strumento rettangolo arrotondato ed impostate come in figura.

3) Non vi resta che cliccare al centro del vostro lavoro per ritrovarvi la base dell’icona per iniziare a lavorarci.

Volendo, selezionate la forma appena creata con Strumento Selezione Diretta ( freccia bianca ) andate su Modifica > Definisci forma personale, o salvate il psd come base per poterla usare ogni volta che ne avete bisogno.

Alla prossima

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Photodune: stock photografico nuovo dal mondo Envato (Themeforest & Co)

Lauryn — Fri, 23 Sep 2011 13:22:40 +0000

Scopro poco fa con curiosità un bannerino che dalla pagina di Themeforest mi porta ad un nuovo servizio di Envato: Photodune. Fantastico, così posso utilizzare il mio account per autoricaricarmi e scaricare nuove foto.

Grazie Envato!

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Showcase of Italian Web Design: intervista e showcase italiani su Noupe

Lauryn — Tue, 23 Aug 2011 12:40:44 +0000

Arriva con molto ritardo la pubblicazione di un’intervista incrociata fra me, Giuliano Ambrosio e Antonio Moro, e con uno showcase di diversi siti che dovrebbero rappresentare un po’ il gusto e il modo di fare web in Italia. Alcuni screenshot sono datati e altri siti offline, ma tant’è…le nuove versioni sono anche meglio e sono indice di lavoro, fermento! Altri ci rappresentano in modo inequivocabile come Giorgio Armani, Mulino Bianco, Diesel e Andrea Boccelli, ma mi fa piacere poter vedere che sono stati scelti tanti amici webdesigner che stimo, come:

Nonchè sono state pubblicizzati diversi blog e community italiane come la nostra e altre che colgo l’occasione di elencare:

Al di là della data di redazione dell’articolo, che ne pensate delle risposte e dei siti (nuovi) elencati?

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Giveaway: Pixmac nuovo sponsor di IWD vi regala tante foto!

Lauryn — Fri, 03 Jun 2011 15:50:26 +0000

Pixmac è una giovane agenzia di stock fotografici che ho imparato a conoscere da poco. Nel nostro campo siamo sempre alla ricerca di fotografie libere da diritti, ma per avere la qualità si sa, bisogna pagarla. E Pixmac è anche molto conveniente. Ci sono anche illustrazioni, icone, texture e grafica, come ogni buon sito di stock, e da notare anche la sezione VIP, dove potrete scaricare foto ufficiali di attori, cantanti e personaggi pubblici da utilizzare se avete un sito o blog in tema che parli di musica, cinema, gossip e quant’altro. Fate attenzione però: ci sono sempre anche foto gratuite, potreste trovare ciò che cercate anche fra quelle!

Il contest

Per permettere a Pixmac di farsi conoscere, Italianwebdesign ne diventa promotore e affiliato proponendo un contest che permetterà ai primi 3 estratti di vincere rispettivamente 50, 30 e 20 credits da spendere sul loro sito. Inoltre per tutti gli iscritti provenienti da Italianwebdesign 10% di sconto a prescindere!

Se desideri partecipare al contest non devi far altro che lasciare un commento qui di seguito segnalando il link ad una foto che ti piace dal loro database e se lo possiedi, un tweet con il topic #2914069.

Il tutto entro il 18 giugno compreso. Lunedì 20 giugno saranno decretati i vincitori sulle pagine di Italianwebdesign e sarà comunicata la vincita direttamente agli interessati.

Tanto per goderne, ecco alcune foto di esempio di anteprima:

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo

Fino al 6 giugno iStockphoto offre uno sconto del 20% sulle foto Extralarge!

Lauryn — Tue, 31 May 2011 06:57:03 +0000

Come da titolo, da oggi e fino al 6 giugno iStockphoto applica uno sconto del 20% su tutte le foto a catalogo dei formati XLarge, XXLarge e XXXLarge. E con l’occasione vi ricordo le tre collezioni più utili per noi:

Libri da non perdere:

Amazon-Box creato da Giuseppe Frattura

Scarica il pdf di questo articolo