UI Redesign: Banco Next

Estudo pessoal de UI sobre o app de um banco digital voltado ao público jovem, para iOS. É um exercício independente, sem vínculo com a instituição, feito em Figma e Photoshop.

O objetivo foi reinterpretar a interface em modo escuro, com a cor de marca como único acento, e organizar as funções financeiras para que as tarefas frequentes fiquem visíveis logo na primeira tela.

O conceito é "dinheiro sob controle, sem ruído". Fundo grafite quase preto e um verde elétrico dão à interface um ar tecnológico e jovem, e deixam o saldo e as ações em primeiro plano.

As telas aparecem em mockups inclinados sobre formas geométricas verdes, que fazem eco ao logotipo e criam dinamismo na apresentação sem competir com a interface.

A paleta usa o esquema monocromático com acento: neutros escuros quase sem saturação e um único matiz (verde, perto de 150° no círculo cromático) em saturação alta. Quanto menos cores competem, mais o olho vai direto ao que importa.

O verde tem forte associação com dinheiro, crescimento e "aprovado", o que reforça o contexto financeiro. Em fundo escuro, o contraste simultâneo faz o verde parecer ainda mais luminoso, e por isso ele funciona como ponto focal para ícones, botões primários e entradas de dinheiro.

• #1B1B1BPreto grafiteFundo base e superfícies
• #0DC561Verde neonAções, ícones de serviço e estados positivos
• #009A3CVerde de marcaFormas gráficas e ilustração de fundo
• #FFFFFFBrancoTexto principal e valores

Leitura: o verde neon sobre grafite chega a AAA e o texto branco tem contraste altíssimo. O verde de marca mais escuro (#009A3C) só passa em AA com folga mínima, por isso é usado em formas e não como texto corrido.

Hex amostrados da arte final publicada; podem diferir levemente dos tokens originais do Figma.

A apresentação usa títulos em sans-serif larga e pesada, com forte presença. Dentro do app, a tipografia é neutra e legível, com hierarquia feita por peso e tamanho e não por cor.

• Saldo e valores: maior corpo da tela, em peso forte, para leitura em meio segundo.
• Rótulos de seção: caixa-alta pequena com espaçamento entre letras (ex.: SERVIÇOS), funcionando como separador sutil.
• Texto de apoio: cinza claro em corpo menor, para datas e categorias.

• Hierarquia visual: o saldo fica no topo e é o elemento maior, seguido da grade de serviços. O olhar percorre a tela de cima para baixo.
• Grade de 3 colunas: os serviços (Área Pix, Pagar, Transferir, Meus cartões, Investir...) são ladrilhos iguais, com ícone e rótulo. Segue a lei da similaridade e da proximidade (Gestalt): o que parece igual é lido como grupo.
• Lei de Fitts e zona do polegar: a navegação inferior tem apenas 3 destinos (notificações, home, ajustes), com alvos grandes ao alcance do polegar.
• Divulgação progressiva: transferências e cartões abrem em bottom sheets, mantendo o contexto da tela anterior e escondendo detalhes até serem necessários.
• Região comum: cartões arredondados agrupam transações por data (Hoje, 13 de junho).

• Login + Home: a tela inicial combina foto em preto e branco com dois botões de pesos diferentes, Criar conta (verde, ação primária) e Já tenho conta (claro, secundária). Hierarquia de ação clara. Na home, o saldo pode ser ocultado pelo ícone de olho, uma preocupação de privacidade em espaços públicos.
• Extrato: cartão de crédito com gradiente verde no topo, lista de transações com ícone de entrada (verde) e saída (cinza), filtro e rolagem. O ícone e o sinal de + e - evitam depender só da cor.
• Fatura: valor da fatura do mês, gráfico de linha com tooltip no ponto selecionado e lista de assinaturas (Netflix, Spotify...) com data e valor. O gráfico usa rotulagem direta, em vez de legenda separada.
• Bônus: exploração do cartão físico com o mesmo grafismo, mostrando coerência entre produto digital e físico.

• Visibilidade do estado do sistema: saldo, limite disponível e fatura do mês sempre à vista.
• Reconhecimento em vez de memorização: ícone e rótulo juntos em todos os serviços.
• Consistência e padrões: um mesmo conjunto de ícones, cantos arredondados e espaçamentos em todas as telas.
• Design estético e minimalista: uma cor de acento e poucos pesos tipográficos.
• Controle e liberdade: filtros no extrato e ocultar saldo.

O estudo atende bem ao contraste do texto principal. Para uma versão de produção, estes são os próximos passos:

• Definir tamanhos mínimos de toque (44 pt no iOS) e testar os ladrilhos de serviço.
• Garantir suporte a Dynamic Type (texto ampliável) nos valores e rótulos.
• Validar o verde de marca escuro como texto apenas em corpo grande ou usar a versão neon.
• Fazer teste de usabilidade com 5 pessoas nas tarefas pagar, transferir e ver fatura, para medir tempo e erros.