O documento descreve o projeto de uma interface para um site de capacitação de educadores sobre dislexia. A metodologia incluiu pesquisa com usuários e referências visuais. O projeto da interface incluiu conceitos como estratégia, escopo, estrutura e superfície visual. O resultado final foi um modelo preliminar para ser aprimorado com contribuições de outras áreas.

2. Interface para site
responsivo de capacitação
docente sobre dislexia
Maísa Fernanda de Oliveira
São Paulo, 2017

3. CONTEÚDO
Metodologia
Introdução ao tema
Fase de pesquisa
Pesquisa de segmento
Pesquisa com usuários
Referências e inspirações
Fase de projeto
Conceitos chave
Escolha do nome
Design da marca
Projeto da interface
Considerações finais
Bibliografia

4. METODOLOGIA
SC M T E M V D CP C P R D A DD P
Entendimento do problema Geração de alternativas Verificação Solução
Fase de projetoFase de pesquisa

5. METODOLOGIA
SC M T E M V D CP C P R D A DD P
Entendimento do problema Geração de alternativas Verificação Solução
Fase de projetoFase de pesquisa

6. Sobre
INTRO D UÇÃO
AO TEMA

7. O QUE É DISLEXIA?
15%
Aa
Transtorno de aprendizagem
com origem neurobiológica
Interfere nos processos de
aquisição e manejo da linguagem
Afeta entre 7 e 15%
da população mundial

8. bb
O QUE É DISLEXIA?

9. bbO QUE É DISLEXIA?

10. bb
O QUE É DISLEXIA?

11. bbO QUE É DISLEXIA?

12. Sobre
HIPÓTESE
INICIAL

13. OS EDUCADORES TÊM DIFICULDADE EM...
perceber os sinais da dislexia e
adaptar o método de ensino convencional
às particularidades do transtorno

14. Curso de capacitação
profissional para
educadores sobre dislexia
INTERFACE
MARCA
IDEIA DE PROJETO

15. PÚBLICO ALVO
Professores do Ensino Básico
em colégios públicos ou privados
EDUCAÇÃO INFANTIL ENSINO FUNDAMENTAL ENSINO MÉDIO

16. PÚBLICO ALVO
“O tema dislexia foi abordado,
mas de forma superficial.”
“Nada de aplicação real.”
“O tema dislexia nunca foi discutido.”
“O tema dislexia na ocasião
da graduação não foi discutido,”
Há uma lacuna de
formação em educação
inclusiva nos cursos
de graduação.

17. PÚBLICO ALVO
Adaptar o ensino a
estudantes disléxicos
ainda é uma tarefa
desafiadora.
“Eu preciso de mais informações
e conhecimentos para estabelecer
metodologias de ensino
que favoreçam a aprendizagem
dos alunos disléxicos.”
“Sempre há uma preocupação
em relação a sua compreensão,
além de avaliações com tempo
diferenciado em sua realização.”

18. PÚBLICO ALVO
Os educadores buscam
materiais práticos que
os auxiliem diretamente
em sala de aula.
“Sempre busco obras que sejam
práticas e que ajudem a solucionar
ou amenizar minhas dúvidas.”
“O professor não vai ler um
livro sobre Dislexia para lidar
com um aluno disléxico.”
“Eu não tenho muita paciência
pra ler coisas sobre educação.”

19. Sobre
O QU E JÁ
FO I FEITO

20. CONTEXTO
CURSO ON-LINE
PORTAL | BLOG
CURSOS PAGOS
PORTAL | BLOG APOSTILA

21. Sobre
INSPIRAÇÃO

22. INSTIGANTE DESCOMPLICADO EMPÁTICO
COMO SERIA O CURSO IDEAL?

23. REFERÊNCIA PARA INTERFACE

24. REFERÊNCIAS PARA MARCA
Ilustração | capa de livro
LegoLand por Studio Fago
Identidade visual
DFG (Designers Founders Guild)
Ilustração | uso digital
Naomi Wilkison para Facebook.

25. Sobre
PROJETO
DA MARCA

26. ESCOLHA DO NOME
TRIDIMENSIONALIDADE
NOVAS POSSIBILIDADES
TRANSFORMAÇÃO

27. ESCOLHA DO NOME
TRIDIMENSIONALIDADE
NOVAS POSSIBILIDADES
TRANSFORMAÇÃO

28. ESCOLHA DO NOME
TRIDIMENSIONALIDADE
NOVAS POSSIBILIDADES
TRANSFORMAÇÃO

29. LOGOTIPO
Elementos construtivos Tipográfico e modular

30. Sobre
ESTUD O S
VISUAIS
PROCESSO DE CRIAÇÃO

31. Identifique casos de risco
Saiba como adaptar suas aulas
Teste novas ferramentas
2017. Raiar Ensinar e aprender com a Dislexia.
Comece agora
Quem somos Contato LoginCadastre-se
Aprenda mais sobre
Dislexia, gratuitamente.

32. PROCESSO CRIATIVO
Sobre Curso FerramentasContato
2017. Raiar Ensinar e aprender com a Dislexia.
Já tem uma conta?
Aprenda mais
sobre Dislexia,
gratuitamente.
Comece agora

33. O QUE É DISLEXIA?
Comece agora
Aprenda mais sobre
Dislexia, gratuitamente.
Sobre Curso FerramentasContato
2017. Raiar Ensinar e aprender com a Dislexia.

34. ELEMENTOS DE MARCA
Montserrat Bold
Sans serif, Google Font
Boa leiturabilidade
Adaptada à web
A G K L P
A G K L P
1 2 3 4 5 @
1 2 3 4 5 @

36. Sobre
PROJETO DA
INTERFACE

37. METODOLOGIA
Superficie.
Esqueleto
Estrutura
Escopo
Estratégia
+ CONCRETO
+ ABSTRATO

38. 1. ESTRATÉGIA
MEIOS DE ACESSO
Site responsivo.
Menor custo e trabalho
de manutenção em
relação ao mobile.
Uso do celular para acessar
a internet ultrapassou o do
computador pela primeira
vez no Brasil (IBGE, 2016).

39. 1. ESTRATÉGIA
VIABILIZAÇÃO FINANCEIRA
Curso gratuito Ferramentas extras $
Doações voluntárias $

40. 1. ESTRATÉGIA
DURAÇÃO
DO CURSO
Indefinida, depende
da rotina de estudo
de cada aluno.

41. 2. ESCOPO
CURSO
conceitos, causas
e consequências.
O QUE É DISLEXIA?
técnicas para identificar
sinais de dislexia
COMO IDENTIFICAR?
dicas práticas para um
ensino mais inclusivo
O QUE MUDAR?

42. 2. ESCOPO
FERRAMENTAS
TEMPLATE PARA
APRESENTAÇÃO
MODELOS
DE PROVA
CALENDÁRIO
DIGITAL

43. LANDING PAGE
CADASTRO
SOBRE O CURSO
LOGIN
SOBRE O CURSO
FERRAMENTAS
DEPOIMENTOS
EQUIPE
CONTATO
CADASTRO
TEORIA
PRÓXIMA FASE
EXERCÍCIOS
FÓRUM
APROVAÇÃO
REPROVAÇÃO
CURSO
PARTE 1
PARTE 2
PARTE 3
FIM DO CURSO
Primeiro
acesso
Retorno
3. ESTRUTURA

44. 4. ESQUELETO
ESTUDOS INICIAIS

45. 5. SUPERFICIE
Botão ativo
Botão ativo
Botão ativo
Botão ativo
Botão inativo
Texto OK
Campo ativo
Campo inativo
Texto com erro
Link clicável
Pergunta? Link clicável
Função ativa
Função desativada
Anterior Pular

46. 5. SUPERFICIE

47. 5. SUPERFICIE

48. 5. SUPERFICIE

49. 5. SUPERFICIE

50. 5. SUPERFICIE

51. 5. SUPERFICIE

52. 5. SUPERFICIE

53. 5. SUPERFICIE

54. REFINAMENTO

55. 5. SUPERFICIEREFINAMENTO

56. REFINAMENTO

57. O resultado obtido é apenas
um modelo preliminar que poderia
ser aprimorado e implementado
com intercâmbio entre profissionais
de outras áreas de estudo.
CONSIDERAÇÕES FINAIS

58. Os testes de interação e a
responsividade, particulares
ao projeto digital, influenciam
significativamente o processo
de projeto e os resultados,
CONSIDERAÇÕES FINAIS

59. A acessibilidade no Design
Visual ainda é pouco estudada
ou praticada, tanto em projetos
acadêmicos quanto
no mercado de trabalho.
CONSIDERAÇÕES FINAIS

60. BIBLIOGRAFIA
METODOLOGIA
MUNARI, Bruno. Das coisas nascem coisas. Lisboa: Edições 70, 1981.
GARRETT, J. James. The Elements of User Experience: User-Centered Design for the Web. New Riders, 2003.
REVISÃO BIBLIOGRÁFICA - EDUCAÇÃO E DISLEXIA
ZAMBON, Caroline. Prisma: Material de apoio à alfabetização de crianças disléxicas. Trabalho de Conclusão. São Paulo, FAU USP, 2014.
CAPOVILLA , F. C. Neuropsicologia e Aprendizagem: Uma abordagem multidisciplinar. São Paulo: Sociedade Brasileira de Neuropsicologia e Editora Scortecci, 2004.
CONSENZA, Ramon M. / GUERRA, Leonor B. Neurociência e educação: como o cérebro aprende. Editora Artmed, 2011.
BRAUN, E. M.; DAVIS, R. D. O Dom da Dislexia. Rio de Janeiro: Rocco, 2004
WEISZ, Telma; SANCHEZ, Ana. O diálogo entre ensino e a aprendizagem. Editora Ática, 2011.
PAIN, Sara. Diagnóstico e Tratamento dos Problemas de Aprendizagem. Ed. Artes Médicas. Porto Alegre, 1992.
FREIRE, Paulo. Professora sim, tia não: cartas a quem ousa ensinar. Editora Olho d’água, 1994.
GLAT, Rosana; FERNANDES, Edicléa M. Da Educação Segregada à Educação Inclusiva: uma Breve Reflexão sobre os Paradigmas Educacionais
no Contexto da Educação Especial Brasileira. Rio de Janeiro, UERJ. Artigo publicado na Revista Inclusão nº 1, 2005, MEC/ SEESP.
UNESCO, 1994. Declaração de Salamanca. Disponível em: <http://portal.mec.gov.br/seesp/arquivos/pdf/salamanca.pdf> Acesso em: 15/05/2017.
COMUNIDADE APRENDER CRIANÇA. Cartilha da Inclusão Escolar: inclusão baseada em evidências científicas. Ed. Instituto Glia, 2014.
BRITISH DYSLEXIA ASSOCIATION, Dyslexia Style Guide. Disponível em <http://www.bdadyslexia.org.uk>. Acesso em: 15/05/2017.
ESTILL, Clelia A. Dislexia em sala de aula e as acomodações pedagógicas. Disponível em: <http://www.andislexia.org.br/ADislexiaAcomodacoes.pdf> Acesso em: 15/05/2017.
MCKENZIE, Jamie. How Teachers Learn Technology Best. The Educational Technology Journal. Vol 10 -No 6. 2001
SANDMAN-HURLEY, Kelli. What is dyslexia? TED-Ed Originals, 2013.
SALDANHA, Cláudia; ZAMPRONI, Eliete; BATISTA, Maria de Lourdes. Estilos de Aprendizagem. Governo do Paraná, 2016.
Disponível em: < http://www.gestaoescolar.diaadia.pr.gov.br/arquivos> Acesso em: 29/11/2017
Dunn, R. (2000). Learning styles: Theory, research, and practice. National Forum of Applied Educational Research Journal, 13, (1), 3-22.
JARDINE, Renata Savastano R. Métodos das boquinhas: alfabetização e reabilitação dos distúrbios da leitura e escrita. [S.L]: Casa do Psicólogo, 2001.

61. DEPOIMENTOS E ENTREVISTAS
Centro Apoio Psicopedagógico. Entrevista com fonoaudióloga Tatiane Souza de Almeida. Disponível em: < https://soundcloud.com/centro-psicopedag-gico> Acesso em: 15/05/2017.
Instituto ABCD. Entrevistas do Projeto Individualmente. São Paulo, 2012. Disponível em: <https://www.youtube.com/channel/UC3U4wd93nUU5kRtC89n7ZnQ> Acesso em: 15/05/2017.
Entrevistas com educadores. Neto, Alfero; Prado, Carlos; Schiavinato, Cláudia; Arlindo, Luiz; Oliveira Vera; Begeres, Victor; Marino, Valquiria. São Paulo, 2017.
REVISÃO BIBLIOGRÁFICA - DESIGN
NORMAN, Donald. O Design do Dia-a-dia. Editora Rocco, 1988.
RITH, Chanpory; DUBBERLY, Hugh. Why Horst W.J. Rittel Matters. Design Issues: Volume 22, N. 4. 2006
TREDER, Marcin. The Ultimate UX of: the Sing-Up Form. Disponível em: <https://designmodo.com/ux-sign-up-form/> Acesso em: 15/11/2017
VISCHECK. Teste de acessibilidade à pessoas daltônicas. Disponível em: <http://www.vischeck.com/>. Acesso em: 29/11/2017
WIkipedia. Definição de wireframe. Disponível em: <https://en.wikipedia.org/wiki/Website_wireframe>.. Acesso em: 29/11/2017
INICIATIVAS SIMILARES
DISLEXIA BRASIL. APRENDIZAGEM ON-LINE. Disponível em: <http://dislexiabrasil.com.br/> Acesso em: 15/05/2017.
INSTITUTO ABCD, 2016. Todos Entendem. Disponível em: <http://www.institutoabcd.org.br/todosentendem/> Acesso em: 15/03/2017
DISLEXCLUB. Disponível em: <http://www.dislexclub.com/> Acesso em: 25/05/2017.
NEUROSABER. Disponível em: <https://neurosaber.com.br/> Acesso em: 25/09/2017.
BENCHMARCKS E REFERÊNCIAS VISUAIS
DUOLINGO. Disponível em: < https://pt.duolingo.com/> Acesso em: 28/10/2017
COURSERA. Disponível em: <https://pt.coursera.org/> Acesso em: 28/10/2017
CODEACADEMY. Disponível em: <https://www.codecademy.com/pt> Acesso em: 19/10/2017
NAOMI WILKINSON. Disponível em: < http://naomiwilkinson.co.uk/> Acesso em: 15/10/2017
STUDIO FAGO. Book cover - Legoland. Fev 2016. Disponível em: <https://www.behance.net/gallery/34185881/Book-cover-Legoland> Acesso em: 28/10/2017
DESIGNER FOUNDER GUILD. Disponível em: < https://designerfund.com/dfg> Acesso em: 28/10/2017
BIBLIOGRAFIA

62. Sobre
O B RIGADA
; )