\chapter{Design}

% TODO: Find citations

As decisões de design do sistema foram fundamentadas tanto na análise dos
aplicativos similares quanto nos resultados do questionário aplicado durante a
etapa de pesquisa. Esses elementos permitiram identificar padrões recorrentes
de interface e compreender as preferências do público-alvo, orientando a
definição da identidade visual, da linguagem adotada e da organização dos
elementos da interface.

A análise dos aplicativos similares revelou uma linguagem visual comum entre as
soluções existentes, caracterizada por interfaces lúdicas, linguagem informal
e, em alguns casos, uso intenso de cores. Paralelamente, os resultados do
questionário indicaram que 37,5\% dos participantes preferem uma comunicação
acolhedora e empática, enquanto 25\% demonstraram preferência por uma linguagem
neutra e objetiva.

O design, no contexto de desenvolvimento de software é um elemento fundamental,
considerando que influencia diretamente a experiência do usuário, na percepção
e assimilação das informações.

Diferentemente da maioria dos aplicativos analisados, optou-se por uma
identidade visual menos lúdica e mais sóbria, reduzindo o uso de ilustrações e
cores saturadas em favor de uma linguagem mais discreta e orientada ao
conteúdo.

\section{Identidade visual}

Identidade visual, neste trabalho, designa o conjunto de decisões gráficas que
conferem ao aplicativo uma aparência reconhecível e consistente: o nome e o
logotipo, a hierarquia visual, a paleta de cores e a tipografia. Esses
elementos constituem a primeira camada de comunicação entre o sistema e o
usuário e materializam as preferências identificadas na etapa de pesquisa ---
em especial a opção por uma linguagem sóbria e acolhedora. Como apontam os
princípios universais de design, a consistência e o reconhecimento desses
elementos reduzem a carga de interpretação e tornam a interface mais previsível
\cite{Lidwell_2011}. As subseções seguintes percorrem cada uma dessas decisões.

\subsection{Nome e Logotipo}

O termo Nexo remete à ideia de conexão, relação e convergência entre
diferentes elementos. Esse conceito dialoga diretamente com a proposta do
projeto, fundamentada na metodologia de Avaliação Ecológica Momentânea (EMA).
Embora seja cada vez mais comum monitorar aspectos isolados da rotina, como
qualidade do sono, nível de atividade física ou uso de medicamentos, essas
informações frequentemente permanecem fragmentadas, dificultando a compreensão
das relações existentes entre elas.

Nesse contexto, o nome Nexo representa a proposta central do sistema: integrar
essas informações e auxiliar o usuário na construção de uma narrativa coerente
sobre seu estado emocional. Em vez de tratar humor, emoções, estresse, energia,
ansiedade, atividades, psicofármacos e consultas como registros independentes,
o aplicativo busca evidenciar como esses fatores se relacionam ao longo do
tempo, favorecendo a identificação de padrões e possíveis associações.

\begin{figure}[H]
\centering
\caption{Logotipo do sistema}
\label{fig:logo}
\includegraphics[width=0.4\linewidth]{logo.png}
\source{Elaborado pelo autor (2026)}
\end{figure}

Assim, tanto o nome quanto o logotipo procuram transmitir a ideia de
convergência, de ``dar a liga'', representando o papel do sistema em conectar
informações dispersas e transformá-las em conhecimento útil para o processo de
autorreflexão.

Para convergir com a pesquisa de tonalidade, e abraçar uma estética
``acolhedora'', o logo tenta fugir de parecer algo mecânico ao usar uma técnica
que simule pinceladas ao invés de linhas retas, simulando também diferenças ou
falhas na pressão utilizada por ter pequenas variações e espaços em branco no
logotipo.

\subsection{Hierarquia visual}

No contexto de interfaces digitais, a hierarquia visual corresponde à
estruturação de elementos de uma tela ou página de forma a narrar e orientar o
usuário com os elementos que são mais significativos e que demandam mais
atenção.

Por meio de repetições de padrões de agrupamento de informações, contraste,
tamanhos, espaçamentos, busca-se reduzir o esforço necessário para encontrar
elementos importantes e quais ações necessitam de maior visibilidade. Segundo
\citet{Lidwell_2011} uma hierarquia visual bem definida, ajuda o usuário a
interpretar rápidamente a interface, reduzindo a carga cognitiva e tornando a
navegação mais intuitiva.

Portanto, com esse foco em mente, produziu-se uma lista pequena de componentes
com visual semelhante, reduzindo o contraste entre esses mesmo elementos, o que
ajuda justamente a gerar uma sensação de consistência e previsibilidade entre
telas e elementos gráficos.

A estrutura da aplicação pode ser resumida em cinco componentes fundamentais:
cartões (\textit{cards}), botões de ação, \textit{chips} para categorização de
informações, campos de formulário e indicadores em escala (\textit{sliders}).
Esses componentes aparecem de maneira recorrente em praticamente todas as telas
do sistema, permitindo que o usuário reconheça rapidamente sua função sem
necessidade de reaprendizado.

Portanto, a organização de telas geralmente se dá nesses mesmos parâmetros, em
que toda tela é dividida em seções, compostas de um cabeçalho, seguido dos
respectivos elementos de interação. Posteriormente, a utilização de cartões,
ajuda a reforçar esse foco visual, agrupando elementos que são interativos e/ou
que necessitam interação e/ou atenção.

\subsection{Paleta de Cores}

Como discutido anteriormente, a definição da paleta de cores buscou equilibrar
dois objetivos identificados durante a fase de pesquisa, transmitir uma
identidade visual acolhedora, porém evitando excessos de cores e informações
lúdicas. Portanto, para buscar esses pilares, optou-se por usar uma escolha de
cores mais neutras e sóbrias, focando em tons de branco, cinza e preto, de
forma a permitir que o conteúdo regstrado pelo usuário seja o maior foco de
destaque.

\begin{figure}[h]
  \centering
  \caption{Paleta de cores}
  \label{fig:palette}
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{pallete-small.png}
  \source{Elaborado pelo autor (2026)}
\end{figure}

% Hack
\newpage

Contudo, para elementos que necessitam de uma maior atenção, ou elementos de
interação, como botões de ações primárias, adotou-se uma escolha mais rádical,
um tom de verde forte, que busca criar exatamente a sensação de destaque
imediato. Além disso, o verde geralmente está associado como uma cor que
transmite uma sensação de vitalidade, força, natureza, bem-estar e afins. Como
mencionado anteriormente, limitou-se a utilização para indicadores, componentes
de interação e elementos que representam progresso ou confirmação.

Por fim, foi escolhido outras cores pasteis para ajudar a destacar elementos
como sentimento e emoções, indicadores para cada tipo de registro gerado no
sistema, de forma mínima e não intrusiva.

\subsection{Tipografia}

A tipografia constitui um dos principais elementos responsáveis pela
legibilidade em interfaces digitais. Segundo o Material Design
\cite{Google_2021}, a escolha adequada da fonte influencia diretamente a
velocidade de leitura, a organização da informação e a percepção geral de
qualidade da interface. Em aplicações móveis, onde o espaço disponível é
reduzido, a clareza tipográfica torna-se ainda mais importante.

\begin{figure}[h]
  \centering
  \caption{Referência da fonte Inter}
  \label{fig:ref-inter}
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{ref-inter.png}
  \source{Site da página da fonte Inter (2026)}
\end{figure}

Considerando esses aspectos, optou-se pela utilização da fonte Inter,
desenvolvida por Rasmus Andersson especificamente para ambientes digitais. A
família tipográfica foi projetada para manter elevada legibilidade em
diferentes tamanhos de tela, apresentando boa diferenciação entre caracteres e
excelente renderização em sistemas operacionais modernos \cite{Andersson_2016}.

A hierarquia tipográfica do sistema foi construída a partir de poucas variações
de tamanho e peso da fonte. Títulos utilizam maior peso tipográfico para
estabelecer prioridade visual, enquanto textos informativos e descrições
empregam pesos mais leves, mantendo consistência em toda a aplicação. Essa
padronização reduz a quantidade de estímulos visuais simultâneos e facilita a
identificação das informações mais relevantes em cada tela.

Além da legibilidade, a escolha da Inter também contribui para reforçar a
identidade moderna e funcional proposta pelo aplicativo. Por ser amplamente
utilizada em plataformas digitais e ferramentas de interface, como o Figma, a
fonte transmite familiaridade ao usuário e mantém consistência com os padrões
contemporâneos de design de interfaces.

\section{Estrutura}

Por estrutura entende-se a organização das telas e da navegação do aplicativo:
o que cada tela contém, em que ordem os elementos se apresentam e como o
usuário se desloca entre elas. No Nexo, essa organização repousa sobre dois
alicerces: uma navegação por abas que divide o sistema em cinco áreas ---
Histórico, Jornada, Novo, Ações de Cuidado e Configurações --- e a composição
das telas por cartões reutilizáveis, descritos na seção anterior. Esta seção
apresenta como essa estrutura foi planejada e mapeada antes da aplicação da
identidade visual definitiva.

\subsection{Organização da navegação}

A navegação do Nexo é organizada em cinco áreas, acessíveis por uma barra de
abas inferior: ``Histórico'', ``Jornada'', ``Novo'', ``Ações de Cuidado'' e
``Configurações''. A divisão separa as superfícies de consulta --- Histórico e
Jornada, que apresentam registros e indicadores já consolidados --- do ponto de
entrada rápido para o registro de humor, a aba Novo. As ações de cuidado, por
reunirem modalidades distintas (medicamentos, consultas e atividades), são
agrupadas em um único hub, evitando que cada tipo ocupe uma entrada própria na
navegação.

\subsection{Consolidação de registros no Histórico}

Uma decisão estrutural relevante foi consolidar os registros em uma única linha
do tempo. Em vez de listas separadas para humor, sono, gatilhos e ações de
cuidado, a tela de Histórico combina os quatro tipos em uma sequência
cronológica única, agrupada por dia, por meio de um componente de mapeamento
que normaliza cada recurso em um formato comum, descrito no Capítulo
\ref{sec:history-analysis}. A motivação decorre da própria metodologia EMA:
aproximar visualmente eventos relacionados --- como um gatilho registrado
minutos antes de um humor --- permite reconstruir uma narrativa do dia em vez
de fragmentar o contexto em telas distintas.

\subsection{Wireframes}

\textit{Wireframes} são representações simplificadas de uma interface, focadas
na estrutura e na disposição dos elementos, sem se preocupar ainda com
componentes visuais definitivos, cores ou tipografia. Essa camada de abstração
permite válidar rapidamente o que cada tela precisa conter e como o usuário
navegaria entre elas, antes de investir tempo no design em alta fidelidade, no
qual esses elementos visuais são então aplicados. Quando elementos
clicáveis/interativos são adicionados aos \textit{wireframes}, eles também
podem se tornar protótipos, usados para modelar e avaliar o fluxo de navegação
entre as telas.

No desenvolvimento do aplicativo, essa prática foi usada para mapear as telas
existentes e definir quais elementos cada uma apresentaria, como exemplifica a
tela inicial na Figura \ref{fig:wireframe-initial}:

\begin{figure}[h]
  \centering
  \caption{\textit{Wireframe} da tela inicial}
  \label{fig:wireframe-initial}
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-initial.png}
  \source{Elaborado pelo autor (2026)}
\end{figure}

Alguns elementos podem ser notados nessa tela, como a presença de
\textit{cards} e emojis, utilizados para criar destaque visual. A escolha de
emojis foi inspirada pelo aplicativo analisado no
Capítulo~\ref{chapter:methodologies}, DailyBeans que utiliza ícones para cada
tipo de emoção. Portanto, a escolha de emojis se dá como uma saída rápida e
fácil, visto que não demanda conhecimentos de íconografia.

Um segundo \textit{wireframe}, apresentado na Figura
\ref{fig:wireframe-insights}, mostra uma proposta inicial para a tela de
Indicadores. Nessa versão inicial, o usuário selecionava, por meio de um menu
suspenso, (``Flutuação de:''), qual indicador desejava visualizar, sendo os
dados apresentados em um gráfico de linha que representava a flutuação dos
níveis informados de um humor (``Energia'', ``Ansiedade'' e/ou ``Estresse''),
além de seções para gatilhos frequentes e um indicador de estabilidade de
humor.

\begin{figure}[H]
  \centering
  \caption{\textit{Wireframe} da tela de indicadores}
  \label{fig:wireframe-insights}
  \includegraphics[width=10cm, height=8cm, keepaspectratio]{wireframe-insights.png}
  \source{Elaborado pelo autor (2026)}
\end{figure}

Essa abordagem, contudo, foi descartada na versão final do aplicativo: o
gráfico com seletor de tipo de indicador foi removido, e a tela foi repaginada
para simplificar usando três tipos de indicadores automaticamente cálculados
pelo sistema, conforme detalhado no Capítulo~\ref{sec:insights}.