SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Downloaden Sie, um offline zu lesen
Web Design:
da Photoshop
a Dreamweaver
RoadMap
YOU



                                                         Trends
                                                         & Style
CONCEPT




DESIGN




 CODE




                    Concept, Visual Marketing e Modern Layout
Elaborazione dello stile: modern, minimalist, classic, monochrome..
                               Studio dei contenuti e primi bozzetti
                               L’importanza dell’uso delle immagini
                          Layout moderni, funzionali e “Responsive”
Layout, Gerarchia e Ritmo



                          Unità       0,5    1              2     3
                          di misura


   Griglia




       Comunicare bene con Griglie e Layout
       Costruire un buon layout si fa con la testa
            Non siate “artisti” ma Comunicatori

L’importanza delle griglie e dei rapporti visivi
                       Vuoti creativi vs il Caos
                        Gli elementi del layout
               Analisi strutturale della pagina
                              E i Social Media?
Colori, icone e forme, un problema di sostanza
 Studio e uso dei colori e delle immagini per il bilanciamento visivo
                             Iconografia, elementi grafici e non solo
Coordinare ogni elemento con lo stile scelto e il Concept generale
Risoluzione del monitor, Responsive Design e Test su Browser
               Quale dimensione è quella gusta? Come orientarsi?
   Cos’è il Responsive Design? Perchè tenerlo in considerazione?
    Browser, compatibilità ed esaurimento nervoso. Chi mi aiuta?
                                         Valori assoluti o relativi?
Photoshop: gestione del layout, ritaglio e formati
                              Gli strumenti di Photoshop
                              Prepararsi all’esportazione
Testi, immagini e i mix nemici del posizionamento (Seo)
                Salva per il web, scegli il formato giusto
                                Il potere del file sorgente
Dreamweaver: gestire la pagina, migliorare il codice, verificare
          Strumenti essenziali per migliorare i files della pagina
                                         Gestire un sito completo
                      Strumenti di verifica e controllo del codice
                       Navigazione offline e ritorno a Photoshop
                                                       Spunti Seo
                                             Pubblicazione online
Massimo Nava aka Artlandis




GRAZIE! :)
Art Director, Social Media Manager, Teacher & Coach




                              Social Keyword: Artlandis

Weitere ähnliche Inhalte

Andere mochten auch

5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy
5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy 5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy
5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy Ninja Academy
 
SOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIA
SOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIASOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIA
SOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIAFIRE digital agency
 
Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...
Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...
Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...Ninja Academy
 
I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy
I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy
I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy Ninja Academy
 
Competitive intelligence - Pubcon 2013
Competitive intelligence - Pubcon 2013Competitive intelligence - Pubcon 2013
Competitive intelligence - Pubcon 2013Brian McDowell
 
Blog: Eksis, Narsis, Bisnis
Blog: Eksis, Narsis, BisnisBlog: Eksis, Narsis, Bisnis
Blog: Eksis, Narsis, Bisnisbilly1986
 
Use COBIT for IT SAVINGS
Use COBIT for IT SAVINGSUse COBIT for IT SAVINGS
Use COBIT for IT SAVINGSSanjiv Arora
 
Fredy Presentacion Yeea
Fredy Presentacion YeeaFredy Presentacion Yeea
Fredy Presentacion Yeeayariff16
 
24hbc + Bonnier R&D
24hbc + Bonnier R&D24hbc + Bonnier R&D
24hbc + Bonnier R&DBonnier
 
The Teacher In The Future
The Teacher In The FutureThe Teacher In The Future
The Teacher In The Futureguest3b42d8
 

Andere mochten auch (18)

Social Media Marketing: Corso base
Social Media Marketing: Corso baseSocial Media Marketing: Corso base
Social Media Marketing: Corso base
 
Come sviluppare un progetto completo
Come sviluppare un progetto completo Come sviluppare un progetto completo
Come sviluppare un progetto completo
 
Photoshop: Tecnica creativa
Photoshop: Tecnica creativaPhotoshop: Tecnica creativa
Photoshop: Tecnica creativa
 
Web Adv e Marketing online (Corso base)
Web Adv e Marketing online (Corso base)Web Adv e Marketing online (Corso base)
Web Adv e Marketing online (Corso base)
 
Creare una campagna online da zero
Creare una campagna online da zeroCreare una campagna online da zero
Creare una campagna online da zero
 
Workshop "Digital Marketing & Trends"
Workshop "Digital Marketing & Trends"Workshop "Digital Marketing & Trends"
Workshop "Digital Marketing & Trends"
 
5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy
5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy 5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy
5 cose da sapere sul Web Marketing: Scopri il Master Ninja Academy
 
SOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIA
SOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIASOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIA
SOCIAL MEDIA MARKETING E COMUNICAZIONE NEI NUOVI MEDIA
 
Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...
Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...
Migliorare la performance delle tue Campagne: Scopri la Free Masterclass Ninj...
 
I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy
I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy
I fondamentali del Facebook Marketing: Scopri il Corso Ninja Academy
 
Competitive intelligence - Pubcon 2013
Competitive intelligence - Pubcon 2013Competitive intelligence - Pubcon 2013
Competitive intelligence - Pubcon 2013
 
Action For Healthy Kids
Action For Healthy KidsAction For Healthy Kids
Action For Healthy Kids
 
Blog: Eksis, Narsis, Bisnis
Blog: Eksis, Narsis, BisnisBlog: Eksis, Narsis, Bisnis
Blog: Eksis, Narsis, Bisnis
 
Use COBIT for IT SAVINGS
Use COBIT for IT SAVINGSUse COBIT for IT SAVINGS
Use COBIT for IT SAVINGS
 
Fredy Presentacion Yeea
Fredy Presentacion YeeaFredy Presentacion Yeea
Fredy Presentacion Yeea
 
24hbc + Bonnier R&D
24hbc + Bonnier R&D24hbc + Bonnier R&D
24hbc + Bonnier R&D
 
The Teacher In The Future
The Teacher In The FutureThe Teacher In The Future
The Teacher In The Future
 
Yiftah
YiftahYiftah
Yiftah
 

Ähnlich wie Web Design: da Photoshop a Dreamweaver

6 Step per un Sito Funzionale: 3. Web Design e Layout
6 Step per un Sito Funzionale: 3. Web Design e Layout6 Step per un Sito Funzionale: 3. Web Design e Layout
6 Step per un Sito Funzionale: 3. Web Design e LayoutFormazioneTurismo
 
Laboratori di Web Marketing e Interattività
Laboratori di Web Marketing e InterattivitàLaboratori di Web Marketing e Interattività
Laboratori di Web Marketing e InterattivitàFormazioneTurismo
 
Dal Wireframe alla pubblicazione: sviluppo usabile di un sito
Dal Wireframe alla pubblicazione: sviluppo usabile di un sitoDal Wireframe alla pubblicazione: sviluppo usabile di un sito
Dal Wireframe alla pubblicazione: sviluppo usabile di un sitoCultura Senza Barriere
 
Mob04 best practices for windows phone ui design
Mob04   best practices for windows phone ui designMob04   best practices for windows phone ui design
Mob04 best practices for windows phone ui designDotNetCampus
 
Ribesdesign interfacce
Ribesdesign interfacceRibesdesign interfacce
Ribesdesign interfacceRibesdesign
 
Brera - Digital Strategy - Infinite mete un solo viaggio
Brera - Digital Strategy - Infinite mete un solo viaggioBrera - Digital Strategy - Infinite mete un solo viaggio
Brera - Digital Strategy - Infinite mete un solo viaggioAlessandro Casto
 
Dall'idea all'analisi: le fasi che precedono la progettazione esecutiva
Dall'idea all'analisi: le fasi che precedono la progettazione esecutivaDall'idea all'analisi: le fasi che precedono la progettazione esecutiva
Dall'idea all'analisi: le fasi che precedono la progettazione esecutivaMaria Cristina Lavazza
 
Hotel Responsive Design: Come?
Hotel Responsive Design: Come?Hotel Responsive Design: Come?
Hotel Responsive Design: Come?FormazioneTurismo
 
Corso di formazione Web Designer 2 0 e Comunicazione Multimediale
Corso di formazione Web Designer 2 0 e Comunicazione MultimedialeCorso di formazione Web Designer 2 0 e Comunicazione Multimediale
Corso di formazione Web Designer 2 0 e Comunicazione MultimedialeCosè Murciano
 
Corso di formazione Web Designer 2.0 e Comunicazione Multimendiale
Corso di formazione Web Designer 2.0 e Comunicazione MultimendialeCorso di formazione Web Designer 2.0 e Comunicazione Multimendiale
Corso di formazione Web Designer 2.0 e Comunicazione MultimendialeJTO Training
 
Visual Design vs. Creatività
Visual Design vs. CreativitàVisual Design vs. Creatività
Visual Design vs. CreativitàNicolò Volpato
 
Visual design, emozione ed esperienza
Visual design, emozione ed esperienzaVisual design, emozione ed esperienza
Visual design, emozione ed esperienzaNicolò Volpato
 
AI (Architettura dell'Informazione) for dummies: lezioni e project work
AI (Architettura dell'Informazione) for dummies: lezioni e project workAI (Architettura dell'Informazione) for dummies: lezioni e project work
AI (Architettura dell'Informazione) for dummies: lezioni e project workDaniela Costantini
 
L'officina creativa eventi
L'officina creativa eventiL'officina creativa eventi
L'officina creativa eventiMaddalena Masera
 
Modulo 1 - Grafica e Multimedia.pdf
Modulo 1 - Grafica e Multimedia.pdfModulo 1 - Grafica e Multimedia.pdf
Modulo 1 - Grafica e Multimedia.pdfGiacomoMessina3
 
Progettazione di interfaccie e tassonomia
Progettazione di interfaccie e tassonomiaProgettazione di interfaccie e tassonomia
Progettazione di interfaccie e tassonomiaguestc86d7a4
 
Presentazione Web Me Do
Presentazione Web Me DoPresentazione Web Me Do
Presentazione Web Me DoWeb Me Do
 

Ähnlich wie Web Design: da Photoshop a Dreamweaver (20)

6 Step per un Sito Funzionale: 3. Web Design e Layout
6 Step per un Sito Funzionale: 3. Web Design e Layout6 Step per un Sito Funzionale: 3. Web Design e Layout
6 Step per un Sito Funzionale: 3. Web Design e Layout
 
Laboratori di Web Marketing e Interattività
Laboratori di Web Marketing e InterattivitàLaboratori di Web Marketing e Interattività
Laboratori di Web Marketing e Interattività
 
Dal Wireframe alla pubblicazione: sviluppo usabile di un sito
Dal Wireframe alla pubblicazione: sviluppo usabile di un sitoDal Wireframe alla pubblicazione: sviluppo usabile di un sito
Dal Wireframe alla pubblicazione: sviluppo usabile di un sito
 
Mob04 best practices for windows phone ui design
Mob04   best practices for windows phone ui designMob04   best practices for windows phone ui design
Mob04 best practices for windows phone ui design
 
Ribesdesign interfacce
Ribesdesign interfacceRibesdesign interfacce
Ribesdesign interfacce
 
UX VS UI
UX VS UIUX VS UI
UX VS UI
 
Brera - Digital Strategy - Infinite mete un solo viaggio
Brera - Digital Strategy - Infinite mete un solo viaggioBrera - Digital Strategy - Infinite mete un solo viaggio
Brera - Digital Strategy - Infinite mete un solo viaggio
 
Framer by Framer
Framer by FramerFramer by Framer
Framer by Framer
 
Dall'idea all'analisi: le fasi che precedono la progettazione esecutiva
Dall'idea all'analisi: le fasi che precedono la progettazione esecutivaDall'idea all'analisi: le fasi che precedono la progettazione esecutiva
Dall'idea all'analisi: le fasi che precedono la progettazione esecutiva
 
Hotel Responsive Design: Come?
Hotel Responsive Design: Come?Hotel Responsive Design: Come?
Hotel Responsive Design: Come?
 
Corso di formazione Web Designer 2 0 e Comunicazione Multimediale
Corso di formazione Web Designer 2 0 e Comunicazione MultimedialeCorso di formazione Web Designer 2 0 e Comunicazione Multimediale
Corso di formazione Web Designer 2 0 e Comunicazione Multimediale
 
Corso di formazione Web Designer 2.0 e Comunicazione Multimendiale
Corso di formazione Web Designer 2.0 e Comunicazione MultimendialeCorso di formazione Web Designer 2.0 e Comunicazione Multimendiale
Corso di formazione Web Designer 2.0 e Comunicazione Multimendiale
 
Visual Design vs. Creatività
Visual Design vs. CreativitàVisual Design vs. Creatività
Visual Design vs. Creatività
 
Visual design, emozione ed esperienza
Visual design, emozione ed esperienzaVisual design, emozione ed esperienza
Visual design, emozione ed esperienza
 
AI (Architettura dell'Informazione) for dummies: lezioni e project work
AI (Architettura dell'Informazione) for dummies: lezioni e project workAI (Architettura dell'Informazione) for dummies: lezioni e project work
AI (Architettura dell'Informazione) for dummies: lezioni e project work
 
L'officina creativa eventi
L'officina creativa eventiL'officina creativa eventi
L'officina creativa eventi
 
Modulo 1 - Grafica e Multimedia.pdf
Modulo 1 - Grafica e Multimedia.pdfModulo 1 - Grafica e Multimedia.pdf
Modulo 1 - Grafica e Multimedia.pdf
 
Ugi Alt.Net Conf0110
Ugi Alt.Net Conf0110Ugi Alt.Net Conf0110
Ugi Alt.Net Conf0110
 
Progettazione di interfaccie e tassonomia
Progettazione di interfaccie e tassonomiaProgettazione di interfaccie e tassonomia
Progettazione di interfaccie e tassonomia
 
Presentazione Web Me Do
Presentazione Web Me DoPresentazione Web Me Do
Presentazione Web Me Do
 

Mehr von Artlandis' Webinar & Workshop

Introduzione allo Smart Working/Learning (Kinsugi Edition)
Introduzione allo Smart Working/Learning (Kinsugi Edition)Introduzione allo Smart Working/Learning (Kinsugi Edition)
Introduzione allo Smart Working/Learning (Kinsugi Edition)Artlandis' Webinar & Workshop
 
I "pilastri" del web (e delle interazioni possibili)
I "pilastri" del web (e delle interazioni possibili)I "pilastri" del web (e delle interazioni possibili)
I "pilastri" del web (e delle interazioni possibili)Artlandis' Webinar & Workshop
 
Guida alle Licenze d'uso - mappa infografica (zoomabile)
Guida alle Licenze d'uso - mappa infografica (zoomabile)Guida alle Licenze d'uso - mappa infografica (zoomabile)
Guida alle Licenze d'uso - mappa infografica (zoomabile)Artlandis' Webinar & Workshop
 
Visual Storytelling: piattaforme, strumenti ed applicazioni - Ninja Academy
Visual Storytelling: piattaforme, strumenti ed applicazioni - Ninja AcademyVisual Storytelling: piattaforme, strumenti ed applicazioni - Ninja Academy
Visual Storytelling: piattaforme, strumenti ed applicazioni - Ninja AcademyArtlandis' Webinar & Workshop
 
3D con Photoshop e Illustrator - references (part 1)
3D con Photoshop e Illustrator - references (part 1)3D con Photoshop e Illustrator - references (part 1)
3D con Photoshop e Illustrator - references (part 1)Artlandis' Webinar & Workshop
 
Sketch e Concept Arts con Photoshop - references (part 1)
Sketch e Concept Arts con Photoshop - references (part 1)Sketch e Concept Arts con Photoshop - references (part 1)
Sketch e Concept Arts con Photoshop - references (part 1)Artlandis' Webinar & Workshop
 

Mehr von Artlandis' Webinar & Workshop (20)

Introduzione allo Smart Working/Learning (Kinsugi Edition)
Introduzione allo Smart Working/Learning (Kinsugi Edition)Introduzione allo Smart Working/Learning (Kinsugi Edition)
Introduzione allo Smart Working/Learning (Kinsugi Edition)
 
BRAND NEW DAY: WEB MKTG (2019)
BRAND NEW DAY: WEB MKTG (2019)BRAND NEW DAY: WEB MKTG (2019)
BRAND NEW DAY: WEB MKTG (2019)
 
BRAND NEW DAY: VISUAL MKTG (2019)
BRAND NEW DAY: VISUAL MKTG (2019)BRAND NEW DAY: VISUAL MKTG (2019)
BRAND NEW DAY: VISUAL MKTG (2019)
 
I "pilastri" del web (e delle interazioni possibili)
I "pilastri" del web (e delle interazioni possibili)I "pilastri" del web (e delle interazioni possibili)
I "pilastri" del web (e delle interazioni possibili)
 
Guida alle Licenze d'uso - mappa infografica (zoomabile)
Guida alle Licenze d'uso - mappa infografica (zoomabile)Guida alle Licenze d'uso - mappa infografica (zoomabile)
Guida alle Licenze d'uso - mappa infografica (zoomabile)
 
Modello intervista preliminare per il cliente
Modello intervista preliminare per il clienteModello intervista preliminare per il cliente
Modello intervista preliminare per il cliente
 
Storytelling - matrice essenziale per social media
Storytelling - matrice essenziale per social mediaStorytelling - matrice essenziale per social media
Storytelling - matrice essenziale per social media
 
Nuove Skills e l'evoluzione delle competenze
Nuove Skills e l'evoluzione delle competenzeNuove Skills e l'evoluzione delle competenze
Nuove Skills e l'evoluzione delle competenze
 
Strategy, Stories & The Pitch - CreativityDay
Strategy, Stories & The Pitch - CreativityDayStrategy, Stories & The Pitch - CreativityDay
Strategy, Stories & The Pitch - CreativityDay
 
Visual Storytelling: piattaforme, strumenti ed applicazioni - Ninja Academy
Visual Storytelling: piattaforme, strumenti ed applicazioni - Ninja AcademyVisual Storytelling: piattaforme, strumenti ed applicazioni - Ninja Academy
Visual Storytelling: piattaforme, strumenti ed applicazioni - Ninja Academy
 
Novità Adobe Stock CC 2017
Novità Adobe Stock CC 2017Novità Adobe Stock CC 2017
Novità Adobe Stock CC 2017
 
Le regole della grafica - references (part 1)
Le regole della grafica - references (part 1)Le regole della grafica - references (part 1)
Le regole della grafica - references (part 1)
 
3D con Photoshop e Illustrator - references (part 1)
3D con Photoshop e Illustrator - references (part 1)3D con Photoshop e Illustrator - references (part 1)
3D con Photoshop e Illustrator - references (part 1)
 
Sketch e Concept Arts con Photoshop - references (part 1)
Sketch e Concept Arts con Photoshop - references (part 1)Sketch e Concept Arts con Photoshop - references (part 1)
Sketch e Concept Arts con Photoshop - references (part 1)
 
Instagram & blog connection - references (part 1)
Instagram & blog connection - references (part 1)Instagram & blog connection - references (part 1)
Instagram & blog connection - references (part 1)
 
Guida per non grafici
Guida per non graficiGuida per non grafici
Guida per non grafici
 
Font family & Type Design
Font family & Type DesignFont family & Type Design
Font family & Type Design
 
Freelance about
Freelance aboutFreelance about
Freelance about
 
Webinar about
Webinar aboutWebinar about
Webinar about
 
Guida strategica a Youtube
Guida strategica a YoutubeGuida strategica a Youtube
Guida strategica a Youtube
 

Web Design: da Photoshop a Dreamweaver

  • 1. Web Design: da Photoshop a Dreamweaver RoadMap
  • 2. YOU Trends & Style CONCEPT DESIGN CODE Concept, Visual Marketing e Modern Layout Elaborazione dello stile: modern, minimalist, classic, monochrome.. Studio dei contenuti e primi bozzetti L’importanza dell’uso delle immagini Layout moderni, funzionali e “Responsive”
  • 3. Layout, Gerarchia e Ritmo Unità 0,5 1 2 3 di misura Griglia Comunicare bene con Griglie e Layout Costruire un buon layout si fa con la testa Non siate “artisti” ma Comunicatori L’importanza delle griglie e dei rapporti visivi Vuoti creativi vs il Caos Gli elementi del layout Analisi strutturale della pagina E i Social Media?
  • 4. Colori, icone e forme, un problema di sostanza Studio e uso dei colori e delle immagini per il bilanciamento visivo Iconografia, elementi grafici e non solo Coordinare ogni elemento con lo stile scelto e il Concept generale
  • 5. Risoluzione del monitor, Responsive Design e Test su Browser Quale dimensione è quella gusta? Come orientarsi? Cos’è il Responsive Design? Perchè tenerlo in considerazione? Browser, compatibilità ed esaurimento nervoso. Chi mi aiuta? Valori assoluti o relativi?
  • 6. Photoshop: gestione del layout, ritaglio e formati Gli strumenti di Photoshop Prepararsi all’esportazione Testi, immagini e i mix nemici del posizionamento (Seo) Salva per il web, scegli il formato giusto Il potere del file sorgente
  • 7. Dreamweaver: gestire la pagina, migliorare il codice, verificare Strumenti essenziali per migliorare i files della pagina Gestire un sito completo Strumenti di verifica e controllo del codice Navigazione offline e ritorno a Photoshop Spunti Seo Pubblicazione online
  • 8. Massimo Nava aka Artlandis GRAZIE! :) Art Director, Social Media Manager, Teacher & Coach Social Keyword: Artlandis