16
ACESSIBILIDADE E DESIGN Ricardo Rodrigues Nunes http://www.ricardornunes.com.br [email protected] 01/15

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

Embed Size (px)

DESCRIPTION

 

Citation preview

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

ACESSIBILIDADE E DESIGNRicardo Rodrigues Nuneshttp://[email protected]

01/15

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

CONSIDERAÇÕES SOBRE DESIGN

Tamanho único não serve para todo mundo.

<Ricardo Rodrigues Nunes>

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

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.

<Ricardo Rodrigues Nunes>

03/15

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

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.

<Ricardo Rodrigues Nunes>

04/15

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

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.

<Ricardo Rodrigues Nunes>

05/15

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

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 necessidades do usuário.

<Ricardo Rodrigues Nunes>

06/15

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

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.

<Ricardo Rodrigues Nunes>

07/15

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

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.

<Ricardo Rodrigues Nunes>

08/15

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

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.

<Ricardo Rodrigues Nunes>

09/15

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

<Ricardo Rodrigues Nunes>

10/15

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

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

<Ricardo Rodrigues Nunes>

11/15

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

<Ricardo Rodrigues Nunes>

12/15

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

<Ricardo Rodrigues Nunes>

13/15

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

<Ricardo Rodrigues Nunes>

14/15

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

<Ricardo Rodrigues Nunes>

15/15Para ver mais acesse: http://www.csszengarden.com/tr/portuguese/

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

ACESSIBILIDADE E DESIGNRicardo Rodrigues Nuneshttp://[email protected]