SlideShare uma empresa Scribd logo
1 de 8
Baixar para ler offline
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

Mais conteúdo relacionado

Destaque

Fredy Presentacion Yeea
Fredy Presentacion YeeaFredy Presentacion Yeea
Fredy Presentacion Yeea
yariff16
 

Destaque (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
 

Semelhante a 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 Layout
FormazioneTurismo
 
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 sito
Cultura 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 design
DotNetCampus
 
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
Maria Cristina Lavazza
 
Hotel Responsive Design: Come?
Hotel Responsive Design: Come?Hotel Responsive Design: Come?
Hotel Responsive Design: Come?
FormazioneTurismo
 
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
Daniela Costantini
 

Semelhante a 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
 

Mais de Artlandis' Webinar & Workshop

Mais de 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
 

Último

presentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptxpresentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptx
michelacaporale12345
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
nico07fusco
 
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptxAdducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
sasaselvatico
 

Último (20)

presentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptxpresentazione varietà allotropiche del carbonio.pptx
presentazione varietà allotropiche del carbonio.pptx
 
Una breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opereUna breve introduzione ad Elsa Morante, vita e opere
Una breve introduzione ad Elsa Morante, vita e opere
 
Aurora Palestinipresentazione000001.pdtf
Aurora Palestinipresentazione000001.pdtfAurora Palestinipresentazione000001.pdtf
Aurora Palestinipresentazione000001.pdtf
 
Piccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docxPiccole Personetestoitaliano-AuroraPalestini.docx
Piccole Personetestoitaliano-AuroraPalestini.docx
 
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
CHIẾN THẮNG KÌ THI TUYỂN SINH VÀO LỚP 10 THPT MÔN NGỮ VĂN - PHAN THẾ HOÀI (36...
 
Storia-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptxStoria-CarloMagno-TeccarelliLorenzo.pptx
Storia-CarloMagno-TeccarelliLorenzo.pptx
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
Palestini Aurora-Steve Jobs,Olivetti e Gates.pptx
Palestini Aurora-Steve Jobs,Olivetti e Gates.pptxPalestini Aurora-Steve Jobs,Olivetti e Gates.pptx
Palestini Aurora-Steve Jobs,Olivetti e Gates.pptx
 
PalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docxPalestiniAurora-la conoscenzatestoita.docx
PalestiniAurora-la conoscenzatestoita.docx
 
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptxPancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
Pancia Asia-La vita di Steve Jobs-Adriano Olivetti-Bill Gates.pptx
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptxPancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
Pancia Asia-Pelusi Sara-La pittura romana - Copia (1).pptx
 
Presentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informaticaPresentazione tre geni della tecnologia informatica
Presentazione tre geni della tecnologia informatica
 
Le forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docxLe forme allotropiche del C-Palestini e Pancia.docx
Le forme allotropiche del C-Palestini e Pancia.docx
 
magia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptxmagia, stregoneria, inquisizione e medicina.pptx
magia, stregoneria, inquisizione e medicina.pptx
 
a scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAPa scuola di biblioVerifica: come utilizzare il test TRAAP
a scuola di biblioVerifica: come utilizzare il test TRAAP
 
Gli isotopi scienze naturale seconda pres
Gli isotopi scienze naturale seconda presGli isotopi scienze naturale seconda pres
Gli isotopi scienze naturale seconda pres
 
TeccarelliLorenzo-i4stilidellapitturaromana.docx
TeccarelliLorenzo-i4stilidellapitturaromana.docxTeccarelliLorenzo-i4stilidellapitturaromana.docx
TeccarelliLorenzo-i4stilidellapitturaromana.docx
 
Educazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpointEducazione civica-Asia Pancia powerpoint
Educazione civica-Asia Pancia powerpoint
 
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptxAdducchio.Samuel-Steve_Jobs.ppppppppppptx
Adducchio.Samuel-Steve_Jobs.ppppppppppptx
 

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