\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{Logotipo e identidade visual}

O logotipo do sistema foi planejado para representar o próprio nome do sistema.

Nexo, que representa a conexão, convergência de vários elementos. Esse nome

conversa com a ideia do projeto em trabalhar o EMA, visto que o objeto que o

aplicativo trabalha para além de registrar o humor do usuário, mas sim

construir uma narrativa diária do estado emocional, conectando informações

contextuais como qualidade do sono, estresse, energia, ansiedade, sentimentos,

emoções, atividades, psicofármacos, consultas, etc.

Portanto, o nome representa exatamente esse propósito, é o que ``dá liga'' a

várias coisas esparsas, dando sentido, racionalizando esses elementos.

\begin{figure}[h]

\centering

\caption{Logotipo do sistema}

\label{fig:logo}

\includegraphics[width=0.9\linewidth]{logo.png}

\source{O autor}

\end{figure}

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

(?) uma hierarquia visual bem definida, ajda 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.

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. A proposta aqui era recheiar um pouco

mais a interface para adci

\subsection{Tipografia}

A tipografia escolhida é a Inter, criada por Rasmus Andersson, cujo é

reconhecida justamente pela legibilidade e atenção para que seja bem

renderizada no uso digital. A fonte hoje é usada por diversas plataformas, como

o Figma.