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 # 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.
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" > <img src="resources/prototypesLow.svg" >
...@@ -24,28 +29,28 @@ O fluxo pode ser visto por completo acessando os [protótipos originais](https:/ ...@@ -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. 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" > <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
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. 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"> <img src="resources/fonts/Font Montserrat Light.svg" height="30">
<br/><br/> <br/><br/>
<img src="resources/fonts/Font Montserrat Regular.svg" height="30"> <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 ...@@ -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)