Web Standards PROJETO WEB Ferramentas para Web Design Prof. Ricardo Ferramentas para Web Design 1
Briefing Planejamento Criação Desenvolvimento Homologação Produção Divulgação Métricas Manutenção Ferramentas para Web Design 2
BRIEFING O briefing é um conjunto de informações passadas em uma reunião para o desenvolvimento de um projeto. O briefing deve criar 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. Ferramentas para Web Design 3
PLANEJAMENTO Métricas atuais e concorrentes Benchmark e Teste de Usabilidade Ferramentas para Web Design 4
Benchmarking é a busca das melhores práticas na indústria que conduzem ao desempenho superior. É visto como um processo positivo e pró-ativo por meio do qual uma empresa examina como outra realiza uma função específica a fim de melhorar como realizar a mesma ou uma função semelhante. O processo de comparação do desempenho entre dois ou mais sistemas é chamado de benchmarking e as cargas usadas são chamadas de benchmark. Ferramentas para Web Design 5
Benchmarking Ferramentas para Web Design 6
PLANEJAMENTO UM PROFISSIONAL QUE PRECISA ESTAR ANTENADO Ferramentas para Web Design 7
Ferramentas para Web Design 8
BRANDCHANNEL Ferramentas para Web Design 9
BRANDCHANNEL (brandchannel.com) é um site sobre marcas, lançado em 2001, com objetivo de fornecer um perspectiva global da popularidade das maiores marcas. O Web site é produzido pela agência Interbrand. Ferramentas para Web Design 10
BRANDCHANNEL Ferramentas para Web Design 11
BRANDCHANNEL Ferramentas para Web Design 12
Ferramentas para Web Design 13
PLANEJAMENTO Métricas atuais e concorrentes Benchmark e Teste de Usabilidade Análise e definições de melhores práticas Definição de requisitos Elaboração de Wireframe Ferramentas para Web Design 14
Um wireframe de site web é um guia visual básico usado em design de interface para sugerir a estrutura de um site e relacionamentos entre suas páginas. (ou também "wire frame web", "wireframe web", "web wireframing") Ferramentas para Web Design 15
Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido. Ferramentas para Web Design 16
- O objetivo do wireframe é ajudar o desenvolvedor de sistemas a entender o que o cliente está querendo, mostrando os requisitos funcionais de um sistema. - Este desenho deve retratar toda a arquitetura de informação do sistema desejada pelo cliente e a usabilidade do sistema. Deve ser muito simples e resumido, informando ao desenvolvedor apenas o que for estritamente necessário. Ferramentas para Web Design 17
Ferramentas para Web Design 18
Ferramentas para Web Design 19
Ferramentas para Web Design 20
Ferramentas para Web Design 21
CRIAÇÃO Processo criativo / Brainstorm Layouts das páginas Storyboard para animações Aprovação do Cliente Ferramentas para Web Design 22
CRIAÇÃO Processo criativo / Brainstorm Leitura dos requisitos do projeto Estudo do Wireframe Estudo do Briefing Busca de referências Ferramentas para Web Design 23
O brainstorming (literalmente: "tempestade cerebral" em inglês) ou tempestade de ideias, mais que uma técnica de dinâmica de grupo, é uma atividade desenvolvida para explorar a potencialidade criativa de um indivíduo ou de um grupo, colocando-a a serviço de objetivos pré-determinados. Ferramentas para Web Design 24
Ferramentas para Web Design 25
Ferramentas para Web Design 26
Ferramentas para Web Design 27
Ferramentas para Web Design 28
Ferramentas para Web Design 29
Ferramentas para Web Design 30
DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 31
DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 32
Ferramentas para Web Design 33
DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 34
Ferramentas para Web Design 35
Ferramentas para Web Design 36
DESENVOLVIMENTO Especificação de Interface Web Standards (os padrões web) SEO (Search Engine Optimization) Programação e Banco de dados Ferramentas para Web Design 37
HOMOLOGAÇÃO Colocar site em ambiente de testes Bateria de testes Quality Center Solucionando os bugs Aprovação do cliente Ferramentas para Web Design 38
HOMOLOGAÇÃO Ferramentas para Web Design 39
PRODUÇÃO Publicar arquivos nos servidores da internet Homologação Aprovação do cliente Ferramentas para Web Design 40
Ferramentas para Web Design 41