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

PPT
Introdução Ao Web Design
Sandra Oliveira
 
PPT
Apresentação de Internet
CDP_Online
 
PDF
Pacote office
Eduardo Braga Jr
 
PPSX
DESIGN DE INTERFACE
Andrea Dalforno
 
PPTX
Editores de textos - Introdução ao Word
Clausia Antoneli
 
PPS
Internet
guest46b930
 
PDF
Html
Morvana Bonin
 
PPTX
Aula 01- web designer
Roney Sousa
 
Introdução Ao Web Design
Sandra Oliveira
 
Apresentação de Internet
CDP_Online
 
Pacote office
Eduardo Braga Jr
 
DESIGN DE INTERFACE
Andrea Dalforno
 
Editores de textos - Introdução ao Word
Clausia Antoneli
 
Internet
guest46b930
 
Aula 01- web designer
Roney Sousa
 

Mais procurados (20)

PPTX
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
PPT
Introdução ao web design
Carla Suelen
 
PPT
Gerenciamento de Projetos
Marcos Abreu
 
PPTX
Introdução a programação para a Internet
Leonardo Soares
 
PPTX
Banco de Dados Conceitos
Cleber Ramos
 
PDF
IHC - Slide 2 - Usabilidade e Princípios de Design
Márcio Darlen Lopes Cavalcante
 
PPTX
Introdução ao Word
Artur Coelho
 
PDF
Gestão de Projetos e Ferramentas
Nei Grando
 
PDF
Aula 5 midias sociais
aulasdejornalismo
 
PPTX
Fundamentos Engenharia de Software.pptx
Roberto Nunes
 
PDF
Plano de aula sobre HTML básico
Silvio Sales do Nascimento Júnior
 
PPT
Html Básico
Marcelo Machado Pereira
 
PPTX
Sistema Operacional Windows (versão 11)
DaviMatos25
 
PPTX
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
PPTX
Aula 01 - Ms PowerPoint
Roney Sousa
 
PDF
Apresentação Métricas
Gabriel Ishida
 
PDF
Aula 1 - Introdução ao Mobile
Cloves da Rocha
 
PPT
Aula 1 - Gestão de Projetos
Fernando Dantas
 
PDF
Navegadores de internet
Velosa007
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Introdução ao web design
Carla Suelen
 
Gerenciamento de Projetos
Marcos Abreu
 
Introdução a programação para a Internet
Leonardo Soares
 
Banco de Dados Conceitos
Cleber Ramos
 
IHC - Slide 2 - Usabilidade e Princípios de Design
Márcio Darlen Lopes Cavalcante
 
Introdução ao Word
Artur Coelho
 
Gestão de Projetos e Ferramentas
Nei Grando
 
Aula 5 midias sociais
aulasdejornalismo
 
Fundamentos Engenharia de Software.pptx
Roberto Nunes
 
Plano de aula sobre HTML básico
Silvio Sales do Nascimento Júnior
 
Sistema Operacional Windows (versão 11)
DaviMatos25
 
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Aula 01 - Ms PowerPoint
Roney Sousa
 
Apresentação Métricas
Gabriel Ishida
 
Aula 1 - Introdução ao Mobile
Cloves da Rocha
 
Aula 1 - Gestão de Projetos
Fernando Dantas
 
Navegadores de internet
Velosa007
 
Anúncio

Destaque (20)

PDF
Aula 1 Webdesign
Danilo Rosisca Pereira
 
PDF
Web Design > HTML (aula 1)
Felipe Fernandes
 
PDF
Web Design > Visão geral do Web Design
Felipe Fernandes
 
PDF
AULA 2:Fundamentos composicao visual
W.COM
 
PPT
Wireframe workshop externo_001_b
maurohs
 
PDF
Arquitetura da Informação - Wireframes
aiadufmg
 
PDF
Arquitetura de Informação sem wireframe
Karla Cruz
 
PPT
Curso prático de HTML - Aula 1
dionyso
 
PDF
Lista de Seletores e Propriedades
Antonio Silva
 
PPTX
Design gráfico 01
Hálisson Brito Mendes Ferreira
 
PDF
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
PDF
User experience for enterprise
Nigel Hudson
 
PDF
Design Responsivo
Rennan Martini
 
PPTX
Redes Sociais e Jornalismo Online
Virgínia Andrade
 
PPTX
Web Design - teoria básica das cores
Lucas Gheller
 
PDF
Slides minicurso Web Design
Ana Mendes
 
PDF
Web Design > História e a evolução do www
Felipe Fernandes
 
PPTX
Web Design Responsivo
Tiago Bezerra Dos Santos
 
Aula 1 Webdesign
Danilo Rosisca Pereira
 
Web Design > HTML (aula 1)
Felipe Fernandes
 
Web Design > Visão geral do Web Design
Felipe Fernandes
 
AULA 2:Fundamentos composicao visual
W.COM
 
Wireframe workshop externo_001_b
maurohs
 
Arquitetura da Informação - Wireframes
aiadufmg
 
Arquitetura de Informação sem wireframe
Karla Cruz
 
Curso prático de HTML - Aula 1
dionyso
 
Lista de Seletores e Propriedades
Antonio Silva
 
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
User experience for enterprise
Nigel Hudson
 
Design Responsivo
Rennan Martini
 
Redes Sociais e Jornalismo Online
Virgínia Andrade
 
Web Design - teoria básica das cores
Lucas Gheller
 
Slides minicurso Web Design
Ana Mendes
 
Web Design > História e a evolução do www
Felipe Fernandes
 
Web Design Responsivo
Tiago Bezerra Dos Santos
 
Anúncio

Semelhante a Web Design > Aula 00 (20)

PPT
Marketing Digital
Itamar Pereira
 
PDF
O que é ser web designer
Glaucia Cavalheiro
 
PDF
Texto1
Mirela Nunes
 
PDF
O que é ser web designer
Gabriel Cerutti
 
PDF
O que é ser web designer
Iglecia Jung
 
PDF
Texto1
ElianaBrittes
 
PDF
O que é ser web designer
rafinha_ddx
 
PDF
O que é ser web designer
ThiagoM20
 
PDF
O que é ser web designer
cleversonluislucas
 
PDF
O que é ser web designer
mcpureza
 
PDF
Designer
ShineMichelle
 
PDF
Oqueserwebdesigner
Victória Annestacy
 
PDF
O que é ser web designer
Lizy Novo
 
PDF
O que é ser web designer
Priee
 
PDF
O que é ser web designer
Jardel Xavier
 
PDF
Oqueserwebdesigner 110805121344-phpapp02
Daniela Oliveira Lopes
 
PDF
Oqueserwebdesigner
Jesse Js
 
PDF
Oqueserwebdesigner
Karolyn E. Corrêa
 
PDF
O que é ser web designer
Mario Junior
 
Marketing Digital
Itamar Pereira
 
O que é ser web designer
Glaucia Cavalheiro
 
Texto1
Mirela Nunes
 
O que é ser web designer
Gabriel Cerutti
 
O que é ser web designer
Iglecia Jung
 
O que é ser web designer
rafinha_ddx
 
O que é ser web designer
ThiagoM20
 
O que é ser web designer
cleversonluislucas
 
O que é ser web designer
mcpureza
 
Designer
ShineMichelle
 
Oqueserwebdesigner
Victória Annestacy
 
O que é ser web designer
Lizy Novo
 
O que é ser web designer
Priee
 
O que é ser web designer
Jardel Xavier
 
Oqueserwebdesigner 110805121344-phpapp02
Daniela Oliveira Lopes
 
Oqueserwebdesigner
Jesse Js
 
Oqueserwebdesigner
Karolyn E. Corrêa
 
O que é ser web designer
Mario Junior
 

Mais de Felipe Fernandes (13)

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

Último (14)

PDF
aobradoespritosantonaigreja-160529171517.pdf
vinicius252017
 
PDF
licao3_arrebatamento.pdfffffffffffffffff
vinicius252017
 
PPTX
24-A-ARMADURA-DE-DEUS.pptxxxxxxxxxxxxxxxx
vinicius252017
 
PPTX
17-A-HUMILHACAO-DE-NABUCODONOZOR.pptxxxxx
pz8zkp7f9s
 
PDF
Allians TOWER E almas towers CONTEXTO ARQUITETONICO .pdf
leticiacchavieru
 
PDF
-A EVOLUÇÃO DE BELEZA.pdf para qualquer um
jesusvanderlan36
 
PDF
Reforma-Agraria-no-Brasil-Um-Panorama-Atual.pdf.pdf
pedrocezar391
 
PDF
15_Descobrindo as Profecias.pdffffffffff
vinicius252017
 
PPT
HISTÓRIA, FILOSOFIA ESTÉTICA NO DESIGN E NA COMUNICAÇÃO
Mariangela Fazano
 
DOC
413481263-Roteiro-de-Visitas-Domiciliares-Do-ACS.doc
AnaCarolynePires
 
PPTX
13-NAO-CONSULTE-OS-MORTOS.pptxxxxxxxxxxx
vinicius252017
 
PDF
15_Descobrindo as Profecias.pdfffffffffff
vinicius252017
 
PPTX
28-A-NOSSA-LUTA-CONTRA-A-CARNE.pptxxxxxxx
vinicius252017
 
PPT
AULA 1 PLANO ENSINO - O QUE É ESTÉTICA NA COMUNICAÇÃO E NO DESIGN.ppt
Mariangela Fazano
 
aobradoespritosantonaigreja-160529171517.pdf
vinicius252017
 
licao3_arrebatamento.pdfffffffffffffffff
vinicius252017
 
24-A-ARMADURA-DE-DEUS.pptxxxxxxxxxxxxxxxx
vinicius252017
 
17-A-HUMILHACAO-DE-NABUCODONOZOR.pptxxxxx
pz8zkp7f9s
 
Allians TOWER E almas towers CONTEXTO ARQUITETONICO .pdf
leticiacchavieru
 
-A EVOLUÇÃO DE BELEZA.pdf para qualquer um
jesusvanderlan36
 
Reforma-Agraria-no-Brasil-Um-Panorama-Atual.pdf.pdf
pedrocezar391
 
15_Descobrindo as Profecias.pdffffffffff
vinicius252017
 
HISTÓRIA, FILOSOFIA ESTÉTICA NO DESIGN E NA COMUNICAÇÃO
Mariangela Fazano
 
413481263-Roteiro-de-Visitas-Domiciliares-Do-ACS.doc
AnaCarolynePires
 
13-NAO-CONSULTE-OS-MORTOS.pptxxxxxxxxxxx
vinicius252017
 
15_Descobrindo as Profecias.pdfffffffffff
vinicius252017
 
28-A-NOSSA-LUTA-CONTRA-A-CARNE.pptxxxxxxx
vinicius252017
 
AULA 1 PLANO ENSINO - O QUE É ESTÉTICA NA COMUNICAÇÃO E NO DESIGN.ppt
Mariangela Fazano
 

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