Share
Pulito. Un termine spesso usato per descrivere un design di un sito Web, ma cosa significa? Come lo definisci? Sono abbastanza sicuro che ciò non significa che lo spazio bianco sia più bianco del bianco o che tutta la polvere sia stata spazzolata sotto il piè di pagina ... Diamo un'occhiata più da vicino.
Gli stilisti di tutto il mondo sgorgano ammirati vedendo un web design ed esclamano "è bello, è così pulito!". Ci sono un numero infinito di round-up di webdesign dedicati al design "pulito" ed è un termine che viene lanciato un po 'nella community del web design. Può essere facile individuare un buon esempio di design pulito, in quanto promuove una certa sensazione di professionalità e qualità. Tuttavia, ciò che non viene spesso discusso sono i principi e i fattori sottostanti che si combinano per creare questo look 'pulito' e questo è esattamente ciò che questo articolo intende fare.
Prima di iniziare, cerchiamo di essere chiari su una cosa: il design pulito non è un design minimale.
Alcune persone potrebbero confondere le due cose e può essere facile farlo. Mentre ci sono alcune somiglianze e sovrapposizioni tra i due principi di progettazione, credo che ci siano delle differenze fondamentali.
Il design minimalista tende a mettere a nudo elementi superflui e non essenziali per consentire al contenuto e al messaggio centrale del sito di essere al centro dell'attenzione. Ogni elemento dovrebbe avere uno scopo giustificabile. Il design minimalista per natura dovrebbe essere altamente utilizzabile e funzionale, in quanto non ci dovrebbero essere distrazioni per competere con le informazioni che il sito sta cercando di comunicare.
Invece di chiedere cosa può essere rimosso, dovresti chiederti come può essere raffinato.
Sì, il design pulito dovrebbe essere utilizzabile, e sì, lo scopo del sito dovrebbe essere evidente. C'è comunque un margine per elementi puramente estetici e un tocco creativo quando si progetta un sito 'pulito'. Invece di chiedere cosa può essere rimosso (nel caso del design minimalista), dovresti chiederti come può essere raffinato.
Se ci fosse una parola che userei per definire il design 'pulito', è raffinatezza. Ogni singolo elemento dovrebbe apparire come appartenente e dovrebbe trarre beneficio e integrare il design nel suo insieme. Il design generale deve essere bilanciato per consentire alle informazioni di fluire ed essere facili da consumare.
Prima di arrivare al design finale, ogni elemento deve essere esaminato attentamente. Il progettista dovrebbe prendere un momento per considerare lo scopo di ciascun elemento e decidere se è il meglio che può essere e se può essere reso più chiaro.
O.K, quindi ora che abbiamo una visione generale del design "pulito", diamo un'occhiata ai vari fattori che contribuiscono a questo stile.
Un'attenzione ai dettagli è essenziale per creare un design pulito del sito web. Un design davvero eccezionale e pulito si basa sull'esecuzione pixel-perfetta di molti elementi di design sottili. I dettagli apparentemente minori come bordi, luci, ombre, trame e molti altri devono essere attentamente considerati.
Ad esempio, diamo un'occhiata più da vicino alla sezione principale del tema Studeo Wordpress, progettata da Orman Clark. Orman è ampiamente conosciuto per (e di grande successo) nella produzione di temi Wordpress puliti e intuitivi.
Nei casi in cui alcuni progetti tematici possono semplicemente implementare un cursore grande e audace, l'area delle caratteristiche di Studeo è un rifugio per i dettagli delicati del design. Notare la trama sottile sovrapposta all'immagine, l'evidenziazione di un pixel e il bordo grigio chiaro quasi impercettibile nella parte inferiore. Tutti questi dettagli possono sembrare insignificanti e possono anche passare inosservati da alcuni, ma collettivamente creano la sensazione di qualità e raffinatezza.
La precisione è fondamentale quando si sceglie di progettare in questo modo. Una cosa che può distruggere un design pulito del sito è il temuto mezzo pixel. Half-pixel possono verificarsi in Photoshop quando le linee e i bordi delle forme non si allineano esattamente sul pixel. Quando ciò accade, i bordi di una forma diventano sfocati. Puoi vedere nell'immagine qui sotto, i quadratini sulla destra appaiono sempre leggermente sfocati.
Un modo per impedirlo quando si progetta in Photoshop è selezionare l'opzione "Blocca su pixel". Ogni volta che questa opzione è selezionata, tutti i bordi della forma saranno splendidamente nitidi e puliti.
Inutile dire che un design pulito non può apparire disordinato in alcun modo. Un sacco di elementi stretti insieme tuttavia darà l'aspetto di un sito web disordinato e disordinato. Non quello che vogliamo. È qui che entra in gioco la spaziatura.
Gli spazi bianchi, i margini, le imbottiture e l'altezza della linea hanno tutti un ruolo cruciale nel disegnare un sito web pulito. Fornendo elementi di un sito web una quantità adeguata di spaziatura garantisce che sembrino appartenere e adattarsi al progetto generale. Un'adeguata quantità di spaziatura genera anche un sentimento arioso ed elegante per un sito web.
Oltre a garantire che i tuoi elementi siano ben distanziati, è anche necessario che tu sia coerente con i valori che decidi. Prova a ripetere i margini e i valori di padding quando puoi e dove è ragionevole farlo. I sistemi grid come 960.gs sono strumenti incredibilmente utili quando si progettano siti Web in questo modo (più su questo in un momento).
Per vedere l'effetto completo di un'adeguata spaziatura sul design di un sito Web, prendere in considerazione le seguenti due immagini. La prima immagine è un'anteprima di un post sul blog con quantità minime e incoerenti di spaziatura tra gli elementi.
Ora ecco la stessa anteprima del post sul blog con abbondanti quantità di spaziatura.
La differenza che può fare è abbastanza notevole. Il secondo design sembra molto più bilanciato e pulito ora che tutti gli elementi hanno molto più spazio per respirare e spazio per allungarsi.
Come per la maggior parte delle cose nella vita, tuttavia, è possibile avere troppe cose buone. Troppa spaziatura può far sembrare gli elementi persi e scollegati l'uno dall'altro. Di conseguenza, la coesione e il flusso di un sito Web possono essere interrotti.
Uno dei migliori strumenti che puoi usare per aiutarti a creare un sito web 'pulito' è un sistema a griglia. Abbiamo già accennato a come possono essere estremamente utili in termini di spaziatura, ma sono anche inestimabili per assicurarsi che il tuo allineamento sia puntuale.
Proprio come la spaziatura, l'allineamento può fare una differenza significativa per l'aspetto di un sito web. L'allineamento corretto e continuo consente di eseguire linee pulite per tutta la lunghezza e la larghezza della progettazione del sito. Le linee lisce e ininterrotte sono visivamente piacevoli e possono condurre l'occhio più in basso nella pagina.
L'occhio è molto sensibile ai cambiamenti di allineamento ed è in grado di rilevare minuscole variazioni e incongruenze. È quindi importante non solo essere pixel-perfect nel creare i tuoi modelli di design, ma anche che questa precisione non si perda nella fase di sviluppo che segue.
Idealmente, grandi corpi di testo dovrebbero essere (nella maggior parte dei casi) allineati a sinistra. Il testo allineato a sinistra produce una linea continua e crea colonne di informazioni facilmente distinguibili. Il testo allineato centralmente d'altra parte crea un bordo irregolare su entrambi i lati e può essere difficile da leggere in colonne di grandi dimensioni. Salva l'allineamento centrale per brevi righe di testo.
Come esempio eccellente di allineamento, potresti voler controllare Design Without Frontiers. Il progettista non solo ha fatto un uso eccezionale dell'allineamento, ma ha reso le sue intenzioni incredibilmente ovvie simulando le linee guida di Photoshop in tutto il sito Web.
Con l'arrivo di @ font-face e molti servizi di tipo, la tipografia nel web design non è mai stata così grande e considerando che la stragrande maggioranza delle informazioni sul web è testo, non c'è da meravigliarsi. Non approfondiremo la complessità della tipografia qui, poiché ci sono molte grandi risorse, ma vedremo in un paio di modi che può avere un ruolo importante da svolgere.
In primo luogo, l'uso della tipografia è un modo efficace per stabilire una gerarchia visiva molto forte. Se hai mai studiato i fondamenti del web design, ti rendi conto che la gerarchia è un po 'un grosso problema. Usare la tipografia per stabilire la tua gerarchia è un metodo molto elegante e pulito per farlo. Semplicemente modificando le dimensioni o il peso del tuo testo puoi guidare l'utente attorno al tuo sito e comunicare l'importanza dei vari elementi. Non c'è bisogno di frecce lucide o distintivi rumorosi per enfatizzare ciò che l'utente desidera vedere.
In secondo luogo, proprio come certi colori lavorano armoniosamente e si completano a vicenda, lo stesso vale per i caratteri. Ci sono molti suggerimenti e linee guida per l'abbinamento e il lavoro con più font, ma per un design pulito, è meglio mantenerlo semplice.
La selezione di due caratteri tipografici è generalmente un'opzione sicura, poiché troppi tipi di carattere diversi possono complicare un progetto. Optare per un carattere più audace o decorativo per le tue intestazioni e un tipo più sicuro e più leggibile per il tuo corpo testo raramente può andare male. La combinazione di un carattere serif e sans-serif può funzionare bene ed è comunemente praticato.
Ci sono molti articoli e tutorial che parlano della teoria del colore e di come si applica al web design. Ci sono anche molte risorse utili per aiutarti a selezionare una tavolozza di colori appropriata. Quando si tratta di design pulito, ci sono alcune linee guida di base.
La stragrande maggioranza dei siti web puliti sceglie una tavolozza di colori leggera, neutra e limitata per una serie di motivi.
Bianchi, grigi e colori chiari sono semplici e sobri, consentendo a qualsiasi contenuto di ricevere il focus dell'utente. Questo è l'ideale dal punto di vista dell'usabilità e per coloro che vogliono che il loro lavoro sia al centro dell'attenzione come designer e fotografi. Piccoli schizzi di colore sono spesso usati per accentuare determinati elementi come loghi, navigazione e titoli per aiutare a stabilire una gerarchia visiva.
I colori audaci, specialmente se molti sono usati, possono complicare eccessivamente un design pulito e distrarre l'attenzione dell'utente. Il colore evoca certe emozioni e reazioni e troppi colori possono indurre sentimenti multipli e conflittuali. L'ultima cosa che vogliamo è che un utente si senta confuso quando visualizza il nostro sito web.
Questo non vuol dire che un design pulito non possa essere colorato, come sempre ci sono delle eccezioni alla regola e ci sono molti esempi di design pulito che utilizzano il colore in modo efficace. Ci sono anche delle linee guida generali se vuoi o hai bisogno di usare il colore nei tuoi progetti puliti.
Optare per singoli, colori solidi piuttosto che sfumature nel tuo design. Solidi blocchi di colore creano linee chiare e ininterrotte e aiutano a distinguere le diverse sezioni di un disegno. Sfumature, motivi e trame possono distrarre e ridurre la leggibilità del testo. Se decidi di utilizzare sfumature e trame, mantienilo sobrio e sottile.
Sapere cosa è necessario per creare un design pulito e come implementare questo stile di progettazione può essere prezioso per un web designer. Un design pulito comunica un senso di raffinatezza e raffinatezza, precisamente ciò a cui molti clienti e noi stessi vogliamo essere associati. Spero che tu possa prendere qualcosa da questo articolo e applicare alcuni di questi metodi in uno dei tuoi progetti futuri.
Ci sono altre caratteristiche del design pulito che hai notato? O conosci una dimostrazione particolarmente buona del design pulito? Per favore fateci sapere nei commenti.
Accentsconagua