ENTRADA
A marca aparece no primeiro toque.
O mosaico das letras e o livro aberto acompanham o splash e o login, sempre sobre o amarelo da marca.
Splash 
Login
ESTUDO DE CASO · 2023
Identidade visual e UX/UI de uma plataforma onde leitores e escritores independentes se encontram.
- PAPEL
- Designer lead
- CONTEXTO
- Projeto acadêmico · 1 semestre
- EQUIPE
- 6 pessoas · Six Degrees Design Studio
- PLATAFORMA
- App mobile
- IDENTIDADE VISUAL
- UX/UI
- DESIGN SYSTEM
- PROTOTIPAÇÃO
01VISÃO GERAL
Uma livraria digital onde quem lê também escreve.
A Trama reúne catálogo por assinatura, escrita colaborativa, rede social, encontros virtuais e recompensas num só app.
5
áreas no app
Login, Catálogo, Social, Meetings e Usuário.
5
pilares de proposta
Promover, produzir, conectar, engajar e incentivar.
7
níveis de conquista
De Madeira a Diamante, para leitores e escritores.
3
temas de leitura
Claro, papel e escuro, com ajuste de fonte e brilho.
O QUE A TRAMA REÚNE
Ler
Catálogo por assinatura, com leitura em três temas.
Escrever
Tramas: universos com livros, personagens e locais.
Conectar
Feed, perfil, notificações e chat entre leitores e autores.
Encontrar
Meetings e salas virtuais para debates e leituras.
Evoluir
Rank e conquistas, do nível Madeira ao Diamante.
02CONTEXTO E PROBLEMA
O preço pesa, o livro físico domina e poucos leem por app.
A pesquisa de usuário do grupo mostrou o cenário que a Trama quis enfrentar.
91%
PERFIL
dos entrevistados têm entre 18 e 25 anos.
28%
FREQUÊNCIA DE LEITURA
dos entrevistados costumam ler diariamente.
72%
GÊNERO LITERÁRIO
dos entrevistados preferem ficção científica.
81%
TIPO DE MÍDIA
dos entrevistados preferem livros físicos.
54%
DIFICULDADE DE LEITURA
dos entrevistados dizem que o preço é o que mais atrapalha.
27%
LEITURA DIGITAL
dos entrevistados usam algum app de leitura.
AUTOR DE DESTAQUE ENTRE OS ENTREVISTADOS
Stephen King
OBRA DE DESTAQUE ENTRE OS ENTREVISTADOS
It, a Coisa
O QUE OS NÚMEROS SUGEREM
Há espaço para uma leitura digital mais barata, sob medida e com comunidade.
03PARA QUEM É
Duas pessoas, duas necessidades.
Rebecca quer ler mais gastando menos; Fernando quer publicar as próprias obras.
Rebecca
22 anos · Estudante de Letras
- HOBBIES
- Leitura, passear com o cachorro, escutar música
- CARACTERÍSTICAS
- Inteligente, focada, introvertida
- NECESSIDADE
- Ler mais livros sem pagar muito
O QUE A TRAMA OFERECE
Assinatura por autor e um catálogo sob medida, para ler mais gastando menos.
Fernando
25 anos · Professor de Filosofia
- HOBBIES
- Ler, escrever, exposições, parques
- CARACTERÍSTICAS
- Profundo, sociável, intelectual
- NECESSIDADE
- Entrar na área de escritor e postar suas obras
O QUE A TRAMA OFERECE
Ambiente de escrita (as Tramas) e um lugar para publicar e receber feedback.
04PROPOSTA
Cinco verbos organizam a plataforma.
Cada verbo virou uma frente do app — do catálogo às recompensas.
- 01
Promover
Dispor a obra de escritores em um catálogo digital online, disponível para leitores sob assinatura individual e mensal.
- 02
Produzir
Desenvolver um ambiente colaborativo para a criação dinâmica de livros, com entradas pré-programadas e suporte a marcações interativas para leitura.
- 03
Conectar
Elaborar uma rede social completa, com todas as funções de engajamento e comunicação, além de conteúdos customizados para os livros e eventos da plataforma.
- 04
Engajar
Desenvolver um ambiente para encontros virtuais dentro da plataforma, com controle do anfitrião, chat e compartilhamento de tela, para debates e salas de leitura.
- 05
Incentivar
Incorporar um sistema de recompensas para o incentivo de escrita e leitura constantes, aumentando a frequência de uso e atraindo novos usuários.
MODELO DE NEGÓCIO · HIPÓTESE ACADÊMICA
- 1
O leitor assina um autor
- 2
A plataforma retém uma parte da receita
- 3
O autor saca o restante na carteira
Hipótese do projeto acadêmico: nada disso foi validado no mercado.
05CONCEITO DA MARCA
O M vira um livro aberto.
O logotipo escreve TRAMA em traço fino e contínuo e troca o M por um livro aberto — o símbolo da marca.
SÍMBOLO
LOGOTIPO
MARCA- 01
Traço fino e contínuo
Todas as letras compartilham a mesma espessura de linha, o que dá leveza ao logotipo.
- 02
Livro aberto no lugar do M
O símbolo funciona sozinho: aparece em etiquetas, canecas e nas telas de login do app.
- 03
Descritor em fonte leve
"livraria digital" assina a marca em fonte de traço leve, sempre abaixo do logotipo.
06LOGO E DIRETRIZES DE USO
Regras simples para a marca funcionar em qualquer fundo.
Diretrizes elaboradas para este estudo de caso a partir do logo original: área de proteção, versões e usos incorretos.
ÁREA DE PROTEÇÃO
Deixe livre uma margem de x em volta do logo.
x é a altura do símbolo (o livro aberto). Nenhum texto, borda ou imagem entra nessa área.
VERSÕES E DISPOSIÇÕES
Amarelo sobre azul-anil
Azul-anil sobre amarelo
Azul-anil sobre branco
Símbolo isolado
USOS INCORRETOS
Não distorcer as proporções
Não girar o logo
Não usar cores fora da paleta
Não usar sem contraste
07CORES E TIPOGRAFIA
Amarelo, rosa-choque e azul-anil, em três vozes tipográficas.
Uma paleta de três cores, cada uma com escala de cinco tons, e três famílias: uma para a marca e duas para a interface.
COR PRIMÁRIA
Amarelo
- HEX
- #FFBC00
- RGB
- 255, 188, 0
- HSB
- 44, 100, 100
- CMYK
- 0, 30, 93, 0
Escala de cinco tons
COR SECUNDÁRIA
Rosa-choque
- HEX
- #FF007F
- RGB
- 255, 0, 127
- HSB
- 330, 100, 100
- CMYK
- 0, 93, 8, 0
Escala de cinco tons
COR TERCIÁRIA
Azul anil
- HEX
- #010626
- RGB
- 1, 6, 38
- HSB
- 232, 97, 15
- CMYK
- 100, 91, 49, 75
Escala de cinco tons
FONTE DA MARCA
Elza
Peso Light (300)
INTERFACE · TÍTULOS E BOTÕES
Poppins
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Pesos Light, Regular e Medium
INTERFACE · TEXTOS E FORMULÁRIOS
Montserrat
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Peso Regular
08PADRÕES E APLICAÇÕES
Padrões próprios e a marca em uso.
O mosaico das letras e o zigue-zague viram texturas; camiseta, pôster, caneca e marcador mostram a marca fora da tela.
PADRÃO TIPOGRÁFICO- ZIGUE-ZAGUE
PÔSTER · LEITOR DIAMANTE
CAMISETAS
CANECAS
MARCADOR DE LIVRO
LOGO EM RELEVO
09ARQUITETURA DE INFORMAÇÃO
Cinco áreas, um mapa simples.
A navegação parte do login e se abre em Catálogo, Social, Meetings e Usuário. Em rosa, as ações-chave de cada área.
Login
- Termos de uso
- Esqueci a senha
- Novo usuário
- Lembrar senha
Catálogo
- Continuar escrevendo
- Minhas tramas
- Entrada de texto
- Entrada dinâmica
- Editor de texto
- Tela de leitura
- Detalhe do livro
- Informações e métricas
- Resumo
- Resenhas
- Livros relacionados
- Avaliações
- Detalhe do autor
- Informações e métricas
- Assinar
- Sobre o autor
- Livros do autor
- Depoimentos
Social
- Feed de postagem
- Perfil de usuário
- Notificações
- Lista de contatos
- Chat
- Criar
- Conteúdo do app
- Postagem genérica
Meetings
- Feed de eventos
- Destaques
- Detalhe do meeting
- Autores assinados
- Marcações
- Sala virtual
- Chat
Usuário
- Biblioteca
- Assinaturas
- Carteira
- Meu rank
- Informações do rank
- Configurações
- Sair
ÁreaTelaAção-chaveGrupo de telasLegenda do mapa
10DESIGN SYSTEM
Poucos componentes, muitos estados.
Inputs, seleção, botões e tags definem o comportamento da interface — todos derivados das três cores e das duas famílias tipográficas do app.
INPUTS E SELEÇÃO
BOTÕES E TAGS
TAGS
11DA PROPOSTA À INTERFACE
Cada verbo virou uma frente do app.
As telas corrigidas do protótipo, agrupadas pelo pilar que realizam — com nomes, capas e textos de exemplo próprios ou de domínio público.
01 · PROMOVER
Catálogo por assinatura.
O leitor descobre destaques, retoma a leitura e chega à página do livro e à do autor.
Início do catálogo 
Detalhe do livro 
Detalhe do autor
02 · PRODUZIR
Cada autor tem suas Tramas.
Livros, personagens, locais e eventos ficam num só universo; o editor trabalha capítulo a capítulo.
Minhas Tramas 
Visão da Trama 
Escrita
03 · CONECTAR
Feed e perfil aproximam quem lê de quem escreve.
O perfil mostra o nível de leitor e o de escritor, com pontos e abas de posts, fotos e livros.
Feed 
Perfil
04 · ENGAJAR
Meetings e salas virtuais.
Leitores e autores se encontram ao vivo, com inscrição, vídeo, chat e mão levantada.
Detalhe do meeting 
Sala virtual
05 · INCENTIVAR
Rank e conquistas.
Leitura e escrita viram progresso: sete níveis, do Madeira ao Diamante, com prêmios para cada perfil.
Meu rank 
Conquistas
12LEITURA EM TRÊS TEMAS
Claro, papel ou escuro: cada leitor escolhe.
A leitura aceita três fundos e ajustes de fonte, tamanho e brilho, para ler a qualquer hora. O texto de exemplo é de Dom Casmurro, de Machado de Assis (domínio público).
13RESULTADOS E APRENDIZADOS
O que foi entregue e o que ficou de aprendizado.
Sem métricas de mercado — foi um projeto acadêmico —, mas com entregas concretas e publicadas.
2
casos publicados no Behance
Identidade visual (17/12/2023) e projeto UX/UI (11/01/2024).
6
pessoas na equipe
Sob o perfil Six Degrees Design Studio.
5
áreas no protótipo
Login, Catálogo, Social, Meetings e Usuário.
1
semestre
De pesquisa e conceito às duas entregas publicadas.
O QUE FICOU DE APRENDIZADO
- 01
Componentização de verdade
Foi a primeira vez usando componentes no Adobe XD: a interface deixou de ser desenho solto e virou sistema.
Onde vimos: mais de 100 componentes no arquivo do protótipo
- 02
Prototipação de telas e fluxos
Do fluxo de usuário às telas navegáveis: prototipar foi o que ligou a pesquisa à interface.
Onde vimos: fluxo de 5 áreas e 37 artboards
- 03
Design thinking do começo ao fim
Pela primeira vez, ao menos na faculdade, o grupo percorreu o processo inteiro de forma estruturada.
Onde vimos: pesquisa personas proposta fluxo marca interface
- 04
Gestão de projeto
Organizar o grupo, o arquivo e o design system foi tão importante quanto desenhar.
Onde vimos: arquivo organizado por módulos, com componentes compartilhados
FIM DO ESTUDO DE CASO
Obrigado.
A Trama foi um projeto acadêmico de um semestre: uma marca e um app pensados para leitores e escritores independentes.
MEU PAPEL · DESIGNER LEAD
- 01
Gestão do projeto
Organização do grupo e das entregas ao longo do semestre.
- 02
Design system e estrutura do arquivo
Páginas, componentes e padrões organizados para o time trabalhar junto.
- 03
Do material do grupo ao protótipo
Reunir o que cada pessoa produzia e montar o app, o protótipo.
- 04
Conceito do logo
Participação na criação do conceito da marca.
NO BEHANCE
Trama — Identidade Visual
behance.net/gallery/186987375/Trama-Livraria-Digital-Identidade-VisualTrama — Projeto UX/UI
behance.net/gallery/188744505/Trama-Livraria-Digital-Projeto-UXUI
Estudo de caso · Trama — livraria digital · 2023