NOTAS DO PROFESSOR 📖 O contexto móvel condiciona o design Desenhar para mobile não é encolher o desktop: o ecrã é pequeno, o input é o dedo e o uso acontece em movimento, muitas vezes com uma só mão e ao sol. Estes princípios-chave devem orientar cada decisão de interface. Reforce que clareza e alvos de toque generosos não são luxo, são requisito. 🗣️ Pontos a desenvolver oralmente • Pedir aos formandos exemplos de interrupções típicas no uso mobile • Explicar a regra do alvo mínimo de toque de 44 por 44 pontos • Princípio conteúdo acima de cromo: a interface deve recuar

NOTAS DO PROFESSOR 📖 Duas linguagens de design: Material e HIG Android e iOS têm guias de design próprias e os utilizadores estão habituados a cada uma delas. Conhecer ambos evita interfaces que parecem deslocadas na plataforma errada. Não se trata de decorar a tabela, mas de perceber que cada sistema tem padrões de navegação e elevação distintos. 🗣️ Pontos a desenvolver oralmente • Mostrar o mesmo ecrã em estilo Material e estilo HIG • Diferença entre FAB do Android e botões na barra do iOS • Porque copiar um design de iOS para Android pode estranhar o utilizador

NOTAS DO PROFESSOR 📖 Respeitar os modelos mentais da plataforma Cada utilizador chega à app com expectativas formadas pelo seu sistema: onde está o "voltar", como se partilha, como se navega. Respeitar essas convenções reduz a curva de aprendizagem e aumenta a confiança. Quebrar convenções por capricho estético custa usabilidade. 🗣️ Pontos a desenvolver oralmente • Exemplos de gestos e padrões nativos de iOS e Android • Usar o ícone de partilha nativo em vez de um genérico • Quando inovar e quando seguir a convenção da plataforma

NOTAS DO PROFESSOR 📖 Padrões de navegação mobile A navegação é a coluna vertebral da app: define como o utilizador se move entre secções. A tab bar mostra os destinos principais sempre visíveis, enquanto drawer e bottom sheet acomodam o que é secundário. A regra prática é não sobrecarregar a tab bar, limitando-a a três a cinco destinos. 🗣️ Pontos a desenvolver oralmente • Quando usar tab bar, drawer ou bottom sheet • Problema de meter demasiados itens na navegação principal • Importância de o utilizador saber sempre onde está e como voltar

NOTAS DO PROFESSOR 📖 Hierarquia de botões e alvos de toque A hierarquia de botões diz ao utilizador qual é a acção mais importante de cada ecrã. Só deve existir um botão primário por vista, ou perde-se o sentido de prioridade. Reforce sempre o alvo mínimo de toque: um botão demasiado pequeno é frustrante e exclui quem tem menos destreza. 🗣️ Pontos a desenvolver oralmente • Distinguir primário, secundário e terciário com exemplos visuais • Regra de um único botão primário por ecrã • Medir alvos de toque e relacioná-los com acessibilidade

NOTAS DO PROFESSOR 📖 Formulários que respeitam o utilizador Preencher formulários no telemóvel é trabalhoso, por isso cada campo conta. A label deve estar sempre visível, não apenas como placeholder que desaparece ao escrever. Mostrar o teclado certo para cada campo e validar em tempo real reduz erros e abandono. 🗣️ Pontos a desenvolver oralmente • Porque o placeholder sozinho não substitui a label • Adequar o teclado ao tipo de campo (email, número, telefone) • Desenhar todos os estados do campo, incluindo erro e desativado

NOTAS DO PROFESSOR 📖 Cards, listas e grelhas para organizar conteúdo A escolha entre card, lista e grelha depende do tipo de conteúdo e do espaço disponível. Em ecrãs estreitos, a lista é eficiente; a grelha brilha em conteúdo visual como galerias. Reforce que separar com espaço e divisores subtis é mais elegante do que encher tudo de molduras pesadas. 🗣️ Pontos a desenvolver oralmente • Quando preferir lista, card ou grelha • Como o espaçamento substitui linhas e caixas pesadas • Mostrar exemplos de cada padrão em apps reais

NOTAS DO PROFESSOR 📖 O sistema de 8pt como disciplina de espaçamento Trabalhar com múltiplos de 8 elimina decisões arbitrárias e gera consistência quase automática. Além de uniformizar, escala bem nas várias densidades de ecrã (@1x, @2x, @3x). Apresente o half-step de 4 como recurso para os ajustes mais finos, sem quebrar a lógica. 🗣️ Pontos a desenvolver oralmente • Porque valores arbitrários geram interfaces inconsistentes • Relação do sistema de 8pt com as densidades de ecrã • Praticar o cálculo de espaçamentos em múltiplos de 8

NOTAS DO PROFESSOR 📖 Spacing system com tokens nomeados Nomear os espaçamentos (space-sm, space-md, etc.) transforma valores soltos numa linguagem partilhada com a equipa. Em vez de dizer "16 pixéis", diz-se "space-md", e todos sabem do que se trata. Reforce a margem lateral típica de 16pt como ponto de referência prático. 🗣️ Pontos a desenvolver oralmente • Vantagem de falar em tokens em vez de valores numéricos soltos • Mapear cada token de espaçamento a um uso concreto • Como o spacing system facilita o handoff para o developer

NOTAS DO PROFESSOR 📖 Safe areas: desenhar à volta do hardware Os ecrãs modernos têm notch, Dynamic Island e indicador home que podem tapar conteúdo. A safe area é a zona livre dessas obstruções, onde deve viver tudo o que é interactivo. Fundos e imagens podem ir até à borda, mas botões e texto importante não. 🗣️ Pontos a desenvolver oralmente • Mostrar um ecrã onde um botão fica escondido pelo notch • Distinguir o que pode ir edge-to-edge do que tem de ficar na safe area • Usar os guides nativos de Figma e dos sistemas operativos

NOTAS DO PROFESSOR 📖 Responsividade e abordagem mobile-first Mesmo dentro do mundo mobile há tamanhos muito diferentes, do telefone pequeno ao tablet. Desenhar mobile-first obriga a decidir primeiro o essencial e só depois acrescentar para ecrãs maiores. Reforce que responsividade não é só largura: a orientação e o que se esconde ou reposiciona também contam. 🗣️ Pontos a desenvolver oralmente • Porque começar pelo menor ecrã força priorização de conteúdo • O que reflui, o que se esconde e o que reposiciona ao mudar de tamanho • Considerar portrait e landscape desde o início

NOTAS DO PROFESSOR 📖 Escala tipográfica com papéis claros Uma escala define tamanhos consistentes para cada papel: display, title, body, label, caption. Em vez de escolher tamanhos ao acaso, o designer pega no estilo adequado à função. Sublinhe o corpo mínimo de 16pt no mobile, que evita o zoom automático no iOS e melhora a leitura. 🗣️ Pontos a desenvolver oralmente • Associar cada estilo da escala a um uso concreto no ecrã • Porque corpo abaixo de 16pt prejudica a leitura no telemóvel • Como a escala traz coerência tipográfica a toda a app

NOTAS DO PROFESSOR 📖 Contraste e legibilidade no contexto real As normas WCAG dão rácios concretos: 4.5:1 para texto normal e 3:1 para texto grande. No mobile há um agravante: muitas vezes lê-se sob luz solar intensa, onde o texto cinzento-claro desaparece. Insista em nunca depender só da cor para transmitir informação, pensando em quem tem daltonismo. 🗣️ Pontos a desenvolver oralmente • Testar um ecrã com uma ferramenta de contraste em sala • Simular leitura ao sol reduzindo o brilho do ecrã • Combinar cor com ícones ou texto para não excluir ninguém

NOTAS DO PROFESSOR 📖 Dark mode bem feito não é inverter cores O erro mais comum é pensar que dark mode é trocar branco por preto. Na verdade usam-se cinzentos escuros, reduz-se a saturação e a elevação faz-se por luminosidade, não por sombra. Desenhar os dois temas desde o início, com tokens, evita refazer tudo mais tarde. 🗣️ Pontos a desenvolver oralmente • Porque preto puro cansa a vista e se prefere cinzento escuro • Ajustar saturação das cores vivas no tema escuro • Vantagem de gerir light e dark com os mesmos tokens

NOTAS DO PROFESSOR 📖 Tokens: a base de qualquer design system Um token é uma variável nomeada para um valor de design, seja cor, raio ou espaçamento. O ganho está na centralização: mudar o token num sítio actualiza todo o produto de forma coerente. Este é o conceito que liga tudo o que vem a seguir sobre design systems e handoff. 🗣️ Pontos a desenvolver oralmente • Paralelo entre tokens de design e variáveis em programação • Como os tokens suportam temas (light e dark) com os mesmos nomes • Demonstrar o impacto de alterar um token único no produto

NOTAS DO PROFESSOR 📖 Desenhar todos os estados dos componentes Um componente não vive só no estado de repouso: tem pressed, focused, loading, disabled, error. Esquecer estes estados cria interfaces que parecem mortas ou que confundem o utilizador. Reforce que prever todos os estados é o que distingue um designer cuidadoso de um amador. 🗣️ Pontos a desenvolver oralmente • Listar os estados de um botão e desenhar cada um • Porque o estado focused importa para acessibilidade e teclado • Mostrar o impacto de faltar o estado de loading ou de erro

NOTAS DO PROFESSOR 📖 Microinterações com propósito Microinterações não são enfeite: confirmam acções, mostram progresso e guiam a atenção. A chave é o propósito, e o timing é decisivo. Reforce a faixa de 200-300 ms como ponto de equilíbrio: animações demasiado lentas tornam a app irritante e a sensação de lentidão. 🗣️ Pontos a desenvolver oralmente • Dar exemplos de microinterações úteis versus decorativas • Discutir como o timing afeta a percepção de velocidade • Cuidado com excesso de animação, que distrai e cansa

NOTAS DO PROFESSOR 📖 Feedback imediato em vários canais O utilizador nunca deve ficar a duvidar se a sua acção funcionou. O feedback pode ser visual, sonoro ou háptico, e o háptico (vibração subtil) é especialmente forte no mobile. Sublinhe o uso parcimonioso do som e a regra de dar resposta imediata a cada acção significativa. 🗣️ Pontos a desenvolver oralmente • Combinar feedback visual e háptico para confirmar acções • Porque o som deve ser usado com moderação • Exemplos de ausência de feedback que geram cliques repetidos

NOTAS DO PROFESSOR 📖 Estados vazios, de erro e de carregamento Estes três estados são frequentemente esquecidos, mas são os que mais revelam a qualidade de um produto. O empty state deve orientar o utilizador para a primeira acção, e o error state deve explicar o que falhou e como resolver. Reforce os skeleton screens como alternativa mais elegante ao spinner. 🗣️ Pontos a desenvolver oralmente • Transformar um empty state numa oportunidade de orientação • Estrutura de um bom error state: o que falhou, como resolver, tentar de novo • Vantagem do skeleton screen face ao spinner no carregamento

NOTAS DO PROFESSOR 📖 Componentes em Figma para escalar o design O componente é a unidade reutilizável do design system: edita-se o principal e todas as instâncias acompanham. Combinado com auto layout, adapta-se ao conteúdo sem trabalho manual. Organizar tudo numa biblioteca partilhada dá consistência e velocidade a toda a equipa. 🗣️ Pontos a desenvolver oralmente • Demonstrar a edição de um componente principal a propagar-se • Papel da biblioteca partilhada num projecto de equipa • Ligação entre componentes e o sistema de tokens já visto

NOTAS DO PROFESSOR 📖 Variantes e propriedades aproximam design e código As variantes agrupam num único componente todas as combinações de tipo, tamanho e estado. O developer escolhe a combinação por propriedades, exactamente como faria no código com props. Esta correspondência directa entre Figma e código é o que torna o handoff mais fluido. 🗣️ Pontos a desenvolver oralmente • Mostrar um componente com várias variantes e propriedades • Paralelo entre propriedades de variante e props de componente em código • Como esta estrutura reduz a duplicação de componentes

NOTAS DO PROFESSOR 📖 Especificação para dev como entrega completa O handoff entrega ao programador medidas, cores, tipografia, estados e assets, tudo em linguagem de tokens. O Dev Mode do Figma gera grande parte das specs automaticamente. Reforce que exportar assets nas densidades certas (@1x/@2x/@3x ou SVG) faz parte da entrega profissional. 🗣️ Pontos a desenvolver oralmente • Listar o conteúdo mínimo de uma especificação para dev • Demonstrar o Dev Mode a gerar specs e CSS • Quando exportar em SVG e quando em PNG de várias densidades

NOTAS DO PROFESSOR 📖 Boas práticas de handoff Um ficheiro desorganizado obriga o developer a fazer perguntas constantes; um ficheiro arrumado poupa horas. Nomear camadas e componentes com clareza, documentar regras de uso e marcar interacções são hábitos profissionais. Reforce que a organização do ficheiro é parte do trabalho do designer, não um extra. 🗣️ Pontos a desenvolver oralmente • Convenções de nomenclatura de camadas e componentes • Documentar quando usar cada componente • Organizar páginas e secções para o developer se orientar

NOTAS DO PROFESSOR 📖 Síntese do design de interface mobile Este resumo costura todos os blocos: dos princípios e plataformas aos componentes, layout, tipografia, microinterações e design system. Use-o para os formandos perceberem que tudo converge num produto coerente e entregável. Reforce que tokens e componentes ligam as decisões visuais ao handoff para desenvolvimento. 🗣️ Pontos a desenvolver oralmente • Recapitular a cadeia princípios, componentes, layout, estados, handoff • Reforçar tokens e componentes como espinha dorsal da consistência • Ligar a síntese ao projecto avaliativo da unidade