laboratório web 2013-2014 - etapas na produção: desenho e composição
DESCRIPTION
Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.TRANSCRIPT
![Page 1: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/1.jpg)
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
![Page 2: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/2.jpg)
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
![Page 3: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/3.jpg)
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.
![Page 4: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/4.jpg)
Anatomia de um designer
ETAPAS NA PRODUÇÃO
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.
![Page 5: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/5.jpg)
Desenho e Composição
ETAPAS NA PRODUÇÃ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.
![Page 6: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/6.jpg)
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
ETAPAS NA PRODUÇÃO
![Page 7: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/7.jpg)
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
ETAPAS NA PRODUÇÃO
![Page 8: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/8.jpg)
INÍCIO DA LEITURA DOS TÍTULOS
EXPLORAÇÃO VISUAL PRELIMINAR
EXPLORAÇÃO MAIS ATENTA
![Page 9: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/9.jpg)
A rápida raposa castanha salta por cima do
do cão preguiçoso.
![Page 10: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/10.jpg)
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.
![Page 11: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/11.jpg)
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.).
ETAPAS NA PRODUÇÃO
Hierarquia Visual: Grelha
No contexto do design gráfico, a grelha é um instrumento para ordenar os elementos gráficos de texto e imagens.
![Page 12: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/12.jpg)
ETAPAS NA PRODUÇÃO
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
![Page 13: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/13.jpg)
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)
![Page 14: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/14.jpg)
![Page 15: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/15.jpg)
ETAPAS NA PRODUÇÃO
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ã.
![Page 16: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/16.jpg)
ETAPAS NA PRODUÇÃO
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).
![Page 17: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/17.jpg)
ETAPAS NA PRODUÇÃO
Princípios de Design Gráfico: Posicionamento
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.
![Page 18: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/18.jpg)
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.
![Page 19: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/19.jpg)
ETAPAS NA PRODUÇÃO
Princípios de Design Gráfico: Posicionamento
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.
![Page 20: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/20.jpg)
![Page 21: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/21.jpg)
ETAPAS NA PRODUÇÃO
Princípios de Design Gráfico: Posicionamento
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)
![Page 22: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/22.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 23: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/23.jpg)
ETAPAS NA PRODUÇÃO
Princípios de Design Gráfico
Princípios Básicos: (Williams, 2005) !✓ Proximidade (ou Agrupamento)✓ Alinhamento✓ Repetição✓ Contraste
![Page 24: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/24.jpg)
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.
![Page 25: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/25.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 26: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/26.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 27: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/27.jpg)
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.
![Page 28: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/28.jpg)
A aplicação do princípio da Proximidade.
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
![Page 29: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/29.jpg)
ETAPAS NA PRODUÇÃO
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).
![Page 30: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/30.jpg)
A aplicação do princípio da Proximidade.
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
![Page 31: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/31.jpg)
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.
![Page 32: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/32.jpg)
CONFUSO EQUILIBRADO
![Page 33: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/33.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 34: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/34.jpg)
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.
![Page 35: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/35.jpg)
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
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.
![Page 36: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/36.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 37: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/37.jpg)
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
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.
![Page 38: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/38.jpg)
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.
![Page 39: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/39.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 40: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/40.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 41: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/41.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 42: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/42.jpg)
ETAPAS NA PRODUÇÃO
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!
![Page 44: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/44.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 45: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/45.jpg)
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.
![Page 46: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/46.jpg)
ETAPAS NA PRODUÇÃO
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ã.
![Page 48: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/48.jpg)
ETAPAS NA PRODUÇÃO
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
![Page 49: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/49.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 50: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/50.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 51: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/51.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 52: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/52.jpg)
Primárias Secundárias Terciárias
![Page 53: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/53.jpg)
Complementares (contraste)
![Page 54: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/54.jpg)
Monocromático
![Page 55: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/55.jpg)
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)
![Page 56: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/56.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 57: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/57.jpg)
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
![Page 58: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/58.jpg)
•Poder•Energia•Estimulante•Dinamismo•Calor•Paixão•Amor•Agressão•Perigo•Vitalidade•Alegria•Rebeldia•Alerta•Ordens
VERMELHO
![Page 59: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/59.jpg)
• Energia• Equilíbrio• Amigável• Calor• Conforto• Abundância• Advertência• Actividade• Sabor• Festividade• Entusiasmo
LARANJA
![Page 60: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/60.jpg)
• Optimismo• Luminoso• Felicidade• Esperança• Filosofia• Desonestidade• Cobardia• Traição• A cor do sol• Criatividade• Juventude• Doença• Brilho• Alegria• Leveza
AMARELO
![Page 61: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/61.jpg)
• Calma• Paciência• Naturalidade• Sorte• Equilíbrio• Seguro• Partilha• Rejuvenescimento• Estabilidade• Harmonia
VERDE
![Page 62: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/62.jpg)
• 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
![Page 63: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/63.jpg)
BRANCO
• Pureza• Limpeza• Precisão• Neutralidade• Inocência• Esterilidade• Morte• A cor da bata dos médicos
![Page 64: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/64.jpg)
• Terra• Confiança• Estabilidade• Elegância• Conforto• Durabilidade• A cor da terra• Associado a coisas orgânicas e naturais
CASTANHO
![Page 65: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/65.jpg)
• Jovem• Diversão• Energia• Romance• Felicidade• Infância
ROSA
![Page 66: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/66.jpg)
• Inteligência• Luxo• Vaidade• Fantasia• Melancolia• Isolamento• Arte• Realeza• Feminilidade
ROXO
![Page 67: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/67.jpg)
• 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
![Page 68: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/68.jpg)
• Poder• Sexualidade• Sofisticação• Morte• Mistério• Medo• Tristeza• Elegância• A ausência de cor• O vazio
PRETO
![Page 69: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/69.jpg)
Design de Interfaces
ETAPAS NA PRODUÇÃO
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.
![Page 70: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/70.jpg)
Design de Interfaces
ETAPAS NA PRODUÇÃO
• Desktop• Web• Mobile / Tablet• Televisão
![Page 71: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/71.jpg)
Design de Interfaces
ETAPAS NA PRODUÇÃ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.
![Page 72: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/72.jpg)
ETAPAS NA PRODUÇÃO
Design de Interfaces
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).
![Page 73: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/73.jpg)
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.
![Page 74: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/74.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 75: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/75.jpg)
![Page 76: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/76.jpg)
ETAPAS NA PRODUÇÃO
Design de Interfaces: Modelos Teóricos
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.
![Page 77: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/77.jpg)
ETAPAS NA PRODUÇÃO
Design de Interfaces: Modelos Teóricos
User Interface (Human-Computer Interface)
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.
![Page 78: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/78.jpg)
ETAPAS NA PRODUÇÃO
Design de Interfaces: Modelos Teóricos
User Interface (Human-Computer Interface)
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.
![Page 79: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/79.jpg)
ETAPAS NA PRODUÇÃO
Design de Interfaces: Modelos Teóricos
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ã.
![Page 80: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/80.jpg)
![Page 81: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/81.jpg)
ETAPAS NA PRODUÇÃO
Design de Interfaces: Modelos Teóricos
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.
![Page 82: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/82.jpg)
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.
ETAPAS NA PRODUÇÃO
![Page 83: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/83.jpg)
ETAPAS NA PRODUÇÃO
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.
![Page 85: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/85.jpg)
Exemplo de uma página com o mapa do site (vodafone.pt)
![Page 86: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/86.jpg)
• 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:
ETAPAS NA PRODUÇÃO
Desenho de Navegação
![Page 87: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/87.jpg)
ETAPAS NA PRODUÇÃO
• 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:
Desenho de Navegação
![Page 88: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/88.jpg)
ETAPAS NA PRODUÇÃO
Desenho de Navegação
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).
![Page 89: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/89.jpg)
![Page 90: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/90.jpg)
![Page 91: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/91.jpg)
![Page 92: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/92.jpg)
ETAPAS NA PRODUÇÃO
Mockup
• Um protótipo/visualização à escala de uma peça de design.• Usado para demonstrar, apresentar, vender uma ideia ou
solução.
![Page 93: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/93.jpg)
URL: https://www.behance.net/gallery/Bepetly-Flat-Experience/11344849
![Page 94: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/94.jpg)
URL: https://www.behance.net/gallery/Yellow-Bus-Official-Sightseeing-Tours/13385203
![Page 95: Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição](https://reader033.vdocuments.site/reader033/viewer/2022060201/5599ffc61a28ab22098b47ae/html5/thumbnails/95.jpg)
• 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