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 Adobe Creative Team Adobe Dreamweaver CC Classroom in a Book ISBN-10: 0-321-91941-6 ISBN-13: 978-0-321-91941-0 Adobe Fireworks CS6 Classroom in a Book ISBN-10: 0-321-82244-7 ISBN-13: 978-0-321-82244-4 Psicodinâmica das Cores em Comunicação Autores: Modesto Farina; Clotilde Perez; Dorinho Bastos Editora Edgard Blucher Facebook Marketing – PDF Engajamento para transformar fãs em clientes Camila Porto SEO Na Prática– PDF Natanael Oliveira