workshop : web designer for a day c/o ied firenze
TRANSCRIPT
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
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.
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