-
Notifications
You must be signed in to change notification settings - Fork 0
/
taverna.html
195 lines (134 loc) · 8.04 KB
/
taverna.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alan Fernandes - Taverna</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/taverna.min.css">
</head>
<body>
<nav>
<button class="hamburger" aria-label="Menu">
<div>
<span></span>
<span></span>
<span></span>
</div>
<p>Menu</p>
</button>
<ul>
<li><a href="index.html#sobre">Sobre mim</a></li>
<li><a href="index.html#projetos">Projetos</a></li>
<li><a href="index.html#hobbies">Hobbies</a></li>
<li><a href="index.html#contato">Contato & Links</a></li>
<li><div class="languages"><a href="taverna.html?en">EN</a> | <a href="taverna.html">BR</a></div></li>
</ul>
</nav>
<section id="intro">
<div class="background">
<img class="background taverna-bg" src="img/taverna-bg.jpg" srcset="img/taverna-bg.jpg 1920w, img/taverna-bg-med.jpg 1000w, img/taverna-bg-sml.jpg 500w">
<div class="overlay"></div>
<div class="fade"></div>
</div>
<div class="contents">
<img class="logo taverna-logo" src="img/taverna-logo.svg" alt="Logo de Taverna - Baralho de Personagens para D&D">
<p>
Taverna é um “baralho” de fichas de personagens prontos para o uso em one-shots de
Dungeons & Dragons 5e (D&D), com o intuito de reduzir o tempo de preparo das sessões. Cada ficha contém um personagem com suas estatísticas de jogo e uma história explicando
o seu background. As cartas são impressas em papel laminado, permitindo o uso de
canetas de quadro branco para anotar informações temporárias, como pontos de vida
e slots de magia. No vídeo abaixo você pode ver o conteúdo da caixa.
<br><br>
Este projeto foi desenvolvido junto com minha colega, Camila Matsuda, para o nosso
trabalho de conclusão de curso, com orientação de Rodrigo Graça e Pamela
Henriques. A Camila fez a parte de design de personagens, e eu fiz o layout das cartas.
<br><br>
Caso queira ler mais a fundo sobre o projeto, nossa monografia está disponível <a href="https://drive.google.com/file/d/1i09fSYLx_P1KDqOffVgz7CRuTpVOkMlw/view?usp=sharing">neste link</a>.
</p>
</div>
</section>
<section id="video">
<div class="contents">
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/oz-YaRaz72A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<section id="aprender">
<div class="contents">
<h1>Aprender a jogar D&D é fácil</h1>
<div class="imagem">
<img class="espacamento" src="img\taverna\right.png">
<img class="esquerda" src="img\taverna\left.png" alt="Fichas de personagem de D&D">
<img class="direita" src="img\taverna\right.png" alt="Fichas de personagem de D&D">
</div>
<h1>...Mais ou menos</h1>
<p>D&D é um hobby que vem crescendo muito nos últimos anos, e está mais acessível do que nunca, mas continua parecendo super complexo pra quem nunca jogou.</p>
<h2>E a culpa disso é a criação de personagens*</h2>
<p>A criação de personagem em D&D envolve algumas operações matemáticas (básicas), e uma sobrecarga enorme de informações que costumam assustar novos jogadores.</p>
<p class="disclaimer">*Obviamente esse não é o único motivo, mas é um grande contribuidor para o problema</p>
</div>
</section>
<section id="pratico">
<div class="contents">
<div class="grid">
<h1>Prático, rápido, e intuitivo</h1>
<p>
Nossa solução foi um “baralho” de fichas de personagem prontos, em formato A5, portátil o suficiente para ser levado para qualquer lugar, e impresso em papel laminado, dry-erasable, para que as anotações dos jogadores possam ser apagadas, e as fichas reutilizadas em outras sessões.
</p>
</div>
<img src="img\taverna\ficha-1.png" alt="Ficha de personagem do Taverna">
</div>
</section>
<section id="perfeito">
<div class="contents">
<div class="grid">
<h1>Perfeito para novatos</h1>
<p>
Taverna é ideal para novos jogadores que ainda não sabem se querem fazer o comprometimento de de entrar em um novo hobby. É só escolher um personagem e começar a jogar.
</p>
</div>
<img src="img\taverna\ficha-2.png" alt="Ficha de personagem do Taverna">
</div>
</section>
<section id="desafios">
<div class="contents">
<h1>Desafios</h1>
<div class="grid txt-img">
<div class="texto">
<h2>Espaço</h2>
<p>
No início do projeto, analisamos várias fichas de personagem disponíveis na internet, e ficou evidente que seria um desafio concentrar todas as informações necessárias no nosso espaço extremamente limitado. Nosso objetivo era usar as dimensões de cartas de tarô, mas após várias tentativas de fazer um “wireframe”, resolvemos optar por uma mídia um pouco maior, no formato A5, e dividimos as informações em duas fichas: uma com as informações relevantes para o jogo, e uma com as sobre a história do personagem.
</p>
</div>
<img src="img\taverna\detalhe-1.png" alt="Ficha de personagem (costas)">
</div>
<div class="grid img-txt">
<div class="texto">
<h2>A busca pelo cinza ideal</h2>
<p>
Outro desafio foi chegar no cinza ideal para os elementos do layout. Como há um número muito grande de informações a serem exibidas em pouco espaço, tentei “arejar” visualmente a ficha usando o cinza para delimitar os espaços de cada seção, diminuindo a carga visual do layout. Mas chegar no cinza ideal levou um bom tempo e muita iteração.
</p>
</div>
<img src="img\taverna\detalhe-2.png" alt="Ficha de personagem (frente)">
</div>
<div class="grid vert">
<div class="texto">
<h2>Conjuradores</h2>
<p>
Personagens conjuradores foram particularmente desafiadores e eu ainda acho que não chegamos na solução ideal para eles. Esses personagens têm uma regra especial no jogo, que são as magias. Essas magias adicionam mais uma carga enorme de informações, extremamente desproporcional com todos os outros personagens. Nós conseguimos resolver esse problema para o único personagem conjurador que desenvolvemos, mas eu não acredito que esse layout funcionaria para todos.
</p>
</div>
<img src="img\taverna\detalhe-3.png" alt="Ficha de detalhes de classe">
</div>
</div>
</section>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/nav.js"></script>
<script src="js/appearOnScroll.js"></script>
<script src="js/translate-taverna.js"></script>
</html>