Crea un layout di sito Web pulito in Photoshop: progettare un layout di sito Web è molto più che organizzare immagini colorate e riempire del testo nelle cornici di testo. È un approccio che parla di volumi di affari dei tuoi clienti. I colori e la grafica del sito Web definiscono la natura del business, mentre la qualità del design e il facile flusso di navigazione del sito Web dovrebbero legare l'utente con l'organizzazione e trasformarlo in un potenziale cliente.
Progettare un layout del sito web bello e facilmente accessibile è obbligatorio per ogni aspirante web designer. Questo tutorial ha lo scopo di guidarti attraverso il processo di creazione di un sito Web semplice e pulito da zero. Durante il processo, imparerai punti importanti che ti aiuteranno ulteriormente ad acquisire maggiori conoscenze sulla progettazione web. 
Annota le tue esigenze prima di progettare un layout del sito web
Prima di iniziare a progettare un layout del sito Web, è necessario sapere come apparirà il sito Web e quali sono gli argomenti da includere nel sito Web. È cruciale fare un elenco di elementi di layout del sito Web di cui il cliente ha bisogno sul suo sito Web. Insieme a questo, la qualità di un buon designer è quella di preparare una derisione dell'intero sito Web prima che inizi a lavorare sul modello finale.
Varie società di progettazione adattano vari livelli di strategie di pre-progettazione, che possono contenere wireframe, prototipazione, prototipo, versioni beta e molto altro. In questo tutorial, creeremo una versione prototipo prima di dare il via al design del modello originale. Sto usando le sfumature di grigio che consentono di identificare il blocco mockup
Tela
Anni prima, mentre c'erano pochi sistemi operativi e dispositivi limitati per accedere ai siti Web, le dimensioni della pagina erano fissate a una o due dimensioni. Oggi lo scenario è completamente diverso. Gli utenti finali accedono ai siti su desktop di varie dimensioni, telefoni cellulari, iPad e tablet. In questa situazione diversificata, non c'è alcuna possibilità che tu possa fissare la tua pagina web a una dimensione particolare. Ma ci sono alcune dimensioni standard del settore applicate per ogni dispositivo. Troverai lentamente la tua taglia preferita o il tuo cliente potrebbe farti riferimento a un sito web per imitare le dimensioni.
In questo caso, stiamo lavorando alle seguenti dimensioni. Non preoccuparti per l'altezza in quanto cambierà nel tempo. Più contenuto aggiungi al tuo sito Web, maggiore sarà l'altezza.
Ricorda che è comune scorrere la pagina in verticale, quindi potresti non fissare una determinata altezza per la tua pagina web a meno che tu non voglia che l'utente scorri la tua homepage come Google. Tuttavia, è necessario non scorrere in orizzontale. Quindi, limita la larghezza secondo gli standard di settore e non diventare creativo con lo scorrimento orizzontale.
Per il Web, la risoluzione è limitata a 72. Di recente sono state trovate immagini e pagine a risoluzione più elevata su iPad e alcuni tablet. Ma è in un'occasione rara, ed è meglio attenersi al 72 considerando la velocità di Internet in tutto il mondo.
Seleziona i file usando Ctrl + A e disegna le guide allo stesso modo in tutto il modello. Un sito Web dovrebbe essere organizzato in modo ordinato con ogni elemento organizzato in modo coerente tra loro. E le linee guida per il layout del sito Web ti aiutano a ottenerlo facilmente.
Prepara il tuo mockup
Posizionare il file di mockup sul modello originale consente di risparmiare molto tempo. La progettazione del tuo sito Web diventa così semplice che finirai per completare il framework in pochi minuti. Tuttavia, il mockup ti aiuterà solo a progettare i frame. Completare gli elementi del design con i dettagli, la disposizione dei tipi e l'allineamento richiederà più tempo rispetto al disegno del layout del sito Web.
Combinazione di colori e altre scelte
La prossima cosa da fare dopo aver preparato il tuo framework è scegliere una combinazione di colori. Ma è meglio preparare i colori prima di iniziare a lavorare sul design.
Il tutto si riduce al messaggio che, prepara le tue pistole prima di iniziare il design. Tutto ciò che include icone, immagini e scelte di colore dovrebbe essere pronto prima di iniziare a lavorare. Organizzare e pianificare il tuo lavoro farà risparmiare più tempo e si concentrerà sulla progettazione senza ostacoli nel mezzo.
La scelta dei colori può essere una scelta del designer se l'azienda è nuova e non ha un'identità aziendale prima. In alcuni casi, i clienti danno un'idea di quali sfumature dovrebbero essere il logo o lo sfondo. Nel caso di aziende esistenti in cui potrebbe essere necessario riprogettare un intero sito Web, potrebbe essere necessario scegliere gli stessi colori in base alle esigenze del cliente.
Esistono numerosi siti Web che possono aiutarti a scegliere milioni di combinazioni di colori dagli archivi. Prova i seguenti siti Web per godere di un'ampia scelta di combinazioni di colori.
Color.adobe.com
Colourlovers.com
Qui ho scelto alcune tonalità di blu da utilizzare per il sito Web. L'intero sito Web verrà pianificato con la seguente combinazione di colori. Non dimenticare di scegliere tre o quattro diverse combinazioni di colori, poiché non sappiamo quale client di colore preferirà. Una volta che il cliente finalizza una combinazione di colori, salva i valori di tonalità e assicurati che i colori abbiano un ruolo vitale in ogni verticale dell'organizzazione. Soprattutto nell'identità aziendale.
Processo di progettazione
Esistono molti modi per portare avanti i tuoi designer. Non ci sono regole di layout del sito Web rigide e veloci per definire o seguire il processo di progettazione, è principalmente un processo che il designer sceglierà per la sua comodità.
Alcuni designer vogliono costruire interi blocchi e cornici e iniziare a lavorare sui dettagli nella seconda fase seguiti dal tipo e infine dagli allineamenti e dalle regolazioni. Ad alcuni piace finire una parte della pagina alla volta e portarla alla parte successiva. Stiamo seguendo il secondo stile.
Finiremo il sito web nei seguenti passaggi
- Intestazione e piè di pagina
- Cosa facciamo
- Servizi
- Modulo
- notizia
- footer
Intestazione e piè di pagina
La regola empirica per definire le dimensioni dell'intestazione o del banner è lasciata alla tua creatività. Secondo le ultime tendenze, i siti Web vengono visualizzati con un'immagine enorme che copre l'intero schermo del computer. Lo stile è indicato come immagine dell'eroe, che è diventato abbastanza popolare di recente.
In questo caso, abbiamo iniziato con un'intestazione di 120 pixel di altezza e un'altezza di 550 pixel per il banner. La larghezza deve corrispondere alle dimensioni del documento.
I disegni con tinta unita hanno un aspetto piatto che non si abbina bene con cornici o immagini più grandi. Per evitare l'aspetto piatto, ho applicato il livello di sovrapposizione gradiente sulla parte superiore del banner. Dà al banner una profondità che si trasforma lentamente da una tonalità all'altra.
Successivamente, abbiamo iniziato a importare il logo e posizionarlo nell'angolo in alto a sinistra dell'intestazione e un altro logo più grande al centro del banner. È inoltre possibile osservare le forme vettoriali del layout del sito Web nell'angolo in alto a destra, utilizzate per condividere i collegamenti dei social media.
A questo punto, ho finito di aggiungere il tipo nella parte Intestazione e banner. Il nome dell'azienda, il messaggio del marchio, con collegamenti e servizi, vengono aggiunti nel testo. Puoi anche osservare un pulsante trasparente sul banner.
Il testo semplice o troppo di tipo senza funzioni speciali rovinerà l'aspetto della tua pagina web; la pagina annoierà presto l'utente, il che potrebbe consentirgli di lasciare rapidamente il tuo sito. Scopri la forma vettoriale che ho aggiunto ai collegamenti ai servizi in alto a destra del banner. Lo stile è semplice, ma riempie il vuoto evitando l'aspetto banale.
Scegli un'immagine adatta all'azienda. Ci sono milioni di immagini stock disponibili sul Web e non ci vorrà troppo tempo per trovare un'immagine adatta alle tue esigenze.
Nel mio caso, ho trovato un'immagine di alta qualità che penso andrà bene con il mio sito web. Non ho un tema aziendale per il sito Web, quindi sono libero di scegliere qualsiasi immagine che appaia bene sul banner post.
Prova a scaricare alcune immagini HD da siti di immagini stock gratuiti indicati di seguito
www.pixabay.com
La fusione è un'arte che dovresti padroneggiare per produrre bellissimi banner. Qui ho mescolato tre livelli per ottenere l'effetto mostrato nell'immagine sopra. Ecco cosa ho fatto
- Posiziona il livello dell'immagine sopra il banner di colore blu
- Posiziona la sovrapposizione sfumatura sopra l'immagine
- Cambia l'opacità dell'immagine del 40 percento e cambia il metodo di fusione in modo diverso.
- Dai un'occhiata alla palette dei livelli nell'immagine sopra per capire come i livelli sono sovrapposti.
Ecco come appariranno Header & Banner quando abbiamo appena finito di lavorarci. Stiamo lavorando su una parte alla volta ed è tempo di passare al livello successivo.
L'allineamento è cruciale quando si tratta di scrivere; avere un'idea di come dovrebbe apparire il tuo sito e di allineare il testo prima di avviarlo. A questo livello, ho usato due diverse cornici di testo, entrambe allineate a sinistra.
Il prossimo passo è la progettazione della parte servizi della pagina web. Ho progettato una stella metallica in tonalità di grigio per mostrare i vari servizi dell'azienda. L'intenzione dietro l'utilizzo del simbolo a stella è di servizi a 5 stelle.
Quando si tratta di allineare il testo Le guide sono i tuoi migliori amici. La coerenza all'interno del tipo e degli oggetti può essere ottenuta facendo buon uso dello spazio bianco e uguali spazi tra gli elementi del design. Ho usato molte linee guida per il layout del sito Web per vedere che tutti gli oggetti nella cornice dovrebbero mantenere spazi e distanze adeguati che fanno emergere una buona quantità di spazio bianco.
Il prossimo passo del nostro design è creare il campo Modulo. In questo caso, sto lavorando in opposizione al metodo utilizzato nella progettazione del banner. Posizioneremo il livello dell'immagine sotto il livello colorato solido e applicheremo un livello sfumato sopra i due livelli per ottenere un aspetto migliore. Giocare con i metodi di fusione è sempre essenziale quando si posizionano immagini più grandi.
La scelta delle immagini per questo sito non ha alcun tema specifico ad esso correlato. Penso che questa immagine aiuterà il sito ad apparire migliore.
Posiziona l'immagine sotto il livello di sfondo colorato. Per fissare l'immagine esattamente alla dimensione del livello colorato, utilizzare le opzioni di mascheramento del livello.
Dai un'occhiata alla palette dei livelli nell'immagine sopra. Il solido strato di colore blu si trova nella parte superiore dell'immagine, il metodo di fusione viene convertito in sovrapposizione e l'opacità viene ridotta al 65 percento.
Ho usato la mappa del gradiente sopra i due livelli. Il metodo di fusione viene modificato in tonalità e l'opacità rimane la stessa.
La casella del modulo è pronta, il che ci porta alla fine del quarto livello nella progettazione del nostro sito Web.
Il nostro livello successivo è costituito da due semplici cornici di testo. Assomiglia al livello due della pagina Web e ho usato allineato le due caselle simili alla parte superiore. Mantenere la coerenza nell'allineamento è un buon modo di usare lo spazio bianco.
Quando abbiamo raggiunto la parte finale della pagina, è tempo di rivedere le dimensioni del piè di pagina. Il progettista deve pianificare l'altezza del piè di pagina in base ai collegamenti che dovrebbe usare lì. In questo caso, ho dato un'altezza di 170 pixel al mio piè di pagina. La larghezza rimane la stessa del sito Web.
Inserisci i collegamenti e le immagini secondo le tue esigenze.
Con questo, abbiamo concluso la parte di progettazione del nostro sito Web. Le combinazioni di colori che abbiamo usato sono minime, utilizziamo molto spazio bianco nel nostro design e abbiamo aggiunto un testo semplice con caratteri minimi. L'intenzione è progettare una pagina Web pulita, che speriamo sia soddisfatta.
Dai di nuovo un'occhiata al design dell'intera pagina in basso
