Web Design

1. Web Design Professor: Charles Jefferson

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

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

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

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

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

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

8. 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)

9. Metodologia • Aulas expositivas dialogadas e interativas • Pesquisas e debates informais • Trabalho em grupo e individual • Aula prática no laboratório

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

11. Bibliografia Design para a internet Projetando a experiência perfeita. • Autor: FelipeMemória • Editora: Elsevier • Ano: 2006

12. Bibliografia Projetando Websites • Autor: JacobNielsen • Editora: Campus • Ano: 2000

13. Bibliografia Não me Faça Pensar • Autor: Steve Krug • Editora: Alta Books • Ano: 2005

14. Softwares

15. Softwares

16. Pré-requisitos • Lógica de Programação • HTML • JavaScript • CSS

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

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

20. Objetivos de Web Design • A concepção moderna no design compreende a interface como ponto central do designe 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

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

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

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

24. WebSites - Propósito • Institucional • Informações • Aplicações • Armazenagem de informações • Comunitário • Portais

25. 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... • Armazenagemdeinformaçõ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...

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

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

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

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

30. Interface Web • Características importantes no desenvolvimento de um website: • Objetividade • Legibilidade • Visibilidade • Navegabilidade

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

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

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

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

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

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

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

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

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

40. Elementos de Navegação

41. Elementos de Orientação

42. Elementos de Conteúdo

43. Elementos de Emoção

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

45. Resolução de tela do usuário Fonte: Revista Info

46. Resolução de tela do usuário Tamanho da Tela do Monitor e Resolução:

47. Navegadores no Mundo

48. Navegadores no Mundo

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

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