TCC Nelson Smythe Jr

Nelson Luis Smythe Junior

Trabalho de Conclusão do Curso de Graduação em Design Gráfico

Departamento de Design, Setor de Ciências Humanas, Letras e Artes

Orientador: André Battaiola

CURITIBA | 2006

DESIGN GRÁFICOAMBIENTALMENTE SUSTENTÁVEL

uma proposta de website

TCC 2006 – design gráfico ambientalmente sustentável – uma proposta de website

Introdução Designgráfico-globalização

Impacto ambiental - modelo de desenvolvimento econômico - altamente nocivo ao futuro do planeta

Ex. indústria gráfica - meio ambiente: resíduos sólidos | efluentes líquidos | emissões gasosas

Como minimizar o impacto do design gráfico sobre o meio ambiente? Variávelambiental

Análise do ciclodevida - 6 categorias adaptadas para o design gráfico

» Projeto - como incluir os requisitos ambientais

» Materiais - implicações ambientais relacionadas

» Produção - práticas ambientalmente sustentáveis

» Consumo - consciência ecológica

» Descarte - diminuir o impacto e resíduos

» NormaseCertificações - de todo o processo

Atualizado + dinâmico + interatividade > suporte escolhido: website


Delimitaçãodotema

Aspectos da sustentabilidade: social, econômico, cultural e ambiental.

Informações relacionadas aos requisitosambientais no design gráfico.

Alcancedapesquisa - de acordo com as categorias, por exemplo:

» fornecedores de serviços gráficos - mercado local

» normas e certificações - alcance nacional


Problema

Design gráfico ambientalmente sustentável - campo novo de prática e estudos

» informações dispersas

» pouca informação

Como dispor as informações na internet para que este público tenha condições de entender a

problemática ambiental e a possibilidade de interferir nesse processo através da discussão e validação

destas informações.


Objetivos

» Oferecer informações que permitam o conhecimento e a prática do design gráfico ambientalmente sustentável.

» Reunir e sistematizar as informações disponíveis relacionadas ao tema.

» Desenvolver um projeto de design de hipermídia sobre design gráfico ambientalmente sustentável.


Justificativa

design e ecologia - revolução industrial

» custo ambiental e social

» consciência da situação por parte do designer > reverter este quadro

» incluir a sustentabilidade ambiental no desenvolvimento de um projeto

internet - meio de comunicação ideal

» não utiliza papel nem tinta - diminui custos e elimina os impactos sobre o meio ambiente

» atinge um público global

» permite a colaboração e a troca de informações, enriquecendo o corpo de idéias e soluções

» permite a anexação de material de consulta, pesquisas, artigos, normas e certificações

» é dinâmico - atualização constante


Impactos

Dentre os impactos esperados estão:

» Acesso às informações a respeito da sustentabilidade no design gráfico

» Impulso à pesquisa

» Diminuição de resíduos industriais

» Economia de matéria-prima

» Utilização de recursos renováveis

» Reutilização e reciclagem de produtos

Economia de matéria-prima e energia - menor custo final do produto > acesso a diversas classes

sociais. A reciclagem permite a inclusão social através de cooperativas.


Metodologia

» definição do tema e do público-alvo » conceituação

» justificativa » geração das alternativas

» revisão bibliográfica e pesquisa » seleção e detalhamento da alternativa escolhida

» estudo de similares » avaliação

» requisitos e restrições

Informaçõesnecessárias > design gráfico (+ internet) + sustentabilidade

Livros, artigos e websites

ecologia + sustentabilidade + ecodesign | design da informação + design de hipermídia


áreas de conhecimento

Designsustentável

Desenvolvimentosustentável é aquele que cumpre as necessidades do presente sem colocar em perigo a

capacidade das gerações futuras em satisfazer suas próprias necessidades.

Ciclodevida - interferência do designer desde a utilização da matéria-prima, a energia consumida, a

durabilidade do produto, a possibilidade de reutilização e reciclagem até a diminuição dos impactos em

todo processo.

Questõesecológicasnodesign - a partir da década de 80

Como intervir projetualmente para minimizar os impactos ao meio ambiente advindos

de sua prática profissional.

» 1987 - “Design Memorandum” (Itália)

» 1990 “Manifesto do Conselho Escandinavo de Design”


Designgráficosustentável

Pouco mudou desde a identificação da ecologia como requisito do design.

Exemplos:

» Núcleo de Design e Sustentabilidade da UFPR

» Prêmio Ecodesign - design de produtos, de embalagens e gráfico | 1998/2000/2002/2004/----

» Livro “Design em papelão ondulado ” - processos de impressão relacionados ao papelão ondulado, materiais e processos utilizados e seus impactos sobre o meio ambiente.

» Jornal “A Notícia”(Joinville) - tinta a base de óleo de soja e papel reciclado 100% pós-consumo

Na sua maioria, os designers brasileiros desenvolvem seus projetos dentro do paradigma do custo (apenas

econômico e não ambiental), da estética e das tendências do mercado.” (CASAGRANDE JR, 2004)

Os profissionais sentem-se presos por posturas de mercado.


Designgráficosustentávelnainternet

Internet X meioimpresso

» economiza papel, tinta e recursos financeiros

» desmaterialização

Sustentabilidadenainternet

» energia “verde”, solar ou eólica

» a economia no tráfego de dados, páginas leves, rápidas

» acessibilidade, maior número possível de usuários

» software livre - diminuindo o custo final - instituições com menos recursos, ONGs e OSCIPs

» possibilita a divulgação de práticas ambientalmente sustentáveis


Designgráficoemambienteshipermídia

» Cor naweb

» Tipografia digital

» Semiótica

» DesigndaInformação

» Ergonomia


Cor

Diferentes efeitos sobre o organismo humano e assim tendem a produzir juízos e sentimentos variados.

Características físicas e psíquicas das cores > importância para o sucesso da comunicação.

A cor pode impressionar, expressar e estruturar informações, direcionar o olhar do observador e facilitar o

entendimento do que se apresenta.

Internet - cor luz RGB - sistema aditivo

Tipografia

Peso tão grande quanto a imagem para o design gráfico.

Tipografia digital - pixel > imagem na tela = mosaico de pixels (valores individuais de brilho e cor)

» fontes tradicionais > tela > letras malformadas e ilegíveis | abaixo do corpo 8 ou 10 » textos na internet > fontes específicas para a tela - pixels como elementos construtivos


Semiótica

Signo é algo que representa alguma coisa para alguém em determinado contexto.

Um sistema de linguagem se dá através da articulação de signos.

A semiótica num projeto de design proporciona o controle da orientação e interpretação das

informações pelo público.

Importante considerar o contexto cultural no qual ocorre o processo de comunicação.

Cultura - interpretação de um mesmo signo pode se dar de modo diferente, o designer deve ter

conhecimento e domínio das características culturais.


DesigndaInformação

Em um projeto de designdehipermídia os requisitos do design de informação são de fundamental

importância, pois nos fornecem o planejamento do conteúdo de uma mensagem.

Design de informação > base para o design de hipermídia

Design de hipermídia > hipertextualidade | não-linearidade | interatividade


Ergonomia

UsabilidadeXErgonomia

» Ergonomia é uma disciplina que contém ferramentas cognitivas e utiliza-se da Usabilidade como conjunto de conhecimento, regras e normas para análise e validação de requisitos relacionados ao uso de uma interface.

» Usabilidade é uma combinação dos fatores que afetam a experiência do usuário - aprendizagem rápida, eficiência no uso, fácil memorização de comandos, menor freqüência possível de erros e a satisfação do usuário.

AnálisedeTarefa - aplicada para projetar e validar projetos de design. Concentra-se na tarefa a ser

desempenhada pelos usuários no sistema de informação projetado.


ProjetoA inclusão do requisito ambiental ocorreu em diversas fases do projeto, por exemplo:

» RequisitoseRestrições – a variável ambiental, nesta fase, é um dos principais requisitos projetuais;

» EstudodeSimilares – são analisados websites que tenham características afins com a sustentabilidade;

» Conceituação – consideração dos aspectos ambientais levantados na pesquisa, no levantamento iconográfico, nas palavras-chave, etc.;

» Avaliação – verificação da presença do requisito ambiental nas fases anteriores.


Delimitaçãodopúblicoeáreadeabrangênciadowebsite

» Públicoprincipal – profissionais de design gráfico, estudantes e professores Possuem Conhecimento sobre: internet | metodologia projetual | ecodesign

» Públicosecundário – fornecedores de produtos e serviços acesso às informações que especificam o que o designer procura: materiais | fornecedores | processos

Abrangência

CONTEÚDO

» Nacional - projeto, materiais, consumo, descarte e legislação

» Local - produção

PÚBLICO

» Nacional


Requisitoserestrições

Requisitos

» O público estará procurando informações sobre designgráficosustentável < ênfase.

» Os conceitosambientais agregados ao projeto devem ser claros e priorizados.

» Fazer com que as informações disponíveis sejam discutidas,revisadaseampliadas pelos usuários.

Restrições

» Limitação de abrangência: Brasil, as informações relacionadas com as condições sócio-econômicas, ambientais e culturais nacionais.

» Limitação no uso de tecnologias disponíveis no desenvolvimento do projeto, que podem encarecer o mesmo e desta maneira inviabilizar os aspectos econômico e social da sustentabilidade.


Estudodesimilares



Critérios GRÁFICOS

Especificidade – Tempo – Reconhecimento

Critérios ERGONÔMICOS

Cognição – Legibilidade – Interação

Navegação – Hierarquia – Cliques – Atalhos

Critérios TÉCNICOS

Transição – Tempo

Critério ESTRUTURA VISUAL

Unidade – Identidade

Critério CORES

PaletasUSO DA COR

88,9

ESTRUTURAVISUAL

88,9

TÉCNICOS83,35

GRÁFICOS84,2

ERGONÔMICOS77,4

Análise do desempenho


Análisedoconteúdo

IniciaçãoCientífica

Materiais | Produção | Normas e Certificações

Conteúdoproposto

Projeto | Materiais | Produção | Consumo | Descarte | Normas e Certificações

Aspectos centrais da sustentabilidade(MANZINI & VEZZOLI, 2002)

» Minimização de recursos » Escolha de recursos e processos de baixo impacto » Otimização da vida dos produtos » Extensão da vida dos materiais » Facilidade de desmontagem

Ex. Projeto / Escolha de recursos e processos de baixo impacto - estudodecaso

Projeto gráfico do livro “Design em Papelão Ondulado – série Design Sustentável Brasil”

Gráfica | Gravação de chapa de impressão | Tintas e vernizes | Papel | Formato do livro


organograma do website


ConceituaçãoLevantamentoiconográfico

Símbolos, imagens, cores, idéias - universo pesquisado + design gráfico + sustentabilidade ambiental

Palavras-chave

Ecodesign Sustentabilidade Ecologia

Meio ambiente Ciclo de vida Design gráfico sustentável

Desenvolvimento sustentável Visão sistêmica Qualidade de vida

Responsabilidade ambiental

Conceitos

» Otimização- recursos, tecnologias, figuras, objetos e textos - função explícita | acesso - claro e objetivo

» Inovação - próprio conceito do projeto, ineditismo | requisito ambiental > metodologia projetual

» Cíclico - concepção sistêmica do mundo - projeto visual do website | ciclo de vida


Alternativas briefing | áreas de conhecimento | conceituação

alternativas projetuais > consolidação dos conceitos gerais a serem transmitidos

esqueleto do website - componentes da interface e navegação


esboços para a estrutura visual


esboços de estruturação das principais informações na página principal do website

esboço final para a estrutura visual


Estudo de cores a partir da estrutura visual



Cores

paleta de cores

significados simbólicos - contexto cultural - conhecimento sobre imaginário do público-alvo

Projeto-VERMELHO: energia, dinamismo, estímulo e reflexão | item mais importante

Materiais-AZUL: verdade, intelectualidade, respeito, responsabilidade e reflexão | a cor do céu.

Produção-AMARELO: estímulo, esperança, expansividade | transformação

Consumidor-VIOLETA: enigmática, fantasia e mistério, lucidez e lealdade a uma causa | sensibilização

Descarte-VERDE: origem da vida (vegetais), crescimento, receptividade, regeneração e equilíbrio

NormaseCertificações-CINZA-CLARO: Kandinsky “do equilíbrio entre o branco e o preto [...] é natural que uma cor assim produzida não tenha nem som exterior nem movimento”.

Fundodaspáginas-CINZA: neutro, conforto visual, contrastes


Tipografia

Maior legibilidade em interfaces digitais

» Fontepadrãoparaostítuloseseções - personalidade do website - identidade própria

DAX, nas versões light, regular, medium, extra e black. 5 versões de peso > hierarquia das informações fonte contemporânea, sem serifa, facilita a legibilidade em interfaces digitais.

» Fontepadrãoparaostextos - estas devem estar em sintonia com a primeira

TrebuchetMS, desenhada para a web, como a Tahoma e a Verdana ou fontes disponíveis nos computadores mas que não foram desenhadas especialmente para interfaces digitais, mas adaptadas a elas, como Arial e Helvética. Melhor afinidade (traços de semelhança) com a DAX.


Ícones

Uma imagem que representa uma idéia, um conceito, ou um objeto. Ou um grupo de idéias ou objetos.

Usabilidade > funções mais usadas num website devem utilizar ícones.

As pessoas tendem a lembrar melhor das formas que do significado das palavras, que tem que ser

decodificado a cada experiência.

Não pode causar dúvida - preferível ao texto por facilitar o reconhecimento.

Para este trabalho foi necessário desenvolvê-los a partir de esboços das representações das idéias

ou objetos centrais de cada seção. Como são ícones novos, foi necessária a inclusão de rótulos de texto ao

passar o cursor do “mouse” sobre os ícones, facilitando o aprendizado.

Para as seções “fale conosco”, “referências” e “indique” não foram utilizados ícones, para não

concorrerem com os ícones das seções principais e para, desta maneira, diferenciá-los.


diagrama ilustrando as diversas fases do ciclo de vida do produto gráfico utilizando os ícones em sua versão final

esboços para definição dos ícones

primeira finalização dos ícones

ícones finais


Alternativaescolhida

equilíbrio / contraste cores X fundo / destaque das seções / conforto visual

Montagem final do website - html e shockwave - no Dreamweaver e Flash


Avaliação

Testesdeusabilidade - participantes mostraram o que funciona, como executam determinada tarefa e o

que eles entendem no website.

A avaliação de usabilidade ocorreu durante toda a Geração de Alternativas, desde os esboços iniciais,

primeiros layouts até o layout final, funcional.

Checklist - avaliação da alternativa escolhida

» Adequa-se aos requisitos e restrições de projeto? » Transmite todos os conceitos necessários? » Foi priorizado o conceito principal - sustentabilidade? » Tem legibilidade? » É tecnicamente viável? » É contemporâneo e atemporal ou se rende a modismos? » É original e inovador? » É direto ou há elementos em excesso? » É fácil de ser compreendido e ‘navegado’? » Identifica-se com o público-alvo?

A fase de avaliação é completada assim que se consiga validar todos os itens do checklist.


Conclusões e Considerações FinaisDivulgação de uma metodologia projetual para o design gráfico voltada a sustentabilidade ambiental.

Requisito ambiental - análise do ciclo de vida do produto gráfico.

Alternativas sustentáveis para as situações de projeto.

O trabalho levantou questões pouco abordadas na prática e no ensino do design gráfico:

» A alfabetizaçãoecológica no design - discussão da variável ambiental em todas as disciplinas

» A insustentabilidadedoatualmodelodedesenvolvimentoeconômicoglobal

TCC - nos aproxima da prática profissional > abrangência + complexidade + inclusão e a interação

das diversas disciplinas cursadas.


Alteraçõesefetuadas

» Mudanças na ordem e na hierarquia de capítulos;

» Síntese das informações da pesquisa que foram utilizadas no projeto;

» Descrição detalhada da análise de similares e requisitos levantados para o projeto;

» Aprimoramento no estudo da utilização das cores no projeto e revisão do checklist de avaliação, levando à modificação da alternativa escolhida;

» Dados e resultados da pesquisa de avaliação.


Agradecimentos

» Aos professores, que participaram deste TCC com seu conhecimento, opiniões e incentivo:

Aguinaldo dos Santos,

Andre Battaiola,

Carla Spinillo,

Humberto Boguzewski,

Naotake Fukushima,

Maria Regina Furtado,

Rita Solieri,

Stephania Padovani;

» A minha família e especialmente a minha esposa, maior incentivadora;

» Aos verdadeiros amigos, que torcem por nós assim como torcemos por eles;

» Aos colegas de turma que passaram comigo estes últimos anos;

» Aos funcionários do dDesign, que sempre estiveram prontos a ajudar no que fosse preciso.

Technology

TCC Nelson Smythe Jr