Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Il redesign del proprio sito personale

Ridisegnare un sito personale perché rifletta al meglio la nostra prsonalità
Ridisegnare un sito personale perché rifletta al meglio la nostra prsonalità
Link copiato negli appunti

Questa è la traduzione dell'articolo Redesigning Your Own Site di Lea Alcantara, pubblicato originariamente su A List Apart il 4 Agosto 2009. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

Nel 2008 gestivo da tre anni la mia compagnia, la Lealea Design. Ero consapevole della necessità di mostrare ai miei colleghi e ai potenziali clienti di essere in linea con gli ultimi sviluppi e le ultime tendenze del settore. Avevo anche realizzato che il mio sito, vecchio di tre anni, non rifletteva più il mio brand personale e che non mostrava nel modo adeguato i servizi che offro, le mie capacità o me stessa. Dal momento che la creazione di un'immagine e la promozione di un brand sono le mie specialità, ciò non poteva essere accettabile.

Un redesign, però, è come una fatica di Sisifo, e poiché il mio design originale aveva ricevuto molti apprezzamenti e aiutato il mio business, ho pensato: "Se non è rotto, non aggiustarlo...".

L'epifania è arrivata un anno fa. Gli affari andavano bene, ma l'economia che rallentava mi ha fatto capire che, essendo tanto innamorata del sito per come si presentava, il mio è lo show di un unico attore. Non potevo rischiare di farlo ristagnare.

Un design per il vostro peggior cliente: voi stessi

Ridisegnare il sito web di un freelance è un esercizio di masochismo. Non ci sono colleghi con cui condividere il dolore: ci sei solo tu. In qualità di designer che ha scritto (e parla) sull'arte del self-branding, sapevo che il mio sito doveva essere semplicemente giusto. Le persone avrebbero esaminato ogni minimo aggiornamento al sito e io non volevo perdere la mia credibilità.

Quando progetto un sito per un cliente, discutiamo di scadenze e obiettivi, facciamo riunioni, si parla di budget, di limiti e vincoli. Il brand, il contenuto, l'architettura dell'informazione, l'esperienza dell'utente sono punti su cui ci si concentra sin dall'inizio. Quando ho ridisegnato il mio sito, l'unica cosa che ho davvero considerato è stata la parte relativa alle scadenze: "Il sito deve essere lanciato da questa data". Pensai di poter mettermi subito all'opera, aprire Photoshop e iniziare a giocare. Mi sbagliavo.

Iniziare il redesign

Ho aperto Photoshop e subito si è come bloccato, congelato. Non era il computer ad essersi impantanato, né il software. Ero io. Dita che giochicchiavano sul mouse e occhi fissi su una canvas di 1024x768 pixel.

Ho riempito lo schermo di colore. Ho iniziato a girare con il mouse. Non accadeva niente. Ero io. Dovevo ripensare il mio approccio.

Ricominciare il redesign

Per riprendere il filo, sono tornata al punto di partenza da cui inizio con i miei clienti, da quello che è il legame che tiene insieme ogni elemento di un business e di un sito web: il brand.

L'articolo di Cameron Moll Great Designers Realign ha evidenziato al meglio l'importanza di un design che sia ben attento al modo di pensare prevalente nel settore. Non è semplice mantenere fresco il design del nostro sito e rimanere allineati con il brand che abbiamo impiegato anni a costruire. Piuttosto che iniziare da zero, avevo bisogno di costruire il tutto poggiandomi su ciò che già avevo e rifinirlo, rafforzarlo, rinfrescare piuttosto che creare qualcosa di irriconoscibile per clienti e visitatori. Dovevo riallineare.

Iniziare dal brand

Per un anno ho combattuto con il design e il contenuto di Lealea.net nei ritagli di tempo libero. Ad ogni punto del processo mi sono sempre fermata per chiedermi: "Tutto ciò riflette chi sono e l'esperienza che voglio che gli altri abbiano quando interagiscono con me? In che modo tutto ciò influisce sul mio brand personale? Come lo riflette?".

Il mio redesign originale poggiava sul processo di scoperta del brand di cui ho parlato in The Art of Self-Branding. Quel processo mi ha chiarito come volevo essere ritratta (vitale, intelligente, appassionata), e ho confrontato ciò con il modo in cui le persone mi percepivano. Il mio nuovo sito doveva riflettere queste scelte originali e ancora valide. Immediatamente ho realizzato che il mio logo, il font dell'intestazione, il colore nelle sue varianti di rosso che era la mia firma -alcune delle mie scelte originali nel precedente design- dovevano rimanere nel nuovo sito.

Figura 2 - La stravagante "g" del font Target Book
screenshot

Ho scelto il carattere Target Book perché ha una natura duale. Inizialmente sembra come un qualunque sans-serif arrotondato, ma poi quella "g" così stravagante ti colpisce. Sta esattamente al confine tra il professionale e l'estroso, esattamente quello che con il mio brand voglio rappresentare e quello che clienti e colleghi si aspettano da me. Lo stesso fattore ha avuto un ruolo nella scelta del rosa (una decisione che spiego nei dettagli in Why Pink?). Queste scelte intendono evocare una risposta emozionale; quando le persone vedono il mio sito e poi vedono qualcosa di simile in futuro voglio che lo riconoscano come qualcosa che è di Lea.

Figura 3 - Colori
screenshot

La consistenza è l'aspetto più importante nell'espressione del brand, così questa percezione doveva essere rinforzata su tutto il sito. Mi sono assicurata che la voce del contenuto (calda, divertente) corrispondesse al design e che il testo si concentrasse più sull'aiutare i miei clienti ad avere successo che sull'esaltare me stessa, enfatizzando sempre e comunque la mia passione per il design.

Figura 4 - L'intestazione sulla home page
screenshot

Nel tempo ho ricevuto un valido feedback da amici fidati, anch'essi designer. Prima ho parlato solo con due, spingendoli a mettere da parte il loro gusto personale a favore di un'analisi obiettiva del design. Quando ho sperimentato alcune immagini scure, un amico mi ha detto: "Troppo scure, non sei tu". Quando ho scelto i fiori hanno detto: "Sì, questa sei tu". Colleghi fidati possono farti ricordare della prospettiva esterna del tuo brand: come tu vedi te stesso non è necessariamente come gli altri ti vedono.

Figura 5 - Versione troppo "scura"
screenshot

Fine prima parte.

Rappresentare al meglio le proprie capacità professionali

Lavorare sul proprio brand personale significa allinearsi con altri potenti brand. A volte le tecnologie e le tecniche usate per presentare il vostro design sono importanti come l'aspetto visuale. Ecco perché ho mantenuto (migliorandola) l'adozione di una tecnica come sIFR, ma anche di SlideShowPro ed ExpressionEngine.

Ho anche aggiornato alcune animazioni e certi effetti Javascript, come il mantenimento in posizione fissa di certi oggetti quando si scrolla la pagina o il cosiddetto 'scrolling morbido' nella navigazione degli articoli. Sono tutte cose che informano i colleghi e i clienti sul fatto che io sono aggiornata rispetto alle tendenze avanzate e agli standard del settore. I nuovi clienti puntano spesso ad une certa caratteristica del mio sito e la richiedono per il loro. I colleghi, a loro volta, chiedono come e perché ho scelto una certo una certa tecnica. Allineandomi rispetto all'uso di certe tecnologie acquisto la reputazione di esperta in quelle tecnologie, che è qualcosa sicuramente da vendere ai potenziali clienti.

Figura 6 - Portfolio con sIFR e SlideShowPro
screenshot

Rifinire i dettagli e correggere i difetti del design

Anche se il sito originale di Lealea.net ha funzionato bene per anni ero ben consapevole dei suoi difetti. L'architettura dell'informazione e il layout erano piuttosto limitati da un design ottimizzato per gli 800x600 pixel. Dovevo risolvere alcuni problemi di leggibilità. Volevo anche aggiungere qualche accattivante dettaglio a livello di design che non erano presenti nel design precedente, quasi del tutto centrato sulla tipografia. Sono dettagli che avrebbero dovuto riflettere meglio chi sono e a cosa sono attenta quando progetto siti per i clienti. Volevo che il mio portfolio fosse facile da visualizzare e da aggiornare. Infine, il vecchio design sembrava troppo simile ad uno stereotipato sito in stile Web 2.0.

Per affrontare il problema del layout ho lavorato su una griglia di 960px. Ho usato l'immagine PNG con la griglia da 960 di Cameron Moll per avere un buon punto di inizio, ma avevo la sensazione che tutto fosse troppo largo, specialmente quando ho deciso di mantenere pure un layout a due colonne. Il momento della rivelazione è arrivato quando ho realizzato che non dovevo per forza adattarmi alla sua specifica griglia, nonostante tutti i suoi vantaggi. Avevo comunque una griglia perfetta e ben proporzionata, ma più restringevo la larghezza dell'area del contenuto, più sentivo vicino ai miei desideri il design. Ciò mi ha insegnato che le le linee guida sulle griglie da 960px erano semplicemente questo: linee guida. Ecco allora la domanda: "Questo design è per me, come designer, gradevole ed è in linea con questo progetto?". Man mano che procedevo nel valutare la griglia, questa domanda diventava sempre più importante.

Figura 7 - Il vecchio design con le le linee della griglia
screenshot
Figura 8 - Il nuovo design con le le linee della griglia
screenshot

Per affrontare la questione legata alla leggibilità, ho sostituito Verdana con Trebuchet MS per il testo del corpo principale e ho aumentato le dimensioni complessive per tutti i caratteri. I serif Trebuchet sono morbidi e imitano alcuni dei titoli. È anche un carattere gradevole a dimensioni più consistenti, a differenza del Verdana. Inoltre è un font poco comune per il testo principale, diventando così per me un mezzo per differenziarmi.

Figura 9 - I diversi caratteri nella versione 1 e 2 del sito
screenshot

Poi ho trasformato il rosa in un quasi-viola per ottenere un migliore contrasto con il testo. Ho mantenuto lo schema generale dei colori e reso più profondi alcuni di questi colori perché riflettessero una qualità più matura.

Esattamente come la moda, anche il design invecchia. Ho dovuto mettere da parte il gradiente e sostituirlo con qualcosa di nuovo. Ho mantenuto il look pulito del design e fatto dei piccoli cambiamenti per migliorare la grafica e le immagini aggiungendo delle texture e lo sfondo fisso con un fiore. Ho incaricato Antony Peck di creare una caricatura del mio viso che aggiunge personalità, dando una personalità più estrosa e informale al sito, e che, soprattutto, enfatizza bene la persona a cui appartiene il sito.

Figura 10 - Un avatar personalizzato aggiunge carattere al sito
screenshot

I tocchi finali

Quando ho completato tutto il lavoro principale in Photoshop non ero ancora completamente soddisfatta. Allo stesso tempo però non vedevo l'ora di lanciare il sito. Ho allora incaricato Shaun Andrews affinché creasse le prime due pagine. Ho chiesto un aiuto esterno per due motivi:

  1. Sono stata costretta a investire del denaro, cosa che mi ha stimolato a finire il sito.
  2. Ha reso più spedito il processo: dopo che Shaun aveva completato le basi, dovevo solo mettere il resto sotto forma di codice su ExpressionEngine.

Ho lanciato la versione 2 di Lealea.net quando tutto era completo al 90%, nel gennaio del 2009, quasi un anno dopo che avevo deciso il redesign. Era tempo di chiudere la porta.

Ha avuto successo?

Il feedback dai colleghi attraverso i social media, un podcast dedicato al design e alcune gallerie di siti CSS è stato molto positivo. Ho ottenuto nuovi follower su Twitter, nuovi sottoscrittori al feed del mio blog, commenti favorevoli dai clienti e molti visitatori in più. Le richieste di preventivi sono cresciute del 150%, a conferma che il nuovo design aveva pagato.

I siti dei clienti sono bambini che diamo a genitori adottivi perché li crescano. Quando si parla del nostro sito personale, abbiamo solo noi stessi per assegnare i meriti o le colpe rispetto a come vanno le cose. Possiamo permetterci il lusso di trovare, correggere, essere ossessionati, ma è anche difficile sapere quando fermarsi. Ho saputo di aver raggiunto i miei obiettivi con il redesign quando un altro designer ha detto che non sembrava un completo distacco dal design precedente ma un'evoluzione naturale e una maturazione.

Ti consigliamo anche