Toda a abordagem de Ux você pode conferir clicando aqui
E-care+ Aplicativo + Guia de estilo
O guia de estilo do e-care+ foi desenvolvido com o propósito de manter o design consistente, escalável, minimalista, harmonioso e alinhado com a identidade visual do produto. Esta etapa é fundamental na construção de um produto digital e representa um dos pilares da usabilidade, não podendo ser negligenciada.
Logotipo
O logotipo é o elemento visual que transmite a essência da marca em todos os pontos de contato, inclusive no ambiente digital. No guia de estilo, optamos por apresentar o logotipo em todas as suas variações: horizontal, vertical, ícones isolados, utilizando as cores institucionais e em versões negativas e positivas.
UI Colors
As cores da paleta do e-care+ foram selecionadas para serem harmônicas e oferecer uma ampla gama de possibilidades para composições. No entanto, para o aplicativo, foi decidido utilizar apenas tons de azul, amarelo açafrão e cores semafóricas, as quais funcionam como alertas para o usuário. Essa escolha foi feita para garantir a conformidade com as diretrizes de usabilidade de Jakob Nielsen, mantendo um design consistente e minimalista.
Tipografia
a fonte que foi escolhida para o e-care+, foi a ***Poppins,*** além da versatilidade de sua família com vários pesos, que possibilita definir hierarquia visual com títulos, subtítulos, corpo, e etc.
O seu desenho inspirado e sem serifa garante legibilidade, acessibilidade em diversos tipos de dispositivos eletrônicos e superfícies físicas.
Padrões e anatomia de componentes
Os padrões têm o propósito de criar uma harmonia visual e agradável para os usuários.
É essencial desenvolver uma 'narrativa visual' ou o conhecido storytelling.
Após um estudo detalhado sobre o significado das formas no design, foi determinado que para botões, formulários, inputs, modais e outros elementos da interface, os cantos seriam arredondados. Isso se deve ao fato de que cantos arredondados costumam ser percebidos pelo nosso subconsciente como mais 'amigáveis'. Para a distinção entre planos de diferentes elementos, optamos por usar sombras projetadas, conhecidas como 'drop shadow', com a cor do plano desejado destacado no branco #F3F3F3, o que chamamos de efeito de 'elevação'.
É essencial desenvolver uma 'narrativa visual' ou o conhecido storytelling.
Após um estudo detalhado sobre o significado das formas no design, foi determinado que para botões, formulários, inputs, modais e outros elementos da interface, os cantos seriam arredondados. Isso se deve ao fato de que cantos arredondados costumam ser percebidos pelo nosso subconsciente como mais 'amigáveis'. Para a distinção entre planos de diferentes elementos, optamos por usar sombras projetadas, conhecidas como 'drop shadow', com a cor do plano desejado destacado no branco #F3F3F3, o que chamamos de efeito de 'elevação'.
Ícones
A família de ícones do e-care+ foi feita seguindo as diretrizes de usabilidade recomendadas pelo
material design, do Google, para que o usuário tenha uma melhor experiência dentro do aplicativo.
material design, do Google, para que o usuário tenha uma melhor experiência dentro do aplicativo.
Grid
Os grids são fundamentais para criar uma experiência de usuário consistente e intuitiva em dispositivos móveis. Eles facilitam a navegação e interação do usuário com o aplicativo, permitindo que os elementos se reorganizem conforme necessário. Dessa forma, garantem a usabilidade e a estética, independentemente do tamanho da tela do dispositivo.
Botões
Os botões possuem 44 pixels de altura e 350 pixels de largura, podendo ter sua largura ajustada para 175 pixels ou menos. Possuem cantos arredondados com um raio de 8 pixels no padding horizontal e 6 pixels no padding vertical. Existem variações do botão: preenchido, vazado, preenchido com ícone e vazado com ícone.
Inputs
elementos importante em uma interface, todos os inputs e formulários foram padronizados com 8 pixels
de border radios, e separados com as cores para médico e paciente
de border radios, e separados com as cores para médico e paciente
Tabbar
Também foram criadas abas (tabbar), separadas por cores atribuídas aos usuários médicos e pacientes. As abas (tabbar) representam um elemento importante na jornada do usuário.
Ilustrações
Como apoio visual do onboarding, utilizei ilustrações no estilo pana, onde fiz o download do site de ilustração ***Storyset.com*** customizei cada uma delas com as cores e elementos do e-care+, com o objetivo de deixar o mais compreensível possível para o usuário, e também agregar valor visual ao projeto.
Thank's for watch! / Obrigado!
