Design system per siti web con Figma
A course by Filip FelbarDesigner digitale
A course by Filip Felbar, Designer digitale
Impara a costruire design system per siti web visivamente accattivanti usando Figma e ottimizza il tuo flusso di lavoro
Avendo lavorato in diversi campi creativi, il designer digitale Filip Felbar sa come una mancanza di struttura possa causare problemi. Il suo processo è dedicato alla struttura e al rendere le cose più facili e accessibili. È qui che entrano in gioco i sistemi di design. Un sistema di design è una libreria collettiva che mette insieme tutti gli elementi necessari a un team per progettare, realizzare e sviluppare un prodotto in modo efficiente e in linea con il proprio marchio. Può contenere qualsiasi cosa, dalle linee guida di stile alle informazioni sulla codifica.
In questo corso online, Filip condivide con te cosa sono i sistemi di progettazione e il suo approccio per svilupparli e riciclarli. Impara anche a navigare efficacemente negli strumenti di Figma per creare sistemi di progettazione digitale per siti web. Esplora i componenti globali e il layout automatico per velocizzare il tuo processo!
Cosa imparerai in questo corso online?
22 lezioni & 23 download
Introduzione ai sistemi di progettazione
6 minuti, 58 secondi
In che modo i sistemi di progettazione possono aiutarti ad accelerare il flusso di lavoro
8 minuti, 0 secondi
Introduzione al progetto e approccio
6 minuti, 36 secondi
Impostazione del file Figma e inizio delle prime esplorazioni 1
18 minuti, 40 secondi
Impostazione del file Figma e inizio delle prime esplorazioni 2
16 minuti, 19 secondi
Espansione del sistema di esplorazione e progettazione 1
19 minuti, 36 secondi
Cosa include questo corso?
Inizia incontrando il tuo insegnante, Filip Felbar. Condivide il suo viaggio nel design digitale e le sue ispirazioni.
Quindi, fatti conoscere i sistemi di progettazione con cui lavorerai e i vantaggi che offrono. Filip ti guida attraverso alcuni rapidi esempi di come i componenti e gli stili globali possono essere aggiornati in modo efficiente prima di esaminare il progetto che affronterai in questo corso.
Successivamente, inizia a preparare i tuoi contenuti con Figma. Crea una lista di controllo delle cose da includere e imposta gli elementi iniziali e globali. Esplora le indicazioni di progettazione e tuffati nel layout automatico, aggiornando componenti e stili man mano che procedi.
Successivamente, perfeziona il tuo sistema con una pagina assemblata, creane una nuova con la versione completata e scrivi le linee guida per il suo utilizzo.
Come bonus, Filip condivide il suo processo di creazione di ulteriori elementi del marchio per i social media.
Alla fine del corso, sarai in grado di pensare in modo strutturato che ti aiuterà a dare vita ai tuoi progetti creativi e ad accelerare il tuo flusso di lavoro.
Recommended software & tools for this course
What is this course's project?
Scopri come creare un design di sito Web visivamente accattivante e un sistema di progettazione organizzato con la documentazione appropriata.
Progetti di allievi del corso
Who is this online course for?
Chiunque desideri saperne di più sui sistemi di progettazione e sul web design.
Requirements and materials
Figma o uno strumento simile.
La precedente esperienza con Figma andrà a beneficio degli studenti.
Recensioni
- 2 mesi fa
Es un curso apto para principiantes, ayuda a potenciar tus conocimientos en figma
- 2 mesi fa
Muy buen curso, bien explicado paso a paso, vale la pena!
- framantebPLUS5 mesi fa
muy malo realmente
- 5 mesi fa
Comenzó bien, muy inspirador. Pero finalmente resulta tedioso... una gran parte es acompañar al tutor en su propio proceso y resulta un poco narcotizante. Y de lo que me gustaría haber escuchado, como la organización de variables, foundations o variantes mobile, no hay contenido.
- 7 mesi fa
Me falto más información pero si lo básico te lo da, si vas empezando está muy bien
Contenuti
- U1
Introduzione
- Presentazione
- Fonti di ispirazione
- U2
Sistemi di progettazione
- Introduzione ai sistemi di progettazione
- In che modo i sistemi di progettazione possono aiutarti ad accelerare il flusso di lavoro
- Introduzione al progetto e approccio
- U3
Il processo di progettazione del web e del sistema
- Impostazione del file Figma e inizio delle prime esplorazioni 1
- Impostazione del file Figma e inizio delle prime esplorazioni 2
- Espansione del sistema di esplorazione e progettazione 1
- Espansione del sistema di esplorazione e progettazione 2
- Organizzazione delle pagine del sistema di progettazione 1
- Organizzazione delle pagine del sistema di progettazione 2
- Esplorare le varianti durante la creazione di componenti
- U4
Perfezionamento del sito web e del sistema di progettazione
- Perfezionamento del sistema di progettazione con una pagina assemblata 1
- Perfezionare il sistema di progettazione con una pagina assemblata 2
- Perfezionare il sistema di progettazione con una pagina assemblata 3
- Impostazione di nuove pagine con il sistema di progettazione completo 1
- Impostazione di nuove pagine con il sistema di progettazione completo 2
- Impostazione di nuove pagine con il sistema di progettazione completo 3
- Come avvicinarsi alla creazione di documentazione per il sistema di progettazione
- U5
Concludere e andare oltre il web
- Pulizia e utilizzo di un layout automatico
- Utilizzo del design su ulteriori elementi del marchio
- Pensieri finali
- PF
Progetto finale
- Design system per siti web con Figma
Cosa aspettarsi da un corso Domestika
Impara al tuo ritmo
Divertiti imparando comodamente da casa e senza orari. Sei tu a decidere quando seguire le lezioni.
Impara dai migliori professionisti
Impara i metodi e le tecniche più utili insieme ai migliori professionisti del settore creativo.
Conosci insegnanti di grande esperienza
Ogni insegnante ti trasmetterà le sue conoscenze con passione e spiegazioni chiare, offrendoti una prospettiva professionale in ogni lezione.
Certificates
PLUSIf you're a Plus member, get a attestato personalizzato signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Soyez aux premières loges
Con i nostri video di alta qualità, non ti perderai neanche un dettaglio. Grazie all'accesso illimitato, puoi vedere ogni lezione tutte le volte che vuoi e perfezionare le tue abilità.
Condividi conoscenze e idee
Fai domande, chiedi pareri e offri soluzioni. Condividi la tua esperienza di apprendimento con gli altri allievi della community appassionati di creatività.
Interagisci con una community creativa globale
La community di Domestika è composta da milioni di utenti di tutto il mondo: persone curiose, piene di voglia di esplorare ed esprimere la propria creatività.
Segui corsi prodotti da veri professionisti
Domestika seleziona gli insegnanti con cura e produce ogni corso internamente, per garantirti un'esperienza di apprendimento online di eccellente qualità.
Domande frequenti
Un design system è un insieme di componenti riutilizzabili, linee guida e standard che semplificano il web design, garantiscono coerenza del brand e facilitano la collaborazione. Usare un design system fa risparmiare tempo, riduce compiti ripetitivi e migliora la scalabilità dei progetti digitali.
Questo corso è pensato per designer di livello intermedio con una conoscenza base dei principi del web design e strumenti come Figma. Non serve esperienza avanzata, ma una certa familiarità con il design digitale o concetti di front-end è utile.
Ti servirà Figma, perché il corso mostra come creare e gestire design system all'interno di questa piattaforma. È consigliata una conoscenza di Notion per organizzare i progetti, ma non è necessario saper programmare o usare software avanzati.
Imparerai strategie per strutturare i progetti di design, creare checklist di contenuti, gestire asset e usare strumenti collaborativi per mantenere i flussi di lavoro efficienti e organizzati in progetti web scalabili.
Il corso spiega come creare, nominare e gestire componenti riutilizzabili, applicare stili globali e documentare i flussi di lavoro in Figma per garantire coerenza ed efficienza tra i progetti.
Sì, il corso insegna tecniche di documentazione, processi standardizzati e flussi di lavoro basati sui componenti che rendono più fluida la collaborazione e aiutano i team a mantenere qualità e coerenza nel design.
Acquisirai competenze pratiche nell'organizzare e applicare la tipografia, impostare griglie di layout e stabilire gerarchie tipografiche per creare interfacce web visivamente strutturate e accessibili.