Web Design
Professor: Charles Jefferson
Plano de Ensino

Unidade Curricular: Web Design

Carga Horária: 80 Horas

Curso: Informática para Internet

Modalidade: Técnico Subsequente

PROFESSOR: Charles Jefferson R. Alves e Alves
Objetivo

Identificar e definir os princípios básicos do design.

Transmitir os fundamentos do design aplicados à web.

Proporcionar conhecimentos teóricos e práticos para que se utilize técnicas de
Webdesign com coerência e criatividade de forma a comunicar o público
desejado.

Apresentar os princípios básicos de funcionamento dos principais softwares
usados no Webdesign.

Adquirir visão crítica em relação às cores e imagens inseridas numa home page.

Capacitar o aluno a desenvolver homepages e websites interativos, utilizando
ferramentas comuns do mercado.
Habilidades

Desenvolver o sentido de organização de mensagens visuais via a utilização
adequada dos componentes básicos de programação visual.

Conhecer as ferramentas e desenvolver técnicas de produção de artes
gráficas, através de um treinamento em criação.

Manipular e tratar imagens vetoriais e bitmap.

Utilizar os elementos da tipologia e da psicologia das cores na criação de
páginas para a web.

Utilizar os princípios da comunicação visual intencional na produção de
páginas para a web.

Analisar e propor mudanças para elementos de identidade visual.
Habilidades

Conhecer as potencialidades e aplicar os componentes e ferramentas do
software gráfico.

Conhecer modelos de cores e formas de preenchimento.

Aplicar conceitos de identidade visual.

Criação e aplicação de conteúdos para sites multimídia e com interatividade
com o internauta.
Conteúdo Programático

Planejamento Visual: Design para a web (atração, harmonia, equilíbrio,
simplicidade ). Forma e função. Movimento. Como objetivar o conteúdo.
Como desenhar a informação. Imagens para a web. Tipografia. Softwares. Cor
e teoria da cor. Combinação de cores.

Formatos de sons e imagens para a web. Portais e websites institucionais.
Websites corporativos.

Websites profissionais. Estruturação: Organização; Irrelevantes; Redundância
e ausência; Inconsistência; Convenções da web; Definição de espaço.
Brainstorming, planejar. Elementos da web: Caixa de buscas; Menus de
navegação; Ícones; Manipulação de imagens; Marcas e logotipos; Rodapé;
Slogan; Menus suspensos; Banners.
Conteúdo Programático

Edição de imagens: utilização de um software de edição de imagens para
tratamento de imagens para a web (redução de resolução, de tamanho, de
cores), aplicação de máscaras e efeitos ao vivo (sombra, brilho, relevo,
dentre outros), restauração de imagens (nitidez e correção de pixações e
manchas, por exemplo) e montagens de imagens em camadas. Menus pop-up.
Gifs. Otimização e exportação

Animação: criação de animações simples (aplicação de transparência,
transformação de tamanho, cor e forma), introdução a Action script e
movieclips (animações dentro de animações).

Integração: utilização do software Dreamweaver MX para criação de páginas,
usando os conceitos de CSS: herança, seletores agrupados, seletores
encadeados, uso de identificadores(id), uso de classes, pseudo-class e criação
de menus. Inserção de javascripts prontos, imagens fatiadas prontas do
fireworks e animações.
Roteiro de Ensino

Conceitos e Histórico

Arquitetura de Informação

Briefing

Tipos de Imagens

Edição e Tratamento de Imagens (Adobe Fireworks)

Animação Web

Edição e Publicação de Site (Adobe Dreamweaver)
Metodologia

Aulas expositivas dialogadas e interativas

Pesquisas e debates informais

Trabalho em grupo e individual

Aula prática no laboratório
Avaliação


Primeiro Bimestre

Presença e participação nas atividades em sala de aula – 1,0 pontos.

Apresentação de trabalhos (Extensões / Banners) – 3,0 pontos

Prova individual – 6,0 pontos.
Segundo Bimestre

Presença e participação nas atividades em sala de aula – 1,0 pontos.

Apresentação de trabalhos (Site com Firewokrs) – 3,0 pontos

Prova individual – Site (Fireworks + Dreamweaver) – 6,0 pontos.
Bibliografia
Design para a internet
Projetando a experiência perfeita.

Autor: Felipe Memória

Editora: Elsevier

Ano: 2006
Bibliografia
Projetando Websites

Autor: Jacob Nielsen

Editora: Campus

Ano: 2000
Bibliografia
Não me Faça Pensar

Autor: Steve Krug

Editora: Alta Books

Ano: 2005
Softwares
Softwares
Pré-requisitos

Lógica de Programação

HTML

JavaScript

CSS
Conceito de Web Design

O web design pode ser visto como uma extensão da prática
do design, onde o foco do projeto é a criação de web sites e
documentos disponíveis no ambiente da World Wide Web.

O web design tende à multidisciplinaridade, uma vez que a
construção de páginas web requer subsídios de diversas áreas
técnicas, além do design propriamente dito. Áreas como
a arquitetura da informação, programação, usabilidade,
acessibilidade entre outros.
Objetivos de Web Design

O termo design é usando quando referimos ao embelezamento de
produtos ou objetos. O design teria apenas como objetivo principal
a beleza estética, apenas a aparência.

Existe algo a mais que apenas a beleza estética?

Você já ouviu falar em design de interface? Interface gráfica?

A interface tem como objetivo principal conectar você a uma
ferramenta, utilizando um de seus sentidos, fazendo com que uma
determinada informação chegue até você de forma amigável e
compreensível.

É a interface que faz o link entre o homem e a máquina.
Objetivos de Web Design

A concepção moderna no design compreende a interface como
ponto central do design e formada por três áreas:
USUÁRIO

O usuário

A tarefa a ser executada

A ferramenta necessária para a
execução da tarefa
INTERFACE
TAREFA
FERRAMENTA
Objetivos de Web Design

Essas 3 áreas conectadas é que utilizamos para criar um layout para
sites web.

É algo que vai além da beleza. É a construção de ambientes
funcionais, ferramentas a serviço da melhor compreensão do usuário,
tornando códigos html, textos, imagens e navegação bem mais
amigáveis e compreensíveis.

Esse é o objetivo de todo webdesigner. Contribuir para uma interface
gráfica não só bonita mas funcional.
Web Design - Conclusões

É multidisciplinar, envolve: Publicidade, Direção de arte, Designer
para criação, Designer para animação e multimídia, Redação e
revisão, Programação, Marketing digital, Atendimento, Prospecção e
vendas...

É a criação de web sites e documentos disponíveis no ambiente
da World Wide Web
WebSites

O que é e para que serve um website?
É um conjunto formado por várias páginas da web ou hipertextos, que
são reunidos em um endereço da web chamado de domínio e que é
acessado pelo protocolo HTTP (Hypertext Transfer Protocol) que
permite a utilização de links para ligar-se a outras páginas existentes
e relacionadas ao mesmo assunto ou que contenham definição ou
esclarecimento necessário para entendimento do assunto de origem.

Nomes similares:
Site, página, sítio, site comercial
WebSites - Propósito

Institucional

Informações

Aplicações

Armazenagem de informações

Comunitário

Portais
WebSites - Propósito

Institucional - divulgar empresas, instituições, fundações...

Informações - veículos de comunicação como jornais, revistas e
agências de notícias...

Aplicações – conteúdo consiste de ferramentas de automatização,
produtividade e compartilhamento, substituindo aplicações de
desktop...

Armazenagem de informações - alguns sites funcionam como
bancos de dados, que catalogando registros e permitindo buscas,
podendo incluir áudio, vídeo, imagens, softwares... Comunitário

Comunitário – serve de comunicação com outros usuários da rede...

Portais - congregam conteúdos de diversos tipos entre os demais
tipos, geralmente fornecidos por uma mesma empresa...
WebSites – Tipos

Sites estáticos – são formados por páginas com conteúdos que
sofrem pouca ou nenhuma alteração em um longo período de
tempos. Utilizado normalmente por empresas que querem
apresentar seus produtos ou serviços.

Sites dinâmicos – utiliza-se de uma linguagem de programação,
além do HTML puro, para inserir, alterar e excluir conteúdo das
páginas que o compõem. Seu conteúdo sofre alterações periódicas.

Sites mistos – existem casos em que se necessita das duas
modalidades de sites descritos anteriormente, pois parte do
conteúdo não sofre alteração e outra sofre alterações periódicas
constantemente.
Interface Web

Os avanços tecnológicos, fez com que o computador deixasse de
ser exclusividade de especialistas e dos mais abastados, para fazer
parte também do dia a dia das mais variadas pessoas.

Também contamos com uma grande variedade de formas de acessar
a rede: em casa, LAN house, trabalho, dispositivo móvel,
notebooks, entre outros.

Devido à diferença de usuários e de formas de acesso, é necessário
e importante que os recursos tecnológicos empregados e os layouts
de páginas sejam adaptados a essas variações.
Interface Web
Algumas configurações que podem afetar a visualização:

Tamanho da página e resolução: é a quantidade de pixels que
compõem a imagem vista na tela. A qualidade dessa imagem vai
depender da relação do número de pontos por polegada quadrada,
com a configuração da tela, o tamanho do monitor e sua resolução.

Espaço do browser na página: o espaço ocupado pelo browser na
página do dispositivo utilizado, seja dispositivo móvel, sejam
notebooks, seja TV, sejam outros, variam de acordo com a
resolução da tela do dispositivo utilizado.
Interface Web

Uma boa interface causa um ótimo primeiro impacto ao visitante;
além de boa ilustração, qualidade em animações e fotos, a
aplicação web deve ter conteúdo preciso e coerente.

A produção dos textos das páginas web não pode ter o caráter de
autoria, uma vez que o autor não está escrevendo um livro ou
artigo de opinião.

O produtor de conteúdo deve com eficiência transmitir a
mensagem em uma linguagem simples, porém respeitando todos os
conceitos gramaticais.

O processo de produção de conteúdo deve estar de acordo com a
mídia web de comunicação a que se destina.
Interface Web

Características importantes no desenvolvimento de um website:
 Objetividade
 Legibilidade
 Visibilidade
 Navegabilidade
Interface Web - Objetividade

Desenvolva “resumos”, em linguagem simples, para cada item na
estrutura

Desenvolva textos completos para o assunto, quando necessário.

Textos mais extensos, que tratem de assuntos específicos, devem
ser disponibilizados no formato PDF para que o usuário possa
baixar e/ou ler em modo off-line.

Aplique o recurso do hipertexto sem exageros nos links que possam
comprometer o entendimento e acesso à informação.
Interface Web – Legibilidade (Ler)

Legibilidade deficiente: segundo pesquisa do Instituto Nielsen, ler
na Web é 25% mais difícil em comparação à leitura no papel, por
causa da resolução da tela.

Textos on-line são mais bem lidos com sentenças curtas e estrutura
gramatical simples, satisfazendo rapidamente o visitante.

Os links devem ter relacionamentos coerentes entre si, para não
confundir o leitor
Interface Web – Visibilidade (Ver)

Dar visibilidade a informações importantes no contexto da
aplicação é fundamental para estabelecer a comunicação.

Cada elemento deve ser construído respeitando as regras de
simetria e ordem de importância de leitura para uma melhor
seleção visual.

Não dá para mostrar tudo na página principal. Na página início
deve-se exibir aquilo que é de maior relevância e que não pode
deixar de ser visto.
Interface Web – Navegabilidade

O planejamento é fundamental para não criar verdadeiros “becos
sem saída”.

Planejar a navegação de um site é fundamental para que o
visitante visualize com facilidade todo o conteúdo disponível na
aplicação web.

Evite que o acesso entre uma seção e outra passe pela página
principal.

Evite navegação que force o visitante a passar por várias páginas
até chegar à informação desejada.

O ideal é o que o leitor não precise dar mais de três cliques para
obter a informação que deseja.
Interface Web – Orientações

Simplicidade –simplicidade não significa site feio, reduza ao
máximo a quantidade de informações visuais desnecessárias, para
que o site seja fácil de usar e prenda o interesse do visitante.

Uma imagem vale mais do que mil palavras – essa frase é verdadeira
para a criação de um site. Sempre que possível, use imagens, pois
ninguém quer investir muito tempo para ler textos intermináveis.

Evite informação em excesso – páginas com muita informação
prejudicam a visualização, sobrecarregam e confundem o leitor.

Em construção? Jamais! – nunca coloque links no seu site que
levem o visitante a páginas que ainda não foram feitas e que estão
em construção.
Interface Web – Orientações

Mantenha o seu site atualizado – modifique periodicamente o
conteúdo do site, para que as pessoas voltem a visitá-lo. Site
desatualizado deixará de ser visitado.

Utilize um boletim de notícias – crie uma lista na qual os visitantes
possam subscrever e receber boletins de notícias do seu site. Nada
melhor do que manter contato com aqueles que têm interesse no
seu produto ou serviço.

Não utilize bonequinhos rebolando, bolinhas saltando, ícones
voando pela página – nunca use esse tipo de recurso para decorar o
seu site. Esses efeitos passam uma imagem de amadorismo e o
visitante não terá confiança em realizar operações comerciais ou
contratar serviços.
Interface Web – Orientações

Evite Java e Flash – não utilizar como elementos principais do site.
Atrapalham ser classificado, de forma adequada, nos motores de
busca e isso poderá levar o utilizador a desistir de entrar, pois são
elementos que podem causar o bloqueio de computadores ou a
lentidão excessiva no carregamento da página.

Seu site deve carregar rápido – pesquisas mostram que se um site
não apresentar alguma informação para prender a atenção do
visitante num período de 15 a 30 segundos, o visitante cancela o
carregamento e vai para outro endereço.

Facilite a comunicação – lembre-se sempre de que a função
principal de todo o material que um designer cria, seja para a web
ou não, é comunicar.
Interface Web – Orientações
Para haver comunicação, três coisas principais precisam ocorrer:

1) Todas as letras precisam ser lidas e compreendidas;

2) Os textos precisam ser claros e objetivos;

3) Os desenhos (imagens, ícones, ilustrações e grafismos) precisam
ser vistos claramente e os seus propósitos percebidos. Se esse
mínimo não for atingido, a comunicação falhou.
Elementos do Design Web

Um bom design web se difere por sua funcionalidade e harmonia
estética entre seus elementos:
 Elementos
de Navegação;
 Elementos
de Orientação;
 Elementos
de Conteúdo;
 Elementos
de Emoção.
Elementos de Navegação
Elementos de Orientação
Elementos de Conteúdo
Elementos de Emoção
Webdesign x Design Impresso
Design Impresso

Todos vêem a mesma coisa
Design Web - dependerá:

Resolução de tela do usuário;

Da capacidade da placa de vídeo do usuário;

Navegador utilizado (Chrome, Opera, Internet Explorer, Mozilla)

Sistema operacional

Existência de plug-ins, etc.
Resolução de tela do usuário
Fonte: Revista Info
Resolução de tela do usuário
Tamanho da Tela do Monitor e Resolução:
Medida
14”
Resolução
800x600
15”
800x600
17”
1024x768
19”
1280x1024
21”
1600x1200
Navegadores no Mundo
Navegadores no Mundo
Ferramentas para o Webdesign

Edição HTML
 Dreamweaver
 Microsoft


– Adobe
Expression Web - Microsoft
Edição de Imagens

Photoshop - Adobe

FireWorks - Adobe
Animação
 Fireworks
 Flash
- Adobe
- Adobe
WebDesigner

Um Webdesigner é um profissional que exclusivamente trabalha, cria,
projeta para a web.

Um bom designer tem que se atualizar, ser aplicado, dedicado e
conhecer as suas ferramentas.

Deve saber o que fazer e como fazer, não pode ficar preso a uma
determinada tecnologia, ferramenta ou padrão.

Atualizar-se sempre.