Progettare Adobe Portfolio

Nel novembre 2015 ho fatto un piccolo discorso al Scuola di Arti Visive (SVA) a New York sulla progettazione di Adobe Portfolio e sulla progettazione del prodotto. Puoi guarda il discorso qui . Originariamente, ho scritto questo articolo in preparazione per il discorso, ma da allora mi sono espanso per pubblicare qui. Ha lo scopo di presentare il prodotto, condividere informazioni sul processo di progettazione, scansioni dal mio album da disegno e alcune specifiche / disegni da dietro le quinte. Spero che tu lo trovi interessante.

Una piccola introduzione.

Ciao io sono Andrea . Sono il principale product designer e direttore creativo di Portfolio di Adobe . Ho intenzione di condividere con voi quello che io e un grande team di sviluppatori di Behance (Adobe) abbiamo lavorato l'anno scorso.

Il sito di marketing di Adobe Portfolio

Cos'è Adobe Portfolio?

Fondamentalmente è un prodotto che ti permette di creare rapidamente e semplicemente un sito Web per mostrare il tuo lavoro e personalizzarlo in base al tuo stile e alle tue esigenze. Non è un concetto nuovo, ci sono dozzine di prodotti là fuori che fanno proprio questo. Ma il portafoglio ha alcune differenze chiave:

• È progettato specificamente per i creativi per mostrare il proprio portfolio. Significa che fa ciò che ti serve, semplicemente e rapidamente.
• È GRATUITO con tutti i piani Adobe Creative Cloud.
• Puoi accedere a tutta la libreria di font Typekit, da utilizzare sul tuo sito web.

Il portfolio si sincronizza con Behance.

La cosa che rende il Portfolio più unico è che si sincronizza con Behance. L'idea è di creare un bellissimo sito Web personalizzato con Portfolio e sincronizzare i tuoi progetti con il tuo profilo Behance. Qui puoi ottenere un'esposizione preziosa per il tuo lavoro su una piattaforma creativa utilizzata da milioni di creativi e persone che reclutano creatività! Ma non è necessario utilizzare Behance se non si desidera: è possibile utilizzare Portfolio da solo e scegliere di non sincronizzarsi con Behance. La scelta è tua.

La fotografia di Matthias Heiderich - come visto su Portafoglio e Behance

Layout reattivi.

Come qualsiasi costruttore di siti web, è necessario un punto di partenza. Quindi, una delle tante cose che dovevamo progettare erano layout imperniati specificatamente per mostrare il lavoro creativo, per fungere da base che puoi facilmente personalizzare e popolare con i progetti.

I layout mirano a coprire una varietà di stili per adattarsi a diversi campi creativi. Possono essere utilizzati come soluzioni standard per popolare rapidamente i tuoi progetti e pubblicare un sito Web (in pochi minuti) oppure utilizzare le funzionalità dell'editor per modificare la struttura e l'aspetto in base al tuo stile.

Personalizza facilmente lo stesso layout per sembrare molto diverso. Con fotografia di Bryce Johnson

Di seguito sono riportati i layout con cui stiamo lanciando. I layout iniziali (per la beta pubblica e il lancio del prodotto) sono molto semplici, concentrandosi su coperture di progetti, gallerie e progetti. Il prodotto, ovviamente, crescerà per offrire più funzionalità come le immagini di copertina a schermo intero, l'editing HTML e CSS, l'integrazione dei blog ecc ... nel tempo. Man mano che le funzionalità si espandono, anche la varietà e il numero di layout da scegliere come punto di partenza.

Layout e le creatività a cui prendono il nome: Lina , Segatura , Matthias , juco , Mercedes e Tommaso

Abbiamo scelto di assegnare un nome ai layout dopo le creatività Behance . Abbiamo selezionato i creativi il cui lavoro si prestava bene a un particolare layout e ovviamente era anche visivamente sbalorditivo.

Devo dire che questi layout sono stati una delle ultime cose da progettare (pre-beta), ma li sto guidando per il bene di questo articolo, per farvi conoscere ciò che fa il prodotto, o almeno, il suo 'prodotto finale'.

L'editore.

Il prodotto (stesso) deve consentire all'utente di modificare rapidamente e semplicemente il proprio sito Web, utilizzando uno dei layout sopra indicati come punto di partenza. L'interfaccia utente è davvero minima: ti toglie di mezzo e ti consente di concentrarti sulla progettazione del tuo sito web. Tutte le modifiche che apporti avvengono in diretta nell'editor.

Sembra un po 'banale, ma avevo in mente tre cose mentre progettavo tutto dal marchio, dal sito di marketing e in particolare dall'editor:

Dovrebbe consentire all'utente di:

• Modifica facilmente tutto ciò che possono vedere.
• Gestisci e aggiungi contenuti.
• Guarda in anteprima il loro sito web.
• Pubblica e aggiorna un sito web dal vivo.

Di seguito sono riportati una serie di scenari di modifica dal prodotto (editor):

Varie schermate dall'editor. Con fotografia di Chris Burkard e il design di Andrew Couldwell

Il ruolo di un designer di prodotti.

Il mio ruolo di designer sul Portfolio è cambiato in modo drammatico durante l'anno, dal concept al lancio. Come un prodotto digitale progredisce, anche il tuo ruolo di designer di prodotto. Quindi, torniamo all'inizio:

Prosite.

Portfolio è in realtà l'evoluzione di un prodotto Behance esistente (in pensione) chiamato ProSite. Ha 5 anni, quindi c'era molto da imparare da quel prodotto: che cosa ha funzionato bene? Cosa non ha?

Behance Network.

Inoltre, ciò che abbiamo appreso sulla comunità creativa e sul lavoro di presentazione, attraverso la progettazione, la cura (e l'uso!) Della rete Behance è inestimabile per capire come costruire un prodotto come Portfolio.

Così ho trascorso molto tempo ad assorbire tutte le conoscenze acquisite da Behance nel corso degli anni, e anche a studiare i loro progetti iniziali per l'evoluzione di ProSite. Fare domande. Prendere appunti Schizzi idee

La rete Behance e ProSite

Inizio sempre con una matita e un album da disegno.

Scrivere e disegnare mi aiuta davvero a concentrarmi e le idee fluiscono da lì. A volte scrivo semplicemente parole che associo al prodotto, o elenco ciò che deve fare, solo per togliermelo dalla testa. Aiuta a disordinare la mente ea concentrarsi su ciò che è importante.

Questo sketchbook funziona naturalmente evolversi in schizzi dell'interfaccia utente. A volte traccio una funzionalità o un piccolo dettaglio dell'interfaccia utente o un nuovo approccio all'interfaccia utente interamente. È un modo rapido di progettare e esplorare idee in modo semplice e semplice. Forse la cosa più importante è che non ti distrai dalla perfezione dei pixel, dai caratteri, dai colori, dalle griglie, dalle guide ecc ... come fai quando usi un software per computer.

C'è sempre un punto in cui sai di averne abbastanza da fare un passo in più, e in effetti inizia a rimpolpare queste idee. In passato ho usato Adobe Illustrator o Omnigraffle per questo, per wireframe. Ma il tempo era stretto in questo progetto, quindi sono andato direttamente in Photoshop.

Di seguito sono riportate alcune scansioni dal mio album da disegno. Alcuni riguardano il prodotto (editor), alcuni il sito di marketing e il marchio:

Alcune scansioni dal mio album da disegno

Un'immagine interessante da evidenziare sopra è l'ultima (in basso a destra). Puoi vedere che il mio schizzo è vicino a ciò che alla fine ho progettato.

Ideazione e prototipazione.

Tutte queste idee e progetti sono informati e evoluti attraverso l'ideazione, la prototipazione e la discussione con il team. È buona norma chattare con gli altri designer e sviluppatori e persino con il pubblico di riferimento quando possibile. Ad esempio: una mia idea particolare è venuta da me discutendo di un progetto (di prodotto) precoce con uno studente di illustrazione MFA presso SVA . Una nuova prospettiva aiuta sempre, soprattutto per un prodotto di questa complessità.

Stavamo lavorando a tempistiche piuttosto intense su questo progetto. Semplicemente non era il momento di costruire prototipi complessi. Ma quello che ho fatto è stato creare una serie di procedure dettagliate in PDF utilizzando i livelli comp. In Photoshop, mostrando il movimento del cursore del mouse sullo schermo, dimostrando ogni interazione, funzionalità e flusso di utenti all'interno del prodotto. Questi hanno consentito agli sviluppatori (e agli altri stakeholder) di criticare e / o comprendere tutte le funzionalità e il flusso dell'utente, in modo che sapessero cosa doveva essere costruito e anche identificare eventuali potenziali difetti nell'interfaccia utente / UX, prima della creazione e del test.

Di seguito è riportato (un video di) un esempio di queste procedure dettagliate in PDF:

Prototype / walkthrough che mostra la personalizzazione globale nell'editor di progetto

Dettaglio nel design.

In poche parole: prendi le congetture per gli sviluppatori. Il tuo team deve capire cosa deve essere costruito. Non è compito loro riempire gli spazi vuoti, renderli reattivi, o indovinare cosa succede in ogni scenario. Non posso esagerare abbastanza - ho sperimentato così tanti designer che progettano e considerano il 20% di un prodotto, e non pensano a cose.

Oltre alle procedure dettagliate, ai flussi utente e ai prototipi di cui ho parlato in precedenza, mi piace anche creare specifiche dettagliate per tutti i componenti, le caratteristiche e il marchio dell'interfaccia utente. Ritengo che siano importanti quando hai una grande squadra, quindi tutti sono sulla stessa pagina, con un punto (i) centrale di riferimento. Le specifiche mirano a coprire tutti gli scenari, dagli stati di rollover, agli errori, agli stati attivi / inattivi ecc ..., e coprono anche i valori e le dimensioni di px (vado persino a includere i CSS di base).

Più dettagli includi nei tuoi progetti, meno domande avranno gli sviluppatori e meno tempo dedichi a gestire la build. Quindi puoi concentrarti sulla progettazione, testare e migliorare il prodotto.

Inoltre, il bello di prendersi il tempo per creare questi "kit di interfaccia utente" è che è più facile aggiornare il prodotto (design) in futuro. Non è necessario aggiornare centinaia di mockup, basta aggiornare le specifiche.

Di seguito sono riportati alcuni esempi di questi styleguides e specifiche:

Marketing e marchio.

Mesi in questo momento, con il prodotto (editor) progettato e in fase di realizzazione, ho focalizzato la mia attenzione sul marketing, l'onboarding e il marchio. Cos'è questo prodotto? Come si inizia a usarlo? Aveva bisogno di una voce. Un'identità.

Il nome.

Quando sono entrato a far parte di Behance, questo progetto è stato chiamato scherzosamente "Prosite 2.0" internamente. Il prodotto ProSite ha servito il suo tempo, ma il suo successore era cresciuto in una bestia diversa. Oltre alla loro connessione con Behance, erano prodotti molto diversi e non avevano una correlazione 1: 1. Questo non era un re-design / lancio. Stavamo creando un nuovo entusiasmante prodotto da zero e ritirando ProSite. Era importante da trasmettere - e questo inizia con il nome.

Sono tornato al mio quaderno degli schizzi e ho seguito un esercizio di associazione di parole per scrivere tutto ciò che questo prodotto ha fatto, e anche quale linguaggio utilizzava ogni prodotto simile sul mercato. La progressione naturale di tutti questi ha continuato a tornare a "Portfolio". Così, dopo un po 'di riflessione, ho concluso: "Perché no ?!" - fa esattamente quello che dice sulla latta. È un creatore / editor di siti web progettato specificamente per creare un portfolio. La semplicità e l'audacia del nome si sposano bene con il design e i valori del prodotto. E così l'abbiamo chiamato 'Portfolio', che presto divenne 'Adobe Portfolio' per adattarsi alla suite di prodotti Adobe.

La home page del sito di marketing con una foto di Tanya Timal

La marca.

Portfolio ha molto la sua identità e personalità. Il portafoglio non è un prodotto aziendale (per così dire). È un'etichetta bianca. È tuo, per crearne uno tuo. È amichevole, semplice e accessibile. Il marchio, il sito di marketing, l'onboarding, il copywriting e la messaggistica in tutto l'esperienza utente (del prodotto) cercano di trasmetterlo attraverso il linguaggio utilizzato, la tipografia, la griglia, le immagini e i colori.

Altri scenari includono messaggistica spensierata e immagini umoristiche. Foto del progetto di dua - Alexander Esslinger

Design reattivo.

Tornando al mio precedente punto sui dettagli del design: il web design, proprio come il design del prodotto, dovrebbe avere la stessa attenzione ai dettagli. In questo caso, è ovviamente importante che il sito di marketing sia reattivo, ma non è compito degli sviluppatori capire come un sito web risponde a schermi di dimensioni diverse.

Di seguito sono riportati alcuni esempi di design reattivi, consegnati agli sviluppatori per la realizzazione myportfolio.com :

Disegni reattivi per il sito di marketing, che mostrano una versione anticipata dell'identità del marchio

Visualizza a studio completo del sito di marketing qui

Disegni reattivi per un paio di layout, che coprono diversi scenari

Visualizza a qui il case study completo dei layout

Test utente

Un prodotto digitale dovrebbe evolversi per soddisfare le persone che lo utilizzano, tenendo conto del comportamento degli utenti, per offrire la migliore esperienza utente. Idealmente, i prodotti passeranno attraverso una fase alpha / beta (versioni limitate) prima di essere lanciati a tutti. Lo abbiamo fatto con Portfolio. Questo ci ha aiutato a risolvere i problemi, a capire se l'UI / UX "funzionava" e ottenere un feedback da parte degli utenti reali con l'intenzione di migliorare il prodotto. È meglio testare, apprendere e perfezionare con un gruppo di utenti limitato, anziché lanciare a migliaia / milioni di persone e scoprire problemi quando è troppo tardi.

Test. Imparare. Rivedere. Ripetere.

Questo è importante nella progettazione del prodotto. Impari così tanto dalle persone che usano il prodotto.

Rimarrai sorpreso da ciò che scopri:

... Le persone non usano sempre un prodotto come avevate previsto!

• Tu impari,
• Migliora,
• Si itera sul prodotto,
• Continui a provare,
• E ripeti questo processo.

E onestamente, a volte sembra un po 'come questo:

... Ma il prodotto sarà migliore per questo.

In conclusione.

Se dovessi prendere qualcosa da questo sarebbe:

Rallenta.

Lasciati ispirare. Capisci il tuo pubblico. Prendere appunti. Idee schizzo

Concetto.

Lavora con la tua squadra. Esplora le idee. Pensaci.

Dettaglio nel design.

Qualcun altro (altrimenti) ha bisogno di costruire ciò che si progetta.

Testare e migliorare

Funziona? Come può essere migliorato? Può sempre essere migliorato.

Imparare.

Sempre. Ogni esperienza nel design è una buona esperienza di apprendimento.

[- Questo articolo è stato originariamente pubblicato su Medium.com , ripubblicato con il permesso dell'autore -]

• ← Uber si rilancia con una nuova identità di marchio
• Progettare le vacanze →