Tudo o que você precisa saber sobre plataformas de design de produtos digitais

Nos últimos anos, surgiu um novo e empolgante conceito de produto para descrever todas as fases da criação de um produto digital: a plataforma de design de produto digital. Neste blog, analisaremos mais profundamente essa nova categoria de ferramentas de design digital e como ela difere de outras ferramentas de design e prototipagem, como Sketch e Figma, entre outras.

Para entender o que uma plataforma de design de produto digital oferece, primeiro é útil olhar de forma mais ampla para todo o processo de design de produto digital. Quais são as principais partes desse processo e como elas estão sendo abordadas agora? Então, podemos olhar mais de perto o papel crítico que prevemos que as plataformas de design de produtos digitais desempenhem à medida que avançamos.

O que é Design de Produto Digital?

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

Por exemplo, a Adobe descreve seu software Adobe XD como "uma plataforma de design de experiência baseada em vetor poderosa e fácil de usar que oferece às equipes as ferramentas necessárias para criar as melhores experiências do mundo de forma colaborativa".

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

E Sketch foi descrito como "o lar de todo o seu processo de design colaborativo. Das primeiras ideias à arte perfeita em pixels, protótipos jogáveis e transferência de desenvolvedores."

Preenchendo o abismo: Transferência de designer-desenvolvedor

Observe acima a frase casualmente lançada no final da última frase: transferência do desenvolvedor. Essa parte do processo é muitas vezes tratada como uma reflexão tardia, enquanto, na realidade, trabalhar com equipes de desenvolvimento é essencial para a criação bem-sucedida de aplicativos. Muitas vezes, é uma grande fonte de frustração, perda de tempo e bugs e erros de UX.

Leia mais sobre isso no Guia para a Transferência de Designer-Desenvolvedor.

Parte do problema é que quanto mais o designer faz com uma interface do usuário, mais ele deve se comunicar com um desenvolvedor. Portanto, não basta entregar um arquivo de design Sketch, por exemplo, e deixar o desenvolvedor executá-lo. Os designers devem fornecer especificações de design que expliquem como todas as peças móveis precisam ser dispostas, espaçadas, estilizadas, coloridas, engajadas e assim por diante. Tem sido a única maneira de garantir que um aplicativo termine perfeito em pixels no final. Mesmo assim, ainda requer muito trabalho de implementação por parte do desenvolvedor, uma vez que ele está dentro de seu IDE.

Juntando tudo: a plataforma de design de produto digital

Uma plataforma de design de produto digital fornece uma plataforma única que atua como um "multiplicador de força", incluindo todas as etapas necessárias para projetar e produzir um aplicativo acabado: design de tela, fluxos de usuário, prototipagem, teste 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 transferências que arrastam a maioria dos esforços de criação de aplicativos porque é uma plataforma integrada.

Uma plataforma de design de produto digital resulta em uma saída gerada por código com pixels perfeitos. Você vai do design baseado em vetor para HTML, CSS e TypeScript utilizáveis – eliminando a necessidade de os desenvolvedores decifrar uma composição de design para criar código viável.

A base de uma plataforma de design de produto digital é um sistema de design. Um sistema de design, em termos simples, representa um inventário deliberado 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 a criação de aplicativos de software. Ele serve como uma única fonte de verdade para as equipes de produto ao criar aplicativos com pouco código e representa um contrato de colaboração entre design e desenvolvimento.

Elementos de uma plataforma de design de produto digital

Aqui estão os elementos que definem amplamente uma plataforma de design de produto digital:

Design de tela

Há muita coisa envolvida no design da tela, que se refere ao design gráfico e ao layout das interfaces do usuário nos monitores. Layout é a estrutura que suporta os componentes visuais de uma interface. No design de tela, o foco está em maximizar a usabilidade e a experiência do usuário, tornando a interação do usuário o mais simples e eficiente possível.

Leia Fundamentos de layout no design da interface do usuário (UI) para obter uma boa visão geral deste tópico.

Observe que algumas plataformas de design de produtos digitais simplificam essa etapa integrando designs de interface do usuário de programas de design como Sketch ou Adobe, ou oferecem modelos pré-criados para ajudar a acelerar o processo.

O importante é que, seja um arquivo Sketch ou um modelo pré-criado, os arquivos sejam integrados ao sistema de design da plataforma e aos componentes da interface do usuário- isso é fundamental para a aceleração dramática da criação de aplicativos. Os designs criados em torno de componentes reais da interface do usuário permitem que os desenvolvedores gerem código sem transferências e longas idas e vindas com os designers.

Fluxos de usuário

Os fluxos do usuário são diagramas que exibem o caminho que um usuário percorre ao usar um produto. O fluxo do usuário apresenta o movimento do usuário pelo produto, mapeando cada etapa que o usuário executa, geralmente desde o ponto de entrada até a interação final.

Prototipação

Um protótipo é uma maquete da solução que você deseja criar. Você pode simular cada interação e visualização para que possa ser experimentada 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 construído com App Builder ™ de baixo código. Inclui todas as capturas de tela que foram importadas de arquivos de imagens e de Sketch pranchetas. Como você pode ver, os fluxos de usuário são simples de criar clicando e arrastando para criar um ponto de acesso e, em seguida, vinculando a uma tela de destino, que você pode editar facilmente selecionando outras telas no fluxo do usuário. Você também pode editar várias opções de transição, como deslizar, pressionar e segurar, toques duplos e muito mais.

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

Teste de usuário

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

Colaboração e Co-Edição (HTML, CSS e Marcação de Código)

Esta é a fase em que designers, gerentes de produto e desenvolvedores se envolvem 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. Lembre-se de que, embora o diagrama mostre essa fase em um fluxo linear, é uma fase altamente interativa que deve ocorrer com frequência. 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 ficarão em um aplicativo concluído ou como os fluxos do usuário podem se sentir depois que o código for 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 produto digital é 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 do produto. Embora grande parte da história em torno das plataformas de design de produtos digitais seja em torno da "fase de design" do processo (prototipagem, teste 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 seus processos (como Sketch, Figma ou Adobe XD).
• Uma caixa de ferramentas cheia de componentes de interface do usuário que são mapeados para componentes e padrões de interface do usuário no sistema de design e em kits de interface do usuário.
• Os painéis do editor de configuração/propriedades são usados para configurar facilmente os componentes e definir as 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 que você se conecte a qualquer fonte de dados REST ou a outras fontes de dados comuns.
• Opções de tema, incluindo temas integrados e um construtor de temas personalizado para corresponder a qualquer experiência de cliente ou marca que você precisar.

A chave para uma experiência eficaz de criação de aplicativos é permitir que as várias equipes que usam a plataforma de design de produtos digitais continuem a usar os aplicativos que amam – e nos quais são mais produtivas. Isso significa que plataformas como essa devem se integrar bem com ferramentas de design baseadas em vetor que são ótimas na criação de tela estática e prototipagem limitada, bem como ferramentas de desenvolvedor como Visual Studio ou Visual Studio Code, onde os desenvolvedores se sentem mais à vontade para escrever código.

Geração de código (controle de código-fonte e editores de código)

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

Como é App Builder uma plataforma de design de produto digital?

Entre os principais atributos que a Infragistics traz para este novo conceito de plataforma e que a diferenciam de outras plataformas está nossos 30 anos de experiência no desenvolvimento e implantação de kits de ferramentas de interface do usuário e componentes de interface do usuário. Muitas das principais empresas da Fortune 500 confiam em nossas grades e gráficos todos os dias para lidar com transações financeiras em tempo real, conversão de energia para infraestrutura de grande escala ou streaming de dados de IoT.

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

Para resumir alguns de App Builder principais benefícios:

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

Para uma perspectiva diferente, consulte nosso whitepaper, 4 razões pelas quais você precisa de uma plataforma de design de produto digital.