A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Web Design Professor: Charles Jefferson. Plano de Ensino  Unidade Curricular: Web Design  Carga Horária: 80 Horas  Curso: Informática para Internet.

Apresentações semelhantes


Apresentação em tema: "Web Design Professor: Charles Jefferson. Plano de Ensino  Unidade Curricular: Web Design  Carga Horária: 80 Horas  Curso: Informática para Internet."— Transcrição da apresentação:

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: Felipe Memória  Editora: Elsevier  Ano: 2006

12 Bibliografia Projetando Websites  Autor: Jacob Nielsen  Editora: Campus  Ano: 2000

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

14 Softwares

15

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

17

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 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 execução da tarefa INTERFACE USUÁRIO TAREFAFERRAMENTA

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

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: MedidaResolução 14”800x600 15”800x600 17”1024x768 19”1280x ”1600x1200

47 Navegadores no Mundo

48

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.


Carregar ppt "Web Design Professor: Charles Jefferson. Plano de Ensino  Unidade Curricular: Web Design  Carga Horária: 80 Horas  Curso: Informática para Internet."

Apresentações semelhantes


Anúncios Google