Skip to content

GitLab

design · Changes

Page history
atualização nome e formato authored by joaofleao's avatar joaofleao
Hide whitespace changes
Inline Side-by-side
design.md
View page @ 54655f7f
|[Home](home)|[Escopo](escopo)|[Processo](processo)|[**Design**](design)|[Configuração](configuracao)|[Arquitetura](arquitetura)|[Código](codigo)|[Banco de Dados](banco_dados)|[Qualidade](qualidade)|[Instalação](instalacao)|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| [Home](home) | [Escopo](escopo) | [Cronograma](cronograma) | [**Design**](design) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [Banco de Dados](banco_dados) | [Qualidade](qualidade) | [Instalação](instalacao) |
| :----------: | :--------------: | :----------------------: | :------------------: | :--------------------------: | :------------------------: | :--------------: | :---------------------------: | :--------------------: | :----------------------: |
# Design do Sistema
## Descrição
Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolhas do time ou solicitações dos Stakeholders.
## Sumário
- [Protótipos de Baixo Nível](#protótipos-de-baixo-nível)
- [Protótipos de Alto Nível](#protótipos-de-alto-nível)
- [Cores](#requisitos)
- [Tipografia](#tipografia)
- [Elementos Visuais](#elementos-visuais)
## Protótipos de Baixo Nível
Para início do desenvolvimento, os requisitos apresentados pelos stakeholders foram convertidos em protótipos com baixo nível de fidelidade. Esses protótipos foram criados na ferramenta [Excalidraw](https://excalidraw.com/) junto de todo o time.
Abaixo temos uma imagem que apresenta o resultado de algumas das telas desenvolvidas:
Para início do desenvolvimento, os requisitos apresentados pelos stakeholders foram convertidos em protótipos com baixo nível de fidelidade. Esses protótipos foram criados na ferramenta [Excalidraw](https://excalidraw.com/) junto de todo o time.
Abaixo temos uma imagem que apresenta o resultado de algumas das telas desenvolvidas:
<img src="resources/prototypesLow.svg" >
......@@ -24,28 +29,28 @@ O fluxo pode ser visto por completo acessando os [protótipos originais](https:/
Logo em seguida, os protótipos de baixo nível foram convertidos para uma versão com maior fidelidade ao produto final. Eles foram desenvolvidos na ferramenta de prototipação [Figma](https://www.figma.com/) juntamente de todo o time e foram sugeridos na entrega da Sprint 0.
Essa etapa de validação dos protótipos foi muito importante, afinal, o time se basearia neles na hora de desenvolver a interface da aplicação. Abaixo temos uma visão geral dos protótipos finais.
Essa etapa de validação dos protótipos foi muito importante, afinal, o time se basearia neles na hora de desenvolver a interface da aplicação. Abaixo temos uma visão geral dos protótipos finais.
<img src="resources/prototypesHigh.svg" style="border-radius:25px" >
Para melhor visualização de todos os fluxos, acesse os [protótipos oficiais](https://www.figma.com/file/ptoiUOgc00JJ128m3dhokX/Olive?node-id=5%3A746) do projeto.
## Cores
Algumas das cores escolhidas para o projeto foram retiradas da identidade visual já existente do projeto. Outras foram incorporadas a medida que o projeto apresentou necessidade.
| **Cores** | **Nome** |**HEX**| **Cores** | **Nome** |**HEX**|
|:---------------------------------------------------------:|:-----------------------:|:-----:|:---------------------------------------------------------:|:-----------------------:|:-----:|
| <img src="resources/colors/Primary.svg"> |Primária |#357735| <img src="resources/colors/Secondary.svg"> |Secundária |#52944F|
| <img src="resources/colors/Tertiary.svg"> |Terciária |#6FB26B| <img src="resources/colors/Complementary_Primary.svg"> |Complementar Primária |#506986|
| <img src="resources/colors/Complementary_Secondary.svg"> |Complementar Secundária |#556983| <img src="resources/colors/Complementary_Tertiary.svg"> |Complementar Terciária |#79899D|
| <img src="resources/colors/Background.svg"> |Background |#FFFFFF| <img src="resources/colors/Error.svg"> |Erro |#FF1B25|
| <img src="resources/colors/Font.svg"> |Fontes |#212121| <img src="resources/colors/Gray.svg"> |Cinza |#8A8A8E|
| **Cores** | **Nome** | **HEX** | **Cores** | **Nome** | **HEX** |
| :------------------------------------------------------: | :---------------------: | :-----: | :-----------------------------------------------------: | :--------------------: | :-----: |
| <img src="resources/colors/Primary.svg"> | Primária | #357735 | <img src="resources/colors/Secondary.svg"> | Secundária | #52944F |
| <img src="resources/colors/Tertiary.svg"> | Terciária | #6FB26B | <img src="resources/colors/Complementary_Primary.svg"> | Complementar Primária | #506986 |
| <img src="resources/colors/Complementary_Secondary.svg"> | Complementar Secundária | #556983 | <img src="resources/colors/Complementary_Tertiary.svg"> | Complementar Terciária | #79899D |
| <img src="resources/colors/Background.svg"> | Background | #FFFFFF | <img src="resources/colors/Error.svg"> | Erro | #FF1B25 |
| <img src="resources/colors/Font.svg"> | Fontes | #212121 | <img src="resources/colors/Gray.svg"> | Cinza | #8A8A8E |
## Tipografia
Para definição da tipografia, foi levada em consideração a natureza do projeto. A escolha da fonte [Montserrat](https://fonts.google.com/specimen/Montserrat?preview.text_type=custom#about) ajudou a criar uma interface amigável, simples e limpa.
<img src="resources/fonts/Font Montserrat Light.svg" height="30">
<br/><br/>
<img src="resources/fonts/Font Montserrat Regular.svg" height="30">
......@@ -56,13 +61,12 @@ Para definição da tipografia, foi levada em consideração a natureza do proje
<br/><br/>
<img src="resources/fonts/Font Montserrat Bold.svg" height="30">
## Elementos Visuais
Durante o desenvolvimento de Protótipos, alguns icones foram definidos para apresentarem melhor as funcionalidades da aplicação. Além desses icones, elementos ilustrativos nas páginas de abertura do aplicativo, seleção de avatar e parte de troféus foram adicionados para trazer um aspecto mais agradável a essas páginas, além de incentivarem a "Gamificação" do aplicativo.
* **Icones utilizados**
- **Icones utilizados**
* **Avatares utilizados** foram criados por [Freepik](https://www.freepik.com) e podem ser encontrados em [Flaticon](https://www.flaticon.com/packs/summer-food-and-drink-10?k=1617123409008)
- **Avatares utilizados** foram criados por [Freepik](https://www.freepik.com) e podem ser encontrados em [Flaticon](https://www.flaticon.com/packs/summer-food-and-drink-10?k=1617123409008)
* **Ilustrações utilizadas** foram criados por *Loomies illustrations* e podem ser encontrados em [GetIlustrations](https://www.getillustrations.com/illustration-pack/loomies-free-vector-illustrations)
- **Ilustrações utilizadas** foram criados por _Loomies illustrations_ e podem ser encontrados em [GetIlustrations](https://www.getillustrations.com/illustration-pack/loomies-free-vector-illustrations)