Guia Para Plataformas de Design de Produtos Digitais

Nos últimos anos, um novo e interessante conceito de produto emergiu para descrever todas as fases da criação de um produto digital: a plataforma de design de produtos digitais. Neste blog, vamos analisar mais a fundo essa nova categoria de ferramentas de design digital e como ela se diferencia de outras ferramentas de design e prototipagem, como Sketch e Figma, entre outras.

Para entender o que uma plataforma de design de produtos digitais oferece, é útil primeiro observar o processo geral de design de produtos digitais. Quais são as partes-chave desse processo e como estão sendo abordadas agora? Depois, podemos examinar mais de perto o papel crítico que as plataformas de design de produtos digitais devem desempenhar a partir de agora.

Experimente App Builder Experimente App Builder Experimente App Builder

Solicitar Demonstração

O Que é Design de Produtos Digitais?

Se você pesquisar design digital ou design de produtos digitais ou processo de design de produtos digitais, a maioria dos resultados de pesquisa se concentrará em conceitos como mockups, wireframes ou protótipos com menções passageiras do resultado final do design de produtos: geração de código e um aplicativo realmente funcional.

Por exemplo, Adobe descreve seu software Adobe XD como “uma plataforma poderosa e fácil de usar para design de experiências baseada em vetores que oferece aos times as ferramentas necessárias para criar as melhores experiências do mundo colaborativamente.”

Wikipedia descreve Figma como “um editor de gráficos vetoriais e ferramenta de prototipagem que é principalmente baseada na web, com recursos offline adicionais habilitados por aplicativos desktop para macOS e Windows. O conjunto de recursos de Figma se concentra no uso em design de interface do usuário e design de experiência do usuário, com ênfase em colaboração em tempo real.

E Sketch foi descrito como “o lar para todo o seu processo de design colaborativo. De ideias iniciais a trabalhos de arte pixel-perfeitos, protótipos reproduzíveis e entrega para desenvolvedores.”

Preenchendo o Abismo: Entrega Designer-Desenvolvedor

Observe acima a frase casualmente inserida no final da última frase: entrega para desenvolvedores. Essa parte do processo é frequentemente tratada como algo secundário quando, na realidade, trabalhar com equipes de desenvolvimento é essencial para o sucesso da criação de aplicativos. Frequentemente é uma grande fonte de frustração, tempo perdido e bugs e erros de UX.

Leia mais sobre isso no Guia para a Entrega Designer-Desenvolvedor.

Parte do problema é que quanto mais o designer faz com uma interface, mais ele precisa se comunicar com um desenvolvedor. Portanto, não é suficiente entregar um arquivo de design do Sketch, por exemplo, e deixar o desenvolvedor continuar de lá. Os designers devem fornecer especificações de design que expliquem como todas as peças precisam ser dispostas, espaçadas, estilizadas, coloridas, com as quais interagir e assim por diante. Tem sido a única maneira de garantir que um aplicativo termine pixel-perfeito. Mesmo assim, ainda requer muito trabalho de implementação por parte do desenvolvedor uma vez que ele está dentro de seu IDE.

Reunindo Tudo: A Plataforma de Design de Produtos Digitais

Uma plataforma de design de produtos digitais fornece uma plataforma única que funciona como um “multiplicador de força” ao incluir todas as etapas necessárias para projetar e produzir um aplicativo finalizado: design de tela, fluxos de usuário, prototipagem, testes de usuário, colaboração, criação de aplicativos, geração de código, e sistema de design. Como você pode ver no diagrama, certas etapas pertencem à equipe de design enquanto outras pertencem à equipe de desenvolvimento. O valor da plataforma é que ela elimina os silos e as entregas que prejudicam a maioria dos esforços de criação de aplicativos porque é uma plataforma integrada.

Uma plataforma de design de produtos digitais resulta em saída pixel-perfeita gerada por código. Você vai do design baseado em vetores para HTML, CSS e TypeScript utilizáveis – eliminando a necessidade de os desenvolvedores decifrarem um comp de design para criar código funcional.

O fundamento de uma plataforma de design de produtos digitais é um sistema de design. Um sistema de design, em termos simples, representa um inventário intencional de padrões de UX e guias de estilo de marca que são então realizados como componentes de software correspondentes que podem ser reutilizados ou contextualizados para criar aplicativos de software. Ele serve como uma fonte única da verdade para equipes de produtos ao criar aplicativos com low code e representa um contrato de colaboração entre design e desenvolvimento.

Elementos de uma Plataforma de Design de Produtos Digitais

Aqui estão os elementos que definem amplamente uma plataforma de design de produtos digitais:

Design de Tela

Há muito envolvido no design de tela, que se refere ao design gráfico e layout das interfaces de usuário em telas de exibição. O layout é a estrutura que suporta os componentes visuais de uma interface. No design de tela, o foco é em maximizar a usabilidade e a experiência do usuário, tornando a interação do usuário tão simples e eficiente quanto possível.

Leia Fundamentos do Layout no Design de Interface do Usuário (UI) para uma boa visão geral deste tópico.

Observe que algumas plataformas de design de produtos digitais simplificam essa etapa ao integrar designs de interface de programas de design como Sketch ou Adobe, ou oferecem modelos pré-construídos para ajudar a acelerar o processo.

O que é importante é que, seja um arquivo do Sketch ou um modelo pré-construído, os arquivos sejam integrados com o sistema de design e componentes de interface do usuário da plataforma — isso é crítico para a aceleração dramática da criação de aplicativos. Designs construídos com componentes de interface reais permitem que os desenvolvedores gerem código sem entregas e longas trocas com designers.

Fluxos de Usuário

Fluxos de usuário são diagramas que mostram o caminho que um usuário segue ao usar um produto. O fluxo de usuário apresenta o movimento do usuário através do produto, mapeando cada etapa que o usuário segue — frequentemente do ponto de entrada até a interação final.

Prototipagem

Um protótipo é um mockup da solução que você deseja criar. Você pode criar mockups de cada interação e visualização para que possa ser experimentado da mesma maneira que um produto totalmente desenvolvido sem envolver um desenvolvedor.

Abaixo está um protótipo real de um aplicativo de orçamento doméstico criado com App Builder™ de baixo código. Inclui todas as capturas de tela que foram importadas de arquivos de imagem e quadros artísticos do Sketch. Como você pode ver, fluxos de usuário são simples de criar clicando e arrastando para criar um hotspot e depois vinculando a uma tela de destino, que você pode editar facilmente selecionando outras telas no fluxo de usuário. Você também pode editar várias opções de transição, como deslizar, pressionar e manter, toques duplos e muito mais.

Este protótipo criado com App Builder mostra os fluxos de usuário entre capturas de tela e as interações do usuário.

Testes de Usuário

A única maneira de garantir que seus designs existentes, protótipos e aplicativos envolvam seus usuários pretendidos de forma eficaz é testá-los. A fase de testes de usuário permite testar com usuários reais e coletar insights para que você possa otimizar a usabilidade antes de escrever qualquer código, garantindo que seus aplicativos brilhem com a melhor UX possível.

Colaboração e Coedição (HTML, CSS e Marcação de Código)

Esta é a fase em que designers, gerentes de produtos e desenvolvedores se envolvem mutuamente com colaboração visual em tempo real e coedição de ativos para promover precisão, qualidade, comunicação e inovação em toda a equipe de produtos digitais. Tenha em mente que, embora o diagrama mostre essa fase em um fluxo linear, é uma fase altamente interativa que deve ocorrer frequentemente. Em vários pontos durante o design, um membro da equipe pode começar a colaborar com a equipe de desenvolvimento em várias questões, como como as ideias de layout de tela aparecerão em um aplicativo concluído ou como os fluxos de usuário podem parecer uma vez que o código é gerado.

Criação de Aplicativos (Ferramentas de Baixo Código, Integração de Dados)

Um dos recursos mais procurados em uma plataforma de design de produtos digitais é a construção real de código utilizável, pronto para produção e testável que uma equipe de desenvolvimento pode usar para acelerar a entrega de produtos. Embora grande parte da narrativa sobre plataformas de design de produtos digitais seja sobre a ‘fase de design’ do processo (prototipagem, testes de usuário, documentação, etc.), obter código real e utilizável é onde a maior parte do tempo e dinheiro é gasto no processo de desenvolvimento de aplicativos. As equipes podem reduzir essa despesa com ferramentas que incluem recursos como:

• IDE focado no desenvolvedor que é como o que os designers usam em seu processo (como Sketch, Figma ou Adobe XD).
• Uma caixa de ferramentas cheia de componentes de interface que mapeiam para componentes de interface e padrões no sistema de design e em kits de interface.
• Os painéis do editor de configuração/propriedade são usados para configurar facilmente componentes e definir propriedades de vinculação de dados.
• Exibições hierárquicas de suas páginas mestras e subpáginas que compõem seus aplicativos de página única, completas com um contorno navegável do design da tela.
• Opções de fontes de dados que permitem conectar a qualquer fonte de dados REST ou outras fontes de dados comuns.
• Opções de tema, incluindo temas integrados e um construtor de tema personalizado para corresponder a qualquer experiência de cliente ou marca que você exija.

A chave para uma experiência eficaz de criação de aplicativos é permitir que os vários times que usam a plataforma de design de produtos digitais continuem usando os aplicativos que amam – e nos quais são mais produtivos. Isso significa que plataformas como essa devem se integrar bem com ferramentas de design baseadas em vetores que são ótimas para criação de telas estáticas e prototipagem limitada, bem como com ferramentas de desenvolvedor como Visual Studio ou Visual Studio Code, onde os desenvolvedores se sentem mais confortáveis escrevendo código.

Geração de Código (Controle de Fonte e Editores de Código)

Converta designs de tela e protótipos em código da camada de apresentação pronto para produção (HTML/CSS/JavaScript — incluindo React e Angular).

Como App Builder é uma Plataforma de Design de Produtos Digitais?

Entre os principais atributos que Infragistics traz para este novo conceito de plataforma e que a diferenciam de outras plataformas está nossa experiência de 30 anos desenvolvendo e implantando kits de interface e componentes de interface. Muitas das principais empresas Fortune 500 confiam em nossas grades e gráficos todos os dias para lidar com transações financeiras em tempo real, alimentar conversão para infraestrutura em larga escala ou transmitir dados de IoT.

Geramos código limpo, pronto para produção, que é utilizável, depurável e pode passar no teste do tempo. E você obtém o pacote completo, compatibilidade com ferramenta de design, sistemas de design, kits de interface, prototipagem, testes de usuário e geração de código 100% pronta para produção.

Para resumir alguns benefícios-chave do App Builder:

• A plataforma funciona com as ferramentas de design vetorial favoritas de um designer como Sketch, com suporte completo para Figma.
• Permite colaboração com a equipe de design-desenvolvedor, partes interessadas e clientes em iterações de design através de espaços de trabalho seguros com comentários encadeados em qualquer protótipo.
• Inclui testes não moderados remotos e ilimitados com análises em tempo real.
• Fornece uma ferramenta Inspeção (assim como Zeplin) para obter CSS, cores e código de tamanho/posicionamento de seus designs.
• Oferece uma experiência completa de criação de aplicativo WYSIWYG, com visualização de código em tempo real e geração de código para Angular e, em breve, para React, Web Components e Blazor.

Para uma perspectiva diferente, veja nosso whitepaper, 4 Razões Pelas Quais Você Precisa de uma Plataforma de Design de Produtos Digitais.

Desenvolvimento Web