Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • M Mutirao do Bem 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
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Mutirao do Bem
  • Mutirao do Bem Wiki
  • Wiki
  • mockups

Last edited by Ricardo Nov 25, 2021
Page history
This is an old version of this page. You can view the most recent version or browse the history.

mockups

Home Escopo e Cronograma Mockups Configuração Arquitetura BD Instalação GP Processo Horários

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

  • Design do Sistema
    • Descrição
    • Sumário
    • Protótipos de Baixo Nível
    • Protótipos de Alto Nível
    • Cores
    • Tipografia
    • Elementos Visuais

Protótipos Iniciais

  • Telas de Login

Versão 01 Versão 02 Versão 03
  • Descrição de desenvolvimento:
    • Foram desenvolvidas inicialmente 3 versões de telas de login, com poucas alterações.
    • Divergências de logo e posicionamento de elementos, assim como paleta de cores.
    • Na Versão 01 temos um logo genérico, substituído pela primeira ideia do Stakeholder nas versões seguintes (Versão 02 e Versão 03), nas quais houve apenas uma mudança visual em mensagem de saudação.

  • Cadastro de Usuário

Versão 01 Versão 02
  • Descrição de desenvolvimento:
    • Seguindo os possíveis modelos ideia iniciais, criamos baseado na escolha de possível paleta de cores dois modelos de cadastro de usuário, havendo uma primeira versão mais genérica (Versão 01), seguida de uma versão onde foi adicionado um cabeçalho, com logo e título de página, assim como mudança visual em cor do "rodapé", com a proposta de seguir inalterado mesmo com a mudança entre páginas.

  • Cadastro de Evento

Versão 01 Versão 02 Ocorrencia: Ausencia de Login
  • Descrição de desenvolvimento:
    • Foram desenvolvidos 2 modelos de tela para cadastro de eventos.
    • A Versão 01, apresenta um modelo onde as páginas teriam a funcionalidade de "abas", alterando entre visualizar "eventos disponíveis" e "criar evento", neste modelo ainda foi desenvolvido a possibilidade de ocorrencia, caso o usuário não estivesse logado, receberia tela alternativa ao tentar acessar a "aba" de "criar evento" (Ocorrência: Ausência de Login).
    • A Versão 02 traz a ideia de inalterar o "rodapé", acessando de fato uma página completamente diferente.

  • Perfil do Usuário

Versão 01 Versão 02
  • Descrição de desenvolvimento:
    • Foram desenvolvidos 2 modelos de tela para o perfil do usuário.
    • A Versão 01 o protótipo mais genérico, seguido da Versão 02, onde há presença de cabeçalho com logo, divisão de elementos e cores marcantes.

  • Tela Inicial

Versão 01 (Diversos Scrolls) Versão 02 (Modelo Y/N) Versão 03 (Scroll Infinito)
  • Descrição de desenvolvimento:
    • Foram desenvolvidos 3 modelos de tela inicial.
    • Tomamos a liberdade de desenvolver modelos baseados em aplicações muito utilizadas.
      • Versão 01: foi utilizada a ideia de que haja um Scroll vertical e diversas linhas com scroll horizontal.
      • Versão 02: utilizamos a ideia de "Sim ou Não" para identificar se o usuário pretende se envolver com o evento.
      • Versão 03: a ideia vem do Scroll Vertical Infinito, com descrição breve do evento já em tela.

  • Tela de Detalhes do Evento

POP UP POP UP - Ocorrencia: Ausencia de Login Detalhes Versão 01
Detalhes Versão 02 Confirmação de Participação

  • Descrição de desenvolvimento:
    • No que se refere a tela de Detalhes do Evento, foram desenvolvidos 2 modelos, sendo a Versão POP-UP uma prévia das Versões 01 e 02 (Nas quais houveram mudanças visuais apenas, elementos e cores) -> Baseado no modelo de Scrolls verticais e horizontais.
    • A tela "POP UP - Ocorrencia: Ausencia de Login", apresenta o exemplo de mensagem no caso do usuário não estar logado.
    • Na Versão 01 foram adicionados elementos solicitados exclusivamente pelo Stakeholder, como um gráfico demonstrativo onde apresenta-se os dados atuais do evento, assim como o sistema de tasks.
    • Na Versão 02 houveram alterações de cores, buscando um layout clean.

Protótipos Finais

  • Descrição de desenvolvimento: Os protótipos a seguir foram apresentados ao Stakeholder e moldados a partir de suas solicitações.

    • Foi decidido prosseguir com o modelo de aplicação baseado na ideia do Scroll Vertical Infinito;
    • Com auxílio de design, redesenhamos a identidade visual da aplicação;
    • A recriação dos modelos beneficiou a visualização dos elementos em tela, com cores mais claras e contrastantes;
    • Adicionadas telas de geolocalização;
    • Resultado nos seguintes modelos de telas:

  • Telas de Login e Conta de Usuário

Login Cadastro de Usuário Perfil do Usuário
  • Descrição de desenvolvimento:
    • Presente já alteração no logo e paleta de cores;
    • Novo design de onda para divisão de elementos em tela.

  • Cadastro de Evento

Cadastro de Evento Ocorrencia: Ausencia de Login
  • Descrição de desenvolvimento:
    • Tela de Cadastro de Evento seguiu com design clean, sem cabeçalho;
    • Houve alteração de cores em ambas as telas;
    • Novo design de onda para divisão de cabeçalho em tela de Ocorrência.

  • Tela Inicial | Modelo Scroll Infinito

Modelo Padrão Participar: Ausencia de Login
  • Descrição de desenvolvimento:
    • Modelo de tela inicial Scroll Infinito foi redesanhado com novas cores;
    • Adicionada barra de pesquisa e logo ao cabeçalho;
    • Em tela Participar: Ausencia de Login, alteradas apenas as cores para seguir o padrão.

  • Tela Inicial | Modelo Netflix

Modelo Padrão Prévia - PopUp Detalhes
  • Descrição de desenvolvimento:
    • Modelo de tela inicial Netflix foi redesanhado com novas cores;
    • Adicionada barra de pesquisa e logo ao cabeçalho de ambas as telas;

  • Detalhes do Evento

Tela Individual Parte 1 Tela Individual Parte 2
Confirmação de Participação Tela Individual (Participando)
  • Descrição de desenvolvimento:
    • Modelo de tela Detalhes do Evento foi redesanhado buscando um design visualmente convidativo;
    • Gráfico foi substituído por barra de andamento com porcentagem de conclusão;
    • Adicionada barra de pesquisa e logo ao cabeçalho;
    • Ainda há nova funcionalidade de Scroll, possibilitando visualizar a função de geolocalização do evento.

  • Login de Administrador

Decidir Cadastro V1 Decidir Cadastro V2
Concluir Evento V1 Concluir Evento V1
Aceitação Verificação de Cadastro Versão Final Aceitação e Negação de Cadastro (Antigo)
Motivo de negar Cadastro V1 Motivo de negar Cadastro V2
Escolha de Recebedor V1 Escolha de Recebedor V2
Escolha de Recebedor V3 Escolha de Recebedor V4
Evento com Solicitação em Aberto V1 Evento com Solicitação em Aberto V2
Evento com Solicitação em Aberto V3 Evento com Solicitação em Aberto V4
  • Descrição de desenvolvimento:
    • Com o decorrer do projeto houve a necessidade de um Login de Administrador;
    • Algumas funcionalidades foram implementadas, como verificação de cadastro e tasks;
    • Foi utilizada adaptação breve de algumas telas, onde apenas se inserem novos elementos gerando a funcionalidade de administrador;

  • Eventos

Detalhes do Evento Tarefas
Criando Task V1 Criando Task V2
Criando Task V2 Avaliar Task
  • Descrição de desenvolvimento:
    • Podemos visualizar melhor todos os detalhes ao acessar um evento, de forma objetiva e clara;
    • Conforme solicitado pelo StakeHolder, o usuário deveria poder criar tarefas para o evento, conforme suas possibilidades em ajudar;
    • Assim também surgiu a necessidade administrativa em avaliar determinada Task;
    • Foram criadas algumas versões de tela para que pudessemos decidir como a experiência do usuário seria mais fluida.

  • Geolocalização

Mapa Geral Rota para Evento
  • Descrição de desenvolvimento:
    • Como solicitado pelo StakeHolder, foi adicionada função de geolocalização;
    • Deve ser possível visualizar os eventos disponíveis em determinada área pelo Mapa Geral;
    • Acessando um "pin" de evento, é possível direcionar a rota para o mesmo.

Clone repository
  • Utilizando a wiki
    • adicionando imagens
    • escrevendo em markdown
    • wiki no editor de texto
  • arquitetura
  • banco_dados
  • codigo
  • configuracao
  • escopo
  • gerencia
  • Home
  • horarios
  • instalacao
  • instrucoes
  • mockups
  • processo
View All Pages