SlideShare uma empresa Scribd logo
1 de 16
Baixar para ler offline
ACESSIBILIDADE E DESIGN
01/15   Ricardo Rodrigues Nunes
        http://www.ricardornunes.com.br
        ricardornunes@gmail.com
<Ricardo Rodrigues Nunes>




CONSIDERAÇÕES SOBRE DESIGN
    Tamanho único não serve para todo mundo.
<Ricardo Rodrigues Nunes>




DESIGN ACESSÍVEL
Design acessível beneficia não só pessoas com
  deficiências

 usuários de dispositivo móvel com tela pequena (celular,
 PDA), web-tv, quiosques;
 acesso à internet com conexão lenta;
 equipamento sem aúdio;
 impressora monocromática;
 outros navegadores que não os mais comuns;
 ambiente ruidoso;
 ambiente com luminosidade precária.
                                                            03/15
<Ricardo Rodrigues Nunes>




DESIGN UNIVERSAL
Os Sete Princípios

1.     Equiparação nas possibilidades de uso;
2.     Flexibilidade no uso;
3.     Uso Simples e intuitivo;
4.     Captação da informação;
5.     Tolerância ao erro;
6.     Mínimo esforço físico;
7.     Dimensão e espaço para uso e interação.



                                                 04/15
<Ricardo Rodrigues Nunes>




DESIGN MINIMALISTA
Dicas de um Webdesign minimalista

 Ocupe de 60% a 80% da página com conteúdos (relevantes);
 Apresente as informações mais importantes primeiro;
 Se algo não é relevante, simplesmente não precisa estar lá;
 O background não é mais importante que a informação;
 Faça um bom contraste entre plano de fundo e texto.




                                                               05/15
<Ricardo Rodrigues Nunes>




LAYOUT: FIXO, LÍQUIDO OU ELÁSTICO?
Layout Fixo

Pontos positivos:
  O web designer tem controle sobre a forma como a
  informação é apresentada;
  As linhas de texto têm uma largura fixa e curta, o que
  facilita a leitura de texto na tela.

Pontos negativos:
  Numa tela com uma resolução grande, o web site fica
  encostado a um dos lados ou centrado na página, com muito
  espaço disponível à sua volta;
  Menor acessibilidade, uma vez que o layout não se adapta às   06/15
  necessidades do usuário.
<Ricardo Rodrigues Nunes>




LAYOUT: FIXO, LÍQUIDO OU ELÁSTICO?
Layout Líquido/Fluídico

Pontos positivos:
  Os conteúdos ocupam toda a área visível da tela, permitindo
  transmitir mais informação;
  Deixa de haver espaço vazio à volta do website;
  Maior acessibilidade. Os conteúdos adaptam-se melhor à
  resolução de tela do usuário.

Pontos negativos:
  Maior dificuldade na leitura de linhas de texto demasiado
  longas;
  Perde-se o controle sobre o posicionamento de alguns
  elementos na página.                                          07/15
<Ricardo Rodrigues Nunes>




LAYOUT: FIXO, LÍQUIDO OU ELÁSTICO?
Layout Elástico

 É uma mistura do layout fixo com o layout líquido/fluídico;
 Controle dos elementos na página por parte do web designer
 e controle da largura da janela por parte do usuário;
 É possível fazer com que ao aumentar o tamanho do texto no
 browser (Firefox: CTRL+), a largura da página aumente na
 mesma escala.




                                                               08/15
<Ricardo Rodrigues Nunes>




OS CINCO PRINCÍPIOS DE JOSHUA PORTER
1.     A tecnologia serve o Ser humano;
2.     Design não é arte;
3.     A experiência pertence ao utilizador;
4.     Excelente design é invisível;
5.     A simplicidade é a maior sofisticação.




                                                09/15
<Ricardo Rodrigues Nunes>




SITES ACESSÍVEIS PRECISAM SER NECESSARIAMENTE
FEIOS, SEM CORES E IMAGENS?




                                                10/15
<Ricardo Rodrigues Nunes>




                            11/15
<Ricardo Rodrigues Nunes>




                            12/15
<Ricardo Rodrigues Nunes>




                            13/15
<Ricardo Rodrigues Nunes>




                            14/15
<Ricardo Rodrigues Nunes>




                                                                     15/15
  Para ver mais acesse: http://www.csszengarden.com/tr/portuguese/
ACESSIBILIDADE E DESIGN
Ricardo Rodrigues Nunes
http://www.ricardornunes.com.br
ricardornunes@gmail.com

Mais conteúdo relacionado

Semelhante a 5° Edição do #soumaisweb - Apresentação de Ricardo Nunes - Acessibilidade e Design

APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
Claudio Diniz - Designer Gráfico
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
Neca Boullosa
 

Semelhante a 5° Edição do #soumaisweb - Apresentação de Ricardo Nunes - Acessibilidade e Design (20)

O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
6 Elementos essenciais na criação de sites
6 Elementos essenciais na criação de sites6 Elementos essenciais na criação de sites
6 Elementos essenciais na criação de sites
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
 
Introdução ao Desenvolvimento Móvel
Introdução ao Desenvolvimento MóvelIntrodução ao Desenvolvimento Móvel
Introdução ao Desenvolvimento Móvel
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
 
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
APRESENTAÇÃO: ARQUITETURA DE INFORMAÇÃO E ACESSIBILIDADE WEB: USABILIDADE COM...
 
2010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 032010.1 - PUB5AN - Marketing Digital AULA 03
2010.1 - PUB5AN - Marketing Digital AULA 03
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projeto
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
 
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web AdventistaUX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
 
Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
 
Palestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, BrasíliaPalestra Palácio do Planalto, Brasília
Palestra Palácio do Planalto, Brasília
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
metodos ageis.pptx
metodos ageis.pptxmetodos ageis.pptx
metodos ageis.pptx
 

Mais de SouMaisWeb

9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google
9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google
9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google
SouMaisWeb
 
2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais
2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais
2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais
SouMaisWeb
 
10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...
10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...
10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...
SouMaisWeb
 
10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...
10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...
10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...
SouMaisWeb
 
10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...
10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...
10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...
SouMaisWeb
 
8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...
8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...
8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...
SouMaisWeb
 
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
SouMaisWeb
 
5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...
5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...
5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...
SouMaisWeb
 
2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...
2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...
2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...
SouMaisWeb
 

Mais de SouMaisWeb (9)

9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google
9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google
9° Edição do #soumaisweb - Apresentação do Paulo - O Poder do Google
 
2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais
2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais
2° Edição do #soumaisweb – Apresentação de Raphael Perret – Redes Sociais
 
10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...
10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...
10° Edição do #soumaisweb - Apresentação de Marcelo Thompson - Erros Eternos ...
 
10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...
10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...
10° Edição do #soumaisweb - Apresentação de Fernando Bruno - Privacidade e Mi...
 
10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...
10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...
10° Edição do #soumaisweb - Apresentação de Claudio Hanning - Relacionamento:...
 
8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...
8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...
8° Edição do #soumaisweb - Apresentação de Caroline Haythornethwaite - Redes ...
 
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
5° Edição do #soumaisweb - Apresentação de Monica M. Fernandes - Acessibilida...
 
5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...
5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...
5° Edição do #soumaisweb - Apresentação de Leda Spelta - Acessibilidade e Nov...
 
2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...
2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...
2º Edição do #soumaisweb - Apresentação Cris Dissat - Redes Sociais Como Ferr...
 

5° Edição do #soumaisweb - Apresentação de Ricardo Nunes - Acessibilidade e Design

  • 1. ACESSIBILIDADE E DESIGN 01/15 Ricardo Rodrigues Nunes http://www.ricardornunes.com.br ricardornunes@gmail.com
  • 2. <Ricardo Rodrigues Nunes> CONSIDERAÇÕES SOBRE DESIGN Tamanho único não serve para todo mundo.
  • 3. <Ricardo Rodrigues Nunes> DESIGN ACESSÍVEL Design acessível beneficia não só pessoas com deficiências usuários de dispositivo móvel com tela pequena (celular, PDA), web-tv, quiosques; acesso à internet com conexão lenta; equipamento sem aúdio; impressora monocromática; outros navegadores que não os mais comuns; ambiente ruidoso; ambiente com luminosidade precária. 03/15
  • 4. <Ricardo Rodrigues Nunes> DESIGN UNIVERSAL Os Sete Princípios 1. Equiparação nas possibilidades de uso; 2. Flexibilidade no uso; 3. Uso Simples e intuitivo; 4. Captação da informação; 5. Tolerância ao erro; 6. Mínimo esforço físico; 7. Dimensão e espaço para uso e interação. 04/15
  • 5. <Ricardo Rodrigues Nunes> DESIGN MINIMALISTA Dicas de um Webdesign minimalista Ocupe de 60% a 80% da página com conteúdos (relevantes); Apresente as informações mais importantes primeiro; Se algo não é relevante, simplesmente não precisa estar lá; O background não é mais importante que a informação; Faça um bom contraste entre plano de fundo e texto. 05/15
  • 6. <Ricardo Rodrigues Nunes> LAYOUT: FIXO, LÍQUIDO OU ELÁSTICO? Layout Fixo Pontos positivos: O web designer tem controle sobre a forma como a informação é apresentada; As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto na tela. Pontos negativos: Numa tela com uma resolução grande, o web site fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta; Menor acessibilidade, uma vez que o layout não se adapta às 06/15 necessidades do usuário.
  • 7. <Ricardo Rodrigues Nunes> LAYOUT: FIXO, LÍQUIDO OU ELÁSTICO? Layout Líquido/Fluídico Pontos positivos: Os conteúdos ocupam toda a área visível da tela, permitindo transmitir mais informação; Deixa de haver espaço vazio à volta do website; Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de tela do usuário. Pontos negativos: Maior dificuldade na leitura de linhas de texto demasiado longas; Perde-se o controle sobre o posicionamento de alguns elementos na página. 07/15
  • 8. <Ricardo Rodrigues Nunes> LAYOUT: FIXO, LÍQUIDO OU ELÁSTICO? Layout Elástico É uma mistura do layout fixo com o layout líquido/fluídico; Controle dos elementos na página por parte do web designer e controle da largura da janela por parte do usuário; É possível fazer com que ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da página aumente na mesma escala. 08/15
  • 9. <Ricardo Rodrigues Nunes> OS CINCO PRINCÍPIOS DE JOSHUA PORTER 1. A tecnologia serve o Ser humano; 2. Design não é arte; 3. A experiência pertence ao utilizador; 4. Excelente design é invisível; 5. A simplicidade é a maior sofisticação. 09/15
  • 10. <Ricardo Rodrigues Nunes> SITES ACESSÍVEIS PRECISAM SER NECESSARIAMENTE FEIOS, SEM CORES E IMAGENS? 10/15
  • 15. <Ricardo Rodrigues Nunes> 15/15 Para ver mais acesse: http://www.csszengarden.com/tr/portuguese/
  • 16. ACESSIBILIDADE E DESIGN Ricardo Rodrigues Nunes http://www.ricardornunes.com.br ricardornunes@gmail.com