NOTAS DO PROFESSOR 📖 UX é processo, não aparência O ponto mais importante deste slide é separar UX de UI logo no início. UX é o método de descobrir o que as pessoas precisam e desenhar soluções que funcionem; a aparência vem depois. Reforce o ciclo research-ideação-prototipagem-teste-iteração como espinha dorsal de tudo o que se segue na unidade. 🗣️ Pontos a desenvolver oralmente • Dar um exemplo de produto bonito mas com má UX para fixar a distinção • Sublinhar que a iteração nunca termina: testa-se e melhora-se sempre • Ligar cada fase do processo aos artefactos que os formandos vão produzir

NOTAS DO PROFESSOR 📖 O wireframe comunica estrutura, não estilo O wireframe serve para discutir layout e arquitectura de informação sem o ruído de cores e tipografia. A "feiura" propositada é intencional: impede que a conversa derive para gostos pessoais de cor. Insista em que o wireframe não é protótipo funcional nem representação da marca. 🗣️ Pontos a desenvolver oralmente • Explicar porque mostrar cor cedo desvia o feedback do que importa • Dar exemplos do que um wireframe NÃO é, para evitar mal-entendidos com clientes • Ligar wireframe à documentação da arquitectura de informação

NOTAS DO PROFESSOR 📖 Low-fi versus high-fi: rapidez antes de detalhe A regra de ouro é começar sempre em low-fi e só subir de fidelidade quando a estrutura está validada. Investir tempo em detalhe visual antes de a estrutura estar certa é desperdício, porque é provável que tudo mude. Faça os formandos sentir o ganho de velocidade dos esboços rápidos. 🗣️ Pontos a desenvolver oralmente • Tempo de produção como critério de escolha entre low-fi e high-fi • O risco de pular para high-fi cedo demais e ter de refazer • Quando o high-fi é mesmo necessário (aprovação, testes com utilizadores)

NOTAS DO PROFESSOR 📖 Figma como standard da indústria Vale a pena enquadrar porque é que o Figma se tornou o standard: é colaborativo, vive no browser e funciona em qualquer sistema. Os quatro conceitos fundamentais (frames, componentes, auto layout, styles) são a base de tudo o que se faz a seguir. Tranquilize quem nunca usou: a versão gratuita chega de sobra para aprender. 🗣️ Pontos a desenvolver oralmente • Vantagem da colaboração em tempo real face a ferramentas locais • Distinguir frame, componente, auto layout e style com um exemplo de cada • Mencionar alternativas e porque o Figma domina o mercado actual

NOTAS DO PROFESSOR 📖 Frames e grids como fundação do ecrã O frame é o ecrã onde tudo acontece e o grid é o que mantém o alinhamento coerente entre elementos. Reforce que usar presets de dispositivo (iPhone, desktop) evita desenhar em dimensões irreais. O grid não é só estética: é também a linguagem com que se comunica espaçamento ao developer. 🗣️ Pontos a desenvolver oralmente • Diferença entre grid de mobile (4 colunas) e de desktop (12 colunas) • Importância de desenhar nas dimensões reais do dispositivo-alvo • Como o grid acelera a fase de handoff

NOTAS DO PROFESSOR 📖 Auto Layout: layout que responde ao conteúdo O Auto Layout é o que aproxima o Figma do comportamento real do código, ajustando o componente ao conteúdo. Quem já conhece flexbox em CSS reconhece a lógica de imediato. Demonstre ao vivo um botão que cresce com o texto: é o "momento aha" desta funcionalidade. 🗣️ Pontos a desenvolver oralmente • Paralelo entre Auto Layout e flexbox para quem vem do código • Casos típicos: cards de lista, navegação, formulários • Como padding e gap mantêm o espaçamento consistente automaticamente

NOTAS DO PROFESSOR 📖 O papel ainda é a ferramenta mais rápida O esboço em papel continua a ser imbatível para gerar ideias depressa, antes de abrir qualquer software. O exercício Crazy 8s força variedade e combate o apego à primeira solução. Incentive os formandos a digitalizar com o telemóvel para integrar os esboços no fluxo digital. 🗣️ Pontos a desenvolver oralmente • Conduzir um Crazy 8s em sala como atividade prática • Porque a quantidade de ideias gera melhor qualidade final • Quando faz sentido saltar o papel e ir direto ao digital

NOTAS DO PROFESSOR 📖 Vocabulário visual do wireframe low-fi Há uma linguagem partilhada no low-fi: caixa com X para imagem, linhas para texto, caixa simples para botão. Aprender este vocabulário permite que toda a equipa leia o wireframe da mesma forma. As anotações de comportamento são tão importantes como os desenhos, porque explicam o que não se vê. 🗣️ Pontos a desenvolver oralmente • Praticar os símbolos universais do low-fi num exercício rápido • A regra de não usar cor, excepto no elemento de acção principal • Valor das anotações para descrever interacções e comportamento

NOTAS DO PROFESSOR 📖 A transição controlada para high-fi A passagem para high-fi acontece por gatilhos claros: estrutura aprovada, fluxo validado, variante escolhida. Reforce que o high-fi acrescenta tipografia, espaçamento e componentes reais, mas continua a não ser UI design completo. Mostre os bancos de ícones gratuitos como recurso imediato para os formandos. 🗣️ Pontos a desenvolver oralmente • Quais os critérios objectivos para avançar de low-fi para high-fi • Distinguir wireframe high-fi de mockup visual final • Onde obter ícones e tipografia gratuitos de qualidade

NOTAS DO PROFESSOR 📖 Componentes: criar uma vez, reutilizar sempre O poder dos componentes está na propagação: editar o componente principal actualiza todas as instâncias de uma vez. Isto poupa horas e garante consistência num projecto com muitos ecrãs. As variantes permitem guardar estados (default, hover, disabled) dentro de um único componente organizado. 🗣️ Pontos a desenvolver oralmente • Demonstrar ao vivo a propagação de uma alteração no componente principal • Diferença entre instância e componente principal • Como as variantes organizam os vários estados num só sítio

NOTAS DO PROFESSOR 📖 User flow versus task flow A distinção é de escala: o user flow abrange todo o percurso com ramificações; o task flow foca uma tarefa específica e linear. Use o exemplo da compra para mostrar que o user flow inclui os caminhos alternativos (falha de pagamento, produto esgotado). Mapear estes fluxos antes de desenhar ecrãs evita esquecer percursos importantes. 🗣️ Pontos a desenvolver oralmente • Desenhar em conjunto um user flow e um task flow do mesmo cenário • Porque os caminhos alternativos pertencem ao user flow • Ligar o fluxo aos ecrãs concretos que serão wireframados

NOTAS DO PROFESSOR 📖 Sitemap e a importância dos edge cases O sitemap mostra a hierarquia das páginas, ou seja, a arquitectura de informação do produto. O ponto mais formativo aqui é o contraste entre happy path e edge cases: o que corre bem é fácil de desenhar, o difícil é prever os erros. Designers menos experientes esquecem os edge cases, e é aí que os produtos falham. 🗣️ Pontos a desenvolver oralmente • Construir um sitemap simples de um produto conhecido • Listar em sala vários edge cases de um formulário de registo • Reforçar que prever erros faz parte do trabalho do designer

NOTAS DO PROFESSOR 📖 O handoff como ponte para o desenvolvimento O handoff é o momento em que o design passa para quem vai construir, e a sua qualidade determina a fidelidade da implementação. Reforce que entregar só o ecrã não chega: é preciso especificações, assets e notas de comportamento. Um handoff incompleto gera idas e vindas constantes com o developer. 🗣️ Pontos a desenvolver oralmente • Listar tudo o que um pacote de handoff deve conter • Distinguir o design visual das notas de comportamento e estados • Importância de exportar assets nos formatos certos

NOTAS DO PROFESSOR 📖 Figma Inspect: specs sem fricção O Figma Inspect democratizou o handoff: o developer clica num elemento e vê medidas, cores e tipografia, podendo copiar código diretamente. Mostre que isto reduz drasticamente o trabalho manual de redlines. Basta partilhar o ficheiro no modo certo para o developer ter autonomia. 🗣️ Pontos a desenvolver oralmente • Demonstrar o modo Inspect a extrair CSS de um elemento • Como configurar a partilha em modo view ou inspect • Vantagem face ao processo antigo de medir tudo à mão

NOTAS DO PROFESSOR 📖 Anotações e redlines que evitam ambiguidade Muitos comportamentos não são visíveis num ecrã estático: um carousel, um campo de password, uma lista infinita. As anotações tornam essas interacções explícitas para quem implementa. Embora o Figma Inspect substitua os redlines manuais, eles continuam úteis para clientes e documentação. 🗣️ Pontos a desenvolver oralmente • Escrever em sala anotações claras para uma interacção complexa • Distinguir o que se anota do que o Inspect já mostra automaticamente • Quando ainda vale a pena produzir redlines manuais

NOTAS DO PROFESSOR 📖 Síntese: do problema ao handoff Este fecho condensa o percurso completo: entender a experiência, comunicar estrutura, low-fi antes de high-fi, fluxos com edge cases e handoff anotado. Aproveite para os formandos perceberem que cada etapa alimenta a seguinte. Reforce a frase-chave: um bom wireframe não é bonito, é claro. 🗣️ Pontos a desenvolver oralmente • Recapitular a sequência UX, wireframe, Figma, fluxos, handoff • Reforçar a primazia da clareza sobre a estética • Ligar a síntese ao projecto avaliativo da unidade