SlideShare uma empresa Scribd logo
1 de 32
Baixar para ler offline
Treinamento de Webdesign


Instrutor: Danilo Rozisca    O
                             Organização:
                                  i   ã
                             Fema-CEPEIN
Sumário

-   Histórico d internet;
              da
-   Arquitetura da Informação;
-   Briefing;
-   Wireframes / Documentação;
-   Na prática – 1ºs passos no Photoshop.
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.
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.
Treinamento de Webdesign - Aula I
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.
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)
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.
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).
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)
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
Treinamento de Webdesign - Aula I
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
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.
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.
Os componentes fundamentais da Arquitetura
             de Informação
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.
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.
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?
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
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á
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.
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
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
Treinamento de Webdesign - Aula I

Outro exemplo d wireframe e d resultado fi l
O          l de i f         do    l d final.
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)
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)
Treinamento de Webdesign - Aula I




           Na Prática

    1ºs
    1º passos no Ph t h
                 Photoshop
Treinamento de Webdesign - Aula I




      Muito Obrigado


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

Mais conteúdo relacionado

Mais procurados

Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web designCarla Suelen
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Felipe Fernandes
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframesaiadufmg
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas webarturramisio
 
LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWDCURSOS
 
Unb 2012.1 - dweb - 02 - por onde começar
Unb   2012.1 - dweb - 02 - por onde começarUnb   2012.1 - dweb - 02 - por onde começar
Unb 2012.1 - dweb - 02 - por onde começarClaudenio Alberto
 
Unb 2012.1 - dweb - 05 - css3 - fundamentos
Unb   2012.1 - dweb - 05 - css3 - fundamentosUnb   2012.1 - dweb - 05 - css3 - fundamentos
Unb 2012.1 - dweb - 05 - css3 - fundamentosClaudenio Alberto
 
Aula01 - introdução
Aula01 - introduçãoAula01 - introdução
Aula01 - introduçãoRicardo neves
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_bmaurohs
 
Unb 2012.1 - dweb - e - css-pensando dentro da caixa
Unb   2012.1 - dweb - e - css-pensando dentro da caixaUnb   2012.1 - dweb - e - css-pensando dentro da caixa
Unb 2012.1 - dweb - e - css-pensando dentro da caixaClaudenio Alberto
 

Mais procurados (20)

Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
Arquitetura da Informação - Wireframes
Arquitetura da Informação - WireframesArquitetura da Informação - Wireframes
Arquitetura da Informação - Wireframes
 
Construcao de Sites
Construcao de SitesConstrucao de Sites
Construcao de Sites
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Projeto de WEB Site
Projeto de WEB SiteProjeto de WEB Site
Projeto de WEB Site
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
 
LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01LWD Cursos - Aula de Web Design 01
LWD Cursos - Aula de Web Design 01
 
Unb 2012.1 - dweb - 02 - por onde começar
Unb   2012.1 - dweb - 02 - por onde começarUnb   2012.1 - dweb - 02 - por onde começar
Unb 2012.1 - dweb - 02 - por onde começar
 
Design responsivo
Design responsivo Design responsivo
Design responsivo
 
Unb 2012.1 - dweb - 05 - css3 - fundamentos
Unb   2012.1 - dweb - 05 - css3 - fundamentosUnb   2012.1 - dweb - 05 - css3 - fundamentos
Unb 2012.1 - dweb - 05 - css3 - fundamentos
 
Construcao de interfaces web
Construcao de interfaces webConstrucao de interfaces web
Construcao de interfaces web
 
Aula01 - introdução
Aula01 - introduçãoAula01 - introdução
Aula01 - introdução
 
Planeamento website
Planeamento websitePlaneamento website
Planeamento website
 
Dream 02
Dream 02Dream 02
Dream 02
 
Wireframe workshop externo_001_b
Wireframe workshop externo_001_bWireframe workshop externo_001_b
Wireframe workshop externo_001_b
 
Dream 02
Dream 02Dream 02
Dream 02
 
Unb 2012.1 - dweb - e - css-pensando dentro da caixa
Unb   2012.1 - dweb - e - css-pensando dentro da caixaUnb   2012.1 - dweb - e - css-pensando dentro da caixa
Unb 2012.1 - dweb - e - css-pensando dentro da caixa
 
Apres. Pacto Portfólio
Apres. Pacto  PortfólioApres. Pacto  Portfólio
Apres. Pacto Portfólio
 
Apres. Pacto Portfólio
Apres. Pacto  PortfólioApres. Pacto  Portfólio
Apres. Pacto Portfólio
 

Destaque

Arquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframeArquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframeKarla Cruz
 
Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001ewerton333
 
So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011Anderson Favaro
 
So2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quartaSo2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quartaAnderson Favaro
 
SO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas OperacionaisSO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas OperacionaisEduardo Nicola F. Zagari
 
Sistema computacional 3
Sistema computacional 3Sistema computacional 3
Sistema computacional 3marleneca97
 
Introducao aos Sistemas Operacionais
Introducao aos Sistemas OperacionaisIntroducao aos Sistemas Operacionais
Introducao aos Sistemas OperacionaisRicardo de Moraes
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-endAnderson Luís Furlan
 
Sistemas operacionais introdução
Sistemas operacionais introduçãoSistemas operacionais introdução
Sistemas operacionais introduçãoCarlos Melo
 
Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00Anderson Favaro
 
Introducao a Sistemas Operacionais
Introducao a Sistemas OperacionaisIntroducao a Sistemas Operacionais
Introducao a Sistemas OperacionaisIsaac Vieira
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Aula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicosAula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicosVitor Hugo Melo Araújo
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leisFelipe Fernandes
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltFelipe Fernandes
 
Informática para Internet - Informática Aplicada - Aula 07
Informática para Internet - Informática Aplicada - Aula 07Informática para Internet - Informática Aplicada - Aula 07
Informática para Internet - Informática Aplicada - Aula 07Anderson Andrade
 
Sistemas Operacionais - 05 - Sistemas Operacionais Microsoft
Sistemas Operacionais - 05 - Sistemas Operacionais MicrosoftSistemas Operacionais - 05 - Sistemas Operacionais Microsoft
Sistemas Operacionais - 05 - Sistemas Operacionais MicrosoftMauro Duarte
 

Destaque (20)

Arquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframeArquitetura de Informação sem wireframe
Arquitetura de Informação sem wireframe
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001
 
Sistema computacional (arquitecturas y memorias)
Sistema computacional (arquitecturas y memorias)Sistema computacional (arquitecturas y memorias)
Sistema computacional (arquitecturas y memorias)
 
So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011
 
So2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quartaSo2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quarta
 
SO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas OperacionaisSO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas Operacionais
 
Sistema computacional 3
Sistema computacional 3Sistema computacional 3
Sistema computacional 3
 
Introducao aos Sistemas Operacionais
Introducao aos Sistemas OperacionaisIntroducao aos Sistemas Operacionais
Introducao aos Sistemas Operacionais
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-end
 
Sistemas operacionais introdução
Sistemas operacionais introduçãoSistemas operacionais introdução
Sistemas operacionais introdução
 
Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00
 
Introducao a Sistemas Operacionais
Introducao a Sistemas OperacionaisIntroducao a Sistemas Operacionais
Introducao a Sistemas Operacionais
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Aula 4 - HTML
Aula 4 - HTMLAula 4 - HTML
Aula 4 - HTML
 
Aula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicosAula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicos
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Web Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à GestaltWeb Design > Princípios do Design e intro à Gestalt
Web Design > Princípios do Design e intro à Gestalt
 
Informática para Internet - Informática Aplicada - Aula 07
Informática para Internet - Informática Aplicada - Aula 07Informática para Internet - Informática Aplicada - Aula 07
Informática para Internet - Informática Aplicada - Aula 07
 
Sistemas Operacionais - 05 - Sistemas Operacionais Microsoft
Sistemas Operacionais - 05 - Sistemas Operacionais MicrosoftSistemas Operacionais - 05 - Sistemas Operacionais Microsoft
Sistemas Operacionais - 05 - Sistemas Operacionais Microsoft
 

Semelhante a Aula 1 Webdesign

Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para webPedro de Siqueira
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca PereiraDanilo Rosisca Pereira
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignDanilo Rosisca Pereira
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visualAdriano Borges
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para webMarcos Nori
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhanyKaren Costa
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingPonto Final Design
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularRicardo Pereira Rodrigues
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenáriosposgraduacaorj
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...Rio Info
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoRodrigo Correia
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaRicardo Pereira Rodrigues
 
Apresentacao Konfide2007
Apresentacao Konfide2007Apresentacao Konfide2007
Apresentacao Konfide2007Marcio Okabe
 
Keynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOKeynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOAna Brambilla
 

Semelhante a Aula 1 Webdesign (20)

Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visual
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhany
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Conteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft MarketingConteúdo - Web Design Aplicado ao Soft Marketing
Conteúdo - Web Design Aplicado ao Soft Marketing
 
Apresentaçao Aula 2
Apresentaçao Aula 2Apresentaçao Aula 2
Apresentaçao Aula 2
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
 
Arquitetura da Informacao e Webdesign
Arquitetura da Informacao e WebdesignArquitetura da Informacao e Webdesign
Arquitetura da Informacao e Webdesign
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e PesquisaLaboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
Laboratório Web 2013-2014 - Etapas na Produção: Análise e Pesquisa
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
 
Apresentacao Konfide2007
Apresentacao Konfide2007Apresentacao Konfide2007
Apresentacao Konfide2007
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
Keynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãOKeynote Arquitetura InformaçãO
Keynote Arquitetura InformaçãO
 

Aula 1 Webdesign

  • 1. Treinamento de Webdesign Instrutor: Danilo Rozisca O Organização: i ã Fema-CEPEIN
  • 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. 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. 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.
  • 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. 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. 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. 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. 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. 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
  • 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. 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. 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. Os componentes fundamentais da Arquitetura de Informação
  • 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. 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. 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. 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. 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. 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. 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. 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.
  • 26. Treinamento de Webdesign - Aula I Outro exemplo d wireframe e d resultado fi l O l de i f do l d final.
  • 27. 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)
  • 28. 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)
  • 29. Treinamento de Webdesign - Aula I Na Prática 1ºs 1º passos no Ph t h Photoshop
  • 30. Treinamento de Webdesign - Aula I Muito Obrigado Fim
  • 31. 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.
  • 32. 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