WEB DESIGN FOR A DAY29.09.2015

Presentazioni DocentiRoberto Fazio [Visual Artist, Interaction Designer, Educator ] www.robertofazio.com

Mauro Ferrario [ Visual Artist, Interaction Designer ] http://goofygoober.it/

Designer ?Il Designer è una figura professionale che ha il compito di progettare

soluzioni funzionali equilibrando tecnica e creatività.

Lavora in vari contesti come architettura, arte, web…

Chi è il WEB Designer ?

Il Web Designer è un progettista che realizza esperienze per il world wide web.

Deve avere competenze di usabilità e accessibilità

Le conoscenze base di un web designer devono essere: design, comunicazione, linguaggi di markup (X)HTML, CSS, HTML5, CSS3,

Responsive Web Design, Javascript e jQuery.

Cosa fa il Web Designer ?Generalmente il Web Designer lavora come Freelance

o in una Web Agency

Codifica la bozza grafica ( Wireframe ) del Graphic Designer nel linguaggio del ‘Web’

Le figure professionali che lavorano insieme al Web Designer: Account Manager, Art/Creative Direction , Programmatore Back End- Front-End,

Grafico, UI e UX Designer, SEO, Social Marketing

Wireframe, Prototipo e Mockup?

Fasi Progettazione : Ideazione, Design, Sviluppo e Rilascio

Wireframe

Il wireframe ha la funzione di:

1) Comunicare l’idea iniziale del progetto 2) Focalizzare l’attenzione solo su architettura e contenuti, senza le “distrazioni” della grafica 3) Comunicare cosa si vedrà 4) Essere la base del prototipo

Prototipo

Il prototipo è interattivo e sempre a bassa fedeltà e permette all’utente di testare l’esperienza di

navigazione ( UI e UX Test )

Mockup

l mockup è una rappresentazione statica del prodotto finale. Vengono inseriti colori, stili visuali, immagini, font e altri elementi visivi (anche

quelli del brand del cliente)Un mockup serve a rendere l’idea del progetto finale ma senza l’interattività di un

prototipo per farsi approvare un lavoro da un cliente.

UI & UX Design

UX (User Experience) ≠ UI (User Interface)

UX (User Experience)L’insieme di sensazioni, emozioni e ricordi che l’utente prova nel relazionarsi con un

sito, un prodotto o un brand.

L’UX studia l’esperienza degli utenti, a partire dalle culture, dalle sensibilità, dalle capacità di cui sono portatori, allo scopo di metterli nelle condizioni migliori per poter

vivere un’esperienza positiva.

UI (User Interface)Lo UI Designer si occupa di realizzare l’interfaccia attraverso cui l’utente può fruire dei

contenuti o dei servizi; ad esempi sono i siti web e le app.

Traduce la strategia in layout e pagine web adatte a essere consultate dagli utenti, aggiungendo aspetti di comunicazione visiva e/o multisensoriale

Responsive / Adaptive Web Design

Responsive : I contenuti sono visibili su tutti i dispositivi smartphone tablet computer

Adaptive : I contenuti si adattano al dispositivo che lo visualizza.

Un unico sito web per tutti devices

Panoramica sulle tipologie di siti internetVetrina/OnePage

https://www.ana-flightconnections.com/#!/ Artistico

http://species-in-pieces.com/ E-Commerce

http://www.nike.com/it/it_it/?ref=http%3A%2F%2F http://www.amazon.it/ Portfolio

http://cargocollective.com http://www.smallfish.it http://cargocollective.com/ Notizie

http://www.creativeapplications.net/ http://www.repubblica.it/ http://ilmanifesto.info http://www.internazionale.it http://qz.com Educational

https://konoz.io https://projectschoolkrant.nl/en https://www.khanacademy.org Social

Facebook, Twitter Video

https://vimeo.com Sperimentale

http://www.aaronkoblin.com/work.html https://www.chromeexperiments.com https://chrome.com/supersyncsports http://earthhour.bajibot.com

Musica SoundCloud, Deezer, Bandcamp

http://www.stand4humanrights.com

Raccoglitore siti http://www.thefwa.com

STRUMENTI DEL WEB DESIGN

Linguaggio di Markup per il Web Fogli di Stile. Linguaggio usato per definire la formattazione di documenti HTML, XHTML e

XML

Linguaggio di scripting orientato agli oggetti e agli eventi, comunemente

utilizzato nella programmazione Web lato client

Content management system (CMS) ovvero un programma che, girando lato server, consente la creazione e distribuzione di un sito Internet formato da contenuti testuali o

multimediali, facilmente gestibili ed aggiornabili in maniera dinamica. Sviluppato in PHP e MySQL

BACK END e FRONT ENDL’importanza di capire cosa sta dietro un sito web

Linguaggi Back End PHP JAVA C# .NET Ruby Perl Rails NodeJS

Linguaggi Front EndHTML JavaScript

LIBRERIAUn insieme di librerie costituisce un set di funzioni che possono

essere chiamate e che aiutano per risolvere determinati problemi

Jquery https://jquery.com [ parallasse , vari plugins ] [http://upandup.biz ] ThreeJS ( http://threejs.org )

Canvas js ( http://canvasjs.com ) D3js ( http://d3js.org )

node js ( https://nodejs.org ) socketio ( http://socket.io )

FRAMEWORKUn framework è un insieme di file/codice che ti aiuta ma che ti impone anche di seguire

una certa struttura del tuo progetto e seguire una ‘linea guida’ Bootstrap ( http://getbootstrap.com/ )

foundation (http://foundation.zurb.com/ )backbone ( http://backbonejs.org/ )

angular ( https://angularjs.org/ ) pureMCV

WEB DESKTOP E MOBILE :HTML 5 JS CSS ( approcci )

PhoneGap [ http://phonegap.com/ ] Ionic [ http://ionicframework.com/ ]

Titanium Cordova [ https://cordova.apache.org/ ]

Corona SDK [ https://coronalabs.com/products/corona-sdk/ ]

( Accedere alla sensoristica e hw dei device mobili )

WEB DESIGNERS AT WORK

Divisione in gruppi Scegliere un argomento

Presentazione in gruppo il proprio progetto ( discussione e supervisione ) Ricerca Mood, Stile ( ricerca in internet ) e raccolta materiale

Wireframe Interattività

scelta creativa estetica ( colori, font, mood )

? Moke Up abbozzarlo con Photoshop / Illustrator ( Se rimane tempo )

Conclusione : Analisi dei progetti