Dossier_abianchidesign

Dossier di progettoProgetto interdisciplinare di 4° semestre

Alessandro Bianchi

Secondo anno, corso Grafica Digitale orientamento web 2011/2012SSS_AA Scuola specializzata superiore d’arte applicata, Lugano

blog del progetto visualizzabile su: www.abianchidesign.com/blogprototipo visualizzabile su: www.abianchidesign.info

Progetto “portfolio professionale”

Alessandro Bianchi 2SSS_AA DG Web Progetto “portfolio professionale” 2

INDICE3333

4-7555566

6-78-12

999

101111

13-17141415

16-1718-23

19191920202021212122

24-2525

INTRODUZIONEIntroduzioneMandatoTempistiche e modalità di lavoroANALISIIntroduzionePunti di analisiTargetCosa voglio ottenere dal sitoVoglio apparire come...Obbiettivi generaliEsperienza multipiattaformaFLOWCHART - WIREFRAMEIntroduzioneFlowchartCambiamentiWireframe bassa definizioneWireframe su WordpressTest di usabilitàMOCKUPIntroduzioneMoodboardBrandbookMockupLANCIO DEL SITOIntroduzioneLancio del sitoStatisticheCommentoPosizionamento sui motori di ricercaTempistiche di aggiornamentoBlogSocialE-bookIn futuro?CONCLUSIONEConclusione


INTRODUZIONEIntroduzione:Progettare un proprio portfolio è una delle sfide più grandi per un web designer, perché occorre una certa introspezione, dell’analisi critica e un po di consapevolezza di sé stessi.È un compito che ho già eseguito ben 3 volte, ottenendo dei progressi notevoli, certo, ma senza mai arrivare ad uno stadio di soddisfazione del prodotto creato.

È sicuramente più interessante svolgere alcuni compiti ora, rispetto che ai tempi del primo sito web, in quanto mi sono evoluto come professionista, e ho collezionato un maggior numero di lavori nel portfolio da poi esporre.

Mandato:Il mandato prevede di progettare e realizzare un sito (tenendo presente la pratica professionale e le innovazioni in atto), in autonomia e individualmente, che favorisca la promozione delle proprie competenze professionali di web designer e che favorisca il facile aggiornamento o pubblicazioni dei contenuti. Tutto questo al fine di convalidare le competenze acquisite durante il corso scolastico.

Tempistiche e modalità di lavoro:Ricevuto il mandato abbiamo definito delle tempistiche e le date di consegna, sono le seguenti:

Mercoledì 29 febbraio 2012: Consegna dell’analisiLunedì 16 aprile 2012: Consegna struttura del sito e delle pagineLunedì 14 maggio 2012: Consegna del progetto d’interfaccia graficaVenerdì 8 giugno 2012: Consegna del sitoGiovedì 14 giugno 2012: Consegna del dossier di accompagnamento

Ho deciso, una volta definiti i punti di analisi, di gestire un blog, da utilizzare come “diario di lavoro”, in modo sia da mantenere in ordine cronologico tutto quello che analizzo e penso, sia da possederne comunque una traccia al di fuori del computer, e oltretutto per fare in modo che i docenti possano avere un’idea sempre aggiornata di come procede il mio lavoro.Come ulteriore valore aggiunto, ho avuto modo inoltre di consolidare le competenze personali con wordpress, in modo da poter sperimentare il cms che molto probabilmente, secondo i punti di analisi, sarà il sistema con cui poi produrrò gran parte del mio prodotto.

Il blog è visibile su: www.abianchidesign.com/blog


TITOLO

ANALISI


ANALISIIntroduzione:La fase di analisi è stata lunga e complessa, e mi ha portato a studiare due punti particolari, uno la tematica del sito (quindi me come professionista) e come secondo punto le tecnologie.

Questi punti, in alcuni casi sono stati un semplice ripasso, o un semplice “mettere su carta dei punti”, in altri casi si è trattato di gettare delle solide fondamenta al sito.Le parti più importanti sono infatti elencate in questo dossier di progetto, con una conclusione per dimostrare come queste hanno dato le basi alla fase successiva.

Punti di analisi:Sulla tematica

-Target-Clienti-Formazione-Lavori-Tipologia di lavori-Come opero-Come mi presento attualmente / come mi voglio presentare-Benchmarking-Attività ed eventi-Cosa vorrei dal sito

Sulle Tecnologie

-CMS/Blog-Social Network-Online Portfolio (Deviantart, Behance, Flickr,…)-Mobile (app,…)-altre possibilità di siti web

Target:La mia clientela attuale è composta da persone relativamente giovani, e conoscenti o persone che son state informate di me, da parte di conoscenti, clientela con un budget limitato, ma con voglia comunque di prodotti funzionanti.Son capitate ovviamente delle eccezioni, ma per riassumere, le caratteristiche principali di un mio cliente tipo, attualmente sono:

- Giovane (età 20-40 anni)- Budget limitato- Piccole aziende o privati

Per un target più generico invece posso contare:- Clienti- Collaboratori- Stakeholder- Interessati alla tematica- Potenziali o futuri clienti

Cosa voglio ottenere dal sito:- Ottenere clienti- Ottenere richieste di lavoro- Mostrare alla gente cosa faccio e come lo faccio- Mostrare le mie idee e i miei concetti- Consolidare sul web i legami con clienti, collaboratori, stakeholders,..- Riuscire a tenere aggiornato il mio portfolio- Vorrei che la gente seguisse il mio blog/sito- Essere presente su più piattaforme, con il minimo sforzo- Tener traccia degli eventi in cui partecipo- Creare qualcosa di nuovo, di innovativo, ma con le tecnologie attuali e nel contesto attuale- Ricevere dei feedback dai clienti e/o collaboratori


ANALISIVoglio apparire come:- Verso i clienti, come qualcuno di cui potersi fidare, qualcuno che si impegna al massimo per portare il progetto al termine al migliore dei modi- Un professionista per cui ogni progetto è il più importante- Una persona che si impegna- Un creativo poliedrico- Una persona che ha le competenze necessarie- Un progettista che tenta sempre di innovare

Obbiettivi generali:- Avere una clientela vasta, poter far molti progetti con problematiche diverse- Sempre aver la possibilità di progettare al massimo delle mie opportunità- Progettare sempre prodotti che entrano concretamente nella vita delle persone- Aver la possibilità di far le cose appena citato, anche a costo di scardinare ovvietà sulla comunicazione visiva e sulla rete, a costo di creare qualcosa di totalmente innovativo.- Dovermi occupare unicamente della parte progettuale/grafica di un sito web, ma accompagnare il cliente in tutte le fasi

Esperienza Multipiattaforma:Ho riflettuto sull’esperienza multicanale e multi-piattaforma, e in che modo offrirla in modo efficace sia per me, sia per gli utilizzatori.

Tenendo in considerazione mobile e computer, come offrire un servizio adeguato ai miei obbiettivi, e che mi consenta sia di colpire l’utente, sia mi permetta di aggiornare i contenuti in relativamente poco tempo?

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-servizi che supportano il mio blog, e viceversa, inoltre l’utente mobile ha la possibilità di scaricare un ebook, che verrà disegnato su misura per smartphone e tablet.

Tutti questi servizi comunicano fra loro e portano al blog e al social network, i due hanno obbiettivi e fini diversi, ovviamente, il blog informare, il social invece è un valore aggiunto che mi permette di comunicare con i clienti.

Sito-Blog:Si appoggerà su sistema WordPress, per i seguenti motivi:

- È 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à


ANALISIIpotesi di contenuti:-Pagine informative come biografia, curriculum, contatti, servizi (Che andranno 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, ipotizzo sempre, di 10 progetti, e al cui termine seguirà un link “per visualizzare altri 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, e perché no, le innovazioni tecnologiche in atto (questo anche allo scopo di mostrare ai clienti le nuove possibilità).

Social Network:Ho deciso di appoggiarmi a due social network, uno scelto secondo il target degli stakeholder, e per un pubblico decisamente più professionale, e quindi per un obbiettivo più chiaro (ottenere richieste di lavoro), ossia Linkedin, e un altro social network per puntare sulla comunicazione, ossia Facebook.

Linkedin verrà usato per avere un profilo preciso, con curriculum,… e un contatto con ovviamente stakeholder, e professionisti del settore, inserirò anche qui i post del blog, e altre informazioni, ma sarà un servizio di supporto, non un servizio principale.

Facebook invece sarà, assieme al sito, l’elemento chiave della mia comunicazione, questo sia per il numero di persone che ne fanno uso, sia perché è stato fino ad ora strumento di comunicazione con i miei clienti, e i vari stakeholder.

grafici in allegato nella cartella: allegati > analisi > idee > esperienzamulticanale


TITOLO

WIREFRAME - FLOWCHART


WIREFRAME - FLOWCHARTIntroduzione:La fase d’analisi è stata produttiva e completa, infatti appena conclusa, son partito senza problemi e velocemente a prototipare il sito, supportato anche dalle prime idee e concetti scaturiti dalla conclusione dell’analisi.

Durante la progettazione infatti non ho avuto grandi problemi, e mi son trovato solo poche volte a fare un passo indietro, e a riguardarmi i concetti principali.

È stato divertente vedere i concetti che prima erano solo marcati, e in seguito abbozzati, prendere una forma concreta, una forma che era quella che volevo raggiungere.

Durante la progettazione ho iniziato ad usare il blog, primo per esigenza personale, secondo per mostrare al termine del progetto, la sua reale funzionalità.

Flowchart: Ho iniziato creando una prima versione della struttura del sito (e dell’interazione con i vari servizi online) con l’applicazione MindNode, creando quindi una mappa mentale.Passata l’homepage ci sono un totale di 5 sezioni, ossia “Servizi” (dove ovviamente elenco cosa faccio, in modo più dettagliato di come lo faccio nel sito attuale, indicando anche i processi, i passaggi e gli appuntamenti 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.

Rispetto il vecchio sito ho tolto due categorie del portfolio, questo per due motivi, uno pratico (Behance non permette di categorizzarsi in più di tre categorie), e uno logico (la categoria “Design” è ormai da abbandonare perché sono maggiormente un designer in comunicazione visiva, che un industrial designer, ad ‘esempio, e “illustrazione” poiché alcuni di questi lavori non erano svolti per un committente, e altri erano dei preparativi o strumenti che poi usavo nei prodotti multimediali).Oltretutto avere solo 3 categorie è più pulito e preciso, sono comunque tre categorie che comprendono molte cose, ma allo stesso tempo non sembra che mi disperdo in mille settori.Infine c’è il blog, qua ho ipotizzato collegamenti in tutti i social, tranne che su linkedin, poiché è un media più statico, in cui difficilmente inserirò contenuti esclusivi.

Cambiamenti:Rispetto la prima versione della flowchart ho preso la decisione di non inserire il curriculum come pagina esterna, ma come collegamento alla pagina “Chi sono” che a questo punto a preso il posto della pagina “Profilo”.A causa di alcuni problemi di incomprensione di alcuni utenti, ho invece pensato di cambiare la sezione “Portfolio” con “Lavori” rendendo anche più ovvio dove cercare i clienti,…

flowchart in allegato nella cartella: allegati > flowchart


WIREFRAME - FLOWCHARTWireframe bassa definizione:Ho iniziato ad abbozzare su carta delle proposte di wireframe, inizialmente per la struttura generale, quindi per ogni singola pagina.Come i precedenti siti web volevo una struttura semplice, pulita, essenziale e utilizzando dei moduli standard, tuttavia rendendo il layout più web 2.0 dei precedenti tentativi.

Ho quindi un template in cui il logo e il footer restano gli unici elementi al di fuori di un blocco bianco, che è il mio content.Il menù è anch’esso in questo contenitore, ma separato da una linea, questo li da un risalto e uno spicco che merita, mentre il logo e il footer come detto sono sullo sfondo, praticamente, anche perché possono convivere in quel modo e mantenere una giusta gerarchia, anche senza un livello grafico già applicato.

Il contenuto in homepage parte con un primo box dove mostro il concetto base, ho visto nei siti del benchmarking molti siti che utilizzano slideshow promozionali, io ritengo che le slideshow danno fastidio, e oltretutto mi basta mostrare un singolo chiaro concetto.C’è poi un secondo slogan, formato da una frase, frase che magari introduce quello che viene dopo.

Ci son poi 4 box, nominati, almeno a questo livello “Scopri chi sono”, “Scopri cosa faccio”, “E come lo faccio” infine “Restiamo in contatto”, che collegano alla pagina Chi sono, Servizi, Portfolio e contatti.Sotto si ripete il modulo, questa volta a immagini che rappresentano i servizi offerti.Infine una piccola barra invita a seguire il blog.Questo come si può notare è un ordine di informazioni gerarchico, prima introduco il mio concetto primario, poi introduco in modo generico che cosa presento nel sito, quindi i servizi, e infine mostro a chi veramente è interessato che c’è il blog.Nella pagina dei servizi ci sarà una prima tabella che mostra come

lavoro, ossia le fasi di lavoro, quindi, nello specifico, parlo delle tre aree di lavoro, e come il singolo progetto può portare beneficio, ad esempio, per web design verranno spiegati in dettaglio siti web statici, CMS, e-commerce,..

La pagina chi sono è stata quella più discussa, inizialmente la flowchart prevedeva due pagine, il chi sono, e il curriculum, scelta scartata poiché le due cose possono facilmente essere concentrate, consentendo all’utente di non dover ripetere informazioni e moltiplicare la fatica.

Oltretutto il curriculum completo ha spesso più senso trovarlo come ipotizzavo su Linkedin, o su un pdf.Questa pagina è quindi stata progettata con un testo descrittivo, un immagine rappresentativa, ed un box di link veloci che portano al curriculum, in più versioni, e magari al profilo di facebook (oggi l’utente medio scopre chi sei tramite facebook, sbirciando le tue foto, le tue amicizie,…)

In contatti vengono indicati in due tabelle separate i dati anagrafici e i contatti sul web,Sotto a questi ci sarà un diagramma che mostra i servizi sul web in cui trovarmi.

La pagina dei clienti è anch’essa divisa a metà, una prima metà mostra i logotipi dei clienti, e la seconda a destra è formata da testimonianze dei clienti.Sotto viene ripreso lo stesso modulo ma per le collaborazioni.

Il portfolio sfrutterà due colonne, nella prima viene inserita l’immagine presa da Behance, e nella seconda verrà riposto il testo descrittivo,

wireframe in allegato nella cartella: allegati > wireframe > bassa_def


WIREFRAME - FLOWCHARTWireframe su Wordpress:Finiti i wireframe cartacei, che erano una traccia di quello che volevo realizzare, ho iniziato ad installare Wordpress, sul mio server, finita l’installazione e la configurazione di base, ho cercato come aiuto un template di wordpress, possibilmente fra quelli ufficiali, ossia non fatti 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-re proprio da zero, cosa comunque difficile, senza grandi conoscenze in php…

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 Arial, che comunque è anche il font che ho sempre usato per rappre-sentarmi sul web.È stata una parte abbastanza lunga, ma non troppo complicata, il tem-plate si prestava abbastanza bene alle modifiche.Poi ho definito il menu, con le relative pagine vuote, in modo da aver chiaro gli elementi di wordpress che rimanevano nelle pagine.C’è stata poi l’aggiunta dei plug-in particolari di cui necessitavo: il plug-in 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 da dare 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, in questo modo non sarà necessario programmare gran parte del sito alla fine del progetto.wireframe in allegato nella cartella: allegati > wireframe > wordpress

Test usabilità:Finita la definizione del sito su Wordpress, ho sentito l’esigenza di fare un primo test per scovare i problemi che la proposta iniziale aveva, in modo da correggere già alcune cose, e capire se i concetti principali del sito reggevano al confronto di un utente.

Ho preso cinque persone di diverse età e tipologie, e gli ho sottoposto un test con domande personalizzate, in base a quello che sembrava-no notare o non notare, anche se, in linea di principio, cercavo di farli scovare tutte le pagine.

Come si fa spesso nei test intervenivo per chiedere se quello che vedevano, corrispondeva alle loro aspettative, in modo da correggere anche questo.

Al termine del test son state corrette le cose emerse, ed é stato fatto un secondo piccolo test di usabilità per confermare le correzzioni.test in allegato nella cartella: allegati > dossier > wireframe_flowchart_dossier.pdf


WIREFRAME - FLOWCHART

MOCKUP


MOCKUPIntroduzione:Terminala la fase di wireframe, il sito era funzionante e con i contenuti inseriti, mancava ovviamente dare l’impatto grafico, che avrebbe potuto modificare in parte i contenuti e la loro visualizzazione.Inizialmente con una prima fase di moodboard non avevo ancora chiaro quali elementi usare, e come inserirli, possedevo già alcune regole di brand, ma volevo qualcosa anche di nuovo e moderno.Dopo aver fatto alcune tavole di moodboard, di ispirazione ho quindi messo su carta il brandbook personale, ossia l’immagine coordinata, da li ho avuto un’idea più chiara di come iniziare, e, fatte le prime schermate 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 aspetti professionali e personali, tuttavia ritenevo importante realizzarne una versione specifica con ispirazioni grafiche, da applicare poi al layout grafico del sito.Guardando queste due tavole che ne sono emerse, spiccano alcune caratteristiche visive:

-semplicità-uso di sfumature morbide, radiali e lineari-icone arrotondate-uso di ombre e effetti di luce-colori accesi

Di seguito inserisco le quattro tavole di moodboard, le due eseguite durante l’analisi, e le tue realizzate invece in questa fase grafica.moodboard in allegato nella cartella: allegati >mockup > moodboard


MOCKUPBrandbook:Il Brand Book è un documento utilizzato dalle aziende per riunire gli elementi di comunicazione che compongono l’identità del marchio.

All’interno del Brand Book si trovano le specifiche dei font, dei colori ufficiali (con specifiche tecniche di colore), i loghi ufficiali e le loro varianti, utilizzi corretti e scorretti dei loghi. Si possono trovare anche le indicazioni su come realizzare servizi fotografici, le linee guida per la comunicazione e lo spirito con il quale l’azienda comunica con i suoi clienti e i suoi partner.Lo scopo del Brand Book è dare uniformità e consistenza agli strumenti di comunicazione dell’organizzazione, fornendo anche le linee guida del Geist dell’organizzazione, del suo spirito e del suo stile.Il Brand Book è uno strumento utile a tutti coloro che lavorano nell’organizzazione, perché risponde a domande quali: “Quale font devo utilizzare per stampare questo articolo?” “Qual è il logo ufficiale e quali versioni posso utilizzare?” “Quali sono i colori ufficiali dell’organizzazione, con i relativi codici colore?”.

Dal momento che, nel corso degli anni, ho raccolto molti elementi grafici nel mio brand, ho preso una porzione di tempo per ragionare su queste linee guida, in modo da unificare il mio brand.Trovate il brandbook completo in allegato, diviso in più capitoli che ne spiegano le regole.

Mockup:L’impatto grafico del sito doveva essere incentrato sulle immagini e sulle evidenziazioni in blu, e da questo son partito.Volevo una grafica semplice e pulita, ma allo stesso tempo moderna e giovanile.Ho applicato una sfumatura che va da un blu scuro ad un blu che si avvicina a quello del brand, pur rimanendo più scuro, in modo da dare profondità alla pagina, senza affidarsi a texture o altro.

Il contenuto del sito era quindi da disporre in un quadrato bianco, che veniva ancor più illuminato dallo sfondo, mentre che il logo (nella versione in negativo) e il footer, rimanevano sullo sfondo, con anch’essi un colore bianco.Uno dei concetti del sito è quello di inserire ombre sotto immagini, per dare profondità rispetto il fondo, e per dare un concetto moderno

Il menù è nero, e si illumina al passaggio, mentre che la tendina viene visualizzata come listelli blu, con una traccia di un pixel bianco per non interferire con immagini o fondi blu, quando ci si passa sopra, la situazione si inverte.

L’homepage è la pagina più cambiata rispetto i wireframe, l’immagine di slideshow di fondo spiega quello che viene presentato in modo 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’evoluzione


MOCKUPprogettuale.Qui per spezzare il concetto dalle tre tabelle precedenti oltre a cambiare lo sfondo, è cambiata l’ombra che supporta l’immagine, che non è più iconografica ma rappresentativa.Nella pagina biografica è stata aggiunta ovviamente la foto, e le icone per 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 invece tinto di blu lo sfondo del box collaboratori, mettendo in negativo il loro logo.Nelle pagine di portfolio son stati applicati stili grafici ovviamente al testo e alle linee, ma non ci son stati altri cambiamenti, il tutto risultava già equilibrato dal wireframe, e le immagini avevano il giusto peso.

Ci sono quindi i due flyer per smartphone e tablet, disposti uno in verticale e l’altro in orizzontale, per seguire l’usabilità dei due dispositivi.

Il flyer per smartphone mostra una sintetica biografia, la lista dei servizi, i contatti principali e qualche lavoro, in modo essenziale e lineare, 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 a dipendenza della pagina, e ombre sotto le immagini.

Il curriculum in pdf è un documento sintetico impaginato in modo similare ai due flyer per smartphone e tablet, in cui vi è nella prima pagina i dati anagrafici, nella seconda formazione e esperienze lavorative disposte in una timeline, infine in tre colonne le competenze.


TITOLOMOCKUP


TITOLO

LANCIO DEL SITO


LANCIO DEL SITOIntroduzione:Durante quella che doveva essere la fase di programmazione del sito, dal momento che il sito era già completamente operativo e online al termine della lavorazione grafica, ho deciso di mettere in atto quello che effettivamente il sito necessitava, il lancio del sito e la promozione sui vari media.

La descrizione del metodo di programmazione del sito è già stata ampliamente spiegata in fase di progettazione (Wireframe) e grafica (Mockup), e quindi, essendo legata a loro, non trovo interessante ripeterlo qui.Descriverò invece, oltre il lancio del sito, l’impatto che ha avuto, le problematiche di aggiornamento, e come mi sto presentando sui vari media.

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 fondo il processo del lancio del sito, che spesso è banalizzato.

Lancio del sito: Il sito è stato reso pubblico pubblicizzandolo su Facebook principalmente e sugli altri social network, su Facebook son stati condivisi più stati per pubblicizzare anche i post del blog, che vengono condivisi 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 ai vecchi e potenziali clienti, e ai collaboratori.

Statistiche:Riporto ora una serie di statistiche in cui il sito è giunto in 2 settimane dal lancio del sito, collezionate grazie al plug-in statpress.

Visitatori: 100

Pagine viste: 500

Sistema Operativo:

Browser:


LANCIO DEL SITOCommento:Sono soddisfatto del risultato, già in due settimane ho fatto la metà delle visite contate in un anno con la precedente versione del sito, e ho una media di visitatori/pagine viste, che promette bene anche per il futuro.

Molte di queste visite sono dovute inizialmente al blog, come è anche dovuto il discreto posizionamento sui motori di ricerca.

Come sistema operativo, la maggioranza usa Mac OSX (nelle statistiche portate dal plug-in sono compresi Iphone e Ipad), cosa che potevo aspettarmi, i Mac sono probabilmente degli stakeholders, e il resto sono Iphone e Ipad di clienti o di interessati, come lo sono pure i Windows 7 e Xp che ricoprono la seconda e terza posizione .

Il browser più usato, di poco, è Safari, utilizzato principalmente da Mac e Iphone, quindi Firefox e Chrome, infine i vari internet explorer.

Sono molto soddisfatto di questi primi risultati al lancio del sito, poiché si può capire che sono riuscito a colpire tutte le tipologie di target

Posizionamento sui motori di ricerca:Sebbene il posizionamento sui motori di ricerca non fosse un obbiettivo del sito, ritenevo importante tentare, anche come sfida personale, la scalata nei termini più complicati da raggiungere.Ho raggiunto la prima posizione cercando “multimedia ticino”, la prima pagina in “grafica ticino”, e purtroppo ancora la seconda pagina cercando “web design ticino”, il termine più complicato contro cui concorrere, e il posizionamento in questi termini migliora man mano grazie soprattutto al blog.A questo si aggiungono altri termini rilevanti (abianchiDesign, Alessandro Bianchi, SSS_AA, CSIA,..) in cui sono nelle prime posizioni, e termini meno rilevanti dati dai tag del blog.

Tempistiche di aggiornamento:Ho eseguito un test per cronometrare quanto tempo impiego ad inserire un nuovo lavoro nel portfolio, per valutare se l’obbiettivo era stato portato a termine, o se si poteva ottimizzare qualcosa, le tempistiche cronometrate sono state le seguenti:

Realizzazione elaborato (testi e immagini): 5 minutiPer realizzazione elaborato si intende tutto il processo dalla creazione dell’immagine al salvataggio in jpg, e la creazione del piccolo testo argomentativo, questa tempistica può essere senz’altro mutata in base alla dimensione del progetto.

Inserimento su Behance: 3 minutiIn questa fase viene creato il progetto su behance, inserendo immagini, testo,.. (questo si adatta anche per vimeo).

Inserimento sul sito: 2 minutiDopo aver creato il progetto behance vengono recuperati i link alle immagini e inserite sul sito, assieme al testo descrittivo, quindi viene aggiornata la pagina.

Inserimento su Facebook: 1 minutoEventualmente l’inserimento in uno dei tre album del profilo Facebook (grafica, web design, multimedia).

In generale le tempistiche mi hanno soddisfatto, in poco più di 10 minuti, un progetto è condiviso su tutte le piattaforme in maniera efficace, ovviamente non tutti i progetti richiederanno l’inserimento sul sito, o su facebook, e quindi sarà più veloce l’intero processo.Del tempo sarà anche risparmiato se è possibile inserire più lavori assieme, invece che uno alla volta.


LANCIO DEL SITOBlog:La gestione del blog per me si è rivelata meno pesante, e invece più interessante di quanto pensassi, ha portato benefici, sia al mio sito (visite,…) sia a me (mi ha permesso di stringere più legami con stakeholder, e allo stesso tempo incuriosire più clienti su alcune possibilità).

Molti degli articoli riguardavano lavori in atto, altri semplicemente riflessioni o spunti progettuali, altri ancora eventi.

Ho avuto un periodo di un mese in cui non sono riuscito a scrivere niente, questo perché stavo lavorando (oltre a questo esame), a 5 progetti diversi, contemporaneamente, e non ne avevo quindi nessuno da mostrare, né il tempo per scrivere qualcosa, in compenso, concluso questo mese e questi lavori, il portfolio come il blog, si rinfrescò di contenuti.

Non penso sia un problema se ogni tanto si lascia un vuoto nel blog, l’importante è che il blog resti aggiornato, e non rimanga senza contenuti per tanto tempo, quello da l’idea di vecchio, ma in caso dovesse succedere ancora un periodo come questo, si può inserire qualche evento, qualche spunto o ispirazione, ed eventualmente, se il caso lo permette (non come questa volta), scrivere qualche riga sui progetti in atto, e su come si stanno svolgendo.

Social:La parte dei social è stata quella meno faticosa da gestire, gran parte della pubblicità e dell’impatto è stato puntato su Facebook, aggiungendo amici, pubblicizzando lavori, e al tempo stesso, stringendo qui il contatto con clienti e stakeholders, funzionando come prevedevo, benissimo.

Su Vimeo e Behance mi son limitato ad aggiornare il mio profilo, a seguire qualche profilo di conoscenti, e in generale, a mettere dei like a progetti interessanti, anche a scopo pubblicitario, senza perdere molto tempo.

Infine linkedin è stato usato come prima per scopo professionale, inserendo curriculum aggiornati, e stringendo i contatti con gli stakeholders.

E-Book: Come avevo ideato in fase di wireframe, al contatto con un nuovo cliente, o un collaboratore, che vuole sapere qualcosa in più su di me, oltre a consegnare il biglietto da visita, consiglio immediatamente di scaricare l’ebook adatto al mobile, piuttosto che al tablet, questo li da già un’idea del mio mondo, senza navigare a lungo il mio sito, cosa che su queste piattaforme spesso è complicato e costoso.


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 futuro professionale.

Immagino che ovviamente io riesca ad aggiornare periodicamente non 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 di questo sito, sul blog, per mostrare anche ai clienti e agli utenti in generale, le varie fasi di lavoro, sul prodotto che stanno visitando.


TITOLOLANCIO DEL SITO


TITOLO

CONCLUSIONE


CONCLUSIONEConclusione:Sono globalmente soddisfatto del lavoro svolto, nonostante sia la terza versione 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 a compimento gli obbiettivi che mi sono imposto durante la fase di analisi, adattandoli con quelli che giungevano durante la altre fasi.

Progettare il proprio portfolio, la propria presenza online, è una cosa interessante, perché ti da l’occasione di essere critico con te stesso, più di quanto magari lo sono i clienti abitudinari, abbiamo anche avuto l’opportunità di gestire il tempo nell’arco di molti mesi, il che mi ha permesso di svolgere molte fasi che magari, solitamente si tralasciano.

Tutto questo mi ha portato ad un risultato che mi ha sorpreso, il sito mi rispecchia per la prima volta, e mostra un’identità forte e professionale, dandomi la possibilità di consolidare via web rapporti con clienti e stakeholders.

Non ho riscontrato particolari problemi proprio perché le tempistiche permettevano di prendersi tempo, e quindi di fare test, riflettere su tutti i punti, e tentare alternative.Mi ha anche incoraggiato, come lavoro, in quanto ho notato i miglioramenti che ho fatto nei progetti, negli ultimi anni, progressi che sono più che mai spinto a intensificare.

Il risultato è ottimo anche dal punto di vista dell’impatto, in meno di due settimane dal lancio, ho quasi eguagliato le visite ottenute in un anno nel vecchio sito, ho avuto contatti da alcune aziende, e ho ricevuto ancora più progetti.

Dossier_abianchidesign

Documents

Transcript of Dossier_abianchidesign