web design n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web Design PowerPoint Presentation
Download Presentation
Web Design

Loading in 2 Seconds...

play fullscreen
1 / 50

Web Design - PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Design' - jaron


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web design

Web Design

Professor: Charles Jefferson

plano de ensino
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
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
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.
habilidades1
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
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 tico1
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
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
Metodologia
  • Aulas expositivas dialogadas e interativas
  • Pesquisas e debates informais
  • Trabalho em grupo e individual
  • Aula prática no laboratório
avalia o
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
Bibliografia

Design para a internet

Projetando a experiência perfeita.

  • Autor: FelipeMemória
  • Editora: Elsevier
  • Ano: 2006
bibliografia1
Bibliografia

Projetando Websites

  • Autor: JacobNielsen
  • Editora: Campus
  • Ano: 2000
bibliografia2
Bibliografia

Não me Faça Pensar

  • Autor: Steve Krug
  • Editora: Alta Books
  • Ano: 2005
pr requisitos
Pré-requisitos
  • Lógica de Programação
  • HTML
  • JavaScript
  • CSS
conceito de web design
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
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 design1
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

objetivos de web design2
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
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
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
WebSites - Propósito
  • Institucional
  • Informações
  • Aplicações
  • Armazenagem de informações
  • Comunitário
  • Portais
websites prop sito1
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...
websites tipos
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
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 web1
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 web2
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 web3
Interface Web
  • Características importantes no desenvolvimento de um website:
      • Objetividade
      • Legibilidade
      • Visibilidade
      • Navegabilidade
interface web objetividade
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
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
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
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
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 es1
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 es2
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 es3
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
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.
webdesign x design impresso
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 rio1
Resolução de tela do usuário

Tamanho da Tela do Monitor e Resolução:

ferramentas para o webdesign
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
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.