Lupus (One Page): Teste de UI
Evidência do Problema
Para avaliar meus conhecimentos em UI, a empresa solicitou que eu desenvolvesse um protótipo navegável de um site One Page, com o objetivo de fornecer informações relevantes aos usuários e aumentar a conscientização sobre o Lúpus Eritematoso Sistêmico Juvenil.
Briefing do Teste
O layout deve ser moderno, atrativo e instigante. Sua narrativa de storytelling precisa prender a atenção do usuário, gerando uma menor carga cognitiva na interpretação das informações. Cores, imagens, ícones, elementos visuais e tipografias estão abertas para estudos e aplicações. Mas vale considerar que o roxo é a cor do Lúpus.
Como conteúdo base para a criação do layout, deve ser utilizado o conteúdo em anexo, considerando a inclusão de um formulário para captura de contato, com: nome, sobrenome, e-mail e telefone. Fique à vontade para trazer informações complementares, caso sinta necessidade.
Requisitos técnicos
Além do briefing do teste e os requisitos técnicos, também recebi um PDF com uma página de conteúdos que a empresa gostaria que fossem inseridos na One Page. Abaixo você pode ver um exemplo do PDF com o conteúdo:
O Projeto
Eu recebi o teste no dia 12 de junho (quarta-feira) e precisava entregar no dia 14 (sexta-feira). Considerando o fato de que o prazo era curto, eu trabalho durante o dia e só poderia fazer o teste durante a noite e fim de semana, precisei entender o que poderia fazer para entregar no prazo correto. Para solucionar esse problema, segui alguns passos:
Desenvolvimento
Dado o prazo curto e o foco do teste em UI, comecei a buscar referências e a entender o tipo de página que queria desenvolver. Durante minha pesquisa, descobri que a representação da borboleta era fundamental no design. Para atrair a atenção do usuário, não bastava apenas incluir a borboleta, era necessário destacá-la de forma significativa.
A cor roxa, simbolizando o Lúpus, precisava ser integrada ao layout. Considero que é uma das cores mais desafiadoras para criar um design atraente. Ao escolher a imagem da borboleta abaixo, pude explorar as outras cores presentes na foto. Essa técnica, que aprendi em um dos livros de design que li, envolve aproveitar a paleta de cores da imagem para inspirar o esquema de cores do projeto.
Abaixo é possível visualizar a primeira dobra do design, onde já no início busco chamar a atenção do usuário para a página com a imagem chamativa e cores fortes:
