SlideShare uma empresa Scribd logo
WEB DESIGN
Aplicado ao Soft Marketing
Emerson Almeida
Graduado em Design de Interiores
Designer Gráfico
Microempreendedor
Introdução
Etapas do Projeto
Pré-Projeto
Projeto
Design
Implementação
Web Marketing
Desempenho
SLIDE 1 - APRESENTAÇÃO
Apresentação do tema proposto e da disciplina.
CONTEÚDO
SLIDE 2 – INTRODUÇÃO AOS CONCEITOS
Web Marketing
Qualquer esforço promocional realizado por meio da web para
promover as melhores soluções em produtos e serviços.
Soft Marketing
Técnicas de marketing com uma abordagem mais suave e sutil.
Design leve e livre de elementos que poluam o visual das páginas
tornando o site mais atrativo, o flat design (design plano), banners
ocultos que se revelam ao passar o mouse, a marca do produto
vinculada a outros elementos que a incorporem são alguns
exemplos.
E-Comerce
Comércio eletrônico caracterizado por qualquer transação
comercial realizada através de um equipamento eletrônico e da
web.
O ambiente web caracteriza-se pelo excesso de
informações. Como atrair o potencial cliente para o
seu negócio on-line? Como mantê-lo navegando
em suas páginas?
Ex.: A compra de um smartphone. O consumidor
tem a seu dispor inúmeras ofertas em lojas virtuais
com o mesmo produto. Qual o diferencial
competitivo na hora da escolha? O preço? A
marca? A reputação da empresa? O design das
páginas? Usabilidade (Comprar com 1 clik)?
SLIDE 3 - ETAPAS DO PROJETO
Apresentação das etapas que compõem um projeto de web design.
SLIDE 4 - PRÉ-PROJETO
Fase inicial onde se estabelece os primeiros contatos com o cliente.
Entrevistas com os representantes da empresa, a definição de um
domínio, técnicas como brainstorm ajudam na formação de ideias.
O briefing é um elemento essencial para o desenvolvimento do
projeto. Conhecer a empresa, sua missão, visão e valores. Qual é o
seu produto, o seu público alvo, o mercado em que atua.
Temos três tipos de briefing: geral, de produto e de criação.
É também uma fase de coleta de material que a empresa possa
oferecer como documentos, catálogos, mídias.
Captação por meio de fotos da empresa e dos produtos.
A pesquisa nessa etapa é de extrema importância, a busca por
informações sobre a área de atuação: o que empresas dessa área
faz, como faz e o que oferece.
Concorrência: referência de outros sites afins para ver como outras
empresas do ramo se apresentam na web, pontos positivos e
negativos desses sites.
SLIDE 5 – PROJETO
Todo material reunido é hora de organizar as informações e
esquematizar o site, definir a hierarquia das páginas e como todo
conteúdo será distribuído.
Com a arquitetura da informação já definida, papel e lápis na mão
para fazer sketchs, rascunhos, desenhar como serão as páginas.
A definição de como serão desenvolvidas essas páginas, em quais
ferramentas (Fireworks, Dreamweaver, Wordpress, Joomla) e quais
linguagens utilizadas (HTML + CSS, Java Script).
Quais as mídias foram fornecidas e como trabalhá-las (player de
áudio, vídeo, galeria de imagens).
O cuidado em desenvolver páginas com design responsivo, de
forma que a estrutura do site se adapte a qualquer dispositivo.
SLIDE 6 – DESIGN
É hora de dar forma a tudo que projetamos. Recursos como
wireframes auxiliam na construção esquemática dos elementos do
site.
Um breve estudo das cores, combinações, psicodinâmica. Entender
o poder de influências das cores é muito importante. Com base
nesses estudos definimos o padrão cromático do site.
Um estudo da tipografia e suas famílias tipográficas, a escolha da
fonte para títulos, cabeçalhos e corpo.
Edição das imagens e fotos no Photoshop. Estudos de layout no
Fireworks e otimização das imagens para web.
Importação do Firewoks para o Dreamweaver e desenvolvimento
final do site.
(Demonstração de dois layouts dentro do Dreamweaver e do
Fireworks).
(Demonstração de ferramentas on-line como o Dafont e o Adobe
Kuler)
Conhecer alguns dos principais sistemas de CMS
(Content Management System) ou sistema de
gerenciamento de conteúdo (Wordpress e Joomla!).
SLIDE 7 – IMPLEMENTAÇÃO
Esta é a etapa em que preparamos o site para a publicação.
O uso de técnicas como o SEO (Search Engine Optimization)
otimizam o site para que ele apareça nos primeiros resultados de
busca do Google.
A indicação de tags (palavras-chaves), títulos do site e das páginas,
título das imagens, links, destaques em palavras são algumas
táticas que empregamos.
A escolha do provedor de serviços para hospedagem, a pesquisa e
registro do domínio de um site.
E por fim a publicação via FTP (File Transfer Protocol) que é uma
das formas de transferência dos arquivos para o ambiente web.
SLIDE 8 – WEB MARKETING
O Web Marketing reúne táticas que promovem os produto e
serviços de uma empresa e impulsionam as vendas. Construir a
imagem da empresa e do produto através do relacionamento com
o cliente é o melhor exemplo de Marketing bem sucedido.
As vendas através do e-comerce podem ser alavancadas através do
e-mail marketing, anúncios patrocinados como o Google AdWords
e AdSense.
O e-mail marketing funciona como um panfleto virtual, divulgando
os produtos e serviços, enviados para uma lista de e-mail de
clientes.
O News Letter é um boletim que tem por objetivo informar as
novidades da empresa, como ela tem atuado no mercado, a
divulgação e participação em eventos, dentre outros.
No decorrer do curso vamos aprender como elaborar uma boa
campanha e desenvolver layouts para essas aplicações.
(Apresentação do Google AdWords e AdSense on-line)
SLIDE 9 – DESEMPENHO
O pós-publicação é tão importante quanto todo o processo de
desenvolvimento do site.
Feedback constante com o cliente pode nos apontar os acertos e
erros e o nível de satisfação com o serviço prestado.
A constante evolução da tecnologia e do mercado demanda a
necessidade de constantes atualizações e manutenção do site.
É interessante uma atualização anual do site, com novo layout,
acompanhando as tendências do mercado e as necessidades do
cliente.
O desempenho do site também é outro ponto importante. O
Google disponibiliza uma ferramenta que permite analisar o trafego
e visitas no site, o alcance, o que está sendo compartilhado, e
muito mais.
Ser presente também nas redes sociais: ter uma página no
Facebook ou um perfil no Google+, manter um canal direto de
comunicação através do Skype, publicar vídeos no YouTube,
divulgar as atividades no Twitter, criam um relacionamento mais
próximo com o cliente.
SLIDE 10 – BIBLIOGRAFIA
Use a Cabeça – Web Design
Autor: Ethan Watrall
ISBN: 978-85-7608-366-5
Editora Alta Books
Use a Cabeça – HTML com CSS e XHTML
Autores: Eric Freeman , Elisabeth Freeman
ISBN: 978-85-7608-218-7
Editora Alta Books
Marketing na Era Digital
Autor: Martha Gabriel
ISBN:978-85-7522-257-7
Editora Novatec
Briefing - Gestão do Projeto de Design
Autor: Peter L. Phillips
ISBN: 978-85-2120-438-1
Editora Edgard Blucher
Bibliografia Complementar
AdobeCreative Team
AdobeDreamweaver CC Classroom in a Book
ISBN-10: 0-321-91941-6
ISBN-13: 978-0-321-91941-0
AdobeFireworks CS6 Classroom in a Book
ISBN-10: 0-321-82244-7
ISBN-13: 978-0-321-82244-4
Psicodinâmicadas Cores em Comunicação
Autores: Modesto Farina; Clotilde Perez; Dorinho Bastos
EditoraEdgard Blucher
FacebookMarketing – PDF
Engajamentopara transformar fãs em clientes
CamilaPorto
SEO Na Prática– PDF
Natanael Oliveira

Mais conteúdo relacionado

Mais procurados

Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
Ailton Adriano
 
Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?
Mirago Marketing Digital
 
Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta Site
Mila Ramos
 
Portfólio Digital - Ricardo Souza
Portfólio Digital - Ricardo SouzaPortfólio Digital - Ricardo Souza
Portfólio Digital - Ricardo Souza
Ricardo Souza
 
Kits de Comunicação Estratégica.
Kits de Comunicação Estratégica.Kits de Comunicação Estratégica.
Kits de Comunicação Estratégica.
Resulta Mkt & Vendas
 
Web Expo Forum - O poder das redes sociais
Web Expo Forum - O poder das redes sociaisWeb Expo Forum - O poder das redes sociais
Web Expo Forum - O poder das redes sociais
Edney Souza
 
PUB5AN - Planejamento de Internet
PUB5AN - Planejamento de InternetPUB5AN - Planejamento de Internet
PUB5AN - Planejamento de Internet
Neca Boullosa
 
REDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social Media
REDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social MediaREDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social Media
REDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social Media
Sofia Pereira Silva
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
Helder Soares
 
Curso web faveni aula 27
Curso web faveni aula 27Curso web faveni aula 27
Curso web faveni aula 27
Luis Marcelo Zanlucki
 
Capitulo 6 Livro Nielsen
Capitulo 6 Livro NielsenCapitulo 6 Livro Nielsen
Capitulo 6 Livro Nielsen
Luiz Agner
 
Tic un3 fichaapoio_007 - slidshow
Tic un3 fichaapoio_007 - slidshowTic un3 fichaapoio_007 - slidshow
Tic un3 fichaapoio_007 - slidshow
superoque
 
Treinamento Marketing Digital
Treinamento Marketing DigitalTreinamento Marketing Digital
Treinamento Marketing Digital
Neca Boullosa
 
LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01
LWDCURSOS
 
Construa o seu website com o wordpress
Construa o seu website com o wordpressConstrua o seu website com o wordpress
Construa o seu website com o wordpress
Cady Bocum
 
8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sites
Isaac Batista
 
Usando o SlideShare na Comunicação Online
Usando o SlideShare na Comunicação OnlineUsando o SlideShare na Comunicação Online
Usando o SlideShare na Comunicação Online
Tarcízio Silva
 
PUB5AN - Comunicação Digital - AULA REVISÃO
PUB5AN - Comunicação Digital - AULA REVISÃOPUB5AN - Comunicação Digital - AULA REVISÃO
PUB5AN - Comunicação Digital - AULA REVISÃO
Neca Boullosa
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
Celina Uemura
 
Voce ja tem_um_plano_b_conrado_adolpho_versao_10
Voce ja tem_um_plano_b_conrado_adolpho_versao_10Voce ja tem_um_plano_b_conrado_adolpho_versao_10
Voce ja tem_um_plano_b_conrado_adolpho_versao_10
leopaiva217101
 

Mais procurados (20)

Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?Planejando a construção de um novo site - O que devo saber?
Planejando a construção de um novo site - O que devo saber?
 
Editora Revan - Proposta Site
Editora Revan - Proposta SiteEditora Revan - Proposta Site
Editora Revan - Proposta Site
 
Portfólio Digital - Ricardo Souza
Portfólio Digital - Ricardo SouzaPortfólio Digital - Ricardo Souza
Portfólio Digital - Ricardo Souza
 
Kits de Comunicação Estratégica.
Kits de Comunicação Estratégica.Kits de Comunicação Estratégica.
Kits de Comunicação Estratégica.
 
Web Expo Forum - O poder das redes sociais
Web Expo Forum - O poder das redes sociaisWeb Expo Forum - O poder das redes sociais
Web Expo Forum - O poder das redes sociais
 
PUB5AN - Planejamento de Internet
PUB5AN - Planejamento de InternetPUB5AN - Planejamento de Internet
PUB5AN - Planejamento de Internet
 
REDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social Media
REDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social MediaREDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social Media
REDES SOCIAIS PROFISSIONAIS E CORPORATIVAS | Social Media
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
 
Curso web faveni aula 27
Curso web faveni aula 27Curso web faveni aula 27
Curso web faveni aula 27
 
Capitulo 6 Livro Nielsen
Capitulo 6 Livro NielsenCapitulo 6 Livro Nielsen
Capitulo 6 Livro Nielsen
 
Tic un3 fichaapoio_007 - slidshow
Tic un3 fichaapoio_007 - slidshowTic un3 fichaapoio_007 - slidshow
Tic un3 fichaapoio_007 - slidshow
 
Treinamento Marketing Digital
Treinamento Marketing DigitalTreinamento Marketing Digital
Treinamento Marketing Digital
 
LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01
 
Construa o seu website com o wordpress
Construa o seu website com o wordpressConstrua o seu website com o wordpress
Construa o seu website com o wordpress
 
8 fazes do planejamento de sites
8 fazes do planejamento de sites8 fazes do planejamento de sites
8 fazes do planejamento de sites
 
Usando o SlideShare na Comunicação Online
Usando o SlideShare na Comunicação OnlineUsando o SlideShare na Comunicação Online
Usando o SlideShare na Comunicação Online
 
PUB5AN - Comunicação Digital - AULA REVISÃO
PUB5AN - Comunicação Digital - AULA REVISÃOPUB5AN - Comunicação Digital - AULA REVISÃO
PUB5AN - Comunicação Digital - AULA REVISÃO
 
Metodologia para criação de sites
Metodologia para criação de sitesMetodologia para criação de sites
Metodologia para criação de sites
 
Voce ja tem_um_plano_b_conrado_adolpho_versao_10
Voce ja tem_um_plano_b_conrado_adolpho_versao_10Voce ja tem_um_plano_b_conrado_adolpho_versao_10
Voce ja tem_um_plano_b_conrado_adolpho_versao_10
 

Destaque

Responsive Layouts
Responsive LayoutsResponsive Layouts
Responsive Layouts
Thiago Oliveira Chaves
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
Rafael França
 
Portifólio em grupo 2014 2ª semestre
Portifólio em grupo 2014 2ª semestrePortifólio em grupo 2014 2ª semestre
Portifólio em grupo 2014 2ª semestre
Ivon Nunes Vaz
 
Desconferencia da #caravanapi no #oxenterails 2010
Desconferencia da #caravanapi no #oxenterails 2010Desconferencia da #caravanapi no #oxenterails 2010
Desconferencia da #caravanapi no #oxenterails 2010
Cleiton Francisco
 
Web 2.0: novos rumos do design de interação
Web 2.0: novos rumos do design de interaçãoWeb 2.0: novos rumos do design de interação
Web 2.0: novos rumos do design de interação
Paulo Coimbra
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Cicero Monteiro
 
Lt youpix
Lt youpixLt youpix
Lt youpix
Alda Rocha
 
Palestra DevFest2014 - Anatomia do Design Responsivo
Palestra DevFest2014 - Anatomia do Design ResponsivoPalestra DevFest2014 - Anatomia do Design Responsivo
Palestra DevFest2014 - Anatomia do Design Responsivo
Alda Rocha
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
Carlos Eduardo Kadu
 
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
Diogo Souza Machado
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Augusto César Albuquerque
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Tersis Zonato
 
Empreendedorismo no mercado mobile
Empreendedorismo no mercado mobileEmpreendedorismo no mercado mobile
Empreendedorismo no mercado mobile
Diogo Souza Machado
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
Marconi Pacheco
 
4 passos para PRODUZIR E PUBLICAR conteúdo na web
4 passos para PRODUZIR E PUBLICAR conteúdo na web4 passos para PRODUZIR E PUBLICAR conteúdo na web
4 passos para PRODUZIR E PUBLICAR conteúdo na web
Contentools
 
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Daniel Afonso
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Juliano Toazza
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
Felipe Fernandes
 
Marketing de Conteúdo na Web
Marketing de Conteúdo na WebMarketing de Conteúdo na Web
Marketing de Conteúdo na Web
Elva Vieira
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 

Destaque (20)

Responsive Layouts
Responsive LayoutsResponsive Layouts
Responsive Layouts
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Portifólio em grupo 2014 2ª semestre
Portifólio em grupo 2014 2ª semestrePortifólio em grupo 2014 2ª semestre
Portifólio em grupo 2014 2ª semestre
 
Desconferencia da #caravanapi no #oxenterails 2010
Desconferencia da #caravanapi no #oxenterails 2010Desconferencia da #caravanapi no #oxenterails 2010
Desconferencia da #caravanapi no #oxenterails 2010
 
Web 2.0: novos rumos do design de interação
Web 2.0: novos rumos do design de interaçãoWeb 2.0: novos rumos do design de interação
Web 2.0: novos rumos do design de interação
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Lt youpix
Lt youpixLt youpix
Lt youpix
 
Palestra DevFest2014 - Anatomia do Design Responsivo
Palestra DevFest2014 - Anatomia do Design ResponsivoPalestra DevFest2014 - Anatomia do Design Responsivo
Palestra DevFest2014 - Anatomia do Design Responsivo
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Responsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivosResponsive web design, conteúdo em todos os dispositivos
Responsive web design, conteúdo em todos os dispositivos
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Empreendedorismo no mercado mobile
Empreendedorismo no mercado mobileEmpreendedorismo no mercado mobile
Empreendedorismo no mercado mobile
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
4 passos para PRODUZIR E PUBLICAR conteúdo na web
4 passos para PRODUZIR E PUBLICAR conteúdo na web4 passos para PRODUZIR E PUBLICAR conteúdo na web
4 passos para PRODUZIR E PUBLICAR conteúdo na web
 
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivosResponsive Web Design. Um site, um conteúdo e muitos dispositivos
Responsive Web Design. Um site, um conteúdo e muitos dispositivos
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Web Design > Cores
Web Design > CoresWeb Design > Cores
Web Design > Cores
 
Marketing de Conteúdo na Web
Marketing de Conteúdo na WebMarketing de Conteúdo na Web
Marketing de Conteúdo na Web
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 

Semelhante a Conteúdo - Web Design Aplicado ao Soft Marketing

Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
Carla Suelen
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Luiz da Silveira
 
Construa o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêConstrua o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquê
Cady Bocum
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
Patricia Mallmann
 
Portfolio Bule ComunicaçãO
Portfolio Bule ComunicaçãOPortfolio Bule ComunicaçãO
Portfolio Bule ComunicaçãO
Bule Comunicação
 
Marketing Digital para o Mercado de EPIs
Marketing Digital para o Mercado de EPIsMarketing Digital para o Mercado de EPIs
Marketing Digital para o Mercado de EPIs
Zanel EPIs de Raspa e Vaqueta
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
Pedro de Siqueira
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
Israel Degasperi
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visual
Adriano Borges
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
Marcos Nori
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
Agência 3B Comunicação - Apresentação
Agência 3B Comunicação - ApresentaçãoAgência 3B Comunicação - Apresentação
Agência 3B Comunicação - Apresentação
Agência 3B
 
Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)
Rafael Teixeira
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
Alan Pereira
 
Dream 02
Dream 02Dream 02
Dream 02
Anderson Maciel
 
Dream 02
Dream 02Dream 02
Apresentação BH Sites
Apresentação BH SitesApresentação BH Sites
Apresentação BH Sites
BH Sites
 
Indústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatívelIndústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatível
Arank
 
Agência Web - ADDTECH
Agência Web - ADDTECHAgência Web - ADDTECH
Agência Web - ADDTECH
.add
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
Renato Bongiorno Bonfanti
 

Semelhante a Conteúdo - Web Design Aplicado ao Soft Marketing (20)

Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Construa o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquêConstrua o seu negócio online: como, onde e porquê
Construa o seu negócio online: como, onde e porquê
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Portfolio Bule ComunicaçãO
Portfolio Bule ComunicaçãOPortfolio Bule ComunicaçãO
Portfolio Bule ComunicaçãO
 
Marketing Digital para o Mercado de EPIs
Marketing Digital para o Mercado de EPIsMarketing Digital para o Mercado de EPIs
Marketing Digital para o Mercado de EPIs
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visual
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Agência 3B Comunicação - Apresentação
Agência 3B Comunicação - ApresentaçãoAgência 3B Comunicação - Apresentação
Agência 3B Comunicação - Apresentação
 
Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)Metodologia De Projetos Para Web(1)
Metodologia De Projetos Para Web(1)
 
Modelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_websiteModelo planejamento digital_interativo_website
Modelo planejamento digital_interativo_website
 
Dream 02
Dream 02Dream 02
Dream 02
 
Dream 02
Dream 02Dream 02
Dream 02
 
Apresentação BH Sites
Apresentação BH SitesApresentação BH Sites
Apresentação BH Sites
 
Indústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatívelIndústrias e marcas: Como tornar seu site imbatível
Indústrias e marcas: Como tornar seu site imbatível
 
Agência Web - ADDTECH
Agência Web - ADDTECHAgência Web - ADDTECH
Agência Web - ADDTECH
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
 

Conteúdo - Web Design Aplicado ao Soft Marketing

  • 1. WEB DESIGN Aplicado ao Soft Marketing Emerson Almeida Graduado em Design de Interiores Designer Gráfico Microempreendedor Introdução Etapas do Projeto Pré-Projeto Projeto Design Implementação Web Marketing Desempenho SLIDE 1 - APRESENTAÇÃO Apresentação do tema proposto e da disciplina. CONTEÚDO
  • 2. SLIDE 2 – INTRODUÇÃO AOS CONCEITOS Web Marketing Qualquer esforço promocional realizado por meio da web para promover as melhores soluções em produtos e serviços. Soft Marketing Técnicas de marketing com uma abordagem mais suave e sutil. Design leve e livre de elementos que poluam o visual das páginas tornando o site mais atrativo, o flat design (design plano), banners ocultos que se revelam ao passar o mouse, a marca do produto vinculada a outros elementos que a incorporem são alguns exemplos. E-Comerce Comércio eletrônico caracterizado por qualquer transação comercial realizada através de um equipamento eletrônico e da web. O ambiente web caracteriza-se pelo excesso de informações. Como atrair o potencial cliente para o seu negócio on-line? Como mantê-lo navegando em suas páginas? Ex.: A compra de um smartphone. O consumidor tem a seu dispor inúmeras ofertas em lojas virtuais com o mesmo produto. Qual o diferencial competitivo na hora da escolha? O preço? A marca? A reputação da empresa? O design das páginas? Usabilidade (Comprar com 1 clik)?
  • 3. SLIDE 3 - ETAPAS DO PROJETO Apresentação das etapas que compõem um projeto de web design.
  • 4. SLIDE 4 - PRÉ-PROJETO Fase inicial onde se estabelece os primeiros contatos com o cliente. Entrevistas com os representantes da empresa, a definição de um domínio, técnicas como brainstorm ajudam na formação de ideias. O briefing é um elemento essencial para o desenvolvimento do projeto. Conhecer a empresa, sua missão, visão e valores. Qual é o seu produto, o seu público alvo, o mercado em que atua. Temos três tipos de briefing: geral, de produto e de criação. É também uma fase de coleta de material que a empresa possa oferecer como documentos, catálogos, mídias. Captação por meio de fotos da empresa e dos produtos. A pesquisa nessa etapa é de extrema importância, a busca por informações sobre a área de atuação: o que empresas dessa área faz, como faz e o que oferece. Concorrência: referência de outros sites afins para ver como outras empresas do ramo se apresentam na web, pontos positivos e negativos desses sites.
  • 5. SLIDE 5 – PROJETO Todo material reunido é hora de organizar as informações e esquematizar o site, definir a hierarquia das páginas e como todo conteúdo será distribuído. Com a arquitetura da informação já definida, papel e lápis na mão para fazer sketchs, rascunhos, desenhar como serão as páginas. A definição de como serão desenvolvidas essas páginas, em quais ferramentas (Fireworks, Dreamweaver, Wordpress, Joomla) e quais linguagens utilizadas (HTML + CSS, Java Script). Quais as mídias foram fornecidas e como trabalhá-las (player de áudio, vídeo, galeria de imagens). O cuidado em desenvolver páginas com design responsivo, de forma que a estrutura do site se adapte a qualquer dispositivo.
  • 6. SLIDE 6 – DESIGN É hora de dar forma a tudo que projetamos. Recursos como wireframes auxiliam na construção esquemática dos elementos do site. Um breve estudo das cores, combinações, psicodinâmica. Entender o poder de influências das cores é muito importante. Com base nesses estudos definimos o padrão cromático do site. Um estudo da tipografia e suas famílias tipográficas, a escolha da fonte para títulos, cabeçalhos e corpo. Edição das imagens e fotos no Photoshop. Estudos de layout no Fireworks e otimização das imagens para web. Importação do Firewoks para o Dreamweaver e desenvolvimento final do site. (Demonstração de dois layouts dentro do Dreamweaver e do Fireworks). (Demonstração de ferramentas on-line como o Dafont e o Adobe Kuler) Conhecer alguns dos principais sistemas de CMS (Content Management System) ou sistema de gerenciamento de conteúdo (Wordpress e Joomla!).
  • 7. SLIDE 7 – IMPLEMENTAÇÃO Esta é a etapa em que preparamos o site para a publicação. O uso de técnicas como o SEO (Search Engine Optimization) otimizam o site para que ele apareça nos primeiros resultados de busca do Google. A indicação de tags (palavras-chaves), títulos do site e das páginas, título das imagens, links, destaques em palavras são algumas táticas que empregamos. A escolha do provedor de serviços para hospedagem, a pesquisa e registro do domínio de um site. E por fim a publicação via FTP (File Transfer Protocol) que é uma das formas de transferência dos arquivos para o ambiente web.
  • 8. SLIDE 8 – WEB MARKETING O Web Marketing reúne táticas que promovem os produto e serviços de uma empresa e impulsionam as vendas. Construir a imagem da empresa e do produto através do relacionamento com o cliente é o melhor exemplo de Marketing bem sucedido. As vendas através do e-comerce podem ser alavancadas através do e-mail marketing, anúncios patrocinados como o Google AdWords e AdSense. O e-mail marketing funciona como um panfleto virtual, divulgando os produtos e serviços, enviados para uma lista de e-mail de clientes. O News Letter é um boletim que tem por objetivo informar as novidades da empresa, como ela tem atuado no mercado, a divulgação e participação em eventos, dentre outros. No decorrer do curso vamos aprender como elaborar uma boa campanha e desenvolver layouts para essas aplicações. (Apresentação do Google AdWords e AdSense on-line)
  • 9. SLIDE 9 – DESEMPENHO O pós-publicação é tão importante quanto todo o processo de desenvolvimento do site. Feedback constante com o cliente pode nos apontar os acertos e erros e o nível de satisfação com o serviço prestado. A constante evolução da tecnologia e do mercado demanda a necessidade de constantes atualizações e manutenção do site. É interessante uma atualização anual do site, com novo layout, acompanhando as tendências do mercado e as necessidades do cliente. O desempenho do site também é outro ponto importante. O Google disponibiliza uma ferramenta que permite analisar o trafego e visitas no site, o alcance, o que está sendo compartilhado, e muito mais. Ser presente também nas redes sociais: ter uma página no Facebook ou um perfil no Google+, manter um canal direto de comunicação através do Skype, publicar vídeos no YouTube, divulgar as atividades no Twitter, criam um relacionamento mais próximo com o cliente.
  • 10. SLIDE 10 – BIBLIOGRAFIA Use a Cabeça – Web Design Autor: Ethan Watrall ISBN: 978-85-7608-366-5 Editora Alta Books Use a Cabeça – HTML com CSS e XHTML Autores: Eric Freeman , Elisabeth Freeman ISBN: 978-85-7608-218-7 Editora Alta Books Marketing na Era Digital Autor: Martha Gabriel ISBN:978-85-7522-257-7 Editora Novatec Briefing - Gestão do Projeto de Design Autor: Peter L. Phillips ISBN: 978-85-2120-438-1 Editora Edgard Blucher Bibliografia Complementar AdobeCreative Team AdobeDreamweaver CC Classroom in a Book ISBN-10: 0-321-91941-6 ISBN-13: 978-0-321-91941-0 AdobeFireworks CS6 Classroom in a Book ISBN-10: 0-321-82244-7 ISBN-13: 978-0-321-82244-4 Psicodinâmicadas Cores em Comunicação Autores: Modesto Farina; Clotilde Perez; Dorinho Bastos EditoraEdgard Blucher FacebookMarketing – PDF Engajamentopara transformar fãs em clientes CamilaPorto SEO Na Prática– PDF Natanael Oliveira