Este documento discute os conceitos de design de websites, arquitetura da informação e usabilidade. Aborda tendências atuais de layout como simplicidade, destaque do conteúdo e uso moderado de efeitos visuais e cores. Também explica a evolução do desenvolvimento client-side, da separação entre conteúdo e formatação usando XHTML e CSS.

1. Webdesign RPC.com.br dez.2008

2. Projetos RPC.com.br dez.2008

3. Desenvolvimento RPC.com.br dez.2008

4. ? RPC.com.br dez.2008

5. CONCEITO Fundação

6. CONCEITO Fundação UX & IA Interface

7. DESIGN Linguagem CONCEITO Fundação UX & IA Interface

8. DESIGN Linguagem CONCEITO Fundação UX & IA Interface CODING Implementação

9. DESIGN Linguagem CONCEITO Fundação UX & IA Interface CODING PRODUTO Implementação

10. DESIGN CONCEITO UX & IA CODING PRODUTO DESIGN CONCEITO UX & IA CODING PRODUTO

11. Produto RPC.com.br dez.2008

12. Conceito Usabilidade e Arquitetura da Informação Design Desenvolvimento client-side ... and last, but not the least... RPCannes.com.br Agenda

13. Conceito

14. Tática = ação conceitual Conceituar um produto é, portanto, determinar a maneira como ele será criado para atingir os objetivos previamente determinados (estratégia) Envolve geralmente dois “pensares”: como o produto será consumido ; como o produto será fabricado . Conceito

15. Conceito O lado do consumo No caso da web, é pensar: na apresentação do conteúdo proposto: valorizar o que nós valorizamos; valorizar o que o consumidor valoriza. em mecânicas de interação adequadas; em uma linguagem apropriada; em um consumo tecnicamente ótimo.

16. Conceito O lado da produção No caso da web, é pensar: na viabilidade técnica e operacional da geração de conteúdo; na existência a longo prazo do produto; na eficiência dos processos.

17. Conceito Uma área de resultados Audiência = satisfação do usuário Publicidade = satisfação da empresa “ Tu felicidad es mi felicidad!”

18. Arquitetura da Informação e Usabilidade

19. “ Arquitetura de informação é a arte e a ciência de estruturar e organizar ambientes de informação para ajudar as pessoas a satisfazerem suas necessidades de informação de forma efetiva” Arquitetura da Informação

20. Usabilidade é o componente do Standard de ISO 9241-11 (1998), e é definido da seguinte forma: “ Usabilidade é a eficiência, eficácia e satisfação com a qual os públicos do produto alcançam objetivos em um determinado ambiente”. Usabilidade

21. Usabilidade Eficácia: é a capacidade de executar tarefa de forma correta e completa. Eficiência: são os recursos gastos para conseguir ter eficácia, sejam eles tempo, dinheiro, produtividade, memória. Satisfação: o conforto e aceitação do trabalho dentro do sistema.”

22. Design

23. Preocupação fundamental : agregar conceitos de usabilidade e arquitetura de informação com o planejamento da interface, garantindo que o usuário final atinja seus objetivos de forma intuitiva. Design

24. Lay out: representação visual de todas as definições (briefing/estrutura). Elo de comunicação com o usuário, sua linguagem deve ser condizente com o objetivo do site. “Primeira impressão”. Um bom layout precisa: Transmitir a informação desejada com eficiência; Ser agradável; Passar credibilidade; Não interferir no conteúdo de forma negativa. Cada elemento inserido em um site deve ter um objetivo Design

25. Design “ A perfeição de um layout se atinge quando não há nada a ser retirado e nada mais a ser inserido”. “ O bom design é aquele que ao entrarmos no site, achamos as informações necessárias e nem percebemos o layout.”

26. Design | TENDÊNCIAS Layout Simples Leitura simples, de cima para baixo, sem necessidade de ficar pulando com os olhos de ponto a ponto procurando por ícones e links colocados fora do padrão.

28. Design | TENDÊNCIAS Design de conteúdo : o designer deve se concentrar em projetar um bom layout voltado exclusivamente para o conteúdo. Gastar menos energia nas “firulas” de uma página, nas formas e efeitos artísticos. Considerar o conteúdo antes de produzir o layout para que este se adeque perfeitamente a proposta. Aspectos visuais: O conteúdo pode ser mais “livre”, sem necessidade de “caixinhas” envolvendo tudo. Suave, apresentado de forma simples.

30. Design | TENDÊNCIAS “ Web designers não são decoradores, são comunicadores.”

31. Design | TENDÊNCIAS Layouts centralizados : Passa uma sensação de simplicidade e equilíbrio.

33. Design | TENDÊNCIAS Efeitos 3D, ícones (detalhes): Os efeitos devem ser utilizado para dar uma suave sensação de espaço em segundo plano (sombras) ou para fazer um ícone se destacar (efeitos de arredondamento e sombras sutis).

35. Design | TENDÊNCIAS Background com cores suaves e neutras : Atualmente as cores de fundo mais utilizadas são as com gradientes suaves (degradês), variações de cinza claro para branco, azul escuro para um azul mais claro, etc. Tons pastéis. Vantagens: “ajuda” na hora de incluir itens de cores fortes e assim destacá-los melhor.

38. Design | TENDÊNCIAS Cores fortes, utilizadas com critério: Destaque de certos elementos presentes no site, através da utilização de cores fortes e contrastantes.

42. Design | TENDÊNCIAS Abundância de espaços : Essa regra é universal, quanto mais espaços em branco melhor. Espaçamentos maiores são essenciais para destacar melhor os elementos. Intervalos entre os elementos facilita a leitura.

44. Design | TENDÊNCIAS Textos grandes: utilizar fontes maiores, facilitando assim a leitura de alguns destaques. Ítens mais importantes, letras maiores. Títulos, citações, etc. Usar também com critério para não virar “ruído” visual.

46. Design Layout simples privilegiando o conteúdo

49. Design Efeitos 3D, ícones (detalhes), usados com critério

51. Design Cores fortes, utilizadas com critério

53. Design Abundância de espaços e textos grandes

55. Design Esses designers da RPC são muito “caretas”...

59. Desenvolvimento client-side

60. Ontem : Os primeiros browsers eram desenvolvidos sem nenhuma padronização; Tabelas no código html, como uma grade para exibir imagens e textos. Então... Desenvolvimento client-side

63. Ontem : Conteúdo e formatação misturados; Códigos desnecessariamente grandes; Maior uso de banda de transferência; Grande dificuldade para fazer o design ou redesign de sites; Difícil manter a consistência visual do site; Muito menos acessíveis. Desenvolvimento client-side

64. Desenvolvimento client-side Hoje : Browsers com melhor renderização conforme os padrões web (W3C); A W3C regulamenta as tecnologias utilizadas na Web através das especificações HTML, XML, XHTML, XSL, XSLT, XPATH, PNG, CSS Usam-se marcações XHTML e CSS para formatar sites. Então...

65. Desenvolvimento client-side

66. Navegadores :

67. Impressoras :

68. Navegadores :

69. Dispositivos portáteis :

70. Desenvolvimento client-side fonte: http://www.plasmadesign.com.br/stupidtables

71. Desenvolvimento client-side fonte: http://www.plasmadesign.com.br/stupidtables

72. Desenvolvimento client-side fonte: http://www.plasmadesign.com.br/stupidtables

73. Desenvolvimento client-side

74. Personalização :

75. Personalização :

80. Hoje : Conteúdo e formatação separados; As páginas carregam mais rápido; Os custos de hospedagem são reduzidos; Mantém a consistência visual em todo o produto; Melhores resultados das ferramentas de busca; Design e redesign muito mais rápido e fácil; Acessível para todos os visualizadores e browsers; Desenvolvimento client-side

81. Desenvolvimento client-side Etapas de Desenvolvimento : XHTML (XHTML 1.0 Strict) ; HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.1 Strict, XHTML Mobile Profile, XHTML Voice, etc; CSS (versão 2); CSS 1 , CSS-p, CSS 2, CSS 3; Testes nos Browsers (Windows) nas versões do Firefox e Internet Explorer. Google Chrome, Opera, Safari etc.

82. RPCannes.com.br

83. RPCannes.com.br http://portal.rpc.com.br/realmedia/teste/?c=banner127nov08 http://portal.rpc.com.br/realmedia/teste/?c=banner227nov08 http://portal.rpc.com.br/realmedia/teste/?c=banner327nov08 http://portal.rpc.com.br/realmedia/teste/?c=banner427nov08 http://portal.rpc.com.br/realmedia/teste/?c=banner627nov08 ;-)