Wireframing é uma etapa importante no design de qualquer interface de usuário, seja um site, um aplicativo ou um produto de software. Sem distrações na forma de imagens, cores, tipografia, estilos e efeitos, você pode se concentrar mais em definir sua hierarquia de conteúdo e experiência do usuário.

Fazer wireframes e prototipagem de baixa fidelidade o ajudará a testar e iterar mais cedo e com mais frequência no processo. Os wireframes de baixa fidelidade permitem que os designers trabalhem mais rapidamente e desenvolvam produtos que os usuários irão adorar.

Existem muitas ferramentas diferentes ferramentas para wireframes para escolher a partir de hoje. O que você escolher dependerá de suas preferências pessoais e estilo de fluxo de trabalho.

Como muitos designers que mudaram para o design digital Do mundo da impressão, sou um especialista em aplicativos Adobe, como Illustrator, InDesign e Photoshop. Posso usá-los de forma eficiente e intuitiva em qualquer lugar e a qualquer hora (mesmo que alguém me acorde no meio da noite e se recuse a me dar uma xícara de café).

Não surpreendentemente, esses aplicativos versáteis também se tornaram as ferramentas que uso para fazer web design e design de aplicativo visual . Portanto, para tornar meu fluxo de trabalho mais eficiente, também os uso para wireframing.

O conjunto Adobe CC de aplicativos de design pode ser usado para criar wireframes com eficiência.

Em cada projeto, geralmente começo a desenhar fazendo esboços bem toscos no papel ou na tela do meu iPad ou smartphone, se não estiver perto da mesa do escritório. Esses esboços existem para concentrar meus pensamentos no conceito escolhido; o cliente provavelmente nunca verá nenhum deles. Quando tenho certeza de que minha ideia funciona, passo para o que é wireframing. Eu geralmente uso Adobe Illustrator e InDesign combinados - Illustrator para criar a maioria dos elementos da IU e do kit InDesign para o wireframing em si.

Vou percorrer um processo passo a passo de como incorporar essas ferramentas em seu fluxo de trabalho de wireframing mais adiante neste artigo, mas antes de entrar em detalhes, deixe-me mostrar a você os pontos fortes e fracos de usar o InDesign como um ferramenta de wireframing principal.

Os prós e contras de usar o Adobe InDesign como uma ferramenta de prototipagem e estrutura de arame

Há algum tempo, o Adobe InDesign não é apenas um aplicativo de editoração eletrônica, mas também amplamente utilizado para publicação digital e criação de EPUB. Existem também vários motivos pelos quais também é uma ferramenta adequada para wireframing:

• Páginas mestras: você pode aplicar de forma rápida e consistente elementos de design globais, como navegação, cabeçalhos, rodapés, etc., usando páginas mestras. Você pode criar quantas páginas mestras precisar e, além disso, uma página mestra pode ser baseada em outra.
• Solid Grid Support - Permite criar e aplicar facilmente diferentes tipos de grades, complementando colunas, guias horizontais e verticais para criar módulos e sub-grades para maior complexidade e precisão.
• Layouts alternativos: habilite wireframes para vários dispositivos e orientações no mesmo arquivo.
• Bibliotecas CC - Gera uma biblioteca de diferentes ativos reutilizáveis, como objetos comumente usados, cores, caracteres e estilos de parágrafo. Crie ativos no InDesign, Illustrator ou Photoshop ou com o aplicativo móvel Adobe Capture, conforme sua preferência.
• Camadas - Oferece a capacidade de organizar, agrupar, mostrar / ocultar e bloquear / desbloquear objetos e conteúdo seletivamente no wireframe. Cada página em um documento do InDesign com várias páginas tem o mesmo número e ordem de camadas. Todas as alterações feitas nas camadas são refletidas em todas as páginas, como visibilidade, ordem de empilhamento ou remoção.
• Estilos e tabelas - oferece controle total sobre a aparência do seu texto, objetos e tabelas usando os estilos do InDesign. Os estilos podem ser herdados uns dos outros e fornecem a capacidade de cascatear facilmente o formato desejado em todo o documento. Criar e formatar tabelas para usar como elementos de conteúdo de wireframe ou mesmo como auxiliares de layout é muito simples.
• Integração do Typekit: em maquetes de alta fidelidade, você pode usar qualquer uma das fontes Typekit que são sincronizadas com a área de trabalho.
• Interatividade e animações: você pode usar os recursos integrados de animação e interatividade do Adobe InDesign para criar diferentes estados de elementos de design da web ou de aplicativos para prototipagem de interação. Esses recursos são usados ​​pela maioria das pessoas ao criar revistas para exportação de EPUB de layout fixo e solução de publicação digital, mas também são adequados para prototipagem.
• Opções de exportação: o InDesign pode exportar os wireframes e protótipos que você cria em uma variedade de formatos. Os PDFs interativos provavelmente serão o formato de sua escolha na maioria dos casos, mas você também pode usar o recurso Publicar Online para converter seu documento em HTML interativo, que pode ser visualizado em desktops modernos e navegadores móveis. Infelizmente, você não tem muito controle sobre a exportação usando Publish Online, e os arquivos exportados são hospedados em servidores Adobe. Você pode compartilhar o protótipo de URL com seu cliente ou incorporá-lo ao seu site. Para obter mais controle e exportar diretamente para HTML5, você pode usar a extensão in5 do Ajar Productions .

Adobe InDesign Tem muitas vantagens de ser usado como ferramenta de prototipagem e wireframe, mas também tem algumas desvantagens:

• Falta de templates e elementos de wireframe pré-definidos. Como o InDesign não se destina a ser uma ferramenta de wireframe, você deve criar e preparar modelos e ativos de objeto por conta própria. (Vou mostrar como lidar com essa etapa mais adiante neste artigo.) A boa notícia é que a maior parte desse trabalho será feito apenas uma vez e, após algumas horas de trabalho, você estará pronto para iniciar o processo de wireframe do InDesign. Além disso, existem muitos recursos e kits de wireframe que você pode baixar da Internet, então você não precisa desenhar tudo sozinho.
• Os recursos de interatividade e animação são limitados: embora você possa conectar páginas facilmente e adicionar algumas animações e interatividade, o processo às vezes pode demorar muito. Algumas das ferramentas de interação simples não são muito intuitivas. Se você não usou os recursos de interatividade do InDesign, precisará superar uma pequena curva de aprendizado antes de aplicá-los com eficiência.
• Os documentos do InDesign não podem ser exportados diretamente como arquivos PSD em camadas. Se você faz seu design visual no Adobe Photoshop e deseja ter elementos separados para construir seu design, primeiro você precisará exportar seus wireframes para PDF. Em seguida, você precisará abrir o PDF no Illustrator e exportá-lo novamente como um PSD em camadas. Pessoas que trabalham no Mac também podem usar um script gratuito escrito por Rob Day para salvar arquivos do InDesign como um PSD em camadas.

Uma boa preparação de wireframe é metade do trabalho

Comece ajustando seu ambiente de trabalho. Se você ainda não tem um espaço de trabalho salvo no Illustrator e InDesign para este tipo de trabalho, crie um. No Illustrator, comece com o espaço de trabalho da web predefinido e adapte-o ao seu gosto: feche os painéis que você não usa com frequência, certifique-se de abrir os que usará e ajuste-os para se adequar ao seu estilo de trabalho.

Quando terminar, salve o espaço de trabalho selecionando Janela> Espaço de trabalho> Novo espaço de trabalho. Faça o mesmo no InDesign usando o espaço de trabalho Publicação digital como iniciador.

Conjunto de Wireframe / Mockups / Kits de Protótipo

Um fluxo de trabalho de wireframing eficiente usando Illustrator e InDesign requer que você gaste algum tempo criando seu kit de ativos de IU como a primeira tarefa. Desde a introdução da Adobe Creative Cloud, as Bibliotecas CC são a melhor maneira de armazenar todos os componentes do seu kit de IU.

Você pode criar uma ou mais bibliotecas para wireframing e prototipagem. Por exemplo, você pode criar uma biblioteca para wireframes de sites, outra para aplicativos iOS, uma terceira para aplicativos Android e assim por diante.

Para criar uma biblioteca Adobe CC, abra o painel 'Bibliotecas' e escolha 'Criar nova biblioteca' no menu de hambúrguer do painel. Os itens que você coloca nas Bibliotecas podem ser criados e usados ​​em diferentes aplicativos de desktop ou móveis da Adobe em todos os dispositivos nos quais você se inscreve com sua ID Adobe. Isso significa que você pode iniciar o projeto em seu iPad ou iPhone, continuar em sua área de trabalho no escritório e fazer alterações de última hora em seu laptop em casa com os mesmos recursos disponíveis em todos os dispositivos.

Use as bibliotecas Adobe CC para criar kits de wireframe e recursos comuns de casa.

Se você trabalha como parte de uma equipe maior, os recursos da biblioteca podem ser compartilhados entre os membros da equipe. As bibliotecas podem conter cores, gráficos, estilos de camada (somente Photoshop) e estilos de parágrafo e caractere. Adicione recursos às bibliotecas clicando no botão correspondente na parte inferior do painel Biblioteca CC com o respectivo item selecionado. Você também pode adicionar recursos gráficos arrastando-os diretamente de sua prancheta para o painel Bibliotecas.

Os ativos nas bibliotecas são organizados por categorias. Fique com as boas práticas e renomeie cada ativo com um nome significativo. As bibliotecas são pesquisáveis ​​e encontrar um recurso digitando o início do seu nome economizará muito tempo depois, especialmente quando você tiver muitos itens diferentes em suas bibliotecas. Para alterar o nome de um ativo, clique duas vezes nele e digite um novo.

Crie um kit de componentes de wireframe

Embora o Adobe InDesign tenha algumas ferramentas básicas de desenho que são bastante semelhantes ao Illustrator, o Illustrator é uma opção muito melhor para desenhar vários elementos em seu wireframe. Como regra geral, crie todos os elementos do kit que requerem um desenho mais complexo do que as formas geométricas básicas do Illustrator. Crie elementos mais simples que contenham texto que você precisará alterar no layout, como botões simples no InDesign.

Para começar, faça uma lista de todos os elementos que você precisará no wireframe, como elementos de navegação, elementos de página incluindo imagens, quadros de vídeo e caixas de texto, ícones, avatares, elementos de formulário e todos os outros elementos da Interface. Depois de fazer sua lista, você pode acessar o Illustrator e InDesign para criar esses elementos.

Comece criando um novo documento para componentes de wireframe ou kit de maquete. Verifique se você escolheu o Perfil da Web / Dispositivo no Illustrator ou Web / Digital Publishing Intent na caixa de diálogo “Novo Documento”. Isso garante que os pixels sejam usados ​​como unidades e o modo de cor seja definido como RGB.

Faça os ativos do kit wireframe o mais simples possível, pois eles precisam fornecer dicas visuais rápidas sobre o que representam, sem serem muito detalhados. Você deve usar paletas de cores muito limitadas, de preferência alguns tons de cinza. Acentue visualmente os itens mais importantes, colorindo-os com tons mais escuros ou dando-lhes maior contraste.

Para maquetes ou protótipos de maior fidelidade , crie kits de IU com elementos mais detalhados que usam a paleta de cores respectiva de cada projeto. Para acesso fácil às paletas de cores, adicione-as às Bibliotecas CC.

Crie um kit de wireframe da Adobe.

Ativos do Adobe Illustrator em bibliotecas CC

Os itens que você adiciona às bibliotecas do Illustrator são vinculados por padrão (desde Adobe CC 2015). Isso significa que, ao modificar um ativo na biblioteca do Illustrator, as alterações são refletidas em todas as instâncias usadas. Se você deseja adicionar um ativo desvinculado ao documento, pressione a tecla opção / alt enquanto o arrasta do painel.

Bibliotecas de ativos de wireframe da Adobe CC no Adobe Illustrator

Ao usar ativos do Illustrator vinculados no InDesign, eles terão um pequeno ícone de nuvem no canto superior esquerdo quando o documento for visualizado no modo 'Normal'. Todos eles também estão listados no painel 'Links'. Se você modificar um ativo de biblioteca no Illustrator, as alterações no documento do InDesign não serão feitas automaticamente. O ícone da nuvem será substituído por um ícone de exclamação de um link modificado e você precisará atualizar esses links.

Os ativos do InDesign que você coloca em um documento do InDesign não são vinculados. Isso significa que você pode editar instâncias independentemente do original e, quando o ativo original é modificado, essas alterações não são refletidas nos ativos que já foram colocados no layout.

Um guia de estilo e biblioteca de ativos no Adobe InDesign

Lembre-se dessas propriedades ao criar wireframes: adicione ativos à biblioteca de dentro do Illustrator quando achar que eles precisarão ser modificados e atualizados globalmente ou adicione-os do InDesign quando souber que deseja modificá-los individualmente. Observe que você também pode criar gráficos no Illustrator, copiá-los / colá-los no InDesign e modificá-los, se necessário, antes de adicioná-los à biblioteca como um ativo do InDesign.

Se você esquecer qual elemento gráfico é criado com qual aplicativo, observe o lado direito de cada elemento no painel Biblioteca ao usar “Mostrar elementos como uma lista”.

Adobe InDesign: Flexibilidade com Conteúdo e Cópia

Para certificar-se de que você pode alterar facilmente a cópia e a tipografia em seus wireframes, crie contêineres de texto no InDesign. O InDesign tem um bom recurso para preencher caixas de texto com texto de espaço reservado. Quando você desenha uma caixa de texto, clique com o botão direito nela e escolha Preencher com texto de teste .

Adicione caixas de texto à Biblioteca Adobe como qualquer outro elemento gráfico - arrastando-as. Ao usar esses ativos de texto posteriormente como parte de seu design de wireframe, você pode modificar a caixa de texto, bem como seu conteúdo em seu wireframe.

Considere também fazer botões como elementos de interface do usuário no InDesign. Para criar um botão, crie um quadro de texto, digite o texto e use Objeto> Opções de quadro de texto para definir o espaço de intercalação. Ajuste a justificação vertical do texto dentro de uma caixa, escolhendo a opção desejada no menu suspenso 'Alinhar'.

Mude para a guia 'Tamanho automático' e escolha o tamanho automático apropriado (que provavelmente é apenas largura) e um ponto de referência conveniente. Se você não quiser permitir que o InDesign fragmente seu texto em mais de uma linha, marque a opção 'Sem espaçamento de linha'.

Use os recursos existentes

Existem muitos kits de prototipagem e UI do Adobe Illustrator disponíveis na Internet que você pode comprar ou mesmo baixar gratuitamente se quiser uma solução pronta. Talvez você já tenha elementos que pode extrair de seus projetos concluídos. Abra esses documentos, modifique os itens criados anteriormente conforme necessário e coloque-os em suas respectivas bibliotecas.

Se você estiver projetando para uma plataforma específica, por exemplo, um aplicativo iOS ou Android, certifique-se de ler suas diretrizes de interface com atenção e usar os recursos apropriados. Pode ser conveniente ter elementos de interface do usuário específicos para várias plataformas em seu kit.

Não fique muito focado em tentar contabilizar cada ativo ou estado futuro em suas bibliotecas antes de iniciar o processo de wireframe atual. Você pode adicionar ativos às suas bibliotecas mais tarde e construí-los conforme você avança.

Crie modelos de Wireframe do InDesign

Ainda resta mais uma etapa de preparação importante: a criação dos modelos do InDesign que você usará para criar um wireframe. Comece criando um novo documento com a intenção de publicação na web ou digital e defina os tamanhos de página apropriados para as telas para as quais você está projetando.

Modelo de wireframe do InDesign

Como é recomendado que você use algum tipo de grade para fazer o layout de seus elementos de wireframe, defina as margens e crie uma grade de coluna definindo o número desejado de colunas e espaçamento da medianiz. Você pode alterar essas configurações posteriormente em Layout> Margens e colunas com sua respectiva página-mestre (ou páginas) selecionada no painel Páginas.

Se você precisar de guias horizontais e verticais adicionais, crie-as manualmente ou faça uma grade adicional usando Layout> Criar Guias. Ao criar uma grade, é útil usar uma das ferramentas de cálculo de grade online, como Gridulator .

Você também pode criar modelos adicionais para fins de apresentação com modelos de dispositivos como uma estrutura para seus wireframes. Como um documento do InDesign pode ser vinculado a outro, você pode criar wireframes em um documento do InDesign e, a seguir, colocá-lo em outro documento para apresentações.

Embora possa parecer complicado no início, este é um fluxo de trabalho muito simples e eficaz. Manter os wireframes reais em um documento separado facilita a continuação da construção de wireframes aprovados para um design visual polido.

Outra coisa simples é criar modelos prontos para apresentação nos quais colocar wireframes, adicionar tags e comentários e ser capaz de mostrar sua melhor solução ao cliente. Ao fazer edições em um arquivo wireframe, basta atualizá-lo como qualquer outro link em um documento de apresentação e ¡ ta-daaa! Todas as mudanças estão em sua apresentação também.

No painel Camadas, você pode preparar camadas separadas para diferentes tipos de conteúdo: elementos da interface do usuário, recursos interativos, gestos, rótulos e notas. Se precisar de mais camadas para um projeto específico, você pode adicioná-las facilmente a qualquer momento durante o processo de wireframe.

Quando terminar de criar, salve seus modelos como arquivos de modelo InDesign.indt. Depois que todos os modelos de que você precisa forem salvos, você estará pronto para começar a criar wireframes com eficiência.

Construindo Wireframes

O mais importante primeiro: comece com a página mestra. Arraste todos os elementos globais que serão os mesmos em todas as telas do seu projeto da biblioteca. Se você estiver criando um site, geralmente são cabeçalhos com logotipo, navegação e rodapé. Como você pode criar mais de uma página-mestre e elas podem herdar umas das outras, você pode aproveitar as vantagens do aninhamento de páginas-mestre.

Por exemplo, dependendo do projeto, você pode criar uma página mestra para um elemento de interface do usuário, como um pop-up modal ou de caixa de diálogo e, a seguir, criar novos mestres com base no primeiro mestre, alterando apenas os elementos que devem ser diferentes.

Usando modelos mestre no Adobe InDesign

Você não pode selecionar, alterar ou excluir itens-mestre nas páginas normais do documento, a menos que clique neles enquanto pressiona Command / Control + Shift para substituir o mestre. Depois que seu elemento for substituído, você pode alterar qualquer um dos seus parâmetros ou removê-lo inteiramente do layout.

Lembre-se de que mesmo quando você substitui o item, os parâmetros que você não modificou ainda serão herdados do mestre. Por exemplo, se você substituir um elemento alterando sua cor, seu tamanho não mudará, pois ele ainda está conectado ao mestre. Além disso, se você alterá-lo na página-mestre, ele também será modificado no item que você substituiu anteriormente.

Ao inserir páginas adicionais em seu documento de wireframe, lembre-se de baseá-las em seus respectivos mestres. Se você precisar alterar o mestre para as páginas já no layout, selecione-as no painel 'Páginas', clique com o botão direito e escolha 'Aplicar mestre às páginas'. Use os recursos da biblioteca e organize-os usando os guias inteligentes e as opções de 'Alinhar' para criar os designs finais de IU para a interface do usuário.

Se você estiver criando layouts para mais de um tamanho de tela, faça layouts alternativos em Layouts> Criar layout alternativo ou no painel “Páginas”. Você pode usar regras de design líquido ao criar layouts alternativos para adotar automaticamente os elementos da página de um tamanho e orientação para outro, ou você pode controlá-los manualmente. Para aplicar e testar as Regras do Liquid Design, use a ferramenta “Página” ou abra o painel Window> Interactive> Liquid Design.

Layouts líquidos para wireframes Adobe

Adicionar interatividade

O Adobe InDesign possui vários recursos de interatividade que você pode aproveitar ao criar wireframes ou protótipos. Os recursos que você incluirá dependerão do formato final de que você precisará para seus wireframes, protótipos ou apresentações.

Se você estiver exportando como PDF, a interatividade será limitada, mas você pode pelo menos fazer os links entre as telas funcionarem usando o painel de hiperlinks para criá-los. Selecione o item que deseja comportar como link e clique no ícone 'Novo Hyperlink'. No menu suspenso 'Link' para, escolha 'Página' e insira o número da página desejada. Repita essa ação em todos os elementos que você deseja que atuem como links entre as telas.

Você também pode adicionar hiperlinks a objetos que residem em páginas mestras, o que pode economizar muito tempo. Crie links na página mestra uma vez e eles funcionarão em todas as telas do documento.

Você pode criar botões a partir de qualquer gráfico, texto, imagem ou grupo de elementos. Para criar um botão a partir de um objeto selecionado, use o painel Janela> Interativo> Botões e formulários e clique no ícone 'Converter em botão'.

Os botões podem ter diferentes estados criados para aparência normal, rollover e clique. Para adicionar rollover ou estados de botão de clique, clique neles no painel Botões e edite a aparência do botão para cada estado. Para adicionar uma ação a um botão, clique em um sinal de mais e selecione-o na lista. Observe que as ações em SWF / EPUB não funcionarão em arquivos PDF interativos.

Para criar pop-ups, escolha Mostrar / Ocultar botões e formulários. Para ocultar os botões até que a opção seja ativada, marque “Ocultar até o tiro”. Você pode incluir objetos de vários estados em um PDF interativo, mas apenas exportando-os como um arquivo SWF primeiro e, em seguida, colocando-os de volta no layout do InDesign para exportação em PDF. Esse fluxo de trabalho é tedioso e os arquivos PDF não podem ser visualizados corretamente em todos os leitores de PDF, portanto, tente evitar fazer isso, a menos que seja realmente necessário.

Se você deseja converter seu documento em um protótipo HTML usando o recurso Publicar online do InDesign CC 2015, pode usar muito mais opções interativas, como animações, objetos de vários estados e várias ações de botão, incluindo todas aquelas destinadas à exportação SWF / EPUB.

Você pode adicionar animações simples usando o painel Animação e escolhendo uma das predefinições integradas no menu suspenso e definindo suas propriedades. Um objeto pode ter apenas uma animação aplicada, mas se você precisar adicionar mais, agrupe seu objeto com uma caixa vazia e use a nova animação nesse objeto recém-criado.

Para elementos da IU que requerem a exibição de diferentes estados, crie um objeto de multiestado. Crie um objeto separado para cada estado. Os objetos podem ser um único elemento (imagem, caixa de texto, gráfico) ou um grupo de elementos diferentes. Abra o painel Janela> Interativo> Estados do objeto, selecione todos os objetos criados para o objeto de multiestado e clique no botão 'Novo' na parte inferior do painel.

Depois de criar seu objeto de multiestado, você precisará criar botões para alternar de um estado de objeto para outro. Ir para “Próximo estado” ou Ir para “Ações de estado anterior” revela o estado do objeto específico com a ação “Ir para estado”.

Se você quiser ter um quadro rolável em sua estrutura / protótipo, a maneira mais fácil de criar um é usando Caixas de rolagem universais extensão da Ajar Productions. Depois de baixar e instalar a extensão, você pode usá-la como painel do InDesign. Para um quadro com rolagem, você precisará criar conteúdo e um quadro para um contêiner.

O conteúdo rolável pode ser uma caixa de texto, uma imagem ou vários itens agrupados. Quando terminar de criar o conteúdo e a caixa de contêiner, selecione o conteúdo e Editar> Cortar. Em seguida, selecione o contêiner e cole o conteúdo usando Editar> Colar. Selecione o recipiente e, usando as caixas de rolagem universais, defina a direção de rolagem desejada.

Combinando botões, objetos de vários estados, animações e quadros com rolagem, você pode obter uma rica experiência interativa. Para testar a interatividade no InDesign, use o painel Visualização em Interatividade EPUB. Você pode visualizar uma única página ou o documento inteiro. Expanda o painel de visualização conforme necessário.

Se você ainda não usou os recursos interativos do Adobe InDesign, esteja preparado, pois há uma ligeira curva de aprendizado no início. Mas com um pouco de prática e algumas tentativas e erros, você rapidamente pegará o jeito deles.

Exportação de documentos acabados

Quando terminar de criar seus wireframes e arquivos de apresentação, tudo o que resta é mostrar suas melhores idéias ao cliente da melhor maneira possível. Para fazer isso, você deve exportar seus wireframes em um formato que seu cliente possa visualizar. Embora os arquivos do InDesign possam ser exportados em uma variedade de formatos, você provavelmente usará o PDF interativo ou o recurso Publish Online se estiver testando protótipos funcionais de baixa fidelidade ou alta fidelidade. Para salvar como um PDF interativo, escolha Adobe PDF (interativo) no menu suspenso “Formato” na caixa de diálogo “Exportar” e ajuste as propriedades conforme necessário. Não se esqueça de marcar 'Formulários e mídia' se houver elementos interativos que você deseja incluir. Os clientes podem visualizar wireframes PDF no Adobe Reader gratuito e escrever todos os seus comentários nesse mesmo arquivo.

Você também pode usar um documento PDF exportado do InDesign para criar um protótipo InVision (ou alguma outra ferramenta que suporte arquivos PDF). Se sua ferramenta de prototipagem padrão, talvez Maravilha , você não pode importar um PDF, exportar seus wireframes do InDesign como imagens JPEG ou PNG.

Para exportar um protótipo HTML interativo que pode ser visualizado em navegadores modernos em diferentes dispositivos, vá para Arquivo> Publicar online ou clique no botão 'Publicar online' na barra de aplicativos. Assim que o documento estiver pronto para publicação online e carregado, você pode copiar um URL do documento para compartilhar com as partes interessadas e iniciar o processo de revisão. Você também pode incorporar o protótipo publicado em seu site.

Uma desvantagem do recurso 'Publicar online' é que você não tem nenhum controle adicional sobre a exportação e os arquivos são sempre armazenados nos servidores da Adobe. Além disso, ainda é um recurso de visualização e você não pode ter certeza em qual direção a Adobe irá desenvolvê-lo, ou mesmo se ele será descontinuado.

Depois que sua estrutura / protótipo for exportada, é hora de você iniciar o teste, a revisão e o processo iterativo.