Adobe Illustrator está experimentando um retorno no mundo do web design. Não só o SVG está se tornando comumente usado online, mas mais e mais designers estão usando vetores para wireframing. As seguintes dicas irão ajudá-lo a aproveitar ao máximo o Illustrator como uma ferramenta de wireframing.

Wireframing é sobre trabalhar rapidamente e iterar rapidamente. O objetivo não é criar interfaces atraentes; sua prioridade número um é projetar informações e experiências.

1. Go Monochrome

Wireframes tornam clara a hierarquia em uma página web; eles demonstram visualmente a ordem em que os usuários devem processar as informações disponíveis. Se você quiser que os usuários processem o cabeçalho antes de pressionar o botão “comprar agora”, o cabeçalho precisa “truncar” o botão, exigindo mais atenção.

Esta hierarquia visual pode ser definida de várias maneiras. Poderíamos usar o tamanho para tornar a manchete mais impactante, poderíamos usar o posicionamento (colocando-a antes do botão). Poderíamos usar cor, contraste e uma gama de outras coisas, mas fazê-lo numa wireframe só torna as coisas mais confusas.

Ao remover cor da equação, a relação visual definida por posição, tamanho e (se você quiser dar o passo extra) contraste, é muito mais limpa.

Não estamos construindo kits de IU bonitos, pixel-perfect UI aqui. Fique com uma gama limitada de cinzentos, depois use cores apenas para etiquetas e notas.

2. Keep Layers for Specific Purposes

Fala de etiquetas, notas e comentários, é uma óptima ideia colocar cada um numa camada dedicada. O mesmo vale para qualquer outra coisa que tenha um propósito específico, como comportamento, interação, gestos, etc.

Pôr visuais em uma camada, comportamento em outra, e etiquetas em outra, para que você possa facilmente alternar sua visibilidade quando necessário.

3. Símbolos de Alavancagem

D.R.Y. é geralmente usado como um termo de programação, mas é igualmente aplicável ao fluxo de trabalho de design. Em qualquer wireframe, nós vamos usar e reutilizar certos objetos. Transforme estes objectos em símbolos e quaisquer alterações que faça a um serão instantaneamente reflectidas no resto.

Por exemplo, aqui está um campo de formulário simples:

>

Vamos arrastá-lo para o painel Symbols (Shift + Command + F11)

Agora podemos puxar este símbolo do painel Symbols, quantas vezes quisermos, para a placa de arte. Ao clicarmos duas vezes em qualquer um deles, isolamo-lo (um pouco como objectos agrupados) para o podermos editar. Quaisquer alterações que fizermos, neste caso arredondando os cantos do rectângulo, serão aplicadas a todos e cada um dos símbolos dos campos de formulário que utilizámos.

Após termos uma colecção de símbolos, também os podemos guardar como um conjunto:

Isto permitir-nos-á carregá-los noutros ficheiros para o futuro.

Se quiser saber mais sobre a paleta de símbolos, dê uma vista de olhos na dica rápida: Trabalhando com Símbolos no Adobe Illustrator.

4. As pontas de seta são perfeitas para apontar

Uma grande dica é alavancar as pontas de seta de curso, algo prontamente disponível no Illustrator diretamente da caixa desde o CS5. Wireframes são a oportunidade ideal para descrever visualmente interações, fluxo de aplicação, navegação e movimento.

Estes dias podemos facilmente adicionar pontas de seta aos traços, diretamente do painel Stroke.

Podemos até editar o arquivo “Arrowheads.ai” da fonte do Illustrator, como explicado por Ryan Cornwell, e adicionar nossas próprias pontas de seta à mistura.

Note: Annoyingly, a ferramenta conta-gotas não aplica pontas de seta junto com outros estilos de traços, então não é tão fácil quanto poderia ser duplicar o efeito que você escolheu. Mas ainda assim, eles são perfeitos para wireframing.

5. Snap to Grid for Unified Spacing and Sizing

De muitas maneiras, isto segue-se de não usar cores. Unificar dimensões e espaçamento remove um elemento de distração das wireframes, ajudando-nos a concentrar visualmente no que é importante.

Não importa se as dimensões exatas não refletem como será a IU mais abaixo; desde que a hierarquia e as relações permaneçam verdadeiras, estamos prontos para ir.

Aplique uma grade na sua Artboard, indo View > Show Grid. Selecionando View > Snap to Grid irá ajudá-lo a posicionar seus objetos com precisão.

Para especificar exatamente como você quer que sua grade se pareça (e lembre-se, você não está indo para pequenos detalhes aqui) vá para Illustrator > Preferences > Guides & Grid… Uma vez lá você pode definir a distância entre as linhas da grade, então diga quantas subdivisões você quer dentro dessas linhas.

Note: Sinta-se livre para colorir sua grade em algo que não seja cinza; ela não fará parte do produto final.

6. Use Estilos Gráficos para Botões Flexíveis

Dependente do nível de fidelidade (quão fiel ao site final que você está visando) você pode ter texto real dentro de, por exemplo, botões. Para que estes botões cresçam e encolham dependendo do conteúdo dentro deles, não use objetos, use estilos gráficos.

Comecemos com uma seqüência de textos falsos.

Agora vamos abrir o painel de Aparência, indo Janela > Aparência.

Usando o painel de Aparência, você pode adicionar vários preenchimentos a um objeto. Podemos colocar esses preenchimentos na ordem que gostaríamos que fossem exibidos; nesta imagem você pode ver vários, todos empilhados uns sobre os outros.

Por enquanto, só precisamos de dois preenchimentos, então vamos adicionar um preenchimento escuro para o texto, depois uma cor mais pálida para o fundo.

Currentemente, não podemos ver o fundo cinza pálido, porque é exatamente a mesma forma que o preenchimento mais alto. No entanto, podemos isolar e manipular cada preenchimento separadamente. Seleccione o preenchimento inferior no painel Aparência, depois vá para Efeito > Converter para Forma > Rectângulo Arredondado…

Introduza algumas configurações, o que achar melhor, apenas certifique-se que o tamanho é relativo ao objecto a que estamos a aplicar isto.

O preenchimento cinzento pálido no fundo tomou agora a forma de um rectângulo arredondado, relativo ao tamanho do texto. Um botão! Para aplicar esta aparência a outros objetos, abra o painel de Estilos Gráficos e arraste o botão inteiro para dentro dele. Suas aparências serão salvas como um estilo que você pode reutilizar.

Por exemplo, aqui está uma seqüência mais longa de texto. Com o texto selecionado, clique no novo estilo gráfico criado (que eu cliquei duas vezes e renomeei) para aplicá-lo instantaneamente.

7. Setup Some Commonly Used Artboards

Speed é o nome do jogo com wireframing! Escreva um layout, vá em frente, escreva outro, vá em frente. Portanto, faz sentido ter um ponto de partida pronto que você pode acessar facilmente. Você pode achar que primeiro trabalha melhor em uma placa de arte maciça, puxando objetos finalizados para um arquivo separado, ou pode preferir trabalhar diretamente com placas de arte de tamanho apropriado.

Aqui, por exemplo, há um layout com uma tela de iPad (1536x2048px) e quatro telas de iPhone 4S (640x960px), embora você possa preparar um arquivo com qualquer número de exemplos de telas de dispositivos. Ou definir manualmente as suas dimensões preferidas, ou escolher a partir de qualquer uma das predefinições disponíveis na Artboard Options:

Inclua quaisquer guias comuns, nomes de camadas, conjuntos de símbolos, etc. que você possa usar, depois salve tudo como um template para uso futuro (Arquivo > Salvar como Template…) Este ponto de partida estará então disponível para você indo Arquivo > Novo do Template…, completo com todos os bits e peças que você deixou lá.

8. Use TextExpander para Dummy Text

Illustrator não vem com nenhuma ferramenta de texto dummy. Existem alguns scripts com os quais vale a pena brincar, mas a maneira mais fácil de colocar textos fictícios em seus Wireframes do Illustrator é usar o TextExpander.

Nota: se você é um usuário do Windows, o PhraseExpress oferece funcionalidade similar ao TextExpander

Adicionar uma série de trechos de texto que você se vê usando comumente para wireframes (como um cabeçalho grande, um cabeçalho curto, uma cópia de corpo de comprimentos variados, texto típico de botão, itens de menu e assim por diante) para que eles estejam prontamente disponíveis no Illustrator.

Ao definir uma frase chave para cada trecho, o TextExpander irá substituir essa frase pelo seu conteúdo sempre que a digitar, poupando-lhe tempo. Você também pode usar as opções de pasta para garantir que esses trechos só tenham efeito no Illustrator, caso você queira.

>

Para saber mais sobre como otimizar seu fluxo de trabalho do TextExpander, dê uma olhada no Master TextExpander With These Helpful Tips & Tricks.

9. Practice Logical File Naming

Ser capaz de visualizar rapidamente mudanças e idéias está no coração do wireframing, mas isso pode levar a uma enorme pilha de arquivos desorganizados, se você não tiver cuidado. A chave é salvar em estágios significativos e com convenções lógicas de nomes de arquivos.

Por exemplo, podemos querer começar cada nome de arquivo com o nome da página em que estamos trabalhando. Então pode ser sensato usar algum tipo de nome de variante, após o qual o número da versão: page-variant-version.ai

Por exemplo, podemos estar a trabalhar numa página de destino; uma que se concentre em promover uma campanha de e-mail, ou um livro electrónico. Podemos ter nomes de arquivos como:

Não só mantém as pastas do projeto organizadas, mas funciona como uma forma de versão manual. Matt Smith discute mais a idéia em seu artigo Wireframing With Illustrator e InDesign.

10. Save in Dropbox for Easy Versioning

Segurando ainda mais a idéia de versionar, salvar seus arquivos diretamente no Dropbox removerá completamente essa tarefa da sua lista de todos. Mesmo o plano gratuito do Dropbox irá armazenar uma cópia de seus arquivos cada vez que você salvá-los, por trinta dias.

Likewise, o Layervault oferece impressionantes similares em seu plano gratuito.

Em ambos os casos, isto é especialmente útil se você estiver colaborando com uma equipe. Ter todos os membros trabalhando de um local central, com a opção de restaurar qualquer versão se alguém fizer algo estranho, é ideal para o trabalho em equipe.

Conclusão

Muitas destas dicas são inteiramente pessoais para o meu próprio fluxo de trabalho e podem não se traduzir perfeitamente na sua própria maneira de fazer as coisas. No entanto, espero que elas pelo menos despertem alguma curiosidade, para que você pense sobre a forma como você faz o wireframe web layouts. Se você tiver outras dicas próprias, compartilhe-as nos comentários!

Outras leituras

• Wireframing With InDesign and Illustrator
• Wireframing With Illustrator and InDesign (diferença sutil!)
• A Beginner’s Guide to Wireframing
• Illustrator and Arrowheads