Web Standards PROJETO WEB

(1)

Web Standards

PROJETO WEB

Ferramentas para Web Design

(2)

• Briefing

• Planejamento

• Criação

• Desenvolvimento

• Homologação

• Divulgação

• Métricas

• Manutenção

(3)

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

(4)

• Métricas atuais e concorrentes

• Benchmark e Teste de Usabilidade

(5)

• 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

(6)

(7)

UM PROFISSIONAL QUE PRECISA ESTAR “ANTENADO”

(8)

(9)

(10)

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.

(11)

(12)

(13)

(14)

• 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

(15)

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.

(16)

Um wireframe web é uma ilustração

semelhante do layout de elementos

fundamentais na interface.

Normalmente, wireframes são

concluídos antes que qualquer

(17)

- 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.

(18)

(19)

(20)

(21)

(22)

• Processo criativo / Brainstorm

• Layouts das páginas

• Storyboard para animações

• Aprovação do Cliente

(23)

Processo criativo / Brainstorm

Leitura dos requisitos do projeto

Estudo do Wireframe

Estudo do Briefing

Busca de referências

(24)

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.

(25)

(26)

(27)

(28)

(29)

(30)

(31)

• Especificação de Interface

• Web Standards (os padrões web)

• SEO

(Search Engine Optimization)

• Programação e Banco de dados

(32)

• Especificação de Interface

• Web Standards (os padrões web)

• SEO

(Search Engine Optimization)

• Programação e Banco de dados

(33)

(34)

• Especificação de Interface

• Web Standards (os padrões web)

• SEO

(Search Engine Optimization)

• Programação e Banco de dados

(35)

(36)

(37)

• Especificação de Interface

• Web Standards (os padrões web)

• SEO

(Search Engine Optimization)

• Programação e Banco de dados

(38)

• Colocar site em ambiente de testes

• Bateria de testes

• Quality Center

• Solucionando os bugs

• Aprovação do cliente

HOMOLOGAÇÃO

(39)

(40)

• Publicar arquivos nos servidores da

internet

• Homologação

• Aprovação do cliente

(41)