Vigia, limita e faz a pessoa duvidar da própria autonomia.
← Projetos acadêmicosDo livro à
Projeto acadêmico · Bacharelado em Design · 2023
Do livro à
experiência
Como a pesquisa sobre livros digitais se transformou em Como se salvar de um Dragão, uma experiência narrativa, ilustrada e interativa.
A pergunta do projeto
E se um e-book não precisasse imitar um livro?
Durante meu TCC, pesquisei as possibilidades e limitações dos livros digitais e dos e-readers dentro do design editorial. A investigação passou pela relação entre livro físico e digital, pelo uso de ilustrações, cores e tipografia e pelo espaço ocupado pelo designer.
Em vez de perguntar como transformar um livro físico em digital, passei a perguntar: que experiência de leitura só poderia existir porque ela é digital?
PERGUNTA INICIALComo transformar um livro físico em digital?
↓
A PERGUNTA MUDOUQue tipo de experiência só poderia existir porque ela é digital?
Por que este projeto nasceu
Uma história encontrou uma urgência.
O ponto de partida foi o imaginário dos dragões. Durante a pesquisa, essa fantasia encontrou um assunto urgente: a violência doméstica e a necessidade de falar sobre ela com sensibilidade.
Também percebi uma oportunidade: a impressão era cara para autores independentes e os e-books tradicionais reproduziam muitas limitações do papel. A solução precisava ser gratuita, compartilhável e pensada primeiro para o celular.
Antes de desenhar
Eu precisava entender como as pessoas liam.
A pesquisa combinou enquetes e questionário com 76 participantes. Os dados ajudaram a transformar uma intenção em princípios de projeto.
69,7%já haviam lido um e-book
55,3%ainda preferiam livros físicos
90,8%tinham celular próprio
72,4%já liam em dispositivos móveis
Insight da pesquisa
O que poderia tornar um e-book mais interessante?
As respostas apontaram para uma combinação concreta: acesso, imagem e participação.
gratuitowebmobileilustradocoloridointerativo
90,8% consideravam os livros digitais uma possibilidade válida para incentivar a leitura.
Da pesquisa nasceu uma história
Fantasia para falar de uma realidade difícil.
Como se salvar de um Dragão utiliza a fantasia como uma camada de proteção para abordar a violência doméstica. A vila de Vencer é atormentada pelos cinco dragões de Abusuu; no centro está uma pequena cavalheira que decide enfrentá-los.
O contraste de escala é intencional: ela não vence por ser fisicamente mais poderosa, mas por reunir coragem, justiça, esperança, autoconfiança e verdade.
Personagens como sistema de significados
Cinco dragões, cinco personalidades.
Forma, postura, cor e comportamento transformam cada criatura em uma presença narrativa. Não é uma classificação jurídica; é uma escolha poética para tornar visíveis sensações e padrões.
Distorce acontecimentos, culpa e memória até transformar medo em silêncio.
Afasta vínculos e redes de apoio que poderiam oferecer proteção.
Cria uma tensão constante e a necessidade de antecipar reações.
Deixa marcas no corpo, no espaço e na forma de enxergar o futuro.
A linguagem visual
O desenho manual virou método.
Linhas, manchas, contornos e formas preservam a sensação de caderno ilustrado. Chalkduster mantém o gesto irregular; a paleta muda conforme a atmosfera da narrativa.
Cor como linguagem narrativa
Uma história também se conta pelas cores.
Da capa à interface, as paletas conectam personagens e ambientes sem tornar todas as cenas iguais. Os estudos cromáticos mostram como contraste, luminosidade e repetição de tons constroem a identidade de Como se salvar de um Dragão.
A leitura visual a seguir acompanha as pranchas do projeto: observa as relações entre as cores, sem atribuir a cada tom um significado universal.
A capa: contraste que apresenta o conflito.
O azul quase preto ocupa a maior parte da composição. Sobre ele, os olhos em tons de ocre e o título em vermelho alaranjado criam dois focos de atenção. A diferença entre o fundo escuro e os elementos quentes reforça a presença dos dragões antes mesmo de começar a leitura.
A vila: variedade, luz e vida cotidiana.
Amarelos e tons de areia dividem espaço com verdes, azul do céu e variações de verde-azulado nas montanhas. A paisagem reúne mais cores e áreas claras do que a caverna. Essa diferença ajuda a distinguir os ambientes; a presença dos dragões introduz o conflito dentro de um cenário visualmente vivo.
A caverna: profundidade em variações de azul.
Na entrada da caverna, a variação de claros e escuros separa as silhuetas das rochas. Os planos azuis se sobrepõem ao chão cinza-escuro, fazendo a pequena cavalheira parecer ainda menor diante do ambiente. A cor ajuda a distinguir as camadas que, no Mental Canvas, também estão distribuídas em profundidade.
Os dragões: uma família visual, cinco presenças.
Azul, roxo, amarelo, vermelho e verde individualizam os cinco dragões. O traço escuro recorrente mantém a unidade entre eles, mesmo com silhuetas e cores distintas. A diferenciação cromática oferece uma referência para reconhecer cada criatura ao longo da narrativa, em conjunto com sua forma e seu comportamento.
A cavalheira: pequenos acentos em uma base neutra.
A armadura combina cinzas e contornos azul-escuros. O vermelho do penacho e o azul muito claro da espada aparecem como acentos sobre essa base mais contida. Na prancha da personagem, esses detalhes contrastam com os neutros e ajudam a preservar sua identidade quando ela muda de cenário.
A interface: continuidade sem competir com a história.
Na paleta da web, branco e cinza organizam uma superfície mais neutra, enquanto o azul-escuro e o vermelho alaranjado retomam a capa. Os acentos aparecem em títulos e elementos gráficos de orientação, criando continuidade entre a página de entrada e a experiência ilustrada.
Unidade não significa repetição. A capa apresenta o contraste, os cenários variam a atmosfera, os personagens ganham identidade e a interface retoma cores-chave. Juntas, essas relações conectam ilustração, narrativa e design digital.
Do papel para a interface
O planejamento começou antes da tela.
Mental Canvas · Ilustração em profundidade
Entre um desenho e outro, existe espaço.
Para transformar minhas ilustrações em uma experiência explorável, utilizei o Mental Canvas. Em vez de reunir todos os elementos em uma única imagem plana, organizei os desenhos em diferentes planos dentro de um espaço tridimensional.
Como funciona o Mental Canvas?
O programa permite posicionar telas de desenho 2D em um espaço 3D e explorar a composição por diferentes pontos de vista. As ilustrações continuam sendo bidimensionais: não é necessário transformar cada personagem em um modelo tridimensional para construir uma cena com profundidade.
No meu projeto, essa organização espacial aproxima ilustração e direção de cena. Além de desenhar, precisei pensar na distância entre os planos, nas sobreposições e no que cada enquadramento revela ao leitor.
Onde entra o parallax?
Parallax, ou paralaxe, é a mudança aparente da posição de um elemento em relação a outro quando o ponto de vista se desloca. Com o movimento lateral da câmera, os planos próximos parecem se deslocar mais do que os distantes. Essa diferença oferece ao olhar uma pista de profundidade.
Foi esse princípio que explorei ao distribuir minhas ilustrações pelo espaço. O efeito não depende apenas de ampliar uma imagem: ele nasce da relação entre a posição da câmera e as distâncias dos diferentes planos.
Da página ao ambiente: a ilustração deixa de ser apenas uma superfície para ser vista e passa a compor um espaço a ser percorrido. A tecnologia amplia o desenho autoral e cria outra maneira de acompanhar a história.
Sobre a ferramenta: como funcionam os planos no Mental Canvas ↗.
Versão livro
A história, página por página.
Como se salvar de um Dragão também ganhou uma versão em livro, reunindo a narrativa e as ilustrações em uma sequência de páginas. Outro formato para acompanhar a jornada da cavalheira e conhecer o universo visual do projeto.
Abra a versão em PDF para ler a história completa.
Abrir a versão livro (PDF) ↗UI & UX design · Da estrutura à interação
Projetar o caminho até a história.
A experiência web precisava apresentar o projeto, explicar uma leitura interativa e conduzir à narrativa. Meu trabalho de interface conectou arquitetura da informação, wireframes, organização responsiva e orientação de uso — não apenas a aparência da página.
01 · Estrutura antes do acabamento
Wireframes para organizar prioridades.
Nos esboços, defini a sequência entre apresentação, sinopse, instruções, entrada da experiência e contato. As duas propostas registram alternativas para distribuir essas informações antes do acabamento visual.
O primeiro desenho explora imagens e textos alternados; o segundo concentra a estrutura em blocos e reserva uma área para a experiência incorporada. Esses registros tornam visível o raciocínio por trás da interface.
02 · Arquitetura e fluxo
Uma entrada orientada, não um salto no escuro.
O fluxo começa na apresentação, passa pelas instruções e pelo botão “Começar Experiência”. Antes da narrativa, um aviso recomenda a orientação horizontal do celular. O diagrama também registra o fechamento da experiência e o retorno ao conteúdo da página.
Essa sequência explicita uma decisão de UX: preparar o leitor para a mudança de orientação e para os controles de uma experiência diferente de um e-book convencional.
03 · Organização responsiva
O mesmo conteúdo, ritmos diferentes.
Os registros dos grids mostram como a composição se organiza em larguras diferentes. No desktop, as instruções podem compartilhar uma linha; no celular, os blocos seguem uma sequência vertical.
Margens, espaçamentos e agrupamentos ajudam a separar orientação, ação principal e informações de apoio. O registro mobile documenta uma largura de 412 pixels, enquanto a vista desktop mostra a organização horizontal da página.
04 · Hierarquia visual e orientação
Uma interface que explica como participar.
A landing page combina títulos, textos curtos e três ilustrações de instrução: girar o dispositivo, usar os controles e interagir com a cena. O botão de início aparece como uma ação explícita depois dessa preparação.
O fundo claro, os títulos escuros e os acentos alaranjados mantêm uma linguagem consistente com o projeto. A função da UI é organizar a informação sem competir com o universo ilustrado da história.
05 · Integração da experiência
Conectar leitura, navegação e contexto.
A prancha do website mostra a relação entre a landing page, a narrativa aberta em modal e o acesso a conteúdo externo sobre o tema. A interface não termina no botão de início: ela também oferece um caminho de volta e continuidade para quem deseja saber mais.
Do desenho da estrutura à implementação em HTML, CSS e JavaScript, esse processo reúne decisões de UI e UX em um protótipo navegável. Os materiais apresentados documentam essas decisões; não representam, por si só, uma validação de usabilidade com participantes.
O processo também é obra
Um caderno para acompanhar as decisões.
Referências, mapas, estudos de personagens, testes de composição, paletas e wireframes registram o caminho entre a primeira ideia e a experiência final.
Abrir o caderno completo ↗O resultado
Uma narrativa que pode ser lida, explorada e compartilhada.
A história também ganhou uma versão sequencial. Escolhi alguns momentos para mostrar a evolução visual sem substituir a experiência completa.
O que este projeto me ensinou
Não tentei transformar um livro físico em uma tela.
Tentei descobrir que tipo de livro poderia existir porque havia uma tela. A tecnologia não substituiu ilustração, storytelling, tipografia, composição ou cor: criou um lugar para essas disciplinas se encontrarem.
É isso que este TCC revela sobre minha prática: consigo pesquisar, formular, narrar, dirigir visualmente, prototipar e desenvolver uma experiência de ponta a ponta.