Gli strumenti per il web design nel 2018: ecco i tools che domineranno

  • Web-Design---gli-strumenti-per-il-2018

Negli ultimi anni sono usciti tonnellate di nuovi strumenti per il web design, ma il 2018 sembra alzare l’asticella di una tacca.

Il vecchio modello di comportamento di schermi statici basati sui pixel viene lentamente sostituito con idee di progettazione più moderne. Questi nuovi tools di progettazione utilizzano componenti basati su vincoli o persino interi sistemi di lay-out, attraverso l’apprendimento automatico suggeriscono colori e caratteri e ti permettono di progettare sistemi completi e dettagliati anziché pagine statiche.

Con questi nuovi concetti, stiamo lentamente colmando il divario tra design e sviluppo. Come dire che si ha un piede nel design e uno nello sviluppo delle cose, questo è un salto costruttivo nel futuro.

Ecco quindi un elenco degli strumenti di progettazione che ho trovato e messo insieme e che penso sarà utile per qualsiasi designer che voglia migliorare il proprio bagaglio e, più in generale, il proprio lavoro.

Li ho ordinati in 10 categorie per meglio definirne caratteristiche e destinazione, ma la maggior parte degli strumenti descritti potrebbe facilmente adattarsi a più categorie. Arrivati a questo punto, l’unica cosa che ci resta da fare è…cominciare 😉

Typography

Ecco perché il web design va fatto bene. Questi strumenti ti aiuteranno a scegliere i caratteri, quindi a creare il set perfetto di dimensioni e impostazioni per il tuo design.

Fontbase

Fontbase è un gestore di font veramente veloce, si presenta come multipiattaforma ed è gratuito. Tra le sue caratteristiche offre una buona panoramica e ti consente di installare i caratteri di google con un solo clic. Non categorizza i caratteri ma è comunque uno strumento utile.

The anatomy of a thousand typefaces

Scegliere un font è difficile, e trovare un bel carattere nella maggior parte degli strumenti di progettazione è una prova di pazienza. La maggior parte dei tool infatti ti dà solo un singolo menu a discesa, con i caratteri ordinati per nome.

The anatomy of a thousand typefaces, per ora ancora in fase sperimentale, ti consente di cercare e filtrare i tuoi font in base alle loro proprietà: il contrasto, il peso, l’altezza x.

Hai bisogno di un font spesso con una determinata altezza? Basta filtrare verso il basso e scegliere da una lista molto più piccola e dettagliata.

Fontjoy

Abbiamo appena detto che scegliere un font è difficile, ma decidere un abbinamento di font è ancora più difficile e spesso si torna alle combinazioni “provate e sicure”. Utilizzando una rete neurale Fontjoy ti permette di trovare per trovare nuove combinazioni che condividono un tema generale ma che hanno anche un piacevole contrasto.

Archetype

Una volta che hai i tuoi abbinamenti di font, hai un altro lavoro da fare: creare una gradevole variazione nelle dimensioni dei font, nei pesi e nelle line-heights per i tuoi titoli e paragrafi. Naturalmente, anche questi dovrebbero scalare su un corretto ritmo verticale e avere una piacevole quantità di spazio attorno a loro. Archetype ti consente di progettare e modellare rapidamente intestazioni e paragrafi, con un’anteprima dal vivo e la possibilità di esportare il risultato finale in CSS o in Sketch.

Modularscale

Se archetype offre troppe opzioni e per alcuni può risultare “dispersivo”, Modularscale fornisce rapidamente una scala modulare di dimensioni dei caratteri da utilizzare. Seleziona una dimensione di base, un rapporto, e questo sito ti fornirà una bella scala di dimensioni dei caratteri da utilizzare.

Typeshift

Molte tipologie di font in Google Fonts o Typekit non sono sufficienti? Allora perché non modificare il tuo carattere variabile in qualcosa che sia perfetto per il tuo design? Con Typeshift puoi prototipare e vivere in anteprima il tuo font, quindi esportarlo per utilizzarlo sui tuoi siti web.

Working with real data

Credo che progettare con contenuti falsi sia l’approccio sbagliato. Se non abbiamo accesso ai contenuti reali, possiamo almeno utilizzare valori reali o dati realistici grazie ai seguenti strumenti.

Lists.design

Una raccolta di tutti i tipi di dati reali (indirizzi, titoli, formati di file, nomi etc.) da utilizzare nei tuoi progetti. Disponibile solo per copiare e incollare o scaricare valori come json e usarli.

Tadviewer

Un’app gratuita multipiattaforma per ispezionare rapidamente i file CSV. Hai un set di dati di grandi dimensioni fornito da un cliente e a cui hai bisogno di dare un senso? Caricalo in Tad e visualizzerai i dati in una bella tabella pivot.

Prototipi / mockup

Mentre potremmo non essere in grado di addestrare una rete neurale in grado di mappare i nostri schizzi approssimativi, i seguenti strumenti accelereranno sicuramente la fase di prototipazione.

Fermion

Con Fermion.js puoi creare un layout a blocchi del tuo progetto e attaccarlo al comportamento per creare rapidamente un prototipo. Inoltre, grazie all’esportazione su componenti funzionanti, potrai progettare e perfezionare ancora meglio il tuo prototipo.

Gestione dei file

Se lavori con i progetti web (che siano siti o app), devi occuparti di file e versioni. Nessuno vuole capire se deve usare homepage_v3.4_finale_.sketch o homepage_v3.4_finale_2.sketch, e nessuno vuole tenere traccia di una mezza dozzina di file. Fortunatamente è molto più semplice realizzare disegni basati su vettori e ci sono molti strumenti per aiutarti.

Plant

Plant è un semplice plugin per il controllo della versione di Sketch. Ti consente di creare, aggiornare e sincronizzare i file di bozza tra più operatori direttamente da Sketch.

Abstract

Abstract è un altro strumento che funziona bene con Sketch e consente di condividere facilmente progetti di versioni all’interno di un team.

Strumenti moderni di graphic design per il web

La progettazione web si sta sempre più allontanando da Photoshop. L’attuale coltura di strumenti ui basati sui vettori consente di creare progetti web coerenti e di condividerli velocemente con gli sviluppatori.

Sketch

Questo elenco non sarebbe completo senza Sketch. Sono passati alcuni anni, ma al momento è lo strumento più forte per quanto riguarda la progettazione di interfacce web e delle app. La ricchezza di plugin e gli aggiornamenti costanti con funzionalità interessanti (simboli, vincoli, librerie) lo rendono il miglior tool di progettazione. È un peccato che funzioni solo su Mac, il che significa che i progettisti di Windows vengono lasciati indietro.

Adobe XD

XD è il supereroe per la progettazione di interfacce web che Adobe ha messo in campo per contrastare Sketch.

Funziona bene. Se sei su Windows questa è una grande opzione, anche se per ora il software è ancora in fase di lancio. Vedremo quanto terreno guadagnerà in futuro.

Figma

Figma può essere descritto come “bozza multiplayer”, poiché più progettisti possono lavorare sullo stesso progetto nello stesso tempo, e vedere gli altri aggiornare dal vivo. Ha anche una semplice modalità di prototipazione e di esportazione. Figma è web-based e quindi funziona su Mac, Windows e Linux. È gratuito per la maggior parte degli usi.

Gravit designer

Gravit è nato come uno strumento di progettazione vettoriale gratuito, ma è diventato rapidamente un forte concorrente per gli altri tools appena citati. Inoltre, Gravit è gratuito e multipiattaforma, quindi quantomeno da provare.

Strumenti di progettazione con un motore di layout

Tutte le piattaforme di sviluppo utilizzano una forma di motore di layout che posiziona automaticamente gli elementi sullo schermo in base a un set di regole. Quindi, ogni volta che si progetta in modo specifico per una piattaforma di questo tipo e si è costretti a spingere e spostare elementi manualmente, si sta praticamente facendo del lavoro che un computer fa automaticamente, il che è una perdita di tempo.

Questi strumenti di progettazione rappresentano il futuro.

Antetype

Anche se l’interfaccia utente sembra un pò datata, Antetype ha in realtà un sistema di progettazione web molto innovativo che sembra funzionare moto bene. Molto esplicativo il video introduttivo che hanno sul sito. Sfortunatamente, solo per Mac.

Webflow

Webflow offre qualcosa in più rispetto a uno strumento di progettazione, offrendoti anche un CMS e un hosting nel processo di lavorazione. È fortemente consigliato ai progettisti che vogliono avere più feeling con il modo in cui il web funziona.

Framer Design

Framer è nato come un modo per creare e testare prototipi di interfacce web, spesso basati su progetti di schizzo, ma è diventato col tempo un vero e proprio strumento di progettazione per i layout con capacità di interazione notevole. Anche questo, purtroppo, solo per Mac.

STUDIO

Uno strumento basato sul web che consente di progettare schermi (reattivi) con set di componenti personalizzabili. Ti permette inoltre di collegare dati reali e generare un’interfaccia utente basata su di essi. Gratuito e molto potente, ma purtroppo non molto ricco sulla documentazione, quindi per il momento se c’è qualcosa che non ti torna dovrai approfondire autonomamente.

InVision Studio

Questo tool sembra fantastico. Molte le caratteristiche: progettazione reattiva, un sistema di layout, prototipazione, componenti, esportazione del codice. Se funziona bene come appare nel video, questo potrebbe essere lo strumento di progettazione di interfacce web da utilizzare nel 2018.

Animazione

L’animazione è una parte sempre più presente nel web design attuale. Può aggiungere gusto al tuo design, oppure coprire delle mancanze. Molti strumenti di animazione sono incentrati sul codice, perciò te ne propongo uno solo che è adatto sia per gli sviluppatori che i per i designer:

Spirit

Tutto ciò che ho visto finora è stato davvero impressionante, come un’ampia e intuitiva interfaccia per realizzare le animazioni a mano. Attualmente in fase beta, ma consiglio di restare aggiornati su questo tool perché quando diventerà stabile sono certo che farà parlare di sè…

Responsive Design

Quando si disegnano le interfacce la progettazione può toccare “limiti sconosciuti”. Per i progettisti ciò significa un ulteriore livello di complessità. Un buon designer non progetta le cose che vede, ma progetta le relazioni tra di loro, in modo che le strutture funzionino correttamente per molte dimensioni dello schermo e per device diversi tra loro. Questa è una cosa difficile da fare, ma ci sono strumenti sicuramente in grado di aiutarti.

Browsersync

Browsersync collega tutti i tuoi browser insieme (comprese le versioni mobile). Sincronizza i tuoi clic, gli scroll e moduli, rendendo estremamente semplice testare un sito in una serie di ambienti diversi.

Polypane

Un browser per gli sviluppatori web, Polypane ti mostra il tuo sito Web in tutte le finestre che vuoi. Ha un buon numero di preset, sincronizza lo scrolling, ti permette di generare schermate di tutti i tuoi riquadri e ha gli incredibili chrome devtools integrati. È in sviluppo attivo e ci sono molte funzioni utili e interessanti in arrivo.

ISCRIVITI ALLA NEWSLETTER 

RISORSE, STRUMENTI, GUIDE UTILI, 

0% spam, 100% creatività

E RICEVI AGGIORNAMENTI E RISORSE

CONTENUTI ESCLUSIVI SOLO PER GLI ISCRITTI:

SU GRAFICA, PROGETTAZIONE E LOGO DESIGN

UN DOWNLOAD SICURO OGNI 7 GIORNI

FONT - FOTO FREE STOCK - TEXTURE - BONUS e altro ancora...

Ti chiedo di confermare il tuo indirizzo email entrando nella tua posta.

Lo fai solo una volta e solo ora.

Grazie e credimi, il mio sarà un impegno settimanale

per garantirti contenuti efficaci. Alcuni te li ricordo qui:

  • I migliori Font Gratuiti
  • Foto Free stock
  • Texture in HD e Full HD
  • Guide, Strumenti, News...
  • ...e tanto altro ancora...

 

 

Autore:

Sono un designer della comunicazione visiva. Lavoro con la comunicazione visuale progettando e realizzando materiale d’immagine per aziende, privati e associazioni; mi muovo dal cartaceo al web, passando per certe forme di espressione che si possono collocare nel mezzo.

Fammi sapere che ne pensi

Scrivi un commento

Loading Facebook Comments ...