Skip to content

GitLab

mockups · Changes

Page history
Adicionada descrição authored by Ricardo Luiz Daros Filho's avatar Ricardo Luiz Daros Filho
Show whitespace changes
Inline Side-by-side
mockups.md
View page @ 4f285527
......@@ -24,30 +24,59 @@ Esta seção apresentará todos os dados do Design do Sistema, sejam eles escolh
Versão 01 | Versão 02 | Versão 03
|---|---|---|
<img src="./resources/images/mockups/LoginV2.png" height="700"> | <img src="./resources/images/mockups/LoginV3.png" height="700"> | <img src="./resources/images/mockups/LoginV1.png" height="700">
- 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
|---|---|
<img src="./resources/images/mockups/CadastroUsuárioV1.png" height="700"> | <img src="./resources/images/mockups/CadastroUsuárioV2.png" height="700">
- 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
|---|---|---|
<img src="./resources/images/mockups/CadastroEventoV1.png" height="700"> | <img src="./resources/images/mockups/CadastroEventoV2.png" height="700"> | <img src="./resources/images/mockups/CadastroEventoOcorrencia.png" height="700">
- 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
|---|---|
<img src="./resources/images/mockups/PerfilUsuárioV1.png" height="700"> | <img src="./resources/images/mockups/PerfilUsuárioV2.png" height="700">
- 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)
|---|---|---|
<img src="./resources/images/mockups/TelaInicialV1.png" height="700"> | <img src="./resources/images/mockups/TelaInicialV3.png" height="700"> | <img src="./resources/images/mockups/TelaInicialV2.png" height="700">
- 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
......@@ -60,19 +89,43 @@ Detalhes Versão 02 | Confirmação de Participação
<img src="./resources/images/mockups/DetalhesEventoV2.png" height="700"> | <img src="./resources/images/mockups/Confirmação%20de%20participação%20no%20evento.png" height="700">
---
## Protótipos Finais
- 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
|---|---|---|
<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Login.png" height="700"> | <img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Cadastro%20de%20Usuário.png" height="700"> | <img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Perfil%20do%20Usuário.png" height="700">
- 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
|---|---|
<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Cadastro%20de%20Evento.png" height="700"> | <img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Tela%20Inicial%20-%20Criar%20Evento%20-%20Não%20logado.png" height="700">
- 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
......@@ -80,6 +133,12 @@ Cadastro de Evento | Ocorrencia: Ausencia de Login
Modelo Padrão | Participar: Ausencia de Login
|---|---|
<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Tela%20inicial%20-%20Modelo%20Scroll%20Infinito.png" height="700">| <img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Tela%20inicial%20-%20Modelo%20Scroll%20Infinito%20-%20Ausencia%20de%20Login.png" height="700">
- 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
......@@ -87,6 +146,11 @@ Modelo Padrão | Participar: Ausencia de Login
Modelo Padrão | Prévia - PopUp Detalhes
|---|---|
<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Tela%20inicial%20-%20Modelo%20Netflix.png" height="700">| <img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Detalhes%20do%20Evento%200.png" height="700">
- 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
......@@ -97,9 +161,23 @@ Tela Individual | Tela Individual Parte 2
Confirmação de Participação | Tela Individual (Participando)
|---|---|
<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Confirmação%20de%20Participação.png" height="700"> |<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Detalhes%20do%20Evento%203.png" height="700">
- 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.
---
- #### Geolocalização
Mapa Geral | Rota para Evento
|---|---|
<img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Geolocalização%20todos%20os%20eventos.png" height="700">| <img src="./resources/images/mockups/Versão%20Final/../Versão%20Final/Geolocalização%20com%20rota.png" height="700">
- 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.
---
\ No newline at end of file