Categorias do Site

História do Design UX, UI e de Produtos

Explore a evolução do design UX, UI e de produtos desde a web inicial até as tendências atuais.

Smartphone sobre superfície branca exibindo definição da palavra

Na manhã de hoje, me vi respondendo a uma pergunta sobre a diferença entre UX, UI e Design de Produtos em um grupo de liderança de design no Slack. Embora muitos de nós estejamos cansados dessas discussões, elas continuam ocorrendo, o que indica que a confusão persiste. Decidi abordar o tema com um contexto histórico, voltando aos primórdios da web.

Design e a web inicial

Nos primeiros dias da web, os sites eram criados por uma única pessoa, levando os web designers a serem profissionais multidisciplinares com forte conhecimento técnico. À medida que a capacidade da web permitia um design visual mais sofisticado, houve uma divisão entre Design Visual e Desenvolvimento Front-End.

Com o aumento da complexidade dos sites, surgiram novos problemas, como a estruturação de sites em grande escala e a interação dos usuários com elementos como botões e formulários. Isso levou ao surgimento de disciplinas como Arquitetura da Informação, Design de Interação e Pesquisa de Usuário.

A ascensão do design UX

O papel do Designer de UX emergiu para cobrir áreas como Arquitetura da Informação e Design de Interação. Com o crescimento da web, as equipes aumentaram, permitindo maior especialização. Designers de UX começaram a se concentrar mais no Design de Interação e Visual, enquanto Designers de UI se aproximavam do Design de Interação e UX.

O Design de UI é mais fácil de aprender por conta própria, enquanto o Design de UX requer pesquisa de usuário e prototipagem. Isso significa que muitos novos designers começam com um viés em UI e Design de Interação, expandindo suas habilidades em UX ao longo do tempo.

A entrada do design de produtos

Com o surgimento dos aplicativos móveis, as diretrizes de interface e componentes pré-desenhados reduziram a necessidade de Designers de UX. O trabalho se tornou a montagem de componentes existentes em fluxos de usuário, exigindo habilidades de Design de Interação, especialmente animação, para melhorar a interação em telas menores.

Designers começaram a se interessar por como seu trabalho afetava o crescimento, adotando conceitos como gamificação. Influenciados pelo Vale do Silício, o termo Designer de Produto tornou-se popular.

Designer UX/UI vs. Designer de Produto

Hoje, há uma grande sobreposição entre Designers de Produto e Designers UX/UI. A diferença está no histórico e no tipo de trabalho realizado, além de uma sutileza na abordagem de suas funções. Designers UX/UI tendem a focar nas necessidades do usuário, enquanto Designers de Produto equilibram necessidades do usuário e do negócio. No entanto, essa diferença está diminuindo e deve-se avaliar cada caso individualmente.

O artigo foi publicado originalmente no Medium.

Imagem destacada cortesia: Edho Pratama.

  • Dicas para Hospedar Sites WordPress de Clientes

    Descubra como hospedar sites WordPress de clientes com eficiência e segurança, garantindo desempenho e receita recorrente.

    Descubra como hospedar sites WordPress de clientes com eficiência e segurança, garantindo desempenho e receita recorrente.

    Ler notícia completa
  • Criando Landing Pages com a Regra dos Terços

    Aprenda a aplicar a regra dos terços em landing pages para criar designs mais atraentes e aumentar as taxas de conversão.

    Aprenda a aplicar a regra dos terços em landing pages para criar designs mais atraentes e aumentar as taxas de conversão.

    Ler notícia completa
    Fundo abstrato com tons dourados e luminosos, sobreposto por um ícone azul de grade com nove quadrados.
  • Novas Ferramentas de Design para Junho de 2025

    Descubra as novas ferramentas de design com IA para otimizar seu fluxo de trabalho e criar projetos inovadores.

    Descubra as novas ferramentas de design com IA para otimizar seu fluxo de trabalho e criar projetos inovadores.

    Ler notícia completa
    Divisão de imagem em duas partes: à esquerda, lata de Red Bull com neve ao fundo; à direita, homem rindo segurando lata de refrigerante vermelha, em fundo azul.
  • Comparando as principais bibliotecas React toast

    No desenvolvimento de aplicativos, é comum exibir mensagens importantes para os usuários de acordo com suas ações ou condições. As notificações toast são uma ótima maneira de fazer isso, pois são leves e não interrompem a experiência do usuário. Embora você possa criar suas próprias notificações toast personalizadas em React, usar uma biblioteca pré-construída com […]

    Descubra as melhores bibliotecas de toast para React em 2025 e escolha a ideal para seu projeto.

    Ler notícia completa
    Mãos inserindo torradas em uma torradeira, sobrepostas por um ícone de átomo azul.
  • IA Agentica: Decisões Autônomas em Empresas

    Com o surgimento da IA agentica, empresas têm a oportunidade de implementar decisões autônomas em suas operações. Essa transformação promete melhorar a eficiência ao reestruturar processos de negócios. Um relatório da Deloitte prevê que, este ano, um quarto das empresas que usam IA generativa iniciarão pilotos de IA agentica, com crescimento para 50% até 2027. […]

    Empresas adotam IA agentica para decisões autônomas, prometendo eficiência e redução de custos operacionais.

    Ler notícia completa
    Textura de superfície escura com manchas verdes e azuis brilhantes sobre um fundo preto e texto sobre inteligência artificial.
  • TanStack Start ou Next.js: Escolha o melhor framework React

    O ecossistema React está em constante evolução, com novas bibliotecas e frameworks expandindo os limites de desempenho e flexibilidade. Por anos, o Next.js tem sido a escolha principal para construir aplicações full-stack em React, graças ao seu suporte integrado para renderização do lado do servidor (SSR), geração de sites estáticos (SSG) e roteamento baseado em […]

    Comparação entre TanStack Start e Next.js: conheça suas diferenças e escolha o framework React ideal para seu projeto.

    Ler notícia completa
    Imagem apresenta dois ícones sobre fundo azul em degradê: à esquerda, um ícone de praia tropical com palmeira; à direita, um ícone preto com a letra N. Texto
  • Guia Completo de Técnicas de Design UX

    O design UX pode ser confuso com tantas tarefas a realizar, mas é essencial acertar nas técnicas de design. Este guia apresenta as técnicas de design mais utilizadas no UX, desde a pesquisa de usuários até a prototipagem e testes. O primeiro passo é entender profundamente seus usuários. Técnicas de pesquisa incluem entrevistas, pesquisas, estudos […]

    Aprenda técnicas essenciais de UX Design para melhorar a experiência do usuário, desde pesquisa até prototipagem.

    Ler notícia completa
    Ícones de paleta de design gráfico em tons de rosa e roxo sobre um fundo rústico e texturizado de cor clara.
  • Inclua pesquisa para um design mais inclusivo

    O design inclusivo não começa em um arquivo do Figma ou em um caderno de esboços. Ele começa bem antes disso — com a compreensão dos usuários, para que você possa criar soluções que realmente funcionem para eles. Esse tipo de percepção não acontece por acaso; é necessário pesquisa intencional e inclusiva. Não se preocupe […]

    Design inclusivo começa com pesquisa inclusiva. Saiba como integrar inclusão no UX desde o início.

    Ler notícia completa
    Prancheta com gráfico de pizza e lista de tarefas, flutuando sobre um fundo roxo e azul ondulado com reflexos de luz.
  • Construção de UI com Google Stitch: Futuro do Frontend?

    O Google Stitch é uma ferramenta de design e desenvolvimento de UI impulsionada por IA que permite gerar designs de UI de qualidade profissional e código-fonte para web e mobile a partir de comandos de texto. O coding por “vibe” envolve o uso de IA para construir aplicações via prompts, sendo eficaz para design. Vamos […]

    Descubra como o Google Stitch pode revolucionar o design de interfaces com IA, gerando códigos e designs responsivos para web e mobile.

    Ler notícia completa
    Logo colorido do Google ao lado de um carretel de madeira com linha preta e agulha, sobre fundo branco.