eletrotupi / tcc/ commit / 85bf53f

thesis: reorganize design chapter structure

Pedro Lucas Porcellis porcellis@eletrotupi.com · 1 month ago 85bf53f6f641a9016e3d0b391f5d75cf12624b57 Browse files
Parents 76378ec
Changed files
1
Additions
+28
Deletions
-11
monografia/chapters/design.tex modified+28 -11
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
23 23 
Diferentemente da maioria dos aplicativos analisados, optou-se por uma
24 24 
identidade visual menos lúdica e mais sóbria, reduzindo o uso de ilustrações e
25 25 
cores saturadas em favor de uma linguagem mais discreta e orientada ao
26 26 
conteúdo.
27 27
28 - 
\section{Logotipo e identidade visual}
28 + 
\section{Identidade visual}
29 29
30 - 
O logotipo do sistema foi concebido para representar o próprio nome da
31 - 
aplicação. O termo Nexo remete à ideia de conexão, relação e convergência entre
30 + 
% TODO: Flesh a intro here
31 + 
\lipsum[1-2]
32 +
33 + 
\subsection{Nome e Logotipo}
34 +
35 + 
O termo Nexo remete à ideia de conexão, relação e convergência entre
32 36 
diferentes elementos. Esse conceito dialoga diretamente com a proposta do
33 37 
projeto, fundamentada na metodologia de Avaliação Ecológica Momentânea (EMA).
34 38 
Embora seja cada vez mais comum monitorar aspectos isolados da rotina, como
35 39 
qualidade do sono, nível de atividade física ou uso de medicamentos, essas
36 40 
informações frequentemente permanecem fragmentadas, dificultando a compreensão
41 45 
sobre seu estado emocional. Em vez de tratar humor, emoções, estresse, energia,
42 46 
ansiedade, atividades, psicofármacos e consultas como registros independentes,
43 47 
o aplicativo busca evidenciar como esses fatores se relacionam ao longo do
44 48 
tempo, favorecendo a identificação de padrões e possíveis associações.
45 49
46 - 
Assim, tanto o nome quanto o logotipo procuram transmitir a ideia de
47 - 
convergência, de ``dar a liga'', representando o papel do sistema em conectar
48 - 
informações dispersas e transformá-las em conhecimento útil para o processo de
49 - 
autorreflexão.
50 -
51 - 
\begin{figure}[h]
50 + 
\begin{figure}[H]
52 51 
\centering
53 52 
\caption{Logotipo do sistema}
54 53 
\label{fig:logo}
55 - 
\includegraphics[width=0.9\linewidth]{logo.png}
54 + 
\includegraphics[width=0.4\linewidth]{logo.png}
56 55 
\source{Elaborado pelo autor (2026)}
57 56 
\end{figure}
58 57
58 + 
Assim, tanto o nome quanto o logotipo procuram transmitir a ideia de
59 + 
convergência, de ``dar a liga'', representando o papel do sistema em conectar
60 + 
informações dispersas e transformá-las em conhecimento útil para o processo de
61 + 
autorreflexão.
62 +
59 63 
Para convergir com a pesquisa de tonalidade, e abraçar uma estética
60 64 
``acolhedora'', o logo tenta fugir de parecer algo mecânico ao usar uma técnica
61 65 
que simule pinceladas ao invés de linhas retas, simulando também diferenças ou
62 66 
falhas na pressão utilizada por ter pequenas variações e espaços em branco no
63 67 
logotipo.
134 138 
\cite{Google_2021}, a escolha adequada da fonte influencia diretamente a
135 139 
velocidade de leitura, a organização da informação e a percepção geral de
136 140 
qualidade da interface. Em aplicações móveis, onde o espaço disponível é
137 141 
reduzido, a clareza tipográfica torna-se ainda mais importante.
138 142
143 + 
\begin{figure}[h]
144 + 
  \centering
145 + 
  \caption{Referência da fonte Inter}
146 + 
  \label{fig:ref-inter}
147 + 
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{ref-inter.png}
148 + 
  \source{Site da página da fonte Inter (2026)}
149 + 
\end{figure}
150 +
139 151 
Considerando esses aspectos, optou-se pela utilização da fonte Inter,
140 152 
desenvolvida por Rasmus Andersson especificamente para ambientes digitais. A
141 153 
família tipográfica foi projetada para manter elevada legibilidade em
142 154 
diferentes tamanhos de tela, apresentando boa diferenciação entre caracteres e
143 155 
excelente renderização em sistemas operacionais modernos \cite{Andersson_2016}.
152 164 
Além da legibilidade, a escolha da Inter também contribui para reforçar a
153 165 
identidade moderna e funcional proposta pelo aplicativo. Por ser amplamente
154 166 
utilizada em plataformas digitais e ferramentas de interface, como o Figma, a
155 167 
fonte transmite familiaridade ao usuário e mantém consistência com os padrões
156 168 
contemporâneos de design de interfaces.
169 +
170 + 
\section{Estrutura}
171 +
172 + 
% TODO: Flesh a intro here as well
173 + 
\lipsum[1-2]
157 174
158 175 
\subsection{Wireframes}
159 176
160 177 
\textit{Wireframes} são representações simplificadas de uma interface, focadas
161 178 
na estrutura e na disposição dos elementos, sem se preocupar ainda com
193 210 
dados apresentados em um gráfico de linha que representava a flutuação dos
194 211 
níveis informados de um humor (``Energia'', ``Ansiedade'' e/ou ``Estresse''),
195 212 
além de seções para gatilhos frequentes e um indicador de estabilidade de
196 213 
humor.
197 214
198 - 
\begin{figure}[h]
215 + 
\begin{figure}[H]
199 216 
  \centering
200 217 
  \caption{\textit{Wireframe} da tela de indicadores}
201 218 
  \label{fig:wireframe-insights}
202 219 
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-insights.png}
203 220 
  \source{Elaborado pelo autor (2026)}
205 222
206 223 
Essa abordagem, contudo, foi descartada na versão final do aplicativo: o
207 224 
gráfico com seletor de tipo de indicador foi removido, e a tela foi repaginada
208 225 
para simplificar usando três tipos de indicadores automaticamente cálculados
209 226 
pelo sistema, conforme detalhado no Capítulo~\ref{sec:insights}.