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

;-)