design.md

@@ -11,3 +11,81 @@
 <th> [Utilização](utilizacao) </th>
 </table>
 
+> **Instruções para edição:** A atualização desta seção deve ser realizada preferencialmente pelos membros da equipe de **prototipação**, ou sob sua supervisão direta. Os exemplos apresentados servem apenas como referência e devem ser substituídos por informações completas e precisas.  
+
+A documentação da Wiki é um recurso público e desempenha um papel essencial no projeto. Ela será amplamente utilizada nos relatórios individuais da equipe, além de ser referenciada por clientes e pelo público externo. Portanto, é fundamental que seu conteúdo seja elaborado com precisão técnica, clareza e atenção aos detalhes.  
+
+Recomendamos o uso de uma linguagem técnica adequada e a inclusão do máximo de informações relevantes. Uma documentação bem estruturada e bem escrita não apenas facilita a compreensão do projeto, mas também contribui diretamente para sua credibilidade e sucesso.  
+
+Seja meticuloso e comprometido ao editar esta seção.
+
+
+
+# Design da Interface do Sistema
+
+## Descrição
+
+Nesta seção serão apresentadas as telas da interface do sistema, planejadas em colaboração pelo time, levando em consideração as solicitações dos Stakeholders do projeto. 
+
+## Sumário
+
+- [Escolha de cores e padrões](#escolha-de-cores-e-padrões)
+- [Protótipos de Alto Nível](#protótipos-de-alto-nível)
+
+
+## Escolha de cores e padrões
+
+### Paleta de Cores
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus nisl, venenatis in lacinia ac, placerat dapibus ex. Duis feugiat dapibus erat at tincidunt. Cras sed pretium elit. Duis a dignissim augue. Donec congue suscipit elit, ac varius nibh tincidunt eget. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
+Lista de códigos Hex:
+- #006f48
+- #C25327
+- #2E2E2E
+- #FE6900
+- #EBFFEE
+
+### Componentes
+
+Estamos utilizando componentes criados na ferramenta Figma para compor as telas da aplicação. Abaixo estão alguns exemplos:
+
+<table align="center"><tr><td align="center" >
+
+#### item a
+<img src="resources/images/under_construction.jpg">
+
+#### item b
+<img src="resources/images/under_construction.jpg">
+
+</table>
+
+## Protótipos de Alto Nível
+
+### Tela de Login/ Boas vindas
+<img src="resources/images/under_construction.jpg">
+
+### Tela Inicial
+<img src="resources/images/under_construction.jpg">
+
+### Cadastro
+<img src="resources/images/under_construction.jpg">
+
+### Seleção
+<img src="resources/images/under_construction.jpg">
+
+### Cadastro em lote via CSV
+<img src="resources/images/under_construction.jpg">
+
+### Questionário
+<img src="resources/images/under_construction.jpg">
+
+### Dashboard
+<img src="resources/images/under_construction.jpg">
+
+
+
+### Observações Gerais
+A prototipação e os designs apresentados nesta seção servem meramente como base para nortear a confecção do visual da aplicação e poderão sofrer alterações durante o processo de desenvolvimento, para entrar em conformidade com futuras modificações necessárias. 
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[**Topo**](#design-da-interface-do-sistema)
\ No newline at end of file