Antes de mais nada, quero avisar que não desisti do projeto! Eu sei que já fazem algumas semanas desde a última postagem. Estive trabalhando no repositório público e nos mockups, com isso fui adiando as postagens aqui, pois muito que bem. O projeto agora possui um repositório GitHub. Estou me baseando na prova de conceito desenvolvida anteriormente, seguindo tudo que já havia sido validado, e adicionando o pipeline de infraestrutura, aplicando IaC (Infraestrutura como Código) no projeto. Como o foco deste artigo não é falar sobre esse tema, segue um artigo da AWS sobre IaC e seus benefícios.
Ainda faltam criar os templates de outros componentes da infraestrutura, como o API Gateway, as Lambdas e o User Pool do Cognito. Essas etapas vão me tomar algum tempo, principalmente por conta da pesquisa. Estou acostumado a criar recursos pelo portal da AWS, descrever a infraestrutura em arquivos .yaml é novidade para mim. Já havia estudado o tema e feito exercícios introdutórios com CloudFormation e Terraform, nada além do básico.
Caso queira conferir o repositório do projeto, aqui estão os links:
- Repositório: https://github.com/andersonvnieves/mangos
- App publicado: https://mangos.avn.dev.br
No frontend eu fiz apenas um bootstrap do projeto, configurando as bibliotecas que eu vou usar, preparando o pipeline, os recursos de Infraestrutura com IaC e pude ver funcionando de ponta a ponta. Por hora se você acessar o link do projeto vai ver isso apenas:
Depois dessa atualização sobre o andamento do projeto vamos ao assunto principal deste artigo.
Hoje quero falar um pouco sobre como foi o processo de design, de criação dos mockups, levando em consideração que eu não sou um designer de interfaces. Comecei ouvindo as vozes da minha cabeça… brincadeira. Na verdade eu comecei o processo procurando conteúdos sobre o tema de quem já trabalha com isso, existem vários canais no Youtube de designers de UI que acabam dando dicas de como desenhar interfaces. Existe também muito portfolio de designes no dribbble e no behance. No pintrest você também consegue achar várias dicas de design de interfaces como por exemplo a regra 60-30-10.
É muito fácil para alguém que não é designer errar a mão na hora de aplicar cor na interface, criar algo visualmente desagradável ou que não direciona a atenção do usuário aonde ela deve ir. Então existem algumas dicas como a regra 60-30-10 para te ajudar a aplicar melhor as cores da sua paleta na interface:
- Porção 60 seria destinada as fundos e painéis com cores mais neutras.
- Porção 30 seria mais destinada aos textos da interface, sendo essa uma cor com um bom nível de contraste com a cor dos fundos.
- Porção 10 que seria uma cor de destaque, geralmente uma cor ligada a marca no caso de um produto. Essa cor se reserva para os “call to action”, ou pontos de interação para o usuário.
Algumas dicas são mais fáceis de ser compreendidas e aplicadas, como por exemplo uma dica simples de como fazer as bordas dos elementos ficarem mais agradáveis visualmente.
Existem vários outros exemplos como esse. Paralelo a isso fui fazendo um benchmarking, avaliando a interface de aplicativos de finanças pessoais que já existem na Play Store e App Store. Isso me ajudou a identificar pontos em que todos os apps tinham em comum, como elementos eram adaptados entre smartphones e desktop em um app semelhante ao que quero desenvolver.
Um ponto de atenção aqui é que esses eram de fato apps mobile (.ipa e .apk), o meu se trata de um web app, ou seja, ainda sim existem diferenças na interface desses dois, por exemplo:
Se você analisar alguns apps nativo de celular a navegação é feita com navigation bars, aquele componente de menus que fica na parte de baixo da tela:
Ele é ótimo para apps nativos que ocupam a tela inteira dos dispositivo, mas para web apps que rodam dentro de um navegador, o espaço na vertical acaba sendo reduzido pela própria interface do navegador.
Então acaba sendo comum web apps utilizem side menus, que fazem uma sobreposição no conteúdo ao serem acionadas e depois somem, assim não ocupando um espaço valiso da pequena tela o tempo inteiro, mesmo quando não em uso. Mesmo apps que contam com web app e app nativo fazem essa distinção. Esse foi o tipo de coisa que investi um pouco de tempo observando em outros apps para ter mais bagagem na hora de pensar na interface do meu projeto.
Estou utilizando o Figma para desenvolver o mockup, ele tem vários recursos interessantes que atendem perfeitamente as necessidades de um projeto pequeno como o meu no nível gratuito. Existem alguns recursos mais avançados para a criação de protótipos navegáveis com condicionais mas alguns desses recursos acabando ficando para as versões paga.
Juntando tudo isso, eu comecei criando no Figma alguns wireframes, que são rascunhos bem simplificados usados pra visualizar a estrutura e disposição dos itens da interface.
Assim eu já pude definir como mais ou menos seria o comportamento e disposição dos cabeçalhos, menus de navegação, uma certa área de contexto (que terá comportamento diferente no desktop, tablet e smartphone) e da área do conteúdo principal.
Acredito já ter mencionado em outras postagens que para esse projeto eu escolhi não utilizar bibliotecas de componentes prontas, nada contra elas, apenas queria passar pelo processo de desenvolver os componentes do zero. Isso fez com que na hora em que eu iniciei o desenvolvimento dos mockups e dos componentes da interface, eu tivesse uma enorme quantidade de tentativas e retrabalhos. Esse é inclusive um processo que acredito que sempre pode ser revisitado no projeto. Então mesmo futuramente quando eu estiver próximo de concluir as funcionalidades o MVP, não vejo problema em fazer melhorias de interface no projeto.
Este texto já está ficando bem longo, para finalizar gostaria então de mostrar o mockup de uma tela chamada “Visão Geral”. Essa tela é uma das principais, ela é que essencialmente substitui o que eu vejo na planilha de Excel. Uma única tela que me mostra todos os recebimentos, despesas, valore investidos e os gastos diários também para cada mês. Permitindo a navegação entre os meses. Tanto para os meses históricos quanto para os futuros, fazendo uma previsão:
Está e a visão no desktop pequeno como em notebooks, então temos um menu de navegação contraído á esquerda podendo ser expandido revelando as labels dos ícones mas por padrão aparecendo contraído mesmo. Em uma visão desktop grande, como em telas grandes, esse menu já poderia aparecer expandido. Então temos uma área grande que se diferencia pela cor de fundo que se destina ao conteúdo principal da tela. e a direita uma barra lateral que se destina a um conteúdo mais dinâmico, exibindo detalhes de onde o usuário selecionar. Neste exemplo, na listagem de gastos diários, o dia 9 está selecionado, então essa barra lateral dinâmica está mostrando detalhes dos gastos do dia 9.
Na visualização de tablet, temos as mesmas informações mas dispostas de forma adaptada ao formato e tamanho do dispositivo. O menu de navegação lateral nessa visualização já vem escondido e aparece um novo componente de cabeçalho no topo da tela com um botão menu, que revelaria o menu de navegação, este formato de componente costuma ser chamado de “navigation drawer”. Outra mudança é que a área principal passa a ocupar a tela inteira na horizontal e o conteúdo dela passa a ser organizado em 2 colunas em vez de 3 na versão de desktop. Por fim a barra lateral direita de conteúdo dinâmico passa a não existir, sendo substituída por um tipo de componente chamado “bottom sheet”, algo parecido com um modal mas que aparece na tela pela parte de baixo e se sobrepõe ao conteúdo sendo exibido, assim que a interação com ele acaba, ela some e o conteúdo que estava por baixo se torna visível novamente.
E por último, a menos visualização do app, a de smartphone. Aqui mantive muito das mudanças feita na visualização de tablet. A grande diferença está na área principal, que pelo tamanho dos dispositivo passa a ter apenas 1 coluna e ganha um componente de aba logo abaixo do título da página para alternar entre os conteúdos que eram exibidos em 2 colunas na versão de tablet.
Com isso encerro o conteúdo sobre como foi o processo para fazer o design da interface sendo uma pessoa que não é designer. Vou continuar ao longo das semanas postando sobre o andamento do projeto.
Top comments (0)