SlideShare ist ein Scribd-Unternehmen logo
1 von 16
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

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

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 sitesRafael Rangel
 
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...Ricardo Pereira Rodrigues
 
Introdução ao Desenvolvimento Móvel
Introdução ao Desenvolvimento MóvelIntrodução ao Desenvolvimento Móvel
Introdução ao Desenvolvimento MóvelIury Lira
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensMarconi Pacheco
 
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 03Neca Boullosa
 
Projetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoProjetos Web - Estratégia de projeto
Projetos Web - Estratégia de projetoOdair Cavichioli
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao Carlos Franco
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de SitesSimone Cervantes
 
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 AdventistaIgreja Adventista do Sétimo Dia
 
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íliaLuiz Agner
 
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 DesignDiego Eis
 

Ähnlich wie 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
 

Mehr von 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 GoogleSouMaisWeb
 
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 SociaisSouMaisWeb
 
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
 

Mehr von 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