1) O documento descreve as telas e elementos de uma interface para um guia de casos e soluções. 2) Inclui descrições de telas como login, pesquisa, resultados e detalhes. 3) As telas são projetadas para serem responsivas em dispositivos móveis com variações apropriadas de layout e interação.

1. CASESCOLUNISTAS

2. Link para a contribuição de conteúdo ao
banco de dados do GUIA.
Apresentação
Navegação de três níveis para ilustrar
melhor o entendimento do GUIA em três
passos.
Botão grande posicionado propositalmente
na parte inferior direita da tela para melhor
visualização do usuário.
Ilustração para deixar o primeiro contato
mais amigável.
Texto de apresentação com breve
descrição explicando sobre o GUIA de
forma rápida e fácil.
Logo do GUIA.

3. Botão branco com drop shadow ajuda a ter
um destaque sem interferir com o botão
principal de pesquisa.
Apresentação
Opção de login se comportando como
botão terciário.
O drop shadow ajuda a deixar o botão mais
clean e esteticamente agradável, muito
utilizado no material de design.
No momento em que acontece o hover, as
logos ficam coloridas.

4. Para textos com caracteres maiores, a
classe do CSS muda e o tamanho do texto
abaixa para encaixar bem no leiaute.
Apresentação
A indicação do slide muda
automaticamente depois de um tempo.
Ao clicar neste item, o bloco central reduz a
opacidade para zero, revelando o conteúdo de
perguntas frequentes.

5. Apresentação

6. Apresentação
mobile

7. Seta para retornar ao início.
Apresentação interna
Accordion aberto com o ícone de menos.
Elementos geométricos se movendo junto com
a transição de telas.

8. Para textos com caracteres maiores, a
classe do CSS muda e o tamanho do texto
abaixa para encaixar bem no leiaute.
Apresentação interna
Título da página compondo o leiaute.
Elementos geométricos se movendo junto com
a transição de telas.

9. Apresentação
interna mobile

10. Máscara de opacidade para destacar a
modal no centro da tela.
Login
Explorando o gradiente para unificação do
leiaute, mantendo a modal clean.
Botão fora da caixa, buscando se
diferenciar do que é padrão.

11. Login variações

12. Login variações

13. Login mobile

14. Link para retornar. Isso faz com que o
usuário tenha facilidade em navegar pelo
GUIA, indo e voltando quando quiser.
E-mail
Identificação de navegação. Faz com que o
usuário saiba onde está no GUIA.
Avançar em BOLD traz destaque para que
o usuário possa dar continuidade ao GUIA.
Input com destaque, dando bastante foco
ao item que o usuário está preenchendo.
Label de pergunta em BOLD com
destaque e foco, com comunicação simples
e objetiva em cada step do GUIA.
Barra de progresso durante o GUIA.

15. Nome
A identificação é alterada a cada passo do
processo de preenchimento.
Perguntas informais quebram a
formalidade do formulário, deixando a
experiência mais amigável e empática.
Barra de progresso segue em avanço
durante todo o GUIA.

16. Senha

17. E-mail, nome e senha mobile

18. Atuação da empresa
A seleção menu lista é algo que já está no
hábito do usuário. Então, pela variação
enorme de estados e municípios,
mantemos o comportamento.

19. Atuação da empresa
Abre lista com scroll de todos os estados.
Quando um estado é clicado, o texto fica em
bold com um ícone de check.
Com isso, a caixa fecha e o estado fica
ativado.

20. Atuação da empresa
Com o estado ativado, é revelado o
município, com o mesmo comportamento
que é mostrado no campo de estado.

21. Atuação da empresa mobile

22. Onde deseja pesquisar?

23. Onde deseja pesquisar? Mobile

24. Atuação da empresa
Os botões terão comportamento de
preto com opacidade baixa para que,
visualmente, os tons do Background
fiquem mais escuros, dando destaque
ao texto branco.

25. Atuação da empresa
Quando o hover acontece, o botão fica
branco, com drop shadow e tooltip
mostrando o que aquele item
específico representa.

26. Atuação da empresa
Com ele ativado, um ícone de check é
revelado, mostrando que o item foi
selecionado.

27. Atuação da empresa mobile

28. Onde você atua?

29. Onde você atua? Hover

30. Onde você atua? Ativo

31. Onde você atua? Mobile

32. Funcionários
A interação muda neste momento.
O usuário poderá interagir puxando e
arrastando o círculo menor para chegar ao
seu objetivo de funcionários.
Importante fazer com que este campo se
torne editável.
O tooltip fica pulsando de baixo para cima
antes de o usuário interagir com o range.

33. Funcionários
O range muda de cor quando o círculo se
movimenta. Lembrando que a cor utilizada
é a que aparece na paleta principal.
O valor muda como se fosse um
caça-níquel.

34. Funcionários mobile

35. Faturamento
Mesmo comportamento do passo anterior,
porém precisa ter um movimento diferente
para não entediar o usuário.

36. Faturamento
O texto dentro do tooltip muda de acordo
com o movimento do mouse.

37. Faturamento mobile

38. O que sua empresa precisa?

39. O que sua empresa precisa? Hover

40. O que sua empresa precisa?
Caso não encontre o que deseja, o usuário
precisa ter a opção de retornar.
#IMPORTANTE
Assim que o usuário seleciona o item
anterior, ele é direcionado para essa lista de
subitens do item selecionado.

41. O que sua empresa precisa?
Assim que o hover acontece, o botão
muda de cor.

42. O que sua empresa precisa?
Assim que é ativado, o botão ganha
ícone de check.

43. O que sua empresa precisa? Ativado

44. O que sua empresa precisa? Mobile

45. Resumo
Assim que o mouse passa sobre cada
item, é necessário que um link de
editar esteja visível.
Ao concluir a consulta e revisar os dados, o
usuário poderá clicar no botão destacado
“Tudo ok”.

46. Resumo
Assim que o mouse passa sobre cada
item, é necessário que um link de
editar esteja visível.

47. Resumo

48. Resumo

49. Resumo mobile

50. Resultado
O usuário precisa de uma opção para
filtrar tudo o que precisa para simplificar
e direcionar o resultado da sua busca.
Menu de acesso rápido. Algo muito
utilizado pelo Twitter, Google Inbox etc.
Caso o usuário queira fazer nova pesquisa,
ele tem sempre à disposição o botão.
O cabeçalho é fixo. Quando o Scroll
acontece, o cabeçalho permanece fixo.

51. Resultado mobile

52. Resultado negativo + mobile

53. Detalhe do resultado
O usuário tem sempre um conteúdo
relacionado com o que ele está
pesquisando. Isso faz com que ele
permaneça por mais tempo no GUIA.

54. Detalhe do resultado mobile

55. Menu de acesso rápido
Neste menu, o usuário tem sempre ao
alcance seus dados, links favoritados, além
de poder enviar sugestão e solicitar ajuda.

56. Menu de acesso rápido mobile

57. Contato

58. Contato

59. Contato mobile

60. Nesta opção que damos na tela inicial, o
fluxo segue para quem vai ajudar com
novos conteúdos para serem cadastrados.
Instrumentos

61. Formulário de
instrumentos
+ mobile

62. Formulário de
instrumentos
+ mobile

63. Formulário de
instrumentos
+ mobile

64. Formulário de
instrumentos
+ mobile

65. Assim que o usuário concluir o formulário,
vai existir pré-visualização do box do
instrumento.
Resultado formulário

66. Cadastro encontrado
Caso o usuário queira adicionar novo link,
ele tem sempre à disposição o botão.

67. Resultado formulário mobile