Come realizzare un sito in stile corporate/business?
Lunedì scorso abbiamo inaugurato la nuova rubrica dedicata all’analisi dei diversi stili del web design spiegando che cos’e il “corporate/business” style e quali sono i tratti caratteristici di questo stile. Come premesso [e promesso] oggi disegneremo un layout in Photoshop perfetto per un sito aziendale: sobrio, pulito e semplice da progettare.
DownloadApriamo quindi un nuovo documento di 1680px, con una risoluzione di 72 dpi e impostiamo le due guide a 360px dai margini laterali; all’interno della sezione centrale, di 960px, inseriremo tutti i contenuti del sito che devono essere necessariamente visualizzati dall’utente indipendentemente dalla risoluzione del suo monitor.
In questo modo 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 – limiteremo i contenuti principali in una dimensione di 960px, così che anche chi naviga con risoluzioni più basse possa visualizzare il sito senza dover ricorrere al fastidioso scrolling orizzontale della finestra del browser.
Apriamo il framework 960 grid system, che puoi scaricare su questo sito; nel nostro caso utilizziamo il template a 12 colonne. Per sapere come utilizzare questo framework ti consiglio di leggere l’articolo di Nando sull’argomento.
Inseriamo il template nel nostro file e posizioniamolo nella sezione centrale della pagina, lasciando esattamente 10px di margine da entrambi i lati. Ti consiglio di bloccare il gruppo (cliccando sull’icona a forma di lucchetto) così che le colonne non vengano spostate per errore.
Iniziamo a realizzare il nostro layout: con lo strumento rettangolo disegniamo una barra orizzontale alta 148px e larga 1680, che posizioniamo in alto nel documento. Assegniamo alla forma una sfumatura lineare da un grigio più scuro ad un grigio più chiaro, come mostrato nel seguente screenshot:
Adesso impostiamo anche una leggera ombreggiatura:
Inseriamo il logo della nostra Società (Your Inspiration Web per l’occasione si trasforma in un’agenzia di credito/servizi finanziari chiamata Your Inspiration Corporate) e disegniamo, sempre con lo strumento rettangolo, un’altra sezione (alta 40px) che posizioniamo sotto il logo e che fungerà da background al menu di navigazione.
Assegniamo una sfumatura lineare anche a questo rettangolo, con le seguenti impostazioni:
Il risultato è il seguente:
Creiamo adesso la sezione centrale del nostro layout. Sempre con lo strumento rettangolo disegniamo una sezione alta 286px, a cui assegniamo una sfumatura azzurra con un effetto radiale in modo da creare un leggero bagliore nella zona dove, in seguito, inseriremo l’immagine rappresentativa dell’azienda.
La scelta del colore blu ovviamente non è casuale: abbiamo già detto che il blu e il verde sono le tonalità piu indicate per un layout business dato che infondono, a livello inconscio, sicurezza e stabilità aziendale. D’altronde dato che ci occupiamo di servizi finanziari è preferibile evitare colori accessi e troppo vivaci, primo fra tutti il rosso, colore da sempre associato al pericolo e ai segnali d’allarme.
Il layout sta cominciando a prendere forma:
Per rappresentare la nostra società voglio inserire l’immagine di alcune persone, dall’aspetto professionale e positivo, capace di dare all’utente una sensazione visiva di familiarità e sicurezza.
Scegliamo un’immagine gratuita da sxc.hu che, ahimè, è su sfondo bianco. Per inserirla nella nostra testata blu dobbiamo quindi eliminare il background dell’immagine; per farlo potremmo utilizzare lo strumento bacchetta magica ma il risultato purtroppo non è dei migliori. Lo strumento penna garantisce la massima precisione ma richiede una certa manualita’.
In questo caso è preferibile utilizzare il filtro “Estrai“ (menu Filtri >> Estrai) che ci permette di lavorare in modo abbastanza semplice sull’immagine.
Come lavorare con il filtro “Estrai”
Lavorare con questo filtro non e’ difficile e per ottenere buoni risultati occorre solo un po’ di esercizio. Per cominciare ti consiglio di aumentare lo zoom in modo da selezionare con maggior precisione. Per farlo basta cliccare sull’icona della lente di ingrandimento sulla barra a sinistra, premere CTRL e cliccare con il mouse. Rimpiccioliamo un po’ la dimensione del pennello (di default e’ impostato a 20, troppo grande per immagini con molti dettagli) e cominciamo a evidenziare il più accuratamente possibile i bordi dei nostri “promoter”.
Se non sei soddisfatto delle curve o hai sbagliato qualche passaggio, puoi sempre tornare indietro (CTRL +Z) o usare lo strumento gomma per cancellare i bordi. Una volta evidenziata tutta l’immagine, clicca sullo strumento secchiello per riempire l’immagine selezionata. Dovresti avere qualcosa del genere:
Premendo su okay tutto cio’ che e’ esterno alla selezione rossa verra’ automaticamente cancellata, e avremo l’immagine su background trasparente.
Il risultato finale?
Inseriamo quest’immagine all’interno della sezione blu, ovviamente adattandone le dimensioni ed eliminandone una piccola parte.
Accanto ai nostri promoter inserisco un breve testo di descrizione che avrà il compito di dare informazioni visive ed immediate agli utenti che visiteranno il nostro sito: un piccolo slogan, un messaggio di benvenuto: qualsiasi cosa possa mettere a proprio agio e far capire ai navigatori chi siamo e cosa facciamo.
Aggiungiamo adesso il menu di navigazione del nostro sito che deve essere semplice e intuitivo, senza troppi e inutili estetismi:
Per richiamare il brand dell’azienda, inseriamo una parte del nostro logo in trasparenza vicino allo slogan: in questo modo evidenziamo il nostro marchio e arricchiamo un po’ la grafica della nostra sezione centrale.
Il layout sta prendendo sempre più forma ed e’ veramente accattivante, non trovi? A questo punto dobbiamo creare tre sezioni dedicate ai servizi che offriamo: conto, prestiti e mutuo.
Aiutandoci con la griglia dividiamo il layout in tre sezioni identiche della dimensione di 300px e personalizziamo ogni sezione inserendo tre immagini rappresentative:
Sotto le immagini inseriamo la descrizione del servizio che offriamo. In questa fase gioca un importantissimo ruolo la tipografia: utilizza i grassetti per evidenziare i concetti e le parole più importanti delle descrizioni e differenzia per colore i link in modo da rendere il testo più leggibile.
Inseriamo un footer molto semplice e il layout di Your Inspiration Corporate e’ finalmente pronto: vediamolo insieme!
Conclusioni
Dopo aver analizzato le caratteristiche di un buon sito “corporate style”, in pochi step abbiamo realizzato un layout semplice e professionale per un sito aziendale. Il risultato e’ una pagina web dall’estetica gradevole e allo stesso tempo funzionale.
DownloadLa prossima settimana non perderti l’articolo (e il relativo tutorial su come disegnare un layout) sullo stile grunge nel web design!
Gli altri articoli di questa guida:
- Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style?
- Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style?
- Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0 style?
- Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style?
- Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style?
- Gli stili nel web design: le caratteristiche dell’organic style | Come realizzare un sito in organic style?
- Gli stili nel web design: le caratteristiche dello stile tipografico | Come realizzare un sito in typography style?
- Gli stili nel web design: le caratteristiche dell’illustration style | Come realizzare un sito in illustration style?
L'autore
53 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by FambaDesign: RT @YIW Come realizzare un… -
Gli stili nel web design: le caratteristiche del corporate style | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Gli stili nel webdesign: le caratteristiche dello stile grunge | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
February’s Fresh Photoshop Web Layout Tutorials
[...] 32. How to create a corporate / business style layout [...] -
Come realizzare un layout in stile grunge? | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Gli stili nel webdesign: le caratteristiche dello stile web 2.0 | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Come disegnare un layout in stile web 2.0? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Da Psd a Xhtml: come sezionare un layout con Photoshop? | Your Inspiration Web
[...] tecniche per esportare e realizzare nel modo più semplice possibile un intero layout, ovvero “Your Inspiration Corporate”, realizzato da… -
Gli stili nel webdesign: le caratteristiche dello stile vintage | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Come disegnare un layout in stile vintage? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Gli stili nel web design: le caratteristiche di un sito in stile magazine | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
From PSD to XHTML: How cut a layout with Photoshop? | Your Inspiration Web
[...] try to apply the concepts just described the layout PSD chosen YIW Corporate. Since this is an explanation of “hands-on (or… -
Come disegnare un layout in stile magazine? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Da Psd a Xhtml: come trasformare il layout in XHTML+CSS? | Your Inspiration Web
[...] lo strumento “sezioni” di Photoshop, i vari componenti del nostro layout “YIW Corporate“. Oggi ti “sporcherai le mani” con… -
Gli stili nel web design: le caratteristiche dello stile organic | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...] -
Come disegnare un layout in stile organic? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style? [...]
Ottima rubrica!
Bel layout, semplice e pulito.
Grazie Francesco ;)
Perchè se lo installo semplicemente così come scaricato, no da:
JInstaller: :Install: Non è stato possibile trovare il file di setup XML
ottimo Sarah,
qualora volessi utilizzare il tema per una variante di questo
http://www.websitebysilver.com/business-template-facile-per-website-x5
sarebbe possibile?
Certo Silver, basta citare la fonte e puoi utilizzare il template per qualsiasi cosa ;)
A presto
volevo farti miei complimenti per il bellissimo articolo!!!
spiegato in modo chiarissimo!!
bellissimo anche il layout semplice e pulito!!
bravissima
Ciao Pablo, benvenuto e grazie :)
Se ti è piaciuto il tutorial non perdere quelli delle prossime settimane: come disegnare un layout in stile grunge, in stile vintage, ecc ecc ;)
Complimentoni,veramente un eccellente lavoro!
Grazie Lùca :) felice che ti piaccia!
Ottimo l’articolo, mi è piaciuto lo stile tutorial che spiega passo passo i vari passaggi della realizzazione. Un articolo così è utilissimo a chi vuole imparare questo lavoro bene fin dall’inizio. Ne faccio tesoro e lo sottopongo al junior che c’è in ufficio per utilizzarlo nella sua formazione interna.
Ciao Sharon, grazie per essere passata e per le belle parole.
Ps. Formazione al junior? Alla fine di questa serie di articoli allora ti invierò fattura :D
ci starebbe anche un bel articolo su come montarlo!!!
renderesti felici molte persone!!!!! : )
Il tuo è un commento disinteressato, tu non sei tra queste persone, vero? :D
ps. Si vedrà, chi lo sa…magari uno degli sviluppatori di YIW coglierà il tuo invito ;)
Avevo già pensato di chiederlo a Sara :)
Il nostro Jù ci ha preso gusto :)
si il mio era un commento disinteressato….mi sembrava carino far vedere tutto il processo!!! dalla realizzazione fino al montaggio!!!! :)
soprattutto sarebbe un bellissimo aiuto per chi è all’inizo è vuole imparare, visto che tu/voi siete bravissimi!!! :)
Pablo, non ti giustificare, la mia era una battuta :)
Anzi, mi sembra di aver capito che Just si è offerto (tempo permettendo) di mettere in codice il layout come da te proposto..
scherzavo ;)
Infatti Pablo, non c’è bisogno di giustificarti: tutti noi siamo stati principianti, e io ho preso tanto dalle varie community sparse per la rete. Mi sembra quantomeno giusto (e cortese) cercare di restituire il favore (per le poche cose che so ;) )
D’altra parte è proprio per la condivisione di idee che è nato YIW ;)
Ottimo lavoro… Il layout è d’effetto pur essendo semplice e pulito…
Ciao Lauri, benvenuta e grazie! Complimenti anche a te, il tuo portfolio è molto carino [poi io sono un’amante del nero abbinato al rosa shocking, ormai si sa] :)
A presto
ma la mia non era una giustificazione, ma bensì una puntualizzazione..niente di più niente di meno!!! : )
Grazie mille sarah… Anche il tuo portfolio è molto bello per non parlare dei lavori che hai realizzato che sono splendidi… Io sono solo agli inizi spero di imparare molto, anche grazie ad YIW… Grazie ragazzi siete un punto di riferimento…
Lauri, ma quanti complimenti :) grazie mille, sei gentilissima. Sono certa che imparerai molto, non solo perchè sei molto giovane e agli inizi ma anche perchè in questo campo è essenziale migliorarsi continuamente :) Siamo felici di leggere parole come le tue, sono la ricompensa più bella!
Grazie, a presto!
Ciao,
stavo provando a fae questo bellissimo tutorial. Solo che dopo averlo importato in html sono incappato ini un problema :(. Come scritto che tutorial ho messo una risuluzione 1680px , il problema che se guardo i sito sul mio portatile che ha una risoluzione minore mi esce la scrollbar orizzontale. in cosa sbaglio? Come vai nel vostro sito nn comprare la scroll ? eppure se non sbaglio anche qesto ha una risuluzione 1680px. :(
Grazie.
Dario.
Ciao Dario,
per non fare scrollare il background nelle risoluzioni inferiori, devi settare alcune impostazioni all’interno del tag body, cosi come fatto anche da noi per il nostro background.
body { background-color: #fff; background-image: url("percorsobackground.jpg"); background-repeat: no-repeat; background-position: center top; }In particolare devi ricordarti di settare la posizione del background con i valori “center top” in modo che l’immagine di sfondo venga centrata.
Facci sapere se adesso e’ tutto okay :)
Eccomi di nuovo,
Grazie per il consiglio
ho fatto come hai detto tu, non mi da piu la scrollbar ma mi taglia l’immagine che ho nell’header… non la ridimensiona. :(
Un aiutino? :(
Ciao Dario,
puoi inviarci un link e farci vedere dov”e’ il problema? Se vuoi puoi inviarlo tramite il modulo contatti di YIW.
Innanzitutto complimenti (come sempre :D)
solo una domanda: non riesco a capire il criterio con il quale hai allineato il menu, mi sembra storto rispetto alla 960 grid nonostante nel layout sia allineato bene……puoi fare chiarezza nella mia testolina bacata visto che sono una frana con gli allineamenti? (non imparerò mai :D)
Grazie e ancora complimenti
quello che non riesco (e non riuscirò mai) a capire è proprio il criterio con il quale si assegna lo spazio tra le varie voci del menu in modo da rendere il tutto armonico :(
ciao sara,
come faccio ad inserire la 960 grid SOLO all’interno dello spazio centrale di 960 px???…quando provo ad applicare la griglia mi si apre un nuovo documento interamente ricoperto da essa.
cm faccio ad applicare la 960 grid in un punto preciso del canvas?
grazie e complimenti per il vostro stupendo sito!!!
Ciao giobix, apri il file .psd della griglia e sblocca i singoli livelli, altrimenti non puoi spostare le colonne. Per sbloccare i livelli, nella palette dei livelli seleziona ogni livello e clicca sull’icona a forma di lucchetto.
Finestra > Ordina > Affianca orizzontale, cosi avrai i due documenti uno accanto all’altro. A questo punto vai nel documento della griglia e seleziona il gruppo contenente tutte le colonne (attento a non spostare le singole colonne, adesso che sono sbloccate), trascinalo all’interno del tuo layout e spostalo all’interno dello spazio di 960px.
E’ piu facile a dirsi che a farsi :)
grazie 1000 x la soluzione sarah!!!
…io invece avevo risolto il problema in questo modo, ke poi è molto simile a quello che mi hai consigliato tu:
1)apro un nuovo documento e inserisco le guide dove desidero;
2)”lancio” la griglia e la allineo manualmente alle guide cn lo strumento move tool (v)
grazie ancora…il vostro sito è davvero utilissimo!!!
ciao sara,
ank’io, come Tizionario al commento #30, non riesco bene a capire ke criterio utilizzare per assegnare lo spazio tra le varie voci del menù…in realtà un metodo l’ho trovato, uso lo zoom fino a poter contare i singoli pixel e mantenere la stessa distanza(lo stesso numero di pixel/quadratini :-p )…avresti un metodo alternativo da consigliarmi?
grazie e, ovviamente, ancora complimenti per i tuoi stupendi lavori!
sarahhhhhhhhhhhhhhh!!!…sto ancora aspettando 1 tua rispostaaaa :-P
Scusa, mi è sfuggita la domanda :)
Non sono ben certa di aver capito, comunque nel caso specifico ho allineato il menu al centro; per lo spazio tra le voci di menu dipende dallo spazio che abbiamo a disposizione per il menu di navigazione, e ovviamente lo spazio tra una voce e l’altra dev’essere lo stesso. Se dai un tot di spazi tra la prima e la seconda voce, poi puoi selezionare e copiare tali spazi e incollarli tra le altre voci, senza dover contare i pixel e impazzire ogni volta :)