ROTEIRO DE AUTOESTUDO

NOME DO CURSO PERÍODO DOCENTE C.H.

De 13 de setembro a
Desenhista de Produtos Gráficos Web Daniel Rabelo do Vale 180h
17 de novembro de 2021

OBJETIVOS DO CURSO
Permitir ao aluno o desenvolvimento dos Fundamentos Técnicos e Científicos específicos, capacidades técnicas, sociais,
organizativas e metodológicas, para criar e montar interfaces para websites de acordo com metodologias e padrões de desenvolvimento,
adotando normas técnicas, de qualidade, de saúde e segurança do trabalho e preservação ambiental.

ÍCONES
ETAPAS CONTEÚDO PROGRAMÁTICO DESCRIÇÃO DAS ATIVIDADES/TAREFAS REFERÊNCIAS COMPLEMENTARES
AVA

FASE 1
Acesse a aula Fundamentos para o Design da Página 1 até
16.
Aula - Fundamentos para o design.
Conceito de Pesquisa.
1
Fundamentos Técnicos e Científicos.
Pesquisa de Mercado, Público-alvo e similares. Leia o Livro Didático "Fundamentos do Design" da Página
Principais tipos de Pesquisa. 1 até a 20.

Acesse a Aula da Página 16 até 37.

Aula - Fundamentos para o design. Compilação Fazer as os execícios de passagem.
de Dados.
Ferramentas Web para Pesquisa.
2 Leia o Livro Didático "Fundamentos do Design" da Página
Usabilidade e Ergonomia.
21 até a 35.
Informações, dados e exemplos sobre contratos
OBS.: Ler o livro didático é importante para responder
FASE 1 - FUNDAMENTOS PARA PARA O DESIGN (PARTE 1)

de trabalho.
perguntas dos questionários que valerão ponto.
Prestação de serviço e Briefing.

Aula - Fundamentos para o design. Compilação

de Dados.
Ferramentas Web para Pesquisa.
Usabilidade e Ergonomia.
Informações, dados e exemplos sobre contratos
3
de trabalho.
Prestação de serviço e Briefing.
Estudo Dirigido: Desenvolver atividades que
estimulem o protagonismo e a proatividade
para execução de projetos.
Elabore uma pesquisa de Mercado breve para
prospecção de possíveis clientes (03 perguntas básicas).
Basta pensar em 3 perguntas que você faria para um
possível cliente, alguém que acredite que necessita Assista ao vídeo: Como Fazer uma pesquisa de
produzir um site. Exemplo: Mercado: https://youtu.be/_E5LZRCx-G8 /
"Você gostaria de ter um site na sua empresa?
"Qual a Importância que você atribui para um site
dentro de um negócio?"

Pesquisar na web, modelos de briefing para execução de

Aula - Fundamentos para o design. Compilação
de Dados.
Ferramentas Web para Pesquisa.
4 Usabilidade e Ergonomia.
Informações, dados e exemplos sobre contratos
de trabalho.
Prestação de serviço e Briefing.
sites (É para servir de Referência, não é para enviar),
compilar(organizar) os dados obtidos na micro-pesquisa e
selecionar 3 clientes em potencial (3 empreendedores do
próprio bairro. Exemplo: Uma padaria, uma pessoa que faz
bolo, uma academia, etc). Por exemplo: 2 de 3 clientes
acham um site importante, ou 66% dos entrevistados
acham que um site faz diferença na sua empresa . Baseado,
claro, nas perguntas que fez.

Aula - Fundamentos para o design. Compilação

de Dados.
Ferramentas Web para Pesquisa. Guarde o questionário com as 3 perguntas, elaborado no
Usabilidade e Ergonomia. etapa 3, com as respostas dos empreendedores do bairro,
5
Informações, dados e exemplos sobre contratos para tirar dúvidas e acrescentar informações que poderão
de trabalho. ser perguntadas ao Professor durante uma Live.
Prestação de serviço e Briefing.
Protagonismo Juvenil
 FASE 2
Acesse a aula Fundamentos para o design (parte 2), da
Página 1 até a 15.
Aula - Fundamentos para o design.
Organização de Arquivos e Pastas.
1 Zelo no ambiente de trabalho e Interação.
Conhecimentos sobre Representações Gráficas.
Leia o Livro Didático "Fundamentos do Design" da Página
Ferramentas Web, Editores Gráficos e de Texto.
40 até a 55.

Acesse a aula Fundamentos para o Design (parte 2), da

Aula - Fundamentos para o design.
Página 16 até a 29
Conceito e tipos de Multimídia, Formatos de
Arquivo e suas compressões.
2 Resolução de telas de dispositivos.
Padrões de Cores.
Leia o Livro Didático "Fundamentos do Design" da Página
Conceitos de Imagem em Bitmap e Vetorial.
FASE 2 - FUNDAMENTOS PARA O DESIGN (PARTE 2)

56 até a 73.
Ferramentas de Desenho e edição de imagens.

Aula - Fundamentos para o design.

Execute a Atividade da Situação de Aprendizagem da
Conceito e tipos de Multimídia, Formatos de
página 8 da aula (não é obrigatório)
Arquivo e suas compressões.
Sugestão: Faça em 2 partes para ficar mais leve (uma parte
3 Resolução de telas de dispositivos.
nesta etapa e a outra na próxima).
Padrões de Cores.
Execução da etapa 1: pesquisa e recolhimento dos dados e
Conceitos de Imagem em Bitmap e Vetorial.
imagens sobre a empresa conforme descrito na atividade.
Ferramentas de Desenho e edição de imagens.

Aula - Fundamentos para o design.

Conceito e tipos de Multimídia, Formatos de
Arquivo e suas compressões.
4 Resolução de telas de dispositivos.
Padrões de Cores.
Conceitos de Imagem em Bitmap e Vetorial.
Ferramentas de Desenho e edição de imagens.
Execução da Etapa 2 da Situação de Aprendizagem:
Formatar arquivo, organizar os dados e preparar para o
Envio no AVA. (lembrando: esta atividade não é
obrigatória).
Live com o Tutor - Horário a definir.

Aula - Fundamentos para o design.

Conceito e tipos de Multimídia, Formatos de
Arquivo e suas compressões. Envio da Situação de Aprendizagem através do Link "Envio
Resolução de telas de dispositivos. da situação de Aprendizagem" na área Fase 2" após
5
Padrões de Cores. possíveis correções e ajustes após a live do etapa anterior.
Conceitos de Imagem em Bitmap e Vetorial. NÃO É OBRIGATÓRIO.
Ferramentas de Desenho e edição de
imagens.Situação de Aprendizagem.
 FASE 3
Acesse a aula Projeto Web da Página 1 até 14.
Aula - Projeto WEB Execução dos Exercícios de Passagem (pág. 15 a 17).
Arquitetura em Web Design.
Etapas de Desenvolvimento da Arquitetura em
1
Web Design.
Protótipo. Leitura do Livro Didático "Projeto Web"
Requisitos Funcionais e Não Funcionais. da Página 1 até a 21

Acesse a aula Projeto Web da Página 18 até 29.

Aula - Projeto WEB Execução dos Exercícios de Passagem (pág. 18 a 29).
Interação Humano-Computador (IHC).
2
Relação com Ergonomia e Usabilidade.
Leitura do Livro Didático "Projeto WEB" da Página 23 até a
Recomendações em Usabilidade e Ergonomia.
37.

Aula - Projeto WEB

Realize a análise de 03 sites na Web, devendo ser 01 Portal
Arquitetura em Web Design.
de notícias (exemplo: G1), um de Comércio Eletrônico
Etapas de Desenvolvimento da Arquitetura em
(exemplo: Mercado Livre) e um de entretenimento (não
Web Design.
valendo redes sociais para o último. Exemplo: Porta dos
FASE 3 - PROJETO WEB (PARTE 1)

Protótipo.
Fundos). Não é para enviar.
Requisitos Funcionais e Não Funcionais.
3 Registrar o uso de cores, usabillidade e intuitividade do
Interação Humano-Computador (IHC).
ambiente do site, facilidade de navegação, facilidade em
Relação com Ergonomia e Usabilidade.
compreender ícones exibidos em tela, se é fácil o
Recomendações em Usabilidade e Ergonomia.
entendimento do fluxo de navegação (como o usuário fez
Estudo Dirigido para Desenvolver a capacidade
para chegar até a seção do site em que está navegando),
de análise e discernimento crítico acerca dos
etc.
aspectos estudados

Aula - Projeto WEB
Arquitetura em Web Design.
Etapas de Desenvolvimento da Arquitetura em
Web Design.
Protótipo.
4 Requisitos Funcionais e Não Funcionais.
Interação Humano-Computador (IHC).
Relação com Ergonomia e Usabilidade.
Recomendações em Usabilidade e Ergonomia.
Estudo Dirigido sobre UX (User Experience) e UI
(User Interface)
Texto: O que é UX e UI
https://auditeste.com.br/ux-e-ui-saiba-o-que-sao-e-
entenda-diferenca.
Prepare um material com todos os dados e inferências
feitas à partir da análise realizada no etapa anterior, de
forma organizada, como se fosse apresentar essa análise
ao cliente. (Não é para enviar)
Live com o Tutor: Horário a definir.
Realize a Leitura dos artigos sobre UX e UI indicados nos Diferença sobre UX e UI
links ao lado -->>. https://www.chiefofdesign.com.br/ux-design-e-ui-
design/

Aula - Projeto WEB Responda avaliação de Satisfação do Tutor 1. (obrigatório

Arquitetura em Web Design. para liberar a próxima atividade).
Etapas de Desenvolvimento da Arquitetura em Web
Design.
5 Protótipo.
Requisitos Funcionais e Não Funcionais.
Interação Humano-Computador (IHC). Responder ao Questionário 1 - 2,0 pontos (obrigatório).
Relação com Ergonomia e Usabilidade.
Recomendações em Usabilidade e Ergonomia.

Aula - Projeto WEB
Técnicas de Pesquisa voltadas para execução do
1 projeto e as etapas associadas à elas.
Conceitos de Pesquisa de Campo, Card Sorting,
Wireframe e Eye Trancking.
Aula - Projeto WEB
Conceitos sobre Identidade Visual: Teoria das
2 cores, Diferença entre Marca, logotipo e
Logomarca, Relação Figura-Fundo (e texto X
fundos), Uso e Classificação de Fontes.
Aula - Projeto WEB
Técnicas de Pesquisa voltadas para execução do
projeto e as etapas associadas à elas.
Conceitos de Pesquisa de Campo, Card Sorting,
3 Wireframe e Eye Trancking.
FASE 4 - PROJETO WEB (PARTE 2)
Conceitos sobre Identidade Visual: Teoria das
cores, Diferença entre Marca, logotipo e
Logomarca, Relação Figura-Fundo (e texto X
fundos), Uso e Classificação de Fontes.
Aula - Projeto WEB
Técnicas de Pesquisa voltadas para execução do
projeto e as etapas associadas à elas.
Conceitos de Pesquisa de Campo, Card Sorting,
4 Wireframe e Eye Trancking.
Conceitos sobre Identidade Visual: Teoria das
cores, Diferença entre Marca, logotipo e
Logomarca, Relação Figura-Fundo (e texto X
fundos), Uso e Classificação de Fontes.
Aula - Projeto WEB
Técnicas de Pesquisa voltadas para execução do
projeto e as etapas associadas à elas.
Conceitos de Pesquisa de Campo, Card Sorting,
Wireframe e Eye Trancking.
5 Conceitos sobre Identidade Visual: Teoria das
cores, Diferença entre Marca, logotipo e
Logomarca, Relação Figura-Fundo (e texto X
fundos), Uso e Classificação de Fontes.
Estudo Dirigido sobre ferramentas do tipo
"Construtor de Sites"
FASE 4
Acesse a aula Projeto Web (parte 2) da Página 1 até 08.
Execução dos Exercícios de Passagem (pág. 09 a 11).
Leitura do Livro Didático "Projeto Web" da Página 39 até a
53.
Acesse a aula Projeto Web (parte 2) da Página 12 até 19.
Execução dos Exercícios de Passagem (pág. 20 a 22).
Leitura do Livro Didático "Projeto Web" da Página 55 até a
65.
https://desenvolvimentoparaweb.com/ux/wirefra
Execução da Situação de Aprendizagem (página 23 da aula me-web-guia-completo/
Projeto Web (parte 2) ) - Não é obrigatório.
A atividade pede que seja feita a execução de Briefing e
Wireframe (Wireframe se possível, feito no computador,
mas não tem problema ser em Papel e Caneta.
Usar régua para deixar as linhas mais uniformes e retas).
http://www.tipografos.net/internet/wireframe.ht
Ao lado, dois websites para acessar como referência para ml
produzir os wireframes -->>.
Execução da Atividade Proposta na página 24 da aula
Projeto Web (parte 2) - Não é obrigatório. Continuação da
atividade anterior. No material, tem dicas de ferramentas
on-line.
Live com o Tutor: Horário a definir.
Pesquise sobre as principais ferramentas de criação de
sites on-line simplificadas, presentes na web, entre elas
Wordpress, Wix e Zyro.
Identificar e listar Vantagens e Desvantagens.
(Não é para enviar)
 FASE 5
Acesse a aula Identidade Visual da Página 01 até 12.
Aula - Identidade Visual Execução dos Exercícios de Passagem (pág. 13 a 15).
Conceito e contextualização da Computação
1
Gráfica.
Conceito de Mídias Digitais e Design Gráfico. Leitura do Livro Didático "Identidade Visual" da Página 01
até a 22.

Acesse a aula Identidade Visual da página 16 até 26.

Execução dos Exercícios de Passagem (pág. 27 a 29).
Aula - Identidade Visual
Sintaxe e princípios da Linguagem Visual.
2
Tipos e Características dos elementos visuais.
Leia do Livro Didático "Identidade Visual" da Página 23 até
Técnicas de Comunicação Visual.
a 43.

Aula - Identidade Visual

Sintaxe e princípios da Linguagem Visual.
FASE 5 - IDENTIDADE VISUAL (PARTE 1)

Tipos e Características dos elementos visuais.

Técnicas de Comunicação Visual. Leia o Artigo: "Aprenda Gestalt com o James Brown" Link:
3 Conceito e contextualização da Computação sobre príncipios da Gestalt (Percepção Visual). https://www.desenhadorvirtual.com.br/aprenda_ges
Gráfica. Autor: Luli Radfahrer - PhD em Comunicação Visual. talt_com_james_brown/
Conceito de Mídias Digitais e Design
Gráfico.Percepção visual.
Estudo Dirigido - Leitura de Artigo

Aula - Identidade Visual

Sintaxe e princípios da Linguagem Visual.
Tipos e Características dos elementos visuais.
Técnicas de Comunicação Visual.
4 Live com o Tutor - 14h.
Conceito e contextualização da Computação
Gráfica.
Conceito de Mídias Digitais e Design
Gráfico.Percepção visual.

Assista ao vídeo: Elementos Visuais com a Profa. Riene

Link: https://youtu.be/UDJQ6-x7iHA
Santos.

Aula - Identidade Visual Responder a Avaliação de Satisfação do Tutor 2

Elementos visuais (ponto, Linha, forma e Cor)

5 Fazer a Questionário 2 - 2,0 pontos (obrigatório).


Aula - Identidade Visual
Elementos Fortes para um Design -
Conhecimentos sobre ícones e suas
1 funcionalidades.
Conceitos e fundamentos para criação de
Logomarcas.
Manual de Identidade Visual.
FASE 6
Acesse a aula Identidade Visual (parte 2) a Página 01 até
07.
Execução dos Exercícios de Passagem (pág. 08 a 10).
Leitura do Livro Didático "Identidade Visual" da Página 45
até a 55.

Acesse a aula Identidade Visual (parte 2) da Página 11 até

Aula - Identidade Visual 17 .
Resolução e Tamanho de Telas e dispositivos. Execução dos Exercícios de Passagem (pág. 18 a 19).
Resolução de imagem.
Definições de Tamanho e resolução para Web e
2
Impressão.
Redimensionamento de Imagens em sua Leia do Livro Didático "Identidade Visual" da Página 57 até
resolução. a 66.
Tamanhos usuais para Sites.
FASE 6 - IDENTIDADE VISUAL (PARTE 2)

Aula - Identidade Visual
Formatos de Imagens.
Tipos de Formatos de Imagem para WEB e Para
3 impressão.
Diferenças entre Bitmap e Vetor.
Correção e ajustes em imagens.
Vetorização de imagem em Bitmap.
Acesse a aula Identidade Visual (parte 2) da Página 21 até
26.
Execução dos Exercícios de Passagem (pág. 27 a 28).
Leia do Livro Didático "Identidade Visual" da Página 69 até
a 79.

Aula - Identidade Visual

Elementos Fortes para um Design -
Conhecimentos sobre ícones e suas
funcionalidades.
Conceitos e fundamentos para criação de
Logomarcas.
Manual de Identidade Visual.
Resolução e Tamanho de Telas e dispositivos.
Resolução de imagem. Sugere-se usar o Software GIMP - Software Livre que
Execute atividade da Situação de Aprendizagem (página
Definições de Tamanho e resolução para Web e permite a edição de imagens com similaridades com
4 20). Não é obrigatório.
Impressão. o Photoshop. Assistir ao vídeo: GIMP: Como Usar –
Live com o tutor: Horário a definir.
Redimensionamento de Imagens em sua Passo a Passo - https://youtu.be/KOcsvza50pY
resolução.
Tamanhos usuais para Sites.
Formatos de Imagens.
Tipos de Formatos de Imagem para WEB e Para
impressão.
Diferenças entre Bitmap e Vetor.
Correção e ajustes em imagens.
Vetorização de imagem em Bitmap.

Usar o Software Canvas - Ferramenta On-line com

Aula - Identidade Visual Executar atividade Proposta na página 29 da aula. Não é recursos gratuitos, que permitem a criação de
5
Identidade Visual obrigatório. imagens.
Disponível em www.canva.com (copie e cole o link)
 FASE 7
Acesse a aula Animação da Página 01 até 14.
Aula - Animação Execução dos Exercícios de Passagem (pág. 15 a 16).
Formatos de mídia digital e impressa /
1
Características das mídias e principais
aplicabilidades
Leia o Livro Didático "Animação" da Página 19 até a 29.

Aula - Animação
Fundamentos e conceitos de animação. Acesse a aula Animação a 17 até 37.
Storyboards aplicados na criação da animação. Execução dos Exercícios de Passagem (pág. 38 a 40).
Tipos e Técnicas de Animação.
2 Etapas na construção de animação (Briefing,
Brainstorming / definição de cenas /timing).
Diferenças entre animação 2D, 3D e realidade
virtual. Leia o Livro Didático "Animação" da Página 31 até a 65.
Conceito de Timeline.

Aula - Animação
Formatos de mídia digital e impressa /
Características das mídias e principais
aplicabilidades Leitura do texto "10 Ferramentas para a Criação de
Fundamentos e conceitos de animação. Desafio: Pesquisar Ferramentas on-line de criação de Animações Web". Link:
Storyboards aplicados na criação da animação. animação sobre as ferramentas e sua utilização. http://trajetodigital.com.br/10-ferramentas-para-
Tipos e Técnicas de Animação. Criação de animação pequena de até 30s. (pode ter criacao-de-animacoes-
3
Etapas na construção de animação (Briefing, menos). web/#:~:text=Make%20Web%20Video%20%C3%A9%
Brainstorming / definição de cenas /timing). Acessar o link indicado nas referências Complementares. 20uma%20ferramenta%20on-
FASE 7 - ANIMAÇÃO (PARTE 1)

Diferenças entre animação 2D, 3D e realidade Executar o desafio da criação da animação simples. line%20especializado,que%2C%20de%20outra%20for
virtual. ma%20levar%20horas%20para%20criar.
Conceito de Timeline.
Estudo Dirigido em formato de
Desafio/Gameficado

Aula - Animação
Formatos de mídia digital e impressa /
Características das mídias e principais
aplicabilidades
Fundamentos e conceitos de animação.
Storyboards aplicados na criação da animação.
4 Live com o Tutor: 14h.
Tipos e Técnicas de Animação.
Etapas na construção de animação (Briefing,
Brainstorming / definição de cenas /timing).
Diferenças entre animação 2D, 3D e realidade
virtual.
Conceito de Timeline.

Aula - Animação
Formatos de mídia digital e impressa /
Características das mídias e principais
aplicabilidades
Fundamentos e conceitos de animação.
Participação na live com relato sobre a execução do
Storyboards aplicados na criação da animação.
5 desafio do estudo dirigido.
Tipos e Técnicas de Animação.
Horário a definir.
Etapas na construção de animação (Briefing,
Brainstorming / definição de cenas /timing).
Diferenças entre animação 2D, 3D e realidade
virtual.
Conceito de Timeline.
 FASE 8
Acesse a aula Animação (parte 2) da Página 01 até 09.
Aula - Animação Execução dos Exercícios de Passagem
Princípios Básicos para Projeto WEB. (pág. 10 a 11).
1 Necessidades dos formatos web.
Padrão de cores.
Aplicação de Cores. Leia do Livro Didático "Animação" da Página 67 até a 77.

Execute da Situação de Aprendizagem (página 46 do

Aula - Animação Scorm), onde será realizada uma pesquisa sobre os temas
2
Etapas e técnicas para criação de animação. sugeridos, desenvolver roteiro, storyboard e relato em
estilo making off - Não é Obrigatório.
FASE 8 - ANIMAÇÃO (PARTE 2)

Pesquise tutoriais de como criar animação, acionar o modo

Aula - Animação
3 apresentação do Programa Power Point e/ou gerar vídeo
Ferramentas de Animação da Web.
com a gravação de tela no programa.

Aula - Animação
Princípios Básicos para Projeto WEB.
Necessidades dos formatos web.
4 Padrão de cores. Participe da Live com o tutor: Horário a definir.
Aplicação de Cores.
Etapas e técnicas para criação de animação.
Ferramentas de Animação da Web.

Aula - Animação
Execute a atividade proposta que consiste na criação de
Princípios Básicos para Projeto WEB.
uma animação em estilo stop motion usando o storyboard
Necessidades dos formatos web.
criado na
5 Padrão de cores.
atividade anterior através do
Aplicação de Cores.
programa Power Point. Não é para enviar.
Etapas e técnicas para criação de animação.
Chat com o tutor : 11h.
Ferramentas de Animação da Web.
 FASE 9
Aula - Desenvolvimento WEB Acesse a aula Desenvolvimento Web da Página 01 até 20.
Ergonomia e recomendações da W3C na criação Execução dos Exercícios de Passagem (pág. 21 a 25).
de sites.
Linguagem HTML e a Criação de Sites.
1
Principais tags em HTML. Formatação Visual e
Folhas de Estilos (CSS).
Otimização de Imagens. Leia o Livro Didático "Desenvolvimento WEB" da Página 15
Formatos de Imagem para a WEB. até 70.

Aula - Desenvolvimento WEB Acesse a aula Desenvolvimento Web da Página 01 até 20.
Serviços de Rede. Execução dos Exercícios de Passagem (pág. 21 a 25).
Navegadores Web.
2 Servidores Web.
Protocolos HTTP e FTP.
FASE 9 - DESENVOLVIMENTO WEB

Soluções de Segurança e SSL. Leia o Livro Didático "Desenvolvimento WEB" da Página 72 até
Servidores DNS. 96.

Como exercício, digitar e testar todas as tags HTML constantes

de exemplos no Livro, da página 22 até a 61, e comparar os
resultados.
Aula - Desenvolvimento WEB
3 Pode-se digitar os códigos no Bloco de Notas, Salvar em HTML
TAGS da Linguagem HTML.
e abrir no Navegador ou Usar alguns editores de Código
conhecidos como o Visual Studio (gratuito - pesquisar no
Google, baixar e instalar). Não é para enviar.

Assistir vídeo: Criando sua primeira página web em

30 minutos (básico sobre HTML + CSS).
Aprendizado direcionado e exercício proposto: Assistir dois https://youtu.be/KcPszmtF8cI
Aula - Desenvolvimento WEB tutoriais de criação de páginas em HTML (links disponíveis ao
4
TAGS da Linguagem HTML. lado no quadro "Referências Complementares").
Executar os exercícios dos tutoriais.
Assistir vídeo: Como Criar um Site HTML 2021 - Passo
a Passo Fácil. https://youtu.be/Z23J9ASGrgc

Participe da Live com o tutor: Horário a definir.

Aula - Desenvolvimento WEB
5 Fazer Questionário 3 - 6,0 pontos (Avaliação Final para
TAGS da Linguagem HTML
conclusão do curso).