Componentização e Interface Moderna

Este módulo introduz práticas modernas de construção de interfaces utilizadas em:

aplicações Front-end contemporâneas;
landing pages profissionais;
sistemas administrativos;
plataformas SaaS;
dashboards;
interfaces corporativas modernas.

O foco passa a ser:

reutilização;
padronização visual;
componentização;
experiência do usuário;
consistência;
escalabilidade visual;
interfaces mais próximas do mercado profissional real.

Objetivos do Módulo

Ao final deste módulo o estudante deverá ser capaz de:

construir componentes reutilizáveis;
aplicar princípios básicos de UI/UX;
organizar interfaces modernas;
criar design systems básicos;
utilizar tokens visuais;
aplicar microinterações;
implementar dark mode moderno;
desenvolver interfaces contemporâneas adaptativas.

1. Componentização Visual

Fundamentação Teórica

Componentização é a prática de dividir interfaces em partes reutilizáveis.

Exemplos:

cards;
botões;
menus;
banners;
formulários;
hero sections.

Essa abordagem:

reduz repetição;
melhora manutenção;
facilita escalabilidade;
aproxima o aluno dos frameworks modernos.

Estrutura Conceitual

Interface
   ↓
Componentes reutilizáveis
   ↓
Padronização visual

Conceitos Fundamentais

Componente	Finalidade
Card	Conteúdo modular
Botão	Ação/interação
Menu	Navegação
Banner	Destaque visual
Formulário	Entrada de dados
Section	Organização estrutural

Exemplo 1 — Card Reutilizável

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Cards Modernos</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main class="cards">

        <article class="card">

            <img src="html5.webp"
                 alt="Logo HTML5">

            <h2>HTML5</h2>

            <p>
                Estrutura semântica moderna.
            </p>

            <button class="botao">
                Saiba Mais
            </button>

        </article>

        <article class="card">

            <img src="css3.webp"
                 alt="Logo CSS3">

            <h2>CSS3</h2>

            <p>
                Organização visual profissional.
            </p>

            <button class="botao">
                Saiba Mais
            </button>

        </article>

    </main>

</body>
</html>

Arquivo: `style.css`

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 40px;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

.cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    width: 320px;

    background-color: white;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 10px 20px rgba(0,0,0,0.1);

    padding: 20px;

    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    border-radius: 12px;
}

.botao {
    margin-top: 20px;

    padding: 12px 20px;

    border: none;

    border-radius: 8px;

    background-color: #004b8d;

    color: white;

    cursor: pointer;
}

Exemplo 2 — Banner Institucional Reutilizável

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Banner Moderno</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <section class="banner">

        <div class="banner-conteudo">

            <h1>
                Front-end Moderno
            </h1>

            <p>
                HTML5, CSS3 e interfaces profissionais.
            </p>

            <a href="#" class="botao">
                Começar
            </a>

        </div>

    </section>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.banner {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #003366,
            #005599
        );

    color: white;

    text-align: center;

    padding: 40px;
}

.banner-conteudo {
    max-width: 700px;
}

.botao {
    display: inline-block;

    margin-top: 20px;

    padding: 14px 24px;

    background-color: white;

    color: #003366;

    text-decoration: none;

    border-radius: 8px;
}

Discussão Técnica

A componentização:

prepara para frameworks futuros;
reduz redundância;
melhora consistência;
facilita manutenção.

Referências

Livros

Atomic Design
Refactoring UI

Sites

2. UI/UX Básico

Fundamentação Teórica

UI (User Interface) refere-se à interface visual.

UX (User Experience) refere-se à experiência do usuário.

Mesmo sem JavaScript, HTML5 e CSS3 já permitem:

excelente organização visual;
clareza de navegação;
boa legibilidade;
experiência consistente.

Princípios Fundamentais

Conceito	Função
Hierarquia visual	Organização da atenção
Alinhamento	Ordem visual
Contraste	Destaque
Proximidade	Relação entre elementos
Repetição	Consistência
Usabilidade	Facilidade de uso

Exemplo 1 — Hierarquia Visual

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Hierarquia Visual</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main class="container">

        <h1>
            Curso Front-end
        </h1>

        <h2>
            HTML5 e CSS3 Moderno
        </h2>

        <p>
            Aprenda desenvolvimento Web moderno.
        </p>

        <button>
            Inscreva-se
        </button>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
    background-color: #f5f5f5;
}

.container {
    max-width: 700px;
    margin: auto;
    padding: 40px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

h2 {
    color: #555;
    margin-bottom: 20px;
}

p {
    line-height: 1.6;
}

button {
    margin-top: 20px;

    padding: 14px 24px;

    background-color: #004b8d;

    color: white;

    border: none;

    border-radius: 8px;
}

Exemplo 2 — Contraste e Proximidade

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>UI Básica</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <section class="card">

        <h2>
            Desenvolvimento Web
        </h2>

        <p>
            Interfaces modernas precisam
            de boa organização visual.
        </p>

    </section>

</body>
</html>

Arquivo: `style.css`

body {
    background-color: #222;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.card {
    background-color: white;

    padding: 40px;

    border-radius: 16px;

    max-width: 500px;
}

h2 {
    color: #003366;
}

Discussão Técnica

Boa UI:

reduz esforço cognitivo;
melhora leitura;
aumenta clareza;
melhora navegação.

Referências

Livros

Don’t Make Me Think
The Design of Everyday Things

Sites

3. Design Systems

Fundamentação Teórica

Design Systems são conjuntos organizados de:

componentes;
regras visuais;
padrões;
tokens;
escalas.

Eles permitem:

consistência;
escalabilidade;
manutenção;
padronização.

Conceitos Fundamentais

Conceito	Função
Tokens visuais	Variáveis reutilizáveis
Escalas	Padronização
Espaçamento	Consistência
Componentes	Reutilização

Exemplo 1 — Tokens Visuais

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Tokens CSS</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <h1>
            Design System
        </h1>

        <button class="botao">
            Entrar
        </button>

    </main>

</body>
</html>

Arquivo: `style.css`

:root {

    --cor-primaria: #004b8d;
    --cor-secundaria: #00a86b;

    --espacamento: 20px;

    --raio: 12px;

    --fonte-base: Arial, sans-serif;
}

body {
    font-family: var(--fonte-base);
    padding: var(--espacamento);
}

h1 {
    color: var(--cor-primaria);
}

.botao {
    padding: 12px 24px;

    border-radius: var(--raio);

    border: none;

    background-color:
        var(--cor-secundaria);

    color: white;
}

Exemplo 2 — Escalas de Espaçamento

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Escalas</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <section class="card">

        <h2>
            Interface Escalável
        </h2>

        <p>
            Espaçamentos consistentes
            facilitam manutenção.
        </p>

    </section>

</body>
</html>

Arquivo: `style.css`

:root {

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
}

.card {
    padding: var(--space-4);

    margin: var(--space-3);

    border-radius: 16px;

    background-color: #eee;
}

Discussão Técnica

Design Systems modernos são utilizados em:

Google Material Design;
IBM Carbon;
Microsoft Fluent UI;
grandes aplicações SaaS.

Referências

Livros

Design Systems

Sites

4. Microinterações

Fundamentação Teórica

Microinterações são pequenos feedbacks visuais que:

melhoram UX;
comunicam estado;
orientam ações;
aumentam percepção de qualidade.

Estados Fundamentais

Estado	Função
`hover`	Interação do mouse
`focus`	Navegação/acessibilidade
`active`	Clique
feedback visual	Resposta da interface

Exemplo 1 — Hover e Active

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Microinterações</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <button class="botao">
        Enviar
    </button>

</body>
</html>

Arquivo: `style.css`

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.botao {

    padding: 16px 28px;

    border: none;

    border-radius: 12px;

    background-color: #004b8d;

    color: white;

    cursor: pointer;

    transition:
        transform 0.2s,
        opacity 0.2s;
}

.botao:hover {
    opacity: 0.9;
}

.botao:active {
    transform: scale(0.95);
}

Exemplo 2 — Focus e Acessibilidade

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Focus</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <form>

        <input type="text"
               placeholder="Digite seu nome">

        <button>
            Enviar
        </button>

    </form>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
    padding: 40px;
}

input,
button {

    padding: 12px;

    border-radius: 8px;

    border: 1px solid #ccc;
}

input:focus {

    outline: 3px solid #0077cc;

    border-color: #0077cc;
}

Discussão Técnica

Nunca remover outline sem substituição acessível.

Evitar:

outline: none;

sem fornecer alternativa visual.

Referências

Livros

Refactoring UI

Sites

5. Tendências Modernas

Fundamentação Teórica

Interfaces modernas evoluíram para:

maior minimalismo;
contraste equilibrado;
componentes translúcidos;
dark mode;
design adaptativo;
maior foco em UX.

Tendências Contemporâneas

Tendência	Característica
Glassmorphism	Transparência e blur
Minimalismo	Redução de excesso visual
Dark Mode	Tema escuro
Design adaptativo	Adaptação contextual

Exemplo 1 — Glassmorphism

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Glassmorphism</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <section class="glass">

        <h1>
            Interface Moderna
        </h1>

        <p>
            Exemplo de glassmorphism.
        </p>

    </section>

</body>
</html>

Arquivo: `style.css`

body {

    min-height: 100vh;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            135deg,
            #004b8d,
            #00a86b
        );

    font-family: Arial;
}

.glass {

    width: 320px;

    padding: 40px;

    background:
        rgba(255,255,255,0.15);

    border:
        1px solid rgba(255,255,255,0.3);

    backdrop-filter: blur(10px);

    border-radius: 20px;

    color: white;
}

Exemplo 2 — Dark Mode Adaptativo

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Dark Mode</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main class="container">

        <h1>
            Tema Adaptativo
        </h1>

        <p>
            Interface preparada para dark mode.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

:root {

    --bg: #ffffff;
    --texto: #222;
}

@media (prefers-color-scheme: dark) {

    :root {

        --bg: #121212;
        --texto: #f5f5f5;
    }

}

body {

    background-color: var(--bg);

    color: var(--texto);

    font-family: Arial;

    transition:
        background-color 0.3s,
        color 0.3s;
}

.container {
    padding: 40px;
}

Discussão Técnica

O prefers-color-scheme tornou-se padrão importante em:

sistemas operacionais;
aplicações modernas;
acessibilidade visual;
UX contemporânea.

Referências

Livros

CSS Secrets
Refactoring UI

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Componentização visual;
UI/UX básico;
Design systems;
Tokens visuais;
Microinterações;
Dark mode;
Tendências modernas;
Mini projeto integrador.

Mini Projeto Integrador Sugerido

Construir:

landing page moderna;
design system básico;
cards reutilizáveis;
botões padronizados;
formulário moderno;
dark mode adaptativo;
microinterações;
interface responsiva profissional.

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Atomic Design
Refactoring UI
Don’t Make Me Think
The Design of Everyday Things
Design Systems
CSS Secrets

Plataformas e Documentação

Fim da Aula 06

Linguagem e Técnica de Programação I – Aula 06

Componentização e Interface Moderna

Objetivos do Módulo

1. Componentização Visual

Fundamentação Teórica

Estrutura Conceitual

Conceitos Fundamentais

Exemplo 1 — Card Reutilizável

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Banner Institucional Reutilizável

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

2. UI/UX Básico

Fundamentação Teórica

Princípios Fundamentais

Exemplo 1 — Hierarquia Visual

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Contraste e Proximidade

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

3. Design Systems

Fundamentação Teórica

Conceitos Fundamentais

Exemplo 1 — Tokens Visuais

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Escalas de Espaçamento

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

4. Microinterações

Fundamentação Teórica

Estados Fundamentais

Exemplo 1 — Hover e Active

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Focus e Acessibilidade

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

5. Tendências Modernas

Fundamentação Teórica

Tendências Contemporâneas

Exemplo 1 — Glassmorphism

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Dark Mode Adaptativo

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

Estratégia Pedagógica Recomendada

Sequência Recomendada

Mini Projeto Integrador Sugerido

Ferramentas Profissionais Recomendadas

Bibliografia Geral do Módulo

Livros Fundamentais

Plataformas e Documentação

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`