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

Palestra - Na quebrada da Web

  • 2.
    NA QUEBRADA DAWEB 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 ECONCEITOS 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 ECONCEITOS 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 EOFFLINE 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 DAWEB FELIPE CAROÉ - COLETIVO NEGOBOM