SlideShare uma empresa Scribd logo
Web Design
http://www...
Web...web...
●   Web design ou Webdesigner?
●   Uma agência web
●   O Website... Do que é feito?
●   #comofaz?
●   Go and get your job!
Web... O quê?
É muito fácil confundir, mas não esqueça!

Web Design e Webdesigner
são coisas diferentes.
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 web.
(fonte Wikipédia)
Web Design
(...) 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.
(fonte Wikipédia)
Webdesigner
        É o profissional competente
        para a elaboração do projeto
        estético e funcional de um
        web site.
        (fonte Wikipédia)
Agência web, o Habitat
Existêm diversos tipos de empresas
responsáveis por atender o mercado
publicitário, propaganda e marketing, mas às
responsáveis pela conceitualização e a criação
das peças e ações são as Agências.
Agência web, o Habitat
Agências de publicidade podem:
● Criar embalagens; (design de produto)
● Criar marcas, logotipos... (branding)
● Criar spots e vinhetas de rádios, comerciais
  de TV, folders, anúncios...; (tradicionais, full-service)

● e ...Criar Websites! (agência web, ou digital)
Agência web, o Habitat
Agência digital, também conhecida por
agência web, é um empresa especializada em
prestar serviços na área do desenvolvimento
técnico e criativo de produtos relacionados com
a internet.
(fonte: Wikipédia)
Agência web, o Habitat
São agências digitais:
● Ag2 Publicis
● Cappuccino Digital
● Ginga
● KAUS
● Publicidade Interativa
● Sirius Interativa
● e muito mais.
Agência web, o Habitat
Mas... como é por dentro?
Agência web, o Habitat
Pessoas, pessoas, pessoas

Somos atendimento, diretores
criativos, designers, redatores,
planners, analistas de redes
sociais, programadores...
Agência web, o Habitat
Criando uma nuvem criativa de idéias e
conceitos, e funcionando graças ao
processo de trabalho (job workflow).
Website
Hipertexto, hiperlink, hiper..uipi!!!
O website
            É um conjunto de
            páginas web, isto é, de
            hipertextos acessíveis
            geralmente pelo
            protocolo HTTP na
            Internet.
            (fonte: Wikipédia)
O website
Hipertexto, é um formato digital que agrega
informações (textos, imagens, sons...) e são
inteligados através de referências, os
hiperlinks.

HTTP, é protocolo de comunicação para trocar
dados de hipermídia (Hipertexto).
O website, do que é feito?
Os websites (ou sites), podem ser
desenvolvidos utilizando diversas linguagens
de programação, e a mais elementar delas, o
HTML (Linguagem de Marcação de Hipertexto).
O website, camadas...
E podemos dizer que todo website são
constituidos por camadas de:
● Apresentação (layout)
● Informação (conteúdo)
● Lógica (programação)
O website, camadas...
Apresentação (layout)
O website, camadas...
Informação
Corresponde a todo conteúdo do site
(texto, imagens, sonos, vídeos...)
O website, camadas...
Lógica
Corresponde às regras e diretrizes
condicionais aos comportamentos de interação
do usuário com o Conteúdo do website.
O website, #comofaz?
Mas antes, o método.
A receita para desenvolver um website deve
seguir os passos, nesta ordem:
1.   Objetivos do website;
2.   Wireframe;
3.   Layout;
4.   Programação.
O website, #comofaz?
Os Objetivos do website, também conhecido
como briefing, é nesse documento que são
identificados/definidos o público-alvo, o
conteúdo que vai ser publicado, a frequência
de atualização, detalhes técnicos de linguagem
e recursos de interação disponíveis.
O website, #comofaz?
Wireframe, é o esqueleto do website. Também
define como vai ficar distribuido o conteúdo, e
seus recursos de interação com usuário.

O wireframe, também pode ser caracterizado
como o esboço do website.
O website, #comofaz?
Layout, é feito logo após o wireframe, e
corresponde a identidade visual do website.

Um bom layout deve estar sempre de acordo
com os objetivos do cliente, e integrado ao
seus valores visuais de maneira clara e
objetiva.
O website, #comofaz?
Programação, corresponde aos códigos e
lógicas presentes no website. É a fase onde o
as instruções de interação do wireframe e os
padrões visuais do layout são convertidos em
códigos, que serão interpretados pelos
Navegadores (browsers).
Dúvidas?
http://www...
Mãos à obra!
http://www...
Briefing:
Website pessoal (curriculo online)

Publico alvo:
Jovens e adultos.

Conteúdo:
Perfil profissional, Histórico profissional,
Habilidades/conhecimentos e Contato (formulário -
nome, email mensagem).




Mãos à obra! - wireframe
Briefing:
Website petshop "Meu Pet".

Publico alvo:
Jovens e adultos.

Conteúdo:
Apresentação dos produtos oferecidos na loja
Apresentação do serviço de banho&tosa
Contatos (email, telefone, endereço)



Mãos à obra! - wireframe
Briefing:
Lan house "GameShow"

Publico alvo:
Jovens e adultos. Foco em jovens.

Conteúdo:
Apresentação do serviço oferecido
Infraestrutura disponível (configuração computadores, e etc)
Horários de funcionamento
Contatos (email, telefone, endereço)


Mãos à obra! - wireframe
Obrigado!
;)

Mais conteúdo relacionado

PDF
Projeto e Desenvolvimento de Software
PDF
Aula - Introdução a Engenharia de Software
PPTX
Aula 01- web designer
PPTX
Introdução a programação para a Internet
PPTX
Introdução sobre desenvolvimento web
PPT
Introdução Ao Web Design
PPT
Aula01 conceito design
PDF
Fundamentos de arquitetura Web
Projeto e Desenvolvimento de Software
Aula - Introdução a Engenharia de Software
Aula 01- web designer
Introdução a programação para a Internet
Introdução sobre desenvolvimento web
Introdução Ao Web Design
Aula01 conceito design
Fundamentos de arquitetura Web

Mais procurados (20)

PPT
PDF
Sistemas Computacionais - Aula 01 - Apresentação
PPT
Design e design gráfico
PDF
Introdução à Programação
PPS
Projeto de Software
PDF
Design Responsivo
ODP
Introdução à Análise de Sistemas
PDF
Curso de HTML5 - Aula 01
PPTX
EXCEL 2019
PDF
Arquitetura de informação para Interface Digital
PPTX
Protocolo http
PDF
Sistemas Multimídia - Aula 02 - Introdução
ODP
A Internet das Coisas
PDF
Apresentação HTML e CSS
PDF
Banco de Dados - Introdução - Projeto de Banco de Dados - DER
PDF
PPTX
Excel basico
PDF
Sistemas de organização e rotulação
PPTX
Introdução ao Google Forms
PPT
Usabilidade IHC
Sistemas Computacionais - Aula 01 - Apresentação
Design e design gráfico
Introdução à Programação
Projeto de Software
Design Responsivo
Introdução à Análise de Sistemas
Curso de HTML5 - Aula 01
EXCEL 2019
Arquitetura de informação para Interface Digital
Protocolo http
Sistemas Multimídia - Aula 02 - Introdução
A Internet das Coisas
Apresentação HTML e CSS
Banco de Dados - Introdução - Projeto de Banco de Dados - DER
Excel basico
Sistemas de organização e rotulação
Introdução ao Google Forms
Usabilidade IHC
Anúncio

Destaque (20)

PDF
Aula 1 Webdesign
PDF
Web Design > HTML (aula 1)
PDF
Web Design > Visão geral do Web Design
PDF
AULA 2:Fundamentos composicao visual
PPT
Wireframe workshop externo_001_b
PDF
Arquitetura da Informação - Wireframes
PDF
Arquitetura de Informação sem wireframe
PPT
Curso prático de HTML - Aula 1
PDF
Lista de Seletores e Propriedades
PPTX
PDF
Curso HTML e CSS Part1
PDF
User experience for enterprise
PPTX
Redes Sociais e Jornalismo Online
PPTX
Web Design - teoria básica das cores
PDF
Slides minicurso Web Design
PDF
Web Design > História e a evolução do www
PPTX
Web Design Responsivo
PDF
Sistema computacional (arquitecturas y memorias)
Aula 1 Webdesign
Web Design > HTML (aula 1)
Web Design > Visão geral do Web Design
AULA 2:Fundamentos composicao visual
Wireframe workshop externo_001_b
Arquitetura da Informação - Wireframes
Arquitetura de Informação sem wireframe
Curso prático de HTML - Aula 1
Lista de Seletores e Propriedades
Curso HTML e CSS Part1
User experience for enterprise
Redes Sociais e Jornalismo Online
Web Design - teoria básica das cores
Slides minicurso Web Design
Web Design > História e a evolução do www
Web Design Responsivo
Sistema computacional (arquitecturas y memorias)
Anúncio

Semelhante a Web Design > Aula 00 (20)

PDF
A 3ª Área do Design: Web Design
PPT
Introdução ao web design
PPT
Desenvolvimento de Sites V.2
PDF
Desenvolvimento Web Parte I
PDF
Producao para web
PPTX
WebDesign - Aula01 - Introdução à Internet.pptx
PDF
O que é ser web designer
PDF
O que é ser web design
PDF
Oqueserwebdesigner
PDF
PDF
Designer
PDF
Texto1
PDF
Web Designer
PDF
O que é ser web designer
PDF
O que é ser web designer
PDF
Oqueserwebdesigner
PDF
Oqueserwebdesigner
PDF
Oqueserwebdesigner
PDF
Oqueserwebdesigner
A 3ª Área do Design: Web Design
Introdução ao web design
Desenvolvimento de Sites V.2
Desenvolvimento Web Parte I
Producao para web
WebDesign - Aula01 - Introdução à Internet.pptx
O que é ser web designer
O que é ser web design
Oqueserwebdesigner
Designer
Texto1
Web Designer
O que é ser web designer
O que é ser web designer
Oqueserwebdesigner
Oqueserwebdesigner
Oqueserwebdesigner
Oqueserwebdesigner

Mais de Felipe Fernandes (13)

PDF
Code Club Brasil #2015
PDF
Code Club Brasil na Campus Party Brasil 8 #cpbr8
PDF
Code Club Apresentação 2014
PDF
Code Club - Aprender a programar pode ser divertido?
PDF
PDF
Web Design > Movimentos artisticos
PDF
Web Design > html (aula 2)
PDF
Web Design > Tipografia
PDF
Web Design > Cores
PDF
Web Design > Formatos de arquivos para web
PDF
Web Design > Usabilidade
PDF
Web Design > Gestalt e suas leis
PDF
Web Design > Princípios do Design e intro à Gestalt
Code Club Brasil #2015
Code Club Brasil na Campus Party Brasil 8 #cpbr8
Code Club Apresentação 2014
Code Club - Aprender a programar pode ser divertido?
Web Design > Movimentos artisticos
Web Design > html (aula 2)
Web Design > Tipografia
Web Design > Cores
Web Design > Formatos de arquivos para web
Web Design > Usabilidade
Web Design > Gestalt e suas leis
Web Design > Princípios do Design e intro à Gestalt

Último (13)

PPTX
tema_3_-_discipulado_novo_tempo.pptxxxxxxx
PPT
inimigos-invisc3adveis.ppttttttttttttttttt
PPTX
tema_12_-_discipulado_novo_tempo.pptxxxxx
PPTX
Espatula Culinaria do futuro by inteligência artificial
PPTX
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
PPTX
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
PPTX
tema_7_-_discipulado_novo_tempo.pptxxxxxx
PDF
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
PPTX
tema_8_-_discipulado_novo_tempo.pptxxxxxx
PDF
Apostila 1 - Despertar das Sobrancelhas.pdf
PDF
1507-1santificacao@3_slides.pdffffffffff
PDF
Slide de apresentação - legendas africanas
PPTX
Viajando pela literatura brasileira.pptx
tema_3_-_discipulado_novo_tempo.pptxxxxxxx
inimigos-invisc3adveis.ppttttttttttttttttt
tema_12_-_discipulado_novo_tempo.pptxxxxx
Espatula Culinaria do futuro by inteligência artificial
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
tema_7_-_discipulado_novo_tempo.pptxxxxxx
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
tema_8_-_discipulado_novo_tempo.pptxxxxxx
Apostila 1 - Despertar das Sobrancelhas.pdf
1507-1santificacao@3_slides.pdffffffffff
Slide de apresentação - legendas africanas
Viajando pela literatura brasileira.pptx

Web Design > Aula 00

  • 2. Web...web... ● Web design ou Webdesigner? ● Uma agência web ● O Website... Do que é feito? ● #comofaz? ● Go and get your job!
  • 3. Web... O quê? É muito fácil confundir, mas não esqueça! Web Design e Webdesigner são coisas diferentes.
  • 4. 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 web. (fonte Wikipédia)
  • 5. Web Design (...) 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. (fonte Wikipédia)
  • 6. Webdesigner É o profissional competente para a elaboração do projeto estético e funcional de um web site. (fonte Wikipédia)
  • 7. Agência web, o Habitat Existêm diversos tipos de empresas responsáveis por atender o mercado publicitário, propaganda e marketing, mas às responsáveis pela conceitualização e a criação das peças e ações são as Agências.
  • 8. Agência web, o Habitat Agências de publicidade podem: ● Criar embalagens; (design de produto) ● Criar marcas, logotipos... (branding) ● Criar spots e vinhetas de rádios, comerciais de TV, folders, anúncios...; (tradicionais, full-service) ● e ...Criar Websites! (agência web, ou digital)
  • 9. Agência web, o Habitat Agência digital, também conhecida por agência web, é um empresa especializada em prestar serviços na área do desenvolvimento técnico e criativo de produtos relacionados com a internet. (fonte: Wikipédia)
  • 10. Agência web, o Habitat São agências digitais: ● Ag2 Publicis ● Cappuccino Digital ● Ginga ● KAUS ● Publicidade Interativa ● Sirius Interativa ● e muito mais.
  • 11. Agência web, o Habitat Mas... como é por dentro?
  • 12. Agência web, o Habitat Pessoas, pessoas, pessoas Somos atendimento, diretores criativos, designers, redatores, planners, analistas de redes sociais, programadores...
  • 13. Agência web, o Habitat Criando uma nuvem criativa de idéias e conceitos, e funcionando graças ao processo de trabalho (job workflow).
  • 15. O website É um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na Internet. (fonte: Wikipédia)
  • 16. O website Hipertexto, é um formato digital que agrega informações (textos, imagens, sons...) e são inteligados através de referências, os hiperlinks. HTTP, é protocolo de comunicação para trocar dados de hipermídia (Hipertexto).
  • 17. O website, do que é feito? Os websites (ou sites), podem ser desenvolvidos utilizando diversas linguagens de programação, e a mais elementar delas, o HTML (Linguagem de Marcação de Hipertexto).
  • 18. O website, camadas... E podemos dizer que todo website são constituidos por camadas de: ● Apresentação (layout) ● Informação (conteúdo) ● Lógica (programação)
  • 20. O website, camadas... Informação Corresponde a todo conteúdo do site (texto, imagens, sonos, vídeos...)
  • 21. O website, camadas... Lógica Corresponde às regras e diretrizes condicionais aos comportamentos de interação do usuário com o Conteúdo do website.
  • 22. O website, #comofaz? Mas antes, o método. A receita para desenvolver um website deve seguir os passos, nesta ordem: 1. Objetivos do website; 2. Wireframe; 3. Layout; 4. Programação.
  • 23. O website, #comofaz? Os Objetivos do website, também conhecido como briefing, é nesse documento que são identificados/definidos o público-alvo, o conteúdo que vai ser publicado, a frequência de atualização, detalhes técnicos de linguagem e recursos de interação disponíveis.
  • 24. O website, #comofaz? Wireframe, é o esqueleto do website. Também define como vai ficar distribuido o conteúdo, e seus recursos de interação com usuário. O wireframe, também pode ser caracterizado como o esboço do website.
  • 25. O website, #comofaz? Layout, é feito logo após o wireframe, e corresponde a identidade visual do website. Um bom layout deve estar sempre de acordo com os objetivos do cliente, e integrado ao seus valores visuais de maneira clara e objetiva.
  • 26. O website, #comofaz? Programação, corresponde aos códigos e lógicas presentes no website. É a fase onde o as instruções de interação do wireframe e os padrões visuais do layout são convertidos em códigos, que serão interpretados pelos Navegadores (browsers).
  • 29. Briefing: Website pessoal (curriculo online) Publico alvo: Jovens e adultos. Conteúdo: Perfil profissional, Histórico profissional, Habilidades/conhecimentos e Contato (formulário - nome, email mensagem). Mãos à obra! - wireframe
  • 30. Briefing: Website petshop "Meu Pet". Publico alvo: Jovens e adultos. Conteúdo: Apresentação dos produtos oferecidos na loja Apresentação do serviço de banho&tosa Contatos (email, telefone, endereço) Mãos à obra! - wireframe
  • 31. Briefing: Lan house "GameShow" Publico alvo: Jovens e adultos. Foco em jovens. Conteúdo: Apresentação do serviço oferecido Infraestrutura disponível (configuração computadores, e etc) Horários de funcionamento Contatos (email, telefone, endereço) Mãos à obra! - wireframe