| ... | @@ -9,9 +9,60 @@ Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolh |
... | @@ -9,9 +9,60 @@ Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolh |
|
|
- [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)
|
|
|
- [Icones](#icones)
|
|
- [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:
|
|
|
|
|
|
|
|
|
|
|
|
<img src="resources/prototypesLow.svg" >
|
|
|
|
|
|
|
|
O fluxo pode ser visto por completo acessando os [protótipos originais](https://excalidraw.com/#room=78048ec52f718e6c7707,cOkEqKsfQ74gJsBlI_Nu5w)
|
|
|
|
|
|
|
## Protótipos de Alto Nível
|
|
## Protótipos de Alto Nível
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
<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
|
|
## 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|
|
|
|
|
|
|
|
## Tipografia
|
|
## Tipografia
|
|
|
## Icones |
|
|
|
|
|
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">
|
|
|
|
<br/><br/>
|
|
|
|
<img src="resources/fonts/Font Montserrat Medium.svg" height="30">
|
|
|
|
<br/><br/>
|
|
|
|
<img src="resources/fonts/Font Montserrat SemiBold.svg" height="30">
|
|
|
|
<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**
|
|
|
|
|
|
|
|
* **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) |
