Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • W Wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Industria Digital
  • Wiki
  • Wiki
  • Mockups

Last edited by Henrique Derlam Zwetsch Oct 09, 2024
Page history

Mockups

Home

Documentação do negócio

Sprints Requisitos Processos Gerência Horários Squads

Documentação técnica

Arquitetura Mockups Banco de dados Instalação

Sumário

1. Descrição

2. Identidade Visual

3. Mockups

4. Fluxo do Usuário

Descrição

Durante a Sprint 0 do projeto, foram desenvolvidas pelos AGES II, as telas da aplicação, através da ferramenta Figma, utilizando da colaboração e feedback dos outros integrantes do time.

Ademais, para facilitar o desenvolvimento das telas, optou-se por utilizar uma biblioteca de componentes, nesse caso, a PrimeNG por atender aos requisitos visuais do projeto e ser compatível com a tecnologia de frontend escolhida, Angular.

Link do Figma

Link da biblioteca de componentes PrimeNG


Identidade Visual

Antes de começar a criar as telas, foi decidida a identidade visual das mesmas, optando-se por manter algumas das cores relacionadas a empresa do cliente, porém, utilizando uma variação como cor principal para contrastar mais com o fundo:

imagem_2024-09-14_215133268

Mockups

No total, foram feitas 4 telas e 2 modais, os quais podem ser vistos a seguir:

Landing Page

imagem_2024-09-14_215627758

Dashboard

imagem_2024-09-14_215648841

Mapa

imagem_2024-09-14_215710229

Empresas

imagem_2024-09-14_215724780

Modal Filtros Avançados

imagem_2024-09-14_215749202

Modal Filtro CNAEs

imagem_2024-09-14_215846669

Fluxo do Usuário

Landing Page

O usuário irá entrar nessa página, onde ele deverá inserir alguns filtros básicos, incluindo os filtros avançados e de CNAE vistos anteriormente, para realizar uma busca por empresas, após inserir os filtros e clicar em "Procurar empresas" ele será redirecionado para o Dashboard:

imagem_2024-09-14_215627758

Dashboard

Na aba Dashboard, o usuário pode visualizar graficamente o resultado de sua pesquisa, onde ele pode analisar algumas métricas relacionadas ao conjunto de dados filtrados. Ademais, assim como nas próximas páginas, o usuário pode alterar os filtros aplicados anteriormente para obter um novo conjunto de dados. Além disso, na parte central e superior da página o usuário pode navegar entre essas páginas.

imagem_2024-09-14_215648841

Mapa

Na aba Mapa, o usuário pode visualizar a localização das empresas filtradas, podendo verificar quais delas estão na sua região de interesse. Além disso, ao clicar em um dos marcadores, o usuário pode obter algumas informações sobre aquela empresa.

imagem_2024-09-14_215710229

Empresas

Na aba Empresas, o usuário pode verificar todos os dados das empresas no conjunto de dados filtrado, dessa forma, ele tem acesso a dados mais específicos de cada um dos registros.

imagem_2024-09-14_215724780

Clone repository
  • Arquitetura
  • Banco de dados
  • Configuração
  • Escopo
  • Gerência
  • Mockups
  • Presença Digital
  • Sprints
  • Home
  • processos