[dig2012] 02 - História do design de interfaces
Upcoming SlideShare
Loading in...5
×
 

[dig2012] 02 - História do design de interfaces

on

  • 1,795 views

A ilustração do Javier Royo é de um designer - também espanhol - homônimo do autor Javier Royo. Pensei em tirar, mas ficou bonitinha lá, né?

A ilustração do Javier Royo é de um designer - também espanhol - homônimo do autor Javier Royo. Pensei em tirar, mas ficou bonitinha lá, né?

Statistics

Views

Total Views
1,795
Views on SlideShare
1,795
Embed Views
0

Actions

Likes
0
Downloads
58
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[dig2012] 02 - História do design de interfaces [dig2012] 02 - História do design de interfaces Presentation Transcript

  • História do Design Digital Eduardo Novais - Design de Interfaces Gráficassexta-feira, 16 de março de 2012
  • Em vários momentos, você deve ter ouvido falar sobre a história da tecnologia em diversos meios.sexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • Vamos tentar fazer isso de uma forma diferente?sexta-feira, 16 de março de 2012
  • Olhar a evolução em função de 4 grandes áreas Javier Royo (2008)sexta-feira, 16 de março de 2012
  • Projetos de sinalização Sist. Visuais de Inf Identidade Visual Evolução tecnológicasexta-feira, 16 de março de 2012
  • Projetos de sinalização Sist. Visuais de Inf Identidade Visual Evolução tecnológicasexta-feira, 16 de março de 2012
  • Os sistemas de sinalização são antecessores dos sistemas de navegaçãosexta-feira, 16 de março de 2012
  • Saída da estação de metrô em Parissexta-feira, 16 de março de 2012
  • Interface do TripView Sydney (GROFSOFT, 2011)sexta-feira, 16 de março de 2012
  • Plano de Sinalização do Metrô de Londres Harry C. Beck (1933)sexta-feira, 16 de março de 2012
  • London Underground Map (Harry Beck, 1933)sexta-feira, 16 de março de 2012
  • Beck substituiu a fidelidade geográfica por uma interpretação diagramáticasexta-feira, 16 de março de 2012
  • Outro avanço foi codificar a identificação das diferentes linhas com cores brilhantes.sexta-feira, 16 de março de 2012
  • O avanço alcançado por Beck foi fundamental para o desenvolvimento do Design da Informaçãosexta-feira, 16 de março de 2012
  • Unificação dos sinais de circulação Vienna Convention on Road Signs and Signals (1968)sexta-feira, 16 de março de 2012
  • A padronização dos sinais de circulação criou uma linguagem global para o trânsito de veículossexta-feira, 16 de março de 2012
  • Normas gráficas Federal Design Improvement Program (1974)sexta-feira, 16 de março de 2012
  • "I believe that we all can find that the arts have a great deal more to contribute to what we in government are seeking to accomplish -- and that this will be good for the arts and good for the country." President Richard Nixon, 1971sexta-feira, 16 de março de 2012
  • O objetivo era melhorar a qualidade da comunicação visual e otimizar a relação entre os órgãos governamentais e os cidadãos.sexta-feira, 16 de março de 2012
  • Estabeleceram normas para tamanho, formatos e especificações de papel, cores, tipografia e sistema de retículasexta-feira, 16 de março de 2012
  • Sistema de Símbolos para Pasageiros AIGA (1974)sexta-feira, 16 de março de 2012
  • Esta foi mais uma iniciativa do Governo dos Eua na área de Designsexta-feira, 16 de março de 2012
  • Foi encomendado à AIGA um sistema de símbolos destinado a passageiros, pedestres e usuários de transportesexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • A importância desse trabalho residiu no passo definitivo na unificação de significados que transcende as barreiras culturais e idiomáticassexta-feira, 16 de março de 2012
  • Metáfora do Desktop Xerox Star (1981)sexta-feira, 16 de março de 2012
  • Estabelece-se pela primeira vez uma série de ícones herdeiros dos sinais viários que funcionarão como sinais para navegar pelo sistemasexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • Ao executar um clique duplo em um ícone, uma pasta se abria em forma de janelasexta-feira, 16 de março de 2012
  • Os espaços do nosso mundo começam a se estabelecer como espaços virtuais, espaços de informação representados por metáforas e íconessexta-feira, 16 de março de 2012
  • Projetos de sinalização Sist. Visuais de Inf Identidade Visual Evolução tecnológicasexta-feira, 16 de março de 2012
  • Representações gráficas que contêm um alto grau de informação e tem um objetivo didáticosexta-feira, 16 de março de 2012
  • Isotype Otto Neurath (1920)sexta-feira, 16 de março de 2012
  • Desenvolver uma padronização visual para fins educativos compreensível por qualquer cidadãosexta-feira, 16 de março de 2012
  • A idéia central era desenvolver uma linguagem mundial sem palavrassexta-feira, 16 de março de 2012
  • Essa vocação de globalidade é aplicada à comunicação das novas tecnologiassexta-feira, 16 de março de 2012
  • Não ao acaso, muito dos pictogramas atuais são encotrados em uso na Internetsexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • User Centered Design Will Burtin (1949)sexta-feira, 16 de março de 2012
  • Upjohn para a Scope Magazine (Will Burtin, 1951)sexta-feira, 16 de março de 2012
  • The brain (Will Burtin, 1964)sexta-feira, 16 de março de 2012
  • Quatro realidades principais: “A o do homem, como unidade e mediador; a da luz, da cor e da textura; a do espaço, do tempo e do movimento; e a da ciência”sexta-feira, 16 de março de 2012
  • Burtin dizia que o homem era o aspecto mais importante para o designer. Nele já estava latente a ideia do design centrado no usuáriosexta-feira, 16 de março de 2012
  • Todo o conhecimento pertence ao estudo da percepção do usuário, de como ele recebe a informaçãosexta-feira, 16 de março de 2012
  • Atlas Geográfico Mundial Herbet Bayer (1953)sexta-feira, 16 de março de 2012
  • Nessa obra, Bayer apresentava toda a informação por meio de símbolos mapas geográficos e diagramassexta-feira, 16 de março de 2012
  • Esse trabalho representou um dos primeiros grande trabalhos dedicados à visualização da informação em estado puro e um antecedente da representação da informação tal como a conduzimos na internetsexta-feira, 16 de março de 2012
  • Atlas Geográfico Mundial (Herbert Mayer, 1953)sexta-feira, 16 de março de 2012
  • Projetos de sinalização Sist. Visuais de Inf Identidade Visual Evolução tecnológicasexta-feira, 16 de março de 2012
  • No inicío do século XX surgiram as primeiras iniciativas para padronizar a imagem corportava das empresassexta-feira, 16 de março de 2012
  • Identidade Corporativa - AEG Otto Neurath e Peter Behrens (1920)sexta-feira, 16 de março de 2012
  • Eles foram os primeiros a sistematizar uma imagem de identidade visual coordenada da forma como vemos hojesexta-feira, 16 de março de 2012
  • Organizaram todo o sistema de projeção da identidade da forma como até hoje conhecemossexta-feira, 16 de março de 2012
  • Escola de Design de Ulm Otl Aicher e Martin Krampen (1949 - 1964)sexta-feira, 16 de março de 2012
  • A importância da Escola de Ulm reside na renovação do conceito metodológico aplicado à imagem da marca e aos signos visuaissexta-feira, 16 de março de 2012
  • Entre os principais feitos de Otl Aicher estão a elaboração das imagens corporativas para a Lufthansa e Braunsexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • Estes trabalhos foram resultados de um estudo metodológico que levava a entender a imagem corporativa como uma imagem global que organizava todo o material gráficosexta-feira, 16 de março de 2012
  • Hoje em dia os sistemas de identidade visual optam por soluções estruturais menos rígidas, nos quais a marca e suas aplicações são mais flexíveis e permeáveissexta-feira, 16 de março de 2012
  • Nas novas tecnologias, a importância da marca é medida também em termos de uso das ferramentassexta-feira, 16 de março de 2012
  • A representação da identidade visual e o seu uso converge e se mistura no ciberespaçosexta-feira, 16 de março de 2012
  • Projetos de sinalização Sist. Visuais de Inf Identidade Visual Evolução tecnológicasexta-feira, 16 de março de 2012
  • Bem, aqui a coisa é longa e são várias as iniciativas.Vamos dividir em algumas subcategoriassexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • A história da interface gráfica do usuário acompanha a evolução tecnológica. Quanto mais espaços foram criados, mais interfaces foram desenvolvidassexta-feira, 16 de março de 2012
  • A era dos pré-computadores eletrônicos caracteriza-se por dispositivos de input e output e que desempenhavam funções relacionadas com cálculossexta-feira, 16 de março de 2012
  • Eram máquinas extremamente adaptadas. O homem é que tinha que se adaptar à máquina.sexta-feira, 16 de março de 2012
  • Nuria Almirón: Anti-interface em seu estado purosexta-feira, 16 de março de 2012
  • Maquina Diferencial Charles Babbage (1835)sexta-feira, 16 de março de 2012
  • Aplicava cinco conceitos modernos dos computadores modernos: entrada de dados, armazenamento, processador, unidade de controle, dispositivo de saídasexta-feira, 16 de março de 2012
  • Cartões Perfurados Joseph Marie Jacquard (1891)sexta-feira, 16 de março de 2012
  • Os cartões perfurados foram criados para o tear automático. Depois foram adptados pela Hollerith para o censo dos EUA, sendo o primeiro sistema de processamento de informaçãosexta-feira, 16 de março de 2012
  • Composto de uma leitora elétrica de cartões perfurados, uma classificadora rudimentar, e uma unidade tabuladora (somava e imprimia resultados)sexta-feira, 16 de março de 2012
  • Cartão Perfurado (Hollerith, 1890)sexta-feira, 16 de março de 2012
  • ENIAC J. Eckert e J. Mauchly (1945)sexta-feira, 16 de março de 2012
  • O desenvolvimento tecnológico durante o século XX até a chegada das primeiras interfaces levaram à construção de computadores cada vez menoressexta-feira, 16 de março de 2012
  • Tido como o primeiro computador digital eletrônico de grande escalasexta-feira, 16 de março de 2012
  • Paralelamente foi-se ampliando a memória e a capacidade de cálculo até que o computador conseguisse suportar e apresentar gráficossexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • Foi no MIT que apareceram os primeiros resultados de pesquisas em relação às imagens geradas por computadorsexta-feira, 16 de março de 2012
  • Whirlwind MIT (1949)sexta-feira, 16 de março de 2012
  • Foi o primeiro computador com capacidade de realizar cálculos de forma digital e representá-los diretamente em uma tela de raios catódicossexta-feira, 16 de março de 2012
  • Sketchpad Ivan Sutherland (1962)sexta-feira, 16 de março de 2012
  • Diante de uma tela, podia-se desenhar linhas, mudá-las, repeti-las, armazená-las etc.sexta-feira, 16 de março de 2012
  • Abriu caminho para uma conceituação diferente da interface e das relações entre pessoas e computadoressexta-feira, 16 de março de 2012
  • Além disso, foi a primeira interface aplicada ao desenho, o início do Computer-aided designsexta-feira, 16 de março de 2012
  • Bloco de Desenho (Sutherland, 1962)sexta-feira, 16 de março de 2012
  • Sutherland também desenvolveu geradores de cenas para simuladores de aviões militares e comerciaissexta-feira, 16 de março de 2012
  • Dynabook Alan Kay (1960)sexta-feira, 16 de março de 2012
  • Esse projeto é o embrião do que chamamos hoje de laptopsexta-feira, 16 de março de 2012
  • Uma plataforma criada para um computador pessoal usando sistema de orientação gráfica dentro da interface e fácil de usar por alunos de educação primáriasexta-feira, 16 de março de 2012
  • Protótipo do Dynabook (Alan Kay)sexta-feira, 16 de março de 2012
  • Mouse Douglas Engelbart (1968)sexta-feira, 16 de março de 2012
  • A invenção do mouse gerou o princípio da manipulação direta da interface.sexta-feira, 16 de março de 2012
  • Sistema Operacional com Janelas Augmentation Research Center (1968)sexta-feira, 16 de março de 2012
  • O próprio Engelbart realizou a primeira demonstração pública de um sistema operacional com janelassexta-feira, 16 de março de 2012
  • A navegação era realizada por teclado e mousesexta-feira, 16 de março de 2012
  • As pesquisas realizadas foram as precursoras do conceito de interface atualsexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • Que mudança de paradigma é essa?sexta-feira, 16 de março de 2012
  • Essa mudança diz respeito à forma em que a informação era pensada. Em princípio, se pensava em informação estanque, depois, em informação compartilhada.sexta-feira, 16 de março de 2012
  • Hipertexto Theodore Holm Nelson (1960)sexta-feira, 16 de março de 2012
  • Vislumbrava o computador como uma máquina fácil de usar, divertida e que tivesse uma interface com imagem e somsexta-feira, 16 de março de 2012
  • Além de ser esse entusiasta, ele desenvolveu o conceito de hipertextosexta-feira, 16 de março de 2012
  • O termo referia-se a um acúmulo de de informações ou escrita, unidas de forma não- sequêncial, mas horizontal, que permitia ao usuário buscar informações com maior liberdade, gerando seu próprio conteúdo.sexta-feira, 16 de março de 2012
  • Ted Nelson observava também os jogos de video-game como uma experiência com alto grau de imersão por parte do usuáriosexta-feira, 16 de março de 2012
  • ArpaNET SRI, UCLA, UCSB, UU (1969)sexta-feira, 16 de março de 2012
  • Baseada nos conceitos de hipertexto e das pesquisas do projeto Xanadu, de Ted Nelsonsexta-feira, 16 de março de 2012
  • A primeira mensagem nodo a nodo entre a UCLA e a SRIsexta-feira, 16 de março de 2012
  • Outros produtos acabaram sendo desenvolvidos, o correio eletrônico, por exemplosexta-feira, 16 de março de 2012
  • Atari Nolan Bushnell (1980)sexta-feira, 16 de março de 2012
  • Os jogos de arcade, como o Pong, foram a primeira forma de utilização exclusiva do computador para puro entretenimentosexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • Chip Intel (1971)sexta-feira, 16 de março de 2012
  • Possibilitou o nascimento da informática pessoal, com o consequente desenvolvimento da interface destinada ao usuáriosexta-feira, 16 de março de 2012
  • Desktop e WIMP Alan Kay (1973)sexta-feira, 16 de março de 2012
  • O Xerox Parc é considerado o primeiro computador de uma interface gráficasexta-feira, 16 de março de 2012
  • A Rank Xerox teve muito pouca visão de futuro ao não querer incorporar a nova interface WIMPsexta-feira, 16 de março de 2012
  • Lisa Apple (1976)sexta-feira, 16 de março de 2012
  • No projeto Lisa é que foi estabelecido a ideia de interface amiga do usuáriosexta-feira, 16 de março de 2012
  • Viewtel 202 Birmingham Post and Mail (1979)sexta-feira, 16 de março de 2012
  • Considerado o primeiro jornal do mundo que tinha por base um suporte eletrônicosexta-feira, 16 de março de 2012
  • Foi o primeiro jornal a ser lido em uma tela e era considerado como um serviço complementar do jornal.sexta-feira, 16 de março de 2012
  • Era necessário um aparelho decodificador e funcionava de Segunda a Sábado, doze horas por diasexta-feira, 16 de março de 2012
  • Lisa Apple (1983)sexta-feira, 16 de março de 2012
  • Estabeleceu-se entre os usuários uma nova forma de entender a interface gráfica; pela primeira vez foram utilizados os menus deslocáveissexta-feira, 16 de março de 2012
  • Como resultado, houve a recuperação da linguagem pictográfica para a gestão da informação e a sinalização do espaço de informaçãosexta-feira, 16 de março de 2012
  • O sucesso definitivo desse novo modelo de interface chegou em 1984 com o Macintoshsexta-feira, 16 de março de 2012
  • Macintosh (Apple, 1984)sexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • Um dos avanços mais importantes no que se refere à história da interatividade é o progresso das telecomunicaçõessexta-feira, 16 de março de 2012
  • Habitat Lucasfilm Games (1986 e 1988)sexta-feira, 16 de março de 2012
  • Comunidades Virtuais acessíveis a milhares de computadores pessoais unidos entre si via modem.sexta-feira, 16 de março de 2012
  • Nesse espaço as pessoas poderiam fazer negócios, publicar jornais, assim como muitas outras coisas que podem ser feitas em um lugar real. Bom, ao menos foi assim que foi registrado.sexta-feira, 16 de março de 2012
  • O Habitat indica o caminho a ser seguido pelas interfaces gráficas que têm a responsabilidade de conectar muita gente entre si por meio de comunidade virtuais, com comunicação em tempo real.sexta-feira, 16 de março de 2012
  • Habitat (Lucasfilm Games, 1986)sexta-feira, 16 de março de 2012
  • HyperCard Bill Atkinson (1987)sexta-feira, 16 de março de 2012
  • Desenvolvido como uma ferramenta com a finalidade de buscar, administrar e guardar todo tipo de informação e ligá-la entre si.sexta-feira, 16 de março de 2012
  • Foi um dos primeiros sistemas hipermédia de sucesso antes do surgimento do World Wide Web.sexta-feira, 16 de março de 2012
  • Curiosamente, Atkinson utilizou o ícone de uma casa (home) para representar a tela principal.sexta-feira, 16 de março de 2012
  • World Wide Web Tim Berners-Lee (1989)sexta-feira, 16 de março de 2012
  • Tudo começou quando Berners-Lee escreveu um documento apresentando uma proposta de gestão da informação divulgando-a por meio de um sistema de hipertexto.sexta-feira, 16 de março de 2012
  • O advento da internet modificou completamente a nossa forma de interagir. Eram as ideias de Ted Nelson em estado latente.sexta-feira, 16 de março de 2012
  • Mosaic Marc Andressen (1991)sexta-feira, 16 de março de 2012
  • Considerado o primeiro navegador popular, permitia passar de uma página para outra clicando o mouse em uma série de íconessexta-feira, 16 de março de 2012
  • Mosaic 1.0 (NCSA, 1991)sexta-feira, 16 de março de 2012
  • Pesquisas no MediaLab Muriel Cooper e Visible Language Workshop - MIT (1974 a 1994)sexta-feira, 16 de março de 2012
  • Cabe ressaltar o resultado das pesquisas ligadas à interface gráfica do grupo de Muriel Coopersexta-feira, 16 de março de 2012
  • Muriel Cooper defendia em sua tese a ideia de abster-se dos ícones, de forma que os textos representassem a si própriossexta-feira, 16 de março de 2012
  • Seu projeto defendia que a forma mais potente de se trabalhar com ideias era recorrer a abstrações (símbolos tipográficos) ao invés de se recorrer às metáforassexta-feira, 16 de março de 2012
  • Ela mostrou que as telas com informações preenchidas com o códigos poderiam ser preenchidas com tipografia elegante, cores exuberantes e animações vivas.sexta-feira, 16 de março de 2012
  • Financial Viewpoints (Lisa Strausfeld)sexta-feira, 16 de março de 2012
  • Netscape Navigator 1.0 Netscape (1994)sexta-feira, 16 de março de 2012
  • O Netscape foi responsável por consolidar o público da internet.sexta-feira, 16 de março de 2012
  • No seu painel de controle, podemos observar os ícones setas, home e recarga.sexta-feira, 16 de março de 2012
  • Os ícones encontrados nesses navegadores são imagens oriundos de pictogramas que utilizamos na sinalização tradicionalsexta-feira, 16 de março de 2012
  • O valor da visualidade adquire um novo sentido: a escrita alfabética perde seu papel mais importante de comunicar ideias para esse símbolossexta-feira, 16 de março de 2012
  • Pré-história Visualizar a informática Mudança de Paradigma Interface gráfica atual Internet e Ciberespaço Guerra dos Navegadoressexta-feira, 16 de março de 2012
  • Internet Explorer 1.0 e 2.0 Microsoft (1995)sexta-feira, 16 de março de 2012
  • Guerra dos Browsers foi o nome dado a um período (1995 a 1999) na história da Internet no qual a Netscape perde a sua liderança absoluta no mercado para a Microsoft e o Internet Explorer.sexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • O navegador da Microsoft foi lançado em agosto de 1995 e, em novembro já estava sendo lançada a versão 2.0sexta-feira, 16 de março de 2012
  • A tela enche-se de ícones em uma tentativa de oferecer mais serviços e arrebatar o mercadosexta-feira, 16 de março de 2012
  • Mosaic 2.0 NCSA (1995)sexta-feira, 16 de março de 2012
  • Essa versão inclui dois ícones a mais: Recarga e Salvar Documento.sexta-feira, 16 de março de 2012
  • Até esse momento era o navegador que conseguia, com cinco ícones, a maior concisão de açõessexta-feira, 16 de março de 2012
  • Netscape Navigator 2.0 Netscape (1996)sexta-feira, 16 de março de 2012
  • Apresenta uma importante melhora ao colocar dentro da janela de navegação um ícone que levava a um programa de correio eletrônicosexta-feira, 16 de março de 2012
  • sexta-feira, 16 de março de 2012
  • Internet Explorer 3.0 Microsoft (1996)sexta-feira, 16 de março de 2012
  • Essa versão do IE marcou eliminação dos botões quadrados como conhecíamossexta-feira, 16 de março de 2012
  • Apesar desse avanço o Netscape continuava com maior consistência gráfica em relação ao conjunto de todos os íconessexta-feira, 16 de março de 2012
  • Mosaic 3.0 NCSA (1997)sexta-feira, 16 de março de 2012
  • Os ditos 5 ícones agora pertenciam a uma janela flutuantesexta-feira, 16 de março de 2012
  • O Navegador Chrome retoma a interface do Mosaic ao incluir uma lista mínima de ícones e intergrar funções como uma página do próprio navegadorsexta-feira, 16 de março de 2012