2. A transformação tornou-se uma constante no cenário atual.
A Era da Informação tem proporcionado experiências novas
diariamente, ampliando as possibilidades de interação, controle
e atualização de conteúdos.
Esse cenário demanda das organizações, que querem se manter
à frente no cenário competitivo, a contínua oferta de caminhos
nunca antes explorados.
Cientedessecontexto,aKrotonidealizouedesenvolveuummodelo
dewebaulaedelivrodidáticodigitalinterativo,comfortelinguagem
visualeintuitivo.
Esses materiais aliam um conteúdo qualificado a tecnologias
disponíveis no ambiente digital, elevando o grau da percepção e
interação do usuário.
No projeto de design, as diversas possibilidades de interação
dos dispositivos de leitura, especialmente tablets, foram
contempladas. Para isso foi necessário analisar cada interface
desenvolvida para que as interações, vitais no desenvolvimento
da webaula e do livro didático digital, permitissem que as ações
sugeridas ampliassem o interesse do leitor e auxiliassem no
processo de construção do conhecimento.
Outro ponto crucial para o projeto foi o desenvolvimento de uma
estrutura de navegação e organização que orienta a localização
do leitor no material didático.
Este manual de programação visual unificada para o material
didático contém orientações para uso e seleção da linguagem
visual, normas e orientações para tratamento dos textos, uso
correto da tipografia para aplicação na diagramação, padrões
visuais, orientações e padrões para uso dos elementos gráficos.
Transformação
17. Contracapa CapaDorso
ELEMENTOS GRÁFICOS DOS LIVROS IMPRESSOS - CAPA
Espaço para inserção
do código de barras
Título
Deve ter até 3 linhas.
Fonte: DIN Medium
Tamanho: 48pt (Pode variar de
acordo com o tamanho do título)
Entrelinhas: 57,6pt
Alinhamento: Centralizado
Caracteres: Iniciais maiúsculas
Dorso
Deve ter somente 1 linha.
Fonte: Foco bold
Tamanho: 14pt (Pode variar de
acordo com o tamanho do título)
Entrelinhas: 16,8pt
Alinhamento: Centralizado
Caracteres: Caixa alta
Imagem
Cada área de conhecimento
possui imagem de fundo definida.
Contracapa
A cor de fundo, em azul no
exemplo modifica-se de acordo
com a marca.
17
20. ELEMENTOS GRÁFICOS DOS LIVROS IMPRESSOS
Acontece sempre na página direita.
Borda superior: 2cm de altura
Borda lateral: 0,5cm de largura
Abertura de
Unidade
20
21. ELEMENTOS GRÁFICOS DOS LIVROS IMPRESSOS
Nas bordas laterais, acima
localiza-se a informação da
unidade e abaixo, a página.
Páginas do
conteúdo
21
22. ELEMENTOS GRÁFICOS DOS LIVROS IMPRESSOS
A borda lateral
deve ter 21,3cm
de altura,
deixando recuo
para a marcação
de página.
Fim da
unidade
Início de outra
unidade.
22
24. ELEMENTOS GRÁFICOS DOS LIVROS DIGITAIS
Navegação
Páginas
Cada assunto é
organizado em páginas,
que podem ser lidas
nas posições vertical e
horizontal. A numeração
da página tem como
padrão indicar em qual o
usuário está e o número
total.
O usuário poderá ver a
Unidade e a Seção que
estão sendo estudadas
no momento. Ao tocar
no ícone "Menu",
aparecerá a lista de
conteúdos.
Setas
Indicam a direção
da próxima página.
O usuário deverá
deslizar conforme
a indicação para
continuar a leitura do
livro.
24
25. ELEMENTOS GRÁFICOS DOS LIVROS DIGITAIS
Espaço reservado
para conteúdos
complementares além
do texto regular.
O usuário poderá usar as abas com o
ícone “mais” para ter acesso a mais
informações sobre o assunto abordado.
Essas sempre estarão acompanhadas do
ícone indicativo .
25
27. Alinhamento: À esquerda
Fonte: Museo 700
Tamanho: 20pt
Cor: Muda de acordo com a
área de conhecimento
Títulos e
Subtítulos
Pode ser trabalhado em 1
ou 2 colunas.
Alinhamento: À esquerda
Fonte: Foco
Tamanho: 17pt
Cor: #3a3a3a
Conteúdo
Citação
Sempre acompanhada
do ícone "aspas" na cor
prevista em sua área de
conhecimento.
Alinhamento: À esquerda
Fonte: Museo 500
Tamanho: 15pt
Cor: #3a3a3a
DESIGN WEBAULA / CADERNO DE ATIVIDADES 27
28. Para saber
mais
O texto deve ser apresentado no
box com a cor prevista em sua
área de conhecimento.
Alinhamento: Alinhado à
esquerda quando estiver na
coluna da esquerda. Alinhado à
direta quando estiver na coluna
da direita.
Fonte: Museo 500
Tamanho: 15pt
Cor do texto: #ffffff
DESIGN WEBAULA / CADERNO DE ATIVIDADES 28
29. Questão para
reflexão
O texto deve estar centralizado
conforme a altura do "ponto de
interrogação".
Alinhamento: Centralizado
Fonte: Museo 700
Tamanho: 28pt
Cor: #ffffff
DESIGN WEBAULA / CADERNO DE ATIVIDADES 29
30. Vídeos
Os vídeos devem ficar
centralizados na página
DESIGN WEBAULA / CADERNO DE ATIVIDADES 30
32. ELEMENTOS GRÁFICOS DE VÍDEOS
Os elementos gráficos que compõem os temas das áreas de conhecimento
também podem ser usados na produção de animações gráficas e
audiovisuais.
32
33. ELEMENTOS GRÁFICOS DE VÍDEOS
Engenharias, Ciências
Exatas e da Terra
Ciências da Saúde,
Ciências Biológicas
e Outros
33
34. ELEMENTOS GRÁFICOS DE VÍDEOS
Ciências Sociais Aplicadas
Linguística, Letras e Artes
34
37. Os ícones devem ser inseridos
respeitando a posição da página:
esquerda ou direita.
ÍCONES - LDD 1.0
Esquerda Direita
37
38. Em fundo escuro
Clique
(toque)
Gire o
dispositivo
para a posição
horizontal
Gire o
dispositivo
para a posição
vertical
Interação com
câmera
Vídeo
Áudio
Deslize para
direita ou para
esquerda
Deslize para
cima ou para
baixo
Toque e
arraste
Deslize o dedo
na tela em
várias direções
ÍCONES - LDD 2.0, 3.0 E 4.0 38
39. Objetos que serão tocados terão
sempre o fio de destaque.
Seção 1
Atividades da Unidade
ÍCONES - LDD 2.0, 3.0 E 4.0 39
41. TIPOGRAFIA
Para textos em destaque, a variação
Rounded, da família Museo Sans,
foi escolhida.
Preferencialmente, deve ser
utilizada em caixa alta e somente
sobre fundos que possibilitem
a legibilidade do texto.
Além das variantes apresentadas,
podem ser utilizadas
outras da mesma família.
DISPLAY
DISPLAY
DISPLAY
DISPLAY
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
Museo Sans Rounded
41
42. Para textos corridos, a família
tipográfica Foco foi escolhida.
Além das variantes apresentadas,
podem ser utilizadas
outras da mesma família.
Caso não seja possível empregar
a tipografia institucional, como, por
exemplo, em peças para web
ou apresentações em PowerPoint,
recomenda-se
o uso da família Open Sans.
Textos
Textos
Textos
Textos
Família Foco
A B C D E FG H I J K L M N O P Q R S T U VWXY Z
a b c d e f g h i j k l m n o p q r s t u vwx y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
A B C D E FG H I J K L M N O P Q R S T U VWXY Z
a b c d e f g h i j k l m n o p q r s t u vwx y z
0 1 2 3 4 5 6 7 8 9 @ ? ! ( ) { } [ ] ; : .
TIPOGRAFIA 42
44. APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Deve ter entre 3 e 5 linhas. Caso exceda
esse espaço, o box poderá aumentar
para baixo e o nome do autor deverá
acompanhar o espaçamento estipulado
no layout.
Fonte: Museo 700
Tamanho: 30pt
Entrelinhas: 32pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Fonte: Museo 700
Tamanho: 18pt
Entrelinhas: 14pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Título da
contracapa
Autores
44
45. APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Pode ter até 2 linhas.
Fonte: Museo 700
Tamanho: 9pt
Entrelinhas: 10,8pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Unidade
Pode ter até 2 linhas.
Fonte: Museo 500
Tamanho: 9pt
Entrelinhas: 10,8pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Seção
Pode ter até 2 linhas
Fonte: Museo 100
Tamanho: 9pt
Entrelinhas: 10,8pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Subtítulo
45
46. APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Deve ter entre 1 e 3 linhas.
Fonte: Museo 500
Tamanho: 16pt
Entrelinhas: 29pt
Alinhamento: À esquerda
Caracteres: Caixa alta
Fonte: Museo 700
Tamanho: 10pt
Entrelinhas: 13pt
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Fonte: Museo 100
Tamanho: 10pt
Entrelinhas: 13pt
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Título da unidade
Objetivos de
aprendizagem
Objetivos
Deve ter uma linha para cada nome
de autor.
Fonte: Museo 300 italic
Tamanho: 10pt
Entrelinhas: 12pt
Alinhamento: À direita
Caracteres: Inicial maiúscula
Deve ter até 2 linhas.
Fonte: Museo 700
Tamanho: 12pt
Entrelinhas: 14pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Autor da unidade
Seção
Fonte: Museo 100
Tamanho: 10pt
Entrelinhas: 13pt
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Descrição
da seção
46
47. APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
As aberturas de unidade, seção e
referências devem estar sempre na
página da direita.
Aberturas
Deve ter até 2 linhas.
Fonte: Museo 700
Tamanho: 16pt
Entrelinhas: 20pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Deve ter até 2 linhas.
Fonte: Museo 700
Tamanho: 12pt
Entrelinhas: 14pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Título da seção
Subtítulo
Fonte: Museo 100
Bold: Museo 500
Tamanho: 10pt
Entrelinhas: 13pt
Alinhamento: Justificado
Caracteres: Conforme escrita do autor,
com inicial maiúscula nos parágrafos
Fonte: Museo 100
Tamanho: 6pt
Entrelinhas: 12,5pt
Alinhamento: Alinhado à esquerda
quando estiver na coluna da esquerda.
Alinhado à direta quando estiver na
coluna da direita
Caracteres: Inicial maiúscula
Conteúdo
Rodapé
47
48. APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Imagem 1.2 | Descrição da imagem.
Fonte: Nullupid qui dolecep elitam landus, cor moluptatae conectem qui arum.
As imagens devem estar em tons de
cinza (grayscale), centralizadas na
página e acompanhadas de numeração,
descrição (acima) e fonte (abaixo).
Fonte: Museo 300
Tamanho: 9pt
Entrelinhas: 10pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Fonte: Museo 300
Tamanho: 7pt
Entrelinhas: 8pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Numeração e
descrição
Fonte
48
49. APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Aximi, vent anis ditam que et occupta dolupta eperfer
iandiae. Pa ex evenimus eature il etur sitem facearit
exerio. Et ea dolor asperia velestias et, si dolora
solecatem nobitia vella aut aut.
1. Aspiendae nostiste esectotam que nimin nobis aborat
erro eiciis eos cuptatatem nis qui non preri acid mo in re,
num ad ut reptas voluptaqui nobis aliti aut quibusa perchil
Solorerestvolorporrovitenisquatemvelitacipissitisexplaboribusanisita
accupti busant, tem accum quis essereratis nullabor rem. Dolectur?
Us aut eium voluptat. Ihic to comnis alique neculparciis ullorum nonse
culluptate in eicia quiandunt in rem de cus mint aut apel moluptasit es
Fonte: Museo 500
Tamanho: 10pt
Entrelinhas: 12pt
Cor: Preto
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Fonte: Museo 500
Tamanho: 10pt
Entrelinhas: 12pt
Cor: Papel (branco)
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Fonte: Museo 300
Bold: Museo 900
Tamanho: 11pt
Entrelinhas: 12pt
Cor: C0 M0 Y0 K80
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Citação
Para saber mais
Atividades de
aprendizagem
49
50. 1. Cae corehent quossectate molorrundio earchic tessint
lam, sin etur? Erruntet vel magnim quam.
Atatiunt aut a di audam in pore, abo. Ate quis sinctatis endion
comnit volupta tusam, quiatem. Nequatiisin rae aut ligenem
fugiam, solut facest, solupta verchil.
Porerrun tistemq uiasper umeneca borrovid que et rem faceres
dellorepraes apis plam qui volorib erciti duciet a nobit ad modi ipiet
et faceariae nonsect.
APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Fonte: Museo 300
Bold: Museo 900
Tamanho: 11,5pt
Entrelinhas: 14pt
Cor: C0 M0 Y0 K80
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Fonte: Museo 300
Tamanho: 10pt
Entrelinhas: 12pt
Cor: C0 M0 Y0 K80
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Fonte: Museo 300
Tamanho: 10pt
Entrelinhas: 9pt
Cor: C0 M0 Y0 K80
Alinhamento: Justificado
Caracteres: Inicial maiúscula
Atividades de
aprendizagem da unidade
Fique ligado!
Para concluir o
estudo da unidade
50
62. • A estrutura dos slides deve ser respeitada do início ao fim. Fontes, margens, formato de figuras, referências, espaçamentos, alinhamentos e cores não
devem ser alterados no decorrer da apresentação.
• A manutenção de um padrão fará com que o aluno o ignore e preste atenção no conteúdo.
• Os primeiros slides devem mostrar o objetivo ou o problema que será trabalhado. É muito importante que dados concretos, gráficos e
imagens do problema sejam apresentados.
• Se figuras, imagens ou vídeos não forem de propriedade do autor, devem ser referenciados.
• Cores bem contrastantes entre texto e fundo devem ser utilizados.
• O menornúmero de caracteres possíveis deve serutilizado. Lembre-se de que o professorexplicará esses itens, logo
não é necessário tera descrição completa deles.
• Informação demasiada atrapalha. O conteúdo deve sermostrado em partes.
62
63. MATERIAL DE APOIO - SLIDES
Fonte: Museo 700
Tamanho: 34pt
Entrelinhas: 1,0
Alinhamento: À esquerda
Caracteres: Caixa alta
Títulos
Sempre usar imagens que tenham, no
mínimo, 960px de largura.
Imagem de capa
Fonte: Foco
Tamanho: 24pt
Entrelinhas: 1,0
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Número da Aula
Fonte: Foco
Tamanho: 28pt
Entrelinhas: 1,0
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Subtítulo
63
64. MATERIAL DE APOIO - SLIDES
Fonte: Museo 700
Tamanho: 34pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Nome do autor
Fonte: Foco
Tamanho: 28pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Titulação
(Quando houver)
64
65. MATERIAL DE APOIO - SLIDES
Utilizar o espaço indicado
na cor cinza para inserir
conteúdos textuais e
audiovisuais
Conteúdo
Sempre deixar livre o espaço
indicado na corvermelha
Respiro
Sempre deixar livre o espaço
indicado na corverde
Intérprete
em Libras
65
66. MATERIAL DE APOIO - SLIDES
Fonte: Museo 700
Tamanho: 32pt
Alinhamento: Centralizado
Caracteres: Inicial maiúscula
Títulos
Sempre acompanhado do ícone indicado.
Fonte: Foco negrito
Tamanho: 30pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Tópicos
Fonte: Foco
Tamanho: 30pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Conteúdo
Sempre posicionar imagens e vídeos
respeitando os respiros previamente
demonstrados.
Audiovisual
Fonte: Foco
Tamanho: 14pt
Alinhamento: À esquerda
Caracteres: Inicial maiúscula
Cor: Branco, Plano de Fundo, Mais Escuro 50%
Fonte/Crédito
Intérprete em Libras
66