Gli strumenti essenziali per il web design, oggi

web design

Scegliere la giusta palette di colori, creare un sito statico in tempi rapidi o aggiungere funzionalità come il drag and drop non è mai facile, scopriamo quali sono i tools per il web design, oggi.

 

C’è chi pensa che per realizzare un sito internet basta avere un pc e casomai una connessione ad internet. Non è del tutto sbagliato ma neanche del tutto vero. Infatti chi come me si trova ogni giorno a “sporcarsi” le mani con codice PHP, HTML, CSS, JavaScript o altro, sa benissimo che per poter lavorare al meglio bisogna avere a disposizione vari strumenti che ci aiutino a sviluppare al meglio i nostri lavori.

Ecco perchè quest’oggi vi farò la lista degli strumenti necessari, oggi, per il web design e per dare una piccola accelerata al lavoro.

Ho deciso di selezionare quelli che ritengo siano gli strumenti di web design più innovativi ed essenziali per aiutare tutti i web designer il sito che desiderano.

 

camper-duotone-brownimmagine esempio duotone colore verde acqua

 

 

 

 

Non sei un esperto di Photoshop e qualche volta ti è capitato di dover aggiungere colori per creare degli effetti visivi ad alcune immagini tramite CSS? Grazie a Duotone potrai inserire in modo semplice e rapido due colori differenti alle tue immagini – o foto -, così come vedi nelle foto che vedi qui sopra. Non devi fare altro che recarti sul sito di Duotone, caricare la tua immagine, scegliere i colori da applicarvi e scarica la tua immagine modificata. Semplice, no?

css gradient screenshopt
CSS Gradient web site

Immagina.

Stai lavorando ad uno dei tuoi lavori di web design; ad un certo punto hai bisogno del codice CSS per una sfumatura da inserire nel tuo progetto e vuoi risparmiare il tempo per la stesura di questa parte di codice. So benissimo che per noi web designer / sviluppatori il tempo è allo stesso tempo denaro, tiranno e prezioso per via delle dead-line che abbiamo concordato con il cliente. Per farti risparmiare ulteriore tempo, ho deciso di consigliarti l’utilizzo di questo tools per permetterti di estrapolare in modo semplice e rapido – come tutti gli strumenti di questo articolo – il codice CSS per le sfumature da inserire nel tuo foglio di stile.

Dovrai solo recarti sul sito CSS Gradient, inserire gli esadecimali  – se sei un mostro puoi inserire gli RGBA – dei colori che dovranno andare a creare la tua sfumatura, scegliere tra la sfumatura lineare o radiale, scendere in basso, copiare e incollare il codice CSS generato in automatico nel tuo foglio di stile. Il gioco è fatto, ora il tuo lavoro di web design può continuare senza intoppi e hai un paio di minuti di lavoro risparmiati.

Fino ad ora abbiamo “giocato” ed è giunto il momento di risparmiare non 2 minuti ma ben qualche ora di lavoro.

Grazie a GatsbyJS potrai generare in modo semplice e veloce la base del tuo prossimo sito web – un po’ come quando utilizziamo Jekyll -. Questo strumento magico, per fare il suo lavoro sfrutta tutta la potenza delle più recenti tecnologie del web come React, webpack, JavaScript, CSS e tanto altro ancora. Hai inoltre la possibilità di inserire dati tramite l’utilizzo di GraphQL.

Per poterlo utilizzare dovrai recarti sul sito ufficiale di GatsbyJS e seguire le istruzioni che trovi nella documentazione – molto completa e dettagliata.

Quante volte ti è capitato di stare ore ed ore davanti al PC o alla classica carta per scegliere la giusta palette di colori? E quanto altro tempo hai speso nella scelta della tonalità dei colori? Immagino che il tempo perso sia stato tanto. Oggi grazie a Pigment potrai risparmiare ulteriormente il tuo tempo. Recandoti sul sito ufficiale di Pigment ti troverai davanti ad una schermata full screen dove ci saranno un’infinità di palette di colori tra cui poter scegliere.

Probabilmente non saranno di tuo gradimento le tonalità e le vorrai più accese o più spente – dipende dai gusti -. Potrai modificare queste tonalità tramite la semplicissima barra degli strumenti che troverai sulla tua sinistra. Ma non è tutto. Se clicchi sulla piccola tavolozza che trovi al di sotto di Lighting potrai anche scegliere il colore dominante della tua palette. Una volta scelto il colore primario non ti resta che scegliere gli accostamenti che più ti piacciono, cliccarci sopra e cliccare sull’esadecimale, l’RGB o, addirittura, il Pantone e verrà copiato immediatamente il suo valore. Incolla il valore dove vuoi e continua finché non hai completato la tua palette. Semplicissimo.

Sei un developer e sfortunatamente per non hai un grande gusto estetico per quanto riguarda il disegno, l’accostamento dei colori o la realizzazione di un logo – avresti fatto il grafico in questo caso -, dico bene?  Il tuo cliente o tu stesso, necessitate di un logo ma non vuoi spendere troppo per la sua realizzazione. per farti risparmiare tempo e denaro ti propongo questo strumento. Logomaster è uno strumento online semplice e completo. Premetto che non ti restituirà mai un logo studiato a tavolino che rispecchi appieno le tue esigenze e l’immagine di brand di cui hai bisogno. Su Logomaster hai la possibilità di scegliere gli stili che più ti piacciono, i colori, un simbolo e i font da utilizzare per il tuo logo. Per vedere tutte le sue funzionalità non ti resta che provarlo.

Il nome di questo strumento racchiude già in sé la sua funzionalità. Dragon Drop è un plug-in di riordino delle liste tramite – per l’appuntodrag-and-drop. Ritengo sia uno strumento molto utile per risparmiare il poco tempo che abbiamo a disposizione – diciamo la verità il tempo non è mai abbastanza quando dobbiamo creare il nostro nuovo progetto di web design. A questo link trovi la documentazione Github per l’installazione e l’utilizzo di questo tool.

Checkbot è un’estensione del browser che verifica la presenza di link non funzionanti, titoli duplicati, catene di re-indirizzamento, HTML / JS / CSS non validi e altro. Installando e avviando l’analisi del tuo sito, Checkbot inizierà il suo lavoro – più è grande il tuo sito, più tempo impiegherà per l’analisi completa – e alla fine ti restituirà tutti i risultati di analisi che potrai comodamente controllare. Può inoltre aiutarti a migliorare la SEO del tuo sito web, correggendo gli errori trovati da questa estensione.

 

Written by: auritidesign

Lascia un commento