# 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.

{% hint style="info" %}
Você pode mudar de modo no meio de um projeto, basta clicar na primeira opção do menu. Ou apertar W.
{% endhint %}

![](/files/-MbBd3AvNQlM6xrxSGZl)

### 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.](/files/-MbBhSOoZazw00YX3qrw)

{% hint style="info" %}
**jump of the cat:** aperte Enter para criar uma nova opção dentro de uma ramificação.
{% endhint %}

### 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.](/files/-MbBiSimt3IDJFKC-npe)

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

![Exemplo de fluxograma.](/files/-MbBjUm5mNvqkq8ZKRQS)

{% hint style="info" %}
Em fluxogramas, tente focar em ações, e do ponto de vista do usuário. Usar o formato verbo + objeto + contexto ajuda a padronizar.
{% endhint %}

### 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.](/files/-MbBdxIdrs8V_OPLC2cq)

{% hint style="warning" %}
Se você trabalha em um produto B2C, prototipe no mobile primeiro.
{% endhint %}

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.](/files/-MbBektFbFExebDXIJDY)

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.](/files/-MbBf8shYj39_cGEYnJt)

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](/files/-MbBi3s2pN4ySwBXNSSs)

{% hint style="danger" %}
Não trabalhe com [*lorem ipsum*](https://mussumipsum.com/) nessa fase. Aqui queremos justamente organizar e estruturar o conteúdo, então use conteúdo próximo do real.
{% endhint %}

Você pode dar uma olhada nas [Heurísticas de Nielsen](https://www.nngroup.com/articles/ten-usability-heuristics/), para garantir que seu protótipo atende algumas premissas de usabilidade.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://revelo.gitbook.io/playbook/ferramentas/prototipacao/whimsical.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.