SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
INTERFACE
GRÁFICA DO
USUÁRIO
Para compreendermos a
fisionomia e o funcionamento da
interface gráfica do usuário nos
equipamentos eletrônicos atuais,
precisamos verificar a evolução
dos diferentes campos do design
que a fizeram ser assim.
GUI: Graphic User Interface
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
São 4 grandes áreas de evolução,
nas quais estão contidos
praticamente todos os elementos
que encontramos em qualquer
projeto de design digital.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
A evolução dos projetos de
sinalização:
a geração dos espaços
transitáveis de informação
(que podem ser lidos) até
chegar ao ciberespaço.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
O desenvolvimento dos
sistemas pictográficos para
a transmissão da
informação (design da
informação):
para compreender melhor o
uso dos ícones nas
aplicações da internet.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
Marcos históricos
relacionados com a
identidade visual, até
hoje no mundo digital.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
A evolução tecnológica em
termos de comunicação
homem-máquina, isto é, a
evolução da própria
interface gráfica do usuário.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
O design deve saber
administrar a informação e
usar os sinais adequados no
momento certo, no lugar
exato e com o conteúdo
preciso.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO
USUÁRIO
Orientar pessoas que se
movem de um lugar para o
outro.
Orientar pessoas que
transladam virtualmente em
um sistema eletrônico de
informações.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Departamento de
transportes dos EUA
encomenda a organização
do sistema de símbolos
destinados a passageiros,
pedestres e usuários dos
transportes. (pictogramas)
1974
1981
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
A Xerox apresenta o sistema
operacional gráfico Star com
interface gráfica, simplificando
os movimentos do usuário e
estabelecendo, pela primeira
vez, uma série de ícones
herdeiros dos sinais viários
que funcionam como sinais
para navegar pelo sistema.
1981
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Os ícones abrem espaços em
forma de janelas: os espaços
reais de nosso mundo
começam a se estabelecer
como espaços virtuais, de
informação representados por
metáforas e ícones.
1981
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Inspirou o designer de
interface de usuário da
Macintosh, Steve Jobs, para o
desktop do Mac.
1982
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Uma equipe liderada por Steve
Jobs desenvolveu uma
interface “amiga do usuário” no
computador Lisa, da Apple.
Pela primeira vez foram
utilizados os menus
deslocáveis.
198
4
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Lançamento no mercado dos
computadores Macintosh fez
com que o seu sistema
operacional representado
graficamente pela metáfora do
desktop se tornasse popular.
198
4
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Mudança na mentalidade dos
usuários: a ideia de que a
pessoa deveria adaptar-se ao
computador foi substituída pela
ideia de que a interface deveria
facilitar as relações e tarefas a
serem realizadas.
1986/8
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Projeto Habitat – Lucasfilm,
consistia de comunidades
virtuais acessíveis a milhares
de computadores pessoais
unidos entre si via modem.
1987
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Primeira aplicação que levaria
os conceitos do hipertexto: o
HyperCard para o Macintosh.
1987
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Atkinson utilizou o ícone de
uma casa para representar a
tela principal do programa e
ficou padronizado de forma
automática em todos os
navegadores da internet para
representar a ação "ir para a
página inicial".
1990
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Primeira versão da interface
gráfica da Microsoft, apesar de
ter aparecido pela primeira vez
em 1987. Essa versão demorou
para tornar-se popular por
causa da excessiva lentidão e
grande instabilidade.
1991
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Lançada a
WWW de Tim
Berners-Lee
1993
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Projetado na
Universidade de
Illinois o primeiro
navegador para a
internet, o Mosaic.
1994
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Os ícones que aparecem
nesses navegadores são
imagens oriundas de
pictogramas que utilizamos
na sinalização tradicional.
1995
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Lançado o primeiro
navegador da Microsoft, o
Internet Explorer, com
muitos ícones numa
tentativa de oferecer mais
serviços.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Com o avanço da
tecnologia e o uso de
muitas telas de
tamanhos diferentes,
houve a necessidade
do design criar uma
solução para isso.
DESENVOLVIMENTO DA
INTERFACE GRÁFICA DO USUÁRIO
Com o avanço da
tecnologia e o uso de
muitas telas de
tamanhos diferentes,
houve a necessidade
do design criar uma
solução para isso.

Mais conteúdo relacionado

Mais procurados

Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalMarconi Pacheco
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioGustavo Gil
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Edu Agni
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuárioVictor Rubens
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilLariane Rossanese
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface DesignEdu Agni
 
Workshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - CuiabáWorkshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - CuiabáJonathas Scott
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de InterfacesAna Migowski
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material DesignGustavo Gobbi
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Mourylise Heymer
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceEdu Agni
 
Palestra ux e ui
Palestra ux e uiPalestra ux e ui
Palestra ux e uiDirect Talk
 

Mais procurados (20)

Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
UX Samsung
UX SamsungUX Samsung
UX Samsung
 
DevUX
DevUXDevUX
DevUX
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
 
Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)Mobile First (ou boas razões para investir em Mobile)
Mobile First (ou boas razões para investir em Mobile)
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Experiencia do usuario
Experiencia do usuarioExperiencia do usuario
Experiencia do usuario
 
Usabilidade Simples
Usabilidade SimplesUsabilidade Simples
Usabilidade Simples
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no Brasil
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
Workshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - CuiabáWorkshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - Cuiabá
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Flat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da InterfaceFlat Design e a Re-Cultura da Interface
Flat Design e a Re-Cultura da Interface
 
Palestra ux e ui
Palestra ux e uiPalestra ux e ui
Palestra ux e ui
 

Destaque

Programação Criativa com Processing
Programação Criativa com ProcessingProgramação Criativa com Processing
Programação Criativa com ProcessingLucas Cabral
 
Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02Lucas Cabral
 
Design e composição gráfica
Design e composição gráficaDesign e composição gráfica
Design e composição gráficaPedro Fidalgo
 
Assistente de programação visual gráfica
Assistente de programação visual gráficaAssistente de programação visual gráfica
Assistente de programação visual gráficaDaniel Brandão
 
Animação e computação gráfica
Animação e computação gráficaAnimação e computação gráfica
Animação e computação gráficaHélder Prando
 
Computação grafica
Computação graficaComputação grafica
Computação graficaLucas Castro
 
Computação Gráfica - Introdução
Computação Gráfica - IntroduçãoComputação Gráfica - Introdução
Computação Gráfica - IntroduçãoTony Alexander Hild
 
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...Natanael Simões
 
Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2
Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2
Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2Fábio Gonçalves
 
Introdução à teoria da interatividade
Introdução à teoria da interatividadeIntrodução à teoria da interatividade
Introdução à teoria da interatividadeLuís
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Wellington Oliveira
 
Computação Gráfica - Introdução
Computação Gráfica - IntroduçãoComputação Gráfica - Introdução
Computação Gráfica - IntroduçãoDaniel Soto
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?Sidney Roberto
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)Bilal Amjad
 

Destaque (16)

Programação Criativa com Processing
Programação Criativa com ProcessingProgramação Criativa com Processing
Programação Criativa com Processing
 
GUI Aplicações Gráficas
GUI Aplicações Gráficas GUI Aplicações Gráficas
GUI Aplicações Gráficas
 
Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02Introdução a programação gráfica com Processing - Aula 02
Introdução a programação gráfica com Processing - Aula 02
 
Design e composição gráfica
Design e composição gráficaDesign e composição gráfica
Design e composição gráfica
 
Assistente de programação visual gráfica
Assistente de programação visual gráficaAssistente de programação visual gráfica
Assistente de programação visual gráfica
 
Animação e computação gráfica
Animação e computação gráficaAnimação e computação gráfica
Animação e computação gráfica
 
Computação grafica
Computação graficaComputação grafica
Computação grafica
 
Computação Gráfica - Introdução
Computação Gráfica - IntroduçãoComputação Gráfica - Introdução
Computação Gráfica - Introdução
 
Sensores de Posição
Sensores de PosiçãoSensores de Posição
Sensores de Posição
 
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
 
Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2
Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2
Composição e Projeto Gráfico 2015 - Fundamentos básicos-do design-1/2
 
Introdução à teoria da interatividade
Introdução à teoria da interatividadeIntrodução à teoria da interatividade
Introdução à teoria da interatividade
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Computação Gráfica - Introdução
Computação Gráfica - IntroduçãoComputação Gráfica - Introdução
Computação Gráfica - Introdução
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 
Graphical User Interface (Gui)
Graphical User Interface (Gui)Graphical User Interface (Gui)
Graphical User Interface (Gui)
 

Semelhante a Evolução da GUI

User experience e a Evolução do Designer dos Sistemas Operacionais
User experience e  a Evolução do Designer dos Sistemas OperacionaisUser experience e  a Evolução do Designer dos Sistemas Operacionais
User experience e a Evolução do Designer dos Sistemas OperacionaisMonique Carvalho
 
Design de interação e Design da experiência considerações sobre um camp...
Design de interação e Design da experiência  considerações sobre um camp...Design de interação e Design da experiência  considerações sobre um camp...
Design de interação e Design da experiência considerações sobre um camp...UTFPR
 
Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Mauro Pinheiro
 
Retorno do Investimento em Usabilidade
Retorno do Investimento em UsabilidadeRetorno do Investimento em Usabilidade
Retorno do Investimento em UsabilidadeBernardo Mattos
 
Aula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileAula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileCloves da Rocha
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareFlavia Negrao
 
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
 
Teoria da interactividade
Teoria da interactividadeTeoria da interactividade
Teoria da interactividadeCarlos Barbosa
 
Sistemas operacionais e aplicativos
Sistemas operacionais e aplicativosSistemas operacionais e aplicativos
Sistemas operacionais e aplicativosguicabral6
 
Aula aplicativos I
Aula aplicativos IAula aplicativos I
Aula aplicativos IExpansão Ti
 
Embarcadero adquire Raize Components e apresenta novas soluções para desenv...
Embarcadero adquire Raize Components e apresenta novas soluções para desenv...Embarcadero adquire Raize Components e apresenta novas soluções para desenv...
Embarcadero adquire Raize Components e apresenta novas soluções para desenv...Fernando Rizzato
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Gustavo Fischer
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxGelvazioCamargo
 
O design de interação em ambientes de ubiqüidade computacional
O design de interação em ambientes de ubiqüidade computacionalO design de interação em ambientes de ubiqüidade computacional
O design de interação em ambientes de ubiqüidade computacionalMauro Pinheiro
 

Semelhante a Evolução da GUI (20)

User experience e a Evolução do Designer dos Sistemas Operacionais
User experience e  a Evolução do Designer dos Sistemas OperacionaisUser experience e  a Evolução do Designer dos Sistemas Operacionais
User experience e a Evolução do Designer dos Sistemas Operacionais
 
Design de interação e Design da experiência considerações sobre um camp...
Design de interação e Design da experiência  considerações sobre um camp...Design de interação e Design da experiência  considerações sobre um camp...
Design de interação e Design da experiência considerações sobre um camp...
 
Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...
 
O retorno do investimento no projeto adequado de interfaces de usuário
O retorno do investimento no projeto adequado de interfaces de usuárioO retorno do investimento no projeto adequado de interfaces de usuário
O retorno do investimento no projeto adequado de interfaces de usuário
 
Retorno do Investimento em Usabilidade
Retorno do Investimento em UsabilidadeRetorno do Investimento em Usabilidade
Retorno do Investimento em Usabilidade
 
Capitulo1
Capitulo1Capitulo1
Capitulo1
 
Aula 1 - Introdução ao Mobile
Aula 1 - Introdução ao MobileAula 1 - Introdução ao Mobile
Aula 1 - Introdução ao Mobile
 
A importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de softwareA importancia de IHC no desenvolvimento de software
A importancia de IHC no desenvolvimento de software
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
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
 
Teoria da interactividade
Teoria da interactividadeTeoria da interactividade
Teoria da interactividade
 
Sistemas operacionais e aplicativos
Sistemas operacionais e aplicativosSistemas operacionais e aplicativos
Sistemas operacionais e aplicativos
 
Restaurante
RestauranteRestaurante
Restaurante
 
Aula aplicativos I
Aula aplicativos IAula aplicativos I
Aula aplicativos I
 
Artigo ihc1
Artigo ihc1Artigo ihc1
Artigo ihc1
 
Realidade Aumentada - Sociesc 2011
Realidade Aumentada - Sociesc 2011Realidade Aumentada - Sociesc 2011
Realidade Aumentada - Sociesc 2011
 
Embarcadero adquire Raize Components e apresenta novas soluções para desenv...
Embarcadero adquire Raize Components e apresenta novas soluções para desenv...Embarcadero adquire Raize Components e apresenta novas soluções para desenv...
Embarcadero adquire Raize Components e apresenta novas soluções para desenv...
 
Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2Hipermídias_Design Gráfico_UNISINOS_aula2
Hipermídias_Design Gráfico_UNISINOS_aula2
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
O design de interação em ambientes de ubiqüidade computacional
O design de interação em ambientes de ubiqüidade computacionalO design de interação em ambientes de ubiqüidade computacional
O design de interação em ambientes de ubiqüidade computacional
 

Mais de Sebastião Ademir da Silva (12)

Design de Embalagens
Design de EmbalagensDesign de Embalagens
Design de Embalagens
 
Tipografia - Épocas e Estilos
Tipografia - Épocas e EstilosTipografia - Épocas e Estilos
Tipografia - Épocas e Estilos
 
Historia dos meios audiovisuais - Dir III
Historia dos meios audiovisuais - Dir IIIHistoria dos meios audiovisuais - Dir III
Historia dos meios audiovisuais - Dir III
 
Sobre video tv e cinema - Dir III
Sobre video tv e cinema - Dir IIISobre video tv e cinema - Dir III
Sobre video tv e cinema - Dir III
 
TUDO SOBRE REDES SOCIAIS
TUDO SOBRE REDES SOCIAISTUDO SOBRE REDES SOCIAIS
TUDO SOBRE REDES SOCIAIS
 
Design de icones
Design de iconesDesign de icones
Design de icones
 
Perfil Consumidor Mobile
Perfil Consumidor MobilePerfil Consumidor Mobile
Perfil Consumidor Mobile
 
Principais problemas de usabilidade
Principais problemas de usabilidadePrincipais problemas de usabilidade
Principais problemas de usabilidade
 
Checklist de usabilidade
Checklist de usabilidadeChecklist de usabilidade
Checklist de usabilidade
 
Tecnologia cultura e design
Tecnologia cultura e designTecnologia cultura e design
Tecnologia cultura e design
 
Ciberespaco e cibercultura
Ciberespaco e ciberculturaCiberespaco e cibercultura
Ciberespaco e cibercultura
 
Historia do design
Historia do designHistoria do design
Historia do design
 

Evolução da GUI

  • 2. Para compreendermos a fisionomia e o funcionamento da interface gráfica do usuário nos equipamentos eletrônicos atuais, precisamos verificar a evolução dos diferentes campos do design que a fizeram ser assim. GUI: Graphic User Interface DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO
  • 3. São 4 grandes áreas de evolução, nas quais estão contidos praticamente todos os elementos que encontramos em qualquer projeto de design digital. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO
  • 4. A evolução dos projetos de sinalização: a geração dos espaços transitáveis de informação (que podem ser lidos) até chegar ao ciberespaço. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO
  • 5. O desenvolvimento dos sistemas pictográficos para a transmissão da informação (design da informação): para compreender melhor o uso dos ícones nas aplicações da internet. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO
  • 6. Marcos históricos relacionados com a identidade visual, até hoje no mundo digital. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO
  • 7. A evolução tecnológica em termos de comunicação homem-máquina, isto é, a evolução da própria interface gráfica do usuário. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO
  • 8. O design deve saber administrar a informação e usar os sinais adequados no momento certo, no lugar exato e com o conteúdo preciso. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Orientar pessoas que se movem de um lugar para o outro. Orientar pessoas que transladam virtualmente em um sistema eletrônico de informações.
  • 9. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Departamento de transportes dos EUA encomenda a organização do sistema de símbolos destinados a passageiros, pedestres e usuários dos transportes. (pictogramas) 1974
  • 10. 1981 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO A Xerox apresenta o sistema operacional gráfico Star com interface gráfica, simplificando os movimentos do usuário e estabelecendo, pela primeira vez, uma série de ícones herdeiros dos sinais viários que funcionam como sinais para navegar pelo sistema.
  • 11. 1981 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Os ícones abrem espaços em forma de janelas: os espaços reais de nosso mundo começam a se estabelecer como espaços virtuais, de informação representados por metáforas e ícones.
  • 12. 1981 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Inspirou o designer de interface de usuário da Macintosh, Steve Jobs, para o desktop do Mac.
  • 13. 1982 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Uma equipe liderada por Steve Jobs desenvolveu uma interface “amiga do usuário” no computador Lisa, da Apple. Pela primeira vez foram utilizados os menus deslocáveis.
  • 14. 198 4 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Lançamento no mercado dos computadores Macintosh fez com que o seu sistema operacional representado graficamente pela metáfora do desktop se tornasse popular.
  • 15. 198 4 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Mudança na mentalidade dos usuários: a ideia de que a pessoa deveria adaptar-se ao computador foi substituída pela ideia de que a interface deveria facilitar as relações e tarefas a serem realizadas.
  • 16. 1986/8 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Projeto Habitat – Lucasfilm, consistia de comunidades virtuais acessíveis a milhares de computadores pessoais unidos entre si via modem.
  • 17. 1987 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Primeira aplicação que levaria os conceitos do hipertexto: o HyperCard para o Macintosh.
  • 18. 1987 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Atkinson utilizou o ícone de uma casa para representar a tela principal do programa e ficou padronizado de forma automática em todos os navegadores da internet para representar a ação "ir para a página inicial".
  • 19. 1990 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Primeira versão da interface gráfica da Microsoft, apesar de ter aparecido pela primeira vez em 1987. Essa versão demorou para tornar-se popular por causa da excessiva lentidão e grande instabilidade.
  • 20. 1991 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Lançada a WWW de Tim Berners-Lee
  • 21. 1993 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Projetado na Universidade de Illinois o primeiro navegador para a internet, o Mosaic.
  • 22. 1994 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Os ícones que aparecem nesses navegadores são imagens oriundas de pictogramas que utilizamos na sinalização tradicional.
  • 23. 1995 DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Lançado o primeiro navegador da Microsoft, o Internet Explorer, com muitos ícones numa tentativa de oferecer mais serviços.
  • 24. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Com o avanço da tecnologia e o uso de muitas telas de tamanhos diferentes, houve a necessidade do design criar uma solução para isso.
  • 25. DESENVOLVIMENTO DA INTERFACE GRÁFICA DO USUÁRIO Com o avanço da tecnologia e o uso de muitas telas de tamanhos diferentes, houve a necessidade do design criar uma solução para isso.