Skip to content

GitLab

design · Changes

Page history
atualização nome e formato authored by joaofleao's avatar joaofleao
Show 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 # Design do Sistema
## Descrição ## Descrição
Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolhas do time ou solicitações dos Stakeholders. Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolhas do time ou solicitações dos Stakeholders.
## Sumário ## Sumário
- [Protótipos de Baixo Nível](#protótipos-de-baixo-nível) - [Protótipos de Baixo Nível](#protótipos-de-baixo-nível)
- [Protótipos de Alto Nível](#protótipos-de-alto-nível) - [Protótipos de Alto Nível](#protótipos-de-alto-nível)
- [Cores](#requisitos) - [Cores](#requisitos)
- [Tipografia](#tipografia) - [Tipografia](#tipografia)
- [Elementos Visuais](#elementos-visuais) - [Elementos Visuais](#elementos-visuais)
## Protótipos de Baixo Nível ## 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. 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: Abaixo temos uma imagem que apresenta o resultado de algumas das telas desenvolvidas:
<img src="resources/prototypesLow.svg" > <img src="resources/prototypesLow.svg" >
O fluxo pode ser visto por completo acessando os [protótipos originais](https://excalidraw.com/#room=78048ec52f718e6c7707,cOkEqKsfQ74gJsBlI_Nu5w) O fluxo pode ser visto por completo acessando os [protótipos originais](https://excalidraw.com/#room=78048ec52f718e6c7707,cOkEqKsfQ74gJsBlI_Nu5w)
...@@ -28,19 +33,19 @@ Essa etapa de validação dos protótipos foi muito importante, afinal, o time s ...@@ -28,19 +33,19 @@ Essa etapa de validação dos protótipos foi muito importante, afinal, o time s
<img src="resources/prototypesHigh.svg" style="border-radius:25px" > <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. 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 ## 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. 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**| | **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/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/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/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/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| | <img src="resources/colors/Font.svg"> | Fontes | #212121 | <img src="resources/colors/Gray.svg"> | Cinza | #8A8A8E |
## Tipografia ## Tipografia
...@@ -56,13 +61,12 @@ Para definição da tipografia, foi levada em consideração a natureza do proje ...@@ -56,13 +61,12 @@ Para definição da tipografia, foi levada em consideração a natureza do proje
<br/><br/> <br/><br/>
<img src="resources/fonts/Font Montserrat Bold.svg" height="30"> <img src="resources/fonts/Font Montserrat Bold.svg" height="30">
## Elementos Visuais ## 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. 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)