Home	Escopo e Cronograma	Processo	Design/Mockups	Configuração	Arquitetura	Código	BD	Qualidade	Utilização

Design do Sistema

Sumário

• Descrição
• Protótipos de Alto Nível
• Ajustes sugeridos e realizados
• Protótipos após ajustes

Descrição

Os mockups de alta fidelidade foram construídos usando o Figma, uma ferramenta gratuita com suporte a colaboração em tempo real e criação de protótipos navegáveis.

A versão mais atualizada dos mockups pode ser encontrada no Figma do projeto Doação.

Protótipos de Alto Nível

Telas de exemplo da visualização do usuário.

Ajustes sugeridos e realizados

Ajuste	Descrição	Status
Posicionamento do logo	Centralizar o logo	✅
Botão Início	Incluir em todas as páginas o botão de "Início" para facilitar a utilização	✅
Cores	Ajustar o esquema de cores para tons de preto, cinza e vermelho	✅

Protótipos após ajustes

Tela de exemplo após os ajustes sugeridos pela Stakeholder.

Página inicial

• Contêm informações para o doador sobre quais instituições possuem pedidos urgentes, sendo de produtos ou voluntários com a quantidade necessária.

Página Login

• Ao clicar no botão de 'Sou uma instituição' na página inicial, a próxima tela é a de login para as instituições que já possuem cadastro na plataforma e ao lado uma opção para ir ao formulário de cadastro. Os Doadores não precisam se cadastrar na plataforma.

Paleta de cores

As cores utilizadas para a aplicação web DoAÇÃO foram:

• Cor primária:
• Cor secundária:
• Cor background:
• Cor button Grey:
• Cor Branca:
• Cor preta:

---

Notificações

• Cor para mensagens de erro:
• Cor para mensagem de sucesso:

Tipografia

Roboto, Helvetica e sans-serif.