MedTalk — UI Design

MedTalk é um conceito de app mobile para aprendizagem e troca entre profissionais de saúde (fisioterapia, nutrição, endocrinologia, massoterapia, entre outras). O usuário acessa conteúdos, participa de comunidades e publica artigos.

O projeto cobre o ciclo completo de uso: autenticação e cadastro, descoberta de conteúdo, comunidades abertas, moderação de membros, publicação e perfil. Foi publicado como estudo de caso de UI em Figma.

O conceito é "clínico, mas acolhedor". Superfícies brancas e muito espaço em branco passam limpeza e confiança, enquanto um azul-ciano traz energia e humanidade. As fotos de conteúdo (ex.: autocuidado no diabetes) ancoram o app no universo da saúde.

O logotipo, com letra M e linhas de velocidade, comunica fluxo de conversa e conhecimento e inspira os ícones e destaques em azul.

A paleta é análoga e fria (azul a ciano, matizes vizinhos entre ~195° e ~205°), com brancos e cinzas neutros. Azuis e cianos associam-se a confiança, calma, limpeza e ciência, o que é desejável na saúde.

As cores de feedback seguem convenções: verde para aceitar/sucesso e vermelho para recusar/remover/erro. Nas ações da moderação, as cores sempre vêm com ícone (✓ e ✕), o que evita depender só da cor.

• #3C9DEDAzul de marcaLogotipo e destaques
• #18B7E8Ciano de açãoBotões, links e faixa de comunidades
• #FFFFFFBrancoSuperfície dos cartões e telas
• #221C2FGrafiteTexto principal (aprox.)

Leitura crítica: o ciano de ação sobre branco fica em torno de 2,3:1, abaixo do mínimo de 4,5:1 para texto. Para uma versão de produção, a ação principal subiria para um ciano mais escuro (por exemplo #1180A2, que chega a 4,5:1 com texto branco), mantendo o ciano claro só em fundos e faixas.

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

Combinação de duas famílias sans-serif: uma geométrica, forte, para títulos e marca, e uma humanista arredondada, mais amigável, para a interface. A hierarquia vem do peso e tamanho: títulos de seção (Destaques, Recentes, Comunidades) em peso médio, textos de apoio em cinza mais claro.

• Carrosséis horizontais com o próximo cartão parcialmente visível: o corte do cartão na borda funciona como signifier de rolagem, sem precisar de instrução.
• Agrupamento por seções rotuladas (Destaques, Recentes, Comunidades): chunking segundo a lei de Miller, que reduz carga cognitiva.
• Faixa azul clara para Comunidades: a mudança de fundo cria uma região comum distinta e separa tipos de conteúdo.
• Botão flutuante (+) para a ação principal da tela, fácil de alcançar com o polegar.
• Cabeçalho enxuto com busca, perfil e menu: os atalhos essenciais sem poluir.

• Login: CPF e senha com campos de linha, link de recuperação visível e dois botões com pesos distintos: Entrar (preenchido) e Criar conta (contorno).
• Recuperar senha com tratamento de erro: a mensagem em vermelho explica o problema (e-mail não consta na base) e oferece o caminho de recuperação (realizar cadastro), seguindo o princípio de que o erro deve dizer o que houve e como resolver.
• Cadastro em duas etapas ("Passo 1 de 2"): divide um formulário longo, mostra progresso e traz dicas de formato (DD/MM/AAAA) no próprio campo.
• Comunidades: cartões com status (aberta), número de participantes e notificações; telas de gerenciar participantes e solicitações com aceitar ou recusar e feedback por snackbar ("Solicitação aceita").
• Conteúdo: artigo com conteúdo relacionado, classificação por estrelas e campo de comentário.
• Publicação: formulário com tags e anexo de arquivo, com botão primário "Publicar".
• Perfil do membro: cursos realizados, curso atual e áreas de interesse, que dão contexto profissional ao participante.

• Visibilidade do estado: progresso do cadastro (passo 1 de 2) e confirmação por snackbar.
• Prevenção e recuperação de erros: dicas de formato e mensagens de erro com saída.
• Correspondência com o mundo real: linguagem do setor (cursos realizados, áreas de interesse).
• Consistência: botões primário e secundário seguem o mesmo padrão em todas as telas.
• Controle do usuário: seta de voltar em todas as telas internas.

• Ajustar o contraste da ação principal e dos links (veja a tabela).
• Aumentar o tamanho dos textos de apoio nos cartões de comunidade, hoje pequenos.
• Garantir rótulos de leitor de tela nos botões só com ícone (remover participante, aceitar, recusar).
• Validar a máscara de CPF e o fluxo de recuperação com usuários reais.