Fundamentos da

UI e UX
Professor: Felipe Prada
 User Interface
O que é: A User Interface (UI) refere-se à
parte visual e interativa de um produto.
Inclui botões, ícones, imagens e a própria
disposição dos elementos na tela, que
facilitam a interação do usuário com o
sistema.
 User Experience
O que é: User Experience (UX) engloba
a experiência total do usuário ao interagir
com um produto, incluindo usabilidade,
impressão e satisfação. Trata-se de criar
um fluxo intuitivo que atenda às
necessidades do usuário de forma
eficiente.
 Importância
A UI e a UX impactam diretamente
na satisfação do usuário e no
sucesso de um produto. Um design
eficiente não apenas atrai usuários,
mas também melhora a retenção e
promove a lealdade à marca.
Importância
 Componentes Visuais
Componentes como botões, ícones e menus são
essenciais para a navegação eficiente. Eles
devem ser projetados para serem reconhecíveis
e utilizáveis, promovendo uma experiência fluida
ao usuário.
Ex:[Link]
-[Link]
[Link]
Qs&ab_channel=RedStapler
 Tipografia
Tipografia é a arte e a técnica de
organizar letras e textos de forma
visualmente atraente e legível. É uma
disciplina fundamental do design
gráfico e digital.
Tipos de fonte diferentes podem
comunicar emoções e estabelecer
hierarquia, impactando a experiência
geral do usuário.
 Cores e Espaçamentos
Vermelho 🔴 → Energia, paixão, urgência.
Cores influenciam a Azul 🔵 → Calma, confiança,
psicologia do usuário, produtividade.
enquanto o espaçamento Amarelo 🟡 → Alegria, criatividade,
otimismo, atenção.
adequado melhora a
Verde 🟢 → Equilíbrio, natureza,
usabilidade. Uma paleta harmonia.
bem escolhida e um Roxo 🟣 → Luxo, espiritualidade,
espaçamento consistente criatividade.
são fundamentais para uma Preto ⚫ → Sofisticação, mistério, poder.
Branco ⚪ → Pureza, minimalismo,
UI atraente. calma.
 Navegação e Pesquisa de Usuário
Um sistema de navegação bem estruturado permite a orientação
do usuário de forma intuitiva. Utilizar menus claros e
breadcrumbs facilita a jornada do usuário pela interface.

Já a pesquisa de usuário é um processo vital que coleta dados

sobre as necessidades e comportamentos do usuário. Métodos
como entrevistas, questionários e grupos focais ajudam a
aprofundar a compreensão do público-alvo.
Jornadas do Usuário
A jornada do usuário mapeia a
experiência completa que um
usuário tem ao interagir com um
produto ou serviço. Identificar os
pontos de contato e as emoções
ao longo dessa jornada é
fundamental para melhorá-la.
 Testes de Usabilidade
Testes de usabilidade avaliam a facilidade de uso de um produto através
da observação de usuários reais.
Estes testes ajudam a identificar problemas e áreas de melhoria antes do
lançamento do produto além de desenvolver empatia com os usuários.
 Testes de Usabilidade
Objetivos
● Identificar problemas de usabilidade
● Garantir eficácia, eficiência e satisfação do usuário
● Melhorar a experiência do usuário
● Reduzir custos
● Tornar o produto mais intuitivo, navegável e funcional.
 Testes de Usabilidade
Como são realizados
● São mostrados protótipos iniciais aos participantes
● São coletados dados sobre as experiências dos usuários
durante sua navegação
● São realizadas entrevistas por telefone ou vídeo
Consistência
A consistência na UI facilita a
navegação e reduz a curva de
aprendizado do usuário.
Elementos visuais, terminologia
e layouts devem ser uniformes
em toda a interface.
Atividade Prática
● Escolha um site ou app e responda:
○ O que torna a interface amigável?
○ Quais problemas podem ser identificados?
○ Como poderiam melhorar a experiência?
Acessibilidade
Design acessível garante que
todos, incluindo pessoas com
deficiências, possam interagir
com a interface. Utilizar
contrastes adequados, textos
alternativos e navegação por
teclado são exemplos de boas
práticas em acessibilidade.
Foco no Usuário
A experiência do usuário deve ser
sempre centrada nas necessidades e
expectativas do usuário final. Entender
o comportamento do usuário e suas
preferências é fundamental para
garantir que o produto atenda suas
demandas e ofereça valor real.
 Prototipagem
A prototipagem permite criar
uma versão inicial do produto
para testar ideias e
funcionalidades.
Esse processo ajuda a
identificar problemas e
oportunidades de melhoria
antes do desenvolvimento
final.
Avaliação Contínua
Realizar avaliações contínuas da
experiência do usuário ajuda a captar
feedback e a detectar áreas de
melhoria. Ferramentas de análise e
testes de usabilidade são cruciais para
este processo.
Prototipagem

Professor: Felipe Prada

O que é prototipagem
É um processo que consiste na criação
de um modelo inicial de um produto,
que serve como um rascunho funcional.
É uma etapa dinâmica que permite aos
desenvolvedores testar ideias,
identificar problemas e realizar
melhorias antes da produção em larga
escala.
Protótipos de Papel (Paper
Prototypes)
Um protótipo de papel é uma
representação desenhada à mão de
como será a interface do usuário do seu
aplicativo. Normalmente, ele inclui
desenhos de cada tela do aplicativo,
representando diferentes estados.
 Vantagens
Baixo custo: O papel é barato e não é preciso gastar muito com
ferramentas e kits
Rapidez: É possível descartar rapidamente um design em papel que
não funcionou
Colaboração: É uma oportunidade para equipes se reunir em um
ambiente criativo
Liberdade criativa: O lápis e o papel promovem a experimentação e
novas ideias
 Desvantagens
Dificuldade de replicar detalhes: O papel é flexível e pode rasgar, dobrar
ou empenar, o que afeta a precisão do protótipo.
Testes limitados: É possível testar apenas com pequenos grupos
Pode ser visto como não profissional: Alguns podem achar que não é
um método profissional, principalmente clientes
Desnecessária: Com ferramentas de prototipagem rápida, a
prototipagem em papel pode ser desnecessária.
Mock-Ups Digitais
É uma representação gráfica de um
projeto, que pode ser usado para
apresentação, ou para validar
conceitos.
 Vantagens
Testar a usabilidade: É possível testar o produto com usuários reais
antes de iniciar a produção
Identificar falhas de design: É possível identificar problemas no design
logo no início do processo.
Melhorar a experiência do usuário: É possível aperfeiçoar o design com
base no feedback dos usuários
Facilitar a comunicação: É possível discutir a documentação de
requisitos e explorar as possibilidades do protótipo.
 Desvantagens
Pode Demorar e ser cara: Criar protótipos complexos ou múltiplos pode
ser caro e demorado.
Sistema difícil de usar: Se o protótipo não for bem desenvolvido, o
sistema resultante pode não atender às necessidades dos usuários.
Desenvolvimento excessivo: O foco pode estar mais em detalhes e
recursos do que na proposta de valor ou no problema do cliente.
Criar expectativas irreais: Os clientes ou partes interessadas podem
não entender as limitações do protótipo.
Protótipos Funcionais e
Interativos
Um protótipo funcional é uma
representação de um produto que
permite avaliar a sua funcionalidade.
Um protótipo interativo permite que o
utilizador interaja com o produto.
 Vantagens
Correções oportunas: Evitar erros dispendiosos e garantir que o produto
final atende às especificações de design
Detecção de problemas: Identificar falhas e problemas de design antes
da produção em massa
Simular a experiência do usuário: Permitir que os usuários interajam
com o protótipo, clicando em botões e navegando entre telas
Validar ideias: Visualizar simplificadamente o produto ou mecanismo
que se quer testar
 Desvantagens
Confusão:Os usuários finais podem confundir o protótipo com o artigo
finalizado
Pode criar expectativas irrealistas ou confusão entre clientes ou partes
interessadas
Retrabalho:Se as alterações forem muitas, no fim do dia, vai ser quase
como um retrabalho.
Atrasos:Pode tornar lento o processo de design e desenvolvimento
Criar e iterar protótipos de alta fidelidade consome tempo
 Por quê fazer protótipos
A prototipagem permite incorporar feedback dos usuários rapidamente,
garantindo que o produto resolverá o problema do usuário.
A prototipagem permite identificar falhas e riscos potenciais no início do
desenvolvimento.
Evita a necessidade de retrabalho caro ou redesenho completo.
A prototipagem também permite antecipar objeções de investidores.
 Por quê fazer protótipos
A prototipagem virtual permite uma melhor colaboração entre o
departamento de fabricação, engenharia e outros processos na
corporação.
A prototipagem permite eliminar a necessidade de certos componentes
ou recursos.
A identificação de falhas no início do desenvolvimento evita erros
dispendiosos no futuro.
A prototipagem permite testar ideias e entender o que dá certo e o que
não funciona bem na prática.
ATIVIDADE
Desenvolva um protótipo de papel das telas de um sistema(tema a sua escolha).

Deve conter uma página para cada tela do sistema.

É necessário ao menos:

● Uma tela de cadastro de usuário.

● Uma tela de Login
● Uma tela de venda do Produto
● Uma tela de Confirmação de venda
● Uma tela Inicial
User Interface

Professor: Felipe Prada

 User Interface
O que é: A User Interface (UI) refere-se à
parte visual e interativa de um produto.
Inclui botões, ícones, imagens e a própria
disposição dos elementos na tela, que
facilitam a interação do usuário com o
sistema.
 Elementos da UI
Alinhamento: Alinhar elementos melhora a legibilidade e a
organização.
Tamanho: O tamanho indica hierarquia visual.
Espaçamento: Espaço entre elementos evita poluição visual.

Texturas: Texturas ou padrões de fundo podem reforçar identidade

visual, mas devem ser usados com moderação.
 Elementos da UI
Fontes: A tipografia comunica a identidade da interface.
Repetição de elementos: Repetir padrões visuais (botões, ícones,
cores) cria consistência e reforça a memória visual do usuário.
 Tipografia
Tipografia é a arte e a técnica de
organizar letras e textos de forma
visualmente atraente e legível. É uma
disciplina fundamental do design
gráfico e digital.
Tipos de fonte diferentes podem
comunicar emoções e estabelecer
hierarquia, impactando a experiência
geral do usuário.
 Influência na leitura
● Fontes clássicas com serifa, como a Times New Roman,
transmitem confiança e formalidade.
● Fontes modernas sem serifa, como a Helvetica, são versáteis e
limpas.
● Fontes manuscritas, como a Pacifico, criam proximidade
emocional.
 Influência na percepção da
marca
● Fontes arredondadas e suaves, como a Comic Sans, podem
evocar uma sensação de leveza e descontração.
● Fontes mais fortes e angulosas, como a Impact, podem passar
uma sensação de força ou seriedade.
● A escolha da fonte pode contribuir para a transmissão da
mensagem e para a credibilidade da marca.
 Padrões de Leitura: F e Z
Os padrões de leitura em F e Z descrevem
como os olhos se movem ao ler, dependendo
se estamos lendo em papel ou na tela.
O leitor verifica o lado esquerdo procurando
palavras-chave interessantes em tópico,
títulos, geralmente alinhados à esquerda.
Quando acha algo que lhe interessa o leitor
continua a leitura no sentido da direita.
 Padrões de Leitura Z
● Ocorre em páginas da web, como
blogs e artigos.
● O leitor começa no topo da
página, procurando
palavras-chave interessantes.
● O leitor continua a leitura no
sentido da direita
● Esse padrão é mais utilizado em
interfaces com muito texto.
 Padrões de Leitura F
● Ocorre em mídias impressas, como
jornais, revistas, pôsteres e anúncios.
● O leitor começa no canto superior
esquerdo da página, desce até o
inferior direito, e volta para o superior
esquerdo.
● Esse padrão é também conhecido
como diagrama de Gutenberg.
Para captar a atenção do leitor
Alinhar as informações importantes à
esquerda: Essa prática facilita a leitura, pois
seguimos um padrão natural de leitura da
esquerda para a direita.
Utilizar títulos curtos e em negrito: Títulos
curtos são mais memoráveis e em negrito,
destacam-se visualmente, aumentando a
atratividade.
Para captar a atenção do leitor
Utilizar imagens: Imagens atraentes e relevantes
enriquecem o conteúdo e chamam atenção, além
de ajudar na compreensão ao ilustrar conceitos.
Utilizar tópicos: Apresentar informações em
forma de lista facilita a organização do texto e
permite uma leitura mais dinâmica.
Para captar a atenção do leitor
Utilizar diferentes fontes, cores ou tamanhos
de texto: Variações no design textual mantêm o
leitor engajado e ajudam a destacar partes
específicas.
Marcar em negrito as informações mais
importantes: Negritar termos e frases cruciais
ajuda a direcionar o foco do leitor para o que
realmente importa.
Capacidades Básicas do Designer
Utilizar eventos:
● Eventos são ações do usuário: clique, toque, rolagem, digitação,
comando de voz.
● É importante responder visualmente a esses eventos (ex: botão
muda de cor ao clicar).
● Reconhecer formas geométricas para estruturar a interface e
manter padronização.
Capacidades Básicas do Designer
eventos:
onClick: Quando o usuário clica com o mouse ou toca na tela.
onHover: Quando o usuário passa o mouse sobre um elemento.
onChange: Quando uma informação é modificada (como ao
escolher uma opção de lista).
onSubmit: Quando um formulário é enviado. Esses eventos são
programados para acionar funções específicas.
Capacidades Básicas do Designer
Navegação
● Boa navegação permite que o usuário encontre o que procura
rapidamente e sem frustração.
● Tipos comuns: menus horizontais/verticais, breadcrumbs, botões
de ação.
● Menos é mais. Interfaces simples evitam que o usuário se perca.
Tipos de Navegação: Menu fixo, Botões de navegação,
Breadcrumbs(mostram o caminho feito pelo usuário, como: Início >
Loja > Promoções)
Tipos de Interface

Texto
● Interfaces baseadas em texto (ex:
terminal de comandos, chatbots).
● Muito usadas em sistemas técnicos
ou de suporte.
 Tipos de Interface
Voz
● Interfaces controladas por
comandos de voz (ex: Alexa,
Google Assistant).
● Devem ser projetadas pensando
em feedback auditivo e respostas
claras.
 Tipos de Interface
Natura (ou Natural)
● Interfaces naturais: gestos,
movimento, toque, realidade
aumentada.
● Exemplos: Kinect, interfaces em
VR/AR, swipes em telas de toque.
ATIVIDADE
Agora com esses conceitos em mente, aperfeiçoe o Design feito na última aula.

Após isto o grupo apresentará o Design para a sala, e a função dos colegas é
criticar ao máximo que conseguir a interface apresentada.
User Experience

Professor: Felipe Prada

 User Experience
O que é: User Experience (UX) engloba
a experiência total do usuário ao interagir
com um produto, incluindo usabilidade,
impressão e satisfação. Trata-se de criar
um fluxo intuitivo que atenda às
necessidades do usuário de forma
eficiente.
Design Centrado no Usuário (DCU)
● Vocês já usaram um site ou app que parecia difícil ou confuso?
● Um bom design nasce da observação dos usuários e da solução dos seus
problemas.
“O erro é do sistema e nunca do usuário”
Design Centrado no Usuário (DCU)
● Pensa nas necessidades do usuário antes do design.
● Conceitos-chave: personas, jornada do usuário, testes de usabilidade.
● Exemplo: Redes sociais personalizam conteúdo para melhorar a experiência.
Design Centrado no Usuário (DCU)
● Foco no usuário: As decisões de design são baseadas em pesquisas sobre
os usuários reais, suas necessidades e comportamentos.
● AIteração constante: O design é testado e refinado em ciclos sucessivos,
incorporando feedback dos usuários.
● Uso de prototipagem: Protótipos são criados e testados antes do produto
final, garantindo que o design atenda às expectativas.
● Acessibilidade e usabilidade: O produto deve ser fácil de usar para o maior
número possível de pessoas, independentemente de suas habilidades.
● Testes e validações: São realizados testes de usabilidade para identificar e
corrigir problemas antes do lançamento.
DCU - Personas
São representações fictícias dos usuários típicos de um produto ou serviço,
baseadas em pesquisas reais. Elas ajudam a equipe de design a entender melhor
o público-alvo e suas necessidades.

● Nome fictício
● Idade e profissão
● Objetivos e desafios
● Comportamentos e hábitos
● Frustrações e necessidades
DCU - Jornada do Usuário (User Journey)
É o caminho que um usuário percorre ao interagir com um produto ou serviço.
Ajuda a identificar pontos de atrito e oportunidades de melhoria.

Passos para criar uma jornada do usuário:

● Definir a persona
● Mapear as etapas da interação
● Identificar emoções e dificuldades em cada etapa
● Propor soluções para melhorar a experiência
DCU - Testes de Usabilidade
São testes práticos em que usuários reais interagem com um protótipo ou produto
para identificar problemas na navegação e usabilidade.

● Teste moderado: Um facilitador guia o usuário

● Teste não moderado: O usuário testa sozinho
● Teste A/B: Compara duas versões do design
● Eye Tracking: Analisa para onde o usuário olha na tela
DCU - Benefícios
Uma experiência positiva deixa uma impressão duradoura nos usuários. Um
design centrado no usuário contribui para construir uma imagem de marca que se
preocupa com seus clientes e oferece soluções de qualidade.

Ao entender como os usuários pensam e agem, você cria interfaces e fluxos mais
intuitivos e fáceis de usar. As pessoas conseguem encontrar o que precisam e
realizar suas tarefas sem frustração.

Quando um produto ou serviço é projetado para atender às suas reais

necessidades e expectativas, os usuários ficam mais satisfeitos. Isso leva a uma
percepção positiva da marca e maior lealdade.
Processos de design interativos
Os processos de design interativos são
abordagens no design que enfatizam a repetição e
a colaboração contínua ao longo do ciclo de
desenvolvimento de um produto ou serviço. Em
vez de seguir uma sequência linear de etapas, o
design interativo envolve ciclos de planejamento,
design, prototipagem, avaliação (com usuários) e
refinamento.
Design interativos características
Aprendizado contínuo: Cada iteração é uma oportunidade
de aprender mais sobre os usuários, o problema que está
sendo resolvido e a eficácia das soluções propostas. O
design evolui com esse aprendizado.

Gerenciamento de risco: Ao identificar e corrigir

problemas em estágios iniciais, os processos interativos
ajudam a reduzir os riscos e os custos associados a
mudanças tardias no projeto.

Flexíveis: Não seguem um plano rígido do início ao fim. O

processo se adapta aos aprendizados e às mudanças de
requisitos que surgem durante as iterações.
A usabilidade deve ser Intuitiva e Amigável
Amigável: Um aplicativo deve ser fácil de ser usado pelas pessoas. Quanto
melhor a usabilidade, mais simples é sua utilização pelo usuário. Neste caso,
deve-se considerar que possui recursos intuitivos e que transmitem confiança.

Intuitivo: No contexto da interação humano-computador (IHC) e da experiência

do usuário (UX), refere-se à qualidade de um sistema, interface ou produto que
permite aos usuários compreenderem seu funcionamento e utilizarem suas
funcionalidades de forma natural e imediata, com o mínimo de esforço
consciente, aprendizado prévio ou instruções explícitas.
Atividade
[Link]
KCMbKOnK64/edit?usp=sharing

Siga o modelo acima e faça um documento sobre o seu produto.

Coleta de Informações
Professor: Felipe Prada
 Determinação de estratégia
A determinação de estratégia consiste em
identificar recursos, planejar metas e
planos de ação. Basicamente sendo um
método de garantia do sucesso da
empresa, sendo basicamente obrigatório
para alcançar grandes resultados e para
ter um rumo pré-estabelecido com
relação aos negócios.
 Aplicação de estratégias

A aplicação de estratégias consiste em

realizar o que foi estabelecido previamente,
garantindo que seja aplicada de forma
correta e eficiente todos os planos e metas
estabelecidos.
 Como definir metas
1. Etapas para definir metas
2. Pensar nos resultados que deseja alcançar
3. Identificar valores e o que considera mais importante
4. Visualizar o melhor futuro possível
5. Escolher metas realistas e alcançáveis
6. Estabelecer prazos razoáveis
7. Dividir metas grandes em etapas
8. Criar um plano de ação
9. Colocar em prática
 Determinação de estratégia - etapas
● Definir metas
● Pesquisar
● Identificar riscos
● Estabelecer marcos
● Atribuir tarefas
● Destinar recursos
 Como Pesquisar e Identificar riscos
Pesquisar: Para pesquisar uma estratégia, você pode definir o tema,
estabelecer palavras-chave, analisar o mercado e a concorrência, e
avaliar o ambiente externo.
Identificar riscos: É o processo de reconhecer e documentar
ameaças potenciais a um negócio, projeto ou atividade. É uma etapa
fundamental para a gestão de riscos e para a tomada de decisões
informadas.
 Como estabelecer marcos
1. Definir os objetivos do projeto
2. Identificar as tarefas e dependências
3. Determinar o tempo necessário para cada tarefa
4. Identificar os momentos importantes do projeto
5. Estabelecer marcos que representam esses momentos
6. Escolher a quantidade ideal de marcos
7. Garantir que os marcos sejam realistas e alcançáveis
8. Usar métricas claras para medir o progresso
 Atribuição de tarefas

1. Distribuir a carga de trabalho com base em conhecimentos,

disponibilidade, confiança e funções
2. Considerar o tempo que cada pessoa irá trabalhar na tarefa
3. Verificar se a duração da tarefa pode mudar inesperadamente
4. Examinar todos os fatores de agendamento que possam afetar
a tarefa
 Como distribuir recursos

1. Faça um levantamento de quanto precisa

captar
2. Crie um orçamento que especifique onde
os recursos serão alocados
3. Estabeleça uma rotina de revisão do
planejamento
4. Planeje soluções e projetos do tamanho
que você consegue executar
 Coleta de feedbacks
A coleta de feedback é um processo de obter opiniões de clientes
sobre um produto ou serviço. É uma ferramenta fundamental para
empresas que querem melhorar a experiência do cliente e o
desempenho do negócio.
Algumas vantagens:
● Identificar pontos fortes e fracos
● Fazer ajustes necessários
● Manter-se competitivo no mercado
● Aumentar a fidelização de clientes
● Melhorar a imagem da empresa
● Tomar decisões estratégicas
 Resolução de conflitos

Para resolver conflitos, é possível utilizar

estratégias como a negociação,
mediação, arbitragem e litígio. Para
coletar informações sobre conflitos,
pode-se realizar uma análise de conflito
ou aplicar questionários.
 Determinação de escopo
A determinação de escopo é o processo de definir o que está incluído
e o que está excluído de um projeto, é importante definir um escopo
para:
● Atender às metas e objetivos do projeto sem atrasos ou excesso
de trabalho
● Orientar e tornar realista a pergunta da pesquisa
● Decidir quais dados precisam ser coletados
● Evitar conflitos em relação ao orçamento e cronograma
● Aumentar a qualidade de entrega
● Satisfazer o cliente
● Eficientizar o trabalho a ser realizado
ATIVIDADE
Agora com esses conceitos em mente, aperfeiçoe o Design feito na última aula.
O grupo deve coletar informações com os colegas sobre o que eles não gostaram
em seu projeto.
Anote os pontos abordados e depois os mude no projeto.
Também deve ser solicitado opnião de 2 novas telas que serão adicionadas ao
design.
Após isso coletar o FeedBack para saber se as mudanças estavam de acordo
com as críticas do colega.
Direitos autorais
Professor: Felipe Prada
 Direitos autorais
Os direitos autorais são um ramo do direito da
propriedade intelectual que protege obras
originais de criação humana, garantindo ao
autor o controle sobre o uso e a exploração de
sua produção intelectual. Eles surgem
automaticamente no momento da criação da
obra, sem a necessidade de registro formal
(embora o registro possa servir como prova
em disputas legais).
 Direitos Autorais
Os direitos autorais cobrem diversas
formas de expressão criativa, incluindo
literatura, música, artes visuais,
fotografia, software e produções
audiovisuais. No entanto, não protegem
ideias, conceitos, métodos ou
descobertas, apenas a forma como são
expressos.
 Direitos Autorais
Os direitos autorais cobrem diversas
formas de expressão criativa, incluindo
literatura, música, artes visuais,
fotografia, software e produções
audiovisuais. No entanto, não protegem
ideias, conceitos, métodos ou
descobertas, apenas a forma como são
expressos.
Exceções
A lei prevê exceções para o uso da
obra sem autorização, como em
casos de uso justo (fair use) ou cópia
privada, dependendo da legislação
vigente. Isso permite, por exemplo,
citações para fins acadêmicos,
paródias ou o uso de trechos de
obras para ensino.
 Princípios
Os direitos autorais baseiam-se em dois princípios fundamentais:
1. Reconhecimento da autoria:
Onde o criador tem o direito de ser identificado como o autor de sua
obra.
2. Proteção contra uso não autorizado:
Garante que terceiros não possam copiar, distribuir ou modificar a
obra sem permissão do autor original ou seu representante
 Categorias
Direitos morais
São direitos inalienáveis e irrenunciáveis que protegem a relação
entre o autor e sua obra. Eles incluem:
Direito de paternidade
Direito de integridade
 Categorias
Direitos patrimoniais
São os direitos que permitem a exploração econômica da obra. O
autor pode:
Reproduzir a obra em qualquer formato (livros, CDs, digitais, etc.)
Distribuí-la ou vendê-la
Exibir ou executar publicamente
Licenciar ou ceder esses direitos para terceiros
 Categorias
Prazo de validade
É importante destacar que os direitos patrimoniais têm um prazo de
validade que varia conforme a legislação de cada país. Em muitos
países, duram durante toda a vida do autor e continuam por um
período após sua morte (geralmente de 50 a 70 anos), antes de a
obra entrar em domínio público.
 Anterioridade
A anterioridade é a comprovação de que uma obra foi criada antes
de outra, servindo como prova de autoria original em caso de
disputa.
A anterioridade serve para:
Provar quem criou primeiro em disputas legais;
Evitar acusações de plágio;
Garantir o reconhecimento e os direitos do autor legítimo.
 Anterioridade
Como se comprova:
Registro da obra em órgãos oficiais (como a Biblioteca Nacional, no
Brasil);
Publicação com data verificável (livros, jornais, sites, plataformas
digitais);
Contratos, e-mails, arquivos digitais com metadados de criação;
Depósito em cartório.
 Legislação
L9610. LEI Nº 9.610, DE 19 DE FEVEREIRO DE 1998. Altera,
atualiza e consolida a legislação sobre direitos autorais e dá outras
providências. Art. 1º Esta Lei regula os direitos autorais,
entendendo-se sob esta denominação os direitos de autor e os que
lhes são conexos.
 Creative Commons
Creative Commons (CC) é uma organização
sem fins lucrativos que oferece licenças
padronizadas para que autores possam
permitir, de forma clara e legal, o uso de suas
obras por outras pessoas — de maneira mais
flexível do que os direitos autorais tradicionais
permitem.
 Creative Commons
O principal objetivo do Creative Commons é promover o
compartilhamento e o uso legal de conteúdos criativos, como textos,
músicas, imagens, vídeos e outros, especialmente na internet, sem
que o autor perca seus direitos.
Para ela funcionar é necessário que o autor escolha entre
diferentes tipos de licenças, combinando permissões e restrições.
Essas licenças são aplicadas à obra e informam aos usuários o que
pode ou não ser feito com ela.
 Principais licenças
C BY – Permite tudo, desde que o autor seja
creditado.
CC BY-SA – Permite tudo, com atribuição, e
exige que obras derivadas usem a mesma
licença.
CC BY-ND – Permite uso comercial e não
comercial, mas sem modificações.
 Principais licenças
CC BY-NC – Permite uso e adaptação, mas
só para fins não comerciais.
CC BY-NC-SA – Permite uso não comercial
com compartilhamento igual.
CC BY-NC-ND – Mais restritiva: só permite
redistribuição não comercial, sem alterações,
com crédito.
 Como registar
O registro de direitos autorais não é
obrigatório para garantir a proteção de uma
obra, pois no Brasil, segundo a Lei de
Direitos Autorais (Lei 9.610/98), a proteção
nasce no momento da criação. No entanto,
registrar a obra serve como prova de autoria
em caso de disputas.
 Como registar
1. Entrar no LINK:
[Link]
orais-na-biblioteca-nacional
2. Envio da obra em formato aceito pelo órgão
3. Pagamento de uma taxa
4. Preenchimento de formulário com dados do autor
5. Aguardo da análise e emissão do certificado
ATIVIDADE
Em trios:

● Procure casos reais de processos famosos por violação de direitos autorais.

● Cite as fontes das pesquisas.
● Ache a legislação vigente que foi conclusiva para o caso.
● Apresente para a turma o que foi encontrado.
Princípios de design
Professor: Felipe Prada
 O que é
Os princípios de design são diretrizes fundamentais que orientam a
criação de projetos visuais, produtos, ou experiências, com foco na
funcionalidade, estética e comunicação eficaz.
 Importância
Primeira Impressão: O visual é o que cria a primeira impressão. Um
design atraente pode despertar curiosidade e interesse imediato.
Comunicação Clara: O design visual organiza informações de forma
que sejam compreendidas intuitivamente, facilitando a assimilação da
mensagem.
Identidade da Marca: Cores, fontes e estilos visuais são essenciais
para criar e reforçar a identidade de uma marca, tornando-a
reconhecível e memorável.
 Importância
Engajamento Emocional: O visual desperta emoções no público,
influenciando comportamentos e decisões.
Acessibilidade: Um bom design visual considera também a diversidade
de usuários, garantindo que todos consigam interagir com a interface ou
material de maneira eficaz.
Estética e Funcionalidade: O equilíbrio entre a beleza visual e a
usabilidade é vital para que o design seja tanto agradável quanto
eficiente.
 Princípios de Design
Equilíbrio: A distribuição dos elementos visuais deve ser harmônica,
podendo ser simétrica ou assimétrica, para criar estabilidade e ordem.
Contraste: A utilização de diferenças, como cores, tamanhos, formas,
ou texturas, para destacar elementos importantes e melhorar a
legibilidade.
Proximidade:Agrupar elementos relacionados visualmente para
estabelecer conexões e melhorar a organização.
 Princípios de Design
Alinhamento: Garantir que todos os elementos estejam organizados e
alinhados de forma consistente para criar uma aparência limpa e
profissional.
Repetição: Reutilizar padrões, cores ou formas para criar coesão e
fortalecer o reconhecimento visual.
Hierarquia: Estabelecer uma ordem visual, com base na importância,
através do tamanho, cor ou posicionamento.
 História do Design
Pré-história e Antiguidade: As pinturas rupestres, datadas de cerca de
40.000 anos atrás, foram os primeiros indícios de design, usadas para
contar histórias e transmitir ideias. Civilizações como os egípcios e
mesopotâmicos desenvolveram sistemas visuais mais organizados,
como hieróglifos e escrita cuneiforme
Renascimento: Houve um renascimento do pensamento clássico,
trazendo simetria e proporção. Artistas e designers como Leonardo da
Vinci e Michelangelo exploraram a relação entre arte, ciência e
funcionalidade.
 História do Design
Idade Média: Durante a Idade Média, o design estava fortemente ligado
à arte sacra, com foco em vitrais, manuscritos ilustrados e arquitetura
gótica.
Revolução Industrial: No século XIX, a produção em massa e a
mecanização impulsionaram o design moderno. Movimentos como o
Arts and Crafts, liderado por William Morris, destacaram a importância
do artesanato e da estética funcional
 História do Design
Era Digital: Com o advento de softwares como Photoshop e Illustrator, o
design gráfico passou por uma transformação significativa, tornando-se
mais acessível e rápido. A internet trouxe novos desafios e
oportunidades, como o design responsivo e a experiência do usuário
(UX)
Pós-modernismo: Na segunda metade do século XX, o
pós-modernismo desafiou as ideias minimalistas do modernismo,
adotando a complexidade, cores vibrantes e diversidade cultural.
 Formas Geométricas
As formas geométricas são elementos essenciais no design, utilizadas
para comunicar ideias de maneira clara.

Circulos são usados principalmente

em logotipos, padrões, ícones, botões
ou fundos
Formas Geométricas
Quadrados fornecem estrutura e
estabilidade, sendo muito usados no design
de interfaces.

Aponta para movimento ou

progresso em logotipos e
ilustrações, Atenção a pontos
específicos: Direcionam o olhar para
áreas importantes no layout.
Formas Geométricas
Usado para criar padrões únicos ou
representar ideias complexas.

Remetem a formas orgânicas,

como conchas e galáxias,
trazendo equilíbrio visual.
Teoria das cores
Professor: Felipe Prada
 Escolha um tema para apresentação

● o que é/origem
● princípio físico
● princípio biológico
● princípio químico
● onde pode ser aplicada
● por que influenciam nosso cérebro
ATIVIDADE - desafio
Você e seu grupo foram convidados a propor um modelo de interface interativa para
uma das exposições do Museu Digital. O desafio inclui: Entender o público-alvo e
identificar seus objetivos e necessidades. Pesquisar o contexto histórico e os princípios
do design para garantir uma interface coerente com o conteúdo cultural. Criar protótipos
(storyboard, protótipo de papel e mock-up digital) baseados em técnicas de design
centrado no usuário. Utilizar formas geométricas e aplicar padrões de layout (F, Z,
alinhamento, espaçamento, repetição etc.) para organizar visualmente os elementos da
interface. Incorporar elementos de experiência do usuário (UX), como navegação
intuitiva e interações amigáveis. Respeitar os direitos autorais, usando conteúdos
licenciados, de domínio público ou Creative Commons, e compreender como registrar
obras próprias. Coletar feedbacks dos usuários, analisar cenários de uso, realizar
ajustes e apresentar uma solução de interface que resolva problemas de usabilidade e
comunicação com o usuário.
Resultados esperados
Compreendam e apliquem conceitos de UI e UX, incluindo layout, navegação,
prototipagem e design centrado no usuário. Desenvolvam a capacidade de
análise crítica e análise de cenários para propor soluções criativas e funcionais.
Reflitam sobre a evolução histórica do design, reconhecendo sua influência nas
práticas atuais. Apliquem formas geométricas e princípios visuais na organização
de elementos gráficos. Desenvolvam protótipos em diferentes estágios, do papel
ao digital. Identifiquem e respeitem os direitos autorais, compreendendo licenças
e registro de criações. Exercitem estratégias de coleta de informações e
resolução de conflitos durante o processo de criação.
ATIVIDADE - contextualização
Com a crescente valorização da cultura digital e da acessibilidade ao patrimônio
histórico por meios virtuais, uma instituição cultural da sua cidade está
desenvolvendo um Museu Digital Interativo. Esse museu tem como objetivo
apresentar exposições virtuais acessíveis a diferentes públicos, com foco em
usabilidade, design atrativo, e respeito aos direitos autorais das obras e dos
conteúdos criados.

A equipe técnica do museu convidou jovens designers e desenvolvedores para

colaborar com a concepção da interface digital do projeto e da experiência do
usuário, desde a definição da navegação até a criação dos protótipos.