7 suggerimenti per Photoshop per la progettazione di siti Web puliti e moderni
Il web design pulito, elegante e bello è spesso una questione di prospettiva personale. Guardo centinaia di siti web ogni settimana, e molti di questi si distinguono da me, ma non tutti sono necessariamente efficaci.
Troppo spesso i designer riducono troppo il concetto, producendo un progetto finale che non è altro che un testo e una griglia. Sebbene questi disegni minimali abbiano il loro fascino estetico, in particolare se abbinati a una tipografia eccellente, rischiano di non essere notati.
Pareri personali a parte, ci sono alcune caratteristiche di un design che permettono di essere etichettato con orgoglio come pulito o moderno e migliorare la sua usabilità e simpatia a livello universale. La semplicità non è una tendenza di design, ma piuttosto un attributo di buon design.
Photoshop ci garantisce un set versatile di strumenti per creare profondità e interesse e ci invita a integrare dettagli sottili in cui lasceremmo uno spazio vuoto. Hai bisogno solo di una manciata di questi strumenti per infondere le qualità del design moderno in un layout. Impadronendoli, è possibile creare progetti puliti che esprimano la funzionalità in modo chiaro ed efficace.
1. Spazio
Lo spazio bianco consente la separazione visiva degli elementi di design senza l'uso di scatole, linee o grafica aggiuntiva ed è probabilmente l'aspetto più importante del design moderno. È essenziale per la presentazione dei contenuti e la leggibilità. Se usato correttamente, lo spazio bianco conferisce al layout una sensazione di pulizia ed eleganza.
Guide e Griglie sono disponibili in Photoshop per aiutarti a posizionare gli elementi con precisione. La griglia si sovrappone all'intero documento mentre le guide possono essere impostate manualmente. Utilizza le linee guida in anticipo per impostare i bordi, i margini e il riempimento invisibili utilizzati per definire il tuo spazio bianco.
Crea una guida premendo Ctrl + R (Win) o Cmd + R (Mac) per abilitare il righello e quindi fai clic sul righello superiore o sinistro per trascinare una linea guida nella posizione desiderata. Ecco alcune scorciatoie aggiuntive per aiutarti a gestire le guide mentre lavori:
- Per spostare una linea guida: Ctrl (Win) o Cmd (Mac) e fare clic sulla guida
- Mostra / Nascondi guide: premi Ctrl +; (Win) o Cmd +; (Mac)
- Mostra / Nascondi la griglia: premi Ctrl + '(Win) o Cmd +' (Mac)
Abilita le tue Smart Guides sotto Visualizza> Mostra> Guide intelligenti . Le guide intelligenti vengono visualizzate automaticamente quando si disegna una forma, si allinea il testo o si crea una selezione o una diapositiva e si risparmia in anticipo il lavoro di impostazione delle linee guida per questi elementi.
Allineare oggetti usando guide e griglie rende il tuo disegno più facile da digerire e darà al risultato complessivo un aspetto più lucido.
2. Profondità
La profondità creata con luci e ombre rende i tuoi elementi più nitidi e reali. Gli effetti ombra possono essere applicati a qualsiasi oggetto, selezione o livello testo, ma il trucco consiste nel scegliere un colore che corrisponda allo sfondo e rinunciare al nero predefinito.
Non tutte le ombre devono essere scure. Combina l'effetto Ombra interna con un'ombra esterna bianca o chiara per creare una sensazione incassata o "tipografica" con campi di testo o modulo.
3. Dettaglio
Sia lo strumento sfumatura che gli effetti di livello sfumato svolgono un ruolo importante nel design pulito e moderno. Le sfumature sono presenti in ogni aspetto dello stile moderno, dalle ombre e dai riflessi agli sfondi e ai pulsanti.
Per accedere allo strumento sfumatura, premi MAIUSC + G. Per creare una sfumatura, fai clic sulla tela, trascina e rilascia. Questo strumento è utilizzato al meglio per aree di grandi dimensioni come sfondi, luci o ombre radiali. Quando si lavora con singoli elementi come sezioni, pulsanti o icone, l'effetto di livello Sovrapposizione sfumatura è un mezzo più efficiente per stabilire stili o trame di superficie. È possibile accedere a questo strumento facendo doppio clic sul livello dell'elemento e selezionando la casella di controllo "Sovrapposizione sfumatura".
Usa questo effetto per dare una dimensione sottile ai pulsanti e alle barre di navigazione, o per imitare lo stile e la trama della carta o dei metalli.
4. Definizione
Superando i bordi e i bordi, assicuri che i tuoi elementi abbiano un contrasto adeguato.
L'effetto Livello tratto traccerà elementi come testo o pulsanti in cui è necessario un contorno ugualmente ponderato su tutti i lati. L'uso di questo effetto libererà le ombre interne e esterne per estendere le tue opzioni.
Si è tentati di puntare allo strumento penna per disegnare linee rette e regole orizzontali, ma se si desidera applicare sfumature o ombre alla linea, è più semplice utilizzare lo strumento selezione riga singola, che è nascosto discretamente dietro lo strumento selezione rettangolare. . Utilizza lo strumento Riga singola su un nuovo livello e un'ombra esterna bianca o chiara per creare linee di evidenziazione lungo i bordi o separatori di sezione in cui non sei in grado di applicare un effetto all'elemento stesso.
5. Interesse
Pulito e moderno non ha bisogno di uguagliare noioso, bianco o minimo. L'uso sapiente di texture e pattern renderà il tuo design unico, comunicando stile e marchio. Usa le tecniche sottili come l'aggiunta di rumore (Filtro> Aggiungi disturbo) o l'effetto del livello Sovrapposizione texture su aree di sfondo o elementi dell'interfaccia per aiutarti a distinguerle. Più un elemento appare reale e chiaro, più attraente è per lo spettatore.
6. Prospettiva
La prospettiva è la tecnica più poco usata nel web design moderno semplicemente perché le tendenze in corso si focalizzano costantemente sulla simmetria e sulle griglie. Applicando la prospettiva alle immagini e agli elementi del tuo design, puoi introdurre profondità, dimensione, modernità e interesse per il tuo design in un unico passaggio.
La prospettiva può essere assegnata a qualsiasi forma o immagine scegliendo l'opzione "Percorso di trasformazione libero" nel menu di scelta rapida e facendo clic sul pulsante "Warp" situato nella barra delle opzioni dello strumento.
L'illusione della prospettiva può anche essere prodotta creando forme o cornici asimmetriche e usando sfumature e ombre in modo appropriato per mettere gli oggetti a parte.
7. Leggibilità
Il tipo forte è molto amato nella comunità del design e una componente ancora più forte del design pulito. Può sostituire immagini e grafici che potrebbero altrimenti complicare eccessivamente un design e trasmettere l'essenza totale delle tecniche di cui sopra in modo semplice e diretto.
Per aggiungere trame al testo, converti il livello di testo in oggetto avanzato, facendo clic con il pulsante destro del mouse sul livello e scegliendo "Converti in oggetto avanzato". Gli effetti di livello sono limitati per impostazione predefinita a meno che il testo non sia rasterizzato, una pratica che desideri evitare, anche quando si progetta per lo schermo. La conversione in oggetti avanzati consente di applicare filtri e altre tecniche al testo preservando le funzionalità di modifica nel caso in cui sia necessario modificare ciò che il testo dice in seguito.
Ricorda che hai opzioni di tracciamento e crenatura a tua disposizione durante la configurazione degli elementi di testo. Anche se il tuo testo è destinato a essere riprodotto in CSS, dovresti prima sperimentare la spaziatura di lettere e lettere per visualizzare meglio il contenuto che apparirà nello spazio che gli hai assegnato. Inoltre, ricorda di usare il testo "Crisp" o "Sharp" per mantenere la definizione e la chiarezza.
Il modo in cui presenti i tuoi contenuti in un design pulito è più importante di qualsiasi altro stile semplicemente perché c'è meno visibilità visiva per distrarre lo spettatore. Utilizzando i suggerimenti di cui sopra per spaziare in modo appropriato testo e oggetti, aggiungere definizione e interesse e impostare il contenuto separato dall'interfaccia, il progetto otterrà un'efficacia ottimale.
Cosa ne pensi di questi suggerimenti e ne hai altri che usi regolarmente? Si prega di condividere qui sotto ...