• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 

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

on

  • 366 views

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.

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.

Statistics

Views

Total Views
366
Views on SlideShare
366
Embed Views
0

Actions

Likes
0
Downloads
33
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 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.
    • Desenho e Composição ETAPAS NA PRODUÇÃ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á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 ETAPAS NA PRODUÇÃO
    • 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
    • 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.). 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.
    • 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
    • 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)
    • 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ã.
    • 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).
    • 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.
    • 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.
    • 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.
    • 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)
    • 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.
    • ETAPAS NA PRODUÇÃO 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.
    • 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.
    • 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.
    • 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.
    • 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
    • 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).
    • 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
    • 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
    • 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.
    • 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.
    • 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ítulo 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.
    • 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.
    • 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ítulo 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.
    • A interface depois de aplicado o princípio de Contraste. Título Imagem 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.
    • 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. 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.
    • 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.
    • 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.
    • 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!
    • URL: gameonworld.nike.com
    • 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.
    • 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.
    • 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ã.
    • URL: http://wpshower.com/
    • 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
    • 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.
    • 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.
    • 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.
    • 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)
    • 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.
    • 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ão Felicidade Entusiasmo EnergiaCORES FRIAS ! Calma Profissionalismo 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 • 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 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.
    • Design de Interfaces ETAPAS NA PRODUÇÃO • Desktop • Web • Mobile / Tablet • Televisão
    • 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.
    • 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).
    • 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.
    • 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.
    • 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.
    • 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.
    • 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.
    • 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ã.
    • 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.
    • 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
    • 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.
    • 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: ETAPAS NA PRODUÇÃO Desenho de Navegação
    • 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
    • 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).
    • 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.
    • URL: https://www.behance.net/gallery/Bepetly-Flat-Experience/11344849
    • URL: 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