O design em apresentaes eletrnicas

Educao digital

Prof Ms. Patrcia Strabeli e Profa. Ms. Luciana Aparecida Santos

Sumrio
Introduo ............................................................................. O design est em toda parte ................................................ Por onde comear ................................................................. Pronto para comear? ........................................................... Sntese ................................................................................... Referncias Bibliogrficas .................................................... 3 3 4 5 12 13

Introduo
Telas coloridas, imagens, textos e movimento! As apresentaes eletrnicas invadiram as salas de aula e as reunies corporativas, e alunos, professores e profissionais j incorporaram o recurso s suas rotinas. Nesta unidade, voc conhecer alguns princpios do design indispensveis para a construo de apresentaes legveis e atraentes. Bom trabalho!

O design est em toda parte

o ler este texto, voc usa um computador. Olhe para o teclado: h design a! O tamanho das teclas, sua cor e formato foram minuciosamente estudados, levando em conta o tamanho mdio das mos dos possveis usurios, a proporo entre as teclas e o tamanho total do equipamento.

Algum planejou a aparncia do seu computador, e tambm a aparncia da interface grfica dos softwares que voc usa diariamente. No supermercado, as embalagens dos diferentes produtos destacam seu contedo, garantem o transporte e armazenamento seguro e disputam a ateno do consumidor. Voc j reparou como determinados produtos so representados por determinadas cores? Em embalagens de sabo em p, por exemplo, predomina o azul, j os molhos de tomate sempre so associados ao vermelho. Os profissionais da rea do design so preparados para compreender as necessidades das pessoas, traduzindo-as em objetos confortveis, bonitos e adequados. Alguns dos princpios usados por esses profissionais podem ser aplicados diariamente por pessoas como ns, preocupadas em elaborar apresentaes no s bonitas, mas legveis, profissionais e eficientes.

Por onde comear

ara que sua apresentao seja bem-sucedida, importante que considere o pblico que pretende atingir e as condies e recursos de que dispe. Ao contrrio do que muitos acreditam, embora seja possvel falar de um mesmo assunto para pessoas diferentes, no possvel usar a mesma apresentao para pblicos diferentes. Se voc professor, sabe que a linguagem, a quantidade de textos e at mesmo o nmero de telas, variam de acordo com a idade de seus alunos e a durao de sua aula. Se voc cria apresentaes para empresas, deve considerar o interesse das diferentes plateias, adequando a durao da apresentao, o nvel de aprofundamento das informaes e a qualidade dos exemplos que usa.

Mas, qualquer que seja o uso que pretende fazer das apresentaes que criar, uma coisa certa: alguns princpios do design, invisveis para os leigos, devem ser incorporados sua criao.

H no mercado empresas especializadas em produzir apresentaes eletrnicas de qualidade. Lembre-se de que, para produzir boas apresentaes, voc deve colecionar boas referncias! Acesse os sites indicados a seguir e procure identificar os temas que estudou at agora. <www.soap.com.br/exemplos> <http://www.bluered.com.br/apresentacoes/canais/ portfolio/>

Pronto para comear?

Organizando a tela
Um bom comeo! Se voc tem interesse pelo assunto, leia Design para quem no designer: noes bsicas de planejamento visual, de Robin Williams. O livro, especialmente escrito para leigos, aponta quatro princpios da diagramao capazes de mudar sua maneira de olhar o mundo! H muitas maneiras de comear a produzir uma apresentao eletrnica: alguns preferem iniciar com a elaborao do texto, outros comeam escolhendo imagens e tipos de letras ou testando cores de fundo. Qualquer que seja sua preferncia, importante que saiba que o ponto de partida para sua apresentao no est na escolha dos recursos, e sim na definio de seu pblico e condies de uso. Assim, antes de qualquer coisa, que tal responder algumas perguntas? 1. Para quem vou apresentar? Delimite seu pblico, considerando faixa etria, repertrio sobre o assunto e seu nvel de entrosamento. Considerar o tamanho da sua plateia tambm importante, e pode ajudar muito a prever a durao de sua apresentao. 2. Quanto tempo terei? Adequar o contedo de sua apresentao ao tempo de que dispe sinal de profissionalismo e respeito com aqueles que o assistem. No h nada pior do que uma apresentao que no cabe

Pratique Que tal aprender praticando? O objetivo deste curso apresentar conceitos bsicos de design que possam ser incorporados ao seu trabalho imediatamente. E uma boa maneira de colocar em prtica o que aprender... praticando! Sugiro que comece imediatamente: procure entre seus arquivos uma apresentao eletrnica que pode ser melhorada, e salve uma cpia dessa apresentao em seu computador. Ao conhecer um novo conceito, aplique-o na cpia, e compare os resultados usando o arquivo original. Voc vai perceber a diferena e comemorar os avanos!

no tempo da aula ou da reunio, e o efeito do contedo incompleto sobre sua plateia pode ser muito frustrante! Calcule o tempo necessrio para a apresentao pausada de cada tela, e reserve alguns minutos para interaes com o pblico e imprevistos. 3. Com quais recursos posso contar? importante prever os recursos disponveis e adequ-los s suas necessidades. No h nada pior, para algum que assiste a uma apresentao, que ter de usar a imaginao quando no h caixas de som e sua apresentao oferece um audiovisual, ou quando voc sugere um link com a internet e no possui conexo. Na dvida, use os recursos bsicos de texto e imagens, e capriche na fala. Afinal de contas, voc mais importante do que os efeitos especiais!

Pratique Revirando o ba! Voc est comeando a elaborar sua apresentao, e eu sugiro que comece pensando nas apresentaes que j viu ou produziu. Certamente em cada uma delas h pontos positivos e negativos, no mesmo? Permita-se revirar o ba! Reveja arquivos salvos em seu computador, pea a um amigo uma cpia que se lembra de ter visto, e olhe atentamente, listando o que considera bom e o que, em sua opinio, poderia ser mudado. Preste ateno nas cores, nas fotografias e nos tipos de letras. Avalie a quantidade de texto em cada tela e os efeitos de transio. Sua lista ser seu guia quando tiver que tomar decises!

Falar em pblico pode tirar o flego de muita gente! Se voc uma dessas pessoas, confira as dicas de um especialista no assunto, acessando: <http://super.abril.com.br/cotidiano/como-falar-publico-614521.shtml>.

A ocupao da tela
Um dos princpios do design trata da relao entre as reas ocupadas e as no ocupadas. Seja na tela do computador, em um projeto de decorao ou na diagramao de uma revista, a regra a mesma: preciso que haja equilbrio entre as reas livres e as ocupadas. So as reas de grafismo e contragrafismos. Na prtica, voc deve reservar ao menos um tero da rea de que dispe para espaos no ocupados. Fuja da tentao de usar todos os espaos

disponveis com pequenas imagens, poluindo sua composio. reas arejadas garantem o conforto na leitura e resultam em uma composio mais profissional. Acomode o texto inicialmente, e ento atribua as respectivas ilustraes. Lembre-se: as telas devem servir como apoio para o tema que apresenta, e no tm a funo de substituir sua fala. Por isso, os textos devem ser breves e objetivos. Se voc tem interesse pelo assunto, leia A construo do livro, de Emanuel Arajo. Considerado a bblia dos editores, esse livro trata de assuntos como legibilidade, percurso da leitura, alinhamentos de texto e muito mais. Elementos alinhados na tela organizam a leitura, indicando ao leitor o incio e o final do contedo. D preferncia aos alinhamentos esquerda, com linhas que sempre iniciam do mesmo lado. Os alinhamentos justificados (alinhados esquerda e direita), embora muito bons para longos textos, podem ser prejudicados caso no seja possvel fazer diviso silbica. Reserve os alinhamentos centralizados s para ttulos, pois o incio e o fim de cada linha em pontos diferentes exigem um esforo extra do leitor. Imagens e recursos grficos como fios, tabelas e grficos tambm devem estar alinhados em relao ao texto. Lembre-se de reservar espaos de respiro na sua composio. Um espao maior entre as linhas de texto mais eficiente para a legibilidade do que letras muito grandes ou maisculas. Assim, aumente o entrelinhamento do texto para 1,5.

Para saber mais sobre o assunto, leia Web design para no designers, de Robin Williams e John Tollett.

Alinhamentos e entrelinhas
Como visto na unidade 3, o percurso da leitura ocidental da esquerda para a direita, de cima para baixo; e nossos olhos percorrem o texto em um movimento constante, interrompido por piscadelas imperceptveis. O caminho do olhar na leitura pode ser mais confortvel e produtivo se conhecermos o princpio do alinhamento. Veja como:

Padro grfico
Ao elaborar uma sequncia de telas, importante que formem um conjunto, ou seja, tenham um padro grfico. Voc pode conseguir esse efeito mantendo a coerncia na elaborao, com tamanhos iguais para letras de ttulos e texto, repetindo as fontes, alinhamentos e at mesmo as cores. Voc j deve ter visto apresentaes com verdadeiros mixes de efeitos e cores, e a cada tela, novas surpresas. Em situaes assim, a ateno da plateia est voltada para o recurso, e no para o contedo. Apresentaes profissionais so aquelas que garantem a legibilidade, cuja organizao tranquiliza e oferece ritmo para que o leitor concentre-se, favorecendo a fala e a sequncia de raciocnio do apresentador. Fuja da tentao de usar todas as ferramentas, cores, fontes e efeitos em uma nica apresentao, pois os excessos, quando o assunto design, so o oposto de profissionalismo.

Veja como a seguir.

Falando sobre imagens e tipos

As imagens O bom design de suas telas depende tambm de alguns cuidados na escolha e disposio das imagens. Se voc vai usar fotos ou ilustraes, certifique-se de que tenham boa definio, e, ao manusear o arquivo, tome cuidado com as distores: as imagens podem ser ampliadas ou reduzidas, mas para que a proporo seja mantida, use os pontos de seleo laterais. Alterar o tamanho de uma foto puxando os pontos medianos que aparecem quando a imagem est selecionada distorce a figura, achatando ou espremendo o resultado. Se voc resolveu usar ilustraes, tome o cuidado de escolher imagens com caractersticas semelhantes, e lembre-se: caso no tenha uma boa imagem, melhor no ilustrar. As batidas figuras que acompanham os programas podem comprometer o resultado de sua apresentao, por isso escolha usar arquivos de imagens disponveis na internet, alguns deles com um bom acervo gratuito. Apresentaes profissionais merecem cuidado: compre o direito de uso de imagens e no caso de fotos autorais, no esquea de creditar cada uma delas.

Se voc j tem as telas e textos, que tal pensar nos tipos e imagens?

Os tipos H uma infinidade de tipos de letras disposio. Alguns profissionais do design classificam as fontes em quatro categorias bsicas: as serifadas, as sem serifa, as manuscritas e as decorativas. Escolher o tipo certo para sua apresentao influenciar a percepo que sua plateia ter do contedo. A letra errada, alm de comprometer a esttica, pode tornar seu texto ilegvel e cansativo. Por fim, a escolha equivocada da letra pode colocar em risco sua credibilidade diante do seu pblico. Confira cada uma das categorias e quando podem ser utilizadas: 1. As serifadas: so formais e com alta legibilidade, e por isso so indicadas para grandes extenses de texto, pois as serifas ajudam no percurso que o olho faz durante a leitura. No entanto, no so muito eficientes em meios eletrnicos, embora sejam as preferidas pelos jornais e revistas. So boas opes para ttulos em meios eletrnicos. So exemplos de letras serifadas: Times New Roman e Garamond. 2. As sem serifa: tambm so indicadas para textos longos, especialmente no meio eletrnico. Conferem um ar profissional a sua apresentao, por sua regularidade e simetria. So exemplos de letras sem serifa: Arial, Gill Sans e Avant Gard. 3. As manuscritas: so todas as fontes que simulam a escrita

Para conhecer um banco de imagens, acesse <www.stockphotos.com.br>. Ao escolher as imagens, lembre-se de seu pblico: cartuns nem sempre combinam com o ambiente corporativo, mas podem surtir um bom efeito junto a um grupo de alunos. Os logotipos devem ser usados segundo o manual de estilo de cada corporao (na dvida, pea orientaes ao departamento de marketing da empresa). Por fim, nunca use imagens licenciadas sem a devida autorizao: personagens de histrias em quadrinhos, como Turma da Mnica, por exemplo, no tm seu uso liberado, e a utilizao no autorizada fere os direitos do autor. Sobreposio de texto em imagens Um dos princpios do design trata do contraste entre os elementos que compem um projeto. Se voc escolher escrever sobre uma foto, certifique-se de que h contraste entre as cores da imagem e a cor do texto. Alm disso, garanta a legibilidade usando o recurso de sombra no texto, destacando-o do fundo colorido.

manual. Essas devem ser usadas com muito cuidado, no devendo estar presentes em composies de maisculas ou em blocos longos de texto, e devem ser evitadas em situaes profissionais. So exemplos de manuscritas: Culrz e Comic Sans. 4. As decorativas: diferentes e engraadas, as letras decorativas devem ser usadas com cautela. Podem ser adequadas em ttulos, mas nunca em blocos de texto, isso em funo de sua pouca legibilidade. Fuja dos decorativos em situaes profissionais! So exemplos de tipos decorativos: Scarlett e Batik.

letras. Escolha um tamanho a ser utilizado nos textos e repita-o em todos os slides, fazendo o mesmo com os ttulos. A repetio confere elegncia e profissionalismo ao seu projeto grfico, garantindo unidade ao conjunto de telas.

Passeio na banca de jornal

Se voc ainda tem dvidas sobre como usar os tipos, v at a banca de jornal mais prxima. Escolha uma revista tradicional, e identifique as categorias dos tipos. Veja como as diferenas entre tamanhos de ttulos e texto so marcantes, e como as fontes se repetem ao longo de toda a publicao. Incorpore ao seu trabalho aquilo que identifica como positivo!

A combinao de tipos
Ao combinar os tipos em sua apresentao, use dois dos princpios do design: contraste e repetio. O contraste pode ser obtido por meio da combinao de uma mesma famlia de tipos com pesos diferentes, usando letras planas e letras negritadas, por exemplo. Voc tambm pode obter o contraste de tamanho, lembrando que as diferenas de tamanho entre corpo de texto e ttulo devem ser marcantes o suficiente para que sejam notadas, e nunca devem ser sutis a ponto de parecerem um engano! O contraste tambm pode ser obtido pela combinao de duas categorias diferentes de tipos, usadas em textos e ttulos, separadamente. A repetio pode ser alcanada pela presena constante de uma determinada fonte, alm da repetio dos padres de tamanhos de

possvel inserir fontes em seu computador, e h muitas opes gratuitas disponveis na internet. Se voc se interessa pelo assunto, confira alguns sites com uma pr-visualizao eficiente: <www.1001fonts.com> <www.netfontes.com.br>

Quando o assunto a cor

Ao escolher as cores que faro parte de sua composio, h

10

muito o que se considerar, desde aspectos psicolgicos at mesmo significados culturais. Mais do que refletir seu gosto pessoal, em sua apresentao, as cores devem estar associadas ao tema que trata, refletindo seus objetivos e estimulando seu pblico. Veja a seguir algumas informaes sobre as cores e situaes em que podem ser usadas: Vermelho: o vermelho conhecido no mundo inteiro como a cor do perigo. Para muitos povos, a cor mais importante pois evoca o calor, a paixo e a intensidade. Deve ser evitado como cor de fundo, devendo ser usado para chamar a ateno, preferencialmente sobre fundo branco. Amarelo: o amarelo frequentemente associado riqueza, sol e energia, e em muitas culturas est associado morte. Sobre o fundo preto, resulta de forma forte e vibrante, mas no deve ser aplicado sobre fundo branco, ou ainda como fundo para apresentaes eletrnicas. Verde: o verde proporciona a sensao de bem-estar e tranquilidade, e pode ser usado em muitas situaes, seja como fundo ou em texto. Os tons ctricos ou muito claros devem ser evitados como fundos para apresentaes eletrnicas. Azul: o azul pode ser utilizado com sucesso em textos ou como fundo de tela, pois uma cor que favorece a legibilidade. Est associado limpeza e elegncia, alm de tranquilidade.

Violeta: o violeta pode variar dos tons de lils aos roxos, que em algumas culturas est associado ao luto. Os tons claros podem ser usados sem tantas restries, mas os roxos inspiram cuidado, pois podem ser associados angstia e melancolia, e no devem ser utilizados como fundo de apresentaes. Laranja: o laranja associado dissimulao e inconstncia, e por isso deve ser utilizado com cuidado, em fios ou ttulos. Nunca deve ser usado em longos blocos de texto ou como fundo de tela. Branco: o branco representa a pureza, a limpeza, e, no Ocidente, a paz. Em contrapartida, no Oriente o branco est associado morte. Pode ser usado sem restries, e bastante indicado como fundo para apresentaes, especialmente nos casos em que no se conhece a condio de iluminao do ambiente de projeo. Preto: o preto, por definio, a ausncia de luz, portanto no cor. Para os ocidentais, representa tristeza e luto, e por isso deve ser evitado em situaes especficas. Pode ser usado em longos blocos de texto e como cor de fundo, acompanhado de cores vivas.

Se voc quer saber mais sobre esse assunto, leia O universo da cor, de Israel Pedrosa.

11

Finalmente, agora que voc j conhece um pouco sobre as cores, importante lembrar: evite a sobreposio de textos em quadros coloridos, que vo de um tom a outro em dgrad. A variao de cores de fundo inviabiliza a escolha acertada do tom das letras, e confunde a leitura. Prefira cores slidas, e use sempre a regra de contraste entre as cores de texto e fundo.

Sntese
Nesta unidade, voc tomou contato com os princpios do design aplicados a apresentaes eletrnicas. Agora voc j sabe como utilizar as cores, como planejar suas apresentaes, alm de conhecer tambm a classificao dos tipos. Muitos desses princpios podem ser utilizados tambm na elaborao de relatrios e apostilas, meios impressos de modo geral.

Confira no filme a importncia das cores na propaganda. Acesse: <http://www.youtube.com/watch?v=Uteluak2cYs&fea ture=related>.

Esperamos que suas apresentaes, renovadas, agradem sua plateia. Sucesso!

Pratique Praticando o que aprendeu! Reveja a cpia do arquivo que salvou no incio da unidade, promova as adaptaes conforme as sugestes que encontrou aqui e compare os resultados. Se necessrio, compare suas escolhas aos exemplos positivos e negativos de apresentaes eletrnicas. Agora que voc j conhece os princpios do design, no ter dificuldades em identificar os erros, corrigindo-os. Bom trabalho!

12

Referncias Bibliogrficas
ARAJO, Emanuel. A construo do livro. Rio de Janeiro: Nova Fronteira; Braslia: INL Instituto Nacional do Livro, 1986. PEDROSA, Israel. O universo da cor. Rio de Janeiro: Editora SENAC Nacional, 2003. WILLIAMS, Robin. Design para quem no designer. So Paulo: Callis, 1995. WILLIAMS, Robin e TOLLETT, John. Web design para no designers. Rio de Janeiro: Cincia Moderna, 2001.

13