design-interface/index.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
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Design de Interfaces - Trabalhos Práticos</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" class="active">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">Trabalho 5</a></li>
                <li><a href="trabalho6.html">Trabalho 6</a></li>
            </ul>
        </div>
    </nav>

    <main class="container">
        <section class="content-section">
            <h2>Trabalhos Práticos de Design de Interfaces</h2>
            <p>Este site apresenta os 6 trabalhos práticos desenvolvidos para a disciplina de Design de Interfaces.</p>
            <p>Cada trabalho aborda diferentes aspectos do design gráfico e de interfaces, desde princípios básicos até
                tendências atuais e acessibilidade.</p>
        </section>

        <section class="content-section">
            <h2>Lista de Trabalhos</h2>

            <div class="principles-grid">
                <a href="trabalho1.html" class="principle-card" style="text-decoration: none; color: inherit;">
                    <h3>Trabalho 1</h3>
                    <p><strong>Princípios de Composição Visual</strong></p>
                    <p>Alinhamento, proximidade, repetição, contraste, hierarquia e equilíbrio.</p>
                </a>

                <a href="trabalho2.html" class="principle-card" style="text-decoration: none; color: inherit;">
                    <h3>Trabalho 2</h3>
                    <p><strong>Grids e Malhas no Design</strong></p>
                    <p>Sistemas de grid, tipos de grades e sua importância no design de interfaces.</p>
                </a>

                <a href="trabalho3.html" class="principle-card" style="text-decoration: none; color: inherit;">
                    <h3>Trabalho 3</h3>
                    <p><strong>Hierarquia Visual e Teoria das Cores</strong></p>
                    <p>Técnicas de hierarquia, teoria das cores, harmonia e psicologia das cores.</p>
                </a>

                <a href="trabalho4.html" class="principle-card" style="text-decoration: none; color: inherit;">
                    <h3>Trabalho 4</h3>
                    <p><strong>Formatos de Imagens e Modelos de Cores</strong></p>
                    <p>Formatos de imagem (JPEG, PNG, GIF, SVG), modelos CMYK, RGB, HSB.</p>
                </a>

                <a href="trabalho5.html" class="principle-card" style="text-decoration: none; color: inherit;">
                    <h3>Trabalho 5</h3>
                    <p><strong>Espaços Negativos e Minimalismo</strong></p>
                    <p>Design minimalista, uso do espaço em branco, identidade visual consistente.</p>
                </a>

                <a href="trabalho6.html" class="principle-card" style="text-decoration: none; color: inherit;">
                    <h3>Trabalho 6</h3>
                    <p><strong>Tendências e Acessibilidade</strong></p>
                    <p>Tendências atuais, WCAG, design inclusivo e acessibilidade web.</p>
                </a>
            </div>
        </section>

        <section class="content-section">
            <h2>Sobre o Autor</h2>
            <p><strong>Nome:</strong> Vitor Fontenele</p>
            <p><strong>Número do aluno:</strong> 22400337</p>
            <p><strong>Curso:</strong> DWDM</p>
            <p><strong>Disciplina:</strong> Design de Interfaces</p>
        </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>