INTRODUÇÃO DE WEBDESIGN

Prévia do material em texto

Introdução ao Webdesign 
WEBDESIGN – CCA0350
Profª Mônica Paz
 
Estrutura da aula
● Web e sua história
● Designs
● Webdesigner e colegas
● Alguns conceitos
● Tipos de sites
● Exp e interface
● Planejamento
 
Web
● World Wide Web, “Teia mundial", WWW
● Facilitar o compartilhamento de informações entre as pessoas
– Vídeos, sons, hipertextos e figuras
● Protocolos
● Linguagem
● Navegador 
● Funcionamento: 
– Comunicação entre o navegador (computador cliente) e um servidor web 
(computador do servidor de internet). 
– Cada computador precisa saber o endereço do outro (IP contido na URL) e 
de outras informações para saber qual informação renderizar no 
navegador.
 
Um pouco de história
A história da Internet: pré-década de 60 até 
anos 80 [infográfico]
<http://www.tecmundo.com.br/infografico/9847-a-
historia-da-internet-pre-decada-de-60-ate-anos-
80-infografico-.htm>
PDF
 
História da Web
Historia Da Web
<https://www.youtube.com/watch?v=0uNMsyG-
ZIk>
 
Exercício para casa
A Evolução da web
Navegadores e Tecnologias
O crescimento da Internet
<http://www.evolutionoftheweb.com/>
Cada pessoa será responsável por apresentar as 
tecnologias de um ano (excluir 1993).
 
Linha do tempo da web
 
Design
É a idealização, criação, desenvolvimento, 
configuração, concepção, elaboração e 
especificação de artefatos, normalmente 
produzidos industrialmente ou por meio de 
sistema de produção seriada que demanda 
padronização dos componentes e desenho 
normalizado. Essa é uma atividade estratégica, 
técnica e criativa, normalmente orientada por 
uma intenção ou objetivo, ou para a solução de 
um problema.
 
Design
● Design estratégico
● Design de comunicação
– Design de som
– Design visual
● Design gráfico
● Design digital
● Design de produto
● Design de moda
● Design de ambientes
● Design de interação
 
Design visual
● Design digital
– Animação digital
– Foto digital
– PDAs
– TV digital
– Videogames
– Web design
● Arquitetura da informação
● Layout
– outros
 
Webdesigner
● De quais campos de estudos podem surgir 
webdesigners?
● O que ele/ela precisa saber?
– Teoria das cores, tipografia, arquitetura de 
informação, semiótica, usabilidade
– Linguagens de estruturação e formatação de 
documentos hiper textuais
– Softwares de tratamento e edição de imagens, 
desenho e codificadores
 
Webdesigner x outros 
profissionais
● Programador ou desenvolvedor web
● Arquiteto da informação
● Analista de SEO (Search Engine Optimization)
● Administrador de sistemas
● Analista de conteúdo
● Analista de Marketing Digital
● e outros
 
Alguns conceitos em 
Webdesign
● Tableless
● Padrões – web standard
● WYSIWYG
● Web Semântica
● Usabilidade
● Acessibilidade
 
World Wide Web Consortium 
(W3C)
● Tim Berners-Lee em 1994 
● + 400 membros
– empresas, órgãos governamentais e organizações 
independentes
● Padrões para a criação e a interpretação de conteúdos 
para a Web
– Interoperabilidade
● Formatos: SVG, PNG (RGBA), HTML, XHTML, XML etc
● Padrões: eXtensible Hypertext Markup Language 
(XHTML); Cascading Style Sheets (CSS)
 
WYSIWYG
● "What You See Is What You Get"
– "O que você vê é o que você obtém" 
(OQVVEOQVO)
 
 
Usabilidade
● É a medida pela qual um produto pode ser 
usado por usuários específicos para 
alcançar objetivos específicos com 
efetividade, eficiência e satisfação em um 
contexto de uso específico (ISO 9241-11).
● Facilidade de uso e aprendizado
 
Usabilidade
● Efetividade
– Finalização de uma tarefa com qualidade
– Métricas: tempo e taxa
● Eficiência
– Quantidade de esforço e recursos
– Métricas: desvios e erros
● Satisfação
– Conforto e aceitação do usuário
● Segurança
● Memorização
 
Teste de usabilidade
● Laboratórios de usabilidade
– Eye-tracking
– Observação controlada
● Teste de campo
● Recrutamento
● Tarefas – diagrama de fluxos
● Protótipos e piloto
 
Tipos de sites
Conteúdo
Propósito
 
Estático
 
Dinâmico
 
Estático x Dinâmico
● Ex: sites de empresa
● Presença na internet
● Praticidade
● Ex: sites de noticias, 
os blogs e os fóruns
● Melhor 
posicionamento em 
sites de indexação
● Sistemas 
gerenciadores de 
conteúdo
 
Institucional
Empresas, ONGs e eventos
 
 
Informativo
Jornais, blogs, podcasts
 
De armazenamento
 
Aplicativo
 
Comunitário
 
Portal
 
Mais tipos de sites
● E-commerce, loja virtual
● Fórum de discussão
● Redes sociais
● Mecanismos de buscas
● Wiki
● Intranet
● e outros
 
Exercício de ver
Quais elementos podem ser identificados no site 
a seguir?
 
 
Sobre boas experiência
● Exemplo UOL PDF
 
Planejamento
● Público alvo
● Objetivo
● Serviços oferecidos
● O diferencial
● Tecnologia utilizadas
● Arquitetura da 
informação
● Layout
 
Dimensões de um site
● Estrutura (HTML)
● Formatação 
estilística (CSS)
● Comportamento 
(scripts)
● Dados
– Banco de dados
● Front-end
● Back-end
 
● Estrutura
● Versão mobile
● SEO
● Compartilhamento social
● Feed RSS
● Formulário newletter
● Acompanhamento e 
manutenção
● Página de contato
● Página Quem somos ou Sobre
O que não pode deixar 
de ter
● Relevância e contexto
● Conteúdo
● Imagem e vídeo
● Ser legível
● Bem escrito
● Formatação 
● Qualidade
● Linkania
● Comentários
 
Para ler em casa
● Livros:
● Pg. 8 a 11 de Memória, Felipe. Design para a internet. Rio de 
Janeiro: Elsevier 2005.
● Pg. 5 a 12 de Radfahrer, Luli. Design/Web/Design: 2. Disponível 
em (http://www.luli.com.br/admin/wp-
content/uploads/2008/04/dwd2.pdf)
● Sites:
● Wikipedia - (http://pt.wikipedia.org/wiki/Web_design)
● Revista Wide - (http://www.revistawide.com.br)
● Fórum de webdesign - 
(http://www.sobresites.com/webdesign/index.htm) 
	Slide 1
	Slide 2
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10
	Slide 11
	Slide 12
	Slide 13
	Slide 14
	Slide 15
	Slide 16
	Slide 17
	Slide 18
	Slide 19
	Slide 20
	Slide 21
	Slide 22
	Slide 23
	Slide 24
	Slide 25
	Slide 26
	Slide 27
	Slide 28
	Slide 29
	Slide 30
	Slide 31
	Slide 32
	Slide 33
	Slide 34
	Slide 35
	Slide 36
	Slide 37
	Slide 38