Elementi di Great Web Design The Polish

Quando metto insieme i disegni, di solito lo faccio in due fasi - Layout e polacco. Durante la fase di layout, posiziono gli oggetti principali sulla pagina che in genere finiscono con qualcosa che sembra relativamente completo. Nella seconda fase - la polacca - vado oltre il design e regola i colori, i trattamenti di tipo, le ombre, i livelli e in genere pulisco tutto. In questa prima di una serie di tutorial sul web design, guarderemo il polacco.

Una breve prefazione

A differenza degli effetti di Photoshop, il Web design non può essere insegnato in una serie di passaggi facilmente ripetibili. Se si guardano i più grandi progetti Web, non sono difficili da riprodurre tecnicamente. Probabilmente potresti fare uno screenshot di un disegno, metterlo in Photoshop e quindi replicare lo stesso disegno strato dopo strato. Il trucco, tuttavia, sta venendo fuori con quel progetto in primo luogo.

Per questo motivo, in queste esercitazioni sul Web design ho intenzione di provare alcune tecniche diverse per trasmettere diversi aspetti del processo che personalmente passo durante la progettazione di un sito Web.

Oggi stiamo guardando un sito che ho creato all'inizio di quest'anno chiamato Not By The Hour, che è un sito secondario per un altro dei nostri blog chiamato FreelanceSwitch. Fortunatamente, quando l'ho progettato mesi fa, ho mantenuto una versione del file PSD prima e dopo averlo rifinito, quindi, proprio come in uno spot per la perdita di peso, faremo un po 'prima e dopo' ...

Prima di spiegare alcune delle cose che ho fatto per perfezionare il sito Web, è importante guardare prima e dopo.

VISTA PRIMA E DOPO

Passaggio 1: chiarezza:

Mi sentirai dire più e più volte, ma quando progetti per il Web è TUTTO sui pixel. Uno dei tuoi obiettivi dovrebbe essere sempre quello di mantenere le cose nitide e pulite. Questo significa ad esempio:

Testo chiarezza
Durante la stesura del testo, dovresti riflettere su cosa l'Anti-aliasing usi. Per farlo, fai apparire il pannello Carattere, che puoi fare andando su Finestra> Carattere o quando hai selezionato lo Strumento testo e evidenziato il testo, premi Ctrl-T (sì è lo stesso collegamento per la trasformazione, quindi devi assicurati che il testo sia selezionato). Nel pannello Carattere, in basso a destra puoi scegliere tra Nessuno | Sharp | Croccante | Forte. Per diversi tipi di carattere e dimensioni diverse devi sperimentare. Per lo più uso l'impostazione Sharp che costringerà alcuni pixel ad essere allineati e talvolta distorce il font un po 'con impostazioni più piccole. Ma per esempio nell'immagine sotto il testo Fabbricazione è impostato su sharp, motivo per cui quando applico un contorno 1px è definito molto chiaramente.
fodera
Come puoi vedere tra le barre grigie più chiare e più scure, ho aggiunto una debole linea 1px. Questo trucco imita l'effetto del filtro di nitidezza. Se hai mai eseguito uno dei filtri più nitidi troppo spesso su una foto, noterai che cominciano a comparire piccoli bordi. Questo perché enfatizzando il confine tra le due parti appare più separato per l'occhio e quindi più nitido. Molto spesso utilizzerò una linea debole per enfatizzare il bordo e rendere le due parti più chiare.
Colorazione
Il colore può anche fare una grande differenza nell'affinare le cose. In questo caso, ho desaturato lo sfondo da una specie di grigio scuro / verde a puro grigio. Ciò significa che la cassaforte, che ha un tono verdastro, si distingue maggiormente dallo sfondo e si presenta più nitida.
Pulizia di oggetti
Un'altra cosa che non ho fatto in questa immagine, ma che puoi fare per affinare le cose è passare attraverso oggetti come il logo o la cassaforte e assicurarti che i bordi siano allineati con i pixel. Quindi, per esempio, dai un'occhiata al bordo sinistro della cassaforte rispetto al lato destro. Vedrai che il bordo destro sembra leggermente sfocato. Potremmo risolvere questo problema usando lo strumento Lazo poligonale (L) e selezionando un piccolo bordo dal lato destro e premendo Elimina. Ovviamente questo non è essenziale e non intendo sembrare pignolo, ma è una buona idea pensare a questi dettagli e assicurarsi che tutto sia bello e nitido!

Un altro elemento da discutere qui è che sul testo vedrai un leggero effetto sfumatura / tratto. Questo si ottiene con due stili di livello, un tratto interno di 1 pixel e un gradiente sottile. L'ho usato qui perché fa parte del marchio FreelanceSwitch, ed è anche un tipo di effetto del Web 2.0. È meglio farlo con il testo Sharp come menzionato in precedenza. Puoi vedere gli esatti stili di livello nella PSD di esempio qui sotto.

Step 2 - Light and Ode:

Gradienti, gradienti, gradienti. Alcuni direbbero che sono il segno distintivo del design del Web 2.0 e devo ammettere di usarli costantemente nei miei progetti. Nell'immagine qui sotto, vedrai che ho aggiunto ombre e sfumature in alcuni punti diversi per dare maggiore profondità al disegno.

Una delle principali differenze tra la stampa e il web design, secondo me, è la quantità di profondità necessaria per la progettazione. Ciò che intendo in questo caso è che nella progettazione di stampa, se si dovesse avere una copertina dell'opuscolo con un colore piatto e lineare, spesso le volte sembrerà ancora bella a causa dello stock di carta o di una cellula che potrebbe essere applicata e della reazione della luce a quella carta / rivestimento Quindi nel "design" potrebbe sembrare un semplice colore piatto, ma nell'output avrà comunque profondità. Sullo schermo non hai questo effetto.

Questo non vuol dire che non si possano avere sfondi piatti o pannelli di colore nel Web design, tuttavia, tutti i designer di stampa che ho sempre diretto per creare siti Web, i due difetti più comuni che ho notato sono

Non riuscendo a mettere a fuoco la nitidezza e la chiarezza del design
Nella stampa, si esegue raramente lo zoom in avanti per modificare i singoli pixel da quando si stampa qualcosa, quel livello di dettaglio spesso sfugge comunque all'occhio. Pensi in millimetri, non in pixel.
Non è possibile aggiungere spunti di profondità e sufficiente interesse visivo
Le sfumature generalmente non funzionano bene sulla stampa, ma sullo schermo funzionano bene. Allo stesso modo l'aggiunta di deboli ombre e riflessi funziona bene sullo schermo. Insieme riescono a rendere un sito molto più attraente visivamente in quanto i diversi elementi sullo schermo giocano uno contro l'altro. Nell'immagine seguente, ad esempio, i sacchi di denaro, che inizialmente erano immagini vettoriali diritte con una colorazione piatta, ricevevano graduazioni molto sottili usando lo strumento Brucia (O) in modo che sembrassero più morbidi.

Passaggio 3 - Precedenza:

La precedenza è l'aspetto visivo più importante del design dell'informazione. E dal momento che il Web design è in gran parte il modo in cui esponi e presenti informazioni al tuo utente, la precedenza è quindi della massima importanza.

Cosa intendo per precedenza? Bene, quando guardi la pagina devi chiederti, cosa guardo prima, cosa c'è dopo, cosa c'è dopo, e così via. E perché guardi certe cose in un certo ordine?

La precedenza visiva è un mix di fattori:

Taglia
È abbastanza ovvio che qualcosa di importante avrà la precedenza su qualcosa di piccolo. Quindi in questo design, la cassaforte e il titolo principale hanno la precedenza. Quando guardi la pagina, la prima cosa che noti sono quei due elementi.
Colore
Il colore crea anche la precedenza. Ad esempio nell'immagine Prima vedrai che i sottotitoli nell'area contrassegnata da 4 in quella immagine erano inizialmente dello stesso blu scuro delle parole Ciao! Ciò significava che c'era meno distinzione tra i due e non era così chiaro che doveva essere letto per primo. Sbiadendole di nuovo in un beige, viene data loro meno importanza ed è più ovvio che abbiano meno importanza nella gerarchia delle informazioni.
Colore di sfondo
Con sia il colore di sfondo che il colore in generale, la cosa importante non è tanto il colore specifico che qualcosa è quanto i colori in cui tutto il resto è in relazione. Quindi, ad esempio, se tutto è nero su una pagina e c'è un oggetto bianco, ovviamente quell'oggetto bianco sta per saltarti addosso. In questo caso, contrastando il giallo brillante con il grigio scuro, otteniamo enfasi. Quindi, anche se la prima cosa sulla pagina che vedi potrebbe essere la cassaforte e le parole Fare reddito passivo, probabilmente lo noterai Una guida a dopo, e il Parte 1 | Parte 2 |... navigazione secondo. Questo è apposto perché voglio che l'utente veda prima un'immagine visiva e un titolo in modo che sappiano cosa stanno guardando, quindi voglio che vedano la navigazione primaria in modo che capiscano come aggirare il sito.
Posizione
Infine, la posizione nel layout fa la differenza nel modo in cui gli oggetti vengono percepiti. Come probabilmente avete sentito, gli studi dimostrano che l'occhio dell'utente va dall'angolo in alto a sinistra in basso a destra in alcune varianti (ho visto entrambi gli studi che dicono che va in alto a sinistra in alto a destra e poi in basso a sinistra in basso a destra, e alternativamente che va in una specie di arco da un angolo all'altro). La cosa importante qui è che avere qualcosa di più alto di solito dà più precedenza, e avere qualcosa in più lasciato di solito dà qualcosa di più prioritario.

Passaggio 4:

L'ho detto prima, lo dirò di nuovo ... È tutto sui pixel!

In questa immagine, vedrai quello che sembra essere un gradiente abbastanza semplice. In effetti ci sono tre gradienti disegnati e tre linee da 1 pixel usate. È piuttosto sottile, e probabilmente non fa molta differenza, ma secondo me ogni dettaglio conta fino alla fine.

Passaggio 5:

Qualcuno nei commenti ha chiesto degli stili di Web 2.0. Ecco un semplice effetto in cui si fornisce un contorno di 1 o 2 pixel e quindi un gradiente debole per uno sfondo. Se non lo avessi già notato, inizierai a capire che è dappertutto, forse un po 'abusato, ma comunque carino.

Passaggio 6:

In questa immagine, puoi vedere come a volte durante lo smalto puoi persino cambiare le informazioni reali sulla pagina. In questo caso, ho deciso che, anche se era più ricco di intromissioni avendo tutti i titoli per le diverse parti sotto i sacchi di denaro, sembrava così disordinato che non pensavo che fosse particolarmente informativo - anche se questo è un po 'discutibile. Così, invece, ho rimosso il marrone in eccesso sul testo marrone e lo ho sostituito con il grassetto giallo su grigio scuro, che a causa del contrasto salta fuori.

E il gioco è fatto!

Quindi c'è il mio primo tutorial sul web design. Per favore fatemi sapere nei commenti se questo è informativo. È impegnativo spiegare il web design! Ricorda anche che il mio stile di Web design è certamente il mio gusto, in particolare perché sono il mio cliente nel 99% dei progetti che faccio in questi giorni :-)

La prossima volta che avrò un sito Web da progettare, sto pianificando di registrare il tutto con un programma di cattura dello schermo per poi accelerarlo in pochi minuti. Quindi puoi aspettarti questo! Penso che sarà molto bello, anche se sono un po 'nervoso perché, come tutti i designer, alcuni giorni è facile, e alcuni giorni è una lavagna vuota dentro.

Comunque spero ti sia piaciuto il tutorial. Per favore dai un Digg se lo hai fatto!

Esempio di PSD

Una breve nota su questo PSD, non ho etichettato nessuno dei livelli o li ho raggruppati. Questo è letteralmente il PSD che ho costruito il sito su cui ho fatto i conti per farti vedere. Sono forniti il design e i contenuti del PSD puramente a scopo didattico. Il copyright per il design e le illustrazioni spetta ai rispettivi proprietari. Si prega di non utilizzare elementi del design altrove.

Scarica il PSD per questo tutorial

Design e illustrazione