Cores e Prototipagem em Design Gráfico

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Qual das seguintes opções é um resultado da mistura de cores complementares?

Uma cor vibrante

Uma cor pastel

Uma cor análoga

Uma cor neutra (correct)

Qual é a principal característica do esquema de cores monocromático?

Utiliza várias cores complementares

Utiliza diferentes tonalidades de uma única cor (correct)

Combina cores análogas

Inclui três cores em sua paleta

O que caracteriza um esquema de cores análogas?

Integra duas cores complementares

Inclui três cores em posições radiais opostas

Usa uma cor principal e duas cores adjacentes (correct)

Compreende apenas uma cor e suas variações

Qual estratégia pode aumentar o contraste de um design gráfico?

Clarear cores escuras Signup and view all the answers

Qual a principal dificuldade enfrentada por pessoas com daltonismo ao distinguir cores?

Dificuldade em distinguir cores próximas no espectro Signup and view all the answers

Qual é um dos principais objetivos da prototipagem?

Identificar potenciais problemas Signup and view all the answers

No contexto da prototipagem, o que significa 'abrangência'?

A fração de tarefas oferecidas pelo protótipo Signup and view all the answers

O que caracteriza a fidelidade de um protótipo?

A semelhança com o resultado final Signup and view all the answers

Uma das principais vantagens da prototipagem é:

Poupar tempo e custos Signup and view all the answers

O que deve ser feito se um problema encontrado durante a prototipagem for grave?

Recomeçar o protótipo do zero Signup and view all the answers

Qual é a importância do 'design paralelo' na prototipagem?

Permite a criação de soluções alternativas Signup and view all the answers

Qual das seguintes afirmações sobre a funcionalidade é correta?

Funcionalidade refere-se à implementação em código Signup and view all the answers

Qual é uma característica das protótipos que ajuda a reduzir recursos?

A redução de tarefas abrangidas e funcionalidades Signup and view all the answers

Qual é a recomendação para o uso de cores em designs?

Utilizar no máximo 8 cores, com um máximo de 4 cores distintas. Signup and view all the answers

Qual é a principal vantagem das serifas em textos?

Ajudam na leitura de 'texto corrido' em impressões. Signup and view all the answers

O que deve ser considerado ao escolher cores para um design?

Cores devem ser escolhidas com base no contexto. Signup and view all the answers

Qual é a recomendação para o espaçamento do texto?

Pelo menos 30% da altura do tipo. Signup and view all the answers

Como deve ser a linguagem utilizada em mensagens de erro?

Afirmativa e não crítica. Signup and view all the answers

Qual é a forma mais eficaz de redigir mensagens de erro?

Ser específico e claro quanto ao erro. Signup and view all the answers

Qual é o tamanho de texto recomendado para a maioria dos designs digitais?

12 pontos. Signup and view all the answers

Como deve ser a estrutura de um layout de tela eficaz?

Componentes organizados de forma lógica e consistente. Signup and view all the answers

Qual é a principal vantagem de usar protótipos em papel em vez de protótipos de código durante as fases iniciais do desenvolvimento?

Alterações são mais fáceis e rápidas de implementar. Signup and view all the answers

Qual fase do projeto utiliza ferramentas como Figma, Pencil e Balsamiq?

Protótipo Digital Signup and view all the answers

Como a utilização de uma aplicação de desenho impacta o trabalho do designer no início do desenvolvimento?

Aumenta a atenção a detalhes não relevantes. Signup and view all the answers

O que caracteriza o método Wizard-of-Oz na prototipagem?

Substituição da tecnologia por inteligência humana. Signup and view all the answers

Qual material não é necessário para a criação de protótipos em papel?

Código fonte Signup and view all the answers

Por que os usuários são menos propensos a focar em pequenos defeitos durante as fases iniciais do desenvolvimento com protótipos em papel?

A atenção se concentra na interface como um todo. Signup and view all the answers

Qual é um dos principais objetivos do uso de protótipos durante o desenvolvimento de sistemas?

Permitir ajustes e melhorias antes da implementação final. Signup and view all the answers

O que impede a utilização de um aplicativo de desenho para protótipos no início do desenvolvimento?

A distração com detalhes que não importam. Signup and view all the answers

Qual é a função dos storyboards no processo de design de interfaces de utilizador?

Mostrar as principais interações e transições entre ecrãs. Signup and view all the answers

Qual é a principal característica dos protótipos de papel?

São esboços de ecrãs que não possuem funcionalidade. Signup and view all the answers

O que significa a expressão 'baixa fidelidade' em relação aos protótipos de papel?

Indica que os protótipos não são realistas e funcionais. Signup and view all the answers

Qual é a diferença entre protótipos funcionais e protótipos de papel?

Protótipos funcionais incluem elementos interativos e apresentação de resultados. Signup and view all the answers

Por que razão é importante obter retorno dos utilizadores na fase inicial do design?

Para fazer alterações antes da construção de protótipos caros. Signup and view all the answers

O que caracteriza um protótipo horizontal?

É um protótipo que abrange muitas funcionalidades, mas possui pouca profundidade. Signup and view all the answers

Qual é um dos objetivos de utilizar os storyboards durante o design de interface?

Facilitar a visualização do fluxo de interação entre os ecrãs. Signup and view all the answers

Qual é a principal vantagem dos protótipos funcionais em comparação com os protótipos de papel?

Permitem organizar elementos na tela e testar interações reais. Signup and view all the answers

Qual é a principal vantagem dos protótipos de papel em relação a outros métodos?

Permitem testar múltiplas alternativas rapidamente Signup and view all the answers

O que deve ser considerado ao construir um protótipo de papel?

Garantir que é suficientemente grande para interação Signup and view all the answers

Qual é uma das responsabilidades do coordenador na avaliação do protótipo de papel?

Interagir com o usuário e dar instruções Signup and view all the answers

Como se deve utilizar os acetatos no protótipo de papel?

Para realçar seleções e permitir anotações Signup and view all the answers

O que deve ser evitado ao desenhar o protótipo de papel?

Incluir animações complexas Signup and view all the answers

Qual é um dos objetivos da avaliação de protótipos de papel?

Avaliar se as funcionalidades atendem às expectativas dos usuários Signup and view all the answers

Qual é uma característica dos protótipos de papel em comparação com protótipos digitais?

Não requerem investimento em tecnologia cara Signup and view all the answers

Qual dos seguintes aspectos não é relevante durante a criação de um protótipo de papel?

O número de cores empregadas Signup and view all the answers

Como os protótipos de papel podem ajudar na detecção de problemas?

Testando a usabilidade e clareza do fluxo de tarefas Signup and view all the answers

Qual é uma consideração importante ao fazer os testes com o protótipo de papel?

Fazer o protótipo funcionar várias vezes antes da sessão Signup and view all the answers

Study Notes

Interação Pessoa-Máquina (IPM) - Aula Teórica 10

Foco: Desenho de Ecrãs II e Prototipagem
Apresentação baseada em slides do Manuel J. Fonseca e conteúdos do livro Introdução ao Design de Interfaces
Apresentada por João L. M. Pereira ([email protected])

Aula de Hoje

Desenho de Ecrãs II
- Cor
- Tipografia
- Escrita de Mensagens
Prototipagem
- O que são protótipos?
- Características
- Tipos de Protótipos
- Protótipos de Papel

Uso da Cor

Diversos usos da cor: estético, imagem de marca e transmitir informações
Cor pode atrair o olhar, indicar estado e ter significado cultural

Cor - Estético

A cor tem um papel estético importante na experiência do utilizador, influenciando a percepção e a estética geral do design.

Cor - Imagem de Marca

A cor pode ser usada para construir e reforçar a identidade de uma marca, tornando-a reconhecível e memorável.
Exemplos: Coca-Cola (vermelho), Facebook (azul), Mcdonalds (amarelo)

Cor - Transmitir Informação

A cor pode ser usada para comunicar informações, como densidade populacional em mapas.
Há padrões culturais comuns para determinados significados de cores em diferentes contextos.
Exemplo: mapa de densidade populacional usando diferentes cores para diferentes níveis de densidade populacional

Cor - Atrair o Olhar

Cores vibrantes e contrastantes podem ser usadas para atrair a atenção para elementos específicos.
Uso de vermelho em transportes públicos como ônibus para destacar o carro.

Cor - Indicar Estado

A cor pode ser usada para indicar o estado de um dispositivo ou sistema, como no caso de um pendrive com LEDs para indicar o nível da bateria e o seu estado de carregamento.
A cor do LED indica se a bateria está baixa ou está a carregar.

Significado - Cultura Ocidental

Há padrões culturais associados a certas cores, como por exemplo o vermelho para parar e o verde para avançar.
Exemplos: significado cultural de cores (parar=vermelho, avançar=verde, frio=azul, quente=vermelho, perigo=vermelho...)

Modelo RGB da Cor

Modelo RGB; usado em computadores; três componentes (Vermelho, Azul, Verde)
HSV
Hue: cor básica
Saturation: intensidade da cor
Value: brilho da cor

Roda das Cores

Cores complementares: radialmente opostas (mistura resulta em cor neutra); cores adjacentes: juntas na roda

Esquema de Cores - Monocromático

Escolher uma única cor
O esquema contém vários tons

Esquema de Cores - Complementares

Escolher duas cores complementares, aumentando o contraste (exemplo: uma cor para o fundo e outra para o texto)

Esquema de Cores - Outras Opções

Análogos (uma cor principal + 2 cores adjacentes)
Triádicos e tetrádicos (três/quatro cores uniformemente espaçadas na roda de cores)

Contraste - Escuro/Claro

Aumentar contraste; escurecer cores escuras e clarear cores claras

Contraste - Cores Complementares

Usar cores complementares (exemplo: amarelo e Azul) e evitar cores adjacentes

Contraste - Daltonismo

Problemas de visão (exemplo: daltonismo, miopia) e dificuldade de distinguir cores próximas
Também dificuldade de distinguir verde e vermelho (cones)

Cor tem Problemas

Cores em ecrãs variam muito entre dispositivos; mecanismos analógicos(temperatura de cor) afetam as cores

Primeiro Passo: sem cor!

Desenhar o ecrã sem cores inicialmente para otimizar o design

Utilizar a cor de acordo com convenções

Usar a cor de acordo com as convenções para a comunicação, como, por exemplo, no semáforo para criar diferentes significados de cores (parar = vermelho, avançar = verde)

Esquema de Cores

Usar cor de forma consistente e com significado
Exemplo: barra com diferentes tons de cor, sendo um deles mais destacado

Limitar o número de cores

Limitar as cores utilizadas a um total de oito, ou menos
Uso de cores extra em casos específicos

Cores em Contexto

A cor de um objeto é influenciada pelo fundo
Escolher as cores em contexto

Tipografia

Tipos de Letras

Várias famílias de fontes de letra (Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman)

Dentro de um mesmo tipo...

Exemplos dos diferentes tipos e como se relacionam (exemplos de família da letra Myriad Pro com diferentes variações como Bold, Light e semibold)

Duas grandes famílias

Sans Serif e Serif (tipos de fontes de letras)

Legibilidade - Serifas

Serifas ajudam a ler texto "corrido"
mas ecrãs não têm resolução para detalhes tão pequenos

Serifas - Recomendação

Ecrãs (72dpi): sem serifas
Impressões/Papel (300dpi): com serifas

Tamanho de Texto

Tamanho recomendado para o texto: aproximadamente 12 pontos

Espaçamento do texto

Espaçamento mínimo de 30% da altura do tipo para o texto

Escrita de Mensagens

Processamento de texto resultou em 23 páginas impressas

Usar a Linguagem do Utilizador

Exemplos de mensagens de erro sobre entrada de dados incorretos ou fora de um determinado intervalo.

Mensagens Afirmativas

Mensagens informando o utilizador sobre guardar o ficheiro antes de sair do programa

Construtivas e Não Críticas

Exemplos de mensagens sobre erros em nomes de ficheiros; erros de sintaxe na escrita.

Específicas

Exemplo de Erro sintáctico no processamento de texto, com parêntesis incompletos no código

Utilizador tem o Controlo

Introduzir comando
Pronto para receber comando

Indicadoras de Ação

Trem de aterragem está recolhido
Para aterrar, deve abrir o trem de aterragem.

Voz Activa

Documento foi recebido pelo João
O João recebeu o documento

Erros Típicos - Desenho de Ecrãs

Posição arbitrária de componentes
Dimensões arbitrárias dos componentes
Layouts arbitrários das janelas
Incoerência nos vários ecrãs
Elementos demasiado pequenos (ex: touch)
Resolução do ecrã

Prototipagem

Prototipagem no Ciclo Iterativo

Analisar necessidades
Conceber soluções
Prototipar soluções
Avaliar protótipos

O que são Protótipos?

Representação concreta, mas parcial, do sistema
Permitir aos utilizadores interagirem
Rapidez para identificar o que não querem

Objetivos da Prototipagem

Obter retorno o mais depressa possível
Estudar designs alternativos
Apresentar ideias/inovações novas
Identificar potenciais problemas

Vantagens da Prototipagem

Poupa tempo e custos para testar designs rapidamente
Testar várias alternativas de forma rápida e fácil
Ser fácil e rápido alterar problemas
Ser centralizado no utilizador

Máximo Local / Máximo Absoluto

Não ficar preso a uma única abordagem
Bom design para uma má solução
Experimentem alternativas.

Design Paralelo

Várias pessoas criam soluções alternativas
Mesmo requisitos
Partilham conceitos
Analisam e escolhem as melhores ideias
Integram numa única solução

Características dos Protótipos

Duas dimensões:
- Profundidade (funcionalidades/tarefas)
- Abrangência (aspecto/implementação)
- Fidelidade
- Funcionalidade

Abrangência e Profundidade

Abrangência - fração de tarefas oferecidas pelo protótipo
Profundidade - quantidade de funcionalidades de cada tarefas
Permitir poupar recursos
Escolha dependente de riscos a minimizar
Protótipos abrangentes são mais comuns
Maiors profundidade para tarefas específicas

Fidelidade e Funcionalidade

Fidelidade - aspeto visual do protótipo
Funcionalidade - implementação em código

Fidelidade

Traduz a semelhança com o resultado final (tipos de letra, mensagens, cores, imagens)
Baixa Fidelidade vs Alta Fidelidade

Protótipo Baixa Fidelidade (PBF)

Representações artísticas
Usando esboços, omitindo detalhes como cores, imagens e ícones

Protótipo Alta Fidelidade (PAF)

Apresentam um aspeto bastante semelhante ao do produto final

PBF e PAF

Tabela compartiva de protótipos PBF e PAF mostrando os fatores positivos e as aplicações, custos para alterar o Look&Feel e a sequência dos protótipos

Funcionalidade

Funcionais (implementados em código, executáveis num sistema computacional)
Não funcionais (necessitando intervenção humana para funcionamento)