Sites de e-commerce: o design visual e a interconexão com a arte



Documentos relacionados
Design de interface gráfica: narrativas digitais e a interconexão com a arte 1

Formação: o Bacharel em Sistemas de Informações (SI); o MBA em Tecnologia da Informação e Comunicação (TIC).

Conectando sonhos e negócios.

Fundamentos de design

Fundamentos de design

Manual do Painel Administrativo

10 DICAS DE TECNOLOGIA PARA AUMENTAR SUA PRODUTIVIDADE NO TRABALHO

SUA ESCOLA, NOSSA ESCOLA PROGRAMA SÍNTESE: NOVAS TECNOLOGIAS EM SALA DE AULA

1. Quem somos nós? A AGI Soluções nasceu em Belo Horizonte (BH), com a simples missão de entregar serviços de TI de forma rápida e com alta qualidade.

Apresentação. Oque é Marca. Multimedia Branding Designer

UNIVERSIDADE DE SÃO PAULO E S C O L A D E A R T E S, C I Ê N C I A S E H U M A N I D A D E

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO

Oficina de Multimédia B. ESEQ 12º i 2009/2010

Introdução à Computação

Introdução ao Aplicativo de Programação LEGO MINDSTORMS Education EV3

Política de Comunicação do Serviço Federal de Processamento de Dados (Serpro) - PCS

TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB

Extração de Requisitos

O olhar do professor das séries iniciais sobre o trabalho com situações problemas em sala de aula

Design Web - Percepção. Elisa Maria Pivetta

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna

Forneça a próxima onda de inovações empresariais com o Open Network Environment

PROCESSO SELETIVO PARA PROFESSORES SUBSTITUTOS EDITAL

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Introdução. Introdução

OBJETIVO Reestruturação de dois laboratórios interdisciplinares de formação de educadores

DIMENSIONANDO PROJETOS DE WEB-ENABLING. Uma aplicação da Análise de Pontos de Função. Dimensionando projetos de Web- Enabling

1. NÍVEL CONVENCIONAL DE MÁQUINA

Processos Técnicos - Aulas 4 e 5

Promover o cartaz como uma das mais importantes formas de comunicação e expressão.

DWEB. Design para Web. Diagramação Web. Curso Superior de Tecnologia em Design Gráfico

Sistemas de Informação I

Midiatização: submissão de outras instituições à lógica da mídia.

TÍTULO: ALUNOS DE MEDICINA CAPACITAM AGENTES COMUNITÁRIOS NO OBAS CATEGORIA: CONCLUÍDO ÁREA: CIÊNCIAS BIOLÓGICAS E SAÚDE

Pesquisa com Professores de Escolas e com Alunos da Graduação em Matemática

Jornalismo Interativo

Resenha. Fernanda Gabriela Gadelha ROMERO 1

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

TOUCH SCREEN: O DESENVOLVIMENTO INFANTIL NA PONTA DOS DEDINHOS Aluna: Ana Carolina da Silva Pereira Orientadora: Zena Winona Eisenberg

Empresa como Sistema e seus Subsistemas. Professora Cintia Caetano

Disciplina: Programas de Edição de Textos Professora: Érica Barcelos

Metadados. 1. Introdução. 2. O que são Metadados? 3. O Valor dos Metadados

PROJETO POLÍTICO PEDAGÓGICO: ELABORAÇÃO E UTILIZAÇÃO DE PROJETOS PEDAGÓGICOS NO PROCESSO DE ENSINO APRENDIZAGEM

PRINCÍPIOS DE INFORMÁTICA PRÁTICA OBJETIVO 2. BASE TEÓRICA. 2.1 Criando Mapas no Excel. 2.2 Utilizando o Mapa

OS CONHECIMENTOS DE ACADÊMICOS DE EDUCAÇÃO FÍSICA E SUA IMPLICAÇÃO PARA A PRÁTICA DOCENTE

Análise de Dados do Financeiro

Ajuda ao SciEn-Produção O Artigo Científico da Pesquisa Experimental

APRESENTAÇÃO COMERCIAL.

Caminhos para Análises de Políticas de Saúde

3 - Projeto de Site:


FORMAÇÃO DOCENTE: ASPECTOS PESSOAIS, PROFISSIONAIS E INSTITUCIONAIS

A Educação Bilíngüe. » Objetivo do modelo bilíngüe, segundo Skliar:

PRÓ-MATATEMÁTICA NA FORMAÇÃO DE PROFESSORES

Sistemas Distribuídos

JOOPP O construtor de sites mais rápido do mundo!

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

ANÁLISE E DESENVOLVIMENTO DE SISTEMAS TURMA º PERÍODO - 7º MÓDULO AVALIAÇÃO A4 DATA 22/10/2009 ENGENHARIA DE USABILIDADE

ENGENHARIA DE SOFTWARE I

FACULDADE DE ADMINISTRAÇÃO E NEGÓCIOS - FAN CEUNSP SALTO /SP CURSO DE TECNOLOGIA EM MARKETING TRABALHO INTERDISCIPLINAR

AS NOVAS DIRETRIZES PARA O ENSINO MÉDIO E SUA RELAÇÃO COM O CURRÍCULO E COM O ENEM

Resumo Aula-tema 01: A literatura infantil: abertura para a formação de uma nova mentalidade

Sumário. Computação Gráfica Illustrator

EDUCAÇÃO E PROGRESSO: A EVOLUÇÃO DO ESPAÇO FÍSICO DA ESCOLA ESTADUAL ELOY PEREIRA NAS COMEMORAÇÕES DO SEU JUBILEU

EDUCAÇÃO INFANTIL PÓS-GRADUAÇÃO DESAFIO PROFISSIONAL Módulo C

Referências internas são os artefatos usados para ajudar na elaboração do PT tais como:

A EXPERIÊNCIA PIONEIRA DO LABORATÓRIO/NÚCLEO DE ARTE ELETRÔNICA

Introdução a listas - Windows SharePoint Services - Microsoft Office Online

DESENVOLVIMENTO DE INTERFACE WEB MULTIUSUÁRIO PARA SISTEMA DE GERAÇÃO AUTOMÁTICA DE QUADROS DE HORÁRIOS ESCOLARES. Trabalho de Graduação

Mídias sociais como apoio aos negócios B2C

Chamada de Participação V Competição de Avaliação - IHC 2012

PROJETO INFORMÁTICA NA ESCOLA

A IMPORTÂNCIA DA GESTÃO DE CUSTOS NA ELABORAÇÃO DO PREÇO DE VENDA

1.3. Planejamento: concepções

Projeto Pedagógico Institucional PPI FESPSP FUNDAÇÃO ESCOLA DE SOCIOLOGIA E POLÍTICA DE SÃO PAULO PROJETO PEDAGÓGICO INSTITUCIONAL PPI

Uma empresa que já atua há tanto tempo no mercado de maneira tão sólida e vitoriosa precisa, através dos tempos, portar-se institucionalmente de um

Curso de Design Linguagem Visual. Luciano Pedroza

CURSO: LICENCIATURA DA MATEMÁTICA DISCIPLINA: PRÁTICA DE ENSINO 4

Marcello Chamusca Márcia Carvalhal. Públicos Híbridos em Relações Públicas Marcello Chamusca Márcia Carvalhal

PROCESSO DE DESENVOLVIMENTO DE SOFTWARE. Modelos de Processo de Desenvolvimento de Software

Semântica para Sharepoint. Busca semântica utilizando ontologias

Lidar com números e estatísticas não é fácil. Reunir esses números numa apresentação pode ser ainda mais complicado.

qwertyuiopasdfghjklzxcvbnmqwertyuiopa sdfghjklzxcvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbnmqwertyui LITERACIAS

Distribuidor de Mobilidade GUIA OUTSOURCING

Estruturando o modelo de RH: da criação da estratégia de RH ao diagnóstico de sua efetividade

A EDUCAÇÃO PARA A EMANCIPAÇÃO NA CONTEMPORANEIDADE: UM DIÁLOGO NAS VOZES DE ADORNO, KANT E MÉSZÁROS

Interface Homem-Computador

Estado da Arte: Diálogos entre a Educação Física e a Psicologia

Módulo 4: Gerenciamento de Dados

DESENVOLVIMENTO DE CONTEÚDO EDUCACIONAL CENTRADO NO USUÁRIO BASEADO NA INTERNET APLICADO EM PROGRAMA DE EDUCAÇÃO A DISTÂNCIA

Roteiro de Aplicação da Economia Criativa e Inovação como critérios na FETEPS

Procurando o novo? Pense Diferente

A IMPORTÂNCIA DAS DISCIPLINAS DE MATEMÁTICA E FÍSICA NO ENEM: PERCEPÇÃO DOS ALUNOS DO CURSO PRÉ- UNIVERSITÁRIO DA UFPB LITORAL NORTE

As Tecnologias de Informação e Comunicação para Ensinar na Era do Conhecimento

Colégio Cenecista Dr. José Ferreira

MUDANÇAS NA ISO 9001: A VERSÃO 2015

OBJETOS DE APRENDIZAGEM EM EDUCAÇÃO AMBIENTAL: CONHEÇA O AMBIENTE ATRAVÉS DO WIKI Rosane Aragón de Nevado 1 ; Janaína Oppermann 2

Identidade Digital Padrão de Governo

E-books. Guia para Facebook Ads. Sebrae

Transcrição:

Sites de e-commerce: o design visual e a interconexão com a arte Marina Jugue Chinem 1 Universidade Metodista de São Paulo (UMESP) Universidade Municipal de São Caetano do Sul (USCS) Resumo No artigo estuda-se o design dos sites de compras da Netshoes e Americanas.com. O objetivo é compreender como as referências artísticas influenciam e modificam as estéticas das interfaces gráficas no ambiente digital, investigar de que forma a arte contemporânea redesenha novas estéticas visuais na web. Como se rompem os limites da arte e da comunicação, onde as fronteiras se tornam cada vez mais tênues. O artigo compara o desenvolvimento da composição gráfica do meio impresso com o digital a partir do formato de página, a área de texto, tipografia e especificamente o grid 2. Observa-se que trabalhos de alguns designers nos projetos para meio digital mantém os fundamentos da composição tipográfica do meio impresso, mas busca estruturar layouts mais dinâmicos e flexíveis, garantindo adaptação à variedade de formatos. Palavras-chave: Design Digital, Design Visual, Grid, Interface Gráfica Introdução A revolução tecnológica se intensificou na segunda metade do século XX, o que alterou a percepção visual humana, pois se passou a conviver em meio a máquinas e a se relacionar por meio delas. Dessa forma, o homem foi obrigado a se adaptar a esse convívio e também às novas concepções estéticas. Atualmente, é possível interagir em tempo real com dispositivos tecnológicos e reconhecer signos que antes não existiam. A arte no contexto cibercultural leva ao surgimento de novos conceitos e questionamentos e, a partir do momento em que o espectador passa a interagir com a obra, ele a transforma, ou seja, adiciona ali sua própria contribuição à criação dela. O processo de hibridização, que começou entre as linguagens artísticas e os meios de comunicação, 1 Docente do curso de Publicidade e Propaganda da Faculdade de Comunicação da Universidade Metodista de São Paulo - UMESP (SBC-SP) e da Escola de Comunicação da Universidade Municipal de São Caetano do Sul USCS (SCS-SP). Doutoranda do Programa de Pós-Graduação em Estética e História da Arte PGEHA USP. Pesquisadora do Colabor ECA-USP. Email: marinajugue@gmail.com 2 Grid, palavra de origem inglesa que pode significar grelha, rede ou malha, no artigo será utilizado o termo grid.

estendeu-se para as mídias entre si até chegar à relação homem-máquina-obra, na qual a fruição com a arte depende da interação do espectador com o dispositivo tecnológico que consiste, na verdade, em uma obra artística. Dessa forma, conforme afirma Prado (2003, p.20), as artes, as ciências e as técnicas entretêm relações de interdependência que possibilitam que as invenções ou mutações tecnológicas façam emergir novas formas artísticas. O limite entre o material e imaterial na arte atual está cada vez mais tênue e a nova obra de arte, tecnológica e interativa, só existe e tem sentido no momento em que há o diálogo com o espectador. Ao considerar que a estética é marcada por um discurso racional, amplia-se significativamente o interesse por novas pesquisas que visam o discurso legítimo da estética enquanto campo filosófico, sensível ou semiótico, articulando elementos que se lançam na direção contrária a uma interface gráfica verdadeiramente estética em si. A arte nas interfaces deve responder pelo amadurecimento das estéticas tecnológicas e vice-versa, reconhecendo todos os padrões e variáveis do meio enquanto moldam outras vozes no processo de constituição e construção artística. A obra de arte não somente se metamorfoseia, perdendo o seu status de unicidade e originalidade atrelado a uma determinada dimensão espaciotemporal, como também há uma modificação na forma como o receptor e o produtor se relacionam com a produção artística. [...] O momento da obra de arte na atualidade, no entanto, já não diz mais respeito somente à era da reprodutibilidade técnica, mas à era digital, a este momento histórico permeado pela revolução da informática e de sua confluência com os meios de comunicação. (ARANTES, 2005, p.53) Para qualquer tipo de linguagem disponível ao homem, mesmo com toda a explosão de imagens ao seu redor, ainda hoje, é perceptível a valorização da educação baseada no código verbal. O pensamento logocentrista perpetuado ao longo dos séculos precisa ser revisto no momento em que todos os sentidos humanos são bombardeados por informações. Compreender como a comunicação do homem com o mundo se dá por meio dele é o primeiro passo para expandir esses sistemas sensoriais e atentar-se para o universo que está ao seu redor.

A cibercultura propiciou o surgimento de novos signos a partir do momento em que permitiu a criação totalmente virtual de algo que, não necessariamente, tivesse referência no mundo material. Nesse contexto de hipersignificação, a proposta é compreender essa passagem de simples receptores de informações para o papel de emissores em potencial. Historicamente, o espectador foi deixando seu papel de receptor da obra de arte a partir da década de 1960, quando a produção artística ampliou seu campo, libertando-se dos suportes tradicionais. Dessa forma, novas linguagens surgiram influenciadas pela presença cada vez maior da tecnologia no cotidiano. Busca-se entender como as tecnologias da comunicação, aliadas à produção artística diversificadas, foram responsáveis pelas mudanças nas formas de fruição do espectador com a obra de arte e, consequentemente, na percepção do homem do mundo que o circunda. A hibridização, característica da atual cultura, levou à união de profissionais de diferentes áreas na produção artística contemporânea. A proposta é estudar a arte mídia, que não pertence mais a um artista, mas a um grupo de pesquisadores advindos não só das artes, mas também da ciência computacional, da comunicação e da biologia. Há a necessidade da compreensão desse momento atual, em que se admite a postura de que os meios de comunicação e as artes plásticas são influenciados mutuamente em toda sua história. No final do século XX, os meios de comunicação de massa já se consolidam como difusores de conhecimento e lazer. Compreende-se o sentido de que os meios de comunicação de massa divulgavam uma mitologia, com imagens, símbolos e ideologias, relacionadas à vida imaginária, em que houve uma passagem da forma de consumo deste mundo imaginário. Se antes a relação acontecia apenas sob a forma religiosa, hoje acontece também sob a forma de espetáculo. Conforme Morin (1986, p. 77), é através dos espetáculos que seus conteúdos imaginários se manifestam. Em outras palavras, é por meio do estético que se estabelece a relação de consumo imaginário. A relação estética, embora historicamente reprimida, sempre existiu, sendo um processo quase primário com o mundo. Diante da mudança na forma de associação como imaginário, as significações também se transformaram, pois o moderno se apropriou do arcaico, deslocando-o de seu ambiente original e dando uma nova simbologia.

A cibercultura agrega as culturas emergidas a priori, como uma característica da atualidade, e no ciberespaço cria possibilidade de uma verdadeira troca de saberes e conhecimentos. Ao compreendê-la, a verdadeira questão é reconhecer as mudanças qualitativas na ecologia dos signos nesse ambiente que resulta da extensão das novas redes de comunicação para a vida social e cultural. Ao abordar o modo como às linguagens artísticas trabalharam os signos, acredita-se ter sido importante retomar momentos da história da arte a exemplo da produção artística realizada entre os séculos XVI e XIX, bem como a arte Moderna. Compreender o Modernismo foi importante para acompanhar o processo de ruptura com os conceitos clássicos como fato essencial para a libertação da arte. Sem o movimento moderno e artistas como Marcel Duchamp, para colocar em questão a produção artística de séculos, possivelmente a arte não se abriria tão rapidamente para as tecnologias que floresciam no início do século XX. A pós-modernidade possibilitou perceber os novos rumos que a arte tomava, bem como entender que lançava mão de signos difundidos pelos meios de comunicação de massa. Neste período verificou-se a convergência arte-mídia, com vídeos, instalações, happenings e performances tornando-se cada vez mais comuns. Para melhor definir a arte que passava a ser produzida por meio de dispositivos tecnológicos foi escolhido o conceito de Artemídia. Foi, então, possível compreender como se deu o diálogo entre a produção artística e os meios de comunicação, de forma qualitativa, colaborando para a evolução de ambos. As mídias em convergência levaram à imersão em paisagens sígnicas nunca antes imaginadas e as novas linguagens artísticas apropriaram-se disso para trabalhar os sentidos do homem, elevando o tato, o paladar, o olfato e a audição ao mesmo patamar da visão que, até metade do século XX, reinava sozinha como único sentido apto à fruição da arte. Dessa forma, mostrou a evolução desse movimento da arte pelo espectador que agora participava e contribuía ativamente com a obra. Busca-se, dessa forma, explicitar que os meios midiáticos e as linguagens artísticas foram responsáveis pelas transformações na forma de percepção dos indivíduos, construindo novas capacidades de fruição estética. Tendo como base esse pensamento, observa-se que os meios de comunicação, a produção artística e a biotecnologia estão se integrando cada vez

mais, com tendência a uma unificação que ainda não se pode imaginar ativa no cotidiano, mas que não está longe de suceder. Por todas essas premissas, o objetivo deste artigo é compreender um pouco do momento contemporâneo, pelo viés da hibridização dos meios de comunicação e das linguagens artísticas. Observa-se que a arte e a tecnologia têm por objeto alcançar a comunicação na sua forma essencial, observa-se que o computador se torna um instrumento de constante transformação da sociedade através das capacidades cognitivas da máquina e sua potencialidade de converter a realidade em aspectos de simulacros digitais autônomos. A arte e a interconexão com as mídias digitais A conjuntura econômica, social e, principalmente, cultural servia de argumento para tendências que se apropriavam de ícones construídos pela mídia para colocar em evidência questões referentes à contemporaneidade. Tudo já havia sido feito; o que nos restava era juntar fragmentos, combiná-los e recombiná-los de maneiras significativas. Portanto a cultura pós-moderna era de citações, vendo o mundo como um simulacro (ARCHER, 2001, p.155). Os movimentos como a Pop Art e o Minimalismo instauraram profundas mudanças e foram seguidos por pós-minimalistas como Conceitualismo, LandArt, Performance, Body Art e Instalação. Todos esses movimentos desafiaram as concepções modernistas da arte, desafios que se expressaram no reconhecimento de que o significado de uma obra de arte não se reduz à sua composição interna, como queria o Modernismo, mas implica no contexto em que existe - um contexto social e político em coexistência com os aspectos formais da obra. Por isso, questões sobre a política da arte e identidade cultural e pessoal viriam a se tornar centrais nas artes dos anos 1970. Archer (2001, p.156) acredita que a obra de arte funciona como ponto de partida para um encontro reflexivo com o mundo e subsequente investigação do significado. Existe uma vibração nas imagens de Warhol que é a pulsação do dia a dia. A maneira como a obra de arte funciona em termos políticos não é uma questão que possa ser respondida independentemente de qualquer consideração sobre seu mérito artístico. Em vez disso, ela é básica para a maneira pela qual a arte é capaz de exercer qualquer influência estética no observador.

Nos anos 1970, a sociedade vivia o início do processo de hibridização, que podia ser notada, tanto na comunicação como nas artes. A cultura das mídias reunia os meios de comunicação, fornecendo uma avalanche de informações de uma só vez, enquanto as artes convergiam em experiências sensoriais utilizando os meios tecnológicos comunicacionais. A memória visual humana é muito mais duradoura que a memória textual, caso não se contente em fornecer um acesso meramente informacional, será necessário buscar as interfaces gráficas para que proporcionem experiências genuinamente estéticas. A estética é a ciência que estuda o julgamento e a percepção do que é considerado belo ou privado da beleza, envolve a produção das emoções criadas pelos próprios fenômenos estéticos, sendo que a arte se utiliza dessa ciência para definir se um trabalho pode ser considerado expressivo ou não. Entretanto, o belo ou a privação da beleza são noções criadas na mente do homem a partir de critérios pessoais vinculados às tradições ou ao rompimento com elas. Dessa maneira, pode-se inferir que para a estética não existe certo ou errado, tampouco o duvidoso. Na estética se questionam os conceitos que são apresentados ao ser humano sobre qualquer coisa. Afinal, no que se resume o fazer e o fruir artístico, caso possam ser resumidos, se não o indivíduo se agregar a eles? O fato é possibilitar uma melhor utilização pelo usuário por meio das interfaces gráficas, e como atingir essa função utilizando a estética no design visual. A arte é uma atividade humana que consiste em alguém transmitir de forma consciente aos outros, por certos sinais exteriores, os sentimentos que experimenta, de modo a outras pessoas serem contagiadas pelos mesmos sentimentos, vivendo-os também (TOLSTOI, 2002 p.82). A arte é um meio de comunicação indispensável para a vida e para a progressão em direção ao bem de um indivíduo e da humanidade, unindo-os nos mesmos sentimentos (ibidem). O recorte aqui proposto é analisar as convergências e as divergências entre o design gráfico e o design digital nessa nova ambiência, complexa e mutável. A proposta é relevante na medida em que ela se propõe a levantar e caracterizar as constantes e rápidas mudanças que incidem na área de comunicação, especificamente ao estudar o design visual das interfaces gráficas da publicidade.

A convergência das artes está presente no design digital, e essas novas estéticas são imprescindíveis nesses ambientes comunicacionais, que personalizam os discursos nesse ambiente contemporâneo. O design visual no ambiente digital Os princípios de design visual aplicados ao design de interfaces: a aparência visual da interface do website, constituída por elementos e propriedades estruturais como o grid, organização, estrutura visual, imagética, tipográfica, cores, formas, padrões e estética. De acordo com os princípios de design visual e a manipulação de forma adequada e consciente dos elementos e propriedades visuais de uma interface, resultam num website com aspecto profissional e adequado à organização que representa, pois existe uma correlação muito forte com o design visual, com a percepção e credibilidade. A web foi originalmente concebida como um espaço de troca de informações hipertextuais, porém, o desenvolvimento crescente de sofisticadas tecnologias encorajou seu uso como uma interface de software remoto. Esta natureza dúbia resulta em muita confusão conforme, profissionais da experiência do usuário tentam adaptar suas terminologias para casos que estão além do escopo da aplicação original. O objetivo é definir alguns destes termos dentro de seus contextos apropriados e de esclarecer as relações subjacentes entre estes vários elementos. (GARRET, 2011) A análise abrange o design visual, que é tratamento gráfico dos elementos da interface. O design de interfaces gráficas para web site, na experiência e interação, conforme Garret (2011, p.29): Gráfico 1- Design da interface e arquitetura da informação Fonte- Garret, 2011

Conforme Garret (2011, p. 30), a web como interface de software orientado à tarefa atua no desenvolvimento do design visual e também nos seguintes patamares que estão intimamente interligados: design da interface, design da informação, design de interação especificações funcionais, necessidades do usuário, objetivos do site. A web como sistema de hipertexto orientado à informação: o design visual, tratamento visual do texto, elementos gráficos da página e componentes de navegação e design da navegação, design da informação, arquitetura da informação, requisitos de conteúdo, necessidades do usuário e os objetivos do site. O artigo abordará o primeiro plano do gráfico 1, que se refere ao design visual, e o objeto de estudos se refere à organização dos elementos gráficos, por meio de um grid. A proposta é investigar as novas estéticas das interfaces gráficas e respectivamente estudar o grid e a interconexão com a arte. Segundo Derek Birdsall (apud Tondreau), um grid é uma malha construída com diversos retângulos, usada para ordenar elementos gráficos. Grids Os grids são os elementos mais mal compreendidos e mal utilizados no layout de páginas. Um grid é útil apenas se for derivado do conteúdo que ele pretende tratar. Ou seja, só podemos partir para a criação de um grid após termos definido o tipo de projeto que estamos trabalhando. Grid é sempre construído após termos definido o conceito do trabalho, afinal, o conteúdo determina a estrutura que o grid terá. (TONDREAU, 2009) O uso de grids foi popularizado e refinado por designers suíços como Josef Müller- Brockmann (2007, p.176) é uma das características marcantes do estilo suíço de design gráfico. Grids são grades que definem uma série de parâmetros através de colunas, calhas e margens que permitem que designers desenvolvam layouts criativos mais rapidamente, mas também mantém uma coerência entre elementos em uma página ou entre as páginas de um projeto. Segundo Josef Müller-Brockmann: O sistema de grid é um auxílio e não uma garantia. Permite inúmeras possibilidades e cada designer pode procurar uma solução adequada ao seu estilo. Mas é preciso um aprendizado para utilizar o grid que é uma arte que exige a prática.

Karl Gerstner foi o primeiro a realmente explorar os grids e criá-los com a complexidade incomparável que rendeu uma flexibilidade incrível. Gerstner afirmou que os grids são um meio de desenvolver uma estrutura para ser criativo. Enquanto a estrutura pode ser visto como uma limitação, também pode ser visto como estabelecedor de parâmetros ao desenvolvimento do projeto. Ao integrar uma abordagem sistemática das ideias, interação ou composição, um designer pode reduzir o tempo gasto para chegar às soluções e pode ser utilizado depois para refinar e melhorar conceitos. Há dois aspectos do processo de design que são centrais para as teorias de Gerstner, primeiramente é a criatividade. As teorias de Gerstner para a introdução de grids no processo de design não é limitar a criatividade, mas para garantir a energia criativa seja eficiente para que as fases em que a maioria dos benefícios responde aos problemas do projeto. Ao invés de energia despendida durante as fases preliminares, o uso inteligente de estruturas podem permitir que o designer possa trabalhar de forma sistemática e eficiente. Conforme Ellen Lupton (2008, p.176): O grid tem uma longa história na arte e no design moderno como um meio de gerar formas. [...] Tente construir composições irregulares e assimétricas a partir do fundo neutro e pré-fabricado de um grid. Os mesmos princípios formais aplicam-se à organização de texto e imagens num projeto de publicação. Grids digitais A construção do grid no meio impresso consiste basicamente na demarcação do formato para a criação de colunas ou módulos, a serem preenchidas com linhas de texto e imagens. O refinamento mútuo entre formato, margens, número de colunas e tipografia é uma das questões centrais na definição do grid. Em um projeto digital, é preciso saber abrir mão deste controle estrito e tratar a diversidade, tendo como meta assegurar uma boa leitura em todos os casos. Um layout de três colunas pode funcionar bem em um tablet como o IPad, empunhado na horizontal, não sendo, por outro lado, adequado para um smartphone. Suas dimensões menores não permitem exibir três colunas com texto legível dentro da métrica de 40 a 50 caracteres por linha. As próprias dimensões do dispositivo pedem outra colunagem. Desta forma, o layout digital deve ser abordado através do estabelecimento de grupos de dispositivos com tamanhos de tela próximos, dentro dos quais se pode trabalhar um

mesmo padrão de colunagem, tipografia e disposição de conteúdo. Esta definição dos grupos a serem contemplados pela publicação deve ser feita com base no público-alvo e estabelecerá as variações de layout a serem tratadas no projeto. A ideia não seria diferenciar por tipo de dispositivo, criando se categorias como celular, tablet, notebook e desktop, pois os tamanhos de tela se sobrepõem e já existem celulares praticamente do tamanho de tablets, tablets maiores que certos modelos de notebooks, bem como notebooks maiores que certos desktops. O quadro 1 apresenta os grupos de dispositivos comumente usadas para layout em projetos web. No impresso, a publicação pode ser projetada de fora para dentro, partindo- se da seleção do formato para depois configurar as marge ns, colunas e tipografia. Também é possível fa zer o inverso, partindose da tipografia, passando pelo número de colunas e pela configuração das margens, para posteriormente chegar ao formato final. No entanto, em ambos os casos se tem um controle preciso sobre o material que chegará às mãos do leitor. É importante observar que estas faixas não definem layouts necessariamente distintos, e sim indicam que cada grupo requer adaptações para assegurar leiturabilidade. Quadro 1 Lista com agrupamentos de dispositivos para elaboração de layout. Fonte: MARCOTTE (2011, p.114) O grid para uma publicação digital é diferente daquele para uma publicação impressa pelo modo como o espaço é trabalhado. [...] Uma das mais importantes diferenças entre o ambiente digital e o impresso é o tamanho da página usada. Enquanto o trabalho impresso é limitado pelo tamanho do papel, e das máquinas de impressão disponíveis, uma página digital pode ter qualquer tamanho e ser desenvolvida para que o conteúdo se encaixe nela perfeitamente. (AMBROSE, p. 156).

Os grids permitem que os designers para não iniciem do zero, fornece algo que eles podem usar a partir de layout como um ponto de partida. Depende da proposta do projeto para que o grid seja desenvolvido e permite que o designer desenvolva de uma forma mais adequada a realização de cada tela. Um dos principais aspectos de um projeto sob a ótica digital resgata os elementos aplicáveis da herança tipográfica, a proposta é estudar as diferenças práticas, sintáticas e semânticas nas narrativas entre projetos elaborados para as duas mídias. Análise dos sites de compras da Netshoes e Americanas.com Os websites são cada vez mais os primeiros pontos de contato com as pessoas e assim se formam as primeiras impressões relativas às organizações. Foram escolhidos para análise os sites da Netshoes e Americanas.com, pois os dois constam na lista do Top 10 dos maiores sites de compras do Brasil 3. A Netshoes é uma empresa brasileira, com sede em São Paulo, fundada em 2000 por Marcio Kumruian. Atualmente, já possui atuação na Argentina e México. O grande ponto positivo em comprar na Netshoes é sua eficiente forma de entrega. É claro que há exceções, mas em geral a entrega é rápida, isso deve a seu grande investimento em logística 4. O site de compras Americanas.com é uma ramificação das Lojas Americanas já consolidada no mercado e com a confiança do público, porém é uma empresa totalmente separada, pertence ao grupo B2W que controla também o Submarino.com, Shoptime e Ingresso.com. Possuem o maior e-commerce genuinamente brasileiro 5. Nos dias atuais, ter um site é uma forma de estratégia de divulgação digital e praticamente todas empresas em todo o mundo possuem o seu próprio site, as duas empresas tem uma proposta clean com fundo branco, com utilização de cores em áreas maiores, para não criar interferências entre os elementos gráficos. Os respectivos sites propõem: Exibição atraente das imagens, 3 Fonte: http://top10mais.org/top-10-maiores-sites-de-compras-e-commerce-do-brasil/#ixzz3hkevroyh 4 Fonte: http://top10mais.org/top-10-maiores-sites-de-compras-e-commerce-do-brasil/#ixzz3hkfnkohv 5 Fonte: http://top10mais.org/top-10-maiores-sites-de-compras-e-commerce-do-brasil/#ixzz3hkggtjci

Proporcionar uma experiência de usuário amigável, para incentivar os usuários a retornar. Navegação fácil para fazer a seleção perfeita. Receber informações tanto detalhadas sobre os assuntos. Observa-se que sob a superfície o grid do site com a colocação de botões, abas, fotos e blocos de texto. O grid é concebido para aperfeiçoar a disposição destes elementos para o efeito máximo e eficiência, enquanto os quatro itens atribuídos podem parecer simples, cada designer pode interpretar de forma diferente o problema e criar uma solução diferente provando que nunca há uma resposta singular para qualquer problema. A estrutura é um elemento mais abstrato do site, que define a forma as várias características e funções do local que se encaixam. Os princípios de design foram criados para fornecer uma estrutura simples de pensamento, uma ideia espacial, uma definição e uma conexão com o conteúdo, o grid para a web definido pelo conteúdo e não por uma página imaginária. Pode ainda definir o posicionamento dos elementos da página, e esta estrutura define como os usuários chegaram a essa página, define o arranjo de itens de navegação que permitem aos usuários navegar categorias. O âmbito é fundamentalmente determinado pela estratégia do site que incorpora não só o que as pessoas que executam ou quer sair dela. Nos anos 1950 e 1960, os designers gráficos suíços, incluindo Gerstner e Müller- Brockmann conceberam sistemas de rede modulares. O grid utilizado no site de compras da Netshoes e Americanas.com, conforme os diagramas das figuras 1, 2 têm características de rede modular, com divisões horizontais consistentes de cima para baixo, além de divisões verticais da esquerda para a direita. Estes módulos governam a localização e o corte de imagens, bem como o texto.

Figura 1- Site da Netshoes, com o diagrama do grid. Fonte: Site da Netshoes, http://www.netshoes.com.br/, acesso 27 julho de 2015. Figura 2- Site de compras Americanas.com, com o diagrama do grid. Fonte: Site de compras Americanas.com, http://www.americanas.com.br/, acesso 27 julho de 2015.

Análise Tipográfica Observa-se que na figura 1 e 2, a tipografia é predominantemente sem serifa, que são recomendadas para textos no monitor, pois transmitem sensação de clareza, organização, fatores primordiais para atrair o visitante à leitura. O uso são de fontes tipográficas com uma hierarquia por meio de um arranjo espacial, para tornar o projeto mais complexo com variáveis como o peso, tamanho, alinhamento, espaçamentos, combinações, legibilidade e leiturabilidade. Análise Cromática São utilizadas cores vibrantes, principalmente no site da Netshoes que criam uma relação de vibração e energia com os esportes, e no caso da Americanas.com os espaços em branco identificam e possuem relação com ao conceito simbólico e existe um cuidado e coerência nas combinações das mesmas para gerar bons contrastes e evitar ruídos. Considerações A proposta do artigo é alinhavar a arte e o design digital, desde o meio impresso até o meio digital como agente transformador no contexto estético e refletir sobre esse universo paradoxal no qual a arte representa (ou não) ao mesmo tempo um horizonte de ruptura e transgressão, que simultaneamente, transcreve uma nova construção comunicacional e de visibilidade no design visual no ambiente digital e principalmente em sites de compras. Assim, mesmo com toda sua própria complexidade, há inúmeras possibilidades e direções de criação e fruição. Cabe adotar novas maneiras de produzir sentido estético mediado pelo design visual nas interfaces gráficas, seja através principalmente do grid, e dos outros elementos como a forma, cor, tipografia, ícones, imagens e outras possibilidades. No final, os grids não podem ser considerada como a resposta é apenas uma ferramenta para ajudar o designer chegar a uma solução para um problema de design.

Conforme Lupton (2008, p.233): Os designers criam tanto regras como peças acabadas. [...] Criar regras e instruções é uma parte intrínseca do trabalho de design. [...] Podemos observar maneiras de utilizar processos baseados em regras, a fim de gerar resultados inesperados. Há a necessidade de extrapolar a estética puramente visual e revelar as possibilidades infinitas que as mesmas podem oferecer. A verdadeira experiência estética é deflagrada pelo sentido novo e inesperado que no design visual da interface gráfica pode e deve proporcionar na comunicação. REFERÊNCIAS ARANTES, Priscila. @rte e Mídia: perspectivas da estética digital. São Paulo: Senac/Fapesp. 2005. ARCHER, Michael. Arte Contemporânea: Uma História Concisa. São Paulo: Martins Fontes, 2012. AMBROSE, G.; HARRIS, P. Grids. Porto Alegre: Bookman, 2009. ARMSTRONG, Helen. Graphic design theory: readings from the field. New York : Princeton Architectural Press, 2009. BONSIEPE, G. Design, cultura e sociedade. São Paulo: Edgard Blucher, 2011. CARUSONE, Antonio. The grid system. Disponível em: http://www.thegridsystem.org/. Acesso em 28 de junho de 2015. GARRET, Jesse James. The elements of user experience User-centered design for the web and beyond. Berkeley: Peachpit. 2011. LUPTON, Ellen, PHILLIPS, Jennifer. Novos Fundamentos do Design. São Paulo: Cosac Naif, 2008. MARCOTTE, Ethan. Responsive Web Design. New York: A Book Apart, 2011. 150p. MORIN, E. (1986). Para Sair do Século XX. Rio de Janeiro: Nova Fronteira. MÜLLER- BROCKMANN, Josef. Grid Systems. Suíça: Niggli, 2007.176 p. PRADO, Gilbertto. Arte telemática: dos intercâmbios pontuais aos ambientes virtuais multiusuário/ Apresentação Arlindo Machado, Julio Plaza - São Paulo: Itaú Cultural. 2003. SAMARA, Timothy.. Grid - Construção e Desconstrução. São Paulo: Cosac & Naify, 2007. TOLSTOI, Leon Nikolaevitch. O que é arte? São Paulo: Ediouro, 2002. TONDREAU, Beth. Criar Grids: 100 fundamentos de layout. Tradução Luciano Cardinali São Paulo: Editora Blucher, 2009.