Como você apresenta webdesign interativo?

A interatividade se torna cada vez mais presente em nosso design para a web, mas alguém encontrou uma boa maneira de apresentar a interatividade ao cliente? Eu falo principalmente sobre as pequenas animações como estas:

• Passe o mouse sobre um botão
• Um efeito na barra de navegação quando o usuário rolar,
• Um elemento no design que se move quando o usuário rola
• Uma abertura pop-up
• Uma caixa de informações que aparece quando o usuário clica / passa o mouse em um elemento
• ...

Ainda não encontrei uma maneira que realmente goste. Estou curioso sobre como vocês fazem isso.

Isso realmente depende do seu fluxo de trabalho. Atualmente, muitos web designers renunciam ao uso de qualquer software e design gráfico diretamente em seu navegador. Dessa forma, você apresenta seus designs em um navegador, onde eles acabam. Limpar um conciso.

Se você usa modelos estáticos em qualquer parte do seu fluxo de trabalho, sempre pode criar um pequeno modelo dinâmico em um navegador apenas para mostrar as partes interativas que está planejando.

A opção que eu costumo usar é apresentar elementos interativos no meu webdesign em um estágio posterior ao design visual estático. Depois que o design estático é acordado, inicio a codificação e uso um site de visualização para apresentar as partes interativas do design. Com a contribuição do cliente, esse site de visualização se desenvolve rapidamente no produto real.

Sua pergunta é por que sugiro a codificação no navegador (referência: quais são as etapas para criar um site? ). A melhor maneira de exibir interatividade em um site, aplicativo ou qualquer outra coisa é o meio em que deve ser usado. Não estou dizendo que desenvolva e entregue completamente o site. O que estou dizendo é que você pode fornecer estágios no processo de design / desenvolvimento:

• Esboço simples (desenhado à mão) em papel ou em formato PDF geralmente conhecido como brainstorming. Algumas empresas e indivíduos sérios terão uma placa de apagamento a seco de 10 x 15 cm coberta com esboços sobre como um aplicativo deve ser exibido.

• maquete codificada em preto e branco do site para teste do dispositivo e uma demonstração para o cliente, se estiver na licitação. Normalmente, uso o Bacon Ipsum (não gosto da referência de bacon " Alternativa ao Lorem Ipsum (texto fictício) para sites ") como meu conteúdo fictício e, se for necessária uma imagem, colocarei uma imagem de maquete que diz imagem.
• Se o teste do dispositivo estiver completo, passarei às interações e efeitos se eles forem especificamente solicitados no projeto.
• Adicione a cor, os gradientes e a profundidade do site.

Vou sugerir no design interativo, não cometa o erro que você encontra em muitos "temas" onde tudo é animado. Para mim, isso se torna brega e afasta o significado do site e seu conteúdo. Eu sugeriria o uso de animações em áreas-chave que precisam se destacar ou que precisam exibir mais de um conteúdo a ser entregue.

Se você está curioso para saber como hospedar isso, espero que, se você estiver criando web design, tenha seu próprio site e eu faça um subdomínio sem nenhuma aplicação.

Se a sua apresentação é um material impresso, eu pessoalmente traço uma estrutura de arame ou a proposta de design final e anoto-a com comentários e explicações. e apresento todas as interações possíveis como essa - por exemplo.

• se você tem um menu suspenso ou um mega menu na barra de navegação superior, por exemplo, processo um arquivo com a barra de navegação com um item de menu aberto.
• se houver um cenário abrindo um painel, apenas processarei todas as etapas, se necessário.
• em algum momento, anoto meu design / estrutura de arame com uma referência de URL de amostra on-line.
• qualquer elemento da página da Web aparece para o usuário como uma folha, eu o renderizo para meus designs.

mas se a sua apresentação for visual, eu faço o que eu quiser usando animação, transições, sons, vídeo ... etc. para mostrar o conceito usando um dos softwares de apresentações. e esse método vale a pena fazer. como você mostra ao cliente todas as interações possíveis de uma maneira atraente e não se preocupe em manter uma cópia do seu design em suas mãos - se você entende o que quero dizer;)

Parece haver uma tendência recente para a criação de GIFs animados de interações da interface do usuário ( uma pesquisa rápida no Dribbble revelará mais). Eu imagino que muitos deles sejam reunidos usando o After Effects. A InVision recentemente publicou um artigo descrevendo como eles fazem isso internamente.

Embora eu possa entender o apelo desses tipos de produtos (eles estão em contato, eles parecem impressionantes e são facilmente transportáveis), eles me parecem inerentemente problemático em várias frentes:

1. Eles configuram expectativas imprecisas da perspectiva do cliente - AE permite adicionar todos os tipos de efeitos visuais que podem não ser viáveis ​​quando traduzidos para CSS
2. Eles não respondem, tanto no sentido de consulta de mídia quanto no fato de o usuário não ter interação com eles. O cliente não pode realmente experimentar as ações de foco, apenas as observa passivamente.
3. Eles exigem mais trabalho - em algum momento do projeto, essas animações e interações precisam ser traduzidas para CSS. Por que investir muito tempo animando esses elementos em um meio, quando você simplesmente coloca tudo de lado e faz isso em CSS

Eu recomendo - e use - duas abordagens diferentes:

Primeiro, use prototipagem de papel para as interações de alto nível e as relações de conteúdo. Isso permite que o cliente forme um modelo mental bastante cedo no projeto. Eu sou a favor dos protótipos de papel sobre quaisquer estruturas ou kits de prototipagem pré-existentes (à la Bootstrap). Embora devam ser mínimos, acho que eles ainda têm muito impacto visual e podem distrair o cliente a pensar que é assim que o produto final será realmente . Isso é menos provável quando você está usando esboços de caneta e papel.

Para as interações mais detalhadas (que parecem com o que você está interessado), usamos blocos de estilo , uma única página simplificada que possui vários componentes diferentes. As grandes coisas sobre isso é que:

1. O cliente os visualiza no navegador, para testar a interação, ver se ela é responsiva
2. O mesmo CSS é então usado no produto / site final
3. O CSS pode ser documentado completamente durante toda a compilação, o que pode levar ao desenvolvimento de um guia de estilo.

Funciona bem para nós, podemos iterar rapidamente. Obviamente, isso depende de ter um fluxo de trabalho bastante robusto, que passamos bastante tempo desenvolvendo, mas vemos isso como um investimento contínuo, pois cada projeto subsequente fica cada vez mais rápido.

Existem diferentes aplicativos por aí para fazer exatamente isso. Existem alguns bons que são gratuitos, mas são limitados em alguns casos à funcionalidade que você pode demonstrar ao seu cliente. O Invision é incrível e gratuito, mas tem mais funcionalidade para dispositivos móveis do que para computadores. Ele permite que você envie um link para o cliente e permite que ele faça comentários e envie de volta. Uma palavra de aviso com esses caras. Verifique se o aplicativo fará tudo o que você precisa antes de mergulhar.

Existem outros aplicativos por aí que permitem a funcionalidade completa, mas você precisa pagar por eles. Vale a pena o dinheiro na minha opinião, porque você pode trabalhar com a funcionalidade antes de começar a codificar.

Usamos o Axure no trabalho antes de iniciar qualquer design ou código. Esta aplicação é uma ferramenta interativa incrível de enquadramento de fios. Você pode criar uma aplicação completa com lógica incluída. Ele permite que você construa o aplicativo / site completo antes de projetar ou codificar. Ele também tinha um botão que será iniciado no modo de demonstração, onde você poderá apresentar seu design. Este aplicativo é o favorito entre os designers de UX.

E minha recomendação final é Indesign. O Indesign permitirá que você crie uma demonstração de site de trabalho completa com seus arquivos de design. Você pode demonstrar estados de rolagem e clicar em outras páginas do seu documento.

Espero que estas ajudem. Usamos todos esses métodos no trabalho, dependendo de quanto tempo e orçamento temos para o projeto em que estamos trabalhando.

Eu prefiro construir as interações e apresentá-las no navegador. Antes de podermos mostrar isso, normalmente anotamos interações, mas não tentamos replicá-las fora do código da web. Ao tentar replicar interações fora do código da web (After Effects, GIF animado, Axure etc.), você corre o risco de projetar em torno dessa parte específica do software, em vez do código real que será usado no produto real.

Costumo usar html / css e javascript para exibir interações complexas, mas se a alteração for simples, mostro os diferentes estados nas composições de camada (e uso um ícone de cursor de tamanho grande) para exibir os diferentes estados.

1. Estado original
2. Mostrar o ícone do mouse e uma anotação, se necessário
3. Mostrar alteração de estado ...

Isso depende do que você está apresentando.

Se você estiver apresentando a animação e a experiência de baixo nível, precisará fazê-lo no meio do produto final. Qualquer outra coisa é uma aproximação ruim ou não é implementável. Você nunca apresentaria como um papel será dobrado ou como sua textura é sentida à mão ou seu aroma sutil na tela, por que você tentaria apresentar como um botão passa o mouse sobre os efeitos do papel?

Se você estiver apresentando a interação de alto nível entre os usuários e os componentes, não poderá construí-los de maneira viável sem gastar muito tempo construindo-o, portanto, você precisa se destacar. Além disso, a apresentação de alto nível feita no meio real pode dê a falsa impressão de que você está quase pronto ou que já está definido em detalhes de baixo nível que não são realmente o tópico principal da apresentação atual , que é a interação de alto nível. Uma apresentação incompleta comunicaria a visão geral de alto nível sem sobrecarregar o cliente com os detalhes.

Também é importante que, ao apresentar detalhes de animação de baixo nível, você os coloque no contexto em que são usados. Portanto, se estiver apresentando uma barra de menus, enquadre-as no restante das páginas, ao apresentar um efeito de foco, apresente-os como eles serão usados ​​em um formulário. Tome cuidado para enfatizar esses elementos contextuais, para que as pessoas possam se concentrar no ponto atual (por exemplo, silenciar suas cores, usar imagens genéricas e neutras, usar textos de lorem ipsum, etc.).

A apresentação dessas animações no meio final também permitirá que você faça um estudo de viabilidade ao mesmo tempo. Nada é pior do que prometer um design incrível que seu cliente adora no After Effects, apenas para acabar não sendo capaz de entregá-los, pois eles não são possíveis no meio.