Criando o portfólio da Adobe

Em novembro de 2015 eu fiz uma pequena conversa no Escola de Artes Visuais (SVA) em Nova York sobre o design do portfólio da Adobe e o design de produtos. Você pode assista a palestra aqui . Eu originalmente escrevi este artigo em preparação para a palestra, mas desde então expandi-lo para publicar aqui. O objetivo é apresentar o produto, compartilhar insights sobre o processo de design, digitalizar meu caderno de esboços e algumas especificações / designs dos bastidores. Eu espero que você ache interessante.

Uma pequena introdução.

Olá eu sou Andrew . Eu sou o designer de produto líder e diretor de criação de Portfólio da Adobe . Compartilharei com você o que eu e uma grande equipe de desenvolvedores do Behance (Adobe) estiveram trabalhando no ano passado.

O site de marketing do portfólio da Adobe

O que é o portfólio da Adobe?

Basicamente é um produto que permite que você rapidamente e simplesmente crie um site para mostrar seu trabalho e personalizá-lo para se adequar ao seu estilo e necessidades. Não é um conceito novo, existem dezenas de produtos que fazem exatamente isso. Mas o Portfolio tem algumas diferenças importantes:

• Ele foi projetado especificamente para que os criativos mostrem seu portfólio. Significa que faz o que você precisa para fazer, de forma simples e rápida.
• É GRÁTIS com todos os planos da Adobe Creative Cloud.
• Você pode acessar toda a biblioteca de fontes do Typekit, para usar em seu site.

O portfólio é sincronizado com o Behance.

O que torna o Portfolio mais original é que ele é sincronizado com o Behance. A ideia é que você crie um belo site personalizado com o Portfolio e sincronize seus projetos com o perfil do Behance. Lá você pode ganhar uma exposição inestimável para o seu trabalho em uma plataforma criativa usada por milhões de criativos e pessoas que recrutam criativos! Mas você não precisa usar o Behance se não quiser - pode usar o Portfolio por conta própria e optar por não sincronizar com o Behance. A escolha é sua.

A fotografia de Matthias Heiderich - como visto em Portfólio e Behance

Layouts responsivos.

Como qualquer construtor de sites, você precisa de um ponto de partida. Então, uma das muitas coisas que precisávamos projetar eram layouts voltados especificamente para a exibição de trabalhos criativos, para atuar como uma base que você pode facilmente personalizar e preencher com projetos.

Os layouts visam cobrir uma variedade de estilos para se adequar a diferentes campos criativos. Eles podem ser usados ​​como uma solução pronta para ser usada para rapidamente preencher seus projetos e publicar um site (em minutos) ou usar os recursos do editor para alterar a estrutura e a aparência de acordo com seu estilo.

Personalize facilmente o mesmo layout para parecer muito diferente. Apresentando fotografia por Bryce Johnson

Abaixo estão os layouts que estamos lançando. Os layouts iniciais (para o beta público e o lançamento do produto) são muito simples, concentrando-se em capas de projetos, galerias e projetos. Naturalmente, o produto crescerá para oferecer mais recursos, como imagens de capa em tela cheia, edição de HTML e CSS, integração de blogs, etc., a tempo. E à medida que os recursos se expandirem, a variedade e o número de layouts também serão escolhidos como ponto de partida.

Layouts e os criativos aos quais são nomeados depois: Lina , Serragem , Matias , Juco , Mercedes e Thomas

Escolhemos nomear os layouts depois dos criativos Behance . Nós selecionamos criativos cujo trabalho se prestou bem a um layout específico e, claro, também foi visualmente impressionante.

Devo dizer que esses layouts foram uma das últimas coisas a serem projetadas (pré-beta), mas estou levando com eles por causa deste artigo, para apresentar a você o que o produto faz, ou pelo menos, 'produto final'.

O editor.

O produto (em si) deve permitir que o usuário rapidamente e simplesmente edite seu site, usando um dos layouts acima como ponto de partida. A interface do usuário é muito mínima - ela sai do caminho e permite que você se concentre no design do seu website. Todas as mudanças que você faz acontecem ao vivo no editor.

Parece meio brega, mas eu tinha três coisas em mente ao projetar tudo da marca, site de marketing e especialmente o editor:

Deve capacitar o usuário para:

• Edite facilmente qualquer coisa que eles possam ver.
• Gerenciar e adicionar conteúdo.
• Visualize antecipadamente seu site.
• Publique e atualize um site ao vivo.

Abaixo estão alguns cenários de edição do produto (editor):

Várias telas do editor. Apresentando fotografia por Chris Burkard e design por Andrew Couldwell

O papel de um designer de produto.

Meu próprio papel como designer no Portfolio mudou drasticamente ao longo do ano, do conceito ao lançamento. À medida que um produto digital progride, o mesmo acontece com o seu papel como designer de produto. Então, para voltar ao começo:

ProSite.

Portfólio é, na verdade, a evolução de um produto Behance existente (sendo retirado) chamado ProSite. Tem 5 anos, então havia muito que poderíamos aprender com esse produto: o que funcionou bem? O que não fez?

Rede Behance.

Além disso, o que aprendemos sobre a comunidade criativa e mostrando o trabalho, através da criação, curadoria (e uso!) Da Rede Behance é inestimável na compreensão de como construir um produto como o Portfolio.

Por isso, passei uma boa parte do tempo absorvendo todo o conhecimento que o Behance adquiriu ao longo dos anos e também estudando seus projetos iniciais para a evolução do ProSite. Fazendo perguntas. Fazendo anotações Esboçando ideias.

A Rede Behance e o ProSite

Eu sempre começo com um lápis e um caderno de desenho.

Escrever e esboçar realmente me ajuda a focar e as idéias fluem de lá. Às vezes, simplesmente escrevo palavras que associo ao produto ou listo o que ele precisa fazer, só para tirar da minha cabeça. Ajuda a desorganizar a mente e focar no que é importante.

Esse trabalho de caderno de desenhos evolui naturalmente para esboços de interface do usuário. Às vezes, vou esboçar um recurso, ou um pequeno detalhe da interface do usuário, ou uma nova abordagem para a interface do usuário inteiramente. É uma maneira rápida de simplesmente e simplesmente projetar e explorar ideias. Talvez o mais importante, você não se distrai com a perfeição de pixels, fontes, cores, grades, guias, etc ... como você faz ao usar o software de computador.

Sempre há um ponto em que você sabe que tem o suficiente para dar mais um passo e começar a desenvolver essas ideias. No passado, usei o Adobe Illustrator ou o Omnigraffle para isso, em wireframe. Mas o tempo estava apertado neste projeto, então fui direto para o Photoshop.

Abaixo estão algumas digitalizações do meu caderno de esboços. Alguns dizem respeito ao produto (editor), alguns ao site e marca de marketing:

Algumas digitalizações do meu caderno de esboços

Uma imagem interessante a destacar é a última (canto inferior direito). Você pode ver que meu esboço está próximo do que eu finalmente projetei.

Concepção e prototipagem.

Todas essas idéias e projetos são informados e evoluídos por meio de conceituação, prototipagem e discussão com a equipe. É bom conversar por meio de ideias com outros designers e desenvolvedores e até mesmo com o público-alvo, quando possível. Por exemplo: Uma ideia particular veio de mim discutir um projeto (produto) inicial com um estudante de ilustração do MFA em SVA . Uma nova perspectiva sempre ajuda, especialmente para um produto dessa complexidade.

Nós estávamos trabalhando para prazos muito intensos neste projeto. Simplesmente não havia tempo para construir nenhum protótipo complexo. Mas o que eu fiz foi criar uma série de instruções em PDF usando Layer Comps no Photoshop, mostrando o movimento do cursor do mouse pela tela, demonstrando cada interação, característica e fluxo de usuário dentro do produto. Isso permitiu que os desenvolvedores (e outras partes interessadas) criticassem e / ou entendessem toda a funcionalidade e o fluxo de usuários - para que eles soubessem o que seria construído e também identificassem quaisquer falhas potenciais na interface do usuário / UX, antes da criação e do teste.

Abaixo está (um vídeo de) um exemplo dessas orientações em PDF:

Protótipo / passo a passo mostrando personalização global no editor de projeto

Detalhe no design.

Basta colocar: Tire o trabalho de adivinhação para os desenvolvedores. Sua equipe precisa entender o que precisa ser construído. Não é tarefa deles preencher os espaços em branco, torná-lo responsivo ou adivinhar o que acontece em um determinado cenário. Eu não posso exagerar o suficiente - eu experimentei tantos designers projetando e considerando 20% de um produto, e não pensando nas coisas.

Além dos passo a passo, dos fluxos de usuários e dos protótipos dos quais falei anteriormente, também gosto de criar especificações detalhadas para todos os componentes, recursos e marca da interface do usuário. Eu sinto que isso é importante quando você tem uma equipe grande, então todos estão na mesma página, com um ponto central de referência. As especificações visam cobrir todos os cenários, desde estados de rollover, a erros, estados ativos / inativos, etc ... e também cobrem valores e dimensões de px (eu até incluo CSS básico).

Quanto mais detalhes você incluir em seus projetos, menos perguntas os desenvolvedores terão e menos tempo você gastará gerenciando a compilação. Então você pode se concentrar em projetar, testar e melhorar o produto.

Além disso, o bom de reservar um tempo para criar esses 'kits de interface do usuário' é que é mais fácil atualizar o produto (design) no futuro. Não há necessidade de atualizar centenas de modelos, basta atualizar as especificações.

Abaixo estão alguns exemplos destes guias de estilo e especificações:

Marketing e marca.

Meses depois, com o produto (editor) projetado e sendo construído, concentrei minha atenção no marketing, na integração e na marca. O que é este produto? Como você começou a usá-lo? Precisava de uma voz. Uma identidade.

O nome.

Quando entrei pela primeira vez no Behance, este projeto foi chamado de “Prosite 2.0” internamente. O produto ProSite serviu o seu tempo, mas seu sucessor se transformou em um animal diferente. Além de sua conexão com o Behance, eles eram produtos muito diferentes e não tinham correlação 1: 1. Este não foi um re-design / lançamento. Estávamos construindo um novo produto empolgante e desativando o ProSite. Isso foi importante para transmitir - e isso começa com o nome.

Voltei ao caderno de rascunhos e passei por um exercício de associação de palavras para escrever tudo o que esse produto fazia e também a linguagem que todo produto similar no mercado estava usando. A progressão natural de todos estes continuou voltando ao "Portfólio". Então, depois de pensar um pouco, concluí: "Por que não ?!" Faz exatamente o que diz na lata. É um criador / editor de sites projetado especificamente para criar um portfólio. A simplicidade e ousadia do nome combinaram-se bem com o design e os valores do produto. E assim chamamos de "Portfólio", que logo se tornou "Portfólio da Adobe" para se adequar ao conjunto de produtos da Adobe.

A home page do site de marketing com uma foto de Tanya Timal

A marca.

Portfólio tem muito a sua própria identidade e personalidade. Portfólio não é um produto corporativo (por assim dizer). É um rótulo branco. É seu para fazer o seu próprio. É amigável, simples e acessível. A marca, o site de marketing, a integração, o copywriting e as mensagens durante toda a experiência do usuário (do produto) tentam transmitir isso através da linguagem usada, tipografia, grade, imagens e cores.

Outros cenários incluem mensagens lighthearted e imagens engraçadas. Projeto foto por dua - Alexander Esslinger

Design responsivo.

Voltando ao meu ponto anterior sobre detalhes em design: o design da Web, assim como o design do produto, deve ter a mesma atenção aos detalhes. Nesse caso, é claro que é importante que o site de marketing seja responsivo, mas não é tarefa dos desenvolvedores descobrir como um site responde em diferentes tamanhos de tela.

Abaixo estão alguns exemplos dos designs responsivos, entregues aos desenvolvedores para construir myportfolio.com :

Designs responsivos para o site de marketing, mostrando uma versão inicial da identidade da marca

Visualizar um estudo de caso completo do site de marketing aqui

Designs responsivos para alguns layouts, cobrindo diferentes cenários

Visualizar um estudo de caso completo dos layouts aqui

Teste do usuário.

Um produto digital deve evoluir para se adequar às pessoas que o usam, respondendo pelo comportamento do usuário, para proporcionar a melhor experiência ao usuário. Idealmente, os produtos passarão por uma fase alfa / beta (versões limitadas) antes de serem lançados para todos. Nós fizemos isso com o Portfolio. Isso nos ajudou a eliminar problemas, aprender se a UI / UX 'funcionava' e obter feedback real do usuário com a intenção de melhorar o produto. É melhor testar, aprender e refinar com um grupo de usuários limitado do que lançar para milhares / milhões de pessoas e descobrir problemas quando for tarde demais.

Teste. Aprender. Rever. Repetir.

Isso é importante no design de produtos. Você aprende muito com as pessoas que usam o produto.

Você ficará surpreso com o que descobriu:

… As pessoas nem sempre usam um produto como você esperava!

• Você aprende,
• Você melhora,
• Você iterar no produto,
• Você continua testando,
• E repita esse processo.

E honestamente, às vezes parece um pouco assim:

… Mas o produto será melhor para isso.

Em conclusão.

Se eu fosse tirar algo disso, seria:

Desacelere.

Inspire-se Entenda seu público. Fazer anotações. Esboço de idéias.

Conceito.

Trabalhe com sua equipe. Explore ideias. Pensar sobre isso.

Detalhe no design.

Alguém (mais) precisa construir o que você projeta.

Teste e melhore.

Funciona? Como pode ser melhorado? Pode sempre ser melhorado.

Aprender.

Sempre. Toda experiência em design é uma boa experiência de aprendizado.

[- Este artigo foi originalmente publicado em Medium.com , republicado com a permissão do autor -]

• ← Uber relança com uma nova identidade de marca
• Projetando as Férias →