RPC.com.br - Produto
-
Upload
adriano-brandao -
Category
Design
-
view
734 -
download
0
Transcript of RPC.com.br - Produto
![Page 1: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/1.jpg)
Webdesign
RPC.com.brdez.2008
![Page 2: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/2.jpg)
Projetos
RPC.com.brdez.2008
![Page 3: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/3.jpg)
Desenvolvimento
RPC.com.brdez.2008
![Page 4: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/4.jpg)
?
RPC.com.brdez.2008
![Page 5: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/5.jpg)
CONCEITOFundação
![Page 6: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/6.jpg)
CONCEITOFundação
UX & IAInterface
![Page 7: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/7.jpg)
DESIGNLinguagem
CONCEITOFundação
UX & IAInterface
![Page 8: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/8.jpg)
DESIGNLinguagem
CONCEITOFundação
UX & IAInterface
CODINGImplementação
![Page 9: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/9.jpg)
DESIGNLinguagem
CONCEITOFundação
UX & IAInterface
CODING
PRODUTO
Implementação
![Page 10: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/10.jpg)
DESIGN CONCEITO
UX & IACODING
PRODUTO
DESIGN CONCEITO
UX & IACODING
PRODUTO
![Page 11: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/11.jpg)
Produto
RPC.com.brdez.2008
![Page 12: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/12.jpg)
Conceito Usabilidade e Arquitetura da Informação Design Desenvolvimento client-side
... and last, but not the least... RPCannes.com.br
Agenda
![Page 13: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/13.jpg)
Conceito
![Page 14: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/14.jpg)
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
![Page 15: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/15.jpg)
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.
![Page 16: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/16.jpg)
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.
![Page 17: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/17.jpg)
Conceito
Uma área de resultados
Audiência = satisfação do usuário Publicidade = satisfação da empresa
“Tu felicidad es mi felicidad!”
![Page 18: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/18.jpg)
Arquitetura da Informaçãoe
Usabilidade
![Page 19: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/19.jpg)
“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
![Page 20: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/20.jpg)
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
![Page 21: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/21.jpg)
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.”
![Page 22: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/22.jpg)
Design
![Page 23: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/23.jpg)
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
![Page 24: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/24.jpg)
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
![Page 25: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/25.jpg)
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.”
![Page 26: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/26.jpg)
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.
![Page 27: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/27.jpg)
![Page 28: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/28.jpg)
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.
![Page 29: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/29.jpg)
![Page 30: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/30.jpg)
Design | TENDÊNCIAS
“Web designers não são decoradores, são comunicadores.”
![Page 31: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/31.jpg)
Design | TENDÊNCIAS
Layouts centralizados: Passa uma sensação de simplicidade e equilíbrio.
![Page 32: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/32.jpg)
![Page 33: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/33.jpg)
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).
![Page 34: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/34.jpg)
![Page 35: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/35.jpg)
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.
![Page 36: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/36.jpg)
![Page 37: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/37.jpg)
![Page 38: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/38.jpg)
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.
![Page 39: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/39.jpg)
![Page 40: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/40.jpg)
![Page 41: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/41.jpg)
![Page 42: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/42.jpg)
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.
![Page 43: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/43.jpg)
![Page 44: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/44.jpg)
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.
![Page 45: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/45.jpg)
![Page 46: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/46.jpg)
Design
Layout simples privilegiando o conteúdo
![Page 47: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/47.jpg)
![Page 48: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/48.jpg)
![Page 49: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/49.jpg)
Design
Efeitos 3D, ícones (detalhes), usados com critério
![Page 50: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/50.jpg)
![Page 51: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/51.jpg)
Design
Cores fortes, utilizadas com critério
![Page 52: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/52.jpg)
![Page 53: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/53.jpg)
Design
Abundância de espaços e textos grandes
![Page 54: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/54.jpg)
![Page 55: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/55.jpg)
Design
Esses designers da RPC são muito “caretas”...
![Page 56: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/56.jpg)
![Page 57: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/57.jpg)
![Page 58: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/58.jpg)
![Page 59: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/59.jpg)
Desenvolvimento client-side
![Page 60: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/60.jpg)
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
![Page 61: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/61.jpg)
![Page 62: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/62.jpg)
![Page 63: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/63.jpg)
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
![Page 64: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/64.jpg)
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...
![Page 65: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/65.jpg)
Desenvolvimento client-side
![Page 66: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/66.jpg)
Navegadores:
![Page 67: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/67.jpg)
Impressoras:
![Page 68: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/68.jpg)
Navegadores:
![Page 69: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/69.jpg)
Dispositivos portáteis:
![Page 70: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/70.jpg)
Desenvolvimento client-side
fonte: http://www.plasmadesign.com.br/stupidtables
![Page 71: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/71.jpg)
Desenvolvimento client-side
71fonte: http://www.plasmadesign.com.br/stupidtables
![Page 72: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/72.jpg)
Desenvolvimento client-side
72
fonte: http://www.plasmadesign.com.br/stupidtables
![Page 73: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/73.jpg)
Desenvolvimento client-side
![Page 74: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/74.jpg)
Personalização:
![Page 75: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/75.jpg)
Personalização:
![Page 76: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/76.jpg)
![Page 77: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/77.jpg)
![Page 78: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/78.jpg)
![Page 79: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/79.jpg)
![Page 80: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/80.jpg)
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
![Page 81: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/81.jpg)
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.
![Page 82: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/82.jpg)
RPCannes.com.br
![Page 83: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/83.jpg)
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
;-)
![Page 84: RPC.com.br - Produto](https://reader030.fdocument.pub/reader030/viewer/2022020207/55a1185e1a28ab98148b470d/html5/thumbnails/84.jpg)