Web DesignProfessor: 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:

O usuário

A tarefa a ser executada

A ferramenta necessária para a

execução da tarefa INTERFACE

USUÁRIO

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 Resolução

14” 800x600

15” 800x600

17” 1024x768

19” 1280x1024

21” 1600x1200

Navegadores no Mundo

Navegadores no Mundo

Ferramentas para o Webdesign

Edição HTML

Dreamweaver – Adobe

Microsoft Expression Web - Microsoft

Edição de Imagens

Photoshop - Adobe

FireWorks - Adobe

Animação

Fireworks - Adobe

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