Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição

Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE

DOCENTE: RICARDO PEREIRA RODRIGUES / [email protected]

ETAPAS NA PRODUÇÃO: DESENHO E COMPOSIÇÃO

mailto:[email protected]

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 3ORGANIZAÇÃ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áfico. • 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 identifique 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: 60pxLARGURA SUB-COLUNAS: 20pxNº DE COLUNAS: 12LARGURA GLUTTER: 10px-

LARGURA TOTAL CONTEÚDO: 830pxLARGURA 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áfico: 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 final.



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 identificação das páginas.

Exemplo de um cabeçalho de uma página (theguardian.com/uk)

http://www.theguardian.com/uk


Princípios de Design Gráfico: 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áfico

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áfico.


Princípios de Design Gráfico: 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áfico: 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.

Título

Elemento 1

Imagem







Elemento 2

Elemento 5

Elemento 4

Elemento 5

Exemplo de interface que não aplica nenhum dos princípios do design gráfico.

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áfico: 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 da Proximidade.

Título

Elemento 1

Imagem







Elemento 2

Elemento 5

Elemento 4

Elemento 5

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

TítuloImagem

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.

CONFUSO EQUILIBRADO


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 aplicação do princípio de Alinhamento.

TítuloImagem



A repetição foi aplicada nesta interface, através das cores e das dimensões dos elementos, desta forma este projecto ficou 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ítuloImagem




Princípios do Design Gráfico: 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 repetição foi aplicada nesta interface, através das cores e das dimensões dos elementos, desta forma este projecto ficou 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ítuloImagem



A interface depois de aplicado o princípio de Contraste.

TítuloImagem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut 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.

CONTRASTERelaçã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 identifica todos os elementos e fixa a sua respectiva posição na página.


Layout: Gráficos

• 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 ficheiros 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!

URL: gameonworld.nike.com

http://gameonworld.nike.com


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: Tipografia

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ã.

URL: http://wpshower.com/

http://wpshower.com/


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

Complementares (contraste)

Monocromático

Tríades Soluções mais sofisticadas 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 fiável e desarrumado/cheio.

CORES QUENTES !

PaixãoFelicidade

EntusiasmoEnergiaCORES FRIAS

!Calma

ProfissionalismoSeguranç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• Filosofia• 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

• Confianç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• Confianç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• Sofisticaçã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áficas;• 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.



User Interface (Human-Computer Interface)

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áficas, í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áfico dos possíveis fluxos 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)

http://chefonline.continente.pt

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

http://www.vodafone.pt/main/Particulares/mapa-do-site.htm

• 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

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

URL: https://www.behance.net/gallery/Yellow-Bus-Official-Sightseeing-Tours/13385203

https://www.behance.net/gallery/Yellow-Bus-Official-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

http://en.wikipedia.org/wiki/Grid_%28page_layout%29