COMPONENTES

DESIGN SYSTEMS

o design de interfaces atual é todo baseado no design de componentes modulares que podem ser articulados nas aplicações para criar sua interface.

um componente pode ser apenas um elemento simples, como um botão, mas pode ser também um painel complexo que agregue diversos outros componentes dentro dele.

uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.

a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.

de forma muito resumida, podemos dizer que o design de interfaces hoje é feito do design de pequenos elementos, que vão se aglutinando para compor uma interface complexa, ou seja, um movimento projetual que inicia pelo elemento pontual e segue até o todo, garantindo consistência e coerência ao conjunto.

design de interfaces de
aplicações e serviços

para designers que realmente querem trabalhar com o design de interfaces

design de interfaces de
aplicações e serviços

para designers que realmente querem trabalhar com o design de interfaces

avanços e retrocessos na prática
do design de interfaces

2000

MACROMEDIA

DREAMWEAVER

FIREWORKS

misto de ferramenta gráfica vetorial e bitmap, capaz de recortar as composições visuais e construir um documento HTML, incluindo interações de mouseover e links para outros documentos.

editor visual de documentos HTML capaz de incluir e manipular os elementos básicos de layout (tabelas, formulários, textos, etc.) e gerar seu código em tempo real.

utilizado por designers e programadores para trabalharem juntos em projetos para a web.

DESIGN SYSTEMS

uma grande biblioteca de componentes disponíveis para o usos nas interfaces das aplicações de um serviço ou sistema, com a identidade visual deste serviço, constitui um design system.

a elaboração de um design system facilita o desenvolvimento das interfaces dos serviços e aplicações com elementos prontos para serem implementados nelas.

de forma muito resumida, podemos dizer que o design de interfaces hoje é feito do design de pequenos elementos, que vão se aglutinando para compor uma interface complexa, ou seja, um movimento projetual que inicia pelo elemento pontual e segue até o todo, garantindo consistência e coerência ao conjunto.

2005

ADOBE

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2000

DREAMWEAVER

FIREWORKS

misto de ferramenta gráfica vetorial e bitmap, capaz de recortar as composições visuais e construir um documento HTML, incluindo interações de mouseover e links para outros documentos.

editor visual de documentos HTML capaz de incluir e manipular os elementos básicos de layout (tabelas, formulários, textos, etc.) e gerar seu código em tempo real.

utilizado por designers e programadores para trabalharem juntos em projetos para a web.

2011

TWITTER

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2013

SKETCH + ZEPPELIN

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2013

SKETCH + ZEPPELIN

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

FIGMA

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

FIGMA

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

2017

FACEBOOK

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

2017

FACEBOOK

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)

todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2022

CODUX

o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.

com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2022

CODUX

o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.

com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2017

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)

todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
 

mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.

continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.​

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2017

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)

todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
 

mas o que são
essas coisas?

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2017

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)

todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
 

mas o que são
essas coisas?

o design de interface não se resume ao trabalho de planejamento gráfico

2000

2005

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2017

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)

todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
 

mas o que são
essas coisas?

avanços e retrocessos na prática
do design de interfaces

2000

MACROMEDIA

2005

ADOBE

todos os produtos acabaram, cedo ou tarde, descontinuados.

interfaces de produtos web voltaram a ser desenvolvidas diretamente por código em editores de código, assim como nos softwares desktop.

2011

TWITTER

BOOTSTRAP

convenção/framework de elementos para interfaces web que facilitava o desenvolvimento de aplicações e serviços com um comportamento padronizado, amplamente testado, e sem risco de problemas e dores de cabeça com redimensionamento de tela ou dispositivos com tamanhos diferentes.

o bootstrap permitiu que diversos softwares voltassem a trabalhar de forma visual, com a edição dos documentos arrastando os componentes para dentro deles, que também poderiam ser rearranjados dentro do layout.

com o bootstrap, as ferramentas podiam construir um código HTML limpo e funcional.
 

2013

SKETCH + ZEPPELIN

websites e aplicativos mobile passaram a ser desenhados em ferramentas vetoriais especializadas, como o Sketch.

desenvolvedores passaram a usar ferramentas de Handoff como o Zeppelin para obterem dados dos elementos gráficos, como cores e tamanhos.

tudo que era desenhado, precisava ser reconstruído com código.
 

FIGMA

criado pela antiga equipe de desenvolvimento da Macromedia, o Figma foi, aos poucos, substituindo o Sketch como ferramenta gráfica para o projeto de interfaces de aplicativos web e mobile.

a intenção inicial da equipe era criar algo que pudesse operar como o Dreamweaver originalmente o fazia, permitindo que o código das interfaces fosse criado na medida que eram desenhadas; mas a complexidade para isso já era muito grande, e este resultado nunca foi atingido.

o Figma também incluiu funções de Handoff, permitindo que desenvolvedores consultassem as propriedades dos elementos gráficos.

2016

2017

FACEBOOK

REACT

a elaboração de interfaces diferentes para cada plataforma (Apple, Android, web) tornava seu desenvolvimento muito trabalhoso e os resultados inconsistentes entre si.

ao mesmo tempo, a gestão e atualização dos elementos em tela em uma aplicação web era muito complexa, e ia piorando conforme novos elementos eram incorporados na interface.

a equipe do Facebook desenvolveu um framework para resolver todas estas questões de uma vez só, que aos poucos foi se tornando o padrão para desenvolvimento de todo tipo de interface.
 

o design das interfaces permaneceu sendo criado através de ferramentas gráficas especializadas que apenas desenhavam as telas e os componentes da interface, e entregavam propriedades sobre os elementos (cor, dimensões, alinhamentos, etc.)

todo o trabalho de construção da interface continuava sendo feito diretamente no código, como uma tradução integral do que os designers elaboravam nas ferramentas gráficas.
 

2022

CODUX

o Codux é a primeira ferramenta visual elaborada para trabalhar com projetos criados em React, permitindo que os componentes da interface possam ser construídos e alterados em um editor visual, capaz de gerar o código destes componentes.

com esta ferramenta, o trabalho realizado pelos designers se tornou totalmente integrado ao trabalho realizado pelos desenvolvedores.

mas mesmo com um editor visual, todo o desenvolvimento de interfaces continua centrado no desenvolvimento de código.

continua sendo necessário muita experiência com HTML e CSS, e familiaridade com Javascript, para se trabalhar com React.​

NODE

interpretador de javascript fora do navegador, utilizado para executar programas escritos em javascript no próprio computador (como aplicações), ou para rodar programas em javascript em alguns servidores web.

é o node quem executa todo o código que monta a interface da aplicação React, construída a partir de diversos componentes escritos em javascript.

node é uma ferramenta de linha de comando. para poder usá-la, ou usar React, é necessário instalá-la no seu computador; também é necessário que o servidor onde seu código será disponibilizado possua o interpretador instalado (nem todos os webservers possuem, e nem todos os provedores de hospedagem disponibilizam node em seus serviços).

o design de interface não se resume ao trabalho de planejamento gráfico

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

NPM

gerenciador de pacotes do node.

é a ferramenta do próprio node que faz download e organiza todo o framework React para cada projeto que você iniciar, além das bibliotecas e recursos que seu projeto for dependente.

também é a ferramenta que roda um servidor web no seu computador para que você possa ver os resultados daquilo que está fazendo no seu navegador.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

NEXT
VITE
WEBPACK

complementos ao React, que ampliam o que ele faz para permitir a construção de aplicações de qualquer tamanho, e facilitar os processos de como elas são articuladas ou implementadas nos servidores.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

GIT

ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.

o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

GITHUB
GITLAB

sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

NODE + NPM

NEXT / VITE / WEBPACK / PARCEL / ETC.

GIT

GITHUB / GITLAB

React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.

Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

DISPONIBILIZAÇÃO

com a aplicação concluída, ela precisará ser disponibilizada ao público. Para isso, é necessário colocá-la em um servidor web.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

SISTEMA DE VERSIONAMENTO

GITHUB
GITLAB

VERCEL
AWS
RENDER
NETLIFY
SURGE

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

e o que exatamente
é o React?

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

REACT

WEBSERVER

SISTEMA DE VERSIONAMENTO

GITHUB
GITLAB

VERCEL
AWS
RENDER
NETLIFY
SURGE

geramente se utiliza uma hospedagem que suba o código de produção automaticamente de um dos sistemas de versionamento utilizados.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

esse javascript não está
um pouco diferente?

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

GIT

ferramenta de versionamento de código que guarda todas as alterações feitas, e permite que se abram variações do mesmo código para experimentação.

o Git é uma ferramenta de linha de comando que precisará ser instalada no seu computador, mas que não precisa existir no servidor onde seu código será executado.

GITHUB
GITLAB

sistemas de versionamento de código online que se conectam ao Git no seu computador, e permitem que os códigos possam ser compartilhados com uma equipe, e que as mudanças feitas por uma pessoa estejam disponíveis para todos.

NODE + NPM

NEXT / VITE / WEBPACK / PARCEL / ETC.

GIT

GITHUB / GITLAB

REACT

React é um framework que funcionará em cima de todo este conjunto de ferramentas; se você não possuir esta infraestrutura instalada, não conseguirá desenvolver nem executar uma interface construída com React.

Todas são ferramentas de linha de comando, e por mais que não seja necessário seu domínio pleno, mesmo um designer precisará ter uma noção básica de cada uma delas para que possa atuar em um projeto com React, até se ele for utilizar um editor visual como o Codux.

REACT

SISTEMA DE VERSIONAMENTO

GITHUB
GITLAB

SIM!

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?

REACT

SISTEMA DE VERSIONAMENTO

GITHUB
GITLAB

MÓDULOS

os módulos permitem que funções em um documento javascript possam ser exportadas para serem utilizadas em outros documentos, através de um import.

JSX

a biblioteca JSX permite que as funções retornem ou recebam tags HTML sem a necessidade de estarem dentro de uma string.

isto facilita a construção do código html.

TYPESCRIPT

typescript é uma forma de javascript que permite a definição de tipos para as variáveis.

o framework permite que se utilize código typescript no lugar do javascript.

avanços e retrocessos na prática
do design de interfaces

MACROMEDIA

ADOBE

CODUX

ferramentas de linha de comando para gestão e versionamento de código como o Git e o Github, e de gerenciamento de pacotes como o NPM, continuam sendo parte do fluxo de trabalho, mesmo para os designers.
 

mas o que são
essas coisas?