Dossier_abianchidesign
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Dossier_abianchidesign

  • 402 views
Uploaded on

Dossier di progetto esame SSS_AA Lugano in grafica digitale web, sito web abianchidesign

Dossier di progetto esame SSS_AA Lugano in grafica digitale web, sito web abianchidesign

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
402
On Slideshare
385
From Embeds
17
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 17

http://www.abianchidesign.com 17

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Progetto “portfolio professionale”Dossier di progettoProgetto interdisciplinare di 4° semestreAlessandro BianchiSecondo anno, corso Grafica Digitale orientamento web 2011/2012SSS_AA Scuola specializzata superiore d’arte applicata, Luganoblog del progetto visualizzabile su: www.abianchidesign.com/blogprototipo visualizzabile su: www.abianchidesign.info
  • 2. INDICE 3 INTRODUZIONE 3 Introduzione 3 Mandato 3 Tempistiche e modalità di lavoro 4-7 ANALISI 5 Introduzione 5 Punti di analisi 5 Target 5 Cosa voglio ottenere dal sito 6 Voglio apparire come... 6 Obbiettivi generali 6-7 Esperienza multipiattaforma 8-12 FLOWCHART - WIREFRAME 9 Introduzione 9 Flowchart 9 Cambiamenti 10 Wireframe bassa definizione 11 Wireframe su Wordpress 11 Test di usabilità 13-17 MOCKUP 14 Introduzione 14 Moodboard 15 Brandbook 16-17 Mockup 18-23 LANCIO DEL SITO 19 Introduzione 19 Lancio del sito 19 Statistiche 20 Commento 20 Posizionamento sui motori di ricerca 20 Tempistiche di aggiornamento 21 Blog 21 Social 21 E-book 22 In futuro? 24-25 CONCLUSIONE 25 ConclusioneAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 2
  • 3. INTRODUZIONEIntroduzione: Tempistiche e modalità di lavoro:Progettare un proprio portfolio è una delle sfide più grandi per un web Ricevuto il mandato abbiamo definito delle tempistiche e le date didesigner, perché occorre una certa introspezione, dell’analisi critica e consegna, sono le seguenti:un po di consapevolezza di sé stessi.È un compito che ho già eseguito ben 3 volte, ottenendo dei progressi Mercoledì 29 febbraio 2012: Consegna dell’analisinotevoli, certo, ma senza mai arrivare ad uno stadio di soddisfazione Lunedì 16 aprile 2012: Consegna struttura del sito e delle paginedel prodotto creato. Lunedì 14 maggio 2012: Consegna del progetto d’interfaccia grafica Venerdì 8 giugno 2012: Consegna del sito Giovedì 14 giugno 2012: Consegna del dossier di accompagnamentoÈ sicuramente più interessante svolgere alcuni compiti ora, rispettoche ai tempi del primo sito web, in quanto mi sono evoluto comeprofessionista, e ho collezionato un maggior numero di lavori nel Ho deciso, una volta definiti i punti di analisi, di gestire un blog, daportfolio da poi esporre. utilizzare come “diario di lavoro”, in modo sia da mantenere in ordine cronologico tutto quello che analizzo e penso, sia da possederneMandato: comunque una traccia al di fuori del computer, e oltretutto per fare inIl mandato prevede di progettare e realizzare un sito (tenendo presente modo che i docenti possano avere un’idea sempre aggiornata di comela pratica professionale e le innovazioni in atto), in autonomia e procede il mio lavoro.individualmente, che favorisca la promozione delle proprie competenze Come ulteriore valore aggiunto, ho avuto modo inoltre di consolidare leprofessionali di web designer e che favorisca il facile aggiornamento o competenze personali con wordpress, in modo da poter sperimentare ilpubblicazioni dei contenuti. cms che molto probabilmente, secondo i punti di analisi, sarà il sistemaTutto questo al fine di convalidare le competenze acquisite durante il con cui poi produrrò gran parte del mio prodotto.corso scolastico. Il blog è visibile su: www.abianchidesign.com/blogAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 3
  • 4. TITOLOANALISIAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 4
  • 5. ANALISIIntroduzione: Target:La fase di analisi è stata lunga e complessa, e mi ha portato a La mia clientela attuale è composta da persone relativamente giovani,studiare due punti particolari, uno la tematica del sito (quindi me come e conoscenti o persone che son state informate di me, da parte diprofessionista) e come secondo punto le tecnologie. conoscenti, clientela con un budget limitato, ma con voglia comunque di prodotti funzionanti.Questi punti, in alcuni casi sono stati un semplice ripasso, o un Son capitate ovviamente delle eccezioni, ma per riassumere, lesemplice “mettere su carta dei punti”, in altri casi si è trattato di gettare caratteristiche principali di un mio cliente tipo, attualmente sono:delle solide fondamenta al sito.Le parti più importanti sono infatti elencate in questo dossier di - Giovane (età 20-40 anni)progetto, con una conclusione per dimostrare come queste hanno dato - Budget limitatole basi alla fase successiva. - Piccole aziende o privatiPunti di analisi: Per un target più generico invece posso contare:Sulla tematica - Clienti - Collaboratori-Target - Stakeholder-Clienti - Interessati alla tematica-Formazione - Potenziali o futuri clienti-Lavori-Tipologia di lavori Cosa voglio ottenere dal sito:-Come opero - Ottenere clienti-Come mi presento attualmente / come mi voglio presentare - Ottenere richieste di lavoro-Benchmarking - Mostrare alla gente cosa faccio e come lo faccio-Attività ed eventi - Mostrare le mie idee e i miei concetti-Cosa vorrei dal sito - Consolidare sul web i legami con clienti, collaboratori, stakeholders,.. - Riuscire a tenere aggiornato il mio portfolioSulle Tecnologie - Vorrei che la gente seguisse il mio blog/sito - Essere presente su più piattaforme, con il minimo sforzo-CMS/Blog - Tener traccia degli eventi in cui partecipo-Social Network - Creare qualcosa di nuovo, di innovativo, ma con le tecnologie attuali-Online Portfolio (Deviantart, Behance, Flickr,…) e nel contesto attuale-Mobile (app,…) - Ricevere dei feedback dai clienti e/o collaboratori-altre possibilità di siti webAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 5
  • 6. ANALISIVoglio apparire come: Esperienza Multipiattaforma:- Verso i clienti, come qualcuno di cui potersi fidare, qualcuno che si Ho riflettuto sull’esperienza multicanale e multi-piattaforma, e in cheimpegna al massimo per portare il progetto al termine al migliore dei modo offrirla in modo efficace sia per me, sia per gli utilizzatori.modi- Un professionista per cui ogni progetto è il più importante Tenendo in considerazione mobile e computer, come offrire un servizio- Una persona che si impegna adeguato ai miei obbiettivi, e che mi consenta sia di colpire l’utente, sia- Un creativo poliedrico mi permetta di aggiornare i contenuti in relativamente poco tempo?- Una persona che ha le competenze necessarie- Un progettista che tenta sempre di innovare Ho affinato l’idea del blog, che assieme ai social network formerebbero il servizio base che mi rappresenta sul web, attorno ci sono i micro-Obbiettivi generali: servizi che supportano il mio blog, e viceversa, inoltre l’utente mobile- Avere una clientela vasta, poter far molti progetti con problematiche ha la possibilità di scaricare un ebook, che verrà disegnato su misuradiverse per smartphone e tablet.- Sempre aver la possibilità di progettare al massimo delle mieopportunità Tutti questi servizi comunicano fra loro e portano al blog e al social- Progettare sempre prodotti che entrano concretamente nella vita delle network, i due hanno obbiettivi e fini diversi, ovviamente, il blogpersone informare, il social invece è un valore aggiunto che mi permette di- Aver la possibilità di far le cose appena citato, anche a costo di comunicare con i clienti.scardinare ovvietà sulla comunicazione visiva e sulla rete, a costo dicreare qualcosa di totalmente innovativo. Sito-Blog:- Dovermi occupare unicamente della parte progettuale/grafica di un Si appoggerà su sistema WordPress, per i seguenti motivi:sito web, ma accompagnare il cliente in tutte le fasi - È attualmente il CMS che conosco meglio - Ha parecchie possibilità di interattività con social network e servizi online - È facile aggiornare e inserire nuovi post - Ha parecchi sistemi per condividere automaticamente su facebook i nuovi post - Facilità il posizionamento su google - Vorrei che gli utenti potessero scrivere commenti con facilitàAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 6
  • 7. ANALISIIpotesi di contenuti:-Pagine informative come biografia, curriculum, contatti, servizi (Cheandranno poi riportate anche nei social network)-Il portfolio che userà le stesse immagini usate su behance, saràdiviso in 3-4 macro categorie, e avrà dentro di sé un massimo, ipotizzosempre, di 10 progetti, e al cui termine seguirà un link “per visualizzarealtri progetti, accedi al mio profilo behance” (questo per gli utenti piùcuriosi).-Il Blog, dove inserirò periodicamente novità su quello che faccio,quello a cui partecipo, e le idee o concetti che voglio mostrare, eperché no, le innovazioni tecnologiche in atto (questo anche allo scopodi mostrare ai clienti le nuove possibilità).Social Network:Ho deciso di appoggiarmi a due social network, uno scelto secondoil target degli stakeholder, e per un pubblico decisamente piùprofessionale, e quindi per un obbiettivo più chiaro (ottenere richiestedi lavoro), ossia Linkedin, e un altro social network per puntare sullacomunicazione, ossia Facebook.Linkedin verrà usato per avere un profilo preciso, con curriculum,… eun contatto con ovviamente stakeholder, e professionisti del settore,inserirò anche qui i post del blog, e altre informazioni, ma sarà unservizio di supporto, non un servizio principale.Facebook invece sarà, assieme al sito, l’elemento chiave della miacomunicazione, questo sia per il numero di persone che ne fanno uso, grafici in allegato nella cartella: allegati > analisi > idee > esperienzasia perché è stato fino ad ora strumento di comunicazione con i miei multicanaleclienti, e i vari stakeholder.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 7
  • 8. TITOLOWIREFRAME - FLOWCHARTAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 8
  • 9. WIREFRAME - FLOWCHARTIntroduzione: Rispetto il vecchio sito ho tolto due categorie del portfolio, questoLa fase d’analisi è stata produttiva e completa, infatti appena conclusa, per due motivi, uno pratico (Behance non permette di categorizzarsison partito senza problemi e velocemente a prototipare il sito, in più di tre categorie), e uno logico (la categoria “Design” è ormaisupportato anche dalle prime idee e concetti scaturiti dalla conclusione da abbandonare perché sono maggiormente un designer indell’analisi. comunicazione visiva, che un industrial designer, ad ‘esempio, e “illustrazione” poiché alcuni di questi lavori non erano svolti per unDurante la progettazione infatti non ho avuto grandi problemi, e mi committente, e altri erano dei preparativi o strumenti che poi usavo neison trovato solo poche volte a fare un passo indietro, e a riguardarmi i prodotti multimediali).concetti principali. Oltretutto avere solo 3 categorie è più pulito e preciso, sono comunque tre categorie che comprendono molte cose, ma allo stesso tempo nonÈ stato divertente vedere i concetti che prima erano solo marcati, e in sembra che mi disperdo in mille settori.seguito abbozzati, prendere una forma concreta, una forma che era Infine c’è il blog, qua ho ipotizzato collegamenti in tutti i social, trannequella che volevo raggiungere. che su linkedin, poiché è un media più statico, in cui difficilmente inserirò contenuti esclusivi.Durante la progettazione ho iniziato ad usare il blog, primo peresigenza personale, secondo per mostrare al termine del progetto, la Cambiamenti:sua reale funzionalità. Rispetto la prima versione della flowchart ho preso la decisione di non inserire il curriculum come pagina esterna, ma come collegamento allaFlowchart: pagina “Chi sono” che a questo punto a preso il posto della paginaHo iniziato creando una prima versione della struttura del sito (e “Profilo”.dell’interazione con i vari servizi online) con l’applicazione MindNode, A causa di alcuni problemi di incomprensione di alcuni utenti, ho invececreando quindi una mappa mentale.
 pensato di cambiare la sezione “Portfolio” con “Lavori” rendendo anchePassata l’homepage ci sono un totale di 5 sezioni, ossia “Servizi” più ovvio dove cercare i clienti,…(dove ovviamente elenco cosa faccio, in modo più dettagliato di comelo faccio nel sito attuale, indicando anche i processi, i passaggi e gli flowchart in allegato nella cartella: allegati > flowchartappuntamenti con il cliente).
In “Profilo” troviamo la pagina “Chi sono”, che è la pagina biografica, e la pagina “Curriculum”, che ipotizzo possa avere il collegamento a Linkedin, e ad un pdf hostato su slideshare.
C’è poi la sezione Contatti, con i link a tutti i social media, e ovviamente anche i contatti standard, quindi la sezione portfolio, con la pagina clienti, che mostra appunto la lista dei clienti e le collaborazioni, la pagina web design, con il portfolio relativo, e grafica e multimedia.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 9
  • 10. WIREFRAME - FLOWCHARTWireframe bassa definizione: lavoro, ossia le fasi di lavoro, quindi, nello specifico, parlo delle tre areeHo iniziato ad abbozzare su carta delle proposte di wireframe, di lavoro, e come il singolo progetto può portare beneficio, ad esempio,inizialmente per la struttura generale, quindi per ogni singola pagina. per web design verranno spiegati in dettaglio siti web statici, CMS,Come i precedenti siti web volevo una struttura semplice, pulita, e-commerce,..essenziale e utilizzando dei moduli standard, tuttavia rendendo il layoutpiù web 2.0 dei precedenti tentativi. La pagina chi sono è stata quella più discussa, inizialmente la flowchart prevedeva due pagine, il chi sono, e il curriculum, sceltaHo quindi un template in cui il logo e il footer restano gli unici elementi scartata poiché le due cose possono facilmente essere concentrate,al di fuori di un blocco bianco, che è il mio content. consentendo all’utente di non dover ripetere informazioni e moltiplicareIl menù è anch’esso in questo contenitore, ma separato da una linea, la fatica.questo li da un risalto e uno spicco che merita, mentre il logo e il footercome detto sono sullo sfondo, praticamente, anche perché possono Oltretutto il curriculum completo ha spesso più senso trovarlo comeconvivere in quel modo e mantenere una giusta gerarchia, anche ipotizzavo su Linkedin, o su un pdf.senza un livello grafico già applicato. Questa pagina è quindi stata progettata con un testo descrittivo, un immagine rappresentativa, ed un box di link veloci che portano alIl contenuto in homepage parte con un primo box dove mostro curriculum, in più versioni, e magari al profilo di facebook (oggi l’utenteil concetto base, ho visto nei siti del benchmarking molti siti che medio scopre chi sei tramite facebook, sbirciando le tue foto, le tueutilizzano slideshow promozionali, io ritengo che le slideshow danno amicizie,…)fastidio, e oltretutto mi basta mostrare un singolo chiaro concetto.C’è poi un secondo slogan, formato da una frase, frase che magari In contatti vengono indicati in due tabelle separate i dati anagrafici e iintroduce quello che viene dopo. contatti sul web, Sotto a questi ci sarà un diagramma che mostra i servizi sul web in cuiCi son poi 4 box, nominati, almeno a questo livello “Scopri chi sono”, trovarmi.“Scopri cosa faccio”, “E come lo faccio” infine “Restiamo in contatto”,che collegano alla pagina Chi sono, Servizi, Portfolio e contatti. La pagina dei clienti è anch’essa divisa a metà, una prima metà mostraSotto si ripete il modulo, questa volta a immagini che rappresentano i i logotipi dei clienti, e la seconda a destra è formata da testimonianzeservizi offerti. dei clienti.Infine una piccola barra invita a seguire il blog. Sotto viene ripreso lo stesso modulo ma per le collaborazioni.Questo come si può notare è un ordine di informazioni gerarchico,prima introduco il mio concetto primario, poi introduco in modo Il portfolio sfrutterà due colonne, nella prima viene inserita l’immaginegenerico che cosa presento nel sito, quindi i servizi, e infine mostro a presa da Behance, e nella seconda verrà riposto il testo descrittivo,chi veramente è interessato che c’è il blog.Nella pagina dei servizi ci sarà una prima tabella che mostra come wireframe in allegato nella cartella: allegati > wireframe > bassa_defAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 10
  • 11. WIREFRAME - FLOWCHARTWireframe su Wordpress: Test usabilità:Finiti i wireframe cartacei, che erano una traccia di quello che volevo Finita la definizione del sito su Wordpress, ho sentito l’esigenza di farerealizzare, ho iniziato ad installare Wordpress, sul mio server, finita un primo test per scovare i problemi che la proposta iniziale aveva, inl’installazione e la configurazione di base, ho cercato come aiuto un modo da correggere già alcune cose, e capire se i concetti principalitemplate di wordpress, possibilmente fra quelli ufficiali, ossia non fatti del sito reggevano al confronto di un utente.da fan, (per cui ero sicuro di evitare problemi di sorta), che si avvicinas-se abbastanza al template che avevo progettato, questo per non parti- Ho preso cinque persone di diverse età e tipologie, e gli ho sottopostore proprio da zero, cosa comunque difficile, senza grandi conoscenze un test con domande personalizzate, in base a quello che sembrava-in php… no notare o non notare, anche se, in linea di principio, cercavo di farli scovare tutte le pagine.Ho quindi iniziato a modificare gli stili, per portarli ad un livello di wire-frame, togliendo tutta la grafica superflua, e impostando tutti i font in Come si fa spesso nei test intervenivo per chiedere se quello cheArial, che comunque è anche il font che ho sempre usato per rappre- vedevano, corrispondeva alle loro aspettative, in modo da correggeresentarmi sul web. anche questo.È stata una parte abbastanza lunga, ma non troppo complicata, il tem-plate si prestava abbastanza bene alle modifiche. Al termine del test son state corrette le cose emerse, ed é stato fattoPoi ho definito il menu, con le relative pagine vuote, in modo da aver un secondo piccolo test di usabilità per confermare le correzzioni.chiaro gli elementi di wordpress che rimanevano nelle pagine. test in allegato nella cartella: allegati > dossier > wireframe_C’è stata poi l’aggiunta dei plug-in particolari di cui necessitavo: il plug- flowchart_dossier.pdfin per il commento tramite facebook, e il plug-in per definire i lightbox,questo verrà usato unicamente nel blog, dove con immagini piccole,voglio che si possano ingrandire, il resto del sito avrà immagini a di-mensioni naturali, come stabilito.Ho quindi cominciato a definire grossolanamente la struttura delle pagi-ne, con Illustrator, riportando una griglia con i riferimenti del sito, que-sto è stato poi inserito nella pagina come immagine statica, in modo dadare già un idea della struttura, anche se era un’unica immagine.Eseguito il test d’usabilità e le relative correzzioni, é bastato program-mare i contenuti delle pagine progettate fino ad’ora in illustrator, inquesto modo non sarà necessario programmare gran parte del sito allafine del progetto.wireframe in allegato nella cartella: allegati > wireframe > wordpressAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 11
  • 12. WIREFRAME - FLOWCHARTAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 12
  • 13. MOCKUP
  • 14. MOCKUPIntroduzione:Terminala la fase di wireframe, il sito era funzionante e con i contenutiinseriti, mancava ovviamente dare l’impatto grafico, che avrebbe potutomodificare in parte i contenuti e la loro visualizzazione.Inizialmente con una prima fase di moodboard non avevo ancorachiaro quali elementi usare, e come inserirli, possedevo già alcuneregole di brand, ma volevo qualcosa anche di nuovo e moderno.Dopo aver fatto alcune tavole di moodboard, di ispirazione ho quindimesso su carta il brandbook personale, ossia l’immagine coordinata,da li ho avuto un’idea più chiara di come iniziare, e, fatte le primeschermate su photoshop, la situazione era più chiara.Ho quindi provveduto ad applicare gli stili grafici al sito online,comprensivo di Flyer (o e-book) per Smartphone e Tablet.Moodboard:Durante la fase di analisi avevo già realizzato due moodboard, che piùche essere inerente ad elementi grafici, era inerente ad alcuni aspettiprofessionali e personali, tuttavia ritenevo importante realizzarne unaversione specifica con ispirazioni grafiche, da applicare poi al layoutgrafico del sito.Guardando queste due tavole che ne sono emerse, spiccano alcunecaratteristiche visive:-semplicità-uso di sfumature morbide, radiali e lineari-icone arrotondate-uso di ombre e effetti di luce-colori accesiDi seguito inserisco le quattro tavole di moodboard, le due eseguitedurante l’analisi, e le tue realizzate invece in questa fase grafica.moodboard in allegato nella cartella: allegati >mockup > moodboardAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 14
  • 15. MOCKUPBrandbook: Mockup:Il Brand Book è un documento utilizzato dalle aziende per riunire gli L’impatto grafico del sito doveva essere incentrato sulle immagini eelementi di comunicazione che compongono l’identità del marchio. sulle evidenziazioni in blu, e da questo son partito. Volevo una grafica semplice e pulita, ma allo stesso tempo moderna eAll’interno del Brand Book si trovano le specifiche dei font, dei colori giovanile.ufficiali (con specifiche tecniche di colore), i loghi ufficiali e le loro Ho applicato una sfumatura che va da un blu scuro ad un blu che sivarianti, utilizzi corretti e scorretti dei loghi. Si possono trovare anche avvicina a quello del brand, pur rimanendo più scuro, in modo da darele indicazioni su come realizzare servizi fotografici, le linee guida per profondità alla pagina, senza affidarsi a texture o altro.la comunicazione e lo spirito con il quale l’azienda comunica con i suoiclienti e i suoi partner. Il contenuto del sito era quindi da disporre in un quadrato bianco,Lo scopo del Brand Book è dare uniformità e consistenza agli strumenti che veniva ancor più illuminato dallo sfondo, mentre che il logo (nelladi comunicazione dell’organizzazione, fornendo anche le linee guida versione in negativo) e il footer, rimanevano sullo sfondo, con anch’essidel Geist dell’organizzazione, del suo spirito e del suo stile. un colore bianco.Il Brand Book è uno strumento utile a tutti coloro che lavorano Uno dei concetti del sito è quello di inserire ombre sotto immagini, pernell’organizzazione, perché risponde a domande quali: “Quale dare profondità rispetto il fondo, e per dare un concetto modernofont devo utilizzare per stampare questo articolo?” “Qual è il logoufficiale e quali versioni posso utilizzare?” “Quali sono i colori ufficiali Il menù è nero, e si illumina al passaggio, mentre che la tendina vienedell’organizzazione, con i relativi codici colore?”. visualizzata come listelli blu, con una traccia di un pixel bianco per non interferire con immagini o fondi blu, quando ci si passa sopra, laDal momento che, nel corso degli anni, ho raccolto molti elementi situazione si inverte.grafici nel mio brand, ho preso una porzione di tempo per ragionare suqueste linee guida, in modo da unificare il mio brand. L’homepage è la pagina più cambiata rispetto i wireframe, l’immagineTrovate il brandbook completo in allegato, diviso in più capitoli che ne di slideshow di fondo spiega quello che viene presentato in modospiegano le regole. testuale a sinistra (in modo più conciso rispetto la versione wireframe), ossia le tre tipologie di servizi (web, grafica e media) incentrati sull’utente. Il cambiamento è stato poi nelle 4 immagini, che sono diventate rappresentative delle pagine clienti, web design, grafica e multimedia. In servizi le tre tabelle dei servizi hanno un fondo blu, con scritte bianche, e un’icona che serve ad alleggerire il testo, mentre che la tabella delle fasi lavorative ha uno sfondo che evolve da un azzurro al blu, a forma di frecce, proprio per simboleggiare l’evoluzioneAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 15
  • 16. MOCKUPprogettuale.Qui per spezzare il concetto dalle tre tabelle precedenti oltre acambiare lo sfondo, è cambiata l’ombra che supporta l’immagine, chenon è più iconografica ma rappresentativa.Nella pagina biografica è stata aggiunta ovviamente la foto, e le iconeper tutto quel che riguarda curriculum e contatti.In clienti rispetto il wireframe ho inserito i loghi dei clienti senza scritta,per semplificare un contenuto ovviamente non necessario, ho invecetinto di blu lo sfondo del box collaboratori, mettendo in negativo il lorologo.Nelle pagine di portfolio son stati applicati stili grafici ovviamente altesto e alle linee, ma non ci son stati altri cambiamenti, il tutto risultavagià equilibrato dal wireframe, e le immagini avevano il giusto peso.Ci sono quindi i due flyer per smartphone e tablet, disposti unoin verticale e l’altro in orizzontale, per seguire l’usabilità dei duedispositivi.Il flyer per smartphone mostra una sintetica biografia, la lista deiservizi, i contatti principali e qualche lavoro, in modo essenziale elineare, quello per tablet mostra gli stessi contenuti ma più ampliati,viene dato anche più spazio ai lavori.La grafica è riportata ovviamente dal sito, con un fondo blu o bianco adipendenza della pagina, e ombre sotto le immagini.Il curriculum in pdf è un documento sintetico impaginato in modosimilare ai due flyer per smartphone e tablet, in cui vi è nella primapagina i dati anagrafici, nella seconda formazione e esperienzelavorative disposte in una timeline, infine in tre colonne le competenze.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 16
  • 17. MOCKUPTITOLOAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 17
  • 18. TITOLOLANCIO DEL SITOAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 18
  • 19. LANCIO DEL SITOIntroduzione: Statistiche:Durante quella che doveva essere la fase di programmazione del sito, Riporto ora una serie di statistiche in cui il sito è giunto in 2 settimanedal momento che il sito era già completamente operativo e online al dal lancio del sito, collezionate grazie al plug-in statpress.termine della lavorazione grafica, ho deciso di mettere in atto quelloche effettivamente il sito necessitava, il lancio del sito e la promozionesui vari media. Visitatori: 100 Pagine viste: 500La descrizione del metodo di programmazione del sito è già stataampliamente spiegata in fase di progettazione (Wireframe) e grafica Sistema Operativo:(Mockup), e quindi, essendo legata a loro, non trovo interessanteripeterlo qui.Descriverò invece, oltre il lancio del sito, l’impatto che ha avuto, leproblematiche di aggiornamento, e come mi sto presentando sui varimedia.Come grafica non ho cambiato elementi in questa fase, ho se caso,aggiornato contenuti, soprattutto nel blog e nei social.È stata una fase interessante poiché mi ha permesso di capire a fondoil processo del lancio del sito, che spesso è banalizzato. Browser:Lancio del sito:Il sito è stato reso pubblico pubblicizzandolo su Facebookprincipalmente e sugli altri social network, su Facebook son staticondivisi più stati per pubblicizzare anche i post del blog, che vengonocondivisi automaticamente.Parte di pubblicità è anche stata fatta con i nuovi biglietti da visita,che seguono di più la grafica del sito, un’altra parte inviando e-mail aivecchi e potenziali clienti, e ai collaboratori.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 19
  • 20. LANCIO DEL SITOCommento: Tempistiche di aggiornamento:Sono soddisfatto del risultato, già in due settimane ho fatto la metà Ho eseguito un test per cronometrare quanto tempo impiego addelle visite contate in un anno con la precedente versione del sito, e inserire un nuovo lavoro nel portfolio, per valutare se l’obbiettivoho una media di visitatori/pagine viste, che promette bene anche per il era stato portato a termine, o se si poteva ottimizzare qualcosa, lefuturo. tempistiche cronometrate sono state le seguenti:Molte di queste visite sono dovute inizialmente al blog, come è anche Realizzazione elaborato (testi e immagini): 5 minutidovuto il discreto posizionamento sui motori di ricerca. Per realizzazione elaborato si intende tutto il processo dalla creazione dell’immagine al salvataggio in jpg, e la creazione del piccolo testoCome sistema operativo, la maggioranza usa Mac OSX (nelle argomentativo, questa tempistica può essere senz’altro mutata in basestatistiche portate dal plug-in sono compresi Iphone e Ipad), cosa che alla dimensione del progetto.potevo aspettarmi, i Mac sono probabilmente degli stakeholders, e ilresto sono Iphone e Ipad di clienti o di interessati, come lo sono pure i Inserimento su Behance: 3 minutiWindows 7 e Xp che ricoprono la seconda e terza posizione . In questa fase viene creato il progetto su behance, inserendo immagini, testo,.. (questo si adatta anche per vimeo).Il browser più usato, di poco, è Safari, utilizzato principalmente da Mace Iphone, quindi Firefox e Chrome, infine i vari internet explorer. Inserimento sul sito: 2 minuti Dopo aver creato il progetto behance vengono recuperati i link alleSono molto soddisfatto di questi primi risultati al lancio del sito, poiché immagini e inserite sul sito, assieme al testo descrittivo, quindi vienesi può capire che sono riuscito a colpire tutte le tipologie di target aggiornata la pagina.Posizionamento sui motori di ricerca: Inserimento su Facebook: 1 minutoSebbene il posizionamento sui motori di ricerca non fosse un obbiettivo Eventualmente l’inserimento in uno dei tre album del profilo Facebookdel sito, ritenevo importante tentare, anche come sfida personale, la (grafica, web design, multimedia).scalata nei termini più complicati da raggiungere.Ho raggiunto la prima posizione cercando “multimedia ticino”, la In generale le tempistiche mi hanno soddisfatto, in poco più di 10prima pagina in “grafica ticino”, e purtroppo ancora la seconda pagina minuti, un progetto è condiviso su tutte le piattaforme in manieracercando “web design ticino”, il termine più complicato contro cui efficace, ovviamente non tutti i progetti richiederanno l’inserimento sulconcorrere, e il posizionamento in questi termini migliora man mano sito, o su facebook, e quindi sarà più veloce l’intero processo.grazie soprattutto al blog. Del tempo sarà anche risparmiato se è possibile inserire più lavoriA questo si aggiungono altri termini rilevanti (abianchiDesign, assieme, invece che uno alla volta.Alessandro Bianchi, SSS_AA, CSIA,..) in cui sono nelle primeposizioni, e termini meno rilevanti dati dai tag del blog.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 20
  • 21. LANCIO DEL SITOBlog: Social:La gestione del blog per me si è rivelata meno pesante, e invece La parte dei social è stata quella meno faticosa da gestire, granpiù interessante di quanto pensassi, ha portato benefici, sia al mio parte della pubblicità e dell’impatto è stato puntato su Facebook,sito (visite,…) sia a me (mi ha permesso di stringere più legami con aggiungendo amici, pubblicizzando lavori, e al tempo stesso,stakeholder, e allo stesso tempo incuriosire più clienti su alcune stringendo qui il contatto con clienti e stakeholders, funzionando comepossibilità). prevedevo, benissimo.Molti degli articoli riguardavano lavori in atto, altri semplicemente Su Vimeo e Behance mi son limitato ad aggiornare il mio profilo, ariflessioni o spunti progettuali, altri ancora eventi. seguire qualche profilo di conoscenti, e in generale, a mettere dei like a progetti interessanti, anche a scopo pubblicitario, senza perdere moltoHo avuto un periodo di un mese in cui non sono riuscito a scrivere tempo.niente, questo perché stavo lavorando (oltre a questo esame), a 5progetti diversi, contemporaneamente, e non ne avevo quindi nessuno Infine linkedin è stato usato come prima per scopo professionale,da mostrare, né il tempo per scrivere qualcosa, in compenso, concluso inserendo curriculum aggiornati, e stringendo i contatti con gliquesto mese e questi lavori, il portfolio come il blog, si rinfrescò di stakeholders.contenuti. E-Book:Non penso sia un problema se ogni tanto si lascia un vuoto nel blog, Come avevo ideato in fase di wireframe, al contatto con un nuovol’importante è che il blog resti aggiornato, e non rimanga senza cliente, o un collaboratore, che vuole sapere qualcosa in più su di me,contenuti per tanto tempo, quello da l’idea di vecchio, ma in caso oltre a consegnare il biglietto da visita, consiglio immediatamente didovesse succedere ancora un periodo come questo, si può inserire scaricare l’ebook adatto al mobile, piuttosto che al tablet, questo li daqualche evento, qualche spunto o ispirazione, ed eventualmente, se già un’idea del mio mondo, senza navigare a lungo il mio sito, cosa cheil caso lo permette (non come questa volta), scrivere qualche riga sui su queste piattaforme spesso è complicato e costoso.progetti in atto, e su come si stanno svolgendo.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 21
  • 22. LANCIO DEL SITOIn futuro?:A sito finito, funzionante e visitato, voglio ipotizzare come si trasformerànel futuro, nonostante io non conosca ancora esattamente il mio futuroprofessionale.Immagino che ovviamente io riesca ad aggiornare periodicamentenon solo il portfolio, ma anche le pagine biografiche,… con facilità,immagino incentrerò maggiormente l’attenzione sul blog e su facebook,e che quest’ultimo diventerà un contatto ancora più forte con i clienti,chiaramente anche a dipendenza della sua evoluzione.Ipotizzavo anche di mostrare i vari passaggi per la realizzazione diquesto sito, sul blog, per mostrare anche ai clienti e agli utenti ingenerale, le varie fasi di lavoro, sul prodotto che stanno visitando.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 22
  • 23. LANCIOTITOLO DEL SITOAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 23
  • 24. TITOLOCONCLUSIONEAlessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 24
  • 25. CONCLUSIONEConclusione:Sono globalmente soddisfatto del lavoro svolto, nonostante sia la terzaversione del sito personale che progetto, questa è senza dubbio la piùcompleta e interessante, e pure la più coinvolgente.Ho creato qualcosa di diverso dal solito, riuscendo a portare acompimento gli obbiettivi che mi sono imposto durante la fase dianalisi, adattandoli con quelli che giungevano durante la altre fasi.Progettare il proprio portfolio, la propria presenza online, è una cosainteressante, perché ti da l’occasione di essere critico con te stesso,più di quanto magari lo sono i clienti abitudinari, abbiamo anche avutol’opportunità di gestire il tempo nell’arco di molti mesi, il che mi hapermesso di svolgere molte fasi che magari, solitamente si tralasciano.Tutto questo mi ha portato ad un risultato che mi ha sorpreso, il sito mirispecchia per la prima volta, e mostra un’identità forte e professionale,dandomi la possibilità di consolidare via web rapporti con clienti estakeholders.Non ho riscontrato particolari problemi proprio perché le tempistichepermettevano di prendersi tempo, e quindi di fare test, riflettere su tutti ipunti, e tentare alternative.Mi ha anche incoraggiato, come lavoro, in quanto ho notato imiglioramenti che ho fatto nei progetti, negli ultimi anni, progressi chesono più che mai spinto a intensificare.Il risultato è ottimo anche dal punto di vista dell’impatto, in meno di duesettimane dal lancio, ho quasi eguagliato le visite ottenute in un annonel vecchio sito, ho avuto contatti da alcune aziende, e ho ricevutoancora più progetti.Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 25