Guide

Progettare siti web con Figma

Pubblicato 27 Nov, 2019

Aggiornato 6 Dic, 2019

Progettare siti web con Figma è la prima guida in italiano su Figma completamente gratuita.
Scopri come progettare siti web attraverso l’utilizzo di Figma e sviluppa competenze di alto livello nel campo del web design attraverso esercizi pratici e concreti. Nel percorso di questa guida costruirai il design reale di un sito web responsive, approfondendo tutte le fasi della progettazione: dal wireframe al prototipo finale.

Scopri come usare Figma e inizia a progettare interfacce utente professionali

La guida adatta a professionisti e apprendisti

La Guida alla progettazione di siti web con Figma si rivolge a web designer e developer che hanno bisogno di affinare o aggiornare il loro metodo nella progettazione di siti web.

Sta tranquillo, anche se sei ancora alle prime armi non sarà affatto complicato starmi dietro! Per seguire questa guida non è richiesta alcuna conoscenza dei linguaggi per lo sviluppo. Sarà sufficiente avere da parte tua un po’ di pazienza e tanta voglia di imparare.

Ti consiglio ad ogni modo di partire con una conoscenza di base della design tool application che useremo, per avere un’idea di base del programma. Leggi l’articolo introduttivo a Figma e ai componenti prima di tuffarti in questa guida!

Come è strutturata la guida?

La guida è suddivisa in due moduli:

Modulo A: esplorerai Figma e capirai come lavorare con una design tool application professionale, mettendo in pratica le best practices per la progettazione di siti web.

Modulo B: ci sporcheremo le mani con la progettazione e realizzerai un prototipo reale di sito web mettendo in pratica tutte le conoscenze maturate nel Modulo A.

Nel corso degli articoli ti parlerò delle skill principali che ti permetteranno di progettare interfacce utente moderne, in linea con i trend degli ultimi mesi.

La guida per progettare siti web responsive

Creare design di siti web responsive

Per essere in grado di progettare siti web efficaci devi capire come lavorare in ottica responsive cercando di seguire un approccio mobile first. Dopo i primi articoli introduttivi su Figma e una volta analizzate le problematiche progettuali, passerai alla realizzazione di quattro wireframe:

  • Homepage
  • Archivio di articoli
  • Articolo
  • Pagina contatti

Progettare siti web pensando ai dispositivi mobile

È passato un decennio da quando si iniziò a parlare di mobile first e nel corso degli anni le voci a favore di questo modo di progettare siti web si sono fatte sempre più convinte e insistenti. A partire dal 2010 grandi colossi come Google hanno dimostrato che la progettazione dei software dell’era digitale che oggi stiamo vivendo, avrebbe richiesto un totale cambio di paradigma rispetto al passato.

Chi progetta siti web e riflette sulla UX (User Experience) delle pagine pubblicate online è chiamato a pianificare le fasi della progettazioni iniziando dai formati standard dei dispositivi mobile. Le motivazioni di questo approccio sono scaturite principalmente dagli utenti e in generale da una buona parte dei consumatori. Appare evidente già da qualche anno che la massa preferisce l’impiego dei dispositivi mobile per le normali attività di navigazione in rete e spesso si arriva persino a rinunciare completamente al classico computer desktop.

Avrebbe poco senso a questo punto continuare a progettare siti web partendo da un foglio a forma di desktop e non da uno a forma di iPhone. Come si dice… il cliente ha sempre ragione e chi come me preferiva progettare siti web iniziando da un modello desktop, bhè dovrà prima o poi arrendersi all’evidenza dei fatti.

Naturalmente ogni progetto viene adattato alle varie risoluzioni (almeno quelle più comuni) per far si che tutti i layout possano essere leggibile su qualsiasi tipo di dispositivo ed è esattamente ciò che faremo in questa guida.

Dunque non trascureremo il design del sito web lato desktop, ma semplicemente opereremo in modo da adattare un progetto mobile sugli altri dispositivi.

La filosofia mobile first è diventata per la maggior parte dei web designer uno standard progettuale e ovviamente non potrà che essere il primo comandamento di questa guida.

Cosa troverai nel Modulo A

Interfaccia di Figma

Nel primo modulo della Guida alla progettazione di siti web imparerai le tecniche avanzate di Figma, la design tool application che ti ho presentato in questo articolo.

Dopo aver creato un nuovo account, avrai modo di conoscere l’area di lavoro e gli strumenti principali di questo strumento studiato appositamente per i creativi del web.

Imparerai tecniche e trucchetti per creare la base dei tuoi primi progetti in Figma e prenderai dimestichezza con l’editor, i componenti, gli stili, il prototyping e le modalità collaborative in real time.

Terminata la parte conoscitiva degli strumenti a tua disposizione, entrerai nel vivo della fase progettuale analizzando le problematiche tipiche del web design. Per essere abbastanza preparato ad affrontare questa fase, ti consiglio di dare un’occhiata all’articolo sui metodi di progettazione di siti web.

Cosa realizzerai nel Modulo B?

Nella seconda parte della guida alla progettazione di siti web capirai come costruire il design di pagine web reali e mi seguirai nella progettazione di una nuova veste grafica per creativecode.it, in vista dell’apertura di una nuova sezione Video sul sito.

Adatto a chi crea App

La nuova versione del sito di creativecode.it prevede l’inserimento di una pagina creata ad hoc per la selezione di video on-demand simile alle più famose Netflix o Prime Video. I contenuti presenti nella guida saranno utili anche ai Developer impegnati nella creazione di app o web app!

Guida alla progettazione di siti web gif

Utile a tutti i professionisti del web

Ciascuna lezione è strutturata in modo da poter essere affrontata a qualsiasi livello e da chiunque si occupi di web, dal social media manager al graphic designer.

Questa guida ti fornisce le basi di progettazione per conoscere il linguaggio visivo che è alla base di ogni sito web.

Sei un Social Media Manager e hai bisogno di grafiche da creare al volo per la condivisione sui social? Figma può essere un’ottima alternativa a software commerciali come Adobe Illustrator o Sketch grazie a una serie di preset a misura di social (Facebook, Twitter, Instagram, LinkedIn).

Ordine di pubblicazione degli articoli

Ehi! Ma il Modulo B non è presente sul sito e per di più il modulo A è ancora incompleto!

Infatti, lascia che ti spieghi…

Ogni articolo viene scritto con meticolosità per permetterti di trovare su questo sito tutte le informazioni che ti servono per poter lavorare anche a case studies diverse da quelle affrontate nella guida. Personalmente ritengo che questo approccio sia il migliore per permetterti di apprendere in modo completo ogni singolo concetto. Tuttavia, per fare le cose nel modo migliore, la realizzazione di ogni singola lezione costa tempo e fatica. Quindi, se noti che non tutti gli articoli sono stati pubblicati, ti consiglio di venire a trovarci sulle nostre pagine social e iniziare a seguirci per non perdere nessun aggiornamento. Non costa nulla e anzi, ti sarà di aiuto per conoscere tutte le novità relative al mondo del web design.

Bene, direi che ho parlato abbastanza…
Allora?! Sei pronto a partire? Iniziamo!

Stato guida: In aggiornamento

Lezioni Livello: Facile

Modulo A

Creare un nuovo progetto su Figma

Il primo accesso a Figma: creare file progetti e gruppi di lavoro

In questo primo tutorial della Guida alla progettazione di Siti Web, ti mostrerò passo dopo passo come creare un nuovo progetto su Figma. Per metterti nelle condizioni di lavorare in totale armonia con il programma, troverai una panoramica chiara e dettagliata della configurazione di base che ti permetterà di comprendere i primi step che affronterai nel corso del Getting Started.

~8min.

,

Come usare Figma

Tutorial completo sugli strumenti di Figma e le tecniche di base

In questo articolo capirai come usare Figma attraverso un excursus dell'interfaccia e di tutti gli strumenti presenti nel programma. Apprenderai le basi tecniche e teoriche dell'applicazione e farai pratica con i tool principali.