Whimsical

O que é

Software para criação de wireframes de baixa fidelidade, fluxogramas e mind maps.

Por que usar

• Tira a dependência dos designers na hora de rabiscar uma ideia

• Tem dezenas de componentes e ícones prontos, agilizando a prototipação

• Nos ajuda a focar primeiro no conteúdo, antes de partir para o Figma

Criando um projeto no Whimsical

Temos uma conta paga, você precisa pegar o acesso com a liderança de design.

Os projetos estão organizados por pasta de squad. Veja se faz sentido criar um novo documento, ou trabalhar em um que já está criado.

O Whimsical pode ser usado em uma série de modos. Vamos focar aqui no Flowchart, Wireframe e Mind Maps.

Você pode mudar de modo no meio de um projeto, basta clicar na primeira opção do menu. Ou apertar W.

Mind map

Mind map é uma ferramenta para organizarmos um grupo de ideias ou termos. Pode ser usado pra brainstorming, ou para começar a organizar uma arquitetura de informação.

O processo é bem simples. Basta adicionar um mind map e ir clicando nos seletores para criar novos ramos.

Exemplo de mind map.

jump of the cat: aperte Enter para criar uma nova opção dentro de uma ramificação.

Fluxograma

Muito usado quando queremos determinar qual vai ser o fluxo básico, antes de começar a prototipação com wireframe.

Também pode ser usado para estruturar uma taxonomia: como os conteúdos estão estruturados e agrupados.

Exemplo de taxonomia do menu do site público.

Aqui não tem segredo. É só ir adicionando formas e links entre elas.

Exemplo de fluxograma.

Em fluxogramas, tente focar em ações, e do ponto de vista do usuário. Usar o formato verbo + objeto + contexto ajuda a padronizar.

Wireframe

Se você precisa estruturar um conteúdo em baixa fidelidade, esta é a melhor ferramenta.

Pra começar, você precisa criar um frame, que vai ser a sua área de trabalho.

Exemplos de frames: mobile e desktop.

Se você trabalha em um produto B2C, prototipe no mobile primeiro.

Agora é hora de desenhar. Abra a biblioteca de elementos e procure qual você quer usar. Tem componentes como botão, link, input, entre outros.

Exemplos de componentes aplicados.

Se precisar de ícones, basta procurar na biblioteca de ícones. Você pode digitar o que precisa (em inglês) e ver as opções disponíveis.

Exemplo de busca de ícones.

Você também pode fazer link entre documentos, inserir imagens de fora e desenhar setas entre uma tela e outra.

Exemplo de wireframe com conteúdo e componentes

Não trabalhe com lorem ipsum nessa fase. Aqui queremos justamente organizar e estruturar o conteúdo, então use conteúdo próximo do real.

Você pode dar uma olhada nas Heurísticas de Nielsen, para garantir que seu protótipo atende algumas premissas de usabilidade.