Questão nº 40
Questão de Tecnologia da Informação · CESGRANRIO BASA 01/2024 (nº 40)
Uma desenvolvedora de interfaces para web em um banco recebeu a tarefa de participar da criação de uma aplicação web para a intranet do banco. O projeto será dividido em três fases. Primeiramente, ela deve criar um modelo wireframe para definir a estrutura básica da interface. Em seguida, ela precisa desenvolver um mockup para adicionar detalhes visuais e interativos ao modelo inicial. Por fim, deve converter o mockup em um modelo funcional em HTML5 que será utilizado no código da aplicação.
Considerando-se esse contexto e a ordem de execução das fases, as ferramentas que essa desenvolvedora deve escolher para otimizar o trabalho e garantir a adequação perfeita a cada fase são, respectivamente,
- AMiro, Adobe XD, Balsamiq
- BSketch, Figma, Miro
- CDreamweaver, Visual Studio, Balsamiq
- DFigma, Balsamiq, Miro
- EBalsamiq, Figma, Dreamweaver (alternativa correta)
Resposta comentada
Gabarito Alternativa E
Conceito-chave: Wireframe, mockup e protótipo funcional são três níveis de fidelidade de uma interface: o wireframe é o esqueleto (baixa fidelidade, só blocos e hierarquia), o mockup é a versão estática com cores, tipografia e detalhes visuais (média fidelidade), e o protótipo funcional é o código real navegável (alta fidelidade). A ferramenta certa para cada fase é aquela que entrega exatamente esse nível de detalhe, sem exageros nem falta de recursos.
- (A) Incorreta: Miro é ótimo para wireframe colaborativo, mas Adobe XD e Balsamiq estão invertidos: Balsamiq é para wireframe (não para mockup) e Adobe XD é para mockup (não para wireframe). A ordem de ferramentas não corresponde à ordem das fases.
- (B) Incorreta: Sketch e Figma são ambos para mockup/protótipo, e Miro é para wireframe — mas a ordem está errada (Miro deveria ser o primeiro, não o último). Além disso, falta uma ferramenta de código HTML5 (como Dreamweaver ou VS Code).
- (C) Incorreta: Dreamweaver é editor de código (serve para a fase 3), Visual Studio também é IDE (fase 3), e Balsamiq é wireframe (fase 1) — mas a ordem está completamente embaralhada e não há ferramenta de mockup (fase 2).
- (D) Incorreta: Figma é mockup (fase 2), Balsamiq é wireframe (fase 1) — ordem invertida; e Miro é wireframe colaborativo, não serve para código HTML5 (fase 3). Armadilha da banca: o aluno vê "Figma" e "Balsamiq" e acha que está certo, mas a ordem das fases está trocada e Miro não é ferramenta de código.
- (E) Correta: Balsamiq é especializado em wireframe de baixa fidelidade (fase 1), Figma é a ferramenta padrão para mockup com design visual detalhado e interações estáticas (fase 2), e Dreamweaver é um editor visual de HTML5 que permite converter o mockup em código funcional (fase 3). A ordem das ferramentas segue exatamente a ordem das fases do enunciado.
Fonte: CESGRANRIO BASA 01/2024 Técnico Científico - Área de Formação: Tecnologia da Informação (Caderno Prova B). Reproduzida para fins de estudo.