web design i - Gabriele Ruscelli

WEB DESIGN I
docente:
dispense:
email:
Gabriele Ruscelli
www:gabrieleruscelli.com
[email protected]
Queste slide
Queste slides fanno parte del corso “Web Design & HTML”.
Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com .
Data la rapida evoluzione della rete, il corso viene aggiornato ogni anno.
Il presente materiale è pubblicato con licenza Creative Commons “Attribuzione - Non
commerciale - Condividi allo stesso modo – 3.0” (http://creativecommons.org/licenses/
by-nc-sa/3.0/it/deed.it ):
La licenza non si estende alle immagini provenienti da altre fonti e alle screen shots, i cui
diritti restano in capo ai rispettivi proprietari, che, ove possibile, sono stati indicati.
L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
Programma
Introduzione al Web Design, introduzione
all’ambiente Web e processi lavorativi
1
Photoshop per il Web design, creazione di
un sito Web con griglie
8
Impaginazione di elementi con float e clear
e posizionamenti
2
9
Il testo e le immagini e Gestione del testo e
della tipografia
Creazione di contributi stilistici, immagini e
Texture per il Web design
3
10
La navigazione e la gestione di siti web multi pagina
Interface Design, illustrator per il Web Design, creazione di icone per il Web design
4
11
Trasformare la grafica di photoshop in codice HTML
5
12
Trasformare la grafica di photoshop in codice HTML e Consegna brief d’esame
13
Stesura del wireframe (il wireframe farà riferimento al brief d’esame)
14
Costruzione del layout in photoshop (il layout farà riferimento al brief d’esame)
15
Inizio di costruzione del layout in HTML (il
layout farà riferimento al brief d’esame)
Consegna Brief esame intermedio .
Navigazione e basi del linguaggio HTML
Introduzione ai fogli stili (CSS)
Il box model
6
7
esame
MODALITA’ DI VALUTAZIONE
I criteri generali di valutazione si fondano su tre parametri fondamentali: la qualità
dell’esecuzione grafica, la preparazione “tecnica” di costruzione e la capacità di aver
appreso gli obiettivi fondamentali di questa materia.
La valutazione complessiva sarà quindi così composta:
punti
- frequenza, attenzione, esercizi in classe:
30%9
- parte grafico/estetica + architettura dell’informazione :
- parte tecnica di costruzione (HTML + CSS) :
- esame intermedio:
30% 9
30% 9
10%3
30/30
sitografia e bibliografia
Bibliografia specifica:
1. CSS Guida Completa di Gianluca Trojani - editore Feltrinelli, nuova edizione copertina Blu
2. HTML and CSS web standard solutions by Christopher Murphy, Nicklas Persson - Editore: Friends of (an Apress Company)
3. HTML and CSS: Design and Build Websites di jon Duckett
4. Neuro Web Design di Susan M. Weinschenk - Editore: Apogeo;
5. Eyetracking web Usability. Siti che catturano lo sguardo di Jakob Nielsen e Kara Pernice - Amazon.it
6. HTML5 - the missing manual - by Mattew MacDonald - 2013 - Editore: O’Reilly
7. CSS3 - the missing Manual by David Sawyer McFarland - 2013 - Editore: O’Reilly
8. HTML5 il murkup e le api. di Gabriele Gigliotti, Gianluca Troiani - Editore Gabriele Gigliotti, Gianluca Troiani
9. Build you own website the right way by Ian Lloyd - third edition - Editor: SitePoint
Sitografica specifica:
1.
http://www.italianalistapart.com
2.
http://learn.shayhowe.com/advanced-html-css/
3.
http://www.zeldman.com
4.
http://www.cssbeauty.com/gallery/
5.
http://www.webcreme.com/
6.
http://www.sitepoint.com/
7.
http://www.thefwa.com/
8.
http://www.awwwards.com/
9.
http://www.iwebdesigner.it/
10.
http://www.html5today.it/
11.
http://www.yourinspirationweb.com/
12.
http://onepagelove.com/
Bibliografia e sitografia generale:
1. Jeffry Zeldman Progettare Siti Web Standard – tecniche per il design con XHTML e CSS, Editore Parson Education Italia –
disponibile da HOEPLI Milano in italiano e in inglese.
2. Jackob Nielsen, Designing Web Usability, New Riders Publishing, USA,
3.
http://www.w3.org/
4.
http://www.w3.org/html/
5.
http://www.w3.org/Style/CSS/
introduzione al
web e al
design digitale
introduzione
Web Design è un espressione utilizzata per definire
la progettazione tecnica, strutturale e grafica di un sito web.
Progettazione per il world wide web. wikipedia
introduzione
Nel mondo del web design nasce una “nuova” figura professionale:
il
WEBDESIGNER
il web designer
cosa fa?
Progetta & Realizza
Cosa deve avere/sapere?
-creatività
-grafica
-logica
-conoscenza del www
-conoscenza di usabilità e navigabilità
-saper lavorare in team
il web designer
Competenze:
Creativa/Logica
creatività, gusto estetico, capacità di progettazione, sintesi
Software & linguaggi
photoshop, illustrator, fireworks, flash, dreamweaver
HTML, CSS, Javascript
Progetta
disegna interfaccie
coda
altre figure
Interaction Designer
UX Designer
tanta
progettazione
{
UI Designer
tanta
grafica
{
Digital Art director
{
{
Web
Designer
Digital Designer
tanto
codice
Front-end Designer
http://www.skillprofiles.eu/
il web designer
differenze:
GraphicDesigner
design
͢
WebDeveloper
PHP, ASP, XML,
Java, Javascript
͢
WebDesigner
design e navigazione
WebDesigner
HTML, CSS, Flash
http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/
?
il web designer
Web Master
internet
internet
funzionamento
utente
L’utente naviga o usa internet
internet
internet
funzionamento
utente
L’utente chiede e internet risponde
internet
server
funzionamento
computer
Il computer chiede e il server risponde
internet
funzionamento
LATO CLIENT
computer
richiesta
rendering
browser
server
risposta
ricerca/esecuzione
file
Richiesta e risposta di un file nel web
LATO SERVER
internet
+1024x768
windows
file
funzionamento
1024x768
apple OS
800x600
linux
Crossbrowser
Crossdevice
differenze
Web Designer
Funzionamento legato
al Front-End
Utente
Web Developer
Funzionamento legato
al Back-End
differenze
Web Designer
RGB
schermo
palette rgb
diversi output
rendering
minure in px
immagini leggerissime ma di alta qualità
nooo, non dirmi che non si vede su iPhone?
Graphic Designer
CMYK
carta
pantoni
ingombri e crocini di taglio
cromaline
misure in cm
file pesanti terabyte
quante pagine hai detto che erano?
Dalla grafica cartacea alla grafica digitale
nascita: 1455 con Gutenberg
Print
nascita: 1993 con Tim Berners-Lee
Digital
Biglietti da visita
Spot
Brochures
Viral
Libri
Siti web
Riviste
Applicazioni smartphone e tablet
ADV stampa
Applicazioni web
ADV affissioni
Packaging
Stickers
Evoluzione del mondo digital
1991
1993
1994
1996
2005
2007
Nascita
del www
www
pubblico
con HTML
basico
introduzione
CSS
Nokia
primo cellulare
con connesione
internet
Nascita
del
Web 2.0
Primo
iPhone
evoluzione a livello tecnico
Evoluzione del mondo digital
evoluzione a livello grafico
http://moodmoods.wordpress.com/tag/website/
http://www.awwwards.com/
http://www.sketchin.ch/en/
http://contentsmagazine.com/
http://www.thesearethings.com/
http://www.designweekportland.com/
http://rallyinteractive.com/
Conclusione
La nostra fortuna
L’informazione e i suoi mezzi cambiano, con essi cambiano anche la grafica,
la tecnologia e quindi la mediazione comunicativa.
La stampa diminuisce ogni giorno e la via dell’ informazione ormai è digitale.
I creativi si dovranno adattare a tecniche diverse da quelle canoninche,
tuttavia dovranno essere sempre fedeli alla metodologia progettuale per la
creazione di idee innovative e fantastiche.
impostare Photoshop
Impostare le misure in px e colori web safe.
impostare Photoshop
settare
color mode:
RGB
proof setup:
Internet Standard RGB (sRGB)
Salvare il workspace
impostare Photoshop
Ricordarsi che
cmd
+
1
è la visuale al 100% ovvero la
pagina vista nei browser,
lavorate sempre con questa
visualizzazione.
Settare
cmd
+
h
per nascondere extras
Ordine in
Web Design
Creare sempre una cartellina
dove metterete il vostro lavoro.
Salvate ogni file: immagini audio
video html psd etc.. etc.. con
nomi sensati senza spazi e
caratteri speciali.
caratteri ammessi
trattino_basso
trattino-medio
Esercizio
...Proviamo ad impostare un layout in photoshop