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

PPGCOM ESPM // SÃO PAULO // COMUNICON 2015 (5 a 7 de outubro 2015)

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

Marina Jugue Chinem1

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 grid2. 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: [email protected] 2 Grid, palavra de origem inglesa que pode significar grelha, rede ou malha, no artigo será utilizado o termo “grid”.

mailto:[email protected]


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 margens, colunas e tipografia. Também é possível fa zer o inverso, partindo-

se 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 Brasil3.

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ística4.

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 brasileiro5.

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

http://top10mais.org/top-10-maiores-sites-de-compras-e-commerce-do-brasil/#ixzz3hKevroYH

http://top10mais.org/top-10-maiores-sites-de-compras-e-commerce-do-brasil/#ixzz3hKfnKOHv

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.

http://www.netshoes.com.br/,

http://www.americanas.com.br/,


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.

http://www.thegridsystem.org/.

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

Documents

Transcript of Sites de e-commerce: o design visual e a interconexão com...