Contexto. Interface Gráfica. A Informação na Web. A Informação na Web. Nos anos 80, surgem as primeiras ferramentas de Desktop Publishing: Web Design

Transcrição

1 Interface Gráfica Web Design Contexto Nos anos 80, surgem as primeiras ferramentas de Desktop Publishing: Edição e publicação de documentos via ferramentas de editoração eletrônica, computador e impressora. WWW Edição e publicação de informação via páginas HTML e provedor de internet. A Informação na Web What you see is what you get mas What you see is NOT what everybody gets. WebAuthoring nãoéomesmoque Word- Processing (Tipografia). Nem todo usuário utilizará gráficos para navegar. Nem tudo o que agrada ao programador agrada aos usuários (novidades tecnológicas) A Informação na Web Conteúdo é a chave para uma boa página Web. Todo usuário é imprevisível, idiossincrático (reage de maneira única) e tende a cometer erros. Velocidade é sinônimo de usuário feliz. Bom senso nunca é demais. 1

2 Regras que funcionam Identifique o perfil dos usuários a serem atingidos; Identifique o propósito do site; Conheça seus principais objetivos; Faça um resumo das informações que o site irá conter. Considere as páginas do site como páginas de uma revista. Elementos para a criação de uma boa página Web Aparência Geral Conteúdo Velocidade Gráficos e Layout Tipografia e Diagramação Privacidade e Segurança Gramática Aparência Geral Aparência Geral Cause uma forte e correta impressão no usuário. Simplicidade Originalidade Profissionalismo Atratividade 2

3 Conteúdo Conteúdo original e relevante atraem mais usuários do que uma interface bem feita. Objetividade Transparência Informação, entretenimento, conselho, ajuda para um problema, oportunidades para contatar outras pessoas, links úteis para outros sites etc. Velocidade Agrade ao usuário e torne a manutenção das páginas mais fácil: construa páginas pequenas e facilmente carregáveis. Gráficos e Layout Gráficos e Layout Determine qual a impressão que se deseja passar aos usuários e crie layouts e gráficos que contribuam para esta imagem; As cores tem um impacto sobre as emoções: Vermelho e laranja: estimulam os sentidos; Azul e Verde: trazem paz e tranqüilidade; Amarelo: lembra o sol e é associado à alegria; Imagens e animações chamam a atenção do leitor e em muitos casos valem mais do que palavras. Mas utilize com moderação. 3

4 Gráficos e Layout Gráfico e Layout Gráficos e Layout Gráficos e Layout Teste Teste 4

5 Gráfico e Layout Tipografia e Diagramação Teste Considere tipos de letras que sejam bem legíveis, tais como, Arial, Times New Roman, Courier, Garamond etc. Fontes-fantasia podem ser usados apenas em títulos; Não use mais do que um ou dois tipos de fontes; As cores de fundo e das letras devem ser cuidadosamente escolhidas. Diagramação Deve-se deixar uma boa margem entre palavras e gráficos para tornar o texto mais legível; Textos em duas colunas são mais rapidamente lidos. Divida-os em seções e sub-seções. Lembre-se que, ao ler, os olhos geralmente vão do topo esquerdo para a base direita de uma página. Por isso é interessante colocar uma barrademenunoladoesquerdodapágina. Coloque uma barra de menu para orientar o usuário sobre as seções disponíveis no site Ao longo das páginas lembre-se de colocar links para a página inicial e para o topo da página corrente (ao final desta) se houver necessidade de barra de rolagem vertical. Padronize as páginas do site, criando e utilizando templates. 5

6 6

7 Privacidade e Segurança Assegure aos clientes em potencial como suas informações serão mantidas em sigilo e em segurança. Crie páginas especiais que informem a política de privacidade com relação a s, como efetuar compras, quem tem acesso às informações fornecidas, etc Opiniões e comentários positivos de clientes satisfeitos atestam a veracidade das informações. Gramática Texto bem escrito traz maior credibilidade; Não utilize jargões, gírias ou anacronismos; Disponibilize o site em várias línguas, se possível (ou pelo menos a página inicial); Não utilize convenções locais. Por exemplo, não abrevie datas. 7

8 Exemplos Exemplos Referências 8