Producao para web

Produção para! web 22/03/2011!

Alex Sanches - @alexsanches ! Formado em Design Gráﬁco. Pós-‐graduando em Marketing Digital. Tem experiência de 4 anos na criação e desenvolvimento de websites e identidade visual. Há 2 anos trabalhando com estratégias de comunicação digital se empenha na construção de sites otimizados para mecanismos de busca (SEO) e na usabilidade do design aplicado a identidade visual. Gerente de Projetos na SmartIS Agência Digital onde trabalha na execução do Planejamento Estratégico Digital do cliente, na gestão de tarefas e atividades da equipe e no controle de qualidade de cada projeto.

Processo de ! Produção!

Processo de produção! •  Brieﬁng; •  Pesquisa; •  Escopo; •  Sitemap; •  Wireframe; •  Criação do layout; •  Desenvolvimento; •  Métricas.

Processo de produção! Brieﬁng Colher o máximo de informações do cliente a respeito da marca, da estratégia, da iden9dade visual, do obje9vo do projeto. Pesquisa Procurar concorrentes ou sites de referência para servir de inspiração e desenvolver algo que concorra ou que seja cria9vo o suﬁciente para ter destaque.

Processo de produção! Escopo De acordo com o obje9vo, escolher as ferramentas, as tecnologias, a metodologia, os recursos que serão u9lizados. Sitemap Deﬁnir a estruturação do site. Como ele será apresentado ao visitante pensando em usabilidade e navegabilidade.

Processo de produção! Wireframe Esboço do projeto. Fase 1 do layout e Arquitetura de Informação. É desenhado em papel, as páginas do site e disposição dos elementos visuais. Criação do Layout Criação do layout ﬁnal, com detalhes, seguindo todas as etapas anteriores. Cria-‐se uma imagem está9ca do site (.JPG).

Processo de produção! Desenvolvimento Recorte do layout de maneira estratégica e programação (HTML, CSS) obedecendo a melhor estrutura esqueleto do site considerando resolução de tela, SEO, versão do navegador, 9po de navegador. Métricas Pós lançamento. medir os KPIs (Indicadores chave de performance) deﬁnidos na estratégia de marke9ng digital para entender o comportamento do usuário, a quan9dade de visualizações, origem de tráfego.

Ferramentas!

Ferramentas! •  Wordpress; •  Adobe Photoshop; •  Adobe Dreamweaver; •  Adobe Flash; •  Adobe Fireworks; •  HTML 5; •  FBML.

Ferramentas! Wordpress!

Ferramentas! Wordpress! O wordpress é um CMS (Plataforma de gerenciamento de conteúdo). É open source (código aberto) e freqüentemente recebe atualizações. As vantagens de se trabalhar com wordpress é a vasta opção de customização e desenvolvimento de qualquer 9po de website. Ele possui códigos próprios chamados de "codex" que permitem a criação de um sistema que suporte o formato de um blog, formato de site, e-‐commerce, compra cole9va, vídeos, galerias etc. Justamente por ser open source, apresenta mais de 10.000 plugins que adicionam funcionalidade a qualquer projeto.

Ferramentas! Wordpress!

Ferramentas! Photoshop!

Ferramentas! Photoshop! Photoshop é o sobware de tratamento de imagens líder do mercado. Ele é u9lizado para edições e produção de imagens para web e impressão. Atualmente está em sua versão 12 ou CS5 (Crea9ve Suite 5).

Ferramentas! Photoshop!

Ferramentas! Dreamweaver!

Ferramentas! Dreamweaver! Dreamweaver é um sobware WYSIWYG. Acrônimo da expressão em inglês "What You See Is What You Get". Utilizado por programadores e web designers para desenvolver códigos e estruturas. Permite a visualização instantânea do resultado do código. Utilizado para criação de páginas de site, newsletters, e-‐mail marketings, sistemas.

Ferramentas! Dreamweaver!

Ferramentas!Flash e HTML 5!

Ferramentas!Flash e HTML 5! Aplica9vo para animação voltado para a web. Ul9mamente há a polêmica no mundo digital a respeito da morte do Flash pelo HTML 5. Após a criação do iPhone e a não reprodução de aplica9vos Flash no disposi9vo o desenvolvimento da linguagem HTML 5 se intensiﬁcou mesmo antes de passar pela deﬁnição de padrões da W3C (World Wide Web Consor9um). Utilizados para criar sites animados, banners animados, aplicativos de interação.

Ferramentas! Fireworks!

Ferramentas! Fireworks! Aplica9vo da Adobe voltado para edição de imagens para a web. Com um nível de compactação alto e facilidade para corte de imagens, é uma solução ágil u9lizada pelas agências digitais.

Ferramentas! FBML!

Ferramentas! FBML! Linguagem de programação do Facebook (Facebook Markup Language). Permite a criação de páginas personalizadas com u9lização de recursos do Facebook como cur9r, recomendar.

Ferramentas! FBML!

O Dia a dia em uma agência depende:!

O Dia a Dia depende:! •  Das a9vidades alocadas; •  Do atraso nas a9vidades; •  Do índice de retrabalho; •  Da performance da equipe; •  Da boa vontade do cliente. Naturalmente, a maioria das coisas é para ontem.!

Como um cliente funciona…!

Criado por Majhew Inman

DÚVIDAS?!

Obrigado!! alex.sanches@smartis.com.br smartis.com.br @alexsanches

Producao para web

by Alex Sanches on Mar 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 34

Statistics

Producao para web — Presentation Transcript

http://www.novasmidiasdigitais.com.br	33
http://webcache.googleusercontent.com	1