SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
NA QUEBRADA DA WEB
                                              CAROÉ




Qual o papel do designer na web? O que antes era difícil dizer - ou pior, era resumido
a “fazer layout” - hoje já tem aspectos bastante concretos: Estudo de navegação,
usabilidade, arquitetura da informação, adaptação estética...

Por que a evolução? Simplesmente houve tempo para a estabilidade? Ou os conceitos
de Web 2.0 e Novos Conteúdos tem alguma coisa a ver com isso?


                                                     Como quebrar paradigmas?
O QUE É A WEB 2.0
               NA REAL, ISSO EXISTE MESMO?




Web 2.0 é um termo cunhado pela primeira vez em 2004 para designar uma segunda
geração de comunidades e serviços pela internet. A “Web como plataforma” envolve
wikis, aplicações colaborativas, redes sociais e Tecnologia da Informação.

Embora o termo tenha uma conotação de uma nova versão para a Web, ele não
se refere à atualização nas suas especificações técnicas, mas a uma mudança na
forma como ela é encarada por usuários e desenvolvedores, ou seja, o ambiente de
interação que hoje engloba inúmeras linguagens e motivações.

É uma atualização conceitual, mais do que tecnológica.
                  Adaptado da Wikipédia - Um dos maiores exemplos de web 2.0
O QUE É A WEB 2.0
                         EXEMPLOS




BLOGS
WIKIS
FÓRUMS
FOTOLOGS
ORKUT
TWITTER
FACEBOOK
LINKEDIN
DESIGNUP
NING
THE CRIMS

              A origem dos serviços 2.0 é difícil de determinar, mas...
O QUE É A WEB 2.0
          GENEALOGIA




         ...dá pra se ter uma ideia olhando pros seus avós.
NOVAS TENDÊNCIAS E CONCEITOS
                 COMO O DESIGN SE ADAPTOU À WEB 2.0?




 As informações são mórficas, e o usuário tem influência no que acessa;
 Isso exige interatividade, possibilitada pela infame Programação.

 Por ser interativo, o conteúdo pode ser melhor explorado;
 Ao mesmo tempo, exige uma maior dedicação na apresentação.

 A participação do usuário é fundamental para gerar mais conteúdo;
 Um exemplo disso são os comentários em um blog, ou replies no twitter.
                    Seu comentário no blog hoje pode gerar o post de amanhã...
NOVAS TENDÊNCIAS E CONCEITOS
        COMO O DESIGN SE ADAPTOU À WEB 2.0?




                           ...ou mesmo aprimorar o post de hoje.
NOVAS RESPONSABILIDADES
                    COM GRANDES PODERES...




BRIEFING CONCISO;
PROTOTIPAçãO;
ARqUITETURA DA INFORMAçãO;
ACESSIBILIDADE;
USABILIDADE;
             Achou que era só empurrar pro cliente um blog no wordpress?
NOVA RESPONSABILIDADE: USABILIDADE
                        FALA SÉRIO: TU INVENTOU ESSA PALAVRA, NÉ?




   Usabilidade é o termo relativo ao estudo e aplicação de conceitos de interação
   homem-máquina, bem como da ergonomia visual e da apresentação de dados.
   Normalmente se refere ao trabalho exercido para aprimorar a utilização de quais-
   quer interfaces digitais. Utilizada originalmente para interfaces de softwares, hoje a
   Usabilidade se refere quase que inteiramente ao posicionamento da informação em
   websites.

   Faz parte de suas atribuições o projeto do fluxo que o usuário irá seguir, a publicação
   dos dados, a definição de um padrão ergonômico, entre outros.
                                                       É bom navegar num site usável.
NOVA RESPONSABILIDADE: USABILIDADE
                        QUAL A IMPORTÂNCIA E COMO ESTUDA-LA?



   NÃOMEFAÇAPENSAR!                Título do Livro de STEvEN KRUG sobre Usabilidade

   O usuário não pode perder tempo visitando seu site, a não ser que ele queira. Ele
   deve ter opções (caso seja seu objetivo que ele passe vários minutos visitando), mas
   deve acima de tudo poder encontrar os dados na hora que quiser.

   FERRAMENTA DE BUSCA
   LISTA OBjETIvA
   MAPA DO SITE
   TíTULOS ADEqUADOS
   E não é difícil projetar um site usável. Além de levar em considerações os dados acima,
   a metodologia para começar a desenvolver a interface deve levar em consideração:

   FLUxOGRAMA
   WIREFRAME
   PRINCíPIOS DE REDAçãO
   SEMâNTICA
   OBjETIvIDADE

                Tá, não é fáááácil. Mas não é nada do outro mundo pra um designer.
ESTUDO DE USABILIDADE
                     FLUXOGRAMA > APLICAçãO


DEFINIR MODO DE EXIBIÇÃO [menu]
O conteúdo de um site apresenta as seguintes seções:

HOME
A EMPRESA
CURSOS
PALESTRAS
CONSULTORIA
DEPOIMENTOS
CDS E DvDS
APOSTILAS
CONTATO




SEMANTICAMENTE, qUAIS ITENS SE AGRUPAM?
COMO SERIA O FLUxOGRAMA DESTE SITE?
ESTUDO DE USABILIDADE
                    FLUXOGRAMA > APLICAçãO


DEFINIR MODO DE EXIBIÇÃO [menu]
Os itens CURSOS, PALESTRAS e CONSULTORIA tem um formato de conteúdo
semelhante. Da mesma forma também se agrupam CDs e DvDs e APOSTILAS.
Nestes casos, cabe ao designer propor ao cliente que sejam agrupados em
apenas um item de exibição. Os primeiros podem ser vizualizados em apenas um:
SERvIçOS.




CDs e DvDs e APOSTILAS, se forem produtos a serem vendidos, podem ficar numa
mesma seção principal: LOjA ONLINE.




CDs e DvDs e APOSTILAS, se forem produtos a serem vendidos, podem ficar numa
mesma seção principal: LOjA ONLINE.
ESTUDO DE USABILIDADE
                     FLUXOGRAMA > APLICAçãO


DEFINIR MODO DE EXIBIÇÃO [menu]


                                     HOME




 A EMPRESA        SERVIÇOS        DEPOIMENTOS     LOJA ONLINE        CONTATO
                   CURSOS                          CDs e DVDs

                  PALESTRAS                        APOSTILAS

                 CONSULTORIA


O Usuário entra no site na página HOME. A partir dali, ele tem a opção de navegar
pelas outras páginas.
BIBLIOGRAFIA ONLINE E OFFLINE
     GOOGLE IT! MAS TEM UNS EXEMPLOS AÍ EMBAIXO




USABILIDOIDO.COM.BR
PINCELADASDAWEB.COM.BR
RODRIGOMUNIz.COM

FELIPECAROE.COM
CASULLOWEB.COM.BR
UxRECIFE.BLOGSPOT.COM

SMASHINGMAGAzINE.COM
WEBDESIGNERWALL.COM
WEBDESIGNLEDGER.COM

BESTWEBGALLERy.COM
LAyOUTGALLAxy.COM
THESITEWIzARD.COM
NA QUEBRADA DA WEB
 FELIPE CAROÉ - COLETIVO NEGOBOM

Mais conteúdo relacionado

Mais procurados

AI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 diasAI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 diasHuge
 
Workshop - Construindo um site com drupal sem saber programar.
Workshop - Construindo um site com drupal sem saber programar.Workshop - Construindo um site com drupal sem saber programar.
Workshop - Construindo um site com drupal sem saber programar.Renato Vasconcellos Gomes
 
Análise do Site Orkut
Análise do Site OrkutAnálise do Site Orkut
Análise do Site Orkutelisa gijsen
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenLuiz Agner
 
Curso de formação em educação ambiental e políticas públicas
Curso de formação em educação ambiental e políticas públicasCurso de formação em educação ambiental e políticas públicas
Curso de formação em educação ambiental e políticas públicasvideoparatodos
 
Pinch portfolio
Pinch portfolioPinch portfolio
Pinch portfolioPinch
 
Revendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webRevendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webWellington Oliveira
 

Mais procurados (18)

Curso web faveni aula 27
Curso web faveni aula 27Curso web faveni aula 27
Curso web faveni aula 27
 
AI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 diasAI e UX como solução de educação à distância em 5 dias
AI e UX como solução de educação à distância em 5 dias
 
Workshop - Construindo um site com drupal sem saber programar.
Workshop - Construindo um site com drupal sem saber programar.Workshop - Construindo um site com drupal sem saber programar.
Workshop - Construindo um site com drupal sem saber programar.
 
Desenvolvimento de Sites
Desenvolvimento de SitesDesenvolvimento de Sites
Desenvolvimento de Sites
 
O uso do prezi
O uso do preziO uso do prezi
O uso do prezi
 
Apresentacao cipa final
Apresentacao cipa finalApresentacao cipa final
Apresentacao cipa final
 
Ai ad-tp2-g1
Ai ad-tp2-g1Ai ad-tp2-g1
Ai ad-tp2-g1
 
Apresentacaoblog
ApresentacaoblogApresentacaoblog
Apresentacaoblog
 
Ferramentas da Web 2.0 para professores
Ferramentas da Web 2.0 para professoresFerramentas da Web 2.0 para professores
Ferramentas da Web 2.0 para professores
 
Análise do Site Orkut
Análise do Site OrkutAnálise do Site Orkut
Análise do Site Orkut
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro Nielsen
 
Curso de formação em educação ambiental e políticas públicas
Curso de formação em educação ambiental e políticas públicasCurso de formação em educação ambiental e políticas públicas
Curso de formação em educação ambiental e políticas públicas
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Pinch portfolio
Pinch portfolioPinch portfolio
Pinch portfolio
 
Revendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da webRevendo as descobertas iniciais de usabilidade da web
Revendo as descobertas iniciais de usabilidade da web
 
Blaving
BlavingBlaving
Blaving
 
Blog
BlogBlog
Blog
 
Aula27 trevisan
Aula27 trevisanAula27 trevisan
Aula27 trevisan
 

Destaque (16)

Palestra - Branding e os Designers
Palestra - Branding e os DesignersPalestra - Branding e os Designers
Palestra - Branding e os Designers
 
Palestra: Branding e Internet
Palestra: Branding e InternetPalestra: Branding e Internet
Palestra: Branding e Internet
 
20 pequenas dicas para mega resultados no E-commerce
20 pequenas dicas para mega resultados no E-commerce20 pequenas dicas para mega resultados no E-commerce
20 pequenas dicas para mega resultados no E-commerce
 
Versão 178
Versão 178Versão 178
Versão 178
 
Versão 1.86
Versão 1.86Versão 1.86
Versão 1.86
 
Versão 1.84
Versão 1.84Versão 1.84
Versão 1.84
 
Versao 1.94
Versao 1.94Versao 1.94
Versao 1.94
 
Versão 1.92
Versão 1.92Versão 1.92
Versão 1.92
 
Versão 1.90
Versão 1.90Versão 1.90
Versão 1.90
 
Versão 1.80
Versão 1.80Versão 1.80
Versão 1.80
 
Versão 1.88
Versão 1.88Versão 1.88
Versão 1.88
 
Versão 1.82
Versão 1.82Versão 1.82
Versão 1.82
 
Sua Marca Vai Ser Um Sucesso
Sua Marca Vai Ser Um SucessoSua Marca Vai Ser Um Sucesso
Sua Marca Vai Ser Um Sucesso
 
O que é branding?
O que é branding?O que é branding?
O que é branding?
 
Marketing 3.0 - Aplicação
Marketing 3.0 - AplicaçãoMarketing 3.0 - Aplicação
Marketing 3.0 - Aplicação
 
Versao 1.96
Versao 1.96Versao 1.96
Versao 1.96
 

Semelhante a Palestra - Na quebrada da Web

Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuárioguest479a40
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos CentraisJose Claudio Terra
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos CentraisCarlos Franco
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Patricia Mallmann
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web designCarla Suelen
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designerJonathan Prateat
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao Carlos Franco
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao brandingJoão Alves
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebLucas Augusto Carvalho
 
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
 
Porque e como utilizar o WordPress e seu relacionamento com as Mídias Sociais
Porque e como utilizar o WordPress e seu relacionamento com as Mídias SociaisPorque e como utilizar o WordPress e seu relacionamento com as Mídias Sociais
Porque e como utilizar o WordPress e seu relacionamento com as Mídias SociaisGuga Alves
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveisLeandro Borges
 

Semelhante a Palestra - Na quebrada da Web (20)

Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
 
O Arquiteto da Informacao
O Arquiteto da Informacao O Arquiteto da Informacao
O Arquiteto da Informacao
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
Ferramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na WebFerramentas Para Acessibilidade Na Web
Ferramentas Para Acessibilidade Na Web
 
Cronograma final 13maio
Cronograma final 13maioCronograma final 13maio
Cronograma final 13maio
 
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
 
Porque e como utilizar o WordPress e seu relacionamento com as Mídias Sociais
Porque e como utilizar o WordPress e seu relacionamento com as Mídias SociaisPorque e como utilizar o WordPress e seu relacionamento com as Mídias Sociais
Porque e como utilizar o WordPress e seu relacionamento com as Mídias Sociais
 
Dream 01
Dream 01Dream 01
Dream 01
 
Dream 01
Dream 01Dream 01
Dream 01
 
Aplicações web acessíveis
Aplicações web acessíveisAplicações web acessíveis
Aplicações web acessíveis
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 

Palestra - Na quebrada da Web

  • 1.
  • 2. NA QUEBRADA DA WEB CAROÉ Qual o papel do designer na web? O que antes era difícil dizer - ou pior, era resumido a “fazer layout” - hoje já tem aspectos bastante concretos: Estudo de navegação, usabilidade, arquitetura da informação, adaptação estética... Por que a evolução? Simplesmente houve tempo para a estabilidade? Ou os conceitos de Web 2.0 e Novos Conteúdos tem alguma coisa a ver com isso? Como quebrar paradigmas?
  • 3. O QUE É A WEB 2.0 NA REAL, ISSO EXISTE MESMO? Web 2.0 é um termo cunhado pela primeira vez em 2004 para designar uma segunda geração de comunidades e serviços pela internet. A “Web como plataforma” envolve wikis, aplicações colaborativas, redes sociais e Tecnologia da Informação. Embora o termo tenha uma conotação de uma nova versão para a Web, ele não se refere à atualização nas suas especificações técnicas, mas a uma mudança na forma como ela é encarada por usuários e desenvolvedores, ou seja, o ambiente de interação que hoje engloba inúmeras linguagens e motivações. É uma atualização conceitual, mais do que tecnológica. Adaptado da Wikipédia - Um dos maiores exemplos de web 2.0
  • 4. O QUE É A WEB 2.0 EXEMPLOS BLOGS WIKIS FÓRUMS FOTOLOGS ORKUT TWITTER FACEBOOK LINKEDIN DESIGNUP NING THE CRIMS A origem dos serviços 2.0 é difícil de determinar, mas...
  • 5. O QUE É A WEB 2.0 GENEALOGIA ...dá pra se ter uma ideia olhando pros seus avós.
  • 6. NOVAS TENDÊNCIAS E CONCEITOS COMO O DESIGN SE ADAPTOU À WEB 2.0? As informações são mórficas, e o usuário tem influência no que acessa; Isso exige interatividade, possibilitada pela infame Programação. Por ser interativo, o conteúdo pode ser melhor explorado; Ao mesmo tempo, exige uma maior dedicação na apresentação. A participação do usuário é fundamental para gerar mais conteúdo; Um exemplo disso são os comentários em um blog, ou replies no twitter. Seu comentário no blog hoje pode gerar o post de amanhã...
  • 7. NOVAS TENDÊNCIAS E CONCEITOS COMO O DESIGN SE ADAPTOU À WEB 2.0? ...ou mesmo aprimorar o post de hoje.
  • 8. NOVAS RESPONSABILIDADES COM GRANDES PODERES... BRIEFING CONCISO; PROTOTIPAçãO; ARqUITETURA DA INFORMAçãO; ACESSIBILIDADE; USABILIDADE; Achou que era só empurrar pro cliente um blog no wordpress?
  • 9. NOVA RESPONSABILIDADE: USABILIDADE FALA SÉRIO: TU INVENTOU ESSA PALAVRA, NÉ? Usabilidade é o termo relativo ao estudo e aplicação de conceitos de interação homem-máquina, bem como da ergonomia visual e da apresentação de dados. Normalmente se refere ao trabalho exercido para aprimorar a utilização de quais- quer interfaces digitais. Utilizada originalmente para interfaces de softwares, hoje a Usabilidade se refere quase que inteiramente ao posicionamento da informação em websites. Faz parte de suas atribuições o projeto do fluxo que o usuário irá seguir, a publicação dos dados, a definição de um padrão ergonômico, entre outros. É bom navegar num site usável.
  • 10. NOVA RESPONSABILIDADE: USABILIDADE QUAL A IMPORTÂNCIA E COMO ESTUDA-LA? NÃOMEFAÇAPENSAR! Título do Livro de STEvEN KRUG sobre Usabilidade O usuário não pode perder tempo visitando seu site, a não ser que ele queira. Ele deve ter opções (caso seja seu objetivo que ele passe vários minutos visitando), mas deve acima de tudo poder encontrar os dados na hora que quiser. FERRAMENTA DE BUSCA LISTA OBjETIvA MAPA DO SITE TíTULOS ADEqUADOS E não é difícil projetar um site usável. Além de levar em considerações os dados acima, a metodologia para começar a desenvolver a interface deve levar em consideração: FLUxOGRAMA WIREFRAME PRINCíPIOS DE REDAçãO SEMâNTICA OBjETIvIDADE Tá, não é fáááácil. Mas não é nada do outro mundo pra um designer.
  • 11. ESTUDO DE USABILIDADE FLUXOGRAMA > APLICAçãO DEFINIR MODO DE EXIBIÇÃO [menu] O conteúdo de um site apresenta as seguintes seções: HOME A EMPRESA CURSOS PALESTRAS CONSULTORIA DEPOIMENTOS CDS E DvDS APOSTILAS CONTATO SEMANTICAMENTE, qUAIS ITENS SE AGRUPAM? COMO SERIA O FLUxOGRAMA DESTE SITE?
  • 12. ESTUDO DE USABILIDADE FLUXOGRAMA > APLICAçãO DEFINIR MODO DE EXIBIÇÃO [menu] Os itens CURSOS, PALESTRAS e CONSULTORIA tem um formato de conteúdo semelhante. Da mesma forma também se agrupam CDs e DvDs e APOSTILAS. Nestes casos, cabe ao designer propor ao cliente que sejam agrupados em apenas um item de exibição. Os primeiros podem ser vizualizados em apenas um: SERvIçOS. CDs e DvDs e APOSTILAS, se forem produtos a serem vendidos, podem ficar numa mesma seção principal: LOjA ONLINE. CDs e DvDs e APOSTILAS, se forem produtos a serem vendidos, podem ficar numa mesma seção principal: LOjA ONLINE.
  • 13. ESTUDO DE USABILIDADE FLUXOGRAMA > APLICAçãO DEFINIR MODO DE EXIBIÇÃO [menu] HOME A EMPRESA SERVIÇOS DEPOIMENTOS LOJA ONLINE CONTATO CURSOS CDs e DVDs PALESTRAS APOSTILAS CONSULTORIA O Usuário entra no site na página HOME. A partir dali, ele tem a opção de navegar pelas outras páginas.
  • 14. BIBLIOGRAFIA ONLINE E OFFLINE GOOGLE IT! MAS TEM UNS EXEMPLOS AÍ EMBAIXO USABILIDOIDO.COM.BR PINCELADASDAWEB.COM.BR RODRIGOMUNIz.COM FELIPECAROE.COM CASULLOWEB.COM.BR UxRECIFE.BLOGSPOT.COM SMASHINGMAGAzINE.COM WEBDESIGNERWALL.COM WEBDESIGNLEDGER.COM BESTWEBGALLERy.COM LAyOUTGALLAxy.COM THESITEWIzARD.COM
  • 15. NA QUEBRADA DA WEB FELIPE CAROÉ - COLETIVO NEGOBOM