Photoshop e Web Design

Photoshop & Web Design

1-webdesign
Disegnare un’interfaccia utente è un processo che vede coinvolti un numero molto grande di attori!
L’obiettivo di questa lezione non è sviluppare un’interfaccia utente ma attraverso una panoramica delle fase di progettazione del web e UX (interfaccia utente) design, produrre dei layout grafici e funzionali alle careatteristiche del web.

2-uxdesign
immagine presa dalla presentazione di Maria Cristina Lavazza

Da anni Adobe Photoshop consente ai designer di realizzare le proprie idee tramite layout per la stampa e il web.
Studiare la creatività di un sito web significa applicarsi nello studio delle interfacce e della gestione dei contenuti all’interno di un contenitore ipermediale.

L’architettura (layout, grafica e contenuti) di un sito web è necessariamente connessa a specifici elementi:

      • obiettivi generali e tipologia di sito (divulgazione, istituzionale, e.commerce, didattico, blogging, brand ecc.)
      • tematica del sito (informatica, sport, comunicazione news..)
      • target utenti
      • modalità di fruizione (sito di servizi, news, statico/dinamico, animato, ecc..)

Tenendo conto dei punti citati precedentemente..
La fase di Progettazione grafica di un sito si avvale di una serie di passi fondamentali (in questa fase non ci interessa seguire lo svilippo, il debugging, l’ottimizzazione e la diffusione del sito) che costituiscono le fasi progettazione di un sistema che deve sapere garantire..

  1. l’indipendenza della forma dai contenuti
  2. l’adattabilità ai supporti (flessibilità + modalità responsive per i device mobili)
  3. i principi di usabilità
  4. la possibilità di essere fruito tramite un sistema di content managing (CMS)

IL FUTURO DEL WEB DESIGN http://www.fastweb.it/web-e-digital/futuro-e-prospettive-web-design/

STORIA DEL WEB DESIGN: http://www.fastweb.it/web-e-digital/breve-storia-del-web-design/

Project e information Design:

Definizione dei contenuti, reperimento delle informazioni, stesura della sceneggiatura, documenti di progettazione e organizzazione dei contenuti mediante diagramma di flusso, eventuale mappa concettuale


Interface design:

Studio dell’interfaccia in relazione al genere multimediale.
Organizzazione della struttura della pagina.
Organizzazione struttura / contenuti
Wireframe


Graphic design:

Studio grafico del layout, disegno dell’interfaccia, elementi grafici, box, link, colori, stile.

Progettare l’Interfaccia Utente significa comporre in un unico disegno metafore di interazione, contenuti multimediali, e concetti usati per veicolare funzioni e contenuto informativo su uno schermo.
Una buona interfaccia web dovrebbe quindi assolvere a diverse funzioni:
far percepire i contenuti, permettere di individuare le principali aree tematiche far orientare il visitatore, cioè far capire dove si trova in ogni momento consentire di passare agevolmente da un argomento all’altro con percorsi diretti e rapidi, facilitare la ricerca di un argomento.


Content design

Studio grafico dei contenuti, font, immagini, video..

ARCHITETTURA DELLE INFORMAZIONI

La mappa del sito. A partire dai presupposti elencati precedentemente (obiettivi, tipologia, tematiche del sito, ecc..) , il primo passo del processo di progettazione dell’architettura di un sito web presuppone l’elaborazione di un diagramma ad albero volto ad definire e gerarchizzare le connessioni fra le pagine, fondamentale per definire e ideare un layout dell’interfaccia (la navigazione e la disposizione dei contenuti).

5b-mappa_sito
5-mappa_sito
Dall’albero di navigazione si possono evincere numerose informazioni:
– la navigabilità, che ci permette di studiare il menù
– le aree di ripartizione della pagina, in relazione ai link presenti in esse

Un layout di un sito web deve essere ripartito in specifiche aree che stabiliscono attraverso l’attribuzione di significati specifici la comunicazione con l’utente:
navigazione: menù primari e secondari
contenuti: testo, immagini, video, link interni
header: area di intestazione del sito, logo + riferimenti
box/sidebar di interazione/servizio: e-commerce, chat, forum, giochi, donazioni, ecc..
– box/sidebar social: finestre su altre interazioni (facebook, twitter, instagram..)
– box informativi: banner pubblicitari, news, ecc..
– footer: chiusura di testata con informazioni di servizio

I contenuti delle pagine e gli strumenti di navigazione devono essere “ingabbiati” all’interno di una struttura specifica affinchè possano essere visualizzati in un determinato modo dal browser e sviluppati mediante i diversi codici di programmazione web.

L’integrazione fra architettura dell’informazione e wireframe del sito è l’interaction design

interaction-design

DAL WIREFRAME ALL’INTERFACE DESIGN 

6-layout_base
Esempi wireframe

L’area dei contenuti varierà di pagina in pagina. La navigazione, meno che non lo si voglia esplicitamente rimarrà, per coerenza
interna, inalterata.

Il layout web ha lo stesso valore dell’impaginazione nel mondo dell’editoria.

Bisogna tenere conto però, che se nella carta stampata i contenuti non variano più dopo la pubblicazione, la pagina web è invece estremamente mutevole. La sua rappresentazione dipende dal tipo di dispositivo (mobile, tablet, laptop), dal browser, dal monitor, dal sistema operativo, dai font e dalla possibilità di interazione con l’utente.

Un sito dinamico è un sito che muta a seconda degli input ricevuti dall’utente e deve essere studiato appositamente attraverso linguaggi specifici (PHP, ASP, JSP, ecc..).
layout
L’area relativa ai contenuti possiede a sua volta diversi layout interni, definenti le varie aree di definizione di testo, immagini ed elementi multimediali delle diverse pagine.
E’ necessario quindi studiare un ulteriore layout definente la griglia di struttura della macro area dei contenuti.

Anche in questo caso, sebbene meno vincolato poichè soggetto alle costanti variazioni dei contenuti di ogni pagina, è auspicabile che tale struttura rimanga coerente fra le pagine del sito.

Allo stesso modo l’header può suddividersi in più sezioni (logo,titolo, immagini di sfondo) e la navigazione… (menù primario, secondario, menù utente..).

Le tipologie di layout sono innumerevoli e dipendono da tutti i fattori elencati precedentemente e dalla creatività del designer.

Layout primario e layout secondario di un sito web, ripartizione degli spazi

Le due prime fasi di information-projecting e interaction-layout design definiscono quindi lo schema attraverso cui il nostro sistema dialoga con gli utenti e gli utenti con il sistema.
La disposizione degli elementi (navigazione, loghi, ecc..) fa poi capo anche a numerosi studi relativi all’attenzione che l’utente da a determinate aree dello schermo.

In questa fase è entrata in gioco, negli ultimi anni, una maggiore frammentazione della progettazione dei layout che deve tenere conto della sempre maggiore fruizione dei dispositivi mobili (che per dimensioni e utilizzo devono forzatamente presupporre layout differenti).
http://www.webhouseit.com/come-trasformare-un-layout-fisso-in-layout-responsive/
http://www.html.it/tag/responsive-design/
http://www.alederodesign.it/blog/10-consigli-per-progettare-un-sito-web-responsive/

A questo punto si possono progettare dei wireframe più accurati fino ad arrivare a dei mockup con elementi giù pseudo-grafici:

WIREFRAME DESK:

wireframe_drynite

WIREFRAME MOBILE:

wireframe_drynite-2mobile

DAL WIREFRAME AL MOCKUP:
Qua sotto intravediamo un wireframe che ha già elementi di contenuto e di grafica. E’ un modello più avanzato del lavoro che precede la realizzazione del modello finale (non è sempre necessario) della grafica.
7design_c-layout-project

La grafica finale può essere presentata come mockup, cioè la riproduzione di un sito (o modello di intefaccia) in scala, meglio se su tutti i principali device.

responsive-web-design-mockup-free-psd-1000x633

GLI ELEMENTI GRAFICI, IL COLORE E LA TIPOGRAFIA

E’ il momento di dare colone, iconografia, simbologia al nostro sito attraverso interventi grafici! Per un’approfondimento sul design delle interfacce: http://www.fabiozanchetta.it/2018/09/20/8-web-design-uidesign/

Esercizio 1: sviluppo di elementi di LayoutWeb

Il Menù
Per realizzare una tipica banda orizzontale con effetti tendenzialmente web 2.0 è necessario
sfruttare gli effetti di livello:
1- lieve ombreggiatura esterna (60% circa di intensità, 1 o 2 px di distanza, 1 o 2 px di spread e size)
2- gradient overlay per applicare come effetto un gradiente. Es. gradiente dal grigio scuro al
grigio chiaro
3- stroke di 1 px, esterno, grigio scuro

Inserire un separatore delle voci del menù (ho optato per una forma di default circolare).
1- applicare un effetto altorilievo di tipo pillow (cuscino), smooth e in funzione up, lavorando sui parametri (es. intensità 70%, 13 size, 3 soften) si ottiene un effetto simulante un appoggio su superficie morbida
2- Inserire del testo relativo alle voci del menù

Il pulsante centrale

1 – Creare una forma rettangolare (intorno ai 300x60px) azzurra con i bordi smussati (es. 15 px di smussatura)

10-esercizio1b

2- Duplicare il livello.
3- Cercare un pennello adeguato per pennellare, su un nuovo livello (o, in alternativa usando una maschera di livello) una serie di macchie bianche, simulanti graffiature o spruzzi di neve.
4 – Scrivere del testo e applicare a questo un accennato effetto di livello stroke (es azzurro) e una smussatura effetto rilievo tendente ad ombreggiare livemente il testo (aumentare “size” e diminuire un po’ il colore ombra)

5- Duplicare tutti i livelli, unire tutte le copie e selezionare con una selezione circolare una sezione (metà più o meno) del livello. Contrastare luci e ombre in maniera non lineare con curve o livelli)
6- Applicare a livello forma sottostante (quello blu non unito) una lievissima ombreggiatura di sfondo (60%, distance 1, spread 1, size 2)

11-esercizio1c  9-esercizio1


Creare delle macchie

Creaiamo un po’ di pennelli a macchia.
Seleziona queste macchie o altre reperibili sul web e definisci un pennello specifico per ogni macchia


HTML diretto da PHOTOSHOP

Sebbene le tecniche di web design attuale ci suggeriscano metodologie ben differenti, con photoshop
possiamo creare un html completo e corredato di immagini già collegate a partire dalla nostra immagine di layout.

In genere l’uso di photoshop nel web design è collegato allo sviluppo creativo di singoli elementi da collocare nella pagina
mediante codice (html, css..).

E’ possibile però mediante l’utilizzo delle slices, sezionare la pagina in modo tale che ogni area compresa all’interno delle slices si trasformi in un’immagine collegata ad una singola pagina web (che conterrà tutte le immagini sezionate). Le slices sono dei segmenti che si sovrappongono all’immagine e che la suddividono in “n” aree dipendenti dal numero e dalla posizione delle slices.

15-slice0Lo strumento slices è presente sulla barra degli strumenti come opzione del taglierino.

Il primo passo da compiere è suddividere inizialmente l’immagine mediante i righelli (visibile mediante view -> extras o righelli, appunto) utili a tracciare delle linee orizzontali e verticali che ci permettono di allineare elementi. Suggerisco inoltre di creare un aggancio (snap) ai righelli.

16-slices_1

La suddivisione avviene per aree e box, ogni immagine e box di testo deve essere suddivisa e inscritta in un rettangolo che la racchiude.

Le aree di testo e le aree monocromatiche dovranno poi essere cancellate per essere sostituite con il codice html e con del testo html (stiamo sempre sviluppando una pagina web, non un’immagine!).

Terminata la suddivisione, ricalchiamo con le slices tutte le aree rettangolari create.

Photoshop applica ad ogni area rettangolare che facciamo un’etichetta blu indicante il numero di sezione. al momento del salvataggio in html, ad ogni sezione verrà associata un’immagine collegata ad un file html prodotto specificamente da photoshop. In html, ogni sezione verrà definita come cella di una tabella contenente l’immagine della sezione stessa.

17-slices3

Terminata la suddivisione è sufficiente salvare per web,scegliere il formato adeguato e salvare, come da figura, in html and images.
Photoshop creerà un file html ed una cartella images con tutte le immagini create ad hoc.
La pagina è pronta per essere messa in rete benché – naturalmente – tutta la struttura HTML sarà formattata secondo la modalità della versione di Photoshop che essenzialmente ricalca il modello tabelle con immagini.

18-slices4