Webdesign
RPC.com.brdez.2008
Projetos
RPC.com.brdez.2008
Desenvolvimento
RPC.com.brdez.2008
?
RPC.com.brdez.2008
CONCEITOFundação
CONCEITOFundação
UX & IAInterface
DESIGNLinguagem
CONCEITOFundação
UX & IAInterface
DESIGNLinguagem
CONCEITOFundação
UX & IAInterface
CODINGImplementação
DESIGNLinguagem
CONCEITOFundação
UX & IAInterface
CODING
PRODUTO
Implementação
DESIGN CONCEITO
UX & IACODING
PRODUTO
DESIGN CONCEITO
UX & IACODING
PRODUTO
Produto
RPC.com.brdez.2008
Conceito Usabilidade e Arquitetura da Informação Design Desenvolvimento client-side
... and last, but not the least... RPCannes.com.br
Agenda
Conceito
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
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.
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.
Conceito
Uma área de resultados
Audiência = satisfação do usuário Publicidade = satisfação da empresa
“Tu felicidad es mi felicidad!”
Arquitetura da Informaçãoe
Usabilidade
“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
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
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.”
Design
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
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
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.”
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.
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.
Design | TENDÊNCIAS
“Web designers não são decoradores, são comunicadores.”
Design | TENDÊNCIAS
Layouts centralizados: Passa uma sensação de simplicidade e equilíbrio.
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).
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.
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.
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.
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.
Design
Layout simples privilegiando o conteúdo
Design
Efeitos 3D, ícones (detalhes), usados com critério
Design
Cores fortes, utilizadas com critério
Design
Abundância de espaços e textos grandes
Design
Esses designers da RPC são muito “caretas”...
Desenvolvimento client-side
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
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
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...
Desenvolvimento client-side
Navegadores:
Impressoras:
Navegadores:
Dispositivos portáteis:
Desenvolvimento client-side
fonte: http://www.plasmadesign.com.br/stupidtables
Desenvolvimento client-side
71fonte: http://www.plasmadesign.com.br/stupidtables
Desenvolvimento client-side
72
fonte: http://www.plasmadesign.com.br/stupidtables
Desenvolvimento client-side
Personalização:
Personalização:
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
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.
RPCannes.com.br
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
;-)
Top Related