Principios de design -PRINCIPLES OF GRAPHIC DESIGN GAME by Rubem de Santana

“Devemos buscar o alfabetismo visual em muitos lugares e de muitas maneiras, nos métodos de treinamento de artistas, na formação técnica de artesãos, na teoria psicológica, na natureza e no funcionamento fisiológico do próprio organismo humano.” Donis A. Dondis (1991)

Trabalho de Conclusão de Curso, apresentado ao Programa de Pós-Graduação Stricto Sensu Gestão e Tecnologias Aplicadas à Educação (GESTEC) da Universidade do Estado da Bahia (UNEB) como requisito à obtenção do �tulo de Mestre. Linha de Pesquisa: Área de Concentração 2. Processos Tecnológicos e Redes Sociais. Mestrando: Rubem de Santana Filho Orientadora: Profa. Drª. Josemeire Machado Dias

SALVADOR-BA 2018

SANTANA FILHO, RUBEM DE S232 K-Viz-Jogo Educacional Para Apoio Ao Processo De Construção Do Co nhecimento Em Planejamento Gráfico / Rubem de Santana Filho. Salvador: RSF, 2018. 50 p; il.

Orientador: JOSEMEIRE MACHADO DIAS . Dissertação (Mestrado - GESTEC) -- Universidade Do Estado da Bahia(UNEB), Bahia, EDUCAÇÃO, 2018. ISBN 1.Jogos 2. Design Gráfico 3. Computação gráfica. II. FILHO, RUBEM DE. I. JOSEMEIRE MACHADO DIAS. II. Título. I.Título CDD –

K-Viz JOGO EDUCACIONAL PARA APOIO AO PROCESSO DE CONSTRUÇÃO DO CONHECIMENTO EM PLANEJAMENTO GRÁFICO O K-Viz é um produto educacional e tecnológico direcionado a um perfil de aluno, iniciante em design gráfico, que ainda não possui um conhecimento formal das regras, técnicas e conceitos em design, tendo como consequência o desenvolvimento de peças gráficas de caracterís�ca visual poluída ou sem um planejamento ou organização dos elementos. Para solucionar esta questão seria importante a inserção, no lócus da pesquisa, a aprendizagem dos conceitos ligados à planejamento visual para potencializar os conhecimentos já existentes da ferramenta e adequá-los a este público-alvo através da inserção de jogos digitais como ponto inicial da situação de aprendizagem e que possa gerar uma aprendizagem significa�va ou, em outras palavras, que possa desenvolver algumas competências rela�vas à diagramação em design gráfico. A pesquisa foi realizada na Universidade do Estado da Bahia - UNEB, especificamente com os alunos do curso de Design. Para esta pesquisa, especificamente, foi desenvolvido um produto que pode ser classificado como o núcleo principal do jogo, que será a base para aplicações futuras de um jogo digital. Os experimentos iniciais foram feitos através de protó�pos manuais para aplicação em sala de aula com o obje�vo de desenvolver as competências em planejamento visual gráfico. O núcleo principal, criado a par�r dos experimentos iniciais, pode evoluir para o desenvolvimento de um jogo digital mais complexo envolvendo o ensino de regras básicas de programação visual, dessa forma, expandindo o seu foco para além da UNEB. O projeto faz uma ar�culação com o K-Lab através da busca de um aprofundamento de questões relacionadas ao design de jogos, a aplicação, o desenvolvimento e o intercâmbio deste referencial teórico no espaço integrado do laboratório, ampliando e incen�vando a conscien�zação das contribuições do design, especificamente na criação de jogos ou gamedesign. Palavras-chave: design gráfico, planejamento visual, Gestalt, jogo educacional.

Introdução Os Princípios de Design tomaram como base as leis da Gestalt, com um rebatimento focado na construção das competências do aluno no processo de diagramação em Design Gráfico. O jogo pode ser desenvolvido em 3 fases, assim divididas: 1. Contextualização: o professor informa aos alunos sobre a atividade que eles irão executar para o aprendizado das regras de design. Após isso pede que os alunos escolham uma peça gráfica que eles acharam interessante (digital ou analógica), e questiona o motivo. 2. Diagnóstico: Jogo da Unificação. 3. Aplicação dos princípios mais utilizados em diagramação: Contraste, Alinhamento, Proximidade, Repetição e Fechamento. 4. Na conclusão dos minijogos, pode ser aplicada uma avaliação para verificação de aprendizado, como por exemplo, a criação de uma peça gráfica utilizando os princípios estudados. Ao final do processo, o professor faz uma síntese dos princípios conceituando a técnica de diagramação. Para comprovação destes princípios durante a aula, podem ser utilizadas vários peças gráficas (revistas, jornais, livros, etc.) tanto do Brasil quanto do exterior, pois os mesmos, com frequência, possuem o idêntico padrão visual.

PRINCÍPIO DA UNIFICAÇÃO

PRINCÍPIO DA PROXIMIDADE

PRINCÍPIO DO CONTRASTE

PRINCÍPIO DA REPETIÇÃO

PRINCÍPIO DO ALINHAMENTO

PRINCÍPIO DO FECHAMENTO

PRINCÍPIO DA UNIFICAÇÃO

EXPOSIÇÃO Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Excepteur sint occaecat cupidatat non proident, sunt in culpa.

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Pós-graduação/EAD Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

PRINCÍPIO DA UNIFICAÇÃO

APRESENTAÇÃO DO JOGO K-VIZ OU FASE DE DIAGNÓSTICO Todos os itens de uma composição visual devem ser vistos como um todo harmônico e equilibrado em suas inter-relaçãos, mesmo que a composição tenha um estilo visual abstrato ou difuso. A unificação se verifica quando os princípios de harmonia e equilíbrio visual e, sobretudo, a coerência do estilo formal das partes ou do todo estão num objeto ou numa composição (GOMES FILHO, 2008). Neste jogo, o aluno deve manipular os elementos da composição gráfica de um cartaz para que escolha a melhor diagramação segundo a sua experiência pessoal.

Jogo 01

EXPOSIÇÃO

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

Pós-graduação/EAD

Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

PRINCÍPIO DO CONTRASTE

EXPOSIÇÃO Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Pós-graduação/EAD Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

PRINCÍPIO DO CONTRASTE Se dois itens não forem exatamente os mesmos, diferencie-os completamente. O propósito do contraste é criar interesse sobre uma página. O contraste deve ser feito de maneira forte, ou seja, evite contrastar linhas com espessuras muito próximas ou cores com matiz e luminosidade semelhantes (WILLIAMS, 1994). Nesta etapa do jogo, o aluno deve escolher os elementos de contraste que serão sugeridos dentre várias opções para que se escolha aquele de maior contraste visual.

Jogo 02

SOLUÇÃO:

JOGO: CONTRASTE DE COR

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIA

DATA: 19/06/2018

SOLUÇÃO:

JOGO: CONTRASTE DE COR

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIA

DATA: 19/06/2018

SOLUÇÃO:

JOGO: CONTRASTE DE COR

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIA

DATA: 19/06/2018

Rosangela

Flores

Fabiola FERNANDO

CASTANHARE

TERRA Rosália

VENEZIA SOLUÇÃO:

Flores

Rosangela JOGO: CONTRASTE TIPOGRÁFICO

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIA

DATA: 19/06/2018

Fabiola CASTANHARE

Rosália

TERRA FERNANDO

VENEZIA

PRINCÍPIO DO ALIMHAMENTO

PRINCÍPIO DO ALIMHAMENTO Cada item deve ter uma conexão visual com algo na página. Mesmo quando os elementos estiverem fisicamente separados uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando-os, tanto em relação aos seus olhos quanto a sua mente (WILLIAMS, 1994). Neste jogo o aluno não poderá ultrapassar a margem especificada no jogo e tentará alinhar o maior número possível de elementos em um determinado espaço de tempo. É importante que o aluno perceba a importância das margens e as diversas possibilidades de alinhamento (esquerda, direita e centro).

EXPOSIÇÃO Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Pós-graduação/EAD Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

Jogo 03 Jogo do ALINHAMENTO ou da CONTINUIDADE Princípio de alinhamento ou Medição aproximada u�lizando apenas a visão.

Alinhamento manual na mesa: verificar a posição de dois objetos (um fixo e outro móvel) nas extremidades de uma mesa ou piso. Ao finalizar o alinhamento o professor faz a medição com uma fita métrica observando a precisão de alinhamento em relação a uma referência(uma parede ou papel, por exemplo). A equipe que conseguir maior precisão de alinhamento recebe um ponto. Ao finalizar o jogo o professor ques�ona aos alunos se é possível correlacionar o jogo a alguma regra em design gráfico e pede para que eles deem um nome a esta regra. Depois deste ques�onamento, o professor faz uma exposição a respeito do princípio de alinhamento em design gráfico e de que este conceito pode ser transportado para as formas ou objetos gráficos, transmi�ndo equilíbrio ou desequilíbrio a par�r de vários exemplos. Material: cartões colorido e texto impresso ou outro material e trena. Tempo para solução do problema (cronometrado): 1 min.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accum.

SUBTĂ?TULO-01

5 cm

TĂ?TULO-01 JOGO: ALINHAMENTO

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIA

DATA: 19/06/2018

PRINCÍPIO DA PROXIMIDADE

EXPOSIÇÃO Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

PRINCÍPIO DA PROXIMIDADE Itens relacionados entre si devem ser agrupados. Neste jogo os itens ou conjunto de informações como texto, fotos, logotipo devem ficar próximos um dos outros, para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação (WILLIAMS, 1994). O aluno deve mover os elementos relacionados no menor espaço de tempo, caso a relação não esteja correta, o jogador perde pontos.

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Pós-graduação/EAD Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

Jogo 04 Jogo da PROXIMIDADE: Princípio da proximidade com associações

As equipes irão agrupar o maior número de objetos que tenha uma mesma semân�ca em associações com imagens e textos. Os símbolos são embaralhados e a equipe que conseguir maior precisão de agrupamento recebe um ponto. Ao finalizar o jogo o professor ques�ona aos alunos se é possível correlacionar o jogo a alguma regra em design gráfico e pede para que eles deem um nome a esta regra. Depois deste ques�onamento, o professor faz uma exposição a respeito do princípio da proximidade em design gráfico como uma associação dos elementos que tenha alguma relação visual ou semân�ca, a par�r de vários exemplos. Material: 36 cartões de papel cortados no formato quadrado com os símbolos e textos impressos. Tempo para solução do problema (cronometrado): 5 min.

SOLUÇÃO: OM

CURVA LINHA

WIFI

JOGO: PROXIMIDADE

HUNAB KU

CURVA TORII STEVE APPLE USB CND

ALVES

USB

HUNAB KU APPLE

CI DATA: 19/06/2018

CND GESTEC/UNEB/BAHIA

WIFI MESTRANDO: RUBEM DE SANTANA FILHO

STEVE

OM TORII LINHA RA

PRINCÍPIO DA REPETIÇÃO

EXPOSIÇÃO Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Pós-graduação/EAD Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

PRINCÍPIO DA REPETIÇÃO Alguns aspectos do design deve se repetir no material inteiro. O objetivo da repetição é de formar uma unidade ou identidade visual em peças de uma única página e principalmente em documentos com muitas páginas, ela unifica e fortalece o material, agrupando partes que seriam separadas (WILLIAMS, 1994). O aluno terá que identificar o elemento que está com uma maior frequência de repetição dentro de uma sequência temporal e fazer a seleção do elemento à direita.

Jogo 05 Jogo da REPETIÇÃO ou da SEMELHANÇA: Princípio da repe�ção através de um quebra-cabeça

As equipes irão montar um quebra-cabeça manual até achar um padrão que se repete. A equipe que conseguir desenvolver um padrão com a maior parte dos cartões ganha um ponto. Ao finalizar o jogo o professor ques�ona aos alunos se é possível correlacionar o jogo a alguma regra em design gráfico e pede para que eles deem um nome a esta regra. Depois deste ques�onamento, o professor faz uma exposição a respeito do princípio da repe�ção em design gráfico, como uma forma de memorizar alguns aspectos da diagramação ou dar ênfase a um determinado aspecto do design, expondo vários exemplos. Material: 88 cartões de papel colorido cortados no formato triangular. Tempo para solução do problema (cronometrado): 5 min.

JOGO: REPETIÇÃO

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIA

DATA: 19/06/2018

PRINCÍPIO DO FECHAMENTO

EXPOSIÇÃO Pós-graduação/EAD SITUAÇÃO DE APRENDIZAGEM Recepção Principal, Casa do Comécio 03 - 08 - 2017 às 16h Salvador - Bahia

PRINCÍPIO DO FECHAMENTO

Dois ou mais itens podem concorrer para a formação de uma “sensação de fechamento visual”.

O fator de fechamento estabelece ou concorre para a formação de unidades. As forças de organização direngen-se espontaneamente para uma ordem espacial que tende à formação de unidades em todos fechados (GOMES FILHO, 2008). Nesta etapa do jogo, o aluno deverá montar os elementos de uma ilustração e logotipo identificando os itens de fechamento visual .

AGRUPAMENTOS DE ESCOLAS

WINDOWS

Pós-graduação/EAD Av. Tancredo Neves - 1022 - Casa do Comécio Telefone (71) 3110-2012

Jogo 06

SOLUÇÃO:

ZIOM

JOGO: FECHAMENTO

MESTRANDO: RUBEM DE SANTANA FILHO

GESTEC/UNEB/BAHIAD

ATA: 19/06/2018

REFERÊNCIAS ARNHEIM, Rudolf. Arte & Percepção Visual: Uma Psicologia da Visão Criadora. 6.ª ed. São Paulo: Ed. Pioneira, 2005. ADIAS, Josemeire M. Procedimentos Analíticos para Avaliação de Jogos Educacionais Digitais: Uma Experiência Baseada no Desenvolvimento do Kimera. UNEB-Salvador-BA, 2015. DONDIS, Donis A. Sintaxe da Linguagem Visual. São Paulo: Ed. Martins Fontes, 1991. GOMES FILHO, João. Gestalt do Objeto Sistema de Leitura Visual da Forma. Ed. Escrituras: São Paulo, 2004. KÜLLER, José Antônio; RODRIGO, Natalia de Fátima. Metodologia de Desenvolvimento de Competências. Rio de Janeiro: SENAC Nacional, 2013. WILLIAMS, Robin. Design Para Quem Não É Designer: Noções Básicas e Planejamento Visual. São Paulo: Ed. Callis, 1995.

Contato: RUBEM DE SANTANA FILHO e-mail: rubemsan@gmail.com