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 da World Wide Web e documentos disponíveis no ambiente

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 produtividade e compartilhamento, substituindo aplicações de desktop...

– conteúdo consiste de ferramentas de automatização, 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!

levem o visitante a páginas que ainda não foram feitas e que estão em construção. – nunca coloque links no seu site que

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 seu produto ou serviço.

– 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 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 ou não, é comunicar. – lembre-se sempre de que a função principal de todo o material que um designer cria, seja para a web

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” 15” 17” 19” 21”

Resolução

800x600 800x600 1024x768 1280x1024 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.