Webdesign Fluxo de Desenvolvimento do Webdesign

Tamanho: px

Começar a partir da página:

Download "Webdesign Fluxo de Desenvolvimento do Webdesign"

Eduarda de Sousa da Fonseca
8 Há anos
Visualizações:

1 Webdesign Fluxo de Desenvolvimento do Webdesign

2 Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em:

3 Tópicos da Aula 1. Design 2. Importância do Design 3. Webdesign e Webdesigner 4. Habilidades de um Webdesigner 5. Fluxo de Desenvolvimento Web

4 Introdução Para o usuário médio, a interface gráfica não é somente a parte mais importante do sistema, ela é o próprio sistema, sem a diferenciação clara que os desenvolvedores têm entre front-end e backend. (VEER, VLIET, 2001).

próprio sistema, sem a diferenciação clara que os

5 Introdução DESIGN = PROJETAR. Não significa, apenas, beleza estética, mas beleza estética, funcionalidade, ergonomia, usabilidade...

6 Importância do Design A importância do design esta na criação de produtos que facilitem a vida das pessoas sem esquecer a importância estética, ou seja, criar coisas funcionais e bonitas. Integridade das Informações Entendimento do sistema pelo usuário final Facilitar a interação com o usuário

seja, criar coisas funcionais e bonitas.

7 Importância do Design

8 Webdesign O webdesign é um fragmento do design. Não existe webdesigner. Existe o designer que faz web, e este profissional tem que aprender tudo, tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção, comportamento humano, etc. Senão, ele não consegue fazer web. (Alexandre Wollner).

tipografia, fotografia, semiótica, gestalt, matemática, ótica, percepção,

9 Webdesigner É profissional competente para a elaboração do projeto estético e funcional de um website.

10 Quais as habilidades e conhecimentos que um Webdesigner precisa ter? Senso estético Criatividade Tipografia Cores Fotografia Redação Atenção aos detalhes Pensamento lógico E as tecnologias da web: HTML e CSS WEBDESIGN

11 Fluxo de Desenvolvimento Web

12 Fluxo de Desenvolvimento Web Descobrir Reunião com o Cliente Briefing Análise dos Requisitos

13 Briefing É nada mais que um relatório sobre o produto, serviço,campanha, destacando situação, posicionamento e objetivos. O briefing nos dá uma melhor visão do projeto, com isso é possível criar um orçamento compatível, fazer uma estimativa do tempo de produção e realizar a criação propriamente dita.

O briefing nos dá uma melhor visão do projeto, com isso é possível criar um

14 Briefing Conheça o problema! - Sobre o que é o projeto? - É um site pessoal ou um site de negócios? - Quando você planeja lançá-lo? Prazos! - Quem é o público-alvo? - Que tipo de site será? Um blog? Um Fórum? Um Site institucional? Um Portal? Será Estático ou dinâmico? - Existe conteúdo pronto para o site? - É um redesign de um site já existente? - Você vai querer postar vídeos, áudios, outros conteúdos de mídia? - E a concorrência? - Qual conteúdo será disponibilizado?

Um Site institucional? Um Portal? Será Estático ou dinâmico? - Existe conteúdo pronto para o site?

15 Briefing Exemplo simples: 1. Qual o nome do site? 2. Fale um pouco sobre a sua empresa, idéia e projeto. 3. Quem é seu público principal? 4. Você está imaginando uma certa aparência e sensação para o site? 5. Você tem padrões existentes, como logos e cores, que devem ser incorporados? 6. Quais serão os itens do menu e as seções que deverão compor o layout?

Você está imaginando uma certa aparência e sensação para o site? 5.

16 Requisitos

17 Requisitos Requisitos Funcionais e Requisitos Não Funcionais

18 Exercício Vamos utilizar a nossa realidade? Pegue como exemplo algum estabelecimento que vocês achem que necessitam de um site, pode ser a padaria da esquina, uma empresa de algum parente ou amigo, e responda o modelo de Briefing encontrado em webdesign@thiagomiranda.net [ Lembre-se que esse caso vai nos servir para todo o semestre ]

ser a padaria da esquina, uma empresa de algum parente ou amigo, e responda o modelo de

19 Fluxo de Desenvolvimento Web Planejar Arquitetura da Informação Mapa do site Wireframe

20 Arquitetura da Informação Criada por Saul Wurman em 1976, para organizar a informação, tornando simples o que é complexo. É um passo essencial na criação ou reformulação de uma interface.

21 Arquitetura da Informação Um bom planejamento de todos os fluxos de informação e das funcionalidades de um site tornam o produto final muito mais usável e lucrativo. Cerca de 27% das causas de insucesso das vendas de um website de comércio eletrônico são porque o usuário simplesmente não conseguiu encontrar o item que procurava.

22 Arquitetura da Informação Diálogos simples e naturais; Falar a linguagem do usuário; Minimizar a sobrecarga de memória do usuário (não abusar dos itens de navegação e opções); Consistência(cores, fontes e outros); Feedback(a cada ação uma reação); Saídas claramente marcadas; Atalhos; Boas mensagens de erro; Prevenir erros(o sistema deve ser capaz de recusar erros humano).

23 Princípios da Arquitetura da Informação Sistema de Organização (Organization System) Sistema de Navegação (Navigation System) Sistema de Rotulação (Labeling System) Sistemas de Busca (Search System)

24 Sistema de Organização Sistema de Organização (Organization System) Determina o agrupamento e a categorização do conteúdo.

25 Sistema de Navegação Sistema de Navegação (Navigation System) Determina o agrupamento e a categorização do conteúdo. Navegação contextual Navegação global Navegação local

26 Sistema de Rotulação Sistema de Rotulação (Labeling System) Estabelece as formas de representação, de apresentação da informação, definindo signos para cada elemento informativo.

27 Sistema de Busca Sistemas de Busca (Search System) Determina as perguntas que o usuário pode fazer e o conjunto de respostas que irá obter.

28 Fluxo de Desenvolvimento Web Planejar Arquitetura da Informação Mapa do site Wireframe

29 Mapa do Site Nada mais é do que um lista organizada de todas as páginas, ou as mais importantes, de um site.

30 Mapa do Site Mapa do site é a divisão hierárquica do conteúdo do site. Ferramenta On line:

31 Exercício Utilizando o briefing anterior crie um Mapa do site. Ferramenta On line:

32 Fluxo de Desenvolvimento Web Planejar Arquitetura da Informação Mapa do site Wireframe

33 Wireframe Wireframe é o esqueleto Também define como vai ficar distribuído o conteúdo, e seus recursos de interação com usuário. O wireframe, também pode ser caracterizado como o esboço do website.

34 Wireframe

35 Wireframe Essa etapa é importante porque é a parte primordial do planejamento da navegação e interação com o usuário antes mesmo do layout, o que ajuda a perceber se há algum erro de usabilidade, algum bloco de conteúdo sem o destaque necessário ou mesmo faltando. É um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.

36 Wireframe

37 Wireframe

38 Wireframe

39 Wireframe Baixa fidelidade X Alta fidelidade Vantagens - Rapidez - Custo - Liberdade para o designer - Facilita a refação Desvantagens - Pouca credibilidade (principalmente com clientes) - Maior margem de erros - Difícil de ser testado - Exige mais de programadores e designers - Requer desenvolvimento em conjunto. - Menos intuitivo. Vantagens - Validação consistente e persuasiva com o cliente. - Facilita a compreensão de montagem do layout e da programação dos aplicativos. - Possibilita o teste com usuários antes da definição do layout. Desvantagens - Requer esforço e tempo, o que pode atrasar o processo e aumentar custos

40 Ferramentas para Wireframe iplotz Grátis* e via Web - Mockflow Grátis* e via Web - Cacoo Grátis e via Web - MockingBird Grátis e via Web - Axure Pago e Desktop - Pencil Opensource e Plugin para o Firefox - Fireworks, Word, Power Point, Photoshop, Corel Draw, Papel e Caneta

41 Posicionamento de Elementos Distribua o conteúdo em ordem de importância decrescente, de cima para baixo, da esquerda para direita. Mais importante Menos importante

42 Posicionamento de Elementos

43 Exercício Agora que temos um briefing e um mapa do nosso site, vamos montar nosso Wireframe. Mas antes disso visite sites da mesma atividade escolhida no briefing para servir de inspiração, pense na disposição do conteúdo e objetos. [Pode utilizar a ferramenta que achar mais adequada ]

44 Fluxo de Desenvolvimento Web Criar e Interagir Paleta de Cores Tipografia Design das Páginas Fatiamento do Design

45 Fluxo de Desenvolvimento Web Desenvolver 3 Camadas de Desenvolvimento Apresentação (Layout) Informação (Conteúdo) Lógica (Programação)

46 Fluxo de Desenvolvimento Web Validar e Evoluir Aprovar o que for feito com o cliente Verificar se atende os requisitos Manutenção do desenvolvimento Melhoria continua Cliente na hora de Aprovar o Site

Documentos relacionados

Fluxo de Desenvolvimento do Webdesign

Webdesign Fluxo de Desenvolvimento do Webdesign Apresentação, Fluxo de Desenvolvimento e Arquitetura da Informação Apresentação Thiago Miranda Email: mirandathiago@gmail.com Site: www.thiagomiranda.net