PAOLO BUTI
PORTFOLIO WEB DESIGN • APP INTERFACES • ILLUSTRA ZIONI
indice 01
web design
02
web app interfaces
03
progettazione sito web
04
mascot DESIGN
05
landing page
INTRODUZIONE 2 PAROLE SU DI ME
Ciao a tutti, sono Paolo Buti, ho 22 anni e vivo a Colle Val d’Elsa in provincia di Siena. La mia passione per la grafica è sbocciata nel 2009 quando ho frequentato il Corso di Perfezionamento in Grafica Pubblicitaria e Fotografia. Da questa esperienza ho imparato ad utilizzare software per la realizzazione di progetti grafici, ed ho avuto anche l’ulteriore possibilità di fare gli stage e successive esperienze lavorative proiettandomi direttamente nel mondo del lavoro. Così sono riuscito a ritagliarmi
3
i primi lavoretti realizzando flyers per la discoteca Papillon 78 di Siena dove ho lavorato nelle stagioni 2010/2011 e 2011/2012 riscuotendo successo. Nel 2011 finito il Corso di Perfezionamento, mi sono interessato ad approfondire la parte legata al web design; così mi sono iscritto al rispettivo corso dell’Accademia Nemo di Firenze. Attualmente sto frequentanto il secondo anno e collaboro con un agenzia di grafica a Barberino Val d’Elsa di nome Display Design.
01
web design
ESERCITAZIONE BOOTSTRAP • SITI WEB RESPONSIVE
La lingua inglese designa genericamente con l’aggettivo “Responsive” tutto ciò che “reagisce o risponde rapidamente e in modo appropriato ad uno stimolo”. In italiano l’aggettivo che rende al meglio il termine inglese (avendo ‘responsivo‘ un altro significato) è adattativo (o adattivo). Con Responsive Design indichiamo quell’approccio per il quale la progettazione e lo sviluppo di un sito dovrebbero adattarsi al comportamento e all’ambiente dell’utente in base a fattori come le dimensioni dello schermo, la piattaforma e l’orientamento del device. La pratica consiste in un mix di griglie, layout e immagini flessibili, più un uso accorto delle media queries CSS.
twitter bootstrap
6
ESERCITAZIONE
BOOTSTRAP Progettazione del sito Responsive utilizzando un framework di ultima generazione realizzato da Twitter di nome Bootstrap. Software Utilizzato
Dreamweaver CS5.5
7
sito responsive
ESERCITAZIONE
SITO RESPONSIVE Il Reponsive Design è una tecnica di Realizzazione di Siti e Progetti Web Mobile o comunque capaci di adattarsi alle diverse risoluzioni come ad esempio quelle di Smartphone o Tablet. Software
Dreamweaver CS5.5 Fireworks CS5.5
8
Screenshot
Visualizzazione da Tablet della sezione Portfolio del sito.
9
02
web app interfaces
LAYOUT APPLICAZIONE DI MUSICA PER TUTTI I DISPOSITIVI
Web app Interface design, letteralmente progettazione delle interfacce, è comunemente intesa come l’attività di progettazione dell’interfaccia utente di un qualsiasi sistema informatico e software che dialoga con l’utente attraverso uno schermo. Un’applicazione software e un sito web sono, infatti, accomunati dal fatto che entrambi sono progettati per consentire all’utente di interagire con un’interfaccia. Durante le fasi di progettazione (design) di un’applicazione web diventa quindi fondamentale mantenere il focus sull’utente e sul tipo di esperienza vissuta da quest’ultimo durante l’uso della nostra applicazione. Sarà questa esperienza a determinarne il successo o l’insuccesso. Numerosi sono i fattori che entrano in gioco quando si tratta di progettare un’interfaccia usabile, visivamente accattivante, incentrata sui bisogni dell’utente: la navigazione del sito, la tipografia e molto altro...
web app interfaces PROGETTAZIONE GRAFICA
DI UN’APPLICAZIONE MUSICALE King Note è la progettazione grafica di un’applicazione musicale ipoteticamente scaricabile da AppleStore e Google Play. Questa Applicazione è progettata per essere Responsive, cioè adattabile per ogni dispositivo mobile.
Software Utilizzato
Fireworks CS5.5
Screenshot
Applicazione Iphone
12
Screenshot
Pagine Interne KingNote
Screenshot
King Note su Tablet
13
03
progettazione sito web PROGETTAZIONE GRAFICA SITO WEB DI SUPEREROI
L’aspetto visivo di come le informazioni sono presentate nel web è essenziale per catturare l’attenzione dei visitatori. Gli Utenti hanno sempre meno tempo da dedicare alla lettura. Per questo motivo l’immagine deve essere studiata in modo tale da essere di supporto alle parole e, in taluni casi, sostituirsi ad esse per rendere il sito ancora più efficace. Allo stesso tempo la grafica deve essere funzionale e contribuire all’usabilità del servizio web. La progettazione del layout (impaginazione) di un sito Internet è strettamente legata alla progettazione della struttura informativa. Una chiara organizzazione dei dati che tiene conto delle esigenze sia del committente che dei potenziali utenti, permette di costruire una immagine visiva adeguata.
SITO WEB SUPEREROI
PROGETTAZIONE
GRAFICA SITO SUPEREROI In questa esercitazione Grafica dovevamo progettare 5 pagine di un sito web, scegliendo ognuno il proprio supereroe preferito. Software Utilizzato
Fireworks CS5.5
16
Screenshot
Screenshot
Screenshot
Screenshot
Pagina Personaggi
Pagina Nemici
Pagina Obiettivi
Pagina Contatti
17
04
mascotte design
PROGETTAZIONE E REALIZZAZIONE DI UNA MASCOTTE PROGETTAZIONE BANNER CON 3 STILI DI GRAFICA DIFFERENTI
Piccole, dolci, tenere, con grandi occhi da cucciolo. Oppure furbe, con sguardi intriganti e giocosi, simpatiche, stilizzate, colorate o in bianco e nero, bambini, animaletti, caricature…quello delle mascotte é un vero e proprio Universo che incuriosisce e diverte e che negli ultimi tempi si sta sempre più affermando come tendenza anche nel web design. La mascotte diviene nel tempo un simbolo accattivante ed efficace, un vero e proprio ornamento al brand di molte aziende, nel web ma non solo. In linea di massima le mascotte sono spesso ironiche (basti pensare alle caricature) e buffe o, viceversa, esprimono sentimenti di tenerezza ricalcando il concept del ‘cucciolo’ atto ad alleggerire il brand in modo simpatico e leggero!
mascotte
PROGETTAZIONE
MASCOT PERSONALE In questa esercitazione Grafica dovevamo progettare e realizzare una Mascot personale. Partendo dalla elaborazione su foglio di carta, ho riportato la mia idea su Flash CS5 realizzando la mia Mascot vettoriale. Il suo nome è FLOX. Software Utilizzato
Flash CS5.5
20
PROGETTAZIONE
BANNER STILE VINTAGE In questa esercitazione dovevamo progettare tre banner con diversi stili di grafica. Software Utilizzato
Photoshop CS5.5 Illustrator CS5.5
21
mascotte
PROGETTAZIONE
BANNER STILE MINIMAL In questa esercitazione dovevamo progettare tre banner con diversi stili di grafica. Software Utilizzato
Photoshop CS5.5 Illustrator CS5.5
22
PROGETTAZIONE
BANNER STILE GRUNGE In questa esercitazione dovevamo progettare tre banner con diversi stili di grafica. Software Utilizzato
Photoshop CS5.5 Illustrator CS5.5
23
05
landing page
STUDIO E REALIZZAZIONE DI UNA LANDING PAGE NEMO
Una landing page è una pagina HTML costruita con l’intento di raggiungere due obiettivi principali: uno di posizionamento, uno di marketing. Per landing page si intende la pagina di “atterraggio” dell’utente in conseguenza di una ricerca condotta su un motore. Per raggiungere posizioni alte nel ranking del motore per una determinata chiave o set di chiavi, le landing page sono una soluzione efficace. I contenuti di una landing page sono spesso focalizzati su un argomento principe. Costruire una landing page visibile sui motore di ricerca non è il solo risultato a cui si dovrebbe puntare, in quanto questa fase ha come obiettivo il portare utenti sulla pagina. Terminata questa fase, occorre far sì che la visita porti valore al sito web, in termini di redditività (p.e.: vendite), immagine, iscrizioni a newsletter, etc. Si rende quindi necessario adottare tecniche e strategie di comunicazione volte a far compiere una azione all’utente, di qualunque tipo essa sia e comunque strettamente legata all’obiettivo specifico della landing page.
landing page
PROGETTAZIONE
LANDING PAGE Progettazione Grafica di una Landing Page di inscrizione dell’Accademia NEMO.
Software Utilizzato
Fireworks CS5.5
26
PROGETTAZIONE
LANDING PAGE Progettazione Grafica di una Landing Page per la vendita di CD-BOX di Bruce Springsteen. Software Utilizzato
Fireworks CS5.5
Screenshot
Progettazione Grafica dell’Applicazione per scaricare il nuovo CD-Box di Bruce Springsteen.
27
www.paolobuti.com