TCC Proposta Conceitual de Plaforma Interativa para Ebooks

1
UNIVERSIDADE DA REGIÃO DE JOINVILLE – UNIVILLE

DEPARTAMENTO DE DESIGN
PROPOSTA CONCEITUAL DE PLAFORMA INTERATIVA PARA EBOOKS
ARI PINTO DE OLIVEIRA JUNIOR

GUSTAVO RIBEIRO VIEIRA
PROFESSOR MSC. ELCIO RIBEIRO
Projeto de Programação Visual 3
Joinville – SC
2015
2
ARI PINTO DE OLIVEIRA JUNIOR

GUSTAVO RIBEIRO VIEIRA
PROPOSTA CONCEITUAL DE PLATAFORMA INTERATIVA PARA EBOOKS
Trabalho de Conclusão de Curso

apresentado ao Curso de Design da
Universidade da Região de Joinville –
UNIVILLE – como requisito parcial para
obtenção de Grau em Design, habilitação
em Programação Visual em 2015, sob
Orientação Específica do prof. Msc.
Jonathan Prateat.
Joinville – SC
2015
3
FOLHA DE APROVAÇÃO
Os alunos Ari Pinto de Oliveira Junior e Gustavo Ribeiro Vieira, regularmente

matriculado na 4ª série do curso de Design, Programação Visual, apresentou e
defendeu o Trabalho de Conclusão de Curso “Proposta conceitual de plataforma
interativa para ebooks”, e obtiveram da Banca Examinadora a média final ______
(_______________________), tendo sido considerados aprovados.
Joinville, ____ de ______________de 2015.
______________________ ______________________ ______________________

. Professor “A” Professor “B” Orientador de Classe
4
RESUMO
Este trabalho tem como objetivo o desenvolvimento de uma plataforma conceitual

interativa para ebooks. A proposta tem como intuito apresentar ferramentas e
interações que auxiliem o usuário de forma rápida e atrativa, servindo de material
estudo e aprendizagem. Com a popularização, aumento do uso de tablets, e a
praticidade que esses aparelhos oferecem para o trabalho de profissionais do
design, a busca por informações em livros nem sempre é o caminho que mais
atende às suas necessidades por informação de forma rápida e eficaz. Dessa forma,
pretende-se que a plataforma seja um meio de pesquisa e estudo mais rápido,
proporcionando ao usuário uma experiência diferente em estudar e compartilhar
informações. Para o desenvolvimento, será utilizada a metodologia de Garret (2011).
Palavras-chave: Interatividade; compartilhamento de informações; experiência do

usuário; ensino-aprendizagem.
5
ABSTRACT
This course conclusion work intends to be a development of an interactive

conceptual platform for e-books. The proposal aims show some tool works and
interactions to give a quick and attractive help for user, to be a study and a learning
matter. With tablet using increasingly common and the practicality this equipment
brings for designers workers, the searching for information in paper books is not the
best way to reach requirements of quick and efficient searching. In this way, the
platform showed on this work intends to be a fast searching way, providing for users
a different experience for studying and sharing information. For this development, the
Garret method (2011) will be applied.
Keywords: Interactivity; Information sharing; User experience; Teaching-Learning.

6
LISTA DE FIGURAS
Figura 1: Processos e metodologia utilizada ............................................................. 11

Figura 2: Jornal em diversos meios de reprodução................................................... 13
Figura 3: Comparação entre quantidade de livros físicos e digitais. ......................... 14
Figura 4: Grid de colunas. ......................................................................................... 17
Figura 5: Grid modular. ............................................................................................. 18
Figura 6: Layout baseado em textos. ........................................................................ 19
Figura 7: Layout baseado em imagens. .................................................................... 20
Figura 8: Anatomia tipográfica................................................................................... 21
Figura 9: Classificação dos Tipos.............................................................................. 23
Figura 10: Espaçamentos ......................................................................................... 24
Figura 11: Interação entre usuário e sistema ............................................................ 26
Figura 12: O que esperar das experiências do usuário. ............................................ 28
Figura 13: Esquema de interação em UX ................................................................. 29
Figura 14: Metas de Usabilidade. .............................................................................. 31
Figura 15: Penetração da leitura de livros digitais. .................................................... 33
Figura 16: O que a leitura significa. ........................................................................... 34
Figura 17: Motivações para ler um livro. ................................................................... 35
Figura 18: Materiais lidos. ......................................................................................... 36
Figura 19: Gêneros lidos frequentemente. ................................................................ 37
Figura 20: % de pessoas que conhecem ebooks. ..................................................... 38
Figura 21: Perfil de usuários de ebooks; ................................................................... 39
Figura 22: Contatos com ebooks............................................................................... 40
Figura 23: Contatos com ebooks............................................................................... 41
Figura 24: Pessoas que ainda não leram ebooks. .................................................... 42
Figura 25: Painel semântico professores .................................................................. 44
Figura 26: Painel semântico estudantes ................................................................... 45
Figura 27: Personas professor .................................................................................. 47
Figura 28: Persona aluno .......................................................................................... 47
Figura 29: Moodboard professores ........................................................................... 48
Figura 30: Moodboard alunos.................................................................................... 49
Figura 31: Livro Pop-Up ............................................................................................ 50
7
Figura 32: Revista eletrônica ..................................................................................... 51

Figura 33: Aplicativo de notícias................................................................................ 52
Figura 34: Ebook interativo........................................................................................ 53
Figura 35: Planos e ferramentas ............................................................................... 55
Figura 36: Esquema conceitual ................................................................................. 57
Figura 37: Agrupamento de conteúdo ....................................................................... 62
Figura 38: Refinamento do agrupamento de conteúdo ............................................. 63
Figura 39: Fluxograma principal ................................................................................ 64
Figura 40: Fluxograma da aba flutuante .................................................................... 64
Figura 41: Brainstorming de wireframes .................................................................... 66
Figura 42: Exploração de wireframe 1 ....................................................................... 67
Figura 43: Exploração de wireframe 2 ....................................................................... 68
Figura 44: Wireframe login e cadastro ...................................................................... 70
Figura 45: Wireframe Biblioteca ................................................................................ 71
Figura 46: Wireframe Indice ...................................................................................... 72
Figura 47: Wireframe Conteúdo ................................................................................ 73
Figura 48: Wireframe navegação de páginas ............................................................ 74
Figura 49: Wireframe menu ....................................................................................... 75
Figura 50: Definição da tipografia.............................................................................. 76
Figura 51: Paleta cromática....................................................................................... 78
Figura 52: Família de icones ..................................................................................... 79
Figura 53: Ícones escolhidos ..................................................................................... 80
Figura 54: Tela de login ............................................................................................. 81
Figura 55: Biblioteca .................................................................................................. 82
Figura 56: Índice........................................................................................................ 83
Figura 57: Conteúdo interativo .................................................................................. 84
Figura 58: Navegação de páginas............................................................................. 85
Figura 59: Aba flutuante ............................................................................................ 86
Figura 60: Tema noturno ........................................................................................... 87
Figura 61: Conteúdo em tema noturno ...................................................................... 87
8
SUMÁRIO
INTRODUÇÃO .......................................................................................................... 10
1 REFERENCIAL TEÓRICO..................................................................................... 12
1.1 Ebooks ................................................................................................................ 12
1.2 Design editorial .................................................................................................... 15
1.2.1 Grid................................................................................................................... 16
1.2.2 Layout............................................................................................................... 18
1.2.3 Tipografia ......................................................................................................... 21
1.3 Design da Interação ............................................................................................ 25
1.4 Experiência do usuário (UX) em projetos para dispositivos móveis. ................... 27
1.4.1 Usabilidade....................................................................................................... 30
2 COLETA E ANÁLISE DE DADOS ......................................................................... 32
2.1 Coleta de dados relativos ao uso de ebook no Brasil. ......................................... 32
2.2 Identificando os usuários ..................................................................................... 42
2.2.1 Professores ...................................................................................................... 43
2.2.2 Estudantes ....................................................................................................... 44
2.2.3 Personas .......................................................................................................... 45
2.2.4 Moodboards ..................................................................................................... 48
2.3 Coletas Relativas às Interfaces Gráficas ............................................................. 49
2.3.1 Análise paramétrica. ......................................................................................... 49
3 DESENVOLVIMENTO ........................................................................................... 55
3.1.1 Conceituação ................................................................................................... 57
3.2 Plano de escopo .................................................................................................. 58
3.2.1 Requisitos do projeto ........................................................................................ 58
3.2.2 Definição do tema ............................................................................................ 59
3.3 Plano de estrutura ............................................................................................... 59
3.3.1 Conteúdo .......................................................................................................... 60
3.3.2 Estrutura ........................................................................................................... 61
3.4 Plano de esqueleto .............................................................................................. 65
3.4.1 Roughs dos wireframes. ................................................................................... 65
3.4.2 Grid e Wireframes finais ................................................................................... 69
3.5 Plano de superfície .............................................................................................. 75
9
3.5.1 Definição de tipografia ...................................................................................... 76

3.5.3 Cores ................................................................................................................ 77
3.5.4 Ícones ............................................................................................................... 78
3.5.5 Finalização ....................................................................................................... 80
CONSIDERAÇÕES FINAIS ...................................................................................... 89
REFERÊNCIAS......................................................................................................... 90
REFERÊNCIAS DA WEB ......................................................................................... 93
REFERÊNCIAS DAS IMAGENS .............................................................................. 94
10
INTRODUÇÃO
Com a utilização de novas ferramentas de comunicação na educação, mais

especificamente ebook, a interação entre participantes do processo de aprendizado
tornou-se vital no ponto de vista de estratégias pedagógicas, pois possibilita que os
alunos aprendam de forma simplificada e colaborativa. O uso de ebooks interativos
relacionado ao aprendizado facilita a ponderação, melhora o entendimento e a
comunicação dos alunos, e a comunicação online é efetiva na construção do
conhecimento e no desenvolvimento do pensamento crítico.
Com a tecnologia presente nos dias de hoje, há um grande crescimento no
uso de plataformas digitais para o auxílio pedagógico. À medida que as ferramentas
de comunicação são agrupadas às propostas de educação digital, a interação torna-
se item fundamental na concepção e avaliação de estratégias pedagógicas. Para
Recuero (2005), “interação é aquela que tem um reflexo comunicativo entre o
indivíduo e seus pares.” Essas interações repetidas constituem as relações sociais.
Dito isso, levanta-se a questão de como o design pode auxiliar no
desenvolvimento de ebooks direcionados à prática pedagógica, focando na
interação do usuário, e permitindo que este obtenha informações por meio do
acesso e troca de informações com outros estudantes?
Diante deste cenário, foi delimitado para este projeto de conclusão de curso, o
desenvolvimento de uma plataforma interativa para ebooks. A proposta desta tem
como objetivo tornar mais fácil o acesso ao conteúdo didático apresentado pelo
professor. Portanto, o projeto contemplou duas linhas de pesquisa, onde uma
(design editorial) refere-se ao conteúdo, e a outra (interfaces gráficas) refere-se ao
meio pelo qual acontecerá a interação com o conteúdo.
O tema, ebook foi escolhido pela dificuldade que os desenvolvedores tiveram
durante o curso de design em encontrar/estudar sobre alguns temas apresentados
pelos professores. O tema, plataforma interativa, foi escolhido através de
observações em situações do dia a dia dos acadêmicos, onde a busca por
informação acontece de forma analógica ou através de pesquisas na internet; não
explorando o potencial de equipamentos de uso comum. A proposta facilitará o
acesso a informação e instigará a interação entre usuário e conteúdo.
11
No primeiro capítulo fundamentação teórica, foi levantado referencial teórico

sobre os temas: ebooks, design editorial, grid, layout, tipografia, design da Interação,
experiência do usuário em projetos para dispositivos móveis e usabilidade O
segundo capítulo, refere-se a coleta e análise de dados, onde ferramentas como
personas e moodboard, foram utilizadas para levantar conteúdo sobre o público
alvo. Para reunir dados sobre as interfaces atualmente utilizadas no mercado,
utilizou-se a ferramenta análise paramétrica.
No terceiro capítulo, objetivou-se o desenvolvimento propriamente dito da
plataforma. Para isso, foi utilizada a metodologia projetual de Garret (2011) que
contempla cinco planos:
a) Plano de estratégia;
b) Plano de escopo;
c) Plano de estrutura;
d) Plano de esqueleto;
e) Plano de superfície.
Os processos e metodologia utilizada podem ser visualizados na Figura 1, a

seguir.
Figura 1: Processos e metodologia utilizada
Fonte: Desenvolvido pelos autores

12
1 REFERENCIAL TEÓRICO
Para o desenvolvimento deste trabalho foi necessário compreender conceitos,

revisá-los e relacioná-los com a proposta do projeto. Para isso, este capítulo é
dividido em três linhas de pesquisa, sendo a primeira intitulada Ebooks, visando
esclarecer conceitos necessários para o conteúdo da proposta, a segunda, Design
editorial com o intuito de conhecer melhor este campo do design necessário para a
etapa de desenvolvimento projetual e a terceira Design da interação buscando um
melhor conhecimento sobre interação entre usuário e produto.
1.1 Ebooks
Os ebooks 1 e as publicações impressas coexistem há aproximadamente 20

anos. Desde o início do século XX é possível encontrar alguns autores que, diante
das promissoras vantagens de suportes e formas mais distintas ou mais
encantadoras de reprodução e distribuição de ideias, afirmavam “a morte do livro
impresso”, (MACHADO, 1994). Ao contrário do que pensavam esses autores,
frequentemente são encontradas versões digitais de livros, jornais e revistas, que
nem por isso, causaram a morte de suas versões impressas, veja a Figura 2
1
Ebook: livro trabalhado em formato digital, cujo conteúdo é publicado e acessado digitalmente.
Representa a versão digital de um livro em papel (PROCÓPIO, 2010). Durante o trabalho serão
utilizadas como sinônimos de ebook as expressões livro digital e livro eletrônico.
13
Figura 2: Jornal em diversos meios de reprodução.
Fonte: Meios e Publicidade (2015, web)
O surgimento de novos dispositivos eletrônicos, como tablets e eReaders,

trouxeram ao universo do livro novas possibilidades de leitura, ricas em recursos de
interação. De acordo com Petry e Fagundes (2013, web), é crescente o aumento de
vendas de notebooks, netbooks e, mais recentemente, eReaders e tablets no
mundo. O acesso à informação e à tecnologia cresce de tal forma que, segundo
projeção divulgada pela Associação Brasileira da Indústria Elétrica e Eletrônica
(Abinee) e a consultoria IDC, a expectativa é de que sejam vendidos 10,795 milhões
de tablets em 2015, uma alta de 36% sobre o volume esperado para este ano, de
7,91 milhões. Assim, os tablets deverão responder por um total de 45% das vendas
do setor de informática no ano de 2015, ante 36% projetado para 2014.
Os livros digitais acompanham o desenvolvimento do mercado de dispositivos
eletrônicos. Por ser um nicho relativamente novo os autores observam conforme
apresentado na Figura 3, a existência de um número reduzido de livros digitais em
português, voltados para a área do Design.
14
Figura 3: Comparação entre quantidade de livros físicos e digitais.
Fonte: Amazon (2015, web)
Assim, percebe-se a relevância no desenvolvimento de um conceito de livro

digital que seja direcionado à prática pedagógica da disciplina do Design, atendendo
assim a uma demanda do mercado em questão.
Trata-se de um projeto que envolve diversas disciplinas inerentes ao design.
Por serem, na essência, livros, demandam o conhecimento em design editorial e
seus componentes. Por serem digitais, necessitam dos conhecimentos em interação
e interfaces. Cada conhecimento sendo responsável por aspectos diferentes que
compõe o produto final.
15
Mesmo com as novas tecnologias em interação, os estudos em design

editorial serão essenciais para um bom equilíbrio entre os elementos interativos,
imagens e textos existentes no projeto a ser desenvolvido.
1.2 Design editorial
Projetos editoriais para ebooks possuem características próprias, mas

bastante semelhantes ao de um livro impresso. Existem diversos fatores que podem
acarretar em problemas e que devem ser resolvidos no momento em que o projeto
está sendo executado, desta forma, os designers devem se concentrar em:
• Organizar grandes volumes de conteúdo em pacotes de informações
que estejam relacionadas;
• Trabalhar a tipografia para que a leitura seja confortavelmente legível
ao decorrer de inúmeras páginas, mas sempre deve buscar manter a
leitura vivaz o suficiente para envolver o leitor;
• Criar uma estrutura para acomodar diversos tipos de conteúdo, seja
esse baseado em imagens ou textos;
• Associar imagens à tipografia para chegar a uma forma unificada e
construir uma comunicação que é maior que a soma das duas partes
(Samara, 2011).
Toda escolha feita pelo desenvolvedor causa um efeito sobre o leitor, mas
geralmente o leitor não consegue descrevê-lo. O designer deve adquirir uma visão
ampla do conteúdo de um texto editorial, buscando entender a visão do autor,
criando uma relação entre texto e imagem (Hendel, 2006), corroborando a afirmação
de Hendel, o presente projeto tem a intenção de prover a capacidade de adaptação
do layout de acordo com o tema a ser abordado.
Com base nos autores pesquisados, foram identificados alguns elementos do
design editorial que devem ser melhor compreendidos, são eles:
• Grid
• Tipografia,
• Layout,
16
1.2.1 Grid
Os grids estão na arte e no design há muito tempo. Já se falava de

estruturação de páginas em manuscritos mesmo antes da invenção da imprensa,
mas foi no principal produto da impressão, o livro, que os grids exerceram papeis
cada vez mais desafiadores e complexos, compreendendo colunas, campos, linhas
base, etc. A disposição desses elementos era determinada pela geometria,
compreendendo pontos, linhas, superfícies e corpos sólidos em relação as suas
medidas (LUPTON; PHILLIPS, 2008; ROBERTS, 2009).
O esqueleto interno deve ser elaborado cuidadosamente, pois uma
organização bem sucedida seguida da hierarquização da informação é necessária
para um ritmo qualificado como positivo na leitura. Munari (2011) afirma que “a
característica física principal de uma estrutura é modular um espaço, dando a este
espaço uma formalidade, e facilitando o desempenho do trabalho a ser realizado
pelo designer. Ao resolver o problema do módulo, consequentemente o designer
resolve o sistema”. Um exemplo que o mesmo cita, é a organização interna de uma
colmeia. Já para Meachen e Marshall (2010, p.48) a grade e estrutura de um design
deve ser invisível aos olhos assim como o esqueleto humano é invisível quando
olhamos para uma pessoa. A estrutura deve ser visualizada de forma clara para
garantir uma comunicação eficaz determinando onde devem ser posicionados todos
elementos, mas, ao mesmo tempo, deve permitir flexibilidade e diversidade.
Observando as Figuras 4 e 5, fica evidente a proposta de estrutura do grid por
meio de linhas verticais e/ou horizontais encontradas no lado esquerdo e superior de
cada bloco de informação, porém não é possível visualizar a grade inteira com suas
informações de proporções, restrições, etc.
17
Figura 4: Grid de colunas.
Fonte: Desenvolvido pelos autores com base em SAMARA (2011).
O processo de criação de um grid depende basicamente de duas fases de

desenvolvimento. Primeiro, o designer avalia e identifica as características
informativas e as possíveis necessidades para o desenvolvimento do material. Por
ser um sistema relativamente fechado, o grid deve ser bem estruturado para atender
às especificidades do conteúdo. A segunda fase consiste em dispor o conteúdo de
acordo com os critérios do grid, entretanto, ele não pode prevalecer sobre a
informação. Por fim, cada projeto de diagramação é diferente e deve ser estruturado
de maneira que atenda às suas necessidades (SAMARA, 2011).
O leitor pode ser envolvido de forma positiva com novas maneiras de
impressão, diagramação dos textos ou uma fotografia elegante, porém se o
conteúdo for mal organizado, visualmente difícil ou cansativo, o leitor irá perder o
interesse e o material será deixado de lado rapidamente. Existem grid’s que
possibilitam alterar sua organização sem modificar a estrutura proposta,
possibilitando assim uma revitalização do layout conforme mostrado na Figura 5.
18
Figura 5: Grid modular.
Fonte: Desenvolvido pelos autores com base em SAMARA (2011)
O grid determina as divisões internas da página, o seu uso proporciona

consistência ao projeto proposto, tornando coerente toda sua forma. Para decidir a
posição dos elementos dispostos no projeto, faz-se necessário um maior
aprofundamento sobre layout (Haslan, 2007).
1.2.2 Layout
O layout aborda as considerações práticas e estéticas do projeto, onde e

como o conteúdo será visualizado não importando o meio de reprodução. Sua
função é de estabelecer a posição dos elementos internos da composição gráfica.
Com um bom layout o leitor pode navegar por informações bastante complexas,
tanto na mídia impressa como na eletrônica (Ambrose, Harris, 2009).
Existem dois polos do layout que são:
19
1. Baseados em textos, que deve ser organizado para serem lidos em

progressão linear, partindo do topo esquerdo em direção da base da
página à direita. Essa sequência é exemplificada na Figura 6.
Figura 6: Layout baseado em textos.
Fonte: Desenvolvido pelos autores com base em HASLAM (2007)
2. Baseado em imagens, onde suas aplicações são determinadas a partir

das considerações relativas à composição e são projetadas para serem
“vistas”. O designer deve enfatizar a relação entre ilustrações e narrativa
do texto. A Figura 7 exemplifica esse tópico.
20
Figura 7: Layout baseado em imagens.
Fonte: Desenvolvido pelos autores com base em HASLAM (2007)
É possível identificar que existem alguns caminhos que podem ser seguidos
para a materialização de um bom layout, e Haslan (2007, p.140) afirma que “é o
equilíbrio entre esses dois princípios que orienta a descrição dos vários smodelos de
layout de página”.
Devido à grande diversidade de tamanho das telas dos dispositivos digitais,
as maneiras para diagramar um ebook necessitam de formas flexíveis que
possibilitam melhores resultados na disposição dos elementos internos. Um
elemento importante para a diagramação do projeto proposto é a tipografia, ela é o
fator preponderante no aspecto visual do trabalho (Collaro, 2000), dito isso, um
aprofundamento sobre o tema tipografia faz-se necessário.
21
1.2.3 Tipografia
Buscar compreender os fundamentos da tipografia inclui adquirir

conhecimento sobre a terminologia, a anatomia e arquitetura dos tipos. Todas as
tipografias, compartilham partes da anatomia e detalhes, e é importante conhecê-los
e Cullen (2012) afirma que ao conhecer a fundo os elementos essenciais de uma
tipografia o usuário irá conseguir se expressar melhor.
Tipografia é o conjunto de práticas e processos no desenvolvimento e
utilização de letras, números e sinais de pontuação para reprodução. Alguns dos
termos que identificam as principais partes da anatomia dos tipos são apresentados
por Rocha (2005) como o corpo, altura-de-x, eixo, ascendente, descendente, e
outros como barra, serifa, haste e terminais e algumas dessas nomenclaturas
podem ser visualizadas na Figura 8
Figura 8: Anatomia tipográfica
Fonte: Desenvolvido pelos autores com base em Nardi (2009) e Cullen (2012)
22
A forma das próprias letras contribui muito para sua legibilidade. Uma boa
tipografia começa pela composição de uma única linha de texto. Usando exatamente
o mesmo tipo, é possível criar uma linha agradável, facilmente lida, ou uma
incomoda. Caso o espaçamento seja aberto ou fechado demais estragará qualquer
tipo. (Tschichold, 2007)
Outro ponto importante é a classificação do estilo tipográfico, Lupton (2009)
classifica os estilos como:
• Humanistas
• Transicionais
• Modernas
• Sem serifa humanistas
• Sem serifas transicionais
• Sem serifa geométricas
• Egípcias
Existem três grupos principais que correspondem grosseiramente aos

períodos renascentista, barroco e iluminista na arte e na literatura. As tipografias
humanistas estão fortemente conectadas à caligrafia e ao movimento da mão. As
fontes transicionais e modernas têm caráter mais abstrato e menos orgânico.
Pesquisadores têm proposto formas mais refinadas que procuram capturar melhor a
diversidade das tipografias (Lupon, 2009). As diferentes características estruturais
podem ser visualizadas na Erro! Fonte de referência não encontrada..
23
Figura 9: Classificação dos Tipos
Fonte: Desenvolvido pelos autores com base em Coles (2012),

24
Dentro de todas essas características de estrutura da tipografia, sua

expressão e funcionalidade podem ter uma má elaboração tornando como
consequência o foco da mensagem sem absorção por parte do observador.
Não importa o meio em que a tipografia é empregada, digital ou impresso, ela
deve conter as mesmas características de uso (Royo, 2008). O autor aborda
algumas regras que podem ser usadas para uma obter uma boa estética tipográfica,
são elas: Legibilidade e Contraste, Hierarquia de informação e Coordenação gráfica
ou Consistência. A letra deve ser visualizada com clareza, deve estar evidente e
dispor de espaço entre linhas conforme visto na Figura 10. O controle do contraste
entre as formas e espaços vazios também é fundamental para conseguir uma boa
legibilidade. Os títulos e subtítulos ou outros tipos de texto precisam ter
configurações diferentes para que o leitor identifique facilmente um texto do outro.
Os textos devem manter uma aparência íntegra ao sistema (o mesmo tamanho, cor,
etc.), assim, o usuário sentirá uma maior fluidez e sensação de controle.
Figura 10: Espaçamentos
Fonte: Frankenhauser (2014, web)
Para a escolha correta de uma tipografia, deve-se selecionar uma apropriada

a tarefa e ao assunto, que proporcione todos os efeitos especiais necessários,
25
nunca esquecendo de tirar o máximo que ela possa lhe oferecer (BRINGHURST,
2011).
Com base nos textos referentes a design editorial, percebe-se o quanto esses
elementos são importantes para uma boa interface, pois se não tiver um bom grid e
layout organizado, o usuário ficará desorientado e não saberá como proceder com a
utilização do ebook, da mesma forma, se não houver uma preocupação com a
tipografia, o mesmo problema acontecerá, então, o capítulo design editorial faz-se
muito importante para o projeto.
Como descrito anteriormente, o projeto aqui desenvolvido trata-se de uma
proposta conceitual para ebook. Portanto, após os estudos referentes a design
editorial, percebe-se à necessidade de revisar conteúdos acerca do design de
interação. Tal disciplina será importante para embasar o desenvolvimento das
propostas de interações entre o leitor e o ebook em questão.
1.3 Design da Interação
O design de interação consiste em projetar sistemas interativos eficientes que

permitam aos usuários serem produtivos, provocando respostas positivas por parte
dos usuários, criando experiências que buscam aperfeiçoar e ampliar a maneira
como as pessoas trabalham, se comunicam e interagem, sentindo-se à vontade,
confortável e apreciando a experiência de estar utilizando tais sistemas, pode-se
analisar um exemplo de interação entre usuário e sistema na Figura 11. Winograd
(1997 apud Preece 2013) descreve que design de interação é o projeto de espaços
para comunicação e interação humana. Já Preece (et al., 2013), afirma “por design
de interação, entendemos o seguinte: design de produtos interativos que fornecem
suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho”.
26
Figura 11: Interação entre usuário e sistema
Fonte: Behance (web, 2015)
Buscando encontrar uma melhor forma de interação, na qual o usuário seja

beneficiado e que sua experiência seja positiva, recomenda-se utilizar quatro
atividades básicas para o processo de design de interação, são elas:
• Requisitos: Define e identifica as necessidades dos usuários e projeta
requisitos de projeto;
• Alternativa: Cria alternativas para o projeto, definindo sua parte estética
e funcional;
• Prototipação: Depois de desenvolvido na etapa anterior é elaborado um
protótipo interativo;
• Avaliação: Analisa os requisitos e revisa se todas etapas estão de
acordo com o projeto (Preece et. Al, 2013).
. Estas atividades se complementam e podem se repetir uma ou várias vezes
de acordo com as necessidades do projeto, elas ajudarão apontar se a interface
será de fácil uso, medir a usabilidade ou se os requisitos foram atendidos.
No Design da interação, a partir de uma abordagem de desenvolvimento
centrado no usuário, investigamos o uso de itens e o domínio sobre eles, desta
forma, as preocupações devem ser mais direcionadas ao desenvolvimento do que
as preocupações técnicas (Preece et. Al, 2013).
Com as pesquisas relacionadas a design de interação, pode-se perceber o
quanto o usuário é importante para o projeto, o objetivo de desenvolver projetos
interativos agradáveis, está principalmente conectado a experiência que estes
27
proporcionarão ao usuário, isto é, como o usuário se sentirá na interação com o

produto proposto.
1.4 Experiência do usuário (UX) em projetos para dispositivos móveis.
A experiência ocorre quando há o envolvimento do usuário com um produto

ou serviço, e, por consequência, ela resultará em uma emoção particular de quem a
vivenciou, podendo ser positiva ou negativa. Segundo Royo (2008, p. 105), essa
experiência é o resultado dos objetivos do usuário, das variáveis culturais e do
design de interface. Trata-se do resultado da experiência vivenciada por uma pessoa
que utiliza determinado produto, sistema ou serviço (GARRETT, 2010). Já sob um
aspecto mais técnico encontrado na ISO 9241-210 (2010, web), define a experiência
do usuário como “as percepções e respostas de uma pessoa que resultam do uso
ou da expectativa de uso de um produto, sistema ou serviço”.
Contudo, nem sempre é levado em conta a jornada que o usuário terá com o
produto, e muitas vezes esses produtos acabam desencadeando outros problemas
para o usuário, seja por interações sensoriais mal projetadas ou até jornadas de uso
complexas demais.
A experiência do usuário está envolvida com todos os meios de interação
entre usuário e produto, serviço ou marca. Todo produto que é utilizado por pessoas
gera uma experiência, portanto, produtos com design pensado para o usuário são
projetados baseados na experiência gerada com o produto e não somente na função
oferecida. Segundo Barbosa (2010) a experiência gerada é de caráter pessoal,
porém, é possível desenvolver projetos que busquem uma boa experiência de uso,
utilizando-se de características que causem boas emoções aos usuários, evitando
provocar sensações desagradáveis, lembrando-se de sempre respeitar as limitações
dos usuários.
Incluso na área da experiência do usuário, analisam-se as necessidades do
usuário através de métodos. A estrutura proposta permite que se escute o usuário,
ponderando suas necessidades através de um processo de design, para certificar-
se de que o produto final seja relativamente bem aceito.
28
Preece et al (2013) apresenta o que é chamado de “metas da experiência do

usuário”. Essas metas estão principalmente focadas na experiência resultante do
uso, e por isso são mais subjetivas. A Figura 12 apresenta o que esperar das
experiências.
Figura 12: O que esperar das experiências do usuário.
Fonte: Desenvolvido pelos autores com base em Preece et al (2013).
Pode-se concluir que quando se trata de experiência do usuário, as

características humanas objetivas e subjetivas como predisposições, perspectivas,
emoções, motivações, necessidades, objetivos, entre outras são extremamente
importantes para que os desenvolvedores projetem produtos e/ou serviços que
contenham características técnicas, funcionalidades eficientes e eficazes,
considerando aspectos contextuais e temporais dessa interação entre usuário e
sistema. A Figura 13 apresenta uma representação gráfica de como se dá o
processo de interação proporcionado na experiência do usuário.
29
Figura 13: Esquema de interação em UX
Fonte: Desenvolvido pelos autores com base em CYBIS et al. (2010).
Observa-se a importância do contexto de uso de um determinado sistema e,

também as variáveis indiretas da experiência do usuário, que é influenciada pelas
expectativas anteriores à interação e pela reflexão realizada após o processo de
interação. O usuário deve ser o centro das preocupações ao se projetar qualquer
produto, ele é aquele que busca sanar suas necessidades (ações cotidianas) e
prazeres (ações de lazer).
O design centrado no usuário é um método que garante que as experiências
não sejam frutos do acaso ou meros acidentes, sendo necessário criar uma
experiência coesa, intuitiva e, principalmente, prazerosa na utilização da interface
(GARRETT, 2011). Sendo assim identificar o que o usuário busca irá resultar na
maneira de como é projetado a interface para cada solução.
Preece et al (2013) diz que “Foco no usuário e nas tarefas desde o princípio.
Isso significa, a princípio, entender quem são os usuários, estudando-se diretamente
suas características cognitivas, comportamentais, antropomórficas e suas atitudes. ”.
30
A partir destas afirmações, entende-se que a interface reflete na usabilidade

do projeto. Com isso tendo uma experiência mais prazerosa, intuitiva e focada no
objetivo do usuário.
1.4.1 Usabilidade
Usabilidade está diretamente relacionada à facilidade de uso. Para que um

produto, sistema ou serviço possa exercer sua função, é necessário que exista um
usuário para operá-lo. Sem o usuário, não há interação. É importante que o uso
desse produto seja relativamente fácil, pois caso o contrário, se houver uma falha
em sua utilização, pode-se gerar uma experiência negativa.
A usabilidade é uma das diretrizes para experiências satisfatórias, e é
caracterizada como um atributo ou qualidade. Segundo a ISO 9241-11 (2002),
usabilidade trata-se da capacidade que um produto, sistema ou serviço tem de
chegar aos objetivos específicos com eficácia, eficiência e satisfação, ao ser
utilizado por usuários dentro de um contexto de uso específico.
Para proporcionar facilidade no uso e atender as necessidades e satisfações
dos usuários, existe o que é chamado de “metas de usabilidade” que auxiliam esse
processo, são elas: eficácia, eficiência, segurança, utilidade, learnability e
memorability (PREECE et al, 2013) e durante o processo de desenvolvimento, é
necessário que essas metas sejam atendidas, cada qual com sua especificação e
verificação. Para entender cada uma dessas metas, é possível observar a Figura 14
que explica as metas e de que forma suas verificações são incorporadas no projeto.
31
Figura 14: Metas de Usabilidade.
Fonte: Desenvolvido pelos autores com base em PREECE et al (2013).
Trazendo essas preocupações para o projeto, as metas de usabilidade serão

bastante utilizadas durante o desenvolvimento dos protótipos e solução gráfica do
projeto.
32
2 COLETA E ANÁLISE DE DADOS
Essa etapa do projeto tem como objetivo o levantamento de informações a

respeito do público alvo e de seu comportamento diante do objeto de estudo, o livro
digital interativo como forma de apoio ao ensino-aprendizagem dos estudantes.
A análise de interfaces gráficas busca avaliar os aplicativos existentes
atualmente no mercado, procurando compreender seus pontos fortes e pontos a
serem melhorados.
A seguir serão apresentados as metodologias e os resultados da aplicação de
cada um desses métodos. Essas informações mostraram-se importantes, pois
embasaram as tomadas de decisões e norteou o desenvolvimento do projeto.
2.1 Coleta de dados relativos ao uso de ebook no Brasil.
Para a coleta primária dos dados, foi utilizado a pesquisa realizada por Failla
(2012), que busca conhecer e avaliar o comportamento do leitor brasileiro. A
metodologia utilizada foi desenvolvida pela Cerlalc/Unesco. A pesquisa teve
abrangência nacional e caráter quantitativo com aplicação de questionários e
entrevistas presenciais realizados com pessoas com mais de 5 anos, alfabetizadas
ou não.
A seguir nas Figuras 15, 16, 17, 18, 19, 20, 21, 22,23 e 24 serão
apresentados os resultados encontrados por Failla (2012) em relação a utilização de
ebooks.
Complementando a pesquisa de Failla (2012), foi utilizado a entrevista feita
pela revista Exame (2014, web) com Susanna Florissi que é diretora da Câmara
Brasileira do Livro. Durante a entrevista foi levantado dados relevantes ao projeto
proposto.
33
Figura 15: Penetração da leitura de livros digitais.
Fonte: Desenvolvido pelos autores, com base em Failla (2012)
Na Figura 15 é apresentado o percentual de penetração da leitura de livros

digitais na população brasileira, levantou-se que os índices mais relevantes são em
homens e mulheres com ensino médio e superior de idade entre 18 a 39 anos.
34
Figura 16: O que a leitura significa.
A Figura 16 mostra o que a leitura significa para os entrevistados. Verificou-se

que os dois pontos destacados (Fonte de conhecimento e atualização profissional e
Fonte de conhecimento para escola/faculdade) tem uma grande relevância aos
entrevistados. Um bom exemplo de como as instituições de ensino estão atentas a
esse novo mercado é o Colégio Bandeirantes situado em São Paulo deixou de usar
livros físicos e passou a utilizar iPads para alunos que cursam o 6º ano (Revista
Exame, 2014, web).
35
Figura 17: Motivações para ler um livro.
Os entrevistados também foram questionados a respeito do que os motivava

a ler um livro. Grande parte das pessoas apontou que o que os motivou foi
conhecimentos gerais, exigência escolar ou acadêmica e atualização profissional.
36
Figura 18: Materiais lidos.
A Figura 18 apresenta quais os tipos de materiais são mais lidos pelos

entrevistados. Em destaque pode-se ver que Livros indicados pela escola está entre
os mais citados. De acordo com os dados atuais, os ebooks representam
aproximadamente 3% da venda total de livros no Brasil (2014, web), porém a
tendência é que haja uma grande evolução neste cenário.
37
Figura 19: Gêneros lidos frequentemente.
A interatividade dos livros digitais tem gerado novidades para a área de livros
didáticos. Atualmente a leitura deixou de ser linear, o leitor tem possibilidade de
enquanto estiver efetuando sua leitura, acessar conteúdo relacionado ao tema por
38
meio de hiperlink 2 e compartilhar trechos com amigos por meio de redes sociais
(Revista Exame, 2014, web).
Figura 20: % de pessoas que conhecem ebooks.
Quando perguntados se conhecem ebooks, 18% dos entrevistados afirmam

que já leram e 30% comentam que já ouviram falar sobre o tema. Apesar do número
de pessoas que nunca ouviram falar sobre ebooks, Susana Florisse afirma durante
entrevista realizada pela Revista Exame (2014, web) que o mercado deve crescer,
2
Conglomerados de informação e acesso não-sequencial, navegáveis através de palavras-chaves.
Como definido por Piscitelli (1995 apud ROYO 2008, p.120)
39
cabe apenas aos autores e ilustradores estarem atentos a esta nova forma de fazer
livro.
Figura 21: Perfil de usuários de ebooks;

40
Figura 22: Contatos com ebooks.

41
Figura 23: Contatos com ebooks.

42
Figura 24: Pessoas que ainda não leram ebooks.
2.2 Identificando os usuários
Através da delimitação do tema proposto pelo projeto, pode-se notar que o

público alvo são pessoas que mantém vínculo profissional e/ou acadêmico. Desta
forma, através de observação assistemática, identificaram-se dois grupos de
usuários:
a) Professores: Docentes que lecionam ao menos uma disciplina em algum
curso de graduação, pós-graduação ou mestrado;
43
b) Estudantes: Acadêmicos de graduação, pós-graduação e mestrado.

Após definido o público alvo, deu-se início a aplicação dos métodos de
pesquisa para o embasamento de informações projetuais.
Para identificar as necessidades do público alvo, bem como a aceitação e a
necessidade de um material interativo para apoio ao ensino, durante o decorrer do
ano letivo de 2014 foi utilizado ferramentas de pesquisa assistemáticas para
conseguir informações necessárias ao projeto, que foram à origem para as
informações apresentadas a seguir.
2.2.1 Professores
O primeiro grupo de usuários diretos são professores do curso de design da

Univille. Analisou-se o perfil dos professores, através de vivencia de aula no decorrer
do curso e desenvolveu-se assim um painel semântico com o intuito de contribuir na
compreensão destas características como apresenta a Erro! Fonte de referência
não encontrada..
44
Figura 25: Painel semântico professores
Fonte: Desenvolvido pelos autores. Lookbook.nu (web, 2015)
O painel apresenta as seguintes características dos professores: pesquisador

tem o domínio das matérias, é jovem, dinâmico, inovador auxiliador, participativo,
responsável, criativo e aberto a novas tendências.
2.2.2 Estudantes
O segundo grupo de usuários deste projeto é constituído dos estudantes do

curso de Design da Univille. As suas características foram exemplificadas no painel
semântico apresentado na Erro! Fonte de referência não encontrada..
45
Figura 26: Painel semântico estudantes
Fonte: Desenvolvido pelos autores. Lookbook.nu (web, 2015)
No painel, pode-se perceber alunos descontraídos, que procuram ideias

inovadoras, buscam participar de eventos de design, possuem os mais variados
estilos e caracterizam-se por trabalharem em grupos.
Após o término da criação dos painéis de público alvo, eles servirão de base
para a concepção de duas personas; ferramenta que será abordada no item 2.2.3. A
ferramenta trata da personificação do público alvo e dá suporte para as próximas
etapas, auxiliando o projeto sobre as necessidades e valores do público.
2.2.3 Personas
A ferramenta utilizada para auxiliar na compreensão do público alvo é a

personas que consiste em pequenas descrições de arquétipos que representa o
público-alvo do projeto (SANTA ROSA e MORAES, 2012).
Persona é uma técnica que consiste em apontar descrições ou
personificações do público alvo. São características que representam o público e
possibilitam considerar os usuários durante o processo de design sem que tenha
46
que consultá-los novamente. Essas descrições também não são necessariamente

as reais do usuário, podem ser uma compilação de características identificadas em
um grupo, ou ainda uma característica importante levada ao seu extremo. As
informações nas quais as personas são baseadas, são coletadas através de
questionários, entrevistas e observações junto ao público-alvo (CYBIS, 2010).
Esta ferramenta irá auxiliar o decorrer do projeto nas tomadas de decisão,
onde os autores poderão recorrer à definição das personas e verificar se o projeto
está de acordo com as necessidades e valores do público. Além disto, os personas
que serão definidos nessa etapa auxiliarão a etapa de conceituação, contribuindo
para as diretrizes que serão definidas para o projeto.
Foi determinado a criação de duas personas, agrupando nelas as
características identificadas nos tópicos 2.2.1 e 2.2.2. Além disto, a intenção com
essa personificação é traduzir através de desejos e reflexões a personalidade do
público. O resultado pode ser visualizado através das Figuras 27 e 28.
47
Figura 27: Personas professor
Fonte: Desenvolvido pelos autores.
Figura 28: Persona aluno

48
2.2.4 Moodboards
Para sintetizar as informações coletadas sobre os perfis de usuários, foram

desenvolvidos moodboards. Esta ferramenta consiste na criação de painéis
emocionais ou semânticos através de imagens que servirão de referência visual
para o projeto (SANTA ROSA E MORAES, 2012). Dessa forma, os moodboards
desenvolvidos para este projeto possuem relação aos públicos determinados nos
itens 2.2.1 e 2.2.2. Como pode ser observado nas Figuras 29 e 30, para cada perfil
de usuário foi desenvolvido um moodboard,
Figura 29: Moodboard professores
Fonte: Desenvolvido pelos autores. Pinterest (web, 2015)

49
Figura 30: Moodboard alunos.
Fonte: Desenvolvido pelos autores. Pinterest (web, 2015)
2.3 Coletas Relativas às Interfaces Gráficas
Após um melhor entendimento dos usuários, o sub-tópico a seguir irá

apresentar a coleta de dados a partir de interfaces gráficas e aplicativos que estão
atualmente no mercado. Essa análise é responsável por identificar soluções
relacionadas à abordagem visual, estrutural e usabilidade desses aplicativos.
2.3.1 Análise paramétrica.
A coleta de informações acerca das interfaces gráficas é a Análise

Paramétrica. Essa ferramenta foi escolhida por possibilitar a comparação através de
critérios iguais para todas as interfaces, além de permitir resultados qualitativos, que
não possuem uma medida absoluta (BAXTER, 2008). Foram escolhidos para a
50
análise paramétrica três interfaces interativas. Essas interfaces foram escolhidas por
apresentarem alguma característica interessante para o projeto, entre eles estão:
a) Livro Pop-Up: The Movable Book of Letterforms (Figura 31) - O livro

pop-up é o primórdio dos livros interativos, aqui escolhemos o livro
“The Movable Book of Letterforms” feito pelo designer gráfico
americano e artista especializado em livros Kevin Steele. Seu livro
segue uma linha mais educativa que apresenta uma rápida introdução
sobre o universo das letras, origens e características da tipografia, com
interações simples e intuitivas.
Figura 31: Livro Pop-Up
Fonte: Desenvolvido pelos autores (web, 2015).

51
b) Entertainment Magazine (Erro! Fonte de referência não encontrada.)

- é uma revista renomada, focada em filmes e séries, e aqui a vemos
em seu formato digital, lembrando muito sua versão física, mas unindo
muito bem o melhor dos dois mundos, com um editorial bem resolvido
e com formas de interagir com o usuário, sendo desde toques em
personagem para maiores informações ou até mesmo um simples rolar
de texto para não precisar trocar de página.
Figura 32: Revista eletrônica

52
c) FlipBoard (Figura 33) - é uma revista pessoal interativa personalizada,

ela se baseia no editorial de revistas impressas e transporta isso para o
virtual. Sendo um aplicativo muito intuitivo e focado principalmente no
usuário. Todo seu conteúdo é personalizado, podendo obter
informações de sites e de rede sociais que o usuário utiliza.
Figura 33: Aplicativo de notícias.
Fonte: Desenvolvido pelos autores. Flipboard (web, 2015).

53
d) Al Gore – Our Choice: A Plan to Solve the Climate Crisis (Figura 34) –
Esse livro eletrônico se baseia no livro físico de mesmo nome do
escritor Al Gore, seu conteúdo é praticamente o mesmo, mas com uma
experiência completamente diferente. No aplicativo, o livro de 400
páginas se torna um portal de vídeo, foto e conteúdo infográfico que
demonstra quão inovadora e simples essa tecnologia pode ser.
Figura 34: Ebook interativo
Depois de selecionado os aplicativos, foram selecionados os critérios para

avaliação baseada em informações levantadas na fundamentação teórica. São eles:
a) Arquitetura da Informação: possui como objetivo analisar as relações

entre o contexto, o conteúdo e o comportamento do usuário diante das
informações disponibilizadas.
b) Usabilidade: tem como objetivo avaliar a forma como o usuário interage
com o aplicativo, a eficiência, utilidade, capacidade de aprendizagem e
capacidade de memorização.
54
c) Layout/Visual: objetiva avaliar os aspectos visuais das interfaces,

evidenciando aspectos que caracterizam as particularidades e identidade
visual de cada uma delas.
55
3 DESENVOLVIMENTO
Neste capítulo será apresentado o desenvolvimento projetual do trabalho,

para desenvolvê-lo, foi utilizada a metodologia de Jesse James Garret (2011) como
a principal norteadora do desenvolvimento por possuir foco nos elementos da
experiência do usuário. Esta metodologia contempla cinco etapas de
desenvolvimento que dependem uns dos outros e seguem uma estrutura e ordem de
execução conforme demonstrados na Figura 35. Cada plano será detalhado e suas
execuções no projeto serão demonstradas nos capítulos seguintes.
Figura 35: Planos e ferramentas
Fonte: Desenvolvido pelos autores com base em GARRET (2011).
Para entender melhor cada uma dessas camadas propostas por Garret, é
importante explanar as características particulares de cada uma:
a) Plano Estratégia: busca entender as necessidades dos usuários, definindo

requisitos de projeto, determinando seus objetivos. Durante essa etapa são
56
utilizados diversos métodos para a coleta de informações que auxiliam na

tomada de decisões.
b) Escopo: determina quais elementos funcionais e de conteúdo serão aplicados

e desenvolvidos nas etapas seguintes. Nessa etapa, tem-se como objetivo
evitar possíveis erros no projeto, os métodos empregados buscam organizar e
documentar as informações projetuais.
c) Estrutura: definição e estruturação de diretrizes e coordenadas relacionadas

às interações e ao acesso e consumo de informações.
d) Esqueleto: delimita e apresenta de forma simplificada a parte visual,

definições, requisitos e diretrizes planejadas nas etapas anteriores. Durante o
desenvolvimento desta etapa são desenvolvidos modelos visuais da estrutura
da interface, priorizando sua navegação.
e) Superfície: apresenta o resultado de todas as etapas anteriores, de maneira

visual, priorizando aspectos estéticos.
3.1 Plano de Estratégia
No plano de estratégia é explorada, desenvolvida e definida a estratégia do

projeto. Nesta etapa procura-se entender o que o produto irá oferecer para o usuário
e o que o usuário poderá esperar desse produto, ou seja, definir os objetivos e as
demandas (FRAGOSO, 2013, web; GARRET, 2011). Este plano contempla também
a pesquisa e coleta de dados sobre o usuário e o desenvolvedor do produto. Visto
que essas informações já foram coletadas, analisadas e apresentadas no capítulo 2
pode-se dizer que o público alvo é formado de professores e alunos do curso de
Design que superficialmente tem características semelhantes, porém, objetivos
contratantes. Enquanto os professores buscam atingir a totalidade de alunos com
melhor índice de aprendizado sobre o tema proposto, os alunos tendem a procurar
57
acesso ao conteúdo de forma rápida e prática mantendo um relacionamento próximo

ao professor. Dito isso, compete ainda definir o conceito do projeto.
3.1.1 Conceituação
A conceituação tem como objetivo a sintetização dos dados coletados e

analisados, com o intuito de gerir diretrizes conceituais que guiarão o
desenvolvimento do projeto. A Figura 36 representa visualmente os conceitos que
colaboraram para esta sintetização
Figura 36: Esquema conceitual
Assim, define-se como conceito que: as interfaces gráficas têm como objetivo
apresentar ebooks interativos, servindo de material de pesquisa e estudo.
O foco na interação entre usuário e aplicativo foi além de apenas uma
discussão a respeito da aparência, estética e posicionamento dos componentes, ele
58
permitiu que fosse possível examinar a eficiência e eficácia do projeto e identificar as

oportunidades para atingir o propósito do projeto concebido.
3.2 Plano de escopo
Segundo a metodologia de Garret, o plano de escopo é dividido em

conteúdos inerentes a interface e funcionalidades essenciais a ela, pensando em
interface como conteúdo e interface como software. Esses benefícios irão auxiliar o
projeto a atender as necessidades dos usuários. Cabe a este plano ainda definir os
requisitos de projeto, diretrizes visuais, funcionais e conteúdo (FRAGOSO, 2013,
web; GARRET, 2011). Decidiu-se o conjunto de funcionalidades e características
que serão disponibilizadas no ebook, indo de encontro com as necessidades dos
usuários.
3.2.1 Requisitos do projeto
Os requisitos são condições projetuais, e no decorrer desta etapa são

definidas as necessidades fundamentais que o produto deverá atender, podendo
ainda apresentar requisitos desejáveis, que são diretrizes mais flexíveis, podendo
ser contempladas ou não no projeto, ou ainda contempladas, porém em escala de
prioridade menor. Os requisitos listados no decorrer deste tópico foram definidos
com base nos resultados obtidos nas análises desenvolvidas no capítulo 2. Dessa
forma, definiu-se para esse projeto os seguintes requisitos obrigatórios:
• Facilidade de uso e compreensão;

O projeto deve ser de fácil navegação e que facilite a compreensão sobre o
tema proposto gerando uma maior capacidade de aprendizagem e
memorização das funcionalidades do ebook.
• Layout e interação convidativa e intuitiva;
59
O grid proposto para o projeto deverá ser modular, contribuindo para a

linguagem limpa do ebook. A interface deve proporcionar um ambiente
convidativo e com uma linguagem “próxima” para o usuário, deixando-o
confortável para navegar pelo ebook;
Além desses requisitos, foram definidos os seguintes requisitos desejáveis:

• Interação entre os usuários;
• Link para compra de conteúdo (hiperlink);
• Criação de perfil e associação a rede sociais;
• Troca de mensagem privadas;
• Criação de grupos para discussões;
• Sistema de adição à favoritos;
• Compartilhamento dos estudos gerados pelo usuário através do sistema de
cooperação;
• Vídeos;
3.2.2 Definição do tema
A proposta conceitual de ebook é adaptável a diversos temas. Para o projeto

em questão foi escolhido o livro impresso “Vade-mécum de Tipografia” de Fontoura
et al (2012) para ser adaptado para esse o presente projeto. Por se tratar de um
conceito, o livro não será adaptado completamente, será utilizado apenas
informações que permitam demonstrar as funcionalidades do projeto.
3.3 Plano de estrutura
O plano de estrutura é processo que busca tornar o projeto claro e evidente,

fazendo com que a proposta seja analisada antes e durante sua execução. Esta
tangibilização dá início a organização das informações e hierarquização do
60
conteúdo. O esqueleto deve definir categorias e o meio como o usuário irá navegar
pelo ambiente virtual (FRAGOSO, 2013, web; GARRET, 2011).
3.3.1 Conteúdo
O conteúdo refere-se às informações e aos campos ou áreas das interfaces.

Adaptando a metodologia de Garret ao projeto proposto, resolveu-se segmentar de
forma mais sucinta os conteúdos observados como requisitos no plano de escopo,
para melhor visualizar a arquitetura da informação e fluxo de navegação. Para definir
quais seriam esses campos, analisou-se o conteúdo do livro “Vade-mécum de
Tipografia” de Fontoura et al (2012). Também se revisitou o conteúdo gerado
durante a análise paramétrica (tópico 2.3.1), como fonte para o que já é
convencional e comum entre produtos semelhantes do mercado. Dessa forma,
definiram-se os seguintes campos:
a) Login/Novo
b) Perfil
c) Amigos
d) Criar grupos
e) Adicionar pessoas
f) Notificações
g) Adicionar comentários / marcações / fichamentos
Com os seguintes temas:
a) Medidas tipográficas
b) Desenho tipográfico
c) Ilusão visual na tipografia
d) Terminologia
e) Legibilidade
f) Classificação de tipos
g) Sistema de classificação de estilos
61
h) Dicas quentes
i) Exercícios
Após definidas as áreas, deu-se início à exploração de agrupamento do

conteúdo.
3.3.2 Estrutura
A estrutura compreende o desenvolvimento da navegação da interface

gráfica. Ela foi desenvolvida considerando os estudos da análise paramétrica e
tópico 3.3.1 Conteúdo. Adaptando o projeto a metodologia de Garret, resolveu-se
segmentar os conteúdos observados como requisitos no plano de escopo para uma
melhor visualização da arquitetura da informação e fluxo de navegação. Na Figura
37 é possível observar as primeiras explorações do agrupamento do conteúdo.
62
Figura 37: Agrupamento de conteúdo
Após discussões entre os desenvolvedores do presente projeto,

perceberam-se oportunidades de melhorias. Na Figura 38 é possível observar uma
evolução das explorações para o que foi definido como base da plataforma. Nesta
evolução, deu-se início ao entendimento sobre a navegação.
63
Figura 38: Refinamento do agrupamento de conteúdo
Depois de definido o agrupamento do conteúdo, foi utilizada a ferramenta

chamada de fluxo de tarefa, usada para conhecer os caminhos e ações realizadas
pelos usuários para realizar as tarefas de uso. Para uma melhor visualização, o fluxo
foi dividido em fluxograma principal, como mostrado na Figura 39 e fluxograma da
aba flutuante que pode ser acompanhado na Figura 40.
64
Figura 39: Fluxograma principal
Figura 40: Fluxograma da aba flutuante

65
Com a estrutura devidamente mapeada foi possível prosseguir para a próxima

etapa, dando início às explorações dos componentes da interface.
3.4 Plano de esqueleto
O plano de esqueleto é responsável por definir os componentes da interface,

a navegação e o design da informação. A preocupação cabe somente às telas
individualmente e seus componentes (FRAGOSO, 2013, web; GARRET, 2011)
3.4.1 Roughs dos wireframes.
O wireframe é uma ferramenta utilizada para determinar aonde os elementos

gráficos (imagens, textos, ícones) da interface ficarão posicionados, bem como sua
navegação, eles funcionam como guia e sugerem a estrutura básica da interface,
suas representações geralmente são feitas através de formas básicas em tons de
cinza, servindo de orientação posterior para o desenvolvimento estético da interface
gráfica (CHANDLER E UNGER, 2012).
Antes de iniciar o desenvolvimento dos wireframes, é necessário definir em
qual plataforma será desenvolvida a interface gráfica. Levando em consideração a
resolução da tela dos tablets, projetar uma interface gráfica para Android torna-se
complexo, pois existem inúmeros tamanhos, resoluções e formatos de tela distintas.
Por conta do tempo fornecido para o desenvolvimento do projeto, seria inviável
adaptar a interface para mais de uma tela, sendo assim, a plataforma escolhida para
desenvolver o presente trabalho foi o iOS, baseado na justificativa acima citada.
O desenvolvimento dos wireframes tomou como ponto referencial para a
estrutura das informações, o resultado obtido no capitulo 3.2.2 Estrutura. Como pode
ser observado na Erro! Fonte de referência não encontrada., o desenvolvimento
dos wireframes iniciou-se através de um brainstorming para explorações
preliminares, servindo de base para as primeiras discussões.
66
Figura 41: Brainstorming de wireframes
Após a utilização da ferramenta para geração de ideias, partiu-se para as

próximas gerações de alternativas, visando auxiliar no desenvolvimento, foi utilizado
um bloco de papel em formato do ipad.
67
A3
Figura 42: Exploração de wireframe 1

68
A3
Figura 43: Exploração de wireframe 2

69
Durante conversas com pessoas com o perfil do público alvo, os mesmos se

sentiram confortáveis com o conteúdo das telas, sugerindo algumas alterações. A
etapa seguinte será a de aplicação de grid e finalização dos wireframes, verificando
e ajustando os últimos detalhes das telas para a proposta final.
3.4.2 Grid e Wireframes finais
Com a definição preliminar das alternativas, viu-se a necessidade de elaborar

um grid para que os elementos se adequassem todos a um mesmo padrão. Desta
maneira, foi definido um grid modular de 12 colunas e 9 linhas. A partir do grid
definido e dos roughs finais, foram desenvolvidos os wireframes digitais.
a) Login/cadastro (Figura 44) – Para a tela de login definiu-se que deverá

apresentar uma logo ilustrativa e botões para entrar no aplicativo
utilizando um e-mail já cadastrado ou criar uma nova conta.
70
Figura 44: Wireframe login e cadastro
b) Biblioteca – (Figura 45) – Para a tela onde é exibido os títulos de livros

que o usuário terá em sua plataforma, foi definido que as capas ficarão
dispostas horizontalmente e o livro em destaque ficará sobreposto sobre
os outros títulos.
71
Figura 45: Wireframe Biblioteca
c) Índice (Figura 46) – Na lateral esquerda da tela do índice é apresentado

os capítulos do livro onde o usuário poderá navegar de forma vertical. Já
na lateral direita, é apresentado um resumo do capítulo selecionado.
72
Figura 46: Wireframe Indice
d) Conteúdo (Figura 47) – Para as telas de conteúdo foi definido que poderá
existir informações que serão fixas (imagens, exemplos, etc.) e
informações móveis (textos).
73
Figura 47: Wireframe Conteúdo
e) Navegação de páginas (Figura 48) – Definiu-se também que o usuário

poderá acessar todo conteúdo do livro a partir de uma aba que fica oculta
na parte inferior da tela.
74
Figura 48: Wireframe navegação de páginas
f) Menu (Figura 49) – Optou-se por uma aba flutuante que poderá ser
acessada de qualquer outra tela a qualquer momento. Nesta aba estará
presente as funções que o usuário terá acesso.
75
Figura 49: Wireframe menu
Com os wireframes definidos é possível dar sequência a próxima etapa do

desenvolvimento do projeto.
3.5 Plano de superfície
O plano de superfície é responsável por desenvolver os aspectos visuais da

interface. É a “cara” da interface, o design gráfico e a materialização final do projeto
(FRAGOSO, 2013, web; GARRET, 2011). Com base nos estudos realizados durante
a análise paramétrica, encontrou-se alguns padrões de soluções gráficas dos
mesmos. Esses padrões e os requisitos de projetos nortearão o desenvolvimento
para a interface gráfica.
76
3.5.1 Definição de tipografia
A escolha de uma tipografia adequada é de suma importância para o

desenvolvimento do trabalho. De acordo com os aplicativos estudados no tópico
2.3.1 Análise paramétrica e durante a pesquisa realizada no tópico 1.2.3 Tipografia,
o padrão utilizado para leitura em tela é de tipografias sem serifa que possuem
caracteres com hastes simples, sem nenhum tipo de ornamento.
Primeiramente foi separado 3 famílias tipográficas para uma análise mais
aprofundada de seus parâmetros. Com base nesta análise, definiu-se para o projeto
a família tipográfica Open Sans (Figura 50)
Figura 50: Definição da tipografia
A família tipográfica Open Sans foi escolhida primeiramente por apresentar

grande quantidade de pesos, possuir olho/bojo/barriga mais abertos e possuir linhas
levemente arredondadas. A escolha deu-se ainda pela tipografia não ser tão
marcante, podendo ser utilizada em massas textuais, mas também não tão comum
77
que não pudesse ser utilizada em títulos, visto que suas peculiaridades se tornam
visíveis quando há o uso em tamanhos maiores.
3.5.3 Cores
Para dar continuidade ao plano de superfície, se faz necessário definir a

paleta cromática básica para as telas. Um dos principais padrões identificado na
análise paramétrica é a utilização de cores neutras que não conflitam com o
conteúdo proposto pela plataforma. Visto esse padrão, para valorizar o conteúdo e
destacar as ferramentas de utilização optou-se por tonalidades mais escuras para o
modo de leitura noturno e tonalidades mais claras para o modo de leitura diurno.
Para a cor destaque, optou-se por um azul vibrante, para utilizar nos detalhes e
ícones da plataforma. Essa cor foi considerada interessante, por se destacar ao
padrão neutro do fundo e trazer o valor da tecnologia e confiança para as telas. As
cores definidas podem ser visualizadas na Figura 51.
78
Figura 51: Paleta cromática
3.5.4 Ícones
Para uma melhor assimilação entre usuário, botões e funcionalidades,

utilizando-se de uma pesquisa assistemática foi escolhido uma família de ícones que
se encaixa com a proposta visual do presente projeto. A família de ícones pode ser
vista na Figura 52.
79
Figura 52: Família de icones
Fonte: Desenvolvido pelos autores. Thenounproject (web, 2015) .
A família escolhida apresenta uma grande variedade de ícones, porém como

pode ser verificado na Figura 53, somente alguns serão aproveitados para o projeto.
Foram utilizados os ícones que melhor representam as funcionalidades definidas.
80
Figura 53: Ícones escolhidos
Fonte: Desenvolvido pelos autores. Thenounproject (web 2015) .
Deve-se destacar que os ícones escolhidos possuem um signo bem definido

e ícones semelhantes são utilizados por outros aplicativos e sistemas.
Após definido o plano de superfície (tipografia, cores e ícones), deu-se início
a finalização da interface.
3.5.5 Finalização
Após as definições de tipografia e cor, deu-se início ao refinamento e

finalização dos wireframes que foram apresentados no capítulo anterior. Percebeu-
se durante o desenvolvimento, que alguns ajustes seriam necessários para
harmonizar os elementos visuais e que impactariam o uso do aplicativo. Esses
ajustes serão descritos a seguir, de acordo com cada tela. As telas podem ser
visualizadas nas Figuras 54 à 61.
81
Figura 54: Tela de login
a) Figura 54 – Conforme definido durante o desenvolvimento do wireframe da

tela de acesso do usuário, esta apresenta o local para o usuário efetuar o
login ou se cadastrar. Uma das alterações em relação ao wireframe foi a
adição da possibilidade de entrar no aplicativo utilizando contas do
facebook ou twitter.
82
Figura 55: Biblioteca
b) Figura 55 – Nesta figura pode-se visualizar a tela referente a biblioteca de

livros que o usuário poderá ter em sua plataforma. Nela, a ação exemplo
representada é de o usuário clicar sobre a tela e deslizar o dedo para o
lado de preferência, navegando assim de forma horizontal sobre os títulos
existentes. No canto inferior esquerdo é mostrado o título e autor do livro
em destaque no centro da tela.
83
Figura 56: Índice
c) Figura 56 – Após selecionado o livro, a tela apresentada é o índice. Nela o

usuário pode navegar de forma vertical pelos capítulos existentes e ao
escolher e clicar no capítulo de sua preferência, um resumo é exibido no
lado direito da tela.
84
Figura 57: Conteúdo interativo
d) Figura 57 – Esta figura apresenta o conteúdo, navegações e interações

disponíveis. Nesta tela é apresentado um texto sobre terminologia. Na
parte inferior e possível ver um exemplo interativo onde é destacada a
terminologia que é selecionada no texto. O usuário pode ter um destaque
maior no exemplo clicando sobre o mesmo e fazendo movimento de pinça.
Outra interação disponível no conteúdo é a possibilidade do usuário
acrescentar comentários ou fazer fichamentos ao texto.
85
Figura 58: Navegação de páginas
e) Figura 58 - Ainda dentro da tela de conteúdo, caso o usuário queira,

poderá ter acesso a outras páginas do livro, para isso, basta clicar em
qualquer parte da tela com 2 dedos e deslizá-los para cima, após isso o
usuário poderá navegar verticalmente pelas páginas do livro.
86
Figura 59: Aba flutuante
f) Figura 59 – A aba flutuante pode ser exibida sobre qualquer outra tela,
para isso, o usuário deve deslizar o dedo da extremidade esquerda em
sentido ao centro da tela. Esta aba apresenta as funcionalidades de
busca, perfil, amigos, notificações, mensagens, biblioteca, fichamentos,
comentários e configurações.
87
Figura 60: Tema noturno
Figura 61: Conteúdo em tema noturno

88
g) Figura 60 e Figura 61 – Com o intuito de ter uma melhor legibilidade e

conforto, foi desenvolvido um tema noturno que poderá ser ativado e
desativado utilizando a aba flutuante e indo em configurações.
Apresentado os exemplos de refinamento anteriormente, as construções

gráficas das demais telas receberiam o mesmo estilo das soluções utilizadas nos
exemplos do projeto. Assim, finaliza-se o plano de superfície, sendo este o último da
metodologia utilizada para o desenvolvimento do projeto. Contudo, seria possível um
prolongamento do projeto, mas que por não fazer parte de seu escopo, não será
abordado aqui.
89
CONSIDERAÇÕES FINAIS
A intenção inicial para o projeto de conclusão de curso era desenvolver um

novo conceito de ebook interativo, porém, em meio a discussões e decisões, optou-
se por desenvolver uma plataforma interativa que possibilitasse ao usuário ter uma
biblioteca de livros. Desta forma o mesmo iria proporcionar maior liberdade e
utilidade ao projeto quando finalizado. Dito isso, deu-se início ao trabalho buscando
mais informações sobre design editorial e assuntos relacionados à experiência do
usuário, interfaces gráficas e design de interação. Contudo, pelo fato dos autores
terem pouca experiência nessas áreas do design, o projeto se revelou um processo
de muitos aprendizados, que se estendeu até seu término.
Durante o desenvolvimento houve algumas dificuldades, como: contemplar ou
não uma biblioteca de livros, produzir o conteúdo para a plataforma e etc.. Por esse
motivo, o projeto se direcionou ao desenvolvimento das interfaces considerando as
interações entre usuário e conteúdo, pois isso foi extremamente importante durante
várias etapas do desenvolvimento. Dessa forma, ao concluir o projeto, considera-se
finalizado o escopo de desenvolver a interface e a proposta de interações do
aplicativo, visto que o funcionamento, disposição do conteúdo nas telas e a
interação entre elas eram indefinidas no início do trabalho.
Por fim, a experiência de desenvolver a plataforma conceitual interativa para
ebooks foi muito satisfatória por parte dos autores, por poderem se envolver com
novos conceitos e tecnologias, podendo utilizar futuramente esse conhecimento para
novos projetos. É pertinente assinalar que existe a possibilidade de
desmembramento para outros projetos, onde então poderá se desenvolver o
conteúdo de acordo com tema proposto. Outra possibilidade seria a
programação/animação das interfaces e interações, tornando as telas funcionais
possibilitando sua distribuição e/ou comercialização.
90
REFERÊNCIAS
AMBROSE, Gavin; HARRIS, Paul. Fundamentos do Design Criativo. São Paulo:

Bookman, 2009.
BAXTER, Mike. Projeto de Produto: guia prático para o desenvolvimento de

novos produtos. 2. Ed. São Paulo: Edgard Blücher, 2008.
BRINGHURST, Robert. Elementos do Estilo Tipográfico. São Paulo - Cosacnaify

2011.
CLANDER, Carolyn; UNGER, Russ. A Project Guideto UX Design For User

Experience Designers in The Fieldor It Making. 2 ed. California: New Riders,
2012.
COLES, Stephen. The anatomy of type : a graphic guide to 100 typefaces. New
York : Harper Design, 2012.
COLLARO, Antonio. Projeto Gráfico: teoria e prática da diagramação. 4 ed. rev. e

ampl. - São Paulo : Summus, 2000.
COLUSSO, Lucas Franco; Cybis, Alice T. Pereira; Dantas, Mario. Segurança,

Usabilidade e interação. 2012. in 4° Congresso Sul Americano de Design de
Interação.
COOPER, Alan; REIMANN, Robert; CRONIN, Dave. About Face 3. The Essentials
of Interaction Design. Wiley Publishing, Inc, 2007.
CYBIS, W. et al.; Ergonomia e usabilidade: conhecimentos, métodos e

aplicações. 2 Ed. São Paulo: Novatec, 2010.
91
EYSENCK, Michael; KEANE, Mark. Manual de psicologia cognitiva. Porto Alegre:

Ed. Artmed, 2007.
FAILLA, Zoara; Retratos da leitura no Brasil 3. São Paulo. Imprensa Oficial do

Estado de São Paulo. Instituto Pró-Livro, 2012.
GARRETT, Jesse James. The elements of user experience design: user-centered

design for the web and beyound. 2. ed. Berkeley: New Riders, 2011.
HASLAM, Andrew. O livro e o designer II. São Paulo: Rosari, 2007.
HENDEL, Richard. O Design do Livro. São Paulo: Ateliê Editorial, 2006.
_________. ISO 9241-210:2010. Ergonomics of human-system interaction, 2010.
_________. ISO 9241-11:2002. Orientação sobre Usabilidade, 2002.
JACKSON, Richard; MACDONALD, Lindsey; FREEMAN, Ken. Computer generated

color: a practical guide to presentation and display. New York: John Wiley & Sons,
1994.
KRUG, Steve. Não me faça pensar - uma abordagem de bom senso a

usabilidade na web. Alta Books 2008.
MEACHEM, Lester; MARSHALL, Lindsey. Como usar imagens.São Paulo: Rosari,

2010.
MOULE, Jodie. Killer UX Design. Website: SitePoint Pty, 2012.
MUNARI, Bruno. Design e comunicação visual: contribuição para uma

metodologia didática. São Paulo : Martins Fontes, 2011.
PEDROSA, Israel. Da cor a cor inexistente. 2. Ed. Rio de Janeiro: Leo Christiano
Editorial,1980.
92
LUPTON, Ellen; PHILLIPS, Jennifer C. Novos fundamentos do design. São Paulo.

Cosac Naify, 2008.
PINHO, José Benedito. Comunicação em marketing. São Paulo: Papirus, 2001.
PREECE, J. et al. Design de Interação: Além da Interação homem-computador.

3 Ed. Porto Alegre: Bookman, 2013.
PROCÓPIO, Ednei. O livro na Era Digital. São Paulo - Giz Editorial, 2010.
LUPTON, Ellen. Pensar com tipos. São Paulo – Cosac Naify, 2009.
ROBERTS, Lucienne. GRIDS: soluções criativas para designers gráficos. Porto

Alegre: Bookman, 2009.
ROCHA, Claudio. Projeto tipográfico: análise e produção de fontes digitais. São

Paulo: Edições Rosari, 2005.
ROYO, Javier. Design Digital. Rosari 2008.
RECUERO, Raquel da Cunha. Comunidades virtuais: uma abordagem teórica.

Disponível em: <http://www.bocc.ubi.pt/>. Acesso em: 27 jul. 2015
SANTA ROSA, José Guilherme Santa. MORAES, Anamaria de. Design

Participativo. Rio de Janeiro: 2AB, 2012.
SAMARA, Timothy. Guia de Design Editorial. Bookman 2011.
TSCHICHOLD, Jan; A Forma Do Livro: Ensaios Sobre Tipografia e Estética do

Livro. São Paulo. Atelie, 2007
UNGER. Russ; CHANDLER, Carolyn. O Guia para Projetar UX. Alta Books 2010.
93
REFERÊNCIAS DA WEB
FRAGOSO, Laura. Análise da aplicabilidade de uma metodologia de projeto de

websites a partir de um estudo de caso. Disponível em: <http://www.academia.ed
u/1843927/Analise_da_aplicabilidade_de_uma_metodologia_de_projeto_de_website
s_a_partir_de_um_estudo_de_caso>. Acesso em: 29 set. 2015.
PEREIRA, Saulo. Com 18 milhões de tablets, Brasil está pronto para ebooks.
Disponível em: Disponível em: <http://miud.in/1H1K>. Acesso em 11 nov. 2015.
REDAÇÃO. Livros digitais começam a ganhar espaço no Brasil graças aos

tablets. Disponível em: <http://miud.in/1H1L>. Acesso em 11 nov. 2015.
94
REFERÊNCIAS DAS IMAGENS
Figura 1. Jornal em diversos meios de reprodução. Disponível em:

<http://goo.gl/cd9mGp>. Acesso em: 29 jul. 2015.
Figura 2. Comparação de quantidades de livros impressos e ebooks. Disponível

em: <http://www.amazon.com.br>. Acesso em: 29 jul. 2015.
Figura 11: Interação entre usuário e sistema. Disponível em: <http://bota.me/z4b>

Acesso em: 20 out. 2015.
Figura 25: Painel professores. Disponível em: <http://bota.me/z4a> Acesso em: 20

out. 2015.
Figura 26: Painel estudantes Disponível em: Disponível em: <http://bota.me/z4a>

Acesso em: 20 out. 2015.
Figura 29: Moodboard professores Disponível em: Disponível em:

<http://senta.la/1zd37>. Acesso em: 23 out. 2015.
Figura 30: Moodboard alunos. Disponível em: Disponível em:

<http://senta.la/1zd37>. Acesso em: 23 out. 2015.
Figura 31: Livro Pop-Up. Disponível em: <http://miud.in/1h1e>. Acesso em: 28 out.
2015.
Figura 32: Revista eletrônica. Disponível em : <http://miud.in/1h1f>. Acesso em: 28

out. 2015.
Figura 33: Aplicativo de notícias. Disponível em: <http://senta.la/1zd2r>. Acesso

em: 6 nov. 2015.
95
Figura 34: Ebook interativo. Disponível em: <http://senta.la/1zd2t>. Acesso em: 6

nov. 2015.
Figura 52: Família de ícones. Disponível em: <http://senta.la/1zd1n>. Acesso em:

18 nov. 2015.
Figura 53: Ícones escolhidos. Disponível em: <http://senta.la/1zd1n>. Acesso em:

18 nov. 2015.

TCC Proposta Conceitual de Plaforma Interativa para Ebooks

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

TCC Proposta Conceitual de Plaforma Interativa para Ebooks

Enviado por

Direitos autorais:

Formatos disponíveis

1

UNIVERSIDADE DA REGIÃO DE JOINVILLE – UNIVILLE

PROPOSTA CONCEITUAL DE PLAFORMA INTERATIVA PARA EBOOKS

ARI PINTO DE OLIVEIRA JUNIOR

ARI PINTO DE OLIVEIRA JUNIOR

PROPOSTA CONCEITUAL DE PLATAFORMA INTERATIVA PARA EBOOKS

Trabalho de Conclusão de Curso

Os alunos Ari Pinto de Oliveira Junior e Gustavo Ribeiro Vieira, regularmente

Joinville, ____ de ______________de 2015.

______________________ ______________________ ______________________

Este trabalho tem como objetivo o desenvolvimento de uma plataforma conceitual

Palavras-chave: Interatividade; compartilhamento de informações; experiência do

This course conclusion work intends to be a development of an interactive

Keywords: Interactivity; Information sharing; User experience; Teaching-Learning.

Figura 1: Processos e metodologia utilizada ............................................................. 11

Figura 32: Revista eletrônica ..................................................................................... 51

3.5.1 Definição de tipografia ...................................................................................... 76

Com a utilização de novas ferramentas de comunicação na educação, mais

No primeiro capítulo fundamentação teórica, foi levantado referencial teórico

Os processos e metodologia utilizada podem ser visualizados na Figura 1, a

Figura 1: Processos e metodologia utilizada

Fonte: Desenvolvido pelos autores

Para o desenvolvimento deste trabalho foi necessário compreender conceitos,

Os ebooks 1 e as publicações impressas coexistem há aproximadamente 20

Figura 2: Jornal em diversos meios de reprodução.

Fonte: Meios e Publicidade (2015, web)

O surgimento de novos dispositivos eletrônicos, como tablets e eReaders,

Figura 3: Comparação entre quantidade de livros físicos e digitais.

Fonte: Amazon (2015, web)

Assim, percebe-se a relevância no desenvolvimento de um conceito de livro

Mesmo com as novas tecnologias em interação, os estudos em design

1.2 Design editorial

Projetos editoriais para ebooks possuem características próprias, mas

Os grids estão na arte e no design há muito tempo. Já se falava de

Figura 4: Grid de colunas.

Fonte: Desenvolvido pelos autores com base em SAMARA (2011).

O processo de criação de um grid depende basicamente de duas fases de

Figura 5: Grid modular.

Fonte: Desenvolvido pelos autores com base em SAMARA (2011)

O grid determina as divisões internas da página, o seu uso proporciona

O layout aborda as considerações práticas e estéticas do projeto, onde e

1. Baseados em textos, que deve ser organizado para serem lidos em

Figura 6: Layout baseado em textos.

Fonte: Desenvolvido pelos autores com base em HASLAM (2007)

2. Baseado em imagens, onde suas aplicações são determinadas a partir

Figura 7: Layout baseado em imagens.

Fonte: Desenvolvido pelos autores com base em HASLAM (2007)

Buscar compreender os fundamentos da tipografia inclui adquirir

Figura 8: Anatomia tipográfica

Existem três grupos principais que correspondem grosseiramente aos

Figura 9: Classificação dos Tipos

Fonte: Desenvolvido pelos autores com base em Coles (2012),

Dentro de todas essas características de estrutura da tipografia, sua

Figura 10: Espaçamentos

Fonte: Frankenhauser (2014, web)

Para a escolha correta de uma tipografia, deve-se selecionar uma apropriada

1.3 Design da Interação

O design de interação consiste em projetar sistemas interativos eficientes que

Figura 11: Interação entre usuário e sistema

Fonte: Behance (web, 2015)

Buscando encontrar uma melhor forma de interação, na qual o usuário seja

proporcionarão ao usuário, isto é, como o usuário se sentirá na interação com o

1.4 Experiência do usuário (UX) em projetos para dispositivos móveis.

Joinville, de __________de 2015.

__