Come trovare l’ispirazione e disegnare il layout di un sito web?
Benvenuto al 5° articolo della nostra guida. Sei arrivato ad un punto cruciale del tuo progetto: la realizzazione grafica del layout. Disegnare un sito non è affatto semplice e si deve avere a che fare con numerose incognite: trovare l’ispirazione, saperla tradurre graficamente, trovare il giusto compromesso tra estetica e funzionalità. Ma cominciamo per gradi.
Ciò che hai in mano, oltre al concept e alla struttura di quello che dovrà essere il sito, è il seguente wireframe, realizzato nel precedente articolo:

Sulla base di questo, e delle eventuali indicazioni su colori e immagini che ti sono state fornite, devi realizzare una grafica efficiente e gradevole. Da dove iniziare?
Cerca (e trova) la giusta ispirazione
Lo schermo bianco ha, da sempre, terrorizzato tutti. Grandi professionisti compresi. Se non hai la minima idea di dove iniziare, non andare nel panico. Il tortuoso processo di ricerca dell’ispirazione può essere suddiviso in 3 fasi. Vediamole insieme:
Fase 1: Cerca
La nascita delle numerose css gallery ha portato a tutti i grafici un notevole vantaggio: accedere ad un numero spropositato di layout su cui gettare uno sguardo e da cui imparare. Inutile elencarti tutte le gallery: ce ne sono un’infinità, e sono ormai più che note. Ti consiglio però di fare un salto qua, dove puoi trovare una lista abbastanza esauriente di quelle più aggiornate. Mentre curiosi nelle gallery, ad intuito troverai qualcosa che ti sembra idoneo o interessante per il tuo progetto: colori, immagini, concetti, testi. Prendi nota di tutto ciò che senti più “idoneo” alle tue esigenze.
Il consiglio: non perdere troppo tempo in questa fase. Potresti infatti influenzare il tuo disegno, con l’unico risultato di produrre una grafica “simile a quella di”, e la regola generale è che quando si cerca di ricalcare lo stile di qualcun altro, si finisce quasi sempre con il realizzarne una brutta copia.
In linea di massima, ti consiglio di buttare immediatamente giù qualcosa. Che sia anche semplicemente uno schizzo senza capo né coda, ti permetterà di superare l’ansia da “vuoto” e di riordinare le idee.
Fase 2: Esprimi te stesso nei dettagli
Per esperienza posso dirti che, una volta trovato il giusto input, il più è fatto. Una volta messa giù la grafica della struttura, dovrai lavorare sulla cura dei dettagli. I font e la tipografia in genere, il posizionamento delle immagini e dei contenuti, gli arricchimenti estetici, ognuno di questi elementi è ciò che renderà il tuo lavoro particolare ed esteticamente bello. Questa fase non è da sottovalutare: scegliere il giusto font, per esempio, può portare via molto tempo e rivelarsi un’attività abbastanza complessa.
Fase 3: Imponiti una pausa
Può essere veramente frustrante aspettare un’idea che non vuole saperne di arrivare. A questo punto, è inutile rimanere imbronciati davanti allo schermo, martoriandosi la mente. Bando agli indugi e ai tempi consegna: prenditi una pausa. Spegni il computer, fai una passeggiata, dormi, fai una doccia, telefona a qualcuno. Qualsiasi attività va bene, a patto che sia corroborante e che non abbia niente a che fare con il web design. E non sentirti in colpa se non rimani ancorato al computer 24 ore su 24: un grafico deve saper accettare che l’intuizione giusta ha i suoi tempi, siano essi mezz’ora o due settimane.
L’ispirazione è arrivata…e ora?
Se finalmente la tua fantasia ha deciso di darsi da fare, comincia a riportare graficamente le tue idee attraverso un qualsiasi programma di grafica (nel nostro caso Photoshop).
Andiamo quindi ad aprire il programma, impostando le dimensioni del documento ad una larghezza di 1680px e un’altezza di 1200px, ad una risoluzione di 72 dpi.

Anche se il sito sarà sviluppato graficamente con una larghezza di 1680px, in modo che anche nei monitor 21′ widescreen abbia una buona resa estetica, è essenziale limitare i contenuti principali in una dimensione di 960px, così che anche chi naviga con risoluzioni ancora più basse (tenendo conto che ormai solo il 5% degli utenti utilizza risoluzioni più basse di 1024x768px) possa visualizzare il sito senza dover ricorrere al fastidioso scrolling orizzontale della finestra del browser.
Il calcolo da fare è facile e rapido: dai 1680px totali togliamo i 960px di quello che sarà il contenitore del nostro sito, e dividi il resto per due in modo che il contenitore sia centrato. Per segnare i limiti, inserisci nel documento due guide.

Cominciamo a dare un tocco di colore alla nostra pagina. Con lo strumento rettangolo disegniamo due sezioni laterali: la destra di 426px e la sinistra di 654px. Dato che i colori su cui dobbiamo orientarci sono colori caldi come l’arancione e il rosso, coloriamo queste sezioni di arancione (#ff7c0b;)

Per creare un gradevole contrasto, nel rettangolo di destra, invece di limitarci al colore di sfondo, inseriamo un pattern granuloso effetto carta.
Per applicare il pattern, facciamo doppio click sul livello del rettangolo per aprire la finestra degli stili di livello e selezioniamo l’opzione “Sovrapposizione pattern”.

Otteniamo così questo risultato:

A questo punto disegniamo, nel centro della sezione di colore bianco, un rettangolo arrotondato (raggio 20°) di 560px di larghezza e 232px di altezza. Questa sarà la nostra testata, in cui inseriremo un’immagine adatta a rappresentare l’attività del nostro cliente.

Il consiglio: se stai iniziando adesso a lavorare con Photoshop, abituati fin da subito a rinominare i livelli e a tenerli ordinati in gruppi: in un progetto grafico si possono sviluppare centinaia di livelli, e se non li organizzi fin dall’inizio corri il rischio di non sapere più dove mettere le mani.

Prima di proseguire, andiamo in cerca delle immagini da usare nel nostro progetto. Normalmente acquisto tutte le immagini su Fotolia dove, con pochi euro, è possibile trovare foto ed immagini vettoriali ad altissima risoluzione. Ti ricordo che, come già scritto in questo articolo, sconsiglio vivamente l’utilizzo di immagini di scarsa qualità, oppure prese su google image.
Come risultato della nostra ricerca abbiamo selezionato le seguenti immagini che, come definito nel brief, raffigurano bambini che giocano, si divertono, e nel generale immagini legate al mondo dell’infanzia.

Anche per la scelta delle immagini, fidati del tuo istinto e orientati verso immagini che, per i loro colori o soggetti, senti di ritenere adatte. Scegline il maggior numero possibile: in un secondo tempo farai una cernita di quelle migliori che potrai usare nel progetto grafico.
A questo punto decidiamo di inserire la foto del bambino con il pupazzetto nel rettangolo della testata. Innanzitutto dobbiamo ridimensionare la foto in modo che abbia le stesse dimensioni del rettangolo (o qualche pixel di più, tanto per essere certi). Una volta ridimensionata clicchiamo su Modifica >> Definisci pattern e salviamo la foto come nuovo pattern, che chiameremo “bambino testata”.

Per applicare il pattern torniamo al nostro documento iniziale, apriamo la finestra degli stili di livello del livello contenente il rettangolo della testata e scegliamo “sovrapposizione pattern”. Dall’elenco dei pattern disponibile selezionamo quello appena creato e lo applichiamo.

Come vedi l’immagine scelta non solo esprime i concetti basilari dell’attività del cliente, ma il pupazzetto del bambino richiama anche il colore arancione scelto per il background. Ricordati che rispettare ed evidenziare i giusti abbinamenti di colore può essere la chiave del successo del tuo layout.
Inseriamo qualche immagine
La bambina che dipinge sullo sfondo arancione la integriamo sulla sezione laterale sinistra, così da creare un effetto spontaneo e originale: sembrerà che la bambina stia, con il suo pennello, colorando lo sfondo del nostro sito. Per arricchire il tutto aggiungiamo, con dei pennelli doodles facilmente reperibili in rete, un po’ di scarabocchi e disegni infantili. Casette, fiorellini, uccellini. Ricordati che è il sito di un asilo e che, quindi, puoi anche esagerare con disegni e colori.
Nell’angolo destro inseriamo infine la bambina con il cartellone: può tornarci utile in un secondo momento.

Per ammorbidire l’apertura e la chiusura del sito, aggiungiamo qualche “nuvoletta” bianca, che arricchirà l’estetica della pagina e ci darà la possibilità di creare, nella sezione superiore, uno “spazio vuoto” dove poter inserire il logo dell’asilo. (Ricordati che il logo deve sempre essere ben visibile, in alto e possibilmente posizionato a sinistra.)
Per inserire le nuvole possiamo scegliere tra diverse opzioni: chi ha più confidenza con il tanto temuto strumento penna può disegnarle manualmente, altrimenti sono disponibili in rete diverse brush o shape che possono venirti in aiuto. Nel nostro caso ho usato queste brush. Vicino alla testa disegniamo una nuvoletta più larga, in cui inseriamo il logo.

Curiamo la tipografia
Il nostro sito comincia a prendere forma. Inseriamo un po’ di contenuti, con l’ausilio del classico Lorem Ipsum. Come font ho scelto un verdana 12px, con un interlinea di 21px.
Il consiglio: Non ti limitare a copia/incollare il lorem ipsum, ma formatta il testo inserito con un po’ di grassetti, una lista, o suddividendolo in paragrafi, così da emulare il più possibile come sarà il sito una volta inseriti i testi reali. Il risultato è soddisfacente? La lettura è chiara? I testi hanno i giusti margini e allineamenti? Sarà più facile notare, una volta formattati i testi, eventuali errori nella tipografia.
Nel nostro caso, per rispettare l’armonia della pagina, abbiamo allineato i contenuti alla foto della testata, lasciando da entrambi i lati 20px di margine. In questo modo la pagina appare equilibrata e aggraziata.

A questo punto possiamo dedicarci alla scelta del font per i titoli delle pagine e per la navigazione. E se per i contenuti dobbiamo limitarci ai pochi font web-safe, in questo caso possiamo veramente sbizzarrirci, dato che, al momento della codifica, esporteremo tutto come immagine.
Cerchiamo un font frivolo e giocoso e che si intoni bene con la nostra grafica: ce ne sono davvero tanti, ma noi scegliamo il festoso “Cocktail bubbly” per il menu di navigazione e “Bellerose” per i tioli, per richiamare il font utilizzato nel logo.

Consiglio: utilizza le guide per essere certo che ogni voce sia allineata con le altre e rispetta le spaziature tra una voce e l’altra: se tra “home” e “asilo” intercorre un margine di 30px, anche tutti gli altri link devono avere, tra loro, questa distanza.
Aggiungiamo un piccolo tocco creativo: utilizziamo la bambina con il cartellone inserita in basso a destra come una “portatrice di messaggi”. Potremo inserire uno slogan, la partita iva dell’azienda, o altro. Nel nostro caso inseriamo il numero di telefono dell’asilo.

Per rendere più vivace questo cartellone coloriamo ogni scritta di colore diversa e aggiungiamo un bordo esterno di 1px di un colore più acceso ( finestra degli stili di livello >> Traccia ).

La gallery fotografica
Nel wireframe abbiamo visto che in home page, oltre al classico testo di presentazione, dovrà essere integrata una piccola gallery fotografica.
Nella pagina poi inseriamo un titolo, “Gallery fotografica” per dividere il contenuto testuale dalle foto e per far capire che si tratta di una sezione indipendente dal testo della home page.
Con lo strumento rettangolo disegniamo qualche piccolo rettangolo arrotondato – utilizziamo questa forma per richiamare le rotondità dell’immagine in testata – e creiamo le nostre thumbnail.

A questo punto, proprio come fatto per l’immagine in testata, apriamo le foto da inserire nelle thumbnail e le ridimensioniamo in base alle dimensioni dei nostri rettangoli. Clicchiamo su modifica >> Definisci pattern e applichiamo il pattern al rettangolo della gallery. Ripetiamo questo procedimento per ogni foto, fino a che ogni rettangolo non avrà come riempimento una foto diversa.

Abbiamo quasi finito il nostro sito! Vogliamo vedere com’è venuto?

L’ultimo tocco
Questo layout è già bello, ma è come se mancasse qualcosa. Non credi anche tu che le sezioni laterali siano un po’ “vuote”? Bene, arricchiamole con un po’ di grafica.
Inseriamo nello sfondo un po’ di palloncini: usiamo un font un po’ particolare, SF balloons, inserendo qualche palloncino qua e là, di dimensioni e colori diversi.
Nella sezione con l’effetto carta, facciamo in modo che i palloncini si integrino nello sfondo in modo naturale.
Per farlo, basta selezionare come metodo di fusione “sovrapponi” (Finestra Stili di livello >> Opzioni di fusione >> Metodo di fusione), così che il colore di sfondo del palloncino venga “inciso” nello sfondo.

Questo è il risultato finale:

In pratica, gli utenti che navigano con una risoluzione dello schermo impostata ad una larghezza di 1024 px visualizzeranno solo la sezione A, gli utenti che hanno impostato una larghezza dello schermo pari a 1280px vedranno le sezioni A e B e così via fino ad arrivare agli utenti che visualizzeranno l’intero disegno (sezione C), cioè coloro che hanno una risoluzione dello schermo con una larghezza di 1680px.

Soddisfatto del risultato? Abbiamo realizzato una pagina web con una grafica accattivante, allegra e moderna. Grazie alla cura dei dettagli, questo sito potrà rappresentare al meglio il nostro cliente sul web e colpire positivamente i potenziali clienti.
Hai visto come è facile creare un buon progetto web, una volta trovata la giusta ispirazione? bastano un po’ di esercizio e di senso estetico.
Ora che abbiamo realizzato la nostra bozza, dobbiamo farla visionare al cliente e fare in modo, anche grazie a qualche piccola strategia psicologica, che la accetti senza stravolgerne – e peggiorare, come succede di solito – la resa grafica.
Come? Appuntamento al prossimo lunedì!
Gli altri articoli di questa guida:
- Come capire le esigenze del cliente al primo incontro?
- Come calcolare costi e tempi di consegna di un progetto web evitando di scrivere cifre insensate?
- Come evitare futuri ripensamenti da parte del cliente?
- Come sviluppare e organizzare la struttura di un sito web?
- Come trovare l’ispirazione e disegnare il layout di un sito web?
- Come presentare la bozza grafica al cliente?
- Come realizzare le pagine interne dopo l’accettazione della bozza?
- Come esportare un psd in xhtml e css senza perderci la ragione? (parte1) (parte 2)
- Come indicizzare un sito senza essere degli esperti SEO? (parte 1) (parte 2)
- Come assicurarsi di non aver commesso errori prima di lanciare il sito online?
36 commenti
Trackback e pingback
-
Come sviluppare e organizzare la struttura di un sito web? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come calcolare costi e tempi di consegna di un progetto web evitando di scrivere cifre insensate? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come capire le esigenze del cliente al primo incontro? Guida alla realizzazione di un sito web dalla a alla z | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come fare un sito web senza impazzire dietro alle richieste del cliente? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Realizzazione sito web: Come evitare futuri ripensamenti da parte del cliente? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come realizzare le pagine interne dopo l’accettazione della bozza? | Your Inspiration Web
[...] penultima lezione hai visto come può essere semplice creare, con un po’ di manualità e fantasia, [...] -
Come presentare la bozza grafica al cliente? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come trasformare un psd in (x)html e css senza perderci la ragione? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come indicizzare un sito senza essere degli esperti SEO? Parte 1 | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come trasformare un psd in (x)html e css senza perderci la ragione? Parte 2 | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Dal Template Photoshop al Codice HTML CSS: Super Aggiornamento | Fedeweb
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
» Creare un sito professionale in 10 mosse
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come assicurarsi di non aver commesso errori prima di lanciare il sito online? | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Dal Template Photoshop al Codice HTML CSS: Ecco Come Fare | Fedeweb
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Come indicizzare un sito senza essere degli esperti SEO? Parte 2 | Your Inspiration Web
[...] Come trovare l’ispirazione e disegnare il layout di un sito web? [...] -
Strani, ma belli: 25 font stravaganti per rendere più particolare il tuo design | Your Inspiration Web
[...] e divertente: l’abbiamo scelto per il menù del sito dell’asilo e abbiamo fatto bene. E’ un font veramente gradevole, ... -
Unusual but beautiful: make your design more creative with this 25 fonts | Your Inspiration Web
[...] and funny: we’ve chosen to use this for the menu of the nursery website and we’ve made an excellent ... -
Grafica web e psicologia del colore: come i colori comunicano con l’inconscio | Your Inspiration Web
[...] verrà particolarmente valorizzata. Ti ricordi? Nel layout che ho disegnato per la “guida alla realizzazione di un sito web ...





E’ davvero incredibile come sei riuscita a tirare fuori questa bozza partendo da quel semplice wireframe.
Complimenti davvero Sara, rimango sempre più sorpreso dalla qualità dei vostri articoli e questo odierno credo proprio che diventerà la mia bibbia.
Davvero un bellissimo post! Hai risposto ad una domanda che mi facico da sempre!
Non posso che unirmi ai complimenti!
Una guida così completa non l’ho trovata in nessuno dei libri che ho letto.
Per quanto riguarda il risultato finale comunque credo ci voglia molta creatività, e questa secondo me è una dote innata, non la si impara da nessuna parte. Ho visto tante persone utilizzare e conoscere benissimo photoshop ma poi all’atto pratico non essere in grado di tirare fuori design belli ed originali.
Davvero complimenti, la creatività proprio non ti manca.
Argh… quanto ti invidio…
Per raggiungere questi risultati occorre costanza ed impegno, aggiungendo una buona dose di creativitá. Non bisogna invidiare, bensí iniziare a lavorare seriamente. Dato che la grafica per il web é principalmente raster, cerca di imparare ad usare bene Photoshop ed in particolare le funzioni dei livelli, le maschere, i pennelli, i filtri base (spesso ignorati ma potentissimi), il bilanciamento dei colori, l’istogramma ed il texturing. Acquisite queste conoscenze scoprirai da sola le funzionalitá avanzate del software Adobe. Non é difficile, basta seguire YIW, esercitarsi giorno e notte col Photoshop ed avere un pó di ispirazione. Il risultati si noteranno di giorno in giorno. Ció che prima ti sembrava un’utopia, fra qualche mese ti causerá una dose di risate. Consiglio di imitare pure i tutorial, per filo e per segno, testando le proprie conoscenze e magari provando pure a migliorare il progetto, introducendo idee proprie. C’é un creativo nascosto in ognuno di noi, quindi …
Io ci sto provando a mettermi in gioco, sto studiando, leggendo molto (non solo sul web ma anche libri del settore), cerco di mettere sempre in pratica le nuove nozioni acquisite (e su questo punto devo ampiamente ringraziarvi perché YIW mi sta donando molto) ma so che ho ancora tantissima strada da fare perché sono solo all’inizio.
Però non sono d’accordo quando dici che basta imparare gli strumenti di Photoshop, credo che senza la giusta dote di creatività sia impossibile riuscire a fare lavori apprezzabili. Ti porto proprio una mia esperienza personale come esempio ed è quella a cui mi riferivo nel mio precedente commento: ho lavorato per un anno in una web agency e, anche se il mio ruolo era più amministrativo che tecnico, sono entrata spesso in contatto con i due grafici che eseguivano i lavori. Ti posso assicurare che nonostante entrambi avessero diversi anni di esperienza alle spalle e conoscessero benissimo i vari strumenti di Photoshop di cui parli, non gli ho mai visto realizzare dei layout di siti web esteticamente così belli come quello del vostro tutorial di oggi. E la differenza dal punto di vista estetico è tanta, la noto subito.
Questo mi fa supporre che se non hai creatività non potrai mai realizzare certi lavori. Non credi?
P.S. “ti invidio” comunque era detto in senso ironico :)
Quando parlavo di “una buona dose di creativitá” intendevo proprio questo. Hai bisogno di creativitá di base. Il problema é che spesso la strada del designer viene intrapresa senza la dovuta passione. Alla base della creativitá c’é la passione. Io pongo sempre l’accento nella distinzione fra “grafico” e “designer”. Il primo é l’omino in pasto alle tipografie che, per necessitá o limiti, si trova a far disegni di routine, saltellando fra sala sviluppo e stampante postscript. Il secondo é uno spirito libero, colui che vive di passione e colori, colui che intraprende la strada del designer perché sente un pulsare continuo di idee. Tuttavia per trasformare le idee in progetto ed il progetto in illustrazione bisogna conoscere a fondo il photoshop, anche per discostarsi da quel che soprannomino “layout-psd-standard-masticato”, ovvero quel ricorrere in modo banale ad effetti riciclati, messi insieme in modo altrettanto banale (un esempio su tutti, l’ombra e lo smusso su qualsiasi testo). YIW vi insegnerá ad evitare questi orrori da grindhouse e, come il dominio prontamente suggerisce, ispirare voi ed i vostri lavori. Perché visiti YIW? Perché hai passione, e questa per me é una certezza. Stai tranquilla, i risultati arriveranno, e ti auguro un in bocca al lupo per i tuoi prossimi tentativi.
Sto cercando di capire se questa buona dose di creatività fa parte di me o no.
Perchè visito YIW? Come hai giustamente detto la passione è ciò che alimenta maggiormente la mia voglia di mettermi in gioco ed è questa che mi ha spinto ad entrare in questo posto che ho trovato quasi per caso… poi l’indiscussa qualità tecnica di tutti gli articoli che ho letto e, continuo a leggere, ha fatto il resto. :)
Spero di riuscire a mettere in pratica anche solo un po’ di quello che leggo qui, per me sarebbe già un ottimo risultato.
Comunque credo che vi seguirei ugualmente anche se mi dovessi rendere conto di non avere creatività e di non essere all’altezza di certi lavori, solo per la curiosità di conoscere come si lavora a certi livelli.
E crepi il lupo ;)
Complimenti, è venuto fuori un sito molto carino. Mi piace soprattutto come hai realizzato la colonna di destra.
Ma come diavolo hai fatto partendo da quei quattro rettangoli del wireframe ad arrivare a questo layout? Sono rimasto senza parole dopo la lettura di questo articolo.
Questa rubrica è davvero fantastica!
Mi sento in debito e non so come ringraziarvi, posso contribuire in qualche modo? Magari se mi fate avere un vostro banner lo inserisco con piacere sul mio sito, questo posto merita di essere pubblicizzato.
Semplicemente Fantastico!!
Non ci sono parole, grande tutorial e Sarah eccezionale come sempre!
Questo sito su cui ho avuto la fortuna di capitare, per il notevole livello di qualità arricchisce sia gli appassionati come me, sia chi del webdesign ne fa professione.
@Daniele: Ti ringrazio :) spero di trovare il tempo di pubblicare altri tutorial per la realizzazione grafica di layout in photoshop. Soprattutto per chi è alle prime armi, credo sia molto più utile far vedere come si fanno le cose in modo diretto, senza tanta teoria.
@Arazz: Ora però mi devi dire qual’era la domanda! La curiosità è donna..;)
@Cry: Concordo con Daniele, parola per parola. E, come lui, ti consiglio di ricalcare i tutorial. Metto ogni passo proprio per darvi la possibilità di provare voi stessi, di sperimentare.
@Grazz: Grazie :)
@Lucky: Ma come, mi chiedi come ho fatto? Ma se ve l’ho fatto vedere, passo dopo passo? :D Scherzi a parte, la vera difficoltà è nell’iniziare. Ti assicuro che, con l’esperienza, anche l’ispirazione e le idee saranno sempre più facili da mettere in pratica.
Per quanto riguarda i banner, sono ormai in molti a chiederceli per pubblicizzarci e valorizzare in qualche modo il nostro lavoro. Ci stiamo lavorando e presto saranno disponibili. Intanto ti ringraziamo, è un pensiero carino. :)
@Silver: Ti ringrazio a nome di tutto lo staff :) teniamo molto alla qualità di questa community e sapere che non passa inosservata ci fa davvero piacere.
Ricalcherò il tuo tutorial passo dopo passo e se riesco proverò anche a speriementare qualcosa di mio.
Se non viene fuori qualcosa di troppo mostruoso magari ti faccio vedere il risultato.
Complimenti!
Finalmente un ritrovo per tutti coloro che masticano il web!
Your inspiration web grandioso!
Bellissimo articolo , come sempre, complimenti :D l’unico dubbio è sulla visualizzazione delle zone A, B e C. Non ho ben capito. Quando visualizzo una pagina, questa viene visualizzata a partire dall’angolo in alto a sinistra, quello che non entra nello schermo viene nascosto. La zona A si trova al centro, non parte dall’angolo in alto a sinistra, come si fa a far partire la visualizzazione all’inizio della zona A per risolizioni di 1024? e così per le altre zone? spero di essermi spiegato :D ringrazio in anticipo chi voglia rispondere :D
Ciao Luca,
tramite la proprietà background-position dei CSS è possibile impostare la posizione iniziale di un’immagine di sfondo.
Impostando il valore centrato in questo modo:
background-position: top center;Spero di essere stato chiaro.
Grazie Nando! chiarissimo, lo provo subito :D
Fantastico. Ho sempre pensato che il lavoro più difficile sta nella ricerca dell’ispirazione, e di quei particolari molto efficaci che migliorano notevolmente la grafica (in questo caso i doodles). Devo allenarmi molto su questo aspetto “inspiration”. :)
Quindi se io salvo la bozza grafica e la salvo per il web a 1680×1200 … faccio un’anteprima nel browser e mi viene fuori l’odiosa barra laterale… ( premetto che ho un portatile con risoluzione 1366×768 ) chiunque avrà un portatile come me vedrà l’odiosa barra??? e poi come si salvano per il web in jpg? e ancora…per presentare solo la bozza grafica non ho bisogno di salvarla per il web… giusto?
Ammetto che sono un bel pò confusa… O.o