Apostila Comunicação Visual para Web
81 pág.

Apostila Comunicação Visual para Web


DisciplinaWeb para Comunicação2 materiais12 seguidores
Pré-visualização12 páginas
Comunicação Visual Para Web
Edição nº1 - 2007
 
Prof. Giu Vicente
 
 
 
Apoio Gestão e Execução Conteúdo e Tecnologia
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
2
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 \u2013 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.
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
3
SUMÁRIO
CARTA DO PROFESSOR ............................................................................................. 4
CRONOGRAMA DE ESTUDOS .................................................................................... 5
PLANO DE ESTUDOS ................................................................................................... 6
1. PRIMEIROS PASSOS DE UM PROJETO DE WEBSITE .............................................. 7
2. PROJETO GRÁFICO ............................................................................................... 23
3. FUNDAMENTOS SOBRE IMAGEM ......................................................................... 34
4. FIREWORKS ........................................................................................................... 47
5. DESENVOLVENDO UMA SOLUÇÃO REAL ............................................................ 69
REFERÊNCIAS .......................................................................................................... 79
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
4
Carta do Professor
\u201cO único local onde 
o \u2018sucesso\u2019 vem antes do \u2018trabalho\u2019 
é no dicionário.\u201d
Albert Einstein
 Caro aluno \u201cdesigner\u201d,
 Trabalhar com Internet, desenvolver para Internet, é uma atividade de grande 
atuação no mercado hoje. Você está entrando em uma profissão do futuro, e pessoas 
assim devem estar sempre atentas ao seu redor.
 Não aprendemos somente em uma sala de aula, com um livro, ou com um pro-
fessor (mesmo que sejam ótimos e importantes). Também é possível aprender pela 
observação e análise. Observe as pessoas acessando a Internet, você vai aprender 
muito: verá onde elas clicam, que caminho percorrem, se demoram em mudar de pá-
gina, etc. Observe outros sites, navegue como observador. Na maior parte das vezes, 
você vai captar coisas interessantes; em outras, coisas que não vai querer repetir de 
forma alguma. Afinal desenvolver para a Internet é, na verdade, desenvolver para o 
internauta, em quem se deve pensar a maior parte do tempo.
 Espero que você se conecte neste mundo de web design e que possa se de-
senvolver.
 Professor Giu Vicente
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
5
Cronograma de Estudos
 Acompanhem no cronograma abaixo os conteúdos das aulas, e atualize as 
possíveis datas de realização de aprendizagem e avaliações.
Semanas Horas/aula Conteúdos Data/Avaliação
1 10
PRIMEIROS PASSOS DE UM 
PROJETO DE WEBSITE: brie-
fing; arquitetura da informação; 
wireframes; usabilidade; naveg-
abilidade.
_/_ a _/_
1 5
PROJETO GRÁFICO: Identida-
de Visual; Cores; Tipografia; 
Gráficos.
_/_ a _/_
2 10
FUNDAMENTOS SOBRE IMA-
GENS: Raster vs Vetorial; Ima-
gens na Web; GIF; JPG; PNG; 
Utilização das imagens; Profun-
didade de cor; Formato de Ar-
quivos.
_/_ a _/_
2 15
\u2022 FIREWORKS: Conhecendo o 
software; Criando e exportando 
documentos; Ferramentas de 
criação e edição.
\u2022 DESENVOLVENDO UMA 
SOLUÇÃO REAL: Criando ele-
mentos; Exportando/Importando 
imagens; Criando o HTML.
_/_ a _/_
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
6
Plano de Estudos
Bases Tecnológicas 
 Arquitetura da informação; Wireframe; Navegabilidade; Usabilidade; Identidade 
Visual; Imagens digitais; Software gráfico.
Objetivo Geral
\u2022 Desenvolver web sites com metodologia e conceitos de design e usabilidade.
Objetivos Específicos
\u2022 Estudar a organização de sites
\u2022 Compreender a importância da usabilidade e navegabilidade
\u2022 Projetar o design de web sites
\u2022 Interpretar elementos de identidade visual
\u2022 Trabalhar com tipos de arquivos de imagem
\u2022 Desenvolver \u201cinterfaces\u201d de web sites em software gráfico.
Carga Horária: 40 horas/aula
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
7
Aula 1
Primeiros Passos de Um Projeto de
Website
Objetivos da aula 
 Ao final desta aula, você deverá ser capaz de:
\u2022 Verificar a necessidade do planejamento de web sites;
\u2022 Identificar a prática de um projeto de arquitetura da informação;
\u2022 Desenvolver wireframes para aprovação e testes;
\u2022 Constatar a existência e a importância da usabilidade e da 
navegabilidade.
Conteúdos da aula 
 
 Acompanhe os conteúdos desta aula. Se você preferir, as-
sinale-os à medida em que for estudando.
\u2022 Briefing
\u2022 Arquitetura da Informação
\u2022 Wireframes
\u2022 Usabilidade
\u2022 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.
\u201cMãos à obra\u201d e boa Aula!
Comunicação Visual Para WEB 
SOCIESC - Sociedade Educacional de Santa Catarina 
8
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:
» Qual o segmento da empresa e quais serviços/produtos oferece?
»