Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila Comunicação Visual para Web PDF
Apostila Comunicação Visual para Web PDF
Apresentação
Este livro didático contém a disciplina de Comunicação Visual Web, cujo con-
teúdo, ora apresentado, coloca você diante de um novo desafio: obter conhecimentos
para desenvolver comunicação visual para a Internet.
Comunicar é um ato comum a todos os seres humanos. Você se comunica a
todo o momento e não é só falar com os outros, é expressar-se, é fazer-se entender.
Comunicação é interação. Se formos pensar em todo o processo (e resumir o que
estudiosos dizem) a comunicação não acontece sozinha, precisa de um emissor, um
meio, uma mensagem e um receptor.
Você se comunica pelas roupas, cabelo, olhar ou não olhar, tipos de comuni-
cação mais comuns que conhecemos.
Neste livro você encontrará um tipo de comunicação considerado novíssimo,
no mercado de trabalho, o visual – linha do design gráfico que hoje assume o papel
de designer de interação, mas vai além disso. Um designer de interação planeja como
as informações serão agrupadas e apresentadas para o internauta. Discute quais as
ações de uma página, quais os eventos, o que será apresentado, entre outras tantas
coisas relacionadas ao internauta.
É importante ressaltar que o livro foi desenvolvido com o objetivo de oferecer
um aprendizado independente, inerente aos estudos do EAD, e o conteúdo foi revi-
sado com o intuito de oferecer uma linguagem simples, objetiva e estimulante.
Lembre-se de que a sua passagem por esta disciplina será também acompa-
nhada pelo Sistema de Ensino Tupy Virtual, seja por correio postal, fax, telefone, e-
mail ou Ambiente Virtual de Aprendizagem.
Entre sempre em contato conosco quando surgir alguma dúvida ou dificulda-
de. Toda a equipe terá a maior alegria em atendê-lo(a), pois o seu aprendizado nessa
jornada é o nosso maior objetivo.
Acredite no seu sucesso e bons momentos de estudo!
Equipe Tupy Virtual.
SUMÁRIO
Carta do Professor
“O único local onde
o ‘sucesso’ vem antes do ‘trabalho’
é no dicionário.”
Albert Einstein
Cronograma de Estudos
Plano de Estudos
Bases Tecnológicas
Arquitetura da informação; Wireframe; Navegabilidade; Usabilidade; Identidade
Visual; Imagens digitais; Software gráfico.
Objetivo Geral
• Desenvolver web sites com metodologia e conceitos de design e usabilidade.
Objetivos Específicos
• Estudar a organização de sites
• Compreender a importância da usabilidade e navegabilidade
• Projetar o design de web sites
• Interpretar elementos de identidade visual
• Trabalhar com tipos de arquivos de imagem
• Desenvolver “interfaces” de web sites em software gráfico.
Aula 1
Primeiros Passos de Um Projeto de
Website
Objetivos da aula
Conteúdos da aula
Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
• Briefing
• Arquitetura da Informação
• Wireframes
• Usabilidade
• Navegabilidade
Prezado(a) aluno(a)!
Antes de partirmos para a execução técnica do Layout,
temos alguns passos fundamentais para analisar que
trarão resultados mais eficientes para o nosso produto final.
“Mãos à obra” e boa Aula!
1 BRIEFING
Esta estranha palavra, Briefing, é mais utilizada pelos publicitários, que gostam
de estrangeirismos. Nós, do meio de informática, também utilizamos muitos deles,
inclusive briefing. Para simplificar a história, poderíamos chamar o briefing de: Ques-
tionário para definição de objetivos.
São informações que você irá obter em uma entrevista com o cliente, e nin-
guém, além dele, pode responder às perguntas.
Entre outras perguntas podemos partir para o básico:
Algumas empresas partem para o marketing digital, o que deve ser previsto
aqui, mas para nosso estudo isso é outra fase.
Com as respostas do briefing em mão, vamos definir como deve ser o site. Va-
mos partir de uma empresa que queira:
• mostrar sua história, abrangência, etc. - (A empresa);
• mostrará também seus serviços e produtos - (Serviços);
• deseja dar destaque para os clientes e os casos já realizados - (Clientes);
• quer deixar um espaço para que o cliente entre em contato - (Fale conosco).
De maneira bem simples, descrevi e organizei o que seria um agrupamento
dos assuntos relacionados. Agora vamos ver esses mesmos procedimentos sob uma
nova estrutura, observe a figura 1.
página contato. Essa é uma página importante para que o cliente tenha aproximação
com a empresa, por isso, muitas páginas têm links diretos com ela.
Arame – essa é a definição mais próxima do que significa wireframe. Com esse
método desenha-se o conceito, estrutura-se o resultado do briefing. Você deve pensar
e esquematizar em que posição estará o menu, a busca, o conteúdo, a logo. É a fase
em que você testará a organização do conteúdo a ser apresentado na página, o todo.
Ainda não estamos falando de estilo visual, nem de cores, nem de imagens, mas de
disposição de conteúdo. Esse é o primeiro passo antes de iniciarmos o desenvolvim-
ento do design gráfico da página.
Para esse procedimento, podemos utilizar papel e lápis (figura 2). Como nes-
sa fase não estamos falando de cores, mas de conteúdo, devemos utilizar tons de
cinza (variação do preto até o branco) para destacar a importância das áreas (figura
3). Quanto mais escuro, mais importante. (Isso não é uma regra, mas pode ajudar).
Na criação das propostas, logo após, criamos os melhores desenhos em
qualquer ferramenta gráfica (figura 4). Se você achar melhor, pode ser o Paint
Brush, o Corel Draw, o Fire Works. Na verdade, você deve utilizar uma ferramen-
ta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.
Felipe Memória - o designer que reformulou todo o site da globo.com - em seu livro
Design: projetando a experiência perfeita (2006), comenta que a estrutura mais uti-
lizada no mundo ocidental se aproxima do que mostramos na Figura 5.
Preste atenção: isto é uma convenção não uma regra, mas para sites cujo
objetivo seja a simplicidade e a correta comunicação, serve como uma luva.
Para mostrar que nem tudo que é fora das convenções é ruim, seguem ima-
gens de sites fantásticos, cuja estrutura convencional pode ser muito bem explorada
com um projeto gráfico diferenciado.
A Figura 6 mostra o site da Selbetti Gestão de Documentos, cuja navegação
interna, do lado direito, e o menu, do lado esquerdo, fogem ao padrão tradicional, mas
não comprometem a navegação e a organização. A logomarca, assinatura e o con-
teúdo do site mantêm o padrão.
Figura 8 - Adobe
Fonte – www.adobe.com.br
A Adobe (Figura 8), hoje uma das maiores empresas de software para com-
putação gráfica e desenvolvimento web, tem o seu layout como padrão estabelecido.
A logo, navegação vertical e a área de pesquisa seguem o padrão. Mostra a barra su-
perior completa, assinatura no rodapé, os links principais do site, além de informações
sobre a empresa.
O Café Colombo é um site mais voltado ao cultural, com artigo e podcasts (Pod-
cast é uma publicação de uma entrevista, programa de rádio, leitura, etc. em formato de áudio.) (Figura
9) Apresenta-se graficamente com um estilo diferente, mas a sua estrutura é a mesma
do padrão definido por Memória. Perceba, em suas navegações, que esse padrão fa-
cilita a navegação do usuário que não precisa “tentar” entender o site, apenas busca
nas áreas convencionadas o que realmente deseja.
Podemos observar, na figura 10, que a Apple, uma das empresas vanguardistas
em tecnologia, também não foge à regra. A logo, navegação e assinatura se mantêm
com as funções padrão. Além do posicionamento clássico, a grande diferença do site
é o conteúdo, sempre diferente em cada categoria. A formatação da página permite
desvincular o topo e a assinatura do “miolo” (centro da página), totalmente liberado
para a criatividade.
Dicas »
O logotipo da empresa deve, preferencialmente, ser mantido à esquerda, pois
deve ser o primeiro elemento que o usuário verá, identificando onde ele está;
» A navegação deve estar em locais acessíveis.
» Repito: Não é uma regra! Todos esses estudos são as melhores práticas que
conhecemos hoje. O que faremos é uma convenção, mas fique à vontade para
ser criativo a cada projeto, com os devidos cuidados.
2 USABILIDADE
Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar
o sistema, em qual mídia, com qual tecnologia e de que maneira. A usabilidade serve
para todos os produtos que têm interface com o usuário. Chamo de interface o painel
de botões de um liquidificador, por exemplo. A usabilidade está atrelada à ergonomia,
outro assunto bem interessante.
Vamos exemplificar a usabilidade com um celular. Para que tenham noção do
que estamos falando, peguem o celular ou circulem os celulares entre vocês e nave-
guem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os
acessos são diferentes entre aparelhos e fabricantes. Pensar nesse acesso é pensar
em usabilidade, pensar que normalmente utilizamos uma das mãos, ou menos, utiliza-
mos um dedo apenas. Essa dificuldade ou facilidade é um exemplo de usabilidade.
3 NAVEGABILIDADE
» Onde estou?
» De onde vim?
» Para onde vou?
Síntese da Aula
Exercícios Propostos
1) Vamos partir para estudos práticos e ligados à teoria. Escolha duas das figuras
apresentadas (entre a Fig. 6 e a Fig. 10) e faça análises das dicas de erros e acertos
apresentados por Nielsen.
Aula 2
Projeto Gráfico (Design)
Objetivos da aula
Conteúdos da aula
Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
• Identidade Visual
• Cores
• Tipografia
• Gráficos
Prezado(a) aluno(a)!
Já temos o esqueleto – o wireframe. Temos os órgãos
– o briefing. Agora precisamos da musculatura e da pele.
Parece papo de cientista maluco, tipo Frankenstein ou Eduard´s-
mãos-de-tesoura, mas vamos realmente dar uma cara adequada
ao projeto, vamos dar vida ao que já planejamos.
Boa aula!
1 IDENTIDADE VISUAL
1.1 Cor
Cores são elementos de identificação, mas, algumas vezes, podem fazer com
que seus usuários fujam do site.
Inconscientemente nos sentimos bem com algumas cores e mal com outras,
depende do usuário, porém, podemos criar algumas regras para que isso não fuja
tanto dos padrões.
As cores que utilizamos para a Internet são RGB – cores aditivas. Com a soma
das três cores (red, green, blue) chega-se ao branco, ao contrário do CMYK – cores
subtrativas (cyan, magenta, yellow) – cuja soma nos dá o preto (K).
Cores aditivas são aquelas cuja soma de TODAS as cores do espectro nos dá
a cor branca, ou seja, essas cores são emissoras de luz, pois são utilizadas em moni-
tores, televisões, celulares e todos os tipos de monitores de imagem. As subtrativas
são as reflexivas, pois somadas chegam à cor preta. São utilizadas em impressões
como livros, revistas, cartazes, etc.
Pense nos sistemas de cores aditivos como as cores que são luz e as sub-
trativas, que não são luz. Se você estiver em uma sala sem nenhuma luz, nenhuma
mesmo, e estiver vendo uma cor, ela está num sistema aditivo. Caso você nada veja,
então é subtrativo, pois precisam de luz para poder existir.
Falando em luz, você já viu uma luz negra?
Observe:
Definição
» RGB = Red, Green & Blue – Vermelho, Verde e Azul
» CMYK = Cian, Magent, Yellow & Black – Ciano, Magenta, Amarelo e Preto
1.2 TIPOGRAFIA
A figura 12 apresenta algumas tipografias que se enquadram nas nossas de-
finições:
Podemos observar que os números 1 e 2 são fontes serifadas, comparadas,
apresentam uma diferença bem acentuada. Já os números 6 e 7 são fontes sem se-
rifa, ou ainda, bastões.
As fontes 3 e 4 são semiserifadas, têm elementos de serifa, mas não se com-
portam totalmente assim.
Como forma script temos as de número 4 e 5. Veja que a 5 deriva da marca de
um seriado para TV, você adivinha qual?
1.3 GRÁFICOS
Nem só de textos vivem os sites, afinal, imagens também são conteúdo. O uso
de gráficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout
devem ajudar a ilustrar a interface e envolver as pessoas. Ícones e símbolos ajudam a
referenciar e a identificar a informação visualizada ou requerida. Por exemplo: ícones
de impressão, botão fechar, “casinha” (ir para a página principal), ícone de áudio e/ou
vídeo, marcadores de listas, etc.
b) Alinhamento - Para alguns estudiosos devemos criar uma malha (como uma ma-
triz) para distribuir logicamente o conteúdo. É um exercício bem útil para você que
está iniciando. Veja exemplos de malhas em sites conhecidos:
c) Repetição - A repetição faz com que você referencie rapidamente algo da mesma
família. Por exemplo, se temos um ícone para fotos – uma máquina digital – que se
repete várias vezes, já clicamos em um ou dois deles e sabe-mos que nos leva a uma
página só de fotos. Claro que, se eu observar mais vezes esse ícone, sempre associa-
rei com a página extra de fotos, por isso, cuidado com a similaridade dos ícones para
não causar o que chamamos de ruído na comunicação.
Portanto, tamanhos de áreas, fontes, imagens, etc., são sim uma forma de i-
dentificar famílias. Cuidado para não confundir o seu usuário.
Vamos verificar o site a seguir (figuras 13 e 14) e a análise que podemos faz-
er:
Síntese da Aula
Exercícios Propostos
4) Com base no item 2.2, encontre um site e faça as análises e encontre os números
de 0 a 5 (se existirem todos).
Aula 3
Fundamentos Sobre Imagens
Objetivos da aula
Conteúdos da aula
Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
• Raster vs Vetorial;
• Imagens na Web;
• GIF;
• JPG;
• PNG;
• Utilização das imagens;
• Profundidade de cor;
• Formato de Arquivos.
Prezado(a) Aluno(a)!
Vamos definir algumas premissas para o nosso trabalho:
Partamos do ponto que para se trabalhar com computação gráfica
é necessário conhecer, no mínimo, como funcionam as imagens e
seus tipos. Pronto, agora você entendeu por que vamos estudar os
temas seguintes.
Boa Aula!
1 INTRODUÇÃO
Anos atrás, a Web não passava de texto na cor preta sobre um fundo cinza. As
poucas imagens demoravam “três semanas” para carregar, um pão francês custava
dois centavos e eu tinha que caminhar na lama quando chovia para ir à escola. Os
tempos mudaram, o pãozinho se cobra pelo peso e a Web tornou-se um lugar onde
os visitantes esperam encontrar imagens profissionais.
Se você não souber como tirar vantagem do potencial da Web, a história vai se
repetir: Sua página levará três semanas para carregar e você vai receber um bilhete
para ser entregue aos seus pais convidando-os a uma reunião de pais e mestres, para
falar sobre o seu “mau rendimento em aula”, pois não assimilou nada do que deveria
aprender sobre os assuntos até aqui ministrados!
O primeiro passo para você entender como criar e gerenciar gráficos para a
Web é compreender o que propriamente são as imagens. As imagens eletrônicas são
feitas de milhares de pequenos pontinhos coloridos chamados de “pixels”. Os pixels
são tão pequenos que um deles sozinho não pode ser captado pelo olho humano, por
isso eles dão a ilusão de uma imagem contínua. É assim que todas as imagens que
você vê em seu computador funcionam. Claro, você já olhou na tela da TV com uma
lupa quando era criança. Se não, vá e faça isso agora mesmo.
Algumas telas têm pontos, outras têm linhas, mas o princípio é o mesmo. En-
tão, continue lendo e eu vou ajudar a preparar você para manejar seus pixels corre-
tamente.
2 RASTER X VETORIAL
3 Formatos da Web
Arquivos GIF são melhores para imagens com poucas camadas de cores (fi-
gura 17). Use-os para “imagens de apresentação”: gráficos, figuras ou imagens de
texto. Quanto menos cores você usar, mais eficiente será o arquivo GIF. Um arquivo
do tipo GIF pode conter no máximo 256 cores.
Arquivos GIF podem ser “entrelaçados” assim eles parecem “fade in” (vão a-
parecendo aos poucos), de uma menor para uma maior qualidade enquanto estão
carregando. Isso proporciona aos visitantes algo para ser visto enquanto esperam.
Arquivos GIF podem ser transparentes. Significa que você pode escolher uma
ou mais cores para “não serem” mostradas, permitindo que as cores do fundo da sua
página apareçam através delas. Isso evita que os gráficos dêem a impressão de es-
tar em caixas, causando, visualmente, a impressão de que estão mais integrados com
a página.
Os arquivos GIF são “lossless”, significa que a qualidade da imagem não é
degradada pelo processo de compressão.
Podem ser animados, como filmes, só que bem mais simples. As GIF’s anima-
das simulam movimento usando uma série de imagens individuais.
Os arquivos GIF não são bons para fotografias – perdem qualidade e os arqui-
vos não serão compactos. Use arquivos JPG para fotos.
PNG é o mais novo formato de arquivo gráfico para a Web, por isso, só é su-
portado pelos navegadores mais novos. Esses arquivos não aparecerão em nave-
gadores antigos, por essa razão, ao usar o formato PNG, você pode fazer com que
visitantes do seu site não consigam ver as suas imagens. Em alguns testes, os na-
vegadores FireFox e o IE7 já aceitam esse formato.
Arquivos PNG são compactos e versáteis e podem combinar as melhores
O erro mais comum que as pessoas cometem, quanto às imagens para a Web,
é usar o formato errado para essas imagens, mas a escolha é simples:
DICAS
» Se a imagem tem poucas cores, escolha GIF;
» Se a imagem tem muitas cores (como uma foto), escolha JPG;
» Se o público do seu site utiliza FireFox ou IE 7, use PNG quando necessário.
DICA:
Embora você deva usar GIF ou JPG como gráficos para a web, salve o seu arquivo
original em um formato como TIF (Tagged Image File Format) ou o formato nativo de
seu software gráfico. Por quê? Porque você preserva a resolução e a qualidade da
imagem original, para novamente usá-la ou não na web!
No Brasil, como temos preços elevados para artigos tecnológicos, ainda não há
(a grande maioria) monitores e placas de vídeo que nos permitam trabalhar com uma
resolução de tela de 1024x768px, mas grande parte dos designers está fazendo seus
layouts fluidos. O que quer dizer isso?
Normalmente os usuários domésticos utilizam resolução de 800 x 600px, mas
com CSS e outras tecnologias, você consegue utilizar layouts que podem se adaptar
para telas maiores ou menores. Esse é um tópico específico, que você deve procurar
quando dominar os itens básicos.
IMPORTANTE
Para desenvolver um site para a resolução de 800x600, NUNCA CRIE O LAYOUT
COM 800x600, pois a área útil desta resolução é de 770x440px aproximadamente,
ou seja, você sempre perderá espaço para menus do seu navegador e da barra ini-
ciar do Windows, por exemplo.
Em monitores coloridos, cada pixel pode exibir certo número de cores, que
vão de 16 (4-bit) a 16 milhões. A maioria dos computadores, hoje em dia, pode exibir
65.000(16 bits) cores. Novos computadores exibem de 65.000. (16-bit) a 16 milhões
de cores.
Síntese da Aula
Exercícios Propostos
3) Lendo as características deste capítulo, você utilizaria arquivos GIF para fotogra-
fias? Por quê?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
____________________________________________________________________
Aula 4
Fireworks
Objetivos da aula
Conteúdos da aula
Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
• Conhecendo o software;
• Criando e exportando documentos;
• Ferramentas de criação e edição.
Prezado(a) Aluno(a)!
Nesta etapa, serão apresentados os principais recur-
sos utilizados para desenhar páginas Web, usando
como ferramenta o software Fireworks. Embora possua uma in-
finidade de recursos e de funcionalidades, os tópicos abordados
proporcionarão conhecimento necessário ao desenvolvimento de
soluções gráficas para Web.
Familiarizado(a) com o software, será proposto o desen-
volvimento de Layout para um Hotsite, baseado no Caso de Uso
da empresa Salvador Móveis.
Boa aula!
1 VISÃO GERAL
Nota: Foi utilizada a versão 8.0 (inglês) do Fireworks para esta apostila. A
apresentação a seguir pode exibir um ambiente ligeiramente diferente dependendo
de qual versão do software você está praticando. No entanto, o conceito deve seguir
o mesmo contexto.
2 CONHECENDO O BÁSICO
1. Ative o Fireworks;
2. Escolha File > New na barra de menus (figura 19);
3. Na caixa de diálogo, informe o Width e Height. Esses valores correspondem à Lar-
gura e à Altura em pixels, polegadas ou centímetros;
4. Ative a opção White para selecionar a cor Branca de fundo para a nova imagem;
defina Transparent para deixar o fundo sem nenhuma cor ou selecione Custom para
escolher uma cor personalizada.
3 Exportação de documentos
Por padrão, o Fireworks não traz ativa a Barra de Ação Principal, que possibi-
lita o acesso rápido à função para criar novos documentos, salvar e imprimir. Similar
a diversos outros aplicativos, está disponível o recurso para Desfazer ou Refazer um
ponto de edição.
Para ativar a Barra de Ação Principal, selecione na Barra de Menus Windows
> Toolbars > Main (figura 25).
Conforme a Figura 30, é possível perceber o uso das duas ferramentas de se-
leção de pixels - Marquee e Lasso -, assim como a Ferramenta Erase, após remover
os pixels da área apontada.
Para exportar esse tipo de seleção, selecione o menu File > Export e informe
o formato HTML para gerar uma página da Web como resultado do Layout.
Objetos vetoriais possuem entre suas propriedades a cor de fundo assim co-
mo cor da borda. Para editar um dessas configurações, basta selecionar o objeto
desejado e escolher uma cor usando a Paleta de Cor Padrão do Fireworks, similar
à Figura 35. Também é possível fazer uma sintonia fina da seleção de cor, usando a
Seleção Avançada conforme ilustra a Figura 36.
Mascara é um recurso versátil para criar efeitos utilizando mais de dois obje-
tos. Com esse recurso, é possível mesclar duas imagens e manter algumas proprie-
dades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em segui-
da, selecione Modify > Mask > Group as Mask.
Veja o exemplo da Figura 42.
um único trajeto fechado, ou é possível juntar objetos múltiplos para criar um único
objeto.
Podemos observar, na figura 43, à esquerda, dois objetos sobrepostos, um
quadrado e um circulo. Logo em seguida vemos o resultado, ao aplicar o efeito union
que descartou toda a área que unia os dois objetos. Ao contrário da union, o efeito
intersect é excelente para realizar o inverso e manter apenas as áreas comuns entre
os objetos. Finalmente, o efeito punch remove apenas uma parcela do objeto sele-
cionado, utilizando como orientação o objeto que está imediatamente sobreposto ao
primeiro.
Para utilizar esses efeitos, selecione os objetos cuja forma deseja modificar,
selecione Modify > Combine Paths e aplique o efeito desejado: Union, Intersect ou
Punch.
Síntese da Aula
Exercícios Propostos
Aula 5
Desenvolvendo Uma Solução Real
Objetivos da aula
Conteúdos da aula
Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
• Criando elementos;
• Exportando / Importando imagens;
• Criando o HTML.
Prezado(a) Aluno(a)!
Após familiarizar-se com o ambiente do Fireworks e
seus principais recursos, será apresentado, passo-a-
passo, o desenvolvimento de um Layout para um Hotsite baseado
no Caso de Uso da empresa Salvador Móveis.
Boa aula!
Teremos duas chamadas em texto: uma principal e outra que será a assinatura
da página.
Para esse procedimento, utilize a Ferramenta de Text , modificando suas
propriedades pelo Painel Inspetor de Propriedades.
Veja o resultado na Figura 47.
O processo de desenho do Layout está completo, agora será usada uma fer-
ramenta especial para cortar a imagem.
Na Caixa de Ferramenta, selecione o recurso Crop , e defina a área da i-
magem que deve ser cortada. A Figura 48 ilustra os dois momentos, da seleção até a
imagem já cortada.
Síntese da Aula
Nesta quinta e última aula verificamos como se cria uma estrutura visual no
Fireworks, passando por várias ferramentas e chegando até a sua exportação para
sites, com o cuidado de otimizar o tempo de download para o usuário.
Concluímos este módulo, você chegou lá!
Parabéns!
Exercícios Propostos
1) Agora que você já fez todas as aulas, sugiro que utilize tudo o que aprendeu para o
seu proveito, em um exercício possível de utilizar em outras aulas: fazer o seu site.
Hoje quem tem um currículo bem feito e com conteúdo de qualidade se destaca no
mercado. Imagine se você tiver uma página na internet?
A idéia é você criar nesse exercício, uma página com o seu currículo. Elabore a iden-
tidade visual, estruture o que quer apresentar, se quer colocar algo mais do que suas
aulas, fale do curso de EAD, fale das atividades que realiza, os livros que leu, etc.
Utilize tudo o que você aprendeu até agora. Se o resultado for bom, quer dizer que
você tem um bom currículo nas mãos e que realmente aprendeu.
Guarde esses arquivos, pois em outras disciplinas você pode utilizar para programar,
linkar e publicar.
Aproveite.
REFERÊNCIAS
LEMAY, L. Aprenda a Criar páginas Web com HTML e XHTML em 21 dias. Makron
Books 2002. 1110p.
WILLIAMS, R. Design para quem não é designer. 2. ed. [S.l.]: CALLIS, 2005.191 p.
Sobre o Autor
Design institucional: Thiago Vedoi de Lima; Cristiane de Oliveira - Joinville: Tupy Virtual, 2007
Créditos
SOCIESC – Sociedade Educacional de Santa Catarina Design Gráfico
Thiago Vedoi de Lima
Tupy Virtual – Ensino a Distância
Equipe Didático-Pedagócia
Rua Albano Schmidt, 3333 – Joinville – SC – 89206-001 Giuliano Vicente
Fone: (47)3461-0166
E-mail: ead@sociesc.org.br
Site: www.sociesc.org.br/portalead EDIÇÃO – MATERIAL DIDÁTICO
Coordenador do Curso
Juliano Prim
Coordenador de Projetos
José Luiz Schmitt
Revisora Pedagógica
Nádia Fátima de Oliveira