Professor: Charles Jefferson 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 Segundo 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 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

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 USUÁRIO 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 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” 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.