[elfsight_social_share_buttons id=”1″]

10-strumenti-per-web-designer

Nel web, si sa, bisogna saper navigare per trovare i giusti strumenti per web design.

Ma, spesso, questo non basta e occorre “munirsi di remi robusti” che ci permettono di scovare quei tool davvero utili al nostro lavoro di progettazione o restyling di un sito web.

Cosa vuol dire utili? Scritto così, tutto e niente. Utile è qualcosa che ti risolve un problema o che aggiunge conoscenza al tuo sapere.

Ecco, quindi, perché ho pensato di stilare una lista dettagliata di 10 strumenti per il web realmente utili, in grado di ottimizzare il lavoro di ogni web designer permettendogli di gestire aspetti diversi della progettazione e della lavorazione.

Con la speranza che questi strumenti possano essere utili a te come lo sono stati e lo sono per me, ti chiedo di metterti comodo/a e…goderti la mia lista. 😉

Adobe Experience Design CC

adobe-experience-design-cc-strumenti-per-il-web

Con Experience Design CC puoi creare un prototipo di interfaccia web velocemente. Si può considerare uno strumento “tutto incluso” per la progettazione e creazione di siti web e app per sistemi mobile. Inoltre, puoi testare le anteprime dell’interfaccia che hai disegnato e valutare l’usabilità e l’effetto dell’esperienza utente.

Il motto di questo tool?

Crea sul tuo desktop e vedi sul tuo device

 

JPEG.io

jpegio-strumenti-per-il-web

Un SEO fatto bene impone alle pagine web di essere leggere e quindi di caricarsi velocemente. Esistono certamente software professionali come Adobe Photoshop che con la sua funzione “salva per web” aiuta molto e permette un’ottimizzazione interessante delle immagini (se ben parametrata). Oppure esistono tool web-based come Jpeg.io.

Questo strumento ti permette di convertire le immagini in JPEG ottimizzate per il web.

JPEG.io rende facile convertire qualsiasi formato di immagine grande in un formato JPEG altamente ottimizzato. Basta trascinare e rilasciare i file di immagine (sono accettati i formati JPG, PNG, GIF, SVG, BMP, EPS, PSD, TIFF e WebP) nell’apposito spazio che vedi subito nella home del sito (o importare da Dropbox, Google Drive, o Box) e questi verranno convertiti in JPEG progressivi destinati poi a un’ulteriore ottimizzazione.

Un’ottimo tool gratuito.

Font Reacher

font-reach-10-strumenti-per-il-web

Font Reach è uno strumento di cui non posso fare più a meno: questa piattaforma è in grado di scansionare milioni di siti mostrandoti come risultato finale il font utilizzato in un particolare sito web di tuo interesse. Se sei un web designer e sei rimasto catturato da un particolare font utilizzato all’interno di un sito web allora questo è uno di quei strumenti per il web che fa al caso tuo.

WebFlow

webflow-strumenti-per-il-web

WebFlow è un altro strumento per il web “drag and drop” professionale e indirizzato alla progettazione di siti web. Utilizzando le migliori pratiche di responsive design, il servizio consente alle aziende e ai liberi professionisti di progettare e pubblicare siti web senza alcuna codifica, grazie anche a un sistema di trascinamento di oggetti ed elementi nell’interfaccia molto comodo e versatile.

Material.io

material-resizer-strumenti-per-il-web

Material Design è un sistema unificato che combina teoria, risorse e strumenti per la creazione di esperienze digitali. Questa è la presentazione di una combinazione di tools gestiti e offerti niente popo di meno che da casa Google.

Parliamo quindi di un insieme di strumenti per il web, ognuno dedicato a una funzione precisa. Tra quelli che puoi vedere nel sito, c’è né uno in particolare che voglio presentarti: Material Resizer.

Molto semplicemente, questo strumento ti permette di verificare quanto è responsive un certo sito web: inserisci l’url del sito che vuoi controllare nel campo che trovi al centro nella barra superiore dopodicché, spostandoti sulla destra, puoi selezionare la modalità di vista a seconda del differente device di navigazione. Strumento utile, veloce e soprattutto visual. 😉

SiteInspire

siteinspire-strumenti-per-i-lweb

Cerchi l’ispirazione giusta per disegnare il tuo sito o quello di un tuo cliente? Vuoi realizzare un sito web innovativo, fresco e di tendenza? Allora SiteInspire è lo strumento web che fa per te.

Parliamo di una vetrina fatta di anteprime di siti web di tendenza caricati con cadenza giornaliera dalla piattaforma, e consultabili per stile, tipologia, argomento e caratteristiche.

CSS Nectar

css-nectar-strumenti-per-il-web

CSS Nectar è un’altra ottima fonte di ispirazione per il tuo web design, con nuovi siti aggiunti alla vetrina principale ogni giorno.

Il motore di ricerca interno è ben fatto e comprende filtri molto precisi che permettono di definire le singole ricerche in funzione del colore preferito, delle caratteristiche tecniche (stili css compresi), paese di sviluppo e categoria di appartenenza. Infine, gli utenti possono votare il sito che preferiscono e questo lo farà salire di ranking nei risultati delle ricerche interne.

CodePen

codepen-strumenti-per-il-web

E’ considerato il ‘parco giochi per il front-end web’ e sembra non delude mai le aspettative. Un esempio di cosa si può ottenere con CodePen? Grazie a una raccolta di 21 progetti HTML pubblicati assieme al codice sorgente (ed è un numero destinato a salire) puoi scoprire come eliminare fastidiosi bug che incontri durante la fase di progettazione e nello stesso tempo hai modo di confrontarti con lavori già chiusi che ti permettono di migliorare il tuo ancora in corso.

Naturalmente puoi trovare ispirazione da esempi e modelli per tutti i tuoi progetti web.

WeLoveIconFonts

weloveiconfonts-strumenti-per-il-web

WeLoveIconFonts occupa un posto speciale nei cuori di molti web designer. È come una versione open source di Google Fonts, ma invece dei font trovi le icone stilizzate e ottimizzate per il web. Ogni pacchetto di icone/font è libero da diritti di utilizzo e immediatamente scaricabile, può essere inoltre facilmente integrato nel tuo file CSS. Ma attenzione però, perché mentre le icone/font sono semplici da implementare nei tuoi progetti web, si potrebbe rischiare una riduzione della nitidezza e quindi della resa a monitor rispetto ai vettori SVG. Nessun problema, dai un’occhiata a questo grafico di confronto per vedere quale opzione risulta più efficace per il tuo progetto. 😉

Crayon

crayon-strumenti-per-web-design

Uno dei miei strumenti per web preferiti, Crayon mette a disposizione una collezione estremamente completa di esempi di progettazione web e dati di marketing a corredo praticamente da tutto il web. Per accedervi basta creare un account gratuito e il gioco è fatto.

[elfsight_social_share_buttons id=”1″]

[ninja-inline id=13522]