Sabia que Adobe CC (Creative Cloud) faz wireframes?

Tradução e adaptação: Wallace Vianna, designer

toptal-fig-ivana
AutoraIvana Miličić, designer freelance, Croácia, membro TopTal desde 2015
Artigo original: TopTal

Wireframe é um passo importante na criação de qualquer interface de usuário em um website, aplicativo ou software.  Evitando se deixar levar pelas formas dos recursos visuais, cores, tipografia, estilos e efeitos você pode fazer mais foco na hierarquia do conteúdo e experiência do usuário.

Fazer protótipos e wireframes de baixa fidelidade irá ajudá-lo a testar e interagir mais nas fases anteriores, a trabalhar mais rápido e desenvolver produtos que os usuários vão adorar.

Há muitas ferramentas de wireframes diferentes para escolher no mercado.  Qual você escolherá depende de suas preferências pessoais e estilo de fluxo de trabalho.

Assim como um monte de designers migraram do mundo de impresso para o design digital, eu sou uma especialista nas aplicações da Adobe como o Illustrator, InDesign e Photoshop.  Posso usá-los de forma eficiente, em todos os lugares e em qualquer momento (mesmo se tenho de acordar para trabalhar no meio da noite, sem uma xícara de café :^D).  No entanto, estas ferramentas tornaram-se também as que eu uso para fazer web e aplicações de design visual (1).  Assim, para o meu fluxo de trabalho para ser o mais eficiente, eu as uso para fazer wireframes também.

(1) Nota do tradutor: link original, aqui

toptal-fig-1 FIGURA 1

Eu costumo iniciar o trabalho de cada projeto  fazendo rascunhos muito simples no papel, ou, agora com mais frequência, se não estou perto da minha mesa de trabalho, na tela do meu iPad ou smartphone. Estes esboços estão lá apenas para registrar minhas idéias a respeito do conceito escolhido e os clientes provavelmente nunca vão ver qualquer um deles.  Quando me sinto confiante o suficiente de que a minha ideia funciona, pulo imediatamente para o wireframe.  Eu costumo usar o Adobe Illustrator e InDesign juntos.  Illustrator para criar a maioria dos ativos/elementos do kit de interface do usuário e InDesign para o wireframe em si.

Neste artigo, vou explicar passo a passo um processo de como incorporar essas ferramentas ao seu wireframe e fluxo de trabalho.  Mas, antes de eu entrar em detalhes, deixe-me mostrar-lhe o que os pontos fortes e fracos do uso do InDesign como uma inicial ferramenta de wireframe.

Adobe InDesign é uma aplicação de editoração eletrônica, mas também de publicação digital, criação de EPUB e wireframe.

 Os prós e contras de usar Adobe InDesign como um Wireframe e ferramenta de prototipagem

Há já algum tempo Adobe InDesign tem sido não só uma aplicação de desktop publishing/editoração eletrônica, mas também é amplamente utilizado para a publicação digital e criação de EPUB, e há também algumas razões por que é uma ferramenta adequada para wireframe também:

  • Páginas mestras – Você pode aplicar rápida e consistentemente ativos/elementos gerais de design como navegação, cabeçalhos, rodapés e assim por diante. Você pode criar quantas páginas mestras precisar, e a partir delas, uma mestra pode basear-se em outra.
  • Consistente suporte à grades – Permite você facilmente criar e aplicar diferentes tipos de grids/grades, complementando colunas, guias horizontais e verticais para criar módulos e subgrids de maior complexidade e precisão.
  • Layouts alternativos – Permite wireframes para vários dispositivos e orientações num mesmo arquivo.
  • Bibliotecas CC – Fácil acesso e reutilização de ativos/elementos diferentes (objetos frequentemente utilizados) como cores, estilos de caracteres e parágrafos. Crie ativos no InDesign, Illustrator, Photoshop ou com o Adobe Capture mobile app, o que você preferir.
  • Camadas – Capacidade de organizar, agrupar, exibir/ocultar e des/bloquear objetos e conteúdo seletivamente no wireframe. Cada página de um documento multi-página do InDesign tem o mesmo número e ordem das camadas. Todas as alterações feitas nas camadas são refletidas em todas as páginas, como a visibilidade, a ordem ou a exclusão de empilhamento.
  • Estilos e tabelas – Tenha o controle completo sobre a aparência do seu texto, objetos e área de trabalho através do uso de estilos do InDesign. Estilos podem basear-se em outros proporcionando facilmente a capacidade de formatação em cascata desejada, em todo o documento. Criar e formatação de tabelas que você pode usar como ativos/elementos de conteúdo principais em wireframe ou elementos secundários para fins de layout é muito simples.
  • Integração com Typekit – Em mock-ups/protótipos de alta fidelidade, você pode usar qualquer uma das fontes Typekit que sincronizam com o seu desktop/área de trabaho.
  • Interatividade e animações – Você pode usar recursos internos de interatividade e animação do Adobe InDesign para criar diferentes estados em ativos/elementos de página da web (botões) ou em aplicativos para design de interação (protótipos ou wireframes funcionais). A maioria das pessoas usam esses recursos ao criar revistas para Publicação Digital e EPUB de layout fixo, mas eles podem ser adequados para prototipagem também.
  • Opções de exportação – InDesign pode exportar os wireframes e protótipos criados em uma variedade de formatos.  O seu formato de escolha na maioria dos casos, será provavelmente PDF interativo, mas você também pode usar bastante a publicação de recursos on-line para converter o documento para HTML interativo que pode ser visto em ambiente de trabalho moderno e navegadores móveis. Infelizmente, você não tem nenhum controle sobre a exportação utilizando “publicar on-line” e o arquivo exportado será hospedado em servidores da Adobe.  Você pode compartilhar a URL do protótipo com seus clientes, ou incorporá-lo em seu site.  Para obter mais controle e exportação direta para HTML5, você pode usar a extensão IN5 da Ajar Productions.

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

  • Falta de modelos e elementos de wireframe pré-definidos – Uma vez que o InDesign não pretende ser uma ferramenta wireframe, você tem que criar e preparar modelos e objetos de página por si mesmo. (Eu vou te mostrar como fazer essa etapa de preparação, mais adiante neste artigo). A boa notícia é que a maior parte deste trabalho será feito apenas uma vez e depois de algumas horas de trabalho que você estará pronto para dar a largada no design de wireframes. Além disso, há uma série de elementos e kits de wirerame que você pode baixar da internet, por isso não há necessidade de desenhar tudo sozinho.
  • Recursos de interatividade animação são limitados e podem ser lentos – Embora você possa facilmente linkar/vincular páginas e adicionar alguma interatividade e animações este processo às vezes leva um longo tempo. Algumas interações simples não podem ser feitas de forma simples, e você tem que descobrir como fazê-las. Se você ainda não tiver usado os recursos de interatividade do InDesign, você vai ter de passar por uma curva de aprendizagem antes de você ser capaz de aplicá-los de forma eficiente.
  • Documentos do InDesign não exportam arquivos PSD diretamente em camadas – Se você faz o seu design visual no Adobe Photoshop e quer ter os elementos de wireframe em separado para construir seu projeto, então você tem que exportar seus wireframes para PDF em primeiro lugar, em seguida, abrir o PDF no Illustrator e exportar como PSD em camadas. As pessoas que trabalham no Mac também podem usar um script livre escrito por Rob Day  para salvar arquivos do InDesign como um PSD em camadas.

 

Boa preparação do Wireframe é meio caminho andado

Comece por afinar seu ambiente de trabalho.  Se você ainda não tem um Workspace/Espaço de trabalho salvo no Illustrator e InDesign para este tipo de trabalho, crie um.  No Illustrator comece com Espaço de trabalho Web Predefinido e adapte-o para sua conveniência: feche os painéis que não vai usar muitas vezes e abra os que você irá usar, em seguida, reorganize-os para se adequar ao seu estilo de trabalho.  Quando terminar, salve o espaço de trabalho, escolhendo Janela > Área de Trabalho > Nova Área de Trabalho… Faça a mesma coisa no InDesign usando Digital Publishing Workspace para começar.

Criando modelos de wireframe no InDesign

toptal-fig-5 FIGURA 2

Há um passo importante que você também precisa saber: crie modelos do InDesign para fazer wireframes.  Comece por criar um novo documento do tipo Web ou Digital Publishing Intent e defina o tamanho de página apropriado para as telas que você está projetando.  Desde já recomenda-se que você use algum tipo de grade para colocar seus elementos de wireframe: configure as margens e crie grade de colunas, definindo número de colunas e o espaço entre elas.  Você pode alterar essas configurações depois em Layout > Margens e colunas com a respectiva página principal (ou páginas) selecionados no painel Páginas.  Se você precisar de guias horizontais e verticais guias complementares, crie-as manualmente ou faça grade adicional usando Layout > Criar guias… Ao criar grades você pode pegar ajuda com uma das ferramentas calculadoras de grade on-line como o Gridulator .

No painel Camadas, você pode preparar camadas separadas para diferentes tipos de conteúdo: elementos de interface do usuário, recursos interativos, gestos, etiquetas ou notas.  Se você vai precisar de mais camadas para um projeto específico, você será capaz de adicioná-los facilmente a qualquer momento durante o processo de wirefram

Quando a criação do modelo estiver terminada, salve seus modelos como arquivos .indt (modelo InDesign).  Neste ponto você está finalmente pronto(a) para começar com wireframing eficiente.

Construindo Wireframes

Em primeiro lugar – comece criando a página mestra.  Arraste todos os elementos que serão iguais em todas as telas de seu projeto de biblioteca.  Se você está projetando website eles geralmente terão cabeçalhos com um logotipo, barra de navegação e rodapé.  Uma vez que você pode fazer mais de uma página mestre e elas podem basear-se umas nas outras não se esqueça de tirar proveito desse recurso.  Por exemplo, dependendo do projeto, você pode criar uma página mestre para uma categoria do seu website, em seguida, fazer novas Mestras com base na primeira e mudar neles apenas os únicos elementos que precisam ser diferentes para outras categorias.

toptal-fig-6 FIGURA 3

Uma vez que seu elemento é modificado você pode alterar qualquer dos seus parâmetros ou completamente excluí-lo do layout.  Tenha em mente que, quando você altera o elemento, os parâmetros que você não alterou ainda são vinculados do elemento Mestre.  Por exemplo, se você substituir um elemento e alterar a sua cor, o tamanho ainda está conectado ao mestre e se você alterá-lo na página mestre também será modificado na página do documento.  Ao inserir páginas adicionais no documento de wireframe lembre-se de baseá-las no respectivo mestre.  Se você precisar alterar a página mestre de páginas já feitas, selecione as páginas no painel Páginas, faça um clique direito e escolha Aplicar Página-Mestre para Páginas… Quando tiver terminado com as Mestras, vá para todas as telas de seu projeto.  Use itens da Biblioteca e organize-as usando as guias inteligentes e opções Alinhar para criar o layout final do seu wireframe de UI (Interface de Usuário, na tradução).

Observação:
• Não é possível selecionar, alterar ou excluir elementos-mestre em páginas de documentos, a menos que você clique sobre eles, segurando as teclas Command / Control + Shift para desvincular da página mestre.
• Se for fazer uma página mestre a partir de outra, os elementos da página-mestre original ficarão por trás (como plano de fundo) em sua nova página-mestra. 

Se você está fazendo design para mais de um tamanho de tela, faça layouts alternativos no menu Layouts > Criar layout alternativo (ou no painel Páginas).  Você pode usar regras de layout líquido quando criar layouts alternativos para mudar, de forma automática, semi-automática ou manual, elementos de página de um tamanho e orientação para outro.  Para a aplicar e testar regras de layout líquidos use a ferramenta de página ou abra o painel: menu Janela > Interativo > Layout Líquido.

toptal-fig-7FIGURA 4

As bibliotecas Adobe podem conter, além de elementos de wireframes (como botões de formulário), cores, gráficos, estilos de camada, estilos de parágrafo e de caracteres.

Montagem de wireframe/kits de Prototipo/Maquete

libraries-adobe-ccFigura: helpx.Adobe.com

Para ter um eficiente fluxo de trabalho em wireframes usando Illustrator e InDesign requer, em primeiro lugar, que você invista algum tempo fazendo o seu kit de elementos de interface do usuário.  Desde a introdução do Adobe Creative Cloud, as Bibliotecas CC são a melhor maneira para armazenar todos os seus componentes/kits de interface do usuário.

Você pode criar uma ou mais bibliotecas para fins de wireframes e protótipos.  Por exemplo, você pode criar uma biblioteca para wireframes de sites, outra para aplicação iOS, uma terceira para aplicações Android e assim por diante.

Para criar uma biblioteca vá ao menu File/Arquivo > Novo > Biblioteca.  Ativos que você coloca em bibliotecas podem ser feitas e usadas em diferentes aplicativos Adobe de mesa ou móveis com o seu Adobe ID.  Isso significa que você pode começar com o projeto em seu iPad ou iPhone, continuar no computador de mesa no escritório ou fazer alterações de última hora no portátil em casa.  Se você trabalhar em uma equipe maior, recursos da biblioteca podem ser compartilhados entre os membros da equipe e você pode colaborar com eles.  As bibliotecas podem conter cores, gráficos, estilos de camada (Photoshop somente), estilos de parágrafo e de caracteres.  Você pode adicionar ativos na biblioteca selecionando o respectivo ativo e clicando no botão correspondente, na parte inferior do painel Biblioteca CC. Você também pode adicionar recursos gráficos, arrastando-os diretamente de sua prancheta Adobe para o painel Bibliotecas.  Ativos em bibliotecas são organizados por categorias.  Para ficar com boas práticas, dê a cada ativo um nome significativo.  Bibliotecas são pesquisáveis, e encontrar um ativo apenas digitando o começo do nome vai poupar toneladas de tempo, especialmente quando você tem muitos itens diferentes em bibliotecas.  Você pode pesquisar somente a biblioteca atual ou todas as bibliotecas criadas.  Para alterar o nome de ativos basta clicar duas vezes sobre ele e digitar um novo.

 Criando Kits de Componentes

Embora o Adobe InDesign tenha algumas ferramentas básicas de desenho que são bastante semelhantes ao Illustrator, o Illustrator é uma escolha muito melhor para desenhar diferentes tipos de elementos para seu wireframe (2).  Como regra geral, faça todos os elementos do kit (que solicitam algum desenho mais complexo) em Illustrator e faça elementos mais simples, que contêm texto que você possa alterar direto no layout, como botões simples, no InDesign.

(2) Nota do tradutor: eu acho mais prático usar um único programa para finalizar um projeto pois haverão muitas situações – revisão, por exemplo – em que você não terá todos os seus programas favoritos, na versão desejada, para esse fim. Ter também versão de seu projeto em Indesign em formato multi-versão (*.IDML), ou artes do illustrator em formato suportado por mais de um aplicativo (*.WMF, *.SVG – Windows e Internet) é algo útil, nesse sentido.

Para começar, faça uma lista de todos os elementos da wireframe que você precisa (elementos de navegação e 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).  Após terminar a sua lista, vá ao Illustrator e InDesign para a criar os elementos.  Comece por criar um novo documento para componentes de wireframe ou kit de maquete.  Verifique se você escolheu na caixa de diálogo Novo documento qualquer perfil Web/Devices no Illustrator ou Web/Digital Publishing Intent, de modo que pixels sejam usados como unidades de medida e modo de cor RGB.

Faça ativos do kit wireframe tão simples quanto possível, porque eles precisam dar dicas visuais rápidas do que eles representam, sem serem muito detalhados.  Você deve usar paletas de cores muito limitadas, de preferência em tons de cinza.  Visualmente destaque os elementos que mais importantes, colorindo-os com tons mais escuros, ou dando-lhes maior contraste.  Para protótipos de maior fidelidade ou maquetes, você vai criar kits para interface do usuário com elementos mais detalhados que usam a respectiva paleta de cores do projeto.  Para facilitar o acesso às paletas de cores adicione-as às Bibliotecas CC também.

toptal-fig-2FIGURA 5

Os ativos são vinculados à biblioteca de wireframe – um ativo modificado se atualiza automaticamente no projeto. Mas você pode usar ativos desvinculados também.

Ativos do Adobe Illustrator em bibliotecas CC

Ativos adicionados às bibliotecas do Illustrator estão, por padrão, ligados (desde Adobe CC 2015).  Isso significa que quando você modificar uma propriedade de biblioteca no Illustrator, as alterações são refletidas em todas as instâncias (arquivos e páginas) usadas.  Se você quiser adicionar ativos não vinculados/conectados em seu projeto, segure a tecla Option / Alt enquanto arrasta o ativo da biblioteca.

toptal-fig-3FIGURA 6

Quando você usa vinculado ativos do Illustrator no InDesign eles têm um pequeno ícone “da nuvem” (Adobe Cloud) no canto superior esquerdo, quando o documento é exibido no modo normal e eles estão listados no painel Link/Vínculos.  Se você modificar um item da Biblioteca no Illustrator, atualizações no documento do InDesign não serão feitas automaticamente.  O “ícone da nuvem” será substituído por um ícone de exclamação, e você vai ter que atualizar esses links.

Importante: ativos do InDesign que você coloca em documento do InDesign não estão vinculados às bibliotecas Adobe Cloud. Isso significa que você pode editar instâncias (no InDesign) independentemente do original, e quando o ativo original for modificado (na nuvem) essas alterações não são refletidas nos ativos que você já tem no seu layout do InDesign.

toptal-fig-4FIGURA 7

Use essas propriedades em seu favor, ao criar wireframes : adicione recursos à Biblioteca do Illustrator quando você presumir que ele precisa para ser modificado/atualizado globalmente; adicione-os a partir do InDesign quando você sabe que vai querer modificá-los individualmente.

Observação: Você também pode criar gráficos no Illustrator e depois copiar / colar no InDesign;  em seguida, basta adicioná-lo à biblioteca como ativo InDesign.

Se acontecer de você esquecer em qual aplicativo o ativo gráfico foi criado, olhe no lado direito de cada item no painel Biblioteca, usando Show Items/Mostrar itens em modo de lista de visualização.

Adobe InDesign: Flexibilidade com textos

InDesign tem um bom recurso para encher caixas de texto com o texto do espaço reservado.  Quando você desenhar a caixa de texto apenas clique com o botão direito do mouse sobre ele e escolha Preencher com texto de espaço reservado.

Considere fazer elementos botão de interface do usuário no InDesign também.  Para criar um botão, faça moldura de texto em primeiro lugar, digite o texto respectivo nele e, em seguida, vá ao menu Objeto > Opções do quadro de texto para definir o espaçamento em torno do texto.  Ajuste Justificação vertical do texto dentro de uma caixa, escolhendo a opção desejada a partir do menu drop-down/de lista Align/Alinhar.  Alterne para a guia Auto-Size/Autodimensionar e escolha o autodimensionamento apropriado (p. ex., Largura Somente), e ponto de referência conveniente.  Se você não quiser que o InDesign quebre o seu texto em mais de uma linha de marque a opção Sem quebras de linha.

Dê uma mão a si mesmo

Há um monte de wireframes e protótipos de kits de Interface de Usuário do Adobe Illustrator disponíveis na internet para você comprar ou até mesmo baixar de graça se quiser agilizar a sua fase de preparação de wireframe. Talvez você já tenha muitos desses elementos desenhados que você pode pegar de seus projetos antigos.  Abra esses documentos, ajuste quaisquer elementos previamente feitos, se necessário, e coloque-os nas respectivas bibliotecas.

Se você está projetando para uma plataforma específica, por exemplo iOS ou um aplicativo Android certifique-se de ler cuidadosamente as diretrizes de interface de usuário e use os ativos apropriados.  Não ache que todos os ativos possíveis têm de estar em suas bibliotecas antes de começar com o processo de wireframe, porque você também pode adicionar recursos para as bibliotecas mais tarde, durante o trabalho.

Adicionando interatividade

Adobe InDesign tem um monte de recursos de interatividade que você pode aproveitar ao criar wireframes ou protótipos.  Quais as características que você vai incluir depende do formato final você pretende salvar seus wireframes, protótipos ou apresentação.  Se for exportar como PDF, a interatividade é limitada, mas pelo menos você pode fazer links/ligações entre telas.  Use o painel de hiperlinks para criá-los.  Selecione o item que deseja aplicar como um link e clique no ícone Novo hiperlink.  No menu suspenso Link To/ Ligar a escolha Página e digite o número da página desejada.  Repita essa ação em todos os itens que você deseja criar ligações entre as telas.

Dica: Você também pode adicionar hiperlinks para objetos que residem nas páginas mestre, o que pode ser um verdadeiro poupador de tempo: criar links na página mestre uma vez e eles vão trabalhar em todas as telas de seu documento.

Outra característica interativa que você pode usar em formato PDF interativo é botão com a ação Show/Hide  e que você pode usar para construir todos os tipos de conteúdo pop-up.

Você pode criar um botão de texto, imagem gráfica ou um grupo.  Para criar um botão de uma janela de objeto de selecionado use o painel Interativo > Botões e  Formulários e clique no ícone Convert to Button.  Os botões podem ter diferentes estados, como Normal, Cursor por cima e Clicado.  Para adicionar o estado de Botão clicado ou Mouse em cima, selecione o botão e vá ao painel botões e em seguida, edite a aparência botão para que o(s) estado(s) que você desejar.  Para adicionar uma ação a um botão, clique no sinal de mais e escolha uma ação da lista.  Leve em conta que as ações para SWF / EPUB não funcionarão em PDF interativo.  Para a criação de elementos de pop-up escolha Mostrar/ocultar botões e formulários.  Para ocultar botões até ter uma opção escolhida, marque a opção Hidden Until Triggered/Oculte até ser pressionado.  Você pode incluir objetos multiestados/com vários estados em PDF interativo, mas só se você exportá-los como SWF primeiro e depois colocar esses SWFs de volta no layout do InDesign para a exportação em PDF.  Esse fluxo de trabalho é tedioso e esses PDFs não podem ser adequadamente visto em todos os leitores de PDF, então é melhor evitar fazer isso, a menos que seja realmente necessário.

Se você deseja converter o documento para protótipo HTML usando o recurso Publicar on-line do InDesign CC 2015 você pode usar opções muito mais interativas como animações, objetos multiestados, ações de botão múltiplas, incluindo todos aqueles destinados à exportação SWF/EPUB.

Você pode adicionar animações simples usando o painel Animação e escolher uma das Presets built-in a partir do menu drop-down e definindo suas propriedades.  Um objeto pode ter apenas uma animação aplicada, mas se você precisa adicionar mais, agrupe de seu objeto com uma caixa vazia e usar a nova animação no objeto recém-criado.  E repita isso algumas vezes, se necessário.  Para os objetos que você precisa para mostrar diferentes estados crie objeto multiestado.  Crie um objeto para cada estado.  Objeto pode ser um único elemento (imagem, caixa de texto, gráfico) ou um grupo de elementos diferentes.  Vá até Janela > Interativo > painel Estados de Objeto, selecione todos os objetos que você criou para estado de multiobjeto e clique no botão Novo na parte inferior do painel.  Após o seu estado de multiobjeto estiver feito você vai precisar para criar botões para ir de um estado de objeto para outro.  As ações Ir para o estado seguinte ou Estado Anterior anterior revelam o estado do objeto específico com a ação Ir para o estado.

Se você quer ter um quadro de rolagem no seu protótipo/wireframe a maneira mais fácil de criar um é usando Universal Scrolling Frames extensão da Ajar Productions.  Depois de baixar e instalar você pode usá-lo como um painel do InDesign.  Para fazer o quadro de rolagem você precisa fazer o conteúdo e um quadro como recipiente/container.  O conteúdo pode ser quadro de texto, imagem, ou elementos combinados.  Se usar mais de um elemento como um conteúdo não se esqueça de agrupá-los.  Quando tiver terminado o conteúdo e a caixa de recipiente selecione o conteúdo e vá em Editar > Recortar.  Em seguida, selecione o recipiente e cole o conteúdo dentro usando Editar > Colar dentro.  Escolha o recipiente e utilize o Universal Scrolling Frames para ajustar a direção de rolagem desejada.

Você pode conseguir uma rica experiência interativa ao combinar botões, objetos de vários estados, animações e quadros de rolagem.

Para testar a interatividade do InDesign use o painel EPUB Interatividade Preview.  É possível visualizar uma única página ou o documento inteiro; para isso amplie o painel de visualização conforme sua conveniência.

Exportação de documentos acabados

Quando você já terminou com o arquivo wireframe e apresentação tudo o que resta é mostrar suas grandes idéias para o cliente na melhor maneira possível.  Para esse feito, você precisará exportar seus wireframes em um dos formatos que seu cliente possa visualizar.  Embora os arquivos do InDesign possam ser exportados em vários formatos você provavelmente vai usar o PDF interativo (o mais comum), ou Publicar Recurso On-Line pra testar protótipos funcionais de baixa ou alta fidelidade, indo em Exportar e ajustando as propriedades conforme o necessário.  Não se esqueça de assinalar Formulários e Mídias se existirem elementos interativos que você deseja incluir.  Os clientes podem visualizar wireframes no PDF no Adobe Reader gratuito e escrever todas as suas observações no mesmo arquivo.

Você também pode usar documento PDF para exportar do InDesign e criar protótipo InVision  (ou alguma outra ferramenta que suporta PDFs).  Se a sua ferramenta de prototipagem padrão, como por exemplo, a Marvel, não deixa importar PDF, exporte suas páginas wireframe do InDesign como imagens JPEG ou PNG.

Para exportar protótipo HTML interativo, que pode ser visto em navegadores modernos e em diferentes dispositivos, vá em File > Publish On-Line ou clique no botão Publicar Online a partir da Barra de Aplicações.  Depois que o documento é preparado para ser publicado on-line e, em seguida, enviado, você pode copiar a URL do documento para compartilhar com todas as partes interessadas e começar o processo de revisão.  Se você entende de HTML, você também pode incorporar o protótipo publicado, em seu site.

Desvantagem de Publicar recurso on-line é que você não tem nenhum controle adicional sobre a exportação e os arquivos são sempre armazenados em servidores da Adobe.  Também é um recurso de visualização o qual você não tem certeza de como a Adobe vai suportá-lo, no futuro, ou até mesmo interrompê-lo, de repente.

Uma vez que seu wireframe / protótipo é exportada é hora de testes, revisão e processo para iniciar a iteração.

Outros cenários: Wireframes para apresentações
Você também pode criar modelos adicionais para fins de apresentação como mockup de dispositivo (celular, tablet) para apresentar seus wireframes (3).  Uma vez que um documento do InDesign pode ser colocado em outro (importando como qualquer arquivo externo de texto ou imagem, importável – ), você pode criar wireframes em um documento do InDesign e, em seguida, colocá-lo em um outro para fins de apresentação.
.
Embora possa parecer complicado num primeiro momento, é realmente muito simples e oferece fluxo de trabalho eficaz.  Mantendo o wireframe em documento separado torna mais fácil continuar a construção de wireframes aprovados para um design visual bem-acabado.  Por outro lado, se você tem modelo de apresentação pronto para colocar wireframes, adicione marcadores e comentários, e está tudo pronto para mostrar o seu melhor para o cliente.  Quando você faz modificações no arquivo wireframe apenas atualize-o como qualquer outro link no documento de apresentação, e tchan-tchaan!  Todas as mudanças são atualizadas em sua apresentação também.

(3) nota do tradutor: um exemplo típico seriam os simuladores de dispositivos, para ver como seu trabalho se comporta dentro de um tablet ou celular

Anúncios

There are no comments on this post.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: