Come creare un layout di sito Web pulito in Photoshop

Creare un layout di sito Web pulito in Photoshop-Progettare un layout di sito Web è più di organizzare immagini colorate e riempire un po ‘ di testo nelle cornici di testo. È un approccio che la dice lunga sugli affari del tuo cliente. 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 all’organizzazione e trasformarlo in un potenziale cliente.

Progettare un layout di sito web bello e facilmente accessibile è obbligatorio per ogni web designer wannabe. Questo tutorial ha lo scopo di portarvi attraverso il processo di creazione di un sito web layout semplice e pulito direttamente da zero. Durante il processo, imparerai punti importanti che ti aiuteranno a ottenere ulteriori conoscenze sulla progettazione web.

Annota le tue esigenze prima di progettare un layout del sito web.

Prima di iniziare a progettare un layout di sito web, è necessario sapere come apparirà il tuo sito web e quali sono gli argomenti da includere nel sito web. È fondamentale per fare un elenco di elementi di layout del sito web il vostro cliente ha bisogno sul suo sito web. Insieme a ciò, la qualità di un buon designer è quella di preparare un mock dell’intero sito Web prima di iniziare a lavorare sul modello finale.

Varie aziende di progettazione adattano vari livelli di strategie di pre-progettazione, che possono contenere filo framing, prototipazione, mockup, versioni beta e molto altro ancora. In questo tutorial, creeremo una versione mock-up prima di dare il via al design del modello originale. Sto usando le sfumature di grigio, che consentono di identificare il blocco mockup.

Canvas

Anni prima, mentre c’erano pochissimi 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 a siti su desktop di varie dimensioni, telefoni cellulari, iPad e tablet. Non c’è alcuna possibilità che tu possa correggere la tua pagina web a una dimensione particolare in questa situazione diversa. Ma ci sono alcune dimensioni standard del settore applicate per ogni dispositivo. Lentamente troverete la vostra dimensione preferita, o il vostro cliente può fare riferimento a un sito web per imitare le dimensioni.

In questo caso, stiamo lavorando sulle seguenti dimensioni. Non preoccuparti dell’altezza, poiché cambierà nel tempo. Più contenuti si sta aggiungendo al tuo sito web, più l’altezza sarà.

Ricorda, è comune scorrere la pagina verticalmente, quindi non puoi correggere un’altezza particolare per la tua pagina Web a meno che non desideri che l’utente scorra sulla tua home page come Google. Ma è necessario non scorrere orizzontalmente. Quindi, limita la larghezza secondo gli standard del settore e non essere creativo con lo scorrimento orizzontale.

Per il web, la risoluzione è limitata a 72. Ci sono immagini ad alta risoluzione e pagine trovate su iPad e poche compresse di recente. Ma è in una rara occasione, ed è meglio attaccare con 72 considerando la velocità di Internet in tutto il mondo.

Selezionare i file utilizzando il comando Ctrl + A e disegnare le guide in modo uguale in tutto il modello. Un sito web dovrebbe essere organizzato in modo ordinato con ogni elemento organizzato in modo coerente l’uno con l’altro. E le linee guida di layout del sito web aiutano a ottenere facilmente.

Prepara il tuo mockup.

Posizionare il file mockup sul modello originale ti aiuta a risparmiare molto tempo. Progettare il tuo sito web diventa così facile che si finirà per completare il quadro in pochi minuti. Tuttavia, il mockup ti aiuterà solo a progettare i frame. Completare gli elementi di design con dettagli, disposizione del tipo e allineamento richiederà molto tempo rispetto al disegno del layout del sito web.

Combinazione di colori e altre scelte

La prossima cosa da fare dopo aver preparato il framework è scegliere una combinazione di colori. Ma è meglio preparare i tuoi colori prima di iniziare a lavorare sul design.

Il tutto si riduce al messaggio che, prepara le tue pistole prima di iniziare la progettazione. Tutto, comprese le icone, le immagini e le scelte di colore, dovrebbe essere pronto prima di iniziare a lavorare. Organizzare e pianificare il vostro lavoro farà risparmiare più tempo e si concentra sul design senza ostacoli in mezzo.

Scegliere i colori può essere la scelta di un designer se l’azienda è nuova e non ha un’identità aziendale prima. I clienti danno un’idea di quali sfumature vogliono che il logo o lo sfondo dovrebbero essere in alcuni casi. In materia di aziende esistenti in cui potrebbe essere necessario ridisegnare un intero sito web, potrebbe essere necessario scegliere gli stessi colori secondo le esigenze del cliente.

Ci sono numerosi siti web che possono aiutare a scegliere milioni di combinazioni di colori dagli archivi. Prova i seguenti siti web per godere di una vasta scelta di combinazioni di colori.

Colore.Adobe.com

Colourlovers.com

Qui ho scelto alcune tonalità di blu da utilizzare per il sito web. L’intero sito sarà pianificato all’interno della seguente combinazione di colori. Non dimenticare di scegliere tre o quattro diverse combinazioni di colori, poiché non sappiamo quale colore preferirà il cliente. Una volta che il cliente finalizza una combinazione di colori, salvare i valori di tonalità e assicurarsi che i colori svolgono un ruolo vitale in ogni verticale dell’organizzazione, in particolare nella corporate identity.

Processo di progettazione

Ci sono molti modi per portare avanti i vostri progettisti. Non ci sono regole di layout del sito web duro e veloce per definire o seguire il processo di progettazione; è per lo più un processo che il progettista sceglierà per la sua convenienza.

Alcuni progettisti vogliono costruire l’intero blocchi e cornici e iniziare a lavorare sui dettagli nella seconda fase, seguita dal tipo e, infine, allineamenti e regolazioni. Alcuni amano finire una parte della pagina in una sola volta e portarla alla parte successiva. Stiamo seguendo il secondo stile.

finiremo il sito web nei seguenti passi

• Intestazione & Piè di pagina
• Cosa facciamo
• Servizi
• Form
• News
• Piè di pagina

Intestazione & Piè di pagina

La regola del pollice per definire le dimensioni dell’intestazione o del banner è lasciato alla vostra creatività. Secondo le ultime tendenze, i siti Web appaiono con un’immagine enorme che copre l’intero schermo del computer. Lo stile è indicato come immagine eroe, che è diventato molto popolare di recente.

In questo caso, abbiamo iniziato con un’intestazione di altezza di 120 pixel e un’altezza di 550 pixel per il banner. La larghezza deve corrispondere alla dimensione del documento.

I disegni con tinta unita hanno un aspetto piatto che non va bene con cornici o immagini più grandi. Per evitare l’aspetto piatto, ho applicato un 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. Puoi anche osservare le forme vettoriali del layout del sito Web nell’angolo in alto a destra, che vengono utilizzate per condividere i link dei social media.

In questa fase, ho finito di aggiungere il tipo nella parte Banner Header &. Il nome della società, il messaggio del marchio, con collegamenti e servizi, vengono aggiunti nel testo. Puoi anche osservare un pulsante trasparente sul Banner.

Il testo normale o troppo di tipo senza caratteristiche speciali rovinerà l’aspetto della tua pagina web; la pagina presto annoierà l’utente, il che potrebbe fargli lasciare rapidamente il tuo sito. Controlla la forma vettoriale che ho aggiunto ai collegamenti dei servizi in alto a destra del banner. Lo stile è semplice, ma riempie il vuoto evitando l’aspetto mondano.

Scegli un’immagine appropriata per l’azienda. Ci sono milioni di immagini disponibili sul web, e non ci vorrà troppo tempo per trovare un’immagine che si adatta alle vostre esigenze.

Nel mio caso, ho trovato un’immagine di alta qualità che penso andrà bene con il mio sito web. Non ho un tema di business per il sito web, quindi sono libero di scegliere qualsiasi immagine che sembra buona sul post banner.

Prova a scaricare alcune immagini HD dai siti di immagini stock gratuiti indicati di seguito

www..com.

La fusione è un’arte che dovresti padroneggiare per produrre bellissimi banner. Qui ho mescolato tre strati 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 del gradiente sopra l’immagine
• Cambia l’opacità dell’immagine del 40% e cambia la modalità di fusione in differenza.
• Controlla la tavolozza livelli nell’immagine sopra per capire come i livelli sono impilati l’uno sull’altro.

Ecco come apparirà la tua intestazione & Banner mentre abbiamo appena finito di lavorarci. Stiamo lavorando su una parte in una sola volta, ed è il momento di passare al livello successivo.

L’allineamento è fondamentale quando si tratta di digitare; hai un’idea di come dovrebbe apparire il tuo sito e il testo dovrebbe essere allineato prima di avviarlo. A questo livello, ho usato due diverse cornici di testo, entrambe allineate a sinistra.

Il passo successivo è progettare la parte servizi della pagina web. Ho progettato una stella metallica in tonalità di grigio per mostrare vari servizi dell’azienda. L’intenzione dietro l’utilizzo del simbolo della stella è di servizi a 5 stelle.

Quando si tratta di allineare il testo, 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 degli spazi uguali tra gli elementi del design. Ho usato molte linee guida sul layout del sito Web per vedere che tutti gli oggetti nel frame dovrebbero mantenere spazi e distanze adeguati, che evidenziano una discreta quantità di spazio bianco.

Il passo successivo del nostro progetto è quello di creare il campo Modulo. In questo caso, sto lavorando di fronte al metodo che abbiamo usato nella progettazione del banner. Posizioneremo il livello dell’immagine sotto il livello di colore solido e applicheremo un livello di sfumatura sopra i due livelli per ottenere un aspetto migliore. Giocare con le modalità di fusione è sempre essenziale mentre si posizionano immagini più grandi.

La scelta delle immagini per questo sito non ha un tema specifico ad esso correlato. Penso che questa immagine aiuterà il sito a guardare meglio.

Posiziona l’immagine sotto il livello di sfondo colorato. Per fissare l’immagine esattamente alle dimensioni del livello colorato, utilizzare le opzioni di mascheramento del livello.

Dai un’occhiata alla tavolozza dei livelli nell’immagine sopra. Il livello di colore blu fisso si trova nella parte superiore dell’immagine, la modalità di fusione viene convertita in sovrapposizione e l’opacità viene ridotta al 65%.

Ho usato la mappa del gradiente in cima ai due livelli. La modalità di fusione viene modificata in tonalità e l’opacità rimane la stessa.

La casella del modulo è pronta, il che ci porta alla fine del quarto livello nel design 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.

Come abbiamo raggiunto la parte finale della pagina, è il momento di guardare le dimensioni del piè di pagina ancora una volta. 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.

Posizionare i link e le immagini secondo il vostro requisito.

Con questo, abbiamo concluso la parte di progettazione del nostro sito web. Le combinazioni di colori che abbiamo usato sono minime; facciamo uso di un sacco di spazio bianco nel nostro design e aggiunto testo semplice con caratteri minimi. L’intenzione è quella di progettare una pagina web pulita, che speriamo sia soddisfatta.

Si prega di dare un’occhiata al design dell’intera pagina qui sotto ancora una volta.