análise de ícones no contexto das interfaces gráficas digitais
DESCRIPTION
Apresentação de tese do TCC. Análise de ícones no contexto das interfaces gráficas digitais.TRANSCRIPT
![Page 1: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/1.jpg)
ANÁLISE DE ÍCONES NOCONTEXTO DAS INTERFACESGRÁFICAS DIGITAIS
TRABALHO DECONCLUSÃODE CURSO
MARLON LEMES DE ALMEIDAPROF. DR. CRISTIANO ALVES
DESIGN GRÁFICOSOROCABA / SP // 2011
UNIVERSIDADE DE SOROCABA
![Page 2: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/2.jpg)
• CRESCIMENTO E DESENVOLVIMENTO DAS INTERFACES
• DESIGN DIGITAL
• MELHORA A VIDA DAS PESSOAS
MOTIVAÇÃO
![Page 3: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/3.jpg)
ABOUT
• REVISÃO BIBLIOGRAFICA A RESPEITO DOS TERMOS E CONCEITOS QUE CERCAM A TERMINOLOGIA DO ÍCONE.
• AVALIAR O POTENCIAL SINTÁTICO E SEMÂNTICO DE ÍCONES INTERFACIAIS UTILIZANDO CONCEITOS BÁSICOS DA SINTAXE VISUALE DA SEMIÓTICA.
• COMO SE DEU O ÍCONE E SUAS ATRIBUIÇÕES ATÉ A INTERFACE GRÁFICA?
• QUAL A CAPACIDADE DE REPRESENTAÇÃO DOS ÍCONES NAS INTERFACES GRÁFICAS?
QUESTÕES EOBJETIVOS
![Page 4: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/4.jpg)
REPRESENTAÇÕESGRÁFICAS
• HISTÓRIA DA REPRESENTACAO GRAFICA
• USO DA REPRESENTAÇÃO GRAFICA
• EVOLUÇÃO DA REPRESENTAÇÃO GRAFICA
![Page 5: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/5.jpg)
ÍCONE IMAGEMEIKON
ABOUTREPRESENTAÇÕESGRÁFICAS
![Page 6: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/6.jpg)
ABOUT
NA INTERFACE, O TERMO ÍCONE É EMPREGADO PARA TODA PEQUENA IMAGEM DESTINADA A SUBSTITUIR
UMA LINHA DE COMANDO OU ENCAMINHAR UMA SEQÜÊNCIA DE PROCEDIMENTOS.
ÍCONESINTERFACIAIS
CLI (INTERFACES DE LINHA DE COMANDO)
GUI (INTERFACE GRÁFICA DO USUÁRIO)
![Page 7: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/7.jpg)
METÁFORASDE INTERFACE
TRANSPOSIÇÃO DAS IMAGENS DO MUNDO REAL PARA O VIRTUAL.
![Page 8: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/8.jpg)
• PODER DE SINTESE, RÁPIDA DECODIFICAÇÃO;
• COMPOSTO POR FORMAS SIMPLES, CONSISTENTES E SIGNIFICATIVAS;
• NA INTERFACE SÃO PONTOS DE INTERAÇÃO COM O USUÁRIO;
• SÃO FAMILIARES TANTO QUANTO AS PALAVRAS, MAS TRABALHAM MAIS EFICIENTEMENTE.
PROPRIEDADES
“ÍCONES TRANSMITEM SEU SIGNIFICADO RAPIDAMENTE E COM ISSO NÃO TEMOS DE LÊ-LOS ANALISÁ-LOS OU TRADUZI-LOS”
(HORTON, 1994)
![Page 9: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/9.jpg)
SEMIÓTICA
O APROFUNDAMENTO NESTE CAMPO TORNOU-SE DE GRANDE INTERESSE, POIS FORNECE
EMBASAMENTO SOBRE OS PROCESSOS DE INTERPRETAÇÃO, AJUDANDO A ENTENDER A MENTE
DOS USUÁRIOS E CONSEQUENTEMENTE A CONSEGUIR UMA MELHOR EFICÁCIA NA
INTERAÇÃO EM UM PROJETO DE INTERFACES GRÁFICAS.
CHARLES SANDERS PEIRCE
![Page 10: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/10.jpg)
“O SIGNO É UMA COISA QUE REPRESENTA UMA OUTRA COISA: SEU OBJETO. ELE SÓ PODE FUNCIONAR
COMO SIGNO SE CARREGAR ESSE PODER DE REPRESENTAR, SUBSTITUIR UMA OUTRA COISA
DIFERENTE DELE.” (SANTAELLA, 2003, P.20), ALÉM DE PRODUZIR INTERPRETANTES DE ACORDO COM
O REPERTORIO DO OBSERVADOR.
SIGNO
1. Signo ou representamem
2. Objeto
Efeito que esta representaçãoprovaca na mente potêncial.
3. Interpretante
SIGNO
![Page 11: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/11.jpg)
TRICOTOMIAS DE PEIRCE
TRICOTOMIAS
A ESTRUTURA DO SIGNO DESDOBRA-SE NA CLASSIFICAÇÃO DOS SIGNOS, QUE SÃO TRÊS DIFERENTES
TIPOS DE RELAÇÕES DO SIGNO: O SIGNO EM RELAÇÃO A SI MESMO, O SIGNO EM RELAÇÃO AO SEU
OBJETO, E O SIGNO EM RELAÇÃO AO SEU INTERPRETANTE.
![Page 12: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/12.jpg)
• OS APLICATIVOS ANALISADOS TRABALHAM COM A CAPTURA EDIÇÃO DE IMAGENS
• EVOLUÇÃO NO PROCESSO FOTOGRAFICO;
• POPULARIZAÇÃO DA FOTOGRAFIA / BANALIZAÇÃO DO PROFISSIONAL;
• O CASO DAS CAMERAS POLAROID.
IPHONE E IPAD EXPOSIÇÃO FOTOGRAFICA
CONTEXTUALIZAÇÃODOS OBJETOSDA ANÁLISE
![Page 13: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/13.jpg)
• RELAÇÃO COM A UTILIDADE
• FORMAS ARREDONDADAS
• LARGURA E ALTURA LIMITAS
• IMAGENS VETORIAIS
TELA DO COM APLICTIVOS INSTALADOS IPAD
ESPECIFICAÇÕES GERAIS DOS ÍCONES
![Page 14: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/14.jpg)
OS TRÊS ÍCONES ANALISADOS SÃO DENOMINADOSPHOTO EFFECTS HD, FILTERSTORM E INSTAGRAM,COMO PODEMOS OBSERVAR ABAIXO.
ANÁLISE DOS ÍCONES
![Page 15: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/15.jpg)
ANÁLISES:PHOTO EFFECTS HD
ANÁLISA-SE AQUI AS QUALIDADES DO
SIGNO, NO CASO:
• CORES
• FORMAS
• CONTRASTES
• PROFUNDIDADE
PRIMEIRIDADE
![Page 16: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/16.jpg)
ANÁLISES:PHOTO EFFECTS HD
ANÁLISA-SE AQUI AS QUE O REFERÊN-
CIAS QUE O SIGNO FAZ COM O OBJETO
REAL, O EXISTE. NESTE CASO:
• CAMERA FOTOGRÁFICA
• STUDIO FOTOGRÁFICO
SECUNDIDADE
![Page 17: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/17.jpg)
ANÁLISES:PHOTO EFFECTS HD
ANÁLISA-SE AQUI ASPECTOS DE LEI, DE
GENERALIZAÇÃO, NESTE CASO:
• A INSCRIÇÃO HD
• A IMAGEM DA CAMERA FOTOGRÁFICA
TERCERIDADE
![Page 18: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/18.jpg)
• GRADAÇÃO DE CORES
• FORMAS
• SEMELHANÇAS
• LUMINOSIDADE
• BRILHO
• PROFUNDIDADE
• INSCRIÇÕES POUCO DESTACADAS
PRIMEIRIDADEANÁLISES:FILTERSTORM
![Page 19: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/19.jpg)
• LENTE FOTOGRÁFICA
• FILTRO FOTOGRÁFICO
• LENTE DE AUMENTO
• VIDRO OU ESPELHO
• TAMPA
• BOTÃO
SECUNDIDADEANÁLISES:FILTERSTORM
![Page 20: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/20.jpg)
ANÁLISES:FILTERSTORM
• LENTE FOTOGRÁFICA
• INDICAÇÃO DE MODELO DE FILTRO
• FILTRO FOCAL
TERCERIDADE
![Page 21: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/21.jpg)
• FORMAS
• LINHAS
• CORES
• RELEVOS
• SOMBREAMENTOS
• PROFUNDIDADE
• SIMPLICIDADE
• LUMINOSIDADE
• CONTRASTE
• TEXTURA
• EQUILIBRIO
PRIMEIRIDADEANÁLISES:INSTAGRAM
![Page 22: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/22.jpg)
• CAMERA FOTOGRAFICA COMUM
• CAMERA FOTOGRAFICA POLAROID
SECUNDIDADEANÁLISES:INSTAGRAM
![Page 23: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/23.jpg)
• INSCRIÇÃO “INSTA”
• A IMAGEM DA CAMERA
ANÁLISES:INSTAGRAM TERCERIDADE
![Page 24: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/24.jpg)
CONCLUSÃO GERAL DASANÁLISES
- O ÍCONE INTERFACIAL DO APLICATIVO FILTERSTORM NÃO POSSUI BOA REPRESENTIVIDADE, POIS É REP-
RESENTADO POR UM SIGNO ICÔNICO, ALÉM DE LEGI-SIGNOS QUE NECESSITAM DE MUITO REPERTORIO.
- O ÍCONE INTERFACIAL DO APLICATIVO PHOTO EFFECTS HD TEM RELAÇÃO DIRETA COM AS PRÓPRIAS
CARACTERÍSTICAS DOS OBJETO GERADOR, CUMPRINDO A FUNÇÃO REAL DO ÍCONE INTERFACIAL, SEM
RUÍDO ALGUM NA MENSAGEM.
- O ÍCONE INTERFACIAL DO APLICATIVO INSTAGRAM APESAR DE TER MUITA CARGA SIMBÓLICA, APRE-
SENTA A MELHOR REPRESENTATIVIDADE E INTERPRETAÇÃO. TANTO PELA ABSTRAÇÃO GRÁFICA DO DE-
SENHO DA CÂMERA POLAROID, QUANTO PELA METÁFORA QUE É CRIADO A PARTIR DESTE MESMO DE-
SENHO JUNTO AO SEU FUNCIONAMENTO INSTANTÂNEO DO PROCESSO FOTOGRÁFICO.
![Page 25: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/25.jpg)
ABOUTCONSIDERAÇÕESFINAIS
• COMO SE DEU O ÍCONE E SUAS ATRIBUIÇÕES ATÉ A INTERFACE GRÁFICA?
- ÍCONES SÃO ABSTRAÇÕES DE UMA IDEIA OU CONCEITO OU AÇÃO, INDEPENDENTE DO CONTEXTO: SEJA RELIGIOSO, PICTOGRAFICO, COMPUTACIONAL OU SEMIÓTICO. ALÉM DE QUE NO CONTEXTO DA SEMIÓTICA, OS ÍCONES INTERFACIAIS ESTÃO NO LUGAR DO OBJETO DINÂMICO, PORTANTO OCUPAM A SEGUNDA TRICOTOMIA PEIRCEANA, QUE FAZ RELAÇÃO COM O OBJETO.
• QUAL A CAPACIDADE DE REPRESENTAÇÃO DOS ÍCONES NAS INTERFACES GRÁFICAS?
- AS ANALISES MOSTRAM QUE CADA ICONE OCUPA REPRESENTA UMA CATEGORIA DO SIGNO DENTRO DA TRICOTOMIA PEIRCEANA, SENDO QUE O MELHOR ABSTRAI O CONCEITO E IDEIA TANTO EM RELAÇÃO AO ÍCONE, QUANTO AO SEU FUNCIONAMENTO É O INSTAGRAM. MAS PERCEBEMOS QUE NENHUM DELES INDICA A AÇÃO DE MANIPUAÇÃO DAS IMAGENS QUE ESTES APLICATIVOS TAMBÉM OFERECEM.
![Page 26: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/26.jpg)
ABOUT
• COMO SE DEU O ÍCONE E SUAS ATRIBUIÇÕES ATÉ A INTERFACE GRÁFICA?
- ÍCONES SÃO ABSTRAÇÕES DE UMA IDEIA OU CONCEITO OU AÇÃO, INDEPENDENTE DO CONTEXTO: SEJA RELIGIOSO, PICTOGRAFICO, COMPUTACIONAL OU SEMIÓTICO. ALÉM DE QUE NO CONTEXTO DA SEMIÓTICA, OS ÍCONES INTERFACIAIS ESTÃO NO LUGAR DO OBJETO DINÂMICO, PORTANTO OCUPAM A SEGUNDA TRICOTOMIA PEIRCEANA, QUE FAZ RELAÇÃO COM O OBJETO.
• QUAL A CAPACIDADE DE REPRESENTAÇÃO DOS ÍCONES NAS INTERFACES GRÁFICAS?
- AS ANALISES MOSTRAM QUE CADA ICONE OCUPA REPRESENTA UMA CATEGORIA DO SIGNO DENTRO DA TRICOTOMIA PEIRCEANA, SENDO QUE O MELHOR ABSTRAI O CONCEITO E IDEIA TANTO EM RELAÇÃO AO ÍCONE, QUANTO AO SEU FUNCIONAMENTO É O INSTAGRAM. MAS PERCEBEMOS QUE NENHUM DELES INDICA A AÇÃO DE MANIPUAÇÃO DAS IMAGENS QUE ESTES APLICATIVOS TAMBÉM OFERECEM.
CONSIDERAÇÕESFINAIS
![Page 27: Análise de ícones no contexto das interfaces gráficas digitais](https://reader034.vdocuments.pub/reader034/viewer/2022051313/547db701b4af9ff3458b4595/html5/thumbnails/27.jpg)
OBRIGADO! ;)