Corso Web Design
-
Ho seguito il corso On Demand,
sicuramente è un corso molto valido e il docente Staiano è molto in gamba, disponibile e chiaro nelle spiegazioni.
All’interno del corso c’è tutto il materiale necessario per arrivare preparati all’esame conclusivo.
Un punto di forza sono anche i numerosi webinar live gratuiti, molto utili per approfondire gli argomenti trattati a lezione.
← | →
Corso
Online
Hai bisogno di un coach per la formazione?
Ti aiuterà a confrontare vari corsi e trovare l'offerta formativa più conveniente.
Descrizione
-
Tipologia
Corso intensivo
-
Livello
Livello avanzato
-
Metodologia
Online
-
Ore di lezione
72h
-
Durata
Flessible
-
Inizio
Scegli data
-
Invio di materiale didattico
Sì
-
Servizio di consultazione
Sì
-
Tutoraggio personalizzato
Sì
-
Lezioni virtuali
Sì
Il design è una parte fondamentale della progettazione del sito. Un vero e proprio biglietto da visita che costituisce il primo punto di contatto con i clienti. Lo sviluppo di siti web deve essere finalizzato a rendere le pagine web veloci, facili da navigare ed accessibili da qualunque device, perciò deve essere perfettamente visibile sia da desktop che da tablet e smartphone per non perdere la conversione dell’utente.
Durante questo corso verranno affrontate le varie fasi di sviluppo di un'interfaccia web:
Briefing con il cliente e assegnazione dei ruoli ai vari componenti di un team di sviluppo;
Analisi e progettazione, definizione dell’architettura dell’informazione;
Realizzazione del prototipo, usability test e revisione con il cliente;
Operazioni di fine tuning e realizzazione dei file grafici per il reparto di sviluppo.
All’interno della piattaforma di formazione, oltre alle video lezioni e alle esercitazioni, troverai una community attiva composta da docenti esperti e colleghi corsisti pronti a confrontarsi sempre, anche dopo il corso. Un ambiente stimolante per la tua crescita e formazione continua.
Sedi e date
Luogo
Inizio del corso
Inizio del corso
Profilo del corso
Con questo corso tecnico-pratico imparerai a sviluppare siti web del design moderno e responsive. Sarai in grado di progettare interfacce utente coinvolgenti e facili da navigare, e soprattutto ottimizzate per far convertire l’utente verso l’obiettivo aziendale. Un mix perfetto tra
competenze tecniche, attraverso l’uso di Framework e linguaggi di programmazione. Html, Css, Bootstrap, Javascript;
competenze di grafica e design per il web, attraverso l’apprendimento dei migliori tool di grafica come Figma e Invsion;
competenze logiche e progettuali grazie alle nozioni di UX e UI Design che ti consentiranno di scegliere la giusta combinazione di colori, la migliore disposizione degli elementi sulla pagina web, il perfetto posizionamento di call to action e tanto altro.
Il corso è rivolto a tutti coloro i quali vogliono specializzarsi nel campo del Web Design imparando ad utilizzare gli specifici tool.
Per partecipare al corso non sono necessari particolari requisiti, se non quelli relativi a delle competenze basiche di informatica e dei relativi strumenti.
Corso Web Design
Durante il corso progetterai, con la guida del Senior Trainer, un’interfaccia utente sulla base di una specifica richiesta di un ipotetico cliente. Al termine del progetto, dopo aver analizzato le esigenze e gli obiettivi del cliente e dopo aver individuato i possibili fruitori finali del progetto, passerai alla fase di disegno vero e proprio fino alla realizzazione del tuo prototipo di sito web. Prototipo che renderai interattivo e condivisibile con il cliente utilizzando lo strumento InVision.
Ricevuta l’approvazione del docente, svilupperai il tuo progetto utilizzando i linguaggi HTML e CSS, il framework Bootstrap e potrai pubblicarlo in un server online per poterlo visualizzare nel web.
Dopo la richiesta di informazioni sarai contattato/a dal nostro ufficio commerciale che ti illustrerà al meglio la proposta formativa del corso e, in caso di tuo interesse, ti indicherà la procedura di acquisto.
Opinioni
-
Ho seguito il corso On Demand,
sicuramente è un corso molto valido e il docente Staiano è molto in gamba, disponibile e chiaro nelle spiegazioni.
All’interno del corso c’è tutto il materiale necessario per arrivare preparati all’esame conclusivo.
Un punto di forza sono anche i numerosi webinar live gratuiti, molto utili per approfondire gli argomenti trattati a lezione.
← | →
Valutazione del corso
Lo consiglia
Valutazione del Centro
Nicola Z.
Successi del Centro
Tutti i corsi devono essere aggiornati
La media delle valutazioni dev'essere superiore a 3,7
Più di 50 opinioni degli ultimi 12 mesi
7 anni del centro in Emagister.
Materie
- Web design3
3 alunni hanno indicato di aver acquisito questa competenza
- Programmazione
22 alunni hanno indicato di aver acquisito questa competenza
- Framework
22 alunni hanno indicato di aver acquisito questa competenza
- Web master
22 alunni hanno indicato di aver acquisito questa competenza
- HTML
33 alunni hanno indicato di aver acquisito questa competenza
- CSS
33 alunni hanno indicato di aver acquisito questa competenza
- Bootstrap
22 alunni hanno indicato di aver acquisito questa competenza
- Javascript
22 alunni hanno indicato di aver acquisito questa competenza
- Jquery
22 alunni hanno indicato di aver acquisito questa competenza
- Photoshop
33 alunni hanno indicato di aver acquisito questa competenza
Programma
IMPARA A PROGRAMMARE CON HTML
1. PRESENTAZIONE
• Presentazione docente
• Presentazione corso
2. SITI WEB
• Come è fatto un sito web
• Browser
• IDE
• Introduzione HTML / CSS / JS
• QUIZ 1
3. INTRODUZIONE HTML E TAG DI BASE
• Accenni / storia HTML
• Struttura HTML head e body
• QUIZ 2
• Tag per il testo
• Tag per enfasi del testo
• Tag di base “secondari”
• Tag hr
• Tag per elenchi
• Commenti e indentazione codice
• Minifier / Beautifier codice
• Tabelle
• QUIZ 3
4. LINK E TAG MULTIMEDIALI IN HTML
• Tag per link e attributi dei tag
• Ancore HTML
• Link assoluti e relativi
• Navigazione tramite link ipertestuali
• QUIZ 4
• Tag iframe
• Tag svg
• Tag canvas
• Tag HTML5 audio / video
• Tag HTML5 picture
• Attributo srcset per retina
• Attributo srcset per width
• Picture con srcset
• QUIZ 5
5. TAG STRUTTURA E TAG HTML 5
• Tag div e span
• Tag di struttura HTML5
• Tag HTML5 secondari
• Validazione codice
• QUIZ 6
6. TAG PER HEAD
• Tag head
• Tag noscript
• Charset
• QUIZ 7
7. CREARE UN FORM IN HTML
• Introduzione form
• Attributi input, e tag fieldset, legend e label • Password
• Select
• Radio e Checkbox
• Label
• Textarea
• Hidden
• Button e submit
• Email e number
• Pattern e URL
• Input HTML5
• QUIZ 8
DAI STILE ALLE PAGINE WEB CON CSS
8. INTRODUZIONE A CSS
• Introduzione CSS
• Incorporare i CSS
• Media e Import
• Commenti CSS
• Regola CSS
• Inspector
• QUIZ 9
9. PROPRIETÀ CSS, FONT, COLORI E SPAZIATURE
• Proprietà del testo
• Google Fonts
• Proprietà del testo secondarie
• Colori in CSS
• Spaziature in CSS, margin e padding
• I bordi
• Box model, altezza e larghezza
• Background
• Cursori
• QUIZ 10
10. PROPRIETÀ CSS, POSIZIONAMENTO NELLO SPAZIO
• Display
• Float e Clear
• Introduzione Flex
• Posizionamento
• QUIZ 11
11. SELETTORI IN CSS3
• Selettori di base
• Selettori di classe e ID (parte 1)
• Selettori di classe e ID (parte 2)
• Selettore universale
• Selettori combinati
• Selettore di attributo
• Selettore di attributo avanzato
• Pseudo classi
• Pseudo elementi
• Conflitti
• QUIZ 12
12. IMPARA CSS3
• Media query
• Transizioni
• Opacità
• Animazioni
• Gradienti
• Trasformazioni
• Colonne
• Filtri
• Unità di misura
IMPARA A SFRUTTARE TUTTO IL POTENZIALE DI BOOTSRAP13. INTRODUZIONE A BOOTSTRAP
• Cosa è e perché è utile
• Installare con CDN
• Installare in locale
• Browser e altro
14. UTILITY
• Colore
• Testo
• Border, Clearfix, Close, Embed
• Utility varie
• Display
• Spacing
• Flex (introduzione)
• Content
• Grid
• Responsive utilities
• Responsive in utility
15. COMPONENTI
• Alert
• Badge, Breadcrumbs
• Button
• Card
• Form
• Altri componenti
• Componenti JavaScript
16. BOOTSTRAP AVANZATO
• Bootstrap 5
• SCSS e compilazione
• Github
17. CREARE UN SITO WEB
• Introduzione
• Creare un header
• Creare footer e splash
• Creare una homepage
• Creare le pagine interne
IMPARA A CREARE PAGINE DINAMICHE CON JAVASCRIPT
1.INTRODUZIONE AL CORSO
• Introduzione a JavaScript
UX UI DESIGN
COSA IMPARERAI
• Introdurre gli studenti al complesso campo della progettazione grafica per il multimediale, con particolare riferimento alla realizzazione d’interfacce utente compatibili con gli standard di usabilità correnti.
• Semplificare i processi di comprensione, consultazione ed interazione con i numerosi e sempre nuovi mezzi di comunicazione.
• Analizzare il contesto, delineare lo stato dell’arte, acquisire capacità di ideazione e design di un layout semplice, sulla base di un target di consumo predefinito, adottando le ultime best practices per una corretta sinergia con il reparto di sviluppo (frontend framework più diffusi, rapidprototypingtools e metodi di esportazione delle componenti grafiche).
COSA FARAI DURANTE IL CORSO
Verranno affrontate le varie fasi di sviluppo di un'interfaccia, dal briefing con il cliente all’assegnazione dei ruoli ai vari componenti di un team di sviluppo, dalla fase di analisi alla fase di progettazione, definizione dell’architettura dell’informazione, wireframing, realizzazione dei prototipi, usability test e revisione con il cliente, fino alle operazioni di fine tuning ed alla realizzazione dei file grafici per il reparto di sviluppo. Lo studente dovrà conoscere i principali metodi di progettazione secondo una logica di responsive web design e, in casi specifici, di mobile first approach.
INTRODUZIONE ALLA USER EXPERIENCE
• User Centered Design
• Principi di UX Design
• L’interazione: Affordance, Significanti, Vincoli, Mapping, Feedback
PSICOLOGIA DELLE AZIONI QUOTIDIANE
• livello viscerale, comportamentale, riflessivo
• L’immagine di sistema: modello concettuale, schema di funzionamento, root case analysis IL PROCESSO
• analisi
• userpersonas
• userjourney
• task analisys
• definizione degli scenari
INTRODUZIONE ALLA PROGETTAZIONE DI INTERFACCE DIGITALI
• casi studio
PRINCIPI DI UI DESIGN
• Teoria della Gestalt
• Teoria del Colore
• Tipografia, Spazi e Ritmo
OPERAZIONI PRELIMINARI ALLA PROGETTAZIONE
• briefing
• disegno della sitemap
• diagramma dei flussi
IL LAYOUT
• anatomia di un’interfaccia
• grid system
• posizionamento degli elementi
METODI DI PROGETTAZIONE
• Progressive enhancement
• responsive design
• mobile first approach
• benchmarking
• best/worst practices
• disegno della mood-board - progettazione live
IL DISEGNO DELL'INTERFACCIA – SOFTWARE
• panoramica sui software di progettazione più usati,
• i nuovi strumenti di rapidprototyping - progettazione live Figma https://www.figma.com/,Invision https://www.invisionapp.com/)
IL DISEGNO DELL’INTERFACCIA - IL WIREFRAME
• Griglie
• Allineamenti
• gerarchia dei contenuti
• componenti
• flussi
IL DISEGNO DELL’INTERFACCIA - IL MOCKUP
• pixel perfect design
• risoluzione e aspect ratio
• esportazione degli assets
• creazione della guida di stile - progettazione live IL DISEGNO DELL’INTERFACCIA - IL PROTOTIPO• progettazione live
VERIFICA ELABORATI E CONCLUSIONI
• Come presentare la propria UI al cliente
• nuove tendenze
• bibliografia essenziale
INTRODUZIONE A FIGMA
-
Cos'è Figma
-
dove scaricare Figma
-
Come importare i template di Figma
-
L'interfaccia di Figma
-
I frame
-
Forme e gure
-
Lo strumento pennino e le curve di Bézier Forme vettoriali e selezioni
-
La gestione dei team
-
Il pannello dei livelli
-
I componenti e il pannello assets
-
Il pannello design
-
Come impostare le griglie
-
Auto-layout
-
Colori e stili
-
Immagini e sfumature
-
Constraints
-
Forme e gallery
-
Come visualizzare tutte le scorciatoie di tastiera
-
Disegniamo un sito web
-
Presentazione del progetto Inserimento hero image Inserimento menu Inserimento search bar Icon design
-
Il pannello prototype
-
Disegniamo un'app mobile
-
Presentazione del progetto mobile Maschera e sfumatura
-
Testi e allineamento
-
Creazione forme
-
Il pannello prototype e l'overlay
Hai bisogno di un coach per la formazione?
Ti aiuterà a confrontare vari corsi e trovare l'offerta formativa più conveniente.
Corso Web Design
Prezzo da consultareAggiungi corsi simili
e confrontali per aiutarti a scegliere.{title}{centerName}{price}{price} {priceBeforeDiscount} {taxCaption}Formazione per argomento
Corsi di Altre tematiche Corsi di Amministrazione aziendale Corsi di Creazione e design Corsi di Finanza Corsi di Informatica Corsi di Lingue Corsi di Logistica Corsi di Marketing e vendita Corsi di Qualità, produzione, ricerca e sviluppo Corsi di Scienze Corsi di Scienze umane Corsi di Settore industriale Corsi di Settore legale Corsi di Settore pubblico Corsi di Settore sanitario Corsi di Sicurezza Corsi di Sport e tempo libero Corsi di Turismo - Programmazione