Desenho e Composição de Interfaces

Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT
ETAPAS NA PRODUÇÃO: DESENHO E COMPOSIÇÃO

Etapas na Produção: Planeamento, Concepção e
Implementação.
!
Fase 3 - Desenho e Composição de Interfaces (Look & Feel):

• Anatomia de um designer;

• Hierarquia Visual: grelha;

• Princípios de Design Gráfico: Posicionamento, Espaço em
Branco, Proximidade/Agrupamento, Alinhamento, Repetição
e Contraste;

• Layout: gráficos, tipografia, formas e cores;

• Desenho de interfaces, modelos teóricos e princípios para o
design em sistemas Web;

• Desenho de Navegação para Web;

• Mockup.
AGENDA

Anatomia de um designer
ETAPAS NA PRODUÇÃO
• Identificar e resolver problemas de design.

!
• Descrever e apresentar um determinado design / justificar os
motivos pelos quais o design é bom.

!
• Compreender as pessoas para as quais se está a desenhar
um produto.

!
• Capacidade de visualização, comunicação, improviso,
empatia, gosto pelo design.

!
• Saiba evoluir desde o desenho conceptual até ao desenho
final, detalhado, e capaz de comunicar de forma eficaz um
ou várias ideias do desenho.

Anatomia de um designer
AS BOAS SOLUÇÕES DE DESIGN NÃO DEVEM SER GUIADAS POR
✓ Restrições ou conveniências tecnológicas;

✓ Caprichos do cliente / utilizador.
AS BOAS SOLUÇÕES DE DESIGN SÃO
✓ Soluções simples;

✓ Elegantes;

✓ Conduzem a uma agradável experiência de utilização.

Desenho e Composição
1 2 3
ORGANIZAÇÃO!
DA ESTRUTURA DA
INFORMAÇÃO
FORMAS DE PERCORRER
ESSA ESTRUTURA
ATRAVÉS DA NAVEGAÇÃO
CONCEPÇÃO DA
LINGUAGEM VISUAL
(LAYOUT)
• Estabelecer as funcionalidades.
• Estabelecer a disposição / organização dos conteúdos.
• Determinar a forma.
• Design Gráﬁco.
• Estabelecer as hierarquias visuais.

A principal função do design gráfico é criar uma hierarquia
visual forte e coerente, na qual os elementos importantes,
sejam enfatizados e o conteúdo esteja organizado de uma
maneira lógica e previsível.

!
Uma hierarquia visual é uma gestão visual das informações,
usando as ferramentas de layout da página, da tipografia, de
ilustrações/infografias/imagens para orientar a atenção dos
utilizadores ao longo do ecrã.
Hierarquia Visual

De que forma é que os utilizadores vêem os ecrãs?
!
1. Vêem os ecrãs como uma grande massa de formatos e
cores, com os elementos do primeiro plano, em contraste
com a área de fundo. O padrão visual é percebido.

!
2. Os utilizadores começam a identificar informações
específicas, primeiro dos gráficos, se estes estiverem
presentes. O padrão é descodificado recorrendo à
representação interna da linguagem.

!
3. Só depois é que começam a analisar gramaticalmente o
texto e a ler as palavras e frases que o compõem.
Interpretação a partir da sintaxe, semântica e prática.
Hierarquia Visual

INÍCIO DA LEITURA DOS
TÍTULOS
EXPLORAÇÃO VISUAL
PRELIMINAR
EXPLORAÇÃO MAIS ATENTA

A rápida raposa
castanha salta por cima do
do cão preguiçoso.

A rápida raposa
castanha salta por cima do
do cão preguiçoso.
Exemplo de ilusão óptica que explica certas limitações do nosso sistema visual.
Um exemplo de compensação executado pelo nosso sistema visual.

Permite dar especial atenção à questão do equilíbrio e do
relacionamento entre aplicações ou áreas (Exemplo: área de
menu, área de conteúdo texto, etc.).
Hierarquia Visual: Grelha
No contexto do design
gráfico, a grelha é um
instrumento para
ordenar os elementos
gráficos de texto e
imagens.

Todos os ecrãs, principalmente os de entrada, devem ter uma
área mais forte onde o utilizador, assim que entra no ecrã,
percebe por onde é que deve começar a navegar. E de
seguida prossiga a sua exploração visual e identiﬁque de
imediato as outras opções disponíveis.

!
De outra forma, os ecrãs podem passar a ideia de confusão e
desorganização, principalmente quando estamos a falar de
projectos de grandes dimensões onde existe um grande
volume de informação.
Hierarquia Visual: Grelha

http://www.escs.ipl.pt/
GRELHA COM 12 COLUNAS:
LARGURA COLUNAS: 60px
LARGURA SUB-COLUNAS: 20px
Nº DE COLUNAS: 12
LARGURA GLUTTER: 10px
-
LARGURA TOTAL CONTEÚDO: 830px
LARGURA TOTAL: 840px
BROWSER/MONITOR:
955 X 600px (1024 x 768 px)

Princípios de Design Gráfico
Princípios que norteiam um bom desenho.

!
Derivam em grande medida de factores psicológicos e
fazem com que, quase universalmente, uma determinada
composição de elementos gráficos seja considerada estética
ou não.

!
Existem convenções culturais e até mesmo modas a ditar o
que é bom desenho ou não.

A um nível mais abstracto, independentemente dos tipos de
letra em voga ou das cores da estação, encontram-se sempre
um conjunto de princípios subjacentes que, se violados
descuidadamente, podem comprometer o aspecto gráfico de
uma página ou ecrã.

Princípios de Design Gráﬁco: Posicionamento
A proximidade ajuda a estabelecer relações entre os objectos
na página e que estes devem estar alinhados entre si.

!
!
!
Quais as posições mais indicadas para os colocar e com
que tamanhos?
!
Existem duas regras que costumam usar-se para melhor
distribuir o espaço:

!
• Proporção Áurea (mais genérica).

• Regra dos Terços (aplica-se mais a imagens).

Proporção Áurea (Golden Ratio)
!
• Pode ser encontrada no deisgn, arte e arquitectura, na
Natureza, das conchas de moluscos a sementes de flores, e
até na figura humana, como exemplificado pelo conhecido
Homem de Vitrúvio de Leonardo da Vinci.

!
• Entendida como harmoniosa e apelativa.

!
• A razão entre duas partes de um todo deve ser de 1,618 (a
parte maior deve ser 1,618 vezes maior que a mais
pequena). Assim as divisões do ecrã podem seguir esta
proporção, bem como os tamanhos dos elementos.

Esta proporção pode ser usada para construir uma espiral por subdivisões sucessivas
do espaço que poderão ser uma base para o layout de um ecrã ou página.

Regra dos Terços
!
• Diz-nos que devemos dividir o espaço de desenho em três,
quer horizontal quer verticalmente (para um total de nove
subdivisões) e os elementos importantes da composição
devem ser colocados nessas linhas divisórias ou nas suas
intersecções.

!
• Acredita-se que este posicionamento confere mais
dinamismo e interesse ao resultado ﬁnal.

A leitura no Ocidente é sempre feita da esquerda para a
direita e de cima para baixo. Por esta razão a parte mais
importante de um ecrã é a sua parte superior (cabeçalho).

!
Sendo a parte mais importante é aqui que deve aparecer o
logotipo, o menu e a identiﬁcação das páginas.
Exemplo de um cabeçalho de uma página (theguardian.com/uk)

Princípios de Design Gráﬁco: Espaço em Branco
• O espaço em branco - a ausência de elementos - também
deve ser usado conscientemente.

!
• Nem todo o espaço livre no ecrã tem necessariamente de
ser preenchido.

!
• Pode ser usado em alternativa a cercaduras e outras
decorações para mostrar como os vários elementos estão
relacionados.

!
• Funciona como um princípio complementar ao da
proximidade: para que se distingam vários grupos de
elementos próximos entre si, é necessário que exista
espaço a separá-los.

Princípios de Design Gráﬁco
Princípios Básicos:
(Williams, 2005)
!
✓ Proximidade (ou Agrupamento)

✓ Alinhamento

✓ Repetição

✓ Contraste

Título
Elemento 1
Imagem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
sodales, mauris ut tincidunt bibendum, sem metus malesuada
est, vitae hendrerit libero tortor ac tortor. Etiam in rutrum ante.
Quisque ac turpis lacus. Aliquam eget libero a nibh malesuada
mollis. Pellentesque sit amet augue lacus, vitae accumsan
odio. Aliquam sodales, sem at faucibus feugiat, nunc est auctor
neque, a sagittis eros lacus eu quam. Lorem ipsum dolor sit
amet, consectetur adipiscing elit.
Curabitur ultrices eros ut nisi vestibulum eget blandit metus
dignissim. Etiam vulputate, felis eu ornare congue, dui nibh
rutrum libero, sit amet auctor sem neque nec neque. Donec
porttitor mollis elit vitae posuere. Aliquam convallis ultrices
malesuada. Curabitur in augue vel sapien posuere congue
posuere sed justo. Praesent sollicitudin, eros ut lobortis
pulvinar, felis libero faucibus felis, in vehicula tellus magna a
neque. Nulla adipiscing tortor a leo mattis adipiscing.
Elemento 2
Elemento 5
Elemento 4
Elemento 5
Exemplo de interface que não aplica nenhum dos princípios do design gráﬁco.

Princípios de Design Gráﬁco:
Proximidade ou Agrupamento
• Os elementos que apresentem alguma relação entre si
devem estar logicamente ligados / aparecer juntos.

!
• Este agrupamento cria uma hierarquia dos elementos e dos
grupos, que sugere uma leitura facilitando o acesso à
informação.

!
• Reforça a sensação de unidade do desenho, diminuindo a
sua fragmentação.

!
• Numa interface em que os elementos estão dispostos de
forma a contrariar o princípio da proximidade, a legibilidade
é menor e atrapalha a execução das tarefas do utilizador.

Princípios de Design Gráﬁco:
Proximidade ou Agrupamento
• O inverso deve também ser respeitado: se dois
elementos não estão relacionados, não devem aparecer
próximos. Isto cria associações indesejadas e pode induzir
o utilizador em erro.

A aplicação do princípio da Proximidade.
Título
Elemento 1
Imagem
Elemento 2
Elemento 5
Elemento 4
Elemento 5

Princípios de Design Gráﬁco: Alinhamento
• Todos os elementos de um interface devem ter uma ligação
visual com um outro elemento.

!
• O alinhamento permite criar uma interface mais coesa,
agrupando os elementos que estão relacionados.

!
• Ao alinhar os vários elementos, criam-se linhas implícitas
que o utilizador segue com o olhar, facilitando a leitura e
a compreensão.
Uma forma de garantir
que os vários elementos
no ecrã estão alinhados é
começar por definir uma
grelha ou linhas-guia
(usadas durante o
desenho de ecrã, e
invisíveis no final deste).

A aplicação do princípio de Alinhamento.
TítuloImagem

Princípios de Design Gráfico: Repetição
• Determina que uma das características do projecto gráfico
deve repetir-se ao longo de todo o trabalho, com o
propósito de apresentar unidade, organizar informações e
fazer com que a interface fique mais atraente ao utilizador.

!
• Sempre que possível e relevante, repetir elementos ou
propriedade gráficas ao longo da interface. Isto inclui
espaçamentos, tipos de letra, espessura de linhas, cores,
etc.

!
• A repetição permite que o layout fique com consistência. A
falta desta repetição pode criar alguma desorientação ao
utilizador, na medida em que a interface não apresenta
sempre as mesmas características.

A repetição foi aplicada nesta interface, através das cores e das dimensões dos elementos,
desta forma este projecto ﬁcou mais coerente e intuitivo para o utilizador. Ao agrupar estes
elemento cria-se uma identidade que os faz pertencer a uma mesma classes de elementos
desta interface.
Título
Imagem

Princípios do Design Gráﬁco: Contraste
• Diferencia os elementos de um layout.

!
• Quando uma interface apresenta uma relação contrastante,
onde os elementos apresentam grandes diferenças entre si,
a atenção de quem a utiliza é muito maior, facilitando a
execução das tarefas do utilizador.

!
• As variações podem acontecer no peso, tamanho, forma,
estilo e cor.

!
• Diminui a monotonia do desenho.

!
• Trabalhar o espaço em branco também permite gerir melhor
os princípios de proximidade e de contraste de forma a
equilibra o layout e de transmitir uma ideia de unidade.
Se algo vai ser diferente,
que o seja muito,
notoriamente.
!
Caso contrário, passará a
sensação de que a
pequena diferença pode
dever-se a um qualquer
descuido por parte do
criador da interface
(mesmo que seja
intencional),
enfraquecendo o desenho.

A interface depois de aplicado o princípio de Contraste.
Título
Imagem
sodales, mauris ut tincidunt bibendum, sem metus male-
suada est, vitae hendrerit libero tortor ac tortor. Etiam in
rutrum ante. Quisque ac turpis lacus. Aliquam eget libero a
nibh malesuada mollis. Pellentesque sit amet augue lacus,
vitae accumsan odio. Aliquam sodales, sem at faucibus
feugiat, nunc est auctor neque, a sagittis eros lacus eu
quam. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
Curabitur ultrices eros ut nisi vestibulum eget blandit
metus dignissim. Etiam vulputate, felis eu ornare congue,
dui nibh rutrum libero, sit amet auctor sem neque nec
neque. Donec porttitor mollis elit vitae posuere. Aliquam
convallis ultrices malesuada. Curabitur in augue vel sapien
posuere congue posuere sed justo.

Princípios de Design Gráfico: Resumo
QUANDO APLICADO ADEQUADAMENTE QUANDO APLICADO INADEQUADAMENTE
PROXIMIDADE - Hierarquiza os elementos;!
- Facilita o acesso à informação.
- Dificulta a legibilidade;!
- Atrapalha a execução das actividades do
utilizador.
ALINHAMENTO
- Interface mais coesa;!
- Possibilita ao utilizador agrupar, mentalmente,
os elementos que estão relacionados.
Sensação de desleixo no layout.
REPETIÇÃO
- Layout coeso e com unidade;!
- As informações ficam organizadas;!
- A interface fica visualmente mais atraente para o
utilizador.
- A falta de repetição desorienta o leitor, pois o
layout não apresenta unidade.!
- A repetição em excesso pode tornar a interface
monótona para o utilizador.
CONTRASTE
Relação contrastante: apresenta atractivos
visuais ao utilizador, facilitando a utilização da
interface.
- Relação conflitante: desconforto visual para o
utilizador.!
- Relação concordante: sem atractivos visuais.

Layout
GRÁFICOS
TIPOGRAFIA
TEXTOS
FORMAS
ÍCONES
CORES
CONSISTÊNCIA
EQUILÍBRIO
!
VIBRANTE
TENSÃO
Onde todos os diferentes
aspectos relacionados com
o design gráfico se
reúnem.

Layout
Disposição dos diversos
elementos segundo uma
estrutura consistente que realce
as diversas hierarquias das
composições presentes.
NAVEGAÇÃO
PRINCIPAL
TÍTULO DA
PÁGINA
BLOCOS DE
TEXTO
LOGOTIPO
NAVEGAÇÃO
SECUNDÁRIA
DESTAQUES
LIGAÇÕES
RELEVANTES
TÍTULO DO SITE
NOME DO AUTOR + DATA
Atenção ao nível de
importância dos elementos!
O layout identiﬁca todos os
elementos e ﬁxa a sua respectiva
posição na página.

Layout: Gráﬁcos
• Ficheiros externos à página. A página apenas contém a
referência da sua localização e propriedades.

!
• Têm sempre uma base rectangular e não podem assumir
mais nenhuma forma além desta. Para usar outras formas
utiliza-se formatos de ﬁcheiros que permitam canal alfa ou
novos formatos de imagem como o SVG - Scalable Vector
Graphic.

!
• Ajudam a dar vida a um layout.

!
• Atenção ao peso das imagens!

Layout: Tipografia
• A tipografia também pode ser usada como ferramenta para
hierarquizar os conteúdos.

• Garante a legibilidade de um layout.

• Influencia a velocidade de leitura do utilizador.

• Diferentes fontes, pesos e tamanhos ajudam a estruturar o
documento:

!
✓ Separar Secções;

✓ Indicar o grau de importância de cada bloco de informação;

✓ Organizar a página.

Tamanhos
Peso
(weight)
Estilo
(style)
H1, H2, H3 ...
Se usarmos esta relação de valores, para os
tamanhos de fonte dos vários elementos,
criamos uma relação entre as fontes
(harmonia).
Roman, Italic, Bold, Bold Italic, Small Caps, etc.
Varia em cada família de fontes.
Serifado, Sem serifa, Moderno, Manuscrito,
Decorativo, etc.

Layout: Tipograﬁa
São tipos mais formais
e associados à
organização e a
websites institucionais.
Menos formais, mais amigáveis.
A melhor opção para utilizarmos
em trabalhos digitais pois facilitam
a leitura no ecrã.

Layout: Formas
Ligação
Comunidade
Unidade
Força
Movimento
Segurança
Feminino
Calor
Conforto
Sensualidade
Amor
Ordem
Lógica
Reserva
Segurança
Sugere massa
Volume
Solidez
Energia
Poder
Equilíbrio
Lei
Ciência
Religião
Força
Agressão
Movimento
Dinâmico

Layout: Cores
A cor afecta-nos de inúmeras maneiras - mentalmente,
emocionalmente, conscientemente e
subconscientemente.

!
A cor pode também transmitir informação, destacar
informação (princípio do contraste, tendo por base a cor),
indicar um estado.

Layout: Cores
Roda das Cores: uma amostra de todas as cores do
espectro visível, dispostas em círculo (vários tons de cada
cor, do mais claro ao mais escuro).

!
Criação de combinações de cores através da sua relação.
Esta relação é criada através da posição das cores nesta
roda.

Layout: Cores
• Presentes em imagens, tabelas, linhas ou textos, são um
dos elementos essenciais para o sucesso de um layout.

!
• Cada cor também tem o seu significado e é preciso ter
atenção porque muitas vezes o seu significado varia de
cultura para cultura.

!
• Dá variedade e personalidade a um projecto gráfico.

!
• Têm associações simbólicas.

!
• Certas combinações criam reacções.

Primárias Secundárias Terciárias

Tríades
Soluções mais soﬁsticadas em que são
escolhidas três ou quatro cores
(respectivmente) equidistantes na roda.

!
(a sua força é relativamente igual)

Layout: Cores
Para um projecto HARMONIOSO utilizam-se cores que estão
próximas no círculo das cores como os azuis e verdes.

!
Para TENSÃO e VIBRAÇÃO usam-se cores contrastantes,
opostas no círculo de cores como o vermelho e verde.

O círculo de cores pode se dividido em duas zonas: cores quentes e cores frias.

!
Desenhar um website com uma excessiva combinação de cores quentes e cores frias pode
confundir o utilizador e no limite pode fazer com este seja entendido como pouco ﬁável e
desarrumado/cheio.
CORES QUENTES
!
Paixão

Felicidade

Entusiasmo

EnergiaCORES FRIAS
!
Calma

Proﬁssionalismo

Segurança

• Poder

• Energia

• Estimulante

• Dinamismo

• Calor

• Paixão

• Amor

• Agressão

• Perigo

• Vitalidade

• Alegria

• Rebeldia

• Alerta

• Ordens
VERMELHO

• Energia

• Equilíbrio

• Amigável

• Calor

• Conforto

• Abundância

• Advertência

• Actividade

• Sabor

• Festividade

• Entusiasmo
LARANJA

• Optimismo

• Luminoso

• Felicidade

• Esperança

• Filosoﬁa

• Desonestidade

• Cobardia

• Traição

• A cor do sol

• Criatividade

• Juventude

• Doença

• Brilho

• Alegria

• Leveza
AMARELO

• Calma

• Paciência

• Naturalidade

• Sorte

• Equilíbrio

• Seguro

• Partilha

• Rejuvenescimento

• Estabilidade

• Harmonia
VERDE

• Conﬁança

• Conservadorismo

• Segurança

• Espiritualidade

• Tecnologia

• Inovação

• Profundidade

• Liberdade

• Protecção

• Limpeza

• Ordem

• A cor do oceano e do céu

• Formalidade
AZUL

BRANCO
• Pureza

• Limpeza

• Precisão

• Neutralidade

• Inocência

• Esterilidade

• Morte

• A cor da bata dos médicos

• Terra

• Conﬁança

• Estabilidade

• Elegância

• Conforto

• Durabilidade

• A cor da terra

• Associado a coisas orgânicas e naturais
CASTANHO

• Jovem

• Diversão

• Energia

• Romance

• Felicidade

• Infância
ROSA

• Inteligência

• Luxo

• Vaidade

• Fantasia

• Melancolia

• Isolamento

• Arte

• Realeza

• Feminilidade
ROXO

• Intelecto

• Sabedoria

• Conhecimento

• Futurismo

• Modéstia

• Neutro

• Calma

• Tristeza

• Decadência

• Autoritária

• Compromisso (talvez porque se situa entre os extremos preto e branco)
CINZENTO

• Poder

• Sexualidade

• Soﬁsticação

• Morte

• Mistério

• Medo

• Tristeza

• Elegância

• A ausência de cor

• O vazio
PRETO

Design de Interfaces
A Evolução
!
• Linhas de Comando;

• Interfaces Gráﬁcas;

• Baseadas no paradigma do ambiente de trabalho;

• Actualmente: paradigmas de interacção móvel / baseados
em gestos, multitoque, etc.

• Desktop

• Web

• Mobile / Tablet

• Televisão

Depois de definir claramente a estrutura do projecto e o
seu esquema de navegação:
!
• Definição dos layouts gráficos (templates) dos ecrã do
projecto e os conteúdos que serão apresentados em cada
unidade de informação.

!
• Definição da interface de utilizador.

!
Interface de Utilizador:
Combinação dos conteúdos + Elementos interactivos.
!
Os utilizadores necessitam de se relacionar com as coisas de
forma emocional e a interface é o elemento que permite
essa relação.
Interface:
!
- Layout e grelha;
- Tipografia;
- Cor;
- Textura;
- Ritmo;
- Elementos e metáforas
visuais;
- Imagens;
- Interacção;
- Referências Culturais.

Numa experiência interactiva a interface:

!
• Informa;

• Ajuda na realização de tarefas;

• Entretém;

• Cria desejo.

!
Um bom desenho de ecrãs cumpre dois propósitos:

!
• Estética (apelativa, chama a atenção);

• Funcionalidade (aceitação e sucesso).

Todos os elementos gráficos colocados num ecrã
devem ter um propósito e um significado bem
definidos.
!
Deve ser clara qual a sua função no contexto das
tarefas, e o seu conteúdo inequívoco.

Design de Interfaces: Modelos Teóricos
User Interface (Human-Computer Interface)

!
O ponto de coacto entre o utilizador e o produto digital.
USER INTERFACE = UI!
✓ Mecanismos de input - O utilizador diz ao computador quais as
suas necessidades.

✓ Mecanismos de output - O computador dá respostas ao
utilizador.

BOAS PRÁTICAS
Minimum Design
✓ Regra dos 80/20 (desenhar para as principais funcionalidades).

✓ Cores e Layout com grande cuidado estético.

✓ Proporção equilibrada entre o aspecto dos elementos da interface
e os dados apresentados.

!
Simplicidade
✓ Manter o design simples e evidente.

✓ Foco na tarefa principal e evitar a distracção.

✓ Manter a funcionalidade e a simplicidade.

BOAS PRÁTICAS
Acessibilidade
✓ Fácil de usar e aceder na maior parte dos dispositivos.

✓ Fácil de usar por toda a gente.

!
Consistência
✓ Usar os mesmos layouts e terminologias ao longo de todo a
aplicação.

✓ Interacção e navegação familiar ao utilizador.

✓ Manter a UI consistente dentro do contexto de cada ecrã/tarefa.

!
Feedbck
✓ Providenciar feedback imediato.

✓ Informar o utilizador sobre o estado actual das acções feitas.

BOAS PRÁTICAS
Forgiveness
✓ Prevenir os erros e permitir desfazer uma acção executada.

✓ Limitar as possibilidades de erro desactivando comandos.

!
Orientação do Utilizador
✓ Dar ao utilizador o controlo total.

✓ Permitir a customização e a personalização.

Graphical User Interface (GUI)

!
• A evolução do modelo de interfaces WIMP (windows, icons,
menus and pointers) que inclui elementos da interface de
utilizador reutilizáveis e com suporte para dispositivos
móveis (telemóveis, tablet, leitores de música, etc.) e que
não necessitam obrigatoriamente o uso de dispositivos
apontadores.

!
• Interacção a partir imagens gráﬁcas, ícones, elementos 2D/
3D apresentados no ecrã.

Graphical User Interface (GUI)
BOAS PRÁTICAS
✓ Usar metáforas e associar nomes usados no mundo real às
tarefas, comandos, etc. (“Pasta”, “Janela”, “Desktop”, etc.).

✓ Garantir que o utilizador consegue antecipar o comportamento de
um elemento da UI a partir das propriedades visuais.

✓ Transmitir alertas, avisos, erros, etc. numa linguagem
compreensível e com pistas visuais e ícones.

✓ Desenhar elementos de UI reutilizáveis (controlos básicos como
os botões, caixas de input de dados, caixas de mensagens, etc.).

✓ Garantir que a interface fornece o feedback necessário às acções
do utilizador e que o mantém actualizado do seu estado de uma
forma amigável, previsível e familiar.

Desenho de Navegação
Navegação: a acção de activar ligações que existem no ecrã
para interagir com a informação apresentada e/ou entre ecrãs
distintos.

Desenho de Navegação: Mapa de Navegação
• Fornece um índice gráﬁco dos possíveis ﬂuxos de
navegação do sistema interactivo.

!
• Desenho dos percursos que o utilizador pode percorrer.

!
• Desenvolve as hiperligações entre as unidade do conteúdo
presentes no sistema interactivo.

!
• Ilustra o que acontece quando o utilizador interage com o
sistema interactivo.

Exemplo de uma página com o mapa do site (chefonline.continente.pt)

Exemplo de uma página com o mapa do site (vodafone.pt)

• Fácil de aprender;

• Consistente;

• Providenciar feedback (acção-reacção);

• Marcar presença de diferentes formas conforme o contexto;

• Oferecer alternativas;

• Economizar acções e tempos de utilização;

• Apresentar mensagens visuais claras e no momento
adequado;

• Possuir nomenclaturas compreensíveis;

• Estar em sintonia com o objectivo/propósito do projecto;

• Dar suporte aos objectivos, necessidades e comportamentos
do utilizador.
Princípios básicos para sistemas de navegação de qualidade:

• Onde estou?

• Onde estive?

• Para onde posso ir?
Um bom sistema de navegação deve responder a 3
perguntas básicas de forma rápida:

Existem formas variadas de projectar o modo como os
utilizadores interagem com o sistema. Técnicas principais:

!
• Hiperligações simples;

• Botões;

• Menus (verticais, horizontais, desdobráveis, drop down,
separadores/tabs, caminho de migalhas, passo-a-passo);

• Comandos;

• Abrir/Fechar (botões que revelam informação secundária
quando são activados, em forma de janelas que aparecem/
emergem, ou textos pequenos, por exemplo);

• Ícones;

• Rollover (revela, a informação secundária quando o
utilizador posiciona o cursor sobre o botão);

• Zoom;

• Deslocamento (scroll).

Mockup
• Um protótipo/visualização à escala de uma peça de design.

• Usado para demonstrar, apresentar, vender uma ideia ou
solução.

URL: https://www.behance.net/gallery/Bepetly-Flat-Experience/11344849

URL: https://www.behance.net/gallery/Yellow-Bus-Oﬃcial-Sightseeing-Tours/13385203

• Dabner, D.; Calvert, S. & Casey, A. (2010) Graphic design school : the principles and
pratice of graphic design, New Jersey: Wiley.

• Duckett, J. (2011) HTML & CSS - Design and Build Websites. Wiley.

• Fonseca, M., Campos, P. & Gonçalves, D. (2012) Introdução ao Design de Interfaces;
Lisboa: FCA.

• Lal, R. (2013) Digital Design Essentials. 100 Ways to Design Better Desktop, Web, and
Mobile Interfaces. Rockport Publishers.

• Lidwell, W.; Holden, K. & Elam, K. (2003) Universal Principles of Design, Rockport.

• Preece, J.; Rogers, Y. & Sharp, H. (2002) Design de Interacção, Bookman.

• Vinh, K. (2011) Ordering disorder : grid principles for web design. New Riders.

!
!
REFERÊNCIAS ONLINE:
!
Mais informações sobre grelhas
http://en.wikipedia.org/wiki/Grid_%28page_layout%29
BIBLIOGRAFIA

Desenho e Composição de Interfaces

Recomendados

Más contenido relacionado

Similar a Desenho e Composição de Interfaces

Similar a Desenho e Composição de Interfaces (20)

Más de Ricardo Pereira Rodrigues

Más de Ricardo Pereira Rodrigues (6)

Desenho e Composição de Interfaces