design-interface/trabalho5.html at main · ffvitor/design-interface · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trabalho 5 - Espaços Negativos e Minimalismo</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="imagens/favicon.png" type="image/x-icon">
</head>
<body>
    <header>
        <div class="titulo-area">
            <img src="imagens/nome.png" alt="Logo VF" class="logo-vf">

            <div class="textos">
                <h1>Design de Interfaces</h1>
                <p>Aluno: Vitor Fontenele | Nº: 22400337 | Curso: DWDM</p>
            </div>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="index.html">Início</a></li>
                <li><a href="trabalho1.html">Trabalho 1</a></li>
                <li><a href="trabalho2.html">Trabalho 2</a></li>
                <li><a href="trabalho3.html">Trabalho 3</a></li>
                <li><a href="trabalho4.html">Trabalho 4</a></li>
                <li><a href="trabalho5.html" class="active">Trabalho 5</a></li>
                <li><a href="trabalho6.html">Trabalho 6</a></li>
            </ul>
        </div>
    </nav>

    <main class="container">
        <section class="content-section">
            <h2>Trabalho 5: Espaços Negativos e Minimalismo</h2>
            <p>No mundo do design, menos é mais. O design minimalista tem conquistado cada vez mais popularidade, com a sua abordagem limpa, simples e sofisticada.</p>
            <p>O minimalismo não se trata apenas de estética, mas também de uma forma de transmitir mensagens de maneira clara e eficaz.</p>
        </section>

        <section class="content-section">
            <h2>Princípios do Design Minimalista</h2>

            <div class="principles-grid">
                <div class="principle-card">
                    <h3>Foco na Simplicidade</h3>
                    <p>Simplificar é remover qualquer elemento desnecessário, deixando apenas o essencial. Eliminar enfeites excessivos e concentrar-se nos elementos-chave.</p>
                </div>

                <div class="principle-card">
                    <h3>Uso Inteligente de Espaços em Branco</h3>
                    <p>O espaço em branco permite que os elementos importantes respirem e se destaquem, criando harmonia e equilíbrio. Direciona a atenção do espectador.</p>
                </div>

                <div class="principle-card">
                    <h3>Tipografia Minimalista</h3>
                    <p>Fontes limpas, simples e legíveis. Evitar estilos extravagantes. Usar uma ou duas fontes que se complementem com diferentes pesos e tamanhos.</p>
                </div>

                <div class="principle-card">
                    <h3>Cores Limitadas</h3>
                    <p>Paleta geralmente limitada a tons sutis com um destaque de cor. Cores sólidas, evitando combinações muito vibrantes ou contrastantes.</p>
                </div>

                <div class="principle-card">
                    <h3>Hierarquia Visual</h3>
                    <p>Criar hierarquia usando tamanho, espaçamento, contraste e posicionamento. Orientar o espectador através do design de forma intuitiva.</p>
                </div>

                <div class="principle-card">
                    <h3>Conteúdo e Espaços Vazios</h3>
                    <p>O espaço em branco é um elemento ativo que influencia legibilidade, hierarquia visual e experiência do usuário. Não é espaço perdido.</p>
                </div>
            </div>
        </section>

        <section class="content-section">
            <h2>Benefícios do Espaço em Branco</h2>
            <ul class="topic-list">
                <li><strong>Melhora a legibilidade:</strong> Textos com espaçamento adequado são mais fáceis de ler</li>
                <li><strong>Reduz sobrecarga cognitiva:</strong> Interfaces menos densas são menos cansativas</li>
                <li><strong>Destaca elementos importantes:</strong> Guia o olhar do usuário para o que importa</li>
                <li><strong>Melhora a navegação:</strong> Separa seções e agrupa informações relacionadas</li>
                <li><strong>Cria sensação de sofisticação:</strong> Design limpo transmite profissionalismo</li>
            </ul>
        </section>

        <section class="content-section">
            <h2>Identidade Visual Consistente</h2>
            <p>Um design de UI bem elaborado traz diversos benefícios para websites e aplicativos. Alguns pontos que mostram a importância do design de UI:</p>

            <div class="principles-grid">
                <div class="principle-card">
                    <h3>Usabilidade</h3>
                    <p>Permite que o usuário interaja com o produto de forma intuitiva e fácil, tornando a experiência mais agradável.</p>
                </div>

                <div class="principle-card">
                    <h3>Atratividade</h3>
                    <p>Design atraente chama atenção e aumenta a probabilidade de os usuários se interessarem pelo produto.</p>
                </div>

                <div class="principle-card">
                    <h3>Clareza</h3>
                    <p>Design claro e fácil de entender evita que o usuário desista de utilizar o produto.</p>
                </div>

                <div class="principle-card">
                    <h3>Consistência</h3>
                    <p>Layout consistente e bem estruturado torna a utilização mais fácil e intuitiva.</p>
                </div>

                <div class="principle-card">
                    <h3>Acessibilidade</h3>
                    <p>Design pensado para atender às necessidades de todos os usuários, independentemente de habilidades.</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>Trabalho Prático de Design de Interfaces - Vitor Fontenele - 22400337</p>
            <p>© 2024 - Todos os direitos reservados</p>
        </div>
    </footer>
</body>
</html>