Corso Web Design

5.0
1 opinione
  • 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

Prezzo da consultare

Chiama il centro

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

  • Servizio di consultazione

  • Tutoraggio personalizzato

  • Lezioni virtuali

Impara a Progettare Siti Web responsive

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

Online

Inizio del corso

Scegli dataIscrizioni aperte

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.

Domande e risposte

Aggiungi la tua domanda

I nostri consulenti e altri utenti potranno risponderti

Chi vuoi che ti risponda?

Inserisci i tuoi dati per ricevere una risposta

Pubblicheremo solo il tuo nome e la domanda

Opinioni

5.0
  • 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.
    |
100%
5.0
eccellente

Valutazione del corso

Lo consiglia

Valutazione del Centro

Nicola Z.

5.0
19/11/2023
Sul corso: 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.
Consiglieresti questo corso?:
*Tutte le opinioni raccolte da Emagister & iAgora sono state verificate

Successi del Centro

2017

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 design
    3

    3 alunni hanno indicato di aver acquisito questa competenza

  • Programmazione
    2

    2 alunni hanno indicato di aver acquisito questa competenza

  • Framework
    2

    2 alunni hanno indicato di aver acquisito questa competenza

  • Web master
    2

    2 alunni hanno indicato di aver acquisito questa competenza

  • HTML
    3

    3 alunni hanno indicato di aver acquisito questa competenza

  • CSS
    3

    3 alunni hanno indicato di aver acquisito questa competenza

  • Bootstrap
    2

    2 alunni hanno indicato di aver acquisito questa competenza

  • Javascript
    2

    2 alunni hanno indicato di aver acquisito questa competenza

  • Jquery
    2

    2 alunni hanno indicato di aver acquisito questa competenza

  • Photoshop
    3

    3 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

Chiama il centro

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 consultare