Conteúdo da aula introdutória da disciplina de Web Design.

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