Aula 1 Webdesign

4,488 views
4,353 views

Published on

Published in: Technology, Education
1 Comment
5 Likes
Statistics
Notes
  • Ótima aula, utilizei em meu site http://www.webdesign.emp.br
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,488
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
380
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Aula 1 Webdesign

  1. 1. Treinamento de Webdesign Instrutor: Danilo Rozisca O Organização: i ã Fema-CEPEIN
  2. 2. Sumário - Histórico d internet; da - Arquitetura da Informação; - Briefing; - Wireframes / Documentação; - Na prática – 1ºs passos no Photoshop.
  3. 3. Treinamento de Webdesign - Aula I Histórico da internet: A Internet teve início em 1969 sob o nome de ARPANET (USA). Composta de quatro computadores que tinha como finalidade, demonstrar as potencialidades na construção de redes usando computadores dispersos (espalhados) em uma grande área. A idéia foi boa, e em 1972, 50 universidades e instituições militares já possuíam conexões conexões.
  4. 4. Treinamento de Webdesign - Aula I A Word Wide Web As pessoas costumam falar em Internet e Web será a Web, mesma coisa? Enfim a WEB é a interface gráfica da Internet.
  5. 5. Treinamento de Webdesign - Aula I
  6. 6. Treinamento de Webdesign - Aula I Arquitetura da Informação Criada por Saul Wurman em 1976, para organizar a 1976 informação, tornando simples o que é complexo. É um passo essencial na criação ou reformulação de uma interface.
  7. 7. Treinamento de Webdesign - Aula I A importância da AI 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. procurava NIELSEN NORMAN GROUP (2001)
  8. 8. Treinamento de Webdesign - Aula I Arquiteto da Informação É a pessoa que cria a estrutura ou mapa da informação que permite que outros encontrem suas necessidades de conhecimento. É o profissional emergente do séc. XXI que, em última análise, procura estudar as necessidades humanas e a ciência que envolve a organização da informação.
  9. 9. Treinamento de Webdesign - Aula I Critérios indispensáveis para os projetos na web Heurísticas de Nielsen: • Diálogos simples e naturais; • F l a li g g Falar linguagem d usuário; do ái • 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).
  10. 10. Treinamento de Webdesign - Aula I Princípios da AI para metodologias de projeto de arquitetura de informação de websites: • Sistema de Organização (Organization System) • Sistema de Navegação (Navigation System) • Sistema de Rotulação (Labeling System) • Sistemas de Busca (Search System)
  11. 11. Treinamento de Webdesign - Aula I Sistema d Organização (Organization System) de – Determina o agrupamento e a categorização do conteúdo i f t úd informacional. i l
  12. 12. Treinamento de Webdesign - Aula I
  13. 13. Treinamento de Webdesign - Aula I Sistema de N Si t d Navegação (N i ti System) ã (Navigation S t ) – Especifica as maneiras de navegar, de se mover pelo espaço informacional e hipertextual hipertextual. Navegação por R N g ã Rosenfeld e Morville f ld M ill – Navegação global – Navegação local – Navegação contextual
  14. 14. Treinamento de Webdesign - Aula I Sistema d Rotulação (Labeling System) de l i Estabelece as formas de representação, de apresentação d i f t ã da informação, d fi i d signos para ã definindo i cada elemento informativo.
  15. 15. Treinamento de Webdesign - Aula I Sistemas de Busca (Search System) – Determina as perguntas que o usuário pode fazer e o conjunto de respostas que irá obter.
  16. 16. Os componentes fundamentais da Arquitetura de Informação
  17. 17. Treinamento de Webdesign - Aula I 5 fases para o desenvolvimento: ROSENFELD e MORVILLE (2002) Pesquisa: fase em que são pesquisadas e analisadas as informações sobre os usuários, suas necessidades e o seu ambiente visando definir o escopo e os requisitos do projeto; Estratégia: fase eminentemente criativa, na qual se concebe a visão macro da solução; Design: fase em que a visão macro da solução é detalhada em documentos e diagramas que explicam como construir o website; Implementação: fase em que o website é construído conforme especificado; Administração: fase na qual o resultado do projeto é avaliado em f Ad i i t ã f l lt d d j t li d função d ã dos seus objetivos iniciais para se registrar os acertos e erros.
  18. 18. Treinamento de Webdesign - Aula I BRIEFING (Entrevista, Público Alvo, C l úbl l Cultura) É nada mais que u relatório sob e o p oduto, se v ço, ada a s um elató o sobre 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 compatível estimativa do tempo de produção e realizar a criação p p propriamente dita.
  19. 19. Treinamento de Webdesign - Aula I Exemplo simples: E l i l 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. 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? i d ? 6. Quais serão os itens do menu e as seções que deverão compor o layout?
  20. 20. Treinamento de Webdesign - Aula I Wireframes / Documentação. Wi f D t ã O arquiteto de informação produz uma série de documentos específicos que comunicam a solução de interface para o cliente e para a equipe de produção: • Mapa do site; • Fluxogramas de navegação; • Wireframes. Wireframes
  21. 21. Treinamento de Webdesign - Aula I Mapa do site - divisão hierárquica do conteúdo do site site. Mapa do site da Universidade Federal do Ceará
  22. 22. Treinamento de Webdesign - Aula I Fluxogramas d navegação (bl Fl de ã (blueprint) - d fi i õ d principais i ) definições dos i i i fluxos de informação do site.
  23. 23. Treinamento de Webdesign - Aula I Wireframe O wireframe normalmente é entregue ao cliente para aprovação antes de ficar pronto o design gráfico. Wireframe não é pra ser bonito, é pra ser entendido. Sua função é apresentar os elementos que vão compor a página. p g
  24. 24. Treinamento de Webdesign - Aula I O objetivo do uso de wireframes é conseguir discutir e planejar a arquitetura de informação com o cliente sem que ele sofra influências visuais. i i
  25. 25. Treinamento de Webdesign - Aula I Outro exemplo d wireframe e d resultado fi l O l de i f do l d final.
  26. 26. Treinamento de Webdesign - Aula I ELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADOR Marca da empresa Canto superior Nielsen, Adksson e Bernard Busca Parte superior Nielsen, Adksson e Bernard Parte superior com Navegação global Nielsen, Nielsen Adksson e Krug links na horizontal Navegação local Coluna da esquerda Nielsen, Adksson e Bernard Parte superior, abaixo da Adksson, Lida e Chaparro e Breadcrumbs marca da empresa Krug Conteúdo global e contextual Área central Bernard Navegação de rodapé Parte inferior Nielsen, Krug, Nielsen Krug Lynch e Horton MEMÓRIA (2005)
  27. 27. Treinamento de Webdesign - Aula I Marca buscar Navegação global Breadcrumbs Navegação local Conteúdo global Conteúdo e contextual relacionado Navegação rodapé d é MEMÓRIA (2005)
  28. 28. Treinamento de Webdesign - Aula I Na Prática 1ºs 1º passos no Ph t h Photoshop
  29. 29. Treinamento de Webdesign - Aula I Muito Obrigado Fim
  30. 30. Treinamento de Webdesign - Aula I Referências: DAMASCENO, ANIELLE Webdesign: Teoria e Prática; Visual Books; Florianópolis; 2003. MEMÓRIA, FELIPE Design para Internet: projetando a experiência perfeita; Rio de Janeiro; Elsevier; 2005. MORROGH, EARL Information Architecture: An Emerging 21st Century Profession; New Jersey; Prentice Hall; 2003. PEON ESPANTOSO, JOSE JUAN ESPANTOSO O arquiteto da informação e o bibliotecário do futuro; Revista de Biblioteconomia de Brasília, v.23/24, n.2, p.135-146; 1999/2000. RADFAHRER, LULI Design/Web/Design:2; 2ª Edição; 2000; Formato: PDF; Disponibilizado no endereço: http://www.luli.com.br/dwd2. ROSENFELD, L. ; MO V OS N , . MORVILLE, P , Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.
  31. 31. Treinamento de Webdesign - Aula I Referências (Sit ): Sites CAVICHIOLI ODAIR JR http://cavichioli.blogspot.com/ Acessado: 26/05/2008 Slide - Design de Interface; - Tipografia; - Teoria das Cores; - Diagramação de Sites. MUNIZ, MUNIZ RODRIGO http://rodrigomuniz.com/blog/moda-no-design-para-a-web/ Acessado: 23/06/2008 - Influência da Apple. WIKEPÉDIA http://www.wikepedia.org Acessado: 27/05/2008 - Webdesign. DIGITAL PAPER http://digitalpaperweb.com.br/ezine/tipografia/o que e tipografia http://digitalpaperweb.com.br/ezine/tipografia/o-que-e-tipografia Acessado: 01/06/2008 - Tipografia. PINCELADAS DA WEB http://www.pinceladasdaweb.com.br/blog/category/web-20/ Acessado: 26/06/2008 A d - Web 2.0

×