Programma Didattico Corso Web Design

Ux

1. Introduzione

• Presentazione docente e presentazione del programma del corso Concetti introduttivi

2. Presentazione brief

• Introduzione alla ux
• Miro, figjam e board collaborative per l’analisi del brief e la realizzazione di una mood board progettuale

3. Flowcharting

• Strutturare una mappa di navigazione

4. Introduzione a figma

• Panoramica degli strumenti
• Interfaccia e funzionalità di base
• Frame e proprietà contestuali Livelli

5. Wireframing

• Creare lo scheletro del sito
• Progettare gli ingombri
• Testare l’idea

6. Colori e typography per il web

• Metodi colore
• Risoluzione
• Web fonts
• Concetti chiave di accessibilità

7. Atomic design

• Teoria dei componenti e degli stili
• Regole di consistenza nel design
• Auto layout

8. Quiz + esercitazione live su componenti e auto layout in figma

Ui – Html/css e flexbox

9. Creare una libreria di componenti e stili

• Varianti
• Strutturare le fondamenta di un kit ui

10. Design della ui

• Applicare elementi e regole di design per la creazione di un’interfaccia utente semplice e intuitiva

11. Animare gli elementi

• Prototipare i componenti
• Transizioni tra frame e testing del prodotto

12. Esportazione delle risorse

• Inspect panel
• Handover del progetto per lo sviluppo

13. Estendere l’esperienza e velocizzare il flusso lavorativo con plugin e widget in figjam e figma

14. Introduzione a visual studio code

• Installare e configurare una ide
• Plugin e impostazioni consigliate
• Introduzione al modulo di sviluppo

15. Evoluzione del web dalla sua nascita ad oggi

• Struttura di un sito web html e html5 (introduzione)

16. Ispezionare i siti

• Elementi div
• Head e body
• Tag di base
• Tag di testo
• Gerarchie di testo e testo paragrafo
• Span

17. Introduzione al css

• Inline css
• Fogli di stile collegati
• Id e classi
• Regole css di base css3

18. Testo e colori in css

• Colori e typography (dal design allo sviluppo)
• Border, margin e padding

19. Google fonts e web typography avanzata

20. Collegare html e css

• Creare e posizionare contenitori strutturali
• Display
• Position relative e absolute
• Introduzione a flex e grids

21. Creare un layout con flexbox

• Funzionalità avanzate e tag specifici per display: flex

22. Quiz + esercitazione live su html/css e flexbox

Bootstrap

23. Selettori di base e selettori avanzati css3

24. Animazioni, transizioni e trasformazioni css3

25. Media queries e introduzione al concetto di responsive web design e mobile first

26. Introduzione ai framework web

• Bootstrap perché usarlo installare e configurare bootstrap localmente

27. Responsive web design con bootstrap

• Grid system e documentazione di base

28. Componenti e helpers

• Realizzare un sito web mobile friendly con bootstrap

29. Realizzare un sito web mobile friendly con bootstrap (parte 2)

30. Quiz + esercitazione live su bootstrap

Javascript

• Precompilatori scss
• Git e github
• Introduzione al linguaggio di programmazione javascript
• Configurare visual studio code
• Bootstrap e javascript
• Variabili e costanti
• Operatori aritmetici, di confronto, logici e ternari
• Terminale e console
• Data types
• Array e metodi base
• Oggetti
• Funzioni
• Quiz + esercitazione live su javascript
• Dom
• Interagire con il dom
• Eventi
• Ftp
• Installare, configurare e gestire un file transfer protocol
• Acquistare e configurare dominio e hosting web
• Safe protocols