Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Protótipo Finalizado - Cursos Prototipagem e XD

Gente do céu! Maratonei esses cursos.

Foi a primeira vez que brinquei em uma ferramenta voltada para UI/UX e acreditem, me diverti muito. Dei uma mudada em algumas coisas porque fiquei empolgado haha. Mesmo não tendo as artimanhas de quem é formado em Design, nunca imaginei que poderia criar algo tão bacana assim. Também preciso aprender me organizar melhor com a ferramenta.

Mas chega de papo furado,

https://xd.adobe.com/view/bf7a2639-7615-40d2-5034-39491361e58c-c94b/

Dêem uma olhadelha e façam o máximo de comentários possível.

4 respostas

Boa tarde Cauê, tudo bem? Um projeto de design sempre abre espaço para opiniões. Eu vou dar a minha no seu projeto a fim de te ajudar a ter um resultado melhor.

Dei uma olhada aqui e gostei bastante dos fluxos que você mostrou. Tudo está bem funcional e com o fluxo correto das telas. Inclusive vi que você se preocupou em usar algumas telas para "loading" e para mostrar qual o aspecto de um campo de texto quando ele está preenchido e quando está vazio.

Acredito que alguns elementos poderiam ter um melhor posicionamento para que o usuário consiga escanear mais rapidamente as informações da tela. Vamos por partes:

1 - https://xd.adobe.com/view/bf7a2639-7615-40d2-5034-39491361e58c-c94b/screen/43e55d38-b740-428f-a239-58771f86f71b/Ag-ncia-e-Conta - Nessa tela acredito que você poderia incluir um espaçamento maior no campo de texto, da maneira que está parece um pouco apertado o tamanho para incluir os elementos. Tem um site bem bacana que você pode usar para reutilizar componentes que é o Material Design da Google. Lá tem diversos componentes que são muito bem trabalhados e podemos nos espelhar neles para criar interfaces. Nesse link aqui https://material.io/components/text-fields/ você consegue ver o componente das caixas de texto e pode se basear nelas. Lá ao final da página na área de Specs, tem algumas informações em pixel de como criar esse componente.

O botão de "Entrar na minha conta" parece um pouco grande. Você pode tentar utilizar a mesma coisa para os botões, buscando no site do Material Design https://material.io/components/buttons/. Outro local que dá dicas boas para criação de botões é nesse link https://www.instagram.com/p/B2rUAQGgXcY/?igshid=cs9hkhzv9g19

2 - https://xd.adobe.com/view/bf7a2639-7615-40d2-5034-39491361e58c-c94b/screen/4b90cebc-e294-4aa9-89cf-5c3451e8f637/Home Nessa tela inicial gostei das informações que você utilizou. Acho que poderia na lista do extrato usar os espaçamentos maiores. Da uma olhada novamente no componente de lista do Material Design https://material.io/components/lists/ . Acho que no seu caso, você poderia utilizar algo nessa linha do Material https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1q3CvJyhleDsbYiKaW6uoiDy9opPdmjA-%2Fcontent-hierarchy.png O ícone poderia ficar em volta de um circulo, com o nome do estabelecimento na primeira linha, a data na segunda, e o valor na direita. Bem similar ao que você já fez. Outra coisa aqui nessa tela, é para ter cuidado com a quantidade de pesos de fontes diferentes. É importante escolher alguns tamanhos e pesos de fonte padrão e reutilizá-los no layout. Sem criar diversos tamanhos e pesos diferentes.

Os espaçamentos entre as datas (hoje, ontem, sábado) estão muito próximos aos demais itens da lista. Talvez seja o caso de você se basear nessa referência do Material Design https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F11dYEcDUKU6a0uwWR8pklDlH_Ro17rLo3%2Flists-controls-switch.png . Outra coisa que pode ser mexida é nos ícones. Tente escolher uma família de ícones apenas e utilizar ela ao longo do projeto. Eu sugiro utilizar o Material Icons (do Google também). Tem vááários ícones para você utilizar e todos tem a mesma linguagem, dessa maneira você consegue ter um projeto conciso.https://material.io/icons

O valor do saldo no topo, poderia ter um destaque maior. Um site que eu uso MUITO para buscar referências é o Dribbble, que você pode acessar em www.dribbble.com. Aqui tem algumas referências similares ao que você está buscando. https://dribbble.com/search/shots/popular/mobile?q=wallet . Perceba que vários exemplos usam uma cor no fundo do topo para criar um destaque maior no valor do saldo.

3 - https://xd.adobe.com/view/bf7a2639-7615-40d2-5034-39491361e58c-c94b/screen/bb032e28-2d43-4be5-b1de-9d379ae143f0/Menu-Aberto Gostei dessa sua solução nessa tela. O Material Design também tem documentado muito bem o componente do Floating Button (que é o que você está utilizando nessa tela) https://material.io/components/buttons-floating-action-button/. Da uma olhada lá também para pegar algumas referências. O que eu faria seria talvez utilizar o fundo preto, com opacidade de uns 80%, ao invés de branco. Dessa maneira vai ter mais contraste entre o fundo e os botões, e eles ficarão mais visíveis na tela.

solução!

4 - https://xd.adobe.com/view/bf7a2639-7615-40d2-5034-39491361e58c-c94b/screen/7c67c85d-2e00-4c87-bf8a-b558429aac80/Senha Nessa tela acho que é interessante que você utilize o campo de texto que já foi criado. É importante não variar muitos tipos de elementos no layout. Criando assim um padrão visual mais consistente.

5 - https://xd.adobe.com/view/bf7a2639-7615-40d2-5034-39491361e58c-c94b/screen/881bf081-f666-4c0a-8fd2-f78800aae06b/Feedback-1. Essa tela é uma excelente oportunidade para tentar chamar a identidade visual da marca. Utilize algo que remeta a marca e seja legal para o usuário. Uma referência que você pode procurar é no Dribbble pelo termo Empty State.https://dribbble.com/search/shots/popular/mobile?q=empty%20state . Lá tem diversas referências para você se inspirar.

Espero que tenha ajudado com minhas sugestões. Parabéns pelo seu projeto e bons estudos. Caso queira se aprofundar mais sobre design de interfaces e sobre o programa do Adobe XD, existem outros cursos aqui na plataforma que podem te interessar. Att, André

Olá André, tudo joia?

Nossa, muito obrigado pelos comentários. Vou até colocar tudo num word para ir estudando as telas. Fico muito feliz de ter suas dicas de como melhorar minhas interfaces. Sei que tenho que aprender muito e com paciência eu chego lá. E com certeza vou fazer todos os cursos da Alura que envolvem o XD.

Muito obrigado =D.

Espero que tenha ajudado, fico muito feliz! Qualquer outra dúvida, ou se quiser alguns toques em mais telas pode falar comigo nos fóruns!

Abraço!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software