Vituri

vituri-hero

Conceito

O VITURI é uma aplicação educacional desenvolvida no contexto do Programa Hackers do Bem para apoiar a formação em cibersegurança por meio de uma experiência digital gamificada. O projeto envolveu a criação e evolução de todo o ecossistema visual do produto, contemplando UX/UI, estruturação de fluxos, wireframes, prototipação, interfaces, componentes, identidade visual, landing page, gamificação, assets gráficos, animações, vídeos e materiais de comunicação. A proposta foi construir uma experiência digital acessível, consistente e visualmente envolvente, traduzindo conteúdos técnicos para diferentes momentos da jornada do usuário.

Minha atuação esteve principalmente no desenvolvimento das interfaces e do sistema visual do produto, desde a organização e estruturação das telas até a criação de componentes e elementos gráficos utilizados na experiência. Também participei da evolução de interfaces existentes, do desenvolvimento de elementos de gamificação e da criação de materiais complementares, buscando manter uma linguagem visual consistente entre o produto e seus diferentes pontos de contato.

Acesse a Landing Page do projeto e confira o vídeo desenvolvido para promover a aplicação em eventos: https://vituri.lavid.ufpb.br/

Conceito

O VITURI é uma aplicação educacional desenvolvida no contexto do Programa Hackers do Bem para apoiar a formação em cibersegurança por meio de uma experiência digital gamificada. O projeto envolveu a criação e evolução de todo o ecossistema visual do produto, contemplando UX/UI, estruturação de fluxos, wireframes, prototipação, interfaces, componentes, identidade visual, landing page, gamificação, assets gráficos, animações, vídeos e materiais de comunicação. A proposta foi construir uma experiência digital acessível, consistente e visualmente envolvente, traduzindo conteúdos técnicos para diferentes momentos da jornada do usuário.

Minha atuação esteve principalmente no desenvolvimento das interfaces e do sistema visual do produto, desde a organização e estruturação das telas até a criação de componentes e elementos gráficos utilizados na experiência. Também participei da evolução de interfaces existentes, do desenvolvimento de elementos de gamificação e da criação de materiais complementares, buscando manter uma linguagem visual consistente entre o produto e seus diferentes pontos de contato.

Acesse a Landing Page do projeto e confira o vídeo desenvolvido para promover a aplicação em eventos: https://vituri.lavid.ufpb.br/

Conceito

O VITURI é uma aplicação educacional desenvolvida no contexto do Programa Hackers do Bem para apoiar a formação em cibersegurança por meio de uma experiência digital gamificada. O projeto envolveu a criação e evolução de todo o ecossistema visual do produto, contemplando UX/UI, estruturação de fluxos, wireframes, prototipação, interfaces, componentes, identidade visual, landing page, gamificação, assets gráficos, animações, vídeos e materiais de comunicação. A proposta foi construir uma experiência digital acessível, consistente e visualmente envolvente, traduzindo conteúdos técnicos para diferentes momentos da jornada do usuário.

Minha atuação esteve principalmente no desenvolvimento das interfaces e do sistema visual do produto, desde a organização e estruturação das telas até a criação de componentes e elementos gráficos utilizados na experiência. Também participei da evolução de interfaces existentes, do desenvolvimento de elementos de gamificação e da criação de materiais complementares, buscando manter uma linguagem visual consistente entre o produto e seus diferentes pontos de contato.

Acesse a Landing Page do projeto e confira o vídeo desenvolvido para promover a aplicação em eventos: https://vituri.lavid.ufpb.br/

vituri screens
vituri brand identity

Desafio

O principal desafio era transformar uma grande quantidade de conteúdos educacionais e informações técnicas em uma experiência digital organizada, compreensível e visualmente consistente.

Além da necessidade de estruturar diferentes conteúdos e funcionalidades dentro da plataforma, era importante criar uma linguagem visual capaz de funcionar em diferentes contextos, mantendo unidade entre interfaces, elementos de gamificação, materiais de comunicação e demais aplicações do projeto.


Processo

O desenvolvimento das interfaces começou a partir da organização dos conteúdos e da compreensão das necessidades do produto. A partir disso, trabalhei na estruturação dos fluxos e na definição de como as informações seriam distribuídas e apresentadas ao usuário.

Foram desenvolvidos wireframes, layouts e protótipos navegáveis, permitindo explorar diferentes possibilidades de organização das telas e dos elementos de interação antes da definição visual final.

Durante esse processo, também trabalhei na criação e organização de componentes e elementos recorrentes, buscando estabelecer maior consistência entre as diferentes telas e facilitar a evolução da plataforma.


UI Design

Com a estrutura definida, desenvolvi as interfaces da plataforma utilizando Figma e Adobe XD, trabalhando hierarquia visual, organização das informações, componentes, elementos gráficos e diferentes estados das interfaces.

A linguagem visual foi pensada para equilibrar o caráter tecnológico da temática de cibersegurança com uma abordagem mais acessível e dinâmica, evitando que a interface assumisse uma aparência excessivamente técnica.

Também foram criadas diretrizes e elementos visuais compartilhados entre diferentes partes do produto, contribuindo para uma experiência mais consistente.


Gamificação

A gamificação foi incorporada à experiência como uma forma de tornar o processo de aprendizagem mais interativo e estimular a continuidade da jornada dentro da plataforma.

Participei do desenvolvimento visual de elementos relacionados à gamificação, criando assets, componentes e aplicações integradas às interfaces para que esses recursos fizessem parte da experiência de forma natural, e não como elementos isolados.


Solução

O resultado foi uma plataforma educacional com uma interface estruturada para diferentes conteúdos e momentos da jornada do usuário, combinando organização, consistência visual e elementos interativos.

A solução foi construída a partir de um sistema visual integrado, permitindo que interfaces, componentes, elementos de gamificação e demais materiais compartilhassem a mesma linguagem.


Ecossistema Visual

Além das interfaces do produto, o projeto envolveu a construção de diferentes pontos de contato da experiência.

Desenvolvi a identidade visual, landing page, assets gráficos, animações, vídeos e materiais de comunicação, buscando manter uma relação visual consistente entre o produto digital e seus materiais de apoio.

Essa abordagem permitiu que o VITURI funcionasse não apenas como uma plataforma, mas como um ecossistema visual integrado, com diferentes aplicações construídas a partir dos mesmos princípios de design.


Minha Atuação

UX/UI Design
Wireframes • Fluxos de navegação • Prototipação • Interfaces • Componentes • Organização de conteúdo

Design Visual
Identidade visual • Sistema visual • Assets gráficos • Landing page • Comunicação digital

Produção Digital
Animação • Edição de vídeo • Conteúdo audiovisual • Materiais de comunicação

Ferramentas
Figma • Adobe XD • Adobe Photoshop • Adobe Illustrator • Adobe Premiere Pro • After Effects


Resultado

O projeto reuniu produto digital, identidade e comunicação em uma experiência visual consistente, criando uma base para a evolução da plataforma e de seus diferentes pontos de contato.

O trabalho também envolveu a colaboração com diferentes áreas ao longo do desenvolvimento, permitindo iterar sobre interfaces, elementos visuais e funcionalidades conforme o produto evoluía.

ARKAZ STUDIO - 2026 - Todos os direitos reservados.

ARKAZ STUDIO - 2026 - Todos os direitos reservados.

ARKAZ STUDIO

2026 - Todos os direitos reservados.