Upload
emanuel-santana
View
164
Download
0
Embed Size (px)
Citation preview
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.
Ciente desse contexto, a Kroton idealizou e desenvolveu um modelo
de webaula e de livro didático digital interativo, com forte linguagem
visual e intuitivo.
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
DESIGN LIVRO DIGITAL
Engenharias, Ciências Exatas e da Terra
Cores
Degradê linear
R: 12 G: 77 B: 162 C: 99 M:79 Y: 2 K: 0 #0c4da2
R: 0 G: 125 B: 198 C: 84 M:44 Y: 0 K: 0 #007dc6
R: 42 G: 196 B: 224 C: 64 M:1 Y: 0 K: 0 #2ac4f4
4
Ciências da Saúde, Ciências Biológicas e Outros
Cores
R: 70 G: 190 B: 175 C: 66 M: 0 Y: 39 K: 0 #46beaf
R: 216 G: 226 B: 84 C: 19 M: 0 Y: 82 K: 0 #d8e254
R: 255 G: 250 B: 194 C: 1 M: 0 Y: 29 K: 0 #d8e254
R: 216 G: 208 B: 159 C: 19 M: 14 Y: 44 K: 1 #d8d09f
DESIGN LIVRO DIGITAL
Degradê linear
6
Ciências Sociais Aplicadas
Cores
Degradê linear
R: 94 G: 80 B: 128 C: 75 M: 80 Y: 19 K: 4 #5e4480
R: 105 G: 67 B: 154 C: 71 M: 87 Y: 7 K: 1 #694391
R: 255 G: 203 B: 8 C: 1 M:19 Y: 99 K: 0 #ffcb08
R: 38 G: 53 B: 84 C: 93 M: 78 Y: 39 K: 36 #263554
DESIGN LIVRO DIGITAL 8
Linguística, Letras e Artes
Cores
Degradê linear
R: 216 G: 226 B: 84 C: 19 M: 0 Y: 82 K: 0 #d8e254
R: 216 G: 63 B: 142 C: 11 M:89 Y: 6 K: 0 #d83f8e
R: 167 G: 69 B: 151 C: 37 M: 87 Y: 1 K: 0 #a74597
DESIGN LIVRO DIGITAL 10
Ciências Humanas
Cores
DESIGN LIVRO DIGITAL
Degradê linear
R: 239 G: 23 B: 35
R: 166 G: 206 B: 57
R: 80 G: 90 B: 120
C: 0 M: 99 Y: 98 K: 0
C: 40 M: 0 Y: 99 K: 0
C: 74 M: 60 Y: 33 K: 18
#ef1723
#a6ce39
#505a78
12
Ciências Agrárias
Cores
Degradê linear
R: 166 G: 206 B: 57 C: 40 M: 0 Y: 99 K: 0 #a6ce39
R: 113 G: 191 B: 68 C: 60 M: 0 Y: 99 K: 0 #71bf44
R: 6 G: 166 B: 142 C: 80 M: 10 Y: 55 K: 1 #06a68e
DESIGN LIVRO DIGITAL 14
Contracapa CapaDorso
ELEMENTOS GRÁFICOS DOS LIVROS IMPRESSOS - CAPA
Espaço para inserção do código de barras
TítuloDeve ter até 3 linhas.Fonte: DIN MediumTamanho: 48pt (Pode variar de acordo com o tamanho do título)Entrelinhas: 57,6ptAlinhamento: CentralizadoCaracteres: Iniciais maiúsculas
DorsoDeve ter somente 1 linha.Fonte: Foco boldTamanho: 14pt (Pode variar de acordo com o tamanho do título)Entrelinhas: 16,8ptAlinhamento: CentralizadoCaracteres: Caixa alta
ImagemCada área de conhecimento possui imagem de fundo definida.
ContracapaA cor de fundo, em azul no exemplo modifica-se de acordo com a marca.
17
ELEMENTOS GRÁFICOS DOS LIVROS IMPRESSOS
Acontece sempre na página direita.Borda superior: 2cm de alturaBorda lateral: 0,5cm de largura
Abertura de Unidade
20
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
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
ELEMENTOS GRÁFICOS DOS LIVROS DIGITAIS
Navegação
PáginasCada 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
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
Alinhamento: À esquerdaFonte: Museo 700Tamanho: 20ptCor: Muda de acordo com a área de conhecimento
Títulos e Subtítulos
Pode ser trabalhado em 1 ou 2 colunas.Alinhamento: À esquerdaFonte: FocoTamanho: 17ptCor: #3a3a3a
Conteúdo
CitaçãoSempre acompanhada do ícone "aspas" na cor prevista em sua área de conhecimento.Alinhamento: À esquerdaFonte: Museo 500Tamanho: 15ptCor: #3a3a3a
DESIGN WEBAULA / CADERNO DE ATIVIDADES 27
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: 15ptCor do texto: #ffffff
DESIGN WEBAULA / CADERNO DE ATIVIDADES 28
Questão para refl exãoO texto deve estar centralizado conforme a altura do "ponto de interrogação".Alinhamento: CentralizadoFonte: Museo 700Tamanho: 28ptCor: #ffffff
DESIGN WEBAULA / CADERNO DE ATIVIDADES 29
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
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
Os ícones devem ser inseridos respeitando a posição da página:
esquerda ou direita.
ÍCONES - LDD 1.0
Esquerda Direita
37
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
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
TIPOGRAFIA
Para textos em destaque, a variaçãoRounded, da família Museo Sans,foi escolhida.
Preferencialmente, deve serutilizada em caixa alta e somentesobre fundos que possibilitema legibilidade do texto.
Além das variantes apresentadas, podem ser utilizadasoutras 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 Za 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 Za 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 Za 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 Za 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
Para textos corridos, a família tipográfica Foco foi escolhida.
Além das variantes apresentadas, podem ser utilizadasoutras da mesma família.
Caso não seja possível empregara tipografia institucional, como, porexemplo, em peças para webou apresentações em PowerPoint, recomenda-seo uso da família Open Sans.
Textos
Textos
Textos
Textos
Família Foco
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 Za 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 Za 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 Za 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 Za 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 @ ? ! ( ) { } [ ] ; : .
TIPOGRAFIA 42
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 700Tamanho: 30ptEntrelinhas: 32ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Fonte: Museo 700Tamanho: 18ptEntrelinhas: 14ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Título da contracapa
Autores
44
APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Pode ter até 2 linhas.Fonte: Museo 700Tamanho: 9ptEntrelinhas: 10,8ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Unidade
Pode ter até 2 linhas.Fonte: Museo 500Tamanho: 9ptEntrelinhas: 10,8ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Seção
Pode ter até 2 linhasFonte: Museo 100Tamanho: 9ptEntrelinhas: 10,8ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Subtítulo
45
APLICAÇÃO TIPOGRÁFICA DOS LIVROS IMPRESSOS
Deve ter entre 1 e 3 linhas.Fonte: Museo 500Tamanho: 16ptEntrelinhas: 29ptAlinhamento: À esquerdaCaracteres: Caixa alta
Fonte: Museo 700Tamanho: 10ptEntrelinhas: 13ptAlinhamento: JustificadoCaracteres: Inicial maiúscula
Fonte: Museo 100Tamanho: 10ptEntrelinhas: 13ptAlinhamento: JustificadoCaracteres: Inicial maiúscula
Título da unidade
Objetivos de aprendizagem
Objetivos
Deve ter uma linha para cada nome de autor.
Fonte: Museo 300 italicTamanho: 10pt
Entrelinhas: 12ptAlinhamento: À direita
Caracteres: Inicial maiúscula
Deve ter até 2 linhas.Fonte: Museo 700
Tamanho: 12ptEntrelinhas: 14pt
Alinhamento: À esquerdaCaracteres: Inicial maiúscula
Autor da unidade
Seção
Fonte: Museo 100 Tamanho: 10pt
Entrelinhas: 13ptAlinhamento: Justificado
Caracteres: Inicial maiúscula
Descrição da seção
46
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 700Tamanho: 16ptEntrelinhas: 20ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Deve ter até 2 linhas.Fonte: Museo 700Tamanho: 12ptEntrelinhas: 14ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Título da seção
Subtítulo
Fonte: Museo 100 Bold: Museo 500
Tamanho: 10ptEntrelinhas: 13pt
Alinhamento: JustificadoCaracteres: Conforme escrita do autor,
com inicial maiúscula nos parágrafos
Fonte: Museo 100 Tamanho: 6pt
Entrelinhas: 12,5ptAlinhamento: Alinhado à esquerda
quando estiver na coluna da esquerda. Alinhado à direta quando estiver na
coluna da direitaCaracteres: Inicial maiúscula
Conteúdo
Rodapé
47
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 300Tamanho: 9ptEntrelinhas: 10ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Fonte: Museo 300Tamanho: 7ptEntrelinhas: 8ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Numeração e descrição
Fonte
48
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
Solore rest volorpo rrovit enis quatem velit acipissitis explabo ribusanisita 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 500Tamanho: 10ptEntrelinhas: 12ptCor: PretoAlinhamento: JustificadoCaracteres: Inicial maiúscula
Fonte: Museo 500Tamanho: 10ptEntrelinhas: 12ptCor: Papel (branco)Alinhamento: JustificadoCaracteres: Inicial maiúscula
Fonte: Museo 300Bold: Museo 900Tamanho: 11ptEntrelinhas: 12ptCor: C0 M0 Y0 K80Alinhamento: JustificadoCaracteres: Inicial maiúscula
Citação
Para saber mais
Atividades de aprendizagem
49
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 300Bold: Museo 900Tamanho: 11,5ptEntrelinhas: 14ptCor: C0 M0 Y0 K80Alinhamento: JustificadoCaracteres: Inicial maiúscula
Fonte: Museo 300Tamanho: 10ptEntrelinhas: 12ptCor: C0 M0 Y0 K80Alinhamento: JustificadoCaracteres: Inicial maiúscula
Fonte: Museo 300Tamanho: 10ptEntrelinhas: 9ptCor: C0 M0 Y0 K80Alinhamento: JustificadoCaracteres: Inicial maiúscula
Atividades de aprendizagem da unidade
Fique ligado!
Para concluir o estudo da unidade
50
APLICAÇÃO TIPOGRÁFICA DOS LDDS 2.0, 3.0 E 4.0
Fonte: Museo 300Tamanho: 66ptEntrelinhas: 72ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Títulos Unidade
Fonte: Museo 300Tamanho: 66ptEntrelinhas: 72ptAlinhamento: À esquerdaCaracteres: Caixa alta
Títulos Seção
Fonte: Museo 900Tamanho: 22pt
Entrelinhas: 24ptAlinhamento: À esquerda
Caracteres: Inicial maiúscula
Título Peso 1 / Vinhetinha
Fonte: Museo Slab 500Tamanho: 16pt
Entrelinhas: 24ptAlinhamento: À esquerda
Caracteres: Caixa alta
Subtítulo / Peso 2
52
Fonte: Museo 300Bold: Museo 700
Tamanho: 16ptEntrelinhas: 18pt
Alinhamento: À esquerdaEspaço Posterior: 0pt
Caracteres: Inicial maiúscula
Legenda
Fonte: Museo 300Bold: Museo 700
Tamanho: 12ptEntrelinhas: 16pt
Alinhamento: À esquerdaEspaço Posterior: 0pt
Caracteres: Inicial maiúscula
Fonte/Crédito
Fonte: Museo 300Bold: Museo 700Tamanho: 17ptEntrelinhas: 24ptAlinhamento: À esquerdaEspaço Posterior: 12ptCaracteres: Inicial maiúscula
Normal
Fonte: Museo 500Bold: Museo 900Tamanho: 17ptEntrelinhas: 24ptAlinhamento: À esquerdaEspaço Posterior: 12ptCaracteres: Inicial maiúscula
Texto Box
APLICAÇÃO TIPOGRÁFICA DOS LDDS 2.0, 3.0 E 4.0 53
• 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 menor número de caracteres possíveis deve ser utilizado. Lembre-se de que o professor explicará esses itens, logo não é necessário ter a descrição completa deles.
• Informação demasiada atrapalha. O conteúdo deve ser mostrado em partes.
62
MATERIAL DE APOIO - SLIDES
Fonte: Museo 700Tamanho: 34ptEntrelinhas: 1,0Alinhamento: À esquerdaCaracteres: Caixa alta
Títulos
Sempre usar imagens que tenham, no mínimo, 960px de largura.
Imagem de capa
Fonte: FocoTamanho: 24ptEntrelinhas: 1,0Alinhamento: À esquerdaCaracteres: Inicial maiúscula
Número da Aula
Fonte: FocoTamanho: 28ptEntrelinhas: 1,0Alinhamento: À esquerdaCaracteres: Inicial maiúscula
Subtítulo
63
MATERIAL DE APOIO - SLIDES
Fonte: Museo 700Tamanho: 34ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Nome do autor
Fonte: FocoTamanho: 28ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Titulação(Quando houver)
64
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 cor vermelha
Respiro
Sempre deixar livre o espaço indicado na cor verde
Intérprete em Libras
65
MATERIAL DE APOIO - SLIDES
Fonte: Museo 700Tamanho: 32ptAlinhamento: CentralizadoCaracteres: Inicial maiúscula
Títulos
Sempre acompanhado do ícone indicado.Fonte: Foco negritoTamanho: 30ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Tópicos
Fonte: FocoTamanho: 30ptAlinhamento: À esquerdaCaracteres: Inicial maiúscula
Conteúdo
Sempre posicionar imagens e vídeos respeitando os respiros previamente demonstrados.
Audiovisual
Fonte: FocoTamanho: 14ptAlinhamento: À esquerdaCaracteres: Inicial maiúsculaCor: Branco, Plano de Fundo, Mais Escuro 50%
Fonte/Crédito
Intérprete em Libras
66