UA7 — Projetando o Site
Projetar o site significa definir sua arquitetura de informação, fluxo de navegação e identidade visual antes de escrever código.
Arquitetura de Informação
Organização e estruturação do conteúdo para que o usuário encontre o que precisa facilmente:
- Mapa do site (Sitemap): hierarquia de todas as páginas.
- Fluxo do usuário: caminhos que o usuário percorre para completar tarefas.
- Navegação: menus, breadcrumbs, links internos.
Processo de Design
| Etapa | Entregável |
|---|---|
| 1. Pesquisa / briefing | Personas, benchmark de concorrentes |
| 2. Arquitetura | Sitemap, fluxos de usuário |
| 3. Wireframe | Esboço de baixa fidelidade da estrutura |
| 4. Identidade visual | Paleta de cores, tipografia, ícones |
| 5. Mockup/Protótipo | Telas com visual final no Figma |
| 6. Implementação | HTML + CSS + JS |
Boas práticas de UX/UI
Consistência
Mesmos estilos, comportamentos e vocabulário em toda a interface.
Feedback
O sistema sempre avisa o usuário sobre o resultado de suas ações.
Mobile First
Projete primeiro para a menor tela, expanda progressivamente.
Acessibilidade
Contraste adequado, texto alternativo, navegação por teclado.
Paleta de cores — referência rápida
Use a regra 60-30-10: 60% cor dominante (fundo), 30% cor secundária (texto/elementos), 10% cor de destaque (CTAs).
Site estático vs. aplicação web
| Característica | Site Estático | Aplicação Web |
|---|---|---|
| Interatividade | Baixa | Alta |
| Personalização | Limitada | Avançada |
| Atualização de conteúdo | Manual (editar arquivo) | Dinâmica (banco de dados) |
| Uso de banco de dados | Raro | Frequente |
| Exemplos | Páginas institucionais, blogs simples | Lojas virtuais, redes sociais, e-learning |
Fases do desenvolvimento de uma aplicação web
| Fase | O que envolve | Entregável |
|---|---|---|
| 1. Definição de requisitos | Identificar funcionalidades, público-alvo, tecnologias | Documento de requisitos (RF / RNF) |
| 2. Projeto de sistema | Arquitetura, wireframes, banco de dados | Protótipo, modelo de dados |
| 3. Implementação e teste unitário | Escrever o código; testar cada componente isolado | Código-fonte + testes |
| 4. Integração e teste de sistema | Verificar se todos os componentes funcionam juntos | Aplicação integrada validada |
| 5. Operação e manutenção | Publicar, monitorar, corrigir bugs e evoluir | Sistema em produção |
Principais frameworks e ferramentas
| Ferramenta | Tipo | Para quê |
|---|---|---|
| Bootstrap | Framework CSS (Twitter) | Layout responsivo rápido com classes utilitárias e componentes prontos |
| React | Biblioteca JS (Meta/Facebook) | Interfaces componentizadas com Virtual DOM — camada de visualização |
| Laravel | Framework PHP (Taylor Otwell) | Backend MVC robusto — roteamento, ORM Eloquent, autenticação integrada |
| Vue.js | Framework JS progressivo | Interfaces reativas; curva de aprendizado menor que React |
| Node.js | Runtime JS (servidor) | JavaScript no backend — APIs REST, tempo real |
Requisitos — funcionais vs. não funcionais
| Tipo | Descrição | Exemplo prático |
|---|---|---|
| Funcional (RF) | O que o sistema deve fazer | ”O sistema deve permitir que usuários façam login e logout” |
| Não funcional (RNF) | Como o sistema deve se comportar | ”As páginas devem carregar em menos de 2 segundos”; “Suportar dispositivos móveis” |
Práticas Modernas — Desenvolvimento Web
Design System: biblioteca de componentes visuais reutilizáveis (botões, cores, tipografia) que garante consistência em produtos digitais — Google Material, Apple HIG, Tailwind UI. Acessibilidade (WCAG): diretrizes internacionais — contraste mínimo 4,5:1 para texto normal, navegação por teclado, atributos ARIA. É requisito legal em muitos países. Progressive Web Apps (PWA): sites que se comportam como apps nativos — instaláveis, funcionam offline (Service Worker), notificações push. Figma: ferramenta de design colaborativo que substituiu Adobe XD e Sketch como padrão da indústria para wireframes, mockups e protótipos interativos.
Dicas para a prova — UA7
- Uma aplicação web difere de um site estático por ter interatividade, personalização e uso de banco de dados.
- Bootstrap foi desenvolvido pela equipe do Twitter; facilita criação de layouts responsivos.
- React usa Virtual DOM para melhorar performance — não atualiza o DOM real diretamente.
- Laravel adota o padrão MVC (Model-View-Controller) e possui ORM chamado Eloquent.
- As fases em cascata: requisitos → projeto → implementação/teste → integração → operação.
- Regra 60-30-10: 60% cor dominante, 30% secundária, 10% destaque.
Referências bibliográficas desta UA
- Serpa, M. S. Ferramentas de Desenvolvimento Web. Porto Alegre: SAGAH, 2024.
- Sommerville, I. Engenharia de Software. 10. ed. São Paulo: Pearson, 2018.