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
Apresentação Nome O que você espera da matéria? Qual sua experiência com Webdesign? Quais suas dificuldades com a matéria até aqui? Qual a sua expectativa em relação ao curso?
Proposta de trabalho Enfoque teórico e prático com uso de muitos exercícios, realizados em sala e em casa para fixação Aprendizado visando a aplicação prática do conhecimento Avaliação Serial e diária
Cronograma da II Unidade 13 e 14/09 Arquitetura de Informação e Projeto de WebSites 20 e 21/09 Técnicas do Design 27 e 28/09 - Revisão de HTML - Tags Básicas 04 e 05/10 - Html - Tags Avançadas 11/10 - Formulário em HTML Noturno 18/10 Avaliação Teórica Noturno 19/10 Formulário em HTML - Manhã 26/10 Avaliação Teórica - Manhã
Avaliação Avaliação Serial (Diária) Atividades Práticas- Valor: 3 pontos Avaliação Teórica: 4 Pontos Trabalho Prático: 3 pontos Deverá ser entregue no dia 25/10 e 26/10.
Avaliação Atividades Práticas diárias: 03 Pontos WEBDESIGN A atividade prática a ser desenvolvida abordando os temas já trabalhados. Devem ser enviadas por email para: webdesign@thiagomiranda.net O assunto do email deve ser [ Atividade 01 ] Seu nome Os arquivos deverão ser enviados compactados no formato zip com o nome do arquivo sendo o seu nome. Tentar fazer a atividade conta muito, mesmo q não esteja funcionando, envie o arquivo e tente explicar o erro no corpo do email. Cópias não serão aceitas.
Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net
Objetivos Revisar os conteúdos da I unidade Diagnosticar dúvidas a respeito do conteúdo Praticar mais um pouco o conteúdo já trabalhado
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
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).
Introdução DESIGN = PROJETAR. Não significa, apenas, beleza estética, mas beleza estética, funcionalidade, ergonomia, usabilidade...
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
Importância do Design
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).
Webdesigner É profissional competente para a elaboração do projeto estético e funcional de um website.
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
Fluxo de Desenvolvimento Web
Fluxo de Desenvolvimento Web Descobrir Reunião com o Cliente Briefing Análise dos Requisitos
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.
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?
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?
Requisitos
Requisitos Requisitos Funcionais e Requisitos Não Funcionais
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 www.thiagomiranda.net [ Lembre-se que esse caso vai nos servir para todo o semestre ]
Fluxo de Desenvolvimento Web Planejar Arquitetura da Informação Mapa do site Wireframe
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.
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.
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).
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)
Sistema de Organização Sistema de Organização (Organization System) Determina o agrupamento e a categorização do conteúdo.
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
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.
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.
Fluxo de Desenvolvimento Web Planejar Arquitetura da Informação Mapa do site Wireframe
Mapa do Site Nada mais é do que um lista organizada de todas as páginas, ou as mais importantes, de um site.
Mapa do Site Mapa do site é a divisão hierárquica do conteúdo do site. Ferramenta On line: http://www.writemaps.com/
Exercício Utilizando o briefing anterior crie um Mapa do site. Ferramenta On line: http://www.writemaps.com/
Fluxo de Desenvolvimento Web Planejar Arquitetura da Informação Mapa do site Wireframe
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.
Wireframe
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.
Ferramentas para Wireframe iplotz Grátis* e via Web - http://iplotz.com/ Mockflow Grátis* e via Web - http://www.mockflow.com/ Cacoo Grátis e via Web - https://cacoo.com MockingBird Grátis e via Web - https://gomockingbird.com/ Axure Pago e Desktop - http://www.axure.com Pencil Opensource e Plugin para o Firefox - http://pencil.evolus.vn/en-us/home.aspx Fireworks, Word, Power Point, Photoshop, Corel Draw, Papel e Caneta
Posicionamento de Elementos
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 ]
Fluxo de Desenvolvimento Web Criar e Interagir Paleta de Cores Tipografia Design das Páginas Fatiamento do Design
Fluxo de Desenvolvimento Web Desenvolver 3 Camadas de Desenvolvimento Apresentação (Layout) Informação (Conteúdo) Lógica (Programação)
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