-
Notifications
You must be signed in to change notification settings - Fork 0
/
tpk.html
252 lines (172 loc) · 10.6 KB
/
tpk.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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!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 - TPK Miniaturas</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/tpk.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="tpk.html?en">EN</a> | <a href="tpk.html">BR</a></div></li>
</ul>
</nav>
<section id="intro">
<div class="background">
<img class="background tpk-bg" src="img/tpk-bg.jpg" srcset="img/tpk-bg.jpg 1920w, img/tpk-bg-med.jpg 1000w, img/tpk-bg-sml.jpg 500w">
<div class="overlay"></div>
</div>
<div class="contents">
<img class="logo tpk-logo" src="img/tpk-logo.svg" alt="Logo de TPK Miniaturas">
<div class="texto">
<p>
A TPK é uma loja de miniaturas de RPG, com o foco em experiência de usuário. É a junção das minhas duas maiores paixões: cultura maker e RPG, movida pelo meu ódio à experiência de comprar miniaturas em lojas tradicionais como a Miniature Market e o Mercado RPG.
<br><br>
Esse foi o maior projeto da minha vida, e eu desenvolvi diversas habilidades, desde branding e gestão de negócios, até UI/UX e programação. O site e todas as questões de logística estão prontos, e pretendo fazer o lançamento em breve, assim que resolver algumas questões de hosting.
</p>
<h4>Links</h4>
<a href="https://tpk.cipherhost.dev/">Site (em servidor de desenvolvimento)</a>
<a href="https://www.figma.com/file/UYtQFK0hFcvcaqvXWGyBp0/TPK-Wireframe?node-id=136%3A939">Projeto no Figma</a>
</div>
</div>
</section>
<section id="problema">
<div class="contents">
<div class="grid block1">
<h1>O Problema</h1>
<p class="p1">O que me levou ao desenvolvimento desse projeto foi justamente a experiência ruim com outras lojas. Após uma pesquisa de mercado avaliando várias lojas de miniatura do Brasil e do exterior, listei alguns problemas comuns.</p>
</div>
<div class="floating-image">
<img src="img\tpk\problema.jpg" alt="Screenshots de algumas lojas de miniaturas">
</div>
<div class="grid block2">
<div class="lista i1">
<h4>Categorização de vaga</h4>
<p>Produtos categorizados de maneira ineficiente, dificultando a pesquisa por um tipo de modelo específico.</p>
</div>
<div class="lista i2">
<h4>Falta de fotos reais dos produtos</h4>
<p>“Fotos” dos produtos que são apenas renders, deixando o usuário sem saber a qualidade real do produto.</p>
</div>
<div class="lista i3">
<h4>Search engine ineficiente</h4>
<p>Motores de pesquisa que só buscam pelo título, gerando uma experiência de busca ineficiente e cansativa.</p>
</div>
<div class="lista i4">
<h4>Informações escondidas</h4>
<p>Esconder ou nem incluir informações relevantes como política de devolução, entregas, etc.</p>
</div>
<p class="p2">Esses são apenas alguns dos pontos mais relevantes, mas a minha lista inclui mais algumas várias observações, como atendimento exclusivo por telefone, solicitação de dados pessoais irrelevantes, visual amador, etc.</p>
</div>
</div>
</section>
<section id="desafios">
<div class="contents">
<img src="img\tpk\desafios.png" alt="Wireframes da loja">
<div class="texto">
<h1>Desafios</h1>
<p>Durante a fase de design do site, eu não tinha a mínima ideia de programação de HTML, CSS, PHP e javascript, meu plano era usar um site builder para Wordpress.
<br><br>
Durante a fase de implementação, porém, ficou claro que o site builder seria uma ferramenta muito restritiva para o meu design. Foi aí que eu resolvi estudar um pouco de HTML/CSS e eventualmente PHP. Após alguns dias de estudo, comecei um <a href="warlock.html">outro pequeno (a princípio) projeto</a> para sintetizar esse novo conhecimento. Quando resumi este projeto, estava muito mais preparado para enfrentar esse desafio.
<br><br>
Minhas maiores dificuldades nesse processo foram “brigar” com o javascript padrão do Woocommerce (a plataforma de ecommerce do wordpress), otimização de performance, e tornar o site acessível, já que eu estava aprendendo a programar enquanto desenvolvia o site.</p>
</div>
</div>
</section>
<section id="divertida">
<div class="contents">
<div class="left-col">
<img src="img\tpk\Comp-3.gif" alt="Menu de filtros de pesquisa">
</div>
<div class="right-col">
<h1>Tornando a navegação em uma atividade <span>divertida</span></h1>
<p>Uma das ferramentas que eu utilizei para criar a melhor experiência de navegação possível foi tornar a própria a interação com os elementos em algo agradável.
<br><br>
Veja a aba de filtros de pesquisa, por exemplo. Na maioria das outras lojas, esse filtros são apenas checkboxes, que além de feios, dificultam achar um filtro específico, pois são todos iguais.
<br><br>
A minha solução para esse problema foi criar botões diferentes para cada tipo de filtro. Botões grandes e extremamente satisfatórios de clicar, como você pode ver aí do lado.</p>
<h4><a href="tpk-ctd.html">Leia mais sobre este projeto</a></h4>
</div>
</div>
</section>
<section id="screenshots">
<div class="contents">
<div class="i1">
<img src="img\tpk\ss\ss1.png" alt="Carrinho de compras">
<img src="img\tpk\ss\ss2.png" alt="Página de produto">
</div>
<div class="i2">
<img src="img\tpk\ss\ss3.png" alt="Home">
</div>
<div class="i3">
<img src="img\tpk\ss\ss4.png" alt="Pós checkout">
<img src="img\tpk\ss\ss5.png" alt="Lista de pintores">
</div>
</div>
</section>
<section id="melhorar">
<div class="contents">
<h1>O que pode melhorar</h1>
<div class="grid">
<div class="texto">
<h2>Refatoração do código</h2>
<p>Estou bem satisfeito com este projeto, de um ponto de vista de design, mas a minha inexperiência com programação deixou bastante débito técnico pra trás, que eu pretendo resolver eventualmente, agora que o meu conhecimento nesse assunto é muito maior do que quando escrevi a minha primeira linha de código, há alguns meses atrás.
</p>
</div>
<div class="imagem">
<img src="img\tpk\melhorar\001.png" srcset="img\tpk\melhorar\001.png 1024w, img\tpk\melhorar\001-med.png 500w, img\tpk\melhorar\001-sml.png 300w">
</div>
</div>
<div class="grid">
<div class="texto">
<h2>Responsividade</h2>
<p>Outro problema que eu pretendo resolver no futuro é a responsividade. No momento, o site é adaptativo, com 3 breakpoints (desktop, tablet e mobile), devido, novamente, a minha falta de experiência no início do projeto. Essa foi uma decisão de design mesmo, pois eu não tinha confiança nas minhas habilidades para desenvolver um site responsivo, mas hoje eu sei que consigo redesenhar o site de maneira responsiva.
</p>
</div>
<div class="imagem">
<img src="img\tpk\melhorar\004.png" srcset="img\tpk\melhorar\004.png 1024w, img\tpk\melhorar\004-med.png 500w, img\tpk\melhorar\004-sml.png 300w">
</div>
</div>
<div class="grid">
<div class="texto">
<h2>Uso correto de grids</h2>
<p>Eu me sinto até com um pouco de vergonha explicando esse ponto, mas eu fiz todo o design do site usando grids, porque isso é algo que eu sempre fiz em qualquer projeto de interface. Acontece que eu não sabia que no desenvolvimento para web, grids são um elemento de CSS, então, apesar de todo o meu design no Figma ter grids, no meu CSS eu arrumei tudo com margens, paddings, flexbox, e posicionamento absoluto.
</p>
</div>
<div class="imagem">
<img src="img\tpk\melhorar\003.png" srcset="img\tpk\melhorar\003.png 1024w, img\tpk\melhorar\003-med.png 500w, img\tpk\melhorar\003-sml.png 300w">
</div>
</div>
<div class="grid">
<div class="texto">
<h2>Análise de dados e feedback</h2>
<p>Como mencionado na introdução, eu ainda não lancei o site, então ainda tenho muito dado para analisar e feedback para coletar.
</p>
</div>
<div class="imagem">
<img src="img\tpk\melhorar\002.png" srcset="img\tpk\melhorar\002.png 1024w, img\tpk\melhorar\002-med.png 500w, img\tpk\melhorar\002-sml.png 300w">
</div>
</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/translate-tpk.js"></script>
</html>