SlideShare uma empresa Scribd logo
Introdução ao Web Design Prof. Anderson Maia E-mail:tecnologo.maia@gmail.com
Introdução ao Web Design Alguns profissionais, empresas, cursos, matérias de revistas e conversas de botequim associam o design à produção de imagens ou manipulação de um software específico.  Obs:A definição do que é design vai muito além do Photoshop.
Introdução ao Web Design Definição: O web design é uma extensão da prática do design, O foco do projeto é Criação de um projeto visual e funcional(Web Site) e  documentos disponíveis no  ambiente  WEB.
Introdução ao Web Design O Web Design tende à Multidisciplinaridade. Areas como programação, inovação nos recursos dos navegadores que em conjunto com o design gráfico, estão em constante evolução.
Introdução ao Web Design Definição 2 A função do design, além da estética, é tornar um produto funcional. É transformar informação em comunicação.  Ao contrário do que muitos pensam, a função do design não está vinculada pura e simplesmente à produção de imagens .
Introdução ao Web Design O propósito do Web Design é facilitar a comunicação entre utilizador e conteúdo. Desenhar para Web significa desenhar para as pessoas que usam a web e não como achamos que usam.
Introdução ao Web Design Os Web Designs necessitam de capacidades para serem bem sucedidos neste ambiente. Deve conhecer perfeitamente os objetivos do site para os poder alcançar. Deve ser claro e objectivo que o design vai ter, e manter esse propósito. Deve ser simplista, isto é, se um elemento adiciona complexidade mas não valor, então deve ser mudado.
Introdução ao Web Design Mas por onde começar o Projeto É um conjunto de informações .
Introdução ao Web Design O  briefing  deve buscar um roteiro de ação para criar a solução que o cliente procura, é como mapear o problema, e com estas pistas, ter idéias para criar soluções.
Introdução ao Web Design Exercício para evidenciar a importância de um brief. Obs:Equipes de 4 alunos. Só podemos utilizar os matérias encontrados na lixeira da cantina e da sala de aula. 1ª fase: Cada grupo irá pensar em um abajur feito com a sucata e escrever em um papel como seria a montagem desse abajur (apenas escrever, sem montá–lo). 2º fase: Na próxima fase trocaremos os projetos. Um grupo diferente irá montar o abajur, sem que quem escreveu o projeto dê qualquer palpite ou ajuda.
Introdução ao Web Design Agora que já estudarmos o  briefing  devemos ter conhecimentos também sobre como trabalhar a  pregnância da forma .
Introdução ao Web Design
Desenvolvimento Projeto Web Planejamento e Estratégia Desenvolver uma estratégia que se ajuste às necessidades do desenvolvimento do projeto para Web. Coletar e organizar as informações para o projeto .
Desenvolvimento Projeto Web Fatores Primordiais: Objetivo do Projeto Produto Público Identidade Visual Motivações Comunicação Etc.....
Desenvolvimento Projeto Web Envolve respostas a algumas perguntas práticas. Qual é o público do site? O que é preciso comunicar? Qual a necessidade ou objetivo do cliente que queremos conquistar? Qual  o esboço do site? Que outros sites são similares ao gosto do cliente?
Desenvolvimento Projeto Web Fases do Desenvolvimento Estratégia: Os objetivos do site As necessidades e gostos da hipotética audiência. As formas e fraquezas da empresa concorrente As capacidades da própria empresa
Desenvolvimento Projeto Web Como definir uma estratégia?
Desenvolvimento Projeto Web Definir a mensagem a ser transmitida. Exemplo:
Desenvolvimento Projeto Web 2. Decidir como persuadir a audiência em aceitar essa mensagem. Exemplo:  decidir em “educar” os utilizadores na inúmeras possibilidades de cada celular, e criar, assim, um ambiente( uma forma de estar) que os utilizadores querem participar. No fundo, tornar a venda mais fácil.
Desenvolvimento Projeto Web 3. Escolher um tom Serio e formal ou divertido e informal? Visionário ou conservador? Dramático ou prático. 4 .  Identificar o nível de informação e detalhe oferecido no site.
Desenvolvimento Projeto Web Objetivos A definição pode ser formal ou informal, mediante a dimensão do projeto. Formal – é necessário convocar reuniões com todas as pessoas envolvidas – formando assim uma equipe de concepção. Informal – falar com elas individualmente, tendo cuidado, contudo de anotar suas ideias.
Desenvolvimento Projeto Web Exemplo da Empresa Nokia Objetivo: Atrair novos Clientes e a possibilidade de compra online. O objetivo pode ser modificado de acordo com o número de utilizadores, no entanto, a definição inicial de um objetivo define de imediato o público alvo, a estratégia e conteúdo dos sites.
Desenvolvimento Projeto Web Objetivos 1.  Qual o seu propósito? 2. Qual o público-alvo? 3. Qual o seu objetivo principal? 4. Que informações disponibilizar? 5. Quais os sites favoritos do cliente? 6. Qual o esboço do site?
Desenvolvimento Projeto Web Exercicio: Enumere os textos abaixo de acordo com a pergunta dos objetivos do slide anterior. Para que servirá esta presença na Internet? Para divulgar a empresa? Para vender Produtos ou serviços? Qual o Propósito da empresa? Fidelizar o cliente? Assisti-los no seu problema? Expandir o mercado da empresa? Centralizar os seus recursos? Angariar novos Clientes
Desenvolvimento Projeto Web Informação a respeito de como estruturar o trabalho de modo que ele atenda a expectativa o gosto do cliente . Quais os clientes da empresa? Que idade têm? São pessoas instruídas? Quais são as condições econômicas? São pessoas que dominam as novas tecnologias? Que futuros clientes se pretende alcançar.
Desenvolvimento Projeto Web Produtos e serviços comercializados? Informação técnica sobre os produtos? Recursos de assistência ao cliente? Divulgação empresarial ? Esta etapa é similar a definir os objetivos do site.
Produção Web Site Implementam-se os conceitos e o design através da construção de páginas web utilizando um tipo de linguagem disponível. Selecionar tecnologias que melhor se adequam aos objetivos definidos, que se adequam aos recursos disponíveis e capacidade dos utilizadores.
Produção Web Site Especificar qual a forme de produzir: A escrita manual do código HTML, por intermédio dos de editores de texto ou editores especializados de código HTML. U através de ferramentas para Web que fornecem interfaces gráficas de fácil utilização que exigem muito menos conhecimento sobre linguagem HTML, tais como Dreamweaver da Macromedia(Adobe) ou frontPage(Microsoft).
Produção Web Site Teste e Validação Um site envolve a utilização  De várias aplicações de software,  Portanto é necessário  testar a integração  dessas aplicações de modo a assegurar que todos os componentes de software e hardware funcionem em conjunto como se espera.
OBRIGADO PELA ATENÇÃO!
Bibliografia BEAIRD, Jaison.  Princípios do Web Design Maravilhoso . São Paulo: Alta Books, 2008.  ANDERSON, Chris.  A cauda longa .  Rio de Janeiro: Elsevier, 2006.

Mais conteúdo relacionado

PPSX
Aula 02 cim comunicação institucional
PDF
Teoria da comunicação (quadro-resumo)
PPTX
Aula 01- web designer
PPTX
Comunicação Organizacional - Aula 02
PPTX
Técnicas de redacção radiofónica
PPT
Teoria Das Cores
PDF
Guia básico wix
Aula 02 cim comunicação institucional
Teoria da comunicação (quadro-resumo)
Aula 01- web designer
Comunicação Organizacional - Aula 02
Técnicas de redacção radiofónica
Teoria Das Cores
Guia básico wix

Mais procurados (20)

PDF
Assessoria imprensa-comunicacao
PDF
RELAÇÕES PÚBLICAS criação e produção audiovisual aula 1
PPSX
Aula 04 - Teoria Funcionalista
PPTX
Assessoria de imprensa - O que é e como funciona
PPTX
Informática Básica - Aula 05 - Sistema Operacional Windows
PPT
Composição e Diagramação
PPT
Teorias do Jornalismo
PPS
Relações Públicas
PDF
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
PDF
Fundamentos da Linguagem Visual
PPTX
Comunicação Empresarial CE Básico
PDF
Redes Sociais Para Empreendedores
PPT
Panorama das Teorias das Comunicação
PDF
Principios do design
PDF
O texto publicitario_2015
PDF
Aula 1 introdução comunicação
PPTX
Sistema Operacional Windows (versão 11)
PPT
Design e design gráfico
PPT
Missão, visão e valores - conceitos
PDF
Publicidade e propaganda
Assessoria imprensa-comunicacao
RELAÇÕES PÚBLICAS criação e produção audiovisual aula 1
Aula 04 - Teoria Funcionalista
Assessoria de imprensa - O que é e como funciona
Informática Básica - Aula 05 - Sistema Operacional Windows
Composição e Diagramação
Teorias do Jornalismo
Relações Públicas
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Fundamentos da Linguagem Visual
Comunicação Empresarial CE Básico
Redes Sociais Para Empreendedores
Panorama das Teorias das Comunicação
Principios do design
O texto publicitario_2015
Aula 1 introdução comunicação
Sistema Operacional Windows (versão 11)
Design e design gráfico
Missão, visão e valores - conceitos
Publicidade e propaganda
Anúncio

Destaque (20)

PPT
Introdução Ao Web Design
PDF
A 3ª Área do Design: Web Design
PPT
Principios do Design de Interfaces aplicados a Busca
PDF
Slides minicurso Web Design
PPTX
Web Design Responsivo
PDF
Web Design > História e a evolução do www
PDF
Introdução a sistemas operacionais 001
PDF
Sistema computacional (arquitecturas y memorias)
PDF
Aula 1 Webdesign
PPT
So2 aula00-cic4 ma446-quarta
PPTX
So2 aula00-noite-1sem2011
PDF
SO-01 Introdução aos Sistemas Operacionais
DOCX
Sistema computacional 3
PDF
Introducao aos Sistemas Operacionais
PPTX
Web design e Programação front-end
PDF
Design para a web - da interface ao branding
PPT
Sistemas operacionais introdução
PPT
Sistemas Operacionais 2 -aula00
PDF
Introducao a Sistemas Operacionais
PPTX
Introdução ao Front-end no Desenvolvimento Web
Introdução Ao Web Design
A 3ª Área do Design: Web Design
Principios do Design de Interfaces aplicados a Busca
Slides minicurso Web Design
Web Design Responsivo
Web Design > História e a evolução do www
Introdução a sistemas operacionais 001
Sistema computacional (arquitecturas y memorias)
Aula 1 Webdesign
So2 aula00-cic4 ma446-quarta
So2 aula00-noite-1sem2011
SO-01 Introdução aos Sistemas Operacionais
Sistema computacional 3
Introducao aos Sistemas Operacionais
Web design e Programação front-end
Design para a web - da interface ao branding
Sistemas operacionais introdução
Sistemas Operacionais 2 -aula00
Introducao a Sistemas Operacionais
Introdução ao Front-end no Desenvolvimento Web
Anúncio

Semelhante a Introdução ao web design (20)

PPTX
Aula 01 layout
PPTX
Aula 01 layout
PDF
Apostila comunicação visual para web
PPS
Curso web faveni aula 27
PPT
Briefing - (para web design)
PDF
Conteúdo - Web Design Aplicado ao Soft Marketing
PDF
Aula 1 - Desenvolvimento do leiaute (1).pdf
PPT
Guia da Gestão de Projectos Web
PDF
Apostila comunicação visual para web
PDF
Apostila comunicação visual
PDF
Como Criar Produtos Digitais
PDF
Artigo papel do web designer
PPS
Projetos Web - Estratégia de projeto
PDF
E book Design - Presença Digital
PPT
Desenvolvimento de Sites V.2
PPTX
Responsive wordpress
PDF
Projeto de WEB Site
PPT
Fluxo De Midias Sociais Integradas V1.1
PDF
O que é Web Designer?
Aula 01 layout
Aula 01 layout
Apostila comunicação visual para web
Curso web faveni aula 27
Briefing - (para web design)
Conteúdo - Web Design Aplicado ao Soft Marketing
Aula 1 - Desenvolvimento do leiaute (1).pdf
Guia da Gestão de Projectos Web
Apostila comunicação visual para web
Apostila comunicação visual
Como Criar Produtos Digitais
Artigo papel do web designer
Projetos Web - Estratégia de projeto
E book Design - Presença Digital
Desenvolvimento de Sites V.2
Responsive wordpress
Projeto de WEB Site
Fluxo De Midias Sociais Integradas V1.1
O que é Web Designer?

Introdução ao web design

  • 1. Introdução ao Web Design Prof. Anderson Maia E-mail:tecnologo.maia@gmail.com
  • 2. Introdução ao Web Design Alguns profissionais, empresas, cursos, matérias de revistas e conversas de botequim associam o design à produção de imagens ou manipulação de um software específico. Obs:A definição do que é design vai muito além do Photoshop.
  • 3. Introdução ao Web Design Definição: O web design é uma extensão da prática do design, O foco do projeto é Criação de um projeto visual e funcional(Web Site) e documentos disponíveis no ambiente WEB.
  • 4. Introdução ao Web Design O Web Design tende à Multidisciplinaridade. Areas como programação, inovação nos recursos dos navegadores que em conjunto com o design gráfico, estão em constante evolução.
  • 5. Introdução ao Web Design Definição 2 A função do design, além da estética, é tornar um produto funcional. É transformar informação em comunicação. Ao contrário do que muitos pensam, a função do design não está vinculada pura e simplesmente à produção de imagens .
  • 6. Introdução ao Web Design O propósito do Web Design é facilitar a comunicação entre utilizador e conteúdo. Desenhar para Web significa desenhar para as pessoas que usam a web e não como achamos que usam.
  • 7. Introdução ao Web Design Os Web Designs necessitam de capacidades para serem bem sucedidos neste ambiente. Deve conhecer perfeitamente os objetivos do site para os poder alcançar. Deve ser claro e objectivo que o design vai ter, e manter esse propósito. Deve ser simplista, isto é, se um elemento adiciona complexidade mas não valor, então deve ser mudado.
  • 8. Introdução ao Web Design Mas por onde começar o Projeto É um conjunto de informações .
  • 9. Introdução ao Web Design O briefing deve buscar um roteiro de ação para criar a solução que o cliente procura, é como mapear o problema, e com estas pistas, ter idéias para criar soluções.
  • 10. Introdução ao Web Design Exercício para evidenciar a importância de um brief. Obs:Equipes de 4 alunos. Só podemos utilizar os matérias encontrados na lixeira da cantina e da sala de aula. 1ª fase: Cada grupo irá pensar em um abajur feito com a sucata e escrever em um papel como seria a montagem desse abajur (apenas escrever, sem montá–lo). 2º fase: Na próxima fase trocaremos os projetos. Um grupo diferente irá montar o abajur, sem que quem escreveu o projeto dê qualquer palpite ou ajuda.
  • 11. Introdução ao Web Design Agora que já estudarmos o briefing devemos ter conhecimentos também sobre como trabalhar a pregnância da forma .
  • 13. Desenvolvimento Projeto Web Planejamento e Estratégia Desenvolver uma estratégia que se ajuste às necessidades do desenvolvimento do projeto para Web. Coletar e organizar as informações para o projeto .
  • 14. Desenvolvimento Projeto Web Fatores Primordiais: Objetivo do Projeto Produto Público Identidade Visual Motivações Comunicação Etc.....
  • 15. Desenvolvimento Projeto Web Envolve respostas a algumas perguntas práticas. Qual é o público do site? O que é preciso comunicar? Qual a necessidade ou objetivo do cliente que queremos conquistar? Qual o esboço do site? Que outros sites são similares ao gosto do cliente?
  • 16. Desenvolvimento Projeto Web Fases do Desenvolvimento Estratégia: Os objetivos do site As necessidades e gostos da hipotética audiência. As formas e fraquezas da empresa concorrente As capacidades da própria empresa
  • 17. Desenvolvimento Projeto Web Como definir uma estratégia?
  • 18. Desenvolvimento Projeto Web Definir a mensagem a ser transmitida. Exemplo:
  • 19. Desenvolvimento Projeto Web 2. Decidir como persuadir a audiência em aceitar essa mensagem. Exemplo: decidir em “educar” os utilizadores na inúmeras possibilidades de cada celular, e criar, assim, um ambiente( uma forma de estar) que os utilizadores querem participar. No fundo, tornar a venda mais fácil.
  • 20. Desenvolvimento Projeto Web 3. Escolher um tom Serio e formal ou divertido e informal? Visionário ou conservador? Dramático ou prático. 4 . Identificar o nível de informação e detalhe oferecido no site.
  • 21. Desenvolvimento Projeto Web Objetivos A definição pode ser formal ou informal, mediante a dimensão do projeto. Formal – é necessário convocar reuniões com todas as pessoas envolvidas – formando assim uma equipe de concepção. Informal – falar com elas individualmente, tendo cuidado, contudo de anotar suas ideias.
  • 22. Desenvolvimento Projeto Web Exemplo da Empresa Nokia Objetivo: Atrair novos Clientes e a possibilidade de compra online. O objetivo pode ser modificado de acordo com o número de utilizadores, no entanto, a definição inicial de um objetivo define de imediato o público alvo, a estratégia e conteúdo dos sites.
  • 23. Desenvolvimento Projeto Web Objetivos 1. Qual o seu propósito? 2. Qual o público-alvo? 3. Qual o seu objetivo principal? 4. Que informações disponibilizar? 5. Quais os sites favoritos do cliente? 6. Qual o esboço do site?
  • 24. Desenvolvimento Projeto Web Exercicio: Enumere os textos abaixo de acordo com a pergunta dos objetivos do slide anterior. Para que servirá esta presença na Internet? Para divulgar a empresa? Para vender Produtos ou serviços? Qual o Propósito da empresa? Fidelizar o cliente? Assisti-los no seu problema? Expandir o mercado da empresa? Centralizar os seus recursos? Angariar novos Clientes
  • 25. Desenvolvimento Projeto Web Informação a respeito de como estruturar o trabalho de modo que ele atenda a expectativa o gosto do cliente . Quais os clientes da empresa? Que idade têm? São pessoas instruídas? Quais são as condições econômicas? São pessoas que dominam as novas tecnologias? Que futuros clientes se pretende alcançar.
  • 26. Desenvolvimento Projeto Web Produtos e serviços comercializados? Informação técnica sobre os produtos? Recursos de assistência ao cliente? Divulgação empresarial ? Esta etapa é similar a definir os objetivos do site.
  • 27. Produção Web Site Implementam-se os conceitos e o design através da construção de páginas web utilizando um tipo de linguagem disponível. Selecionar tecnologias que melhor se adequam aos objetivos definidos, que se adequam aos recursos disponíveis e capacidade dos utilizadores.
  • 28. Produção Web Site Especificar qual a forme de produzir: A escrita manual do código HTML, por intermédio dos de editores de texto ou editores especializados de código HTML. U através de ferramentas para Web que fornecem interfaces gráficas de fácil utilização que exigem muito menos conhecimento sobre linguagem HTML, tais como Dreamweaver da Macromedia(Adobe) ou frontPage(Microsoft).
  • 29. Produção Web Site Teste e Validação Um site envolve a utilização De várias aplicações de software, Portanto é necessário testar a integração dessas aplicações de modo a assegurar que todos os componentes de software e hardware funcionem em conjunto como se espera.
  • 31. Bibliografia BEAIRD, Jaison. Princípios do Web Design Maravilhoso . São Paulo: Alta Books, 2008. ANDERSON, Chris. A cauda longa . Rio de Janeiro: Elsevier, 2006.