eletrotupi / tcc/ commit / 114be98

thesis: add design's wireframes subsection and images

Pedro Lucas Porcellis porcellis@eletrotupi.com · 1 month ago 114be98ec7798e84a9f63b79b00cf224e5f3c8d8 Browse files
Parents 6faf81c
Changed files
4
Additions
+54
Deletions
0
monografia/chapters/design.tex modified+53
monografia/chapters/design.tex
1 1 
\chapter{Design}
2 2
3 3 
% TODO: Find citations
4 4
5 5 
As decisões de design do sistema foram fundamentadas tanto na análise dos
152 152 
Além da legibilidade, a escolha da Inter também contribui para reforçar a
153 153 
identidade moderna e funcional proposta pelo aplicativo. Por ser amplamente
154 154 
utilizada em plataformas digitais e ferramentas de interface, como o Figma, a
155 155 
fonte transmite familiaridade ao usuário e mantém consistência com os padrões
156 156 
contemporâneos de design de interfaces.
157 +
158 + 
\subsection{Wireframes}
159 +
160 + 
\textit{Wireframes} são representações simplificadas de uma interface, focadas
161 + 
na estrutura e na disposição dos elementos, sem se preocupar ainda com
162 + 
componentes visuais definitivos, cores ou tipografia. Essa camada de abstração
163 + 
permite válidar rapidamente o que cada tela precisa conter e como o usuário
164 + 
navegaria entre elas, antes de investir tempo no design em alta fidelidade, no
165 + 
qual esses elementos visuais são então aplicados. Quando elementos
166 + 
clicáveis/interativos são adicionados aos \textit{wireframes}, eles também
167 + 
podem se tornar protótipos, usados para modelar e avaliar o fluxo de navegação
168 + 
entre as telas.
169 +
170 + 
No desenvolvimento do aplicativo, essa prática foi usada para mapear as telas
171 + 
existentes e definir quais elementos cada uma apresentaria, como exemplifica a
172 + 
tela inicial na Figura \ref{fig:wireframe-initial}:
173 +
174 + 
\begin{figure}[h]
175 + 
  \centering
176 + 
  \caption{\textit{Wireframe} da tela inicial}
177 + 
  \label{fig:wireframe-initial}
178 + 
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-initial.png}
179 + 
  \source{Elaborado pelo autor (2026)}
180 + 
\end{figure}
181 +
182 + 
Alguns elementos podem ser notados nessa tela, como a presença de
183 + 
\textit{cards} e emojis, utilizados para criar destaque visual. A escolha de
184 + 
emojis foi inspirada pelo aplicativo analisado no
185 + 
Capítulo~\ref{chapter:methodologies}, DailyBeans que utiliza ícones para cada
186 + 
tipo de emoção. Portanto, a escolha de emojis se dá como uma saída rápida e
187 + 
fácil, visto que não demanda conhecimentos de íconografia.
188 +
189 + 
Um segundo \textit{wireframe}, apresentado na Figura
190 + 
\ref{fig:wireframe-insights}, mostra uma proposta inicial para a tela de
191 + 
Indicadores. Nessa versão inicial, o usuário selecionava, por meio de um menu
192 + 
suspenso, (``Flutuação de:''), qual indicador desejava visualizar, sendo os
193 + 
dados apresentados em um gráfico de linha que representava a flutuação dos
194 + 
níveis informados de um humor (``Energia'', ``Ansiedade'' e/ou ``Estresse''),
195 + 
além de seções para gatilhos frequentes e um indicador de estabilidade de
196 + 
humor.
197 +
198 + 
\begin{figure}[h]
199 + 
  \centering
200 + 
  \caption{\textit{Wireframe} da tela de indicadores}
201 + 
  \label{fig:wireframe-insights}
202 + 
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-insights.png}
203 + 
  \source{Elaborado pelo autor (2026)}
204 + 
\end{figure}
205 +
206 + 
Essa abordagem, contudo, foi descartada na versão final do aplicativo: o
207 + 
gráfico com seletor de tipo de indicador foi removido, e a tela foi repaginada
208 + 
para simplificar usando três tipos de indicadores automaticamente cálculados
209 + 
pelo sistema, conforme detalhado no Capítulo~\ref{sec:insights}.
monografia/chapters/methodologies.tex modified+1
monografia/chapters/methodologies.tex
1 1 
\chapter{Metodologias}
2 + 
\label{chapter:methodologies}
2 3
3 4 
Como primeiro passo, para conseguir viabilizar construir um \textit{software}
4 5 
com qualidade, é necessário adotar metodologias que fundamentam a ideia e o
5 6 
processo. De tal sorte que, ajudem a levantar requisitos, priorizar
6 7 
funcionalidades, quebrar o escopo em entregáveis que possam ser validados, e
417 418 
atenda a essas demandas, mas também adote princípios de transparência, abertura
418 419 
e controle por parte do usuário. A seguir, serão discutidas as decisões de
419 420 
projeto que nortearam a construção da ferramenta proposta, baseadas tanto nas
420 421 
limitações identificadas nos sistemas existentes quanto nas necessidades e
421 422 
expectativas manifestadas pelo público-alvo da pesquisa.
monografia/images/wireframe-initial.png added
/dev/null → monografia/images/wireframe-initial.png
Binary file
monografia/images/wireframe-insights.png added
/dev/null → monografia/images/wireframe-insights.png
Binary file