Comunicação Visual Para Web

(1)

Prof. Giu Vicente

Apoio Gestão e Execução Conteúdo e Tecnologia

(2)

SOCIESC - Sociedade Educacional de Santa Catarina

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.

(3)

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

(4)

Carta do Professor

“O único local onde o ‘sucesso’ vem antes do ‘trabalho’

é no dicionário.”

Albert Einstein

Caro aluno “designer”,

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 professor (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 desenvolver.

Professor Giu Vicente

(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: briefing; arquitetura da informação;

wireframes; usabilidade; navegabilidade.

_/_ 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

• FIREWORKS: Conhecendo o software; Criando e exportando documentos; Ferramentas de criação e edição.

• DESENVOLVENDO UMA

SOLUÇÃO REAL: Criando elementos; Exportando/Importando imagens; Criando o HTML.

_/_ a _/_

(6)

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.

Carga Horária: 40 horas/aula

(7)

Primeiros Passos de Um Projeto de Website

Objetivos da aula

Ao final desta aula, você deverá ser capaz de:

• Verificar a necessidade do planejamento de web sites;

• Identificar a prática de um projeto de arquitetura da informação;

• Desenvolver wireframes para aprovação e testes;

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

• 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!

(8)

SOCIESC - Sociedade Educacional de Santa Catarina 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?

» Quem é o público-alvo?

» Qual o objetivo do site? (Comunicar / vender / ensinar)

» Qual a identidade da empresa? Como quer ser vista? (apropriar-se da identidade existente)

» Índice do conteúdo. (Tópicos gerais e específicos para se poder construir a arquitetura)

Algumas empresas partem para o marketing digital, o que deve ser previsto aqui, mas para nosso estudo isso é outra fase.

1.1 Arquitetura de Informação (AI)

Temos grande parte das informações, mas: como vamos organizá-las?

1.1.1 Arquitetura? Isso é informática?

No dicionário, a palavra arquitetura significa: “arte de edificar ou de projetar e traçar planos”. Exatamente o que faremos: estruturar e planejar a informação do site, conteúdos relacionados entre si e a estruturação dos fluxos de navegação.

Aqui faremos o possível para que o usuário não se perca, navegando sem ter que pensar muito, de modo fácil e intuitivo.

(9)

do site.

1.1.2 Como faço isso? – O mapa

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.

Figura 1 – Mapa do site.

Construa sempre um mapa, pense num esquema estrutural, como um fluxo- grama, por exemplo, o que ajudará você a entender melhor o todo do site.

(10)

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.

Lembre-se: quanto maior o website, mais complexa será sua arquitetura de informação.

1.2 Wireframes: o esqueleto do site

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 nessa 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 ferramenta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.