Como gerar software com bom design?
Introdução
Vivemos tempos de imediatismo, onde as mudanças e evoluções tecnológicas são uma constante.
Para enfrentar esses desafios, as empresas exigem cada vez mais software, mas não apenas qualquer software, mas software que lhes permita transformar sistemas desatualizados com segurança ou construir e manter ecossistemas digitais de maneira rápida, fácil e à prova de futuro.
Nesta cruzada, o design assumiu um papel fundamental.
No mundo do software, o design engloba não apenas a estética, mas também o fluxo de interações entre o usuário e as diversas telas e plataformas. Tudo deve ser claro, coerente e consistente, para que a aplicação fique uniforme.
Os aplicativos de hoje não podem mais ser pensados como um produto criado por desenvolvedores de software, mas sim por equipes multidisciplinares que envolvem também designers visuais e de interação.
Para o Gartner , é importante criar e manter práticas eficazes de DesignOps (operações de design) que permitam alinhamento operacional, colaboração profunda e inovação contínua dos produtos.
“As empresas que trabalham com DesignOps, têm vantagem competitiva em relação às que não possuem essas práticas. Fechar a lacuna entre design e desenvolvimento é um ponto que não deve continuar sendo uma tarefa pendente. GeneXus tem ótimas ferramentas e práticas para que nossos usuários superem esses desafios da melhor maneira possível”, diz Gabriel Simonet, Diretor de Marketing (CMO) de GeneXus.
Este whitepaper é um guia prático para gerar software de qualidade, com rapidez e bom design.
A Nielsen Norman Group, empresa de consultoria fundada por Norman e o engenheiro de interface Jakob Nielsen, acredita que o primeiro requisito para uma UX exemplar é atender às necessidades exatas do cliente, sem complicações ou aborrecimentos. Depois vem a simplicidade e elegância que produzem produtos que são uma alegria de possuir e usar. “Para alcançar uma experiência de usuário de alta qualidade nas ofertas de uma empresa, deve haver uma fusão perfeita de serviços de várias disciplinas, incluindo engenharia, marketing, design gráfico e industrial e design de interface.”
Em suma, a UX abrange todos os aspectos da interação do usuário final com a empresa, seus serviços e seus produtos.
O seu objetivo é satisfazer as necessidades e otimizar a experiência dos usuários, dentro das limitações técnicas ou comerciais relevantes.
Os temas comuns de Design de Interação incluem design, interação humano-computador e desenvolvimento de software.
O especialista em design de produto digital Nathan Curtis, acrescenta que “um Design System é composto por uma biblioteca, estilo visual, componentes e outros elementos que foram documentados e lançados por um indivíduo, equipe ou comunidade como código e ferramentas de design, de tal forma que os produtos que a adotam sejam mais eficientes e coesos.
É importante entender que os Design Systems não são universais. Embora compartilhem consenso, são definidos para cada produto ou família de produtos digitais. Eles também dependem das ferramentas que o software possui.
Nielsen Norman Group define DesignOps como “a orquestração e otimização de pessoas, processos e arte para ampliar o valor e o impacto do design em escala”
O termo é usado para abordar desafios como:
→ Procura e contratação de pessoas com competências relacionadas com essa área.
→ Criação de fluxos de trabalho eficientes para melhorar a qualidade e o impacto dos resultados do projeto.
Seu objetivo é estabelecer processos e medidas que suportem soluções escaláveis para esses desafios, para que os designers também possam se concentrar no design e na pesquisa.
DesignOps se aplica a qualquer pessoa que usa processos de pensamento de design centrados no usuário para resolver problemas. O termo ‘designer’ inclui designers de UX, pesquisadores de usuários, designers visuais, estrategistas de conteúdo, designers de serviços, designers de comunicação e qualquer outra pessoa que contribua para a experiência do usuário final.
As 3 áreas principais nas quais o DesignOps se concentra são:
→ Como os membros da equipe interagem uns com os outros.
→ Como a equipe faz seu trabalho.
→ Como esse trabalho gera impacto.
2: EPadronizar os processos necessários para executar o trabalho
3: Implementar o design
4: Testar
No processo de criação de um produto digital, todos os papéis são elementares, mas é na interação entre o designer e o desenvolvedor que reside o sucesso ou o fracasso da interface e UX.
“Nesse trecho é onde corre o maior risco de perder qualidade. Designers e desenvolvedores usam diferentes ferramentas de trabalho; e quando essas ferramentas não estão integradas, há uma grande probabilidade de que o desenvolvedor tenha que repetir tarefas que o designer já considerou resolvidas e finalizadas”, explica Fabián Bonilla, especialista em consultoria, suporte técnico e treinamento GeneXus.
Em Sistemas de Missão Crítica, a criação e a implementação do design podem ser ainda mais complexas.
«Se fizermos uma analogia com o código, a qualidade de um produto muitas vezes depende da qualidade dos desenvolvedores. A mesma coisa acontece com o design: a qualidade do design de um produto está intimamente ligada à qualidade dos designers. Além do mais, a qualidade geralmente depende do relacionamento entre designers e desenvolvedores. Contar com uma contrapartida na equipe de desenvolvimento que “fale design”, um desenvolvedor frontend, é essencial para uma tradução do design ao código» - Diz Mauro Canziani, Head of Design de GeneXus.
Por experiência, sabemos que o processo de desenvolvimento da interface do usuário de um aplicativo ocupa a maior parte do ciclo de desenvolvimento. Quando o design da interface do usuário está nas mãos de um especialista, surgem duas vantagens:
1. O aplicativo terá uma aparência e estilo profissional.
2. O desenvolvedor terá um conjunto pré-construído de painéis que podem exigir alterações mínimas e pode se concentrar na lógica de negócios.
Conseguir isso requer DevOps, e esse processo envolve não apenas a mudança de ferramentas, mas também a mudança de mentalidades.
«Nesta mudança, é essencial conhecer os papéis necessários para iniciar um caminho para o DesignOps. Quando estivermos dispostos a mudar nossa mentalidade e colocar o design no lugar certo, precisamos começar a usar as ferramentas certas e motivar as pessoas a fazer a mudança. Esse processo pode começar com uma única pessoa disposta a adquirir novas habilidades; Além disso, algo que com certeza virá depois será diversificar muito a equipe com perfis diferentes. Escolher GeneXus como plataforma de desenvolvimento simplifica várias etapas de DevOps e DesignOps» - Explica Damián Salvia, Engenheiro de Computação de GeneXus.
Apostando na simplificação dos processos, na produtividade e integração das equipes, GeneXus dispõe de ferramentas para importar e exportar designs, com todos os assets necessários (como imagens e arquivos de fontes), desde Figma e Sketch, permitindo ao desenvolvedor construir o aplicação com todas as especificações de interface e experiência do usuário definidas pelo designer.
Desta forma, GeneXus une o melhor destes dois mundos, elevando a qualidade das aplicações desenvolvidas com sua plataforma Low-Code.
“Em GeneXus estamos convencidos de que os Sistemas de Design são a melhor estratégia para manter e evoluir o design de aplicações para soluções complexas”, afirma Mauro Canziani, Head of Design de GeneXus.
Para trabalhar com Design Systems, os usuários GeneXus podem optar pelas seguintes estratégias:
• SAP Fiori Design System
Permite aos usuários GeneXus criar aplicações em todo o mundo SAP sem a necessidade de implementação de desenho. Está disponível em suas duas versões principais SAP Fiori 2 e 3.
• Unanimo Design System
Este novo Sistema de Design de base é projetado para aplicativos de negócios, missão crítica e multiexperiência, e está presente em todos os produtos GeneXus. É de código aberto, personalizável e extensível. É desenvolvido sobre o objeto Design System, que permite criar, modelar e evoluir Design Systems da forma que GeneXus tradicionalmente faz: independente de tecnologia.
• Orion | K2BTools
• WorkWithPlus | WorkWithPlus
A terceira estratégia é recomendada para grandes sistemas complexos de múltiplas experiências que precisam de uma solução personalizada.
Para navegar nesta complexidade, GeneXus conta com um conjunto de ferramentas e processos que permitem criar, automatizar, manter e evoluir Sistemas de Design completos:
• Design System Object
O Design System Object é a evolução do que se chamava no GeneXus como themes (Temas), e é a fonte que permite criar, customizar e evoluir Design Systems, independentemente da tecnologia.
É modularizável e permite definir recursos de estilo para interfaces de tela com o objetivo de obter maior abstração no design, facilitando a reutilização e a montagem.
Por sua vez, utiliza uma estrutura de formato muito semelhante ao que é o CSS, o que também leva a uma interação mais fluida com a equipe de design.
Com o Design System Object, designers e desenvolvedores podem trabalhar usando a mesma linguagem, incentivando fortemente a colaboração entre eles.
• Patterns
Eles resolvem as interações comerciais mais frequentes com um único clique.
• User Controls
São controles customizados que permitem criar aplicações com interfaces ricas e fáceis de usar, agregando recursos como menus, mapas, gráficos, calendários, diagramas, entre outros.
• Stencils
Eles permitem que você crie e expanda componentes de UI para torná-los reutilizáveis em diferentes partes do aplicativo. Não têm código associado. Seu benefício se traduz em agilidade no projeto e desenvolvimento.
• Import from External Design
É a ferramenta que permite integrar o desenho e as interações desenhadas em Sketch e Figma, na base de conhecimento GeneXus, transformando toda essa linguagem visual em objetos como Design Systems, Stencils, Panels e muito mais. Isso reduz o tempo de implementação da UI e facilita a integração da equipe de design, naturalmente e com menos atrito.
• Live Editing
É um pilar fundamental para o desenvolvimento de interfaces de usuário de qualidade. É a ferramenta que permite trabalhar ao vivo no desenho de aplicações, desde o dispositivo final. Desta forma, você pode ver, em tempo real, as modificações feitas nos painéis, para obter resultados polidos e de qualidade em muito menos tempo.
Existem 3 formas de fazê-lo:
1. Criando um design desde o início, desde a caixa de diálogo New Object dentro do Ambiente de Desenvolvimento Integrado (IDE) de GeneXus.
2. Importando um Design System na base de conhecimento, para depois estendê-lo.
3. Utilizar a opção Design Import, seja com Sketch ou Figma, para posteriormente modificá-lo e ampliá-lo.
1. Conhecer em profundidade as ferramentas de design, bem como as plataformas onde aquela aplicação vai ser executada (ambiente web ou mobile, resoluções de ecrã, orientação da aplicação, entre outros). O motivo é que alguns podem ter um Design System padrão, como é o caso do Human Interface Guidelines (HIG) de Apple, ou o Material Design para Android.
2. Desenhar pensando sobre o sistema, ou seja, estruturar o design com base em Design Systems ou componentes.
3. Manter um diálogo fluido entre designers, frontend e developers, de forma a chegar a um acordo comum sobre os aspetos que terão impacto no desenvolvimento e manutenção do sistema. Em GeneXus, todas as decisões de design são levadas em consideração na hora de ajustar os arquivos de design e importar, incluindo a nomenclatura (as ferramentas atribuem nomes por padrão sem semântica para um desenvolvedor).
Para Mauro Canziani, projetos complexos devem ser baseados em Design Systems. Daí sua recomendação de usar a metodologia Atomic Design, idealizada por Brad Frost, para eliminar inconsistências e otimizar ao máximo o design e o desenvolvimento de produtos digitais.
“A ideia do Atomic Design é pegar os elementos padronizados básicos e com isso compor elementos mais complexos. Se formos para a interface, os elementos mais básicos, como um botão, um campo de texto ou um rótulo, os chamamos de átomos. E com esses átomos construímos moléculas, basicamente agrupamos dois ou três deles, como por exemplo um campo de texto, um botão e um rótulo e um ícone para formar um navegador. E agrupando essas moléculas compomos organismos, que são elementos maiores”.
Em GeneXus, o Atomic Design pode ser projetado da seguinte forma:
GeneXus 18 possui todos os componentes necessários para criar experiências de usuário que seguem práticas modernas de design e usabilidade.
Graças a Unanimo, o Design System que vem por padrão de GeneXus versão 18, as interfaces das aplicações são mais unificadas e consistentes.
Este Sistema de Design, criado e mantido por GeneXus, também simplifica a interação entre designers e especialistas em frontend, acelerando o ciclo de desenvolvimento de software.
“Com a Unanimo conseguimos ferramentas que nos permitem implementar o design de forma mais simples e fácil; que as interfaces se comportam e se parecem da mesma maneira; e que todas as tarefas e processos de negócios sigam a mesma linha de design”, destaca Eugenio García, Gerente de Produto da Suíte de GeneXus.
· Foi lançado com a licença Apache 2.0 e foi criado para ser o coração dos Sistemas de Missão Crítica, pois seu código e soluções visuais podem ser implementados rapidamente e com pouco esforço..
· É distribuído em GeneXus “fora da caixa”, isto é, as novas bases de conhecimento (KBs) criadas e geradas a partir da versão GeneXus 18 terão Unanimo como visual padrão.
· É multi-experiência, ois foi projetado para web, mobile nativo e conversação.
· É de código aberto, flexível e personalizável, permitindo que os usuários apliquem sua própria aparência, empresa ou negócio.
· É distribuído como um módulo. Isso significa que tem todas as vantagens de usar os módulos GeneXus, como portabilidade, facilidade de instalação e fácil atualização, permitindo atualizar e gerenciar versões independentemente da versão GeneXus.
· É consistente. É baseado em token e independente de estilo para a solução final.
· É extensível. É possível estender suas capacidades construindo novos componentes reutilizáveis como parte do sistema de design. Como permite adicionar novas classes e tokens, torna-se mais fácil adaptá-lo às necessidades de cada projeto.
· É incremental. Pode ser incorporado gradativamente à KB, sem gerar grandes impactos. Isso facilita a adoção daqueles projetos e bases de conhecimento criadas com versões anteriores a GeneXus 18, ou com Design Systems criados a partir de diferentes Temas. Em ambos os casos, a migração pode ser feita por módulos ou objetos.
· Para todos os gostos. Ele vem em dois modos: Unanimo Light e Unanimo Dark.
Além do Design System Object, Unanimo possui os seguintes recursos:
Poderá aprofundar estes temas, através dos seguintes conteúdos:
→ Total Experience com GeneXus 18
→ Unanimo Design System: Visão, Recursos e Personalização
→ Os benefícios de modelar Aplicações Multiexperiência para aumentar a produtividade do Desenvolvimento de Software
→ Como integrar uma Equipe de Design com o GeneXus 18
→ K2BTools com GeneXus 18
→ WorkWithPlus com GeneXus 18
→ Estratégias de DesignOps: Do design ao código
→ Amplie o valor do design e o impacto em grande escala com DesignOps
→ DesignOps e GeneXus
→ DesignOps - Guia para designers
→ DesignOps - Melhores práticas para designers
→ Design Systems Introdução
→ GeneXus default Design System
→ Design Import
→ Frontend Development: Construção visual interação
→ Curso Automated DevOps
Para enfrentar esses desafios, as empresas exigem cada vez mais software, mas não apenas qualquer software, mas software que lhes permita transformar sistemas desatualizados com segurança ou construir e manter ecossistemas digitais de maneira rápida, fácil e à prova de futuro.
Nesta cruzada, o design assumiu um papel fundamental.
No mundo do software, o design engloba não apenas a estética, mas também o fluxo de interações entre o usuário e as diversas telas e plataformas. Tudo deve ser claro, coerente e consistente, para que a aplicação fique uniforme.
Os aplicativos de hoje não podem mais ser pensados como um produto criado por desenvolvedores de software, mas sim por equipes multidisciplinares que envolvem também designers visuais e de interação.
Para o Gartner , é importante criar e manter práticas eficazes de DesignOps (operações de design) que permitam alinhamento operacional, colaboração profunda e inovação contínua dos produtos.
“As empresas que trabalham com DesignOps, têm vantagem competitiva em relação às que não possuem essas práticas. Fechar a lacuna entre design e desenvolvimento é um ponto que não deve continuar sendo uma tarefa pendente. GeneXus tem ótimas ferramentas e práticas para que nossos usuários superem esses desafios da melhor maneira possível”, diz Gabriel Simonet, Diretor de Marketing (CMO) de GeneXus.
Este whitepaper é um guia prático para gerar software de qualidade, com rapidez e bom design.
Conceitos que deve conhecer
Experiência de Usuário
Geralmente conhecido pela sigla UX que vem do inglês User Experience (Experiência do Usuário). O termo surgiu em 1993 com a criação do Escritório de Arquitetos da Experiência do Usuário. Isso foi feito pela empresa Apple, sob a direção do psicólogo e designer cognitivo Don Norman (neste vídeo você pode ver o que ele pensa sobre a UX).A Nielsen Norman Group, empresa de consultoria fundada por Norman e o engenheiro de interface Jakob Nielsen, acredita que o primeiro requisito para uma UX exemplar é atender às necessidades exatas do cliente, sem complicações ou aborrecimentos. Depois vem a simplicidade e elegância que produzem produtos que são uma alegria de possuir e usar. “Para alcançar uma experiência de usuário de alta qualidade nas ofertas de uma empresa, deve haver uma fusão perfeita de serviços de várias disciplinas, incluindo engenharia, marketing, design gráfico e industrial e design de interface.”
Em suma, a UX abrange todos os aspectos da interação do usuário final com a empresa, seus serviços e seus produtos.
Design de Interação
O Design de interação, abreviado como IxD, é a prática de projetar produtos, ambientes, sistemas e serviços digitais interativos. Ele se concentra no design do comportamento humano, sintetizando e imaginando como um usuário pode interagir com produtos digitais.O seu objetivo é satisfazer as necessidades e otimizar a experiência dos usuários, dentro das limitações técnicas ou comerciais relevantes.
Os temas comuns de Design de Interação incluem design, interação humano-computador e desenvolvimento de software.
Usabilidade
O Nielsen Norman Group define usabilidade como um “atributo de qualidade que avalia a facilidade de uso de interfaces de usuário. Eles também são métodos para melhorar a usabilidade durante o processo de design. Na Web, a usabilidade é uma condição necessária para a sobrevivência. Se um site for difícil de usar, as pessoas o abandonarão.”Design Systems
É o conjunto de princípios (clareza, eficiência, consistência e estética), padrões (tipografia, cores, espaços, componentes) e práticas (processos e ferramentas para desenvolver, design), que visam a construção de um produto digital para que ele tem coerência, uniformidade e robustez.O especialista em design de produto digital Nathan Curtis, acrescenta que “um Design System é composto por uma biblioteca, estilo visual, componentes e outros elementos que foram documentados e lançados por um indivíduo, equipe ou comunidade como código e ferramentas de design, de tal forma que os produtos que a adotam sejam mais eficientes e coesos.
É importante entender que os Design Systems não são universais. Embora compartilhem consenso, são definidos para cada produto ou família de produtos digitais. Eles também dependem das ferramentas que o software possui.
DesignOps
Nielsen Norman Group define DesignOps como “a orquestração e otimização de pessoas, processos e arte para ampliar o valor e o impacto do design em escala”
O termo é usado para abordar desafios como:
→ Procura e contratação de pessoas com competências relacionadas com essa área.
→ Criação de fluxos de trabalho eficientes para melhorar a qualidade e o impacto dos resultados do projeto.
Seu objetivo é estabelecer processos e medidas que suportem soluções escaláveis para esses desafios, para que os designers também possam se concentrar no design e na pesquisa.
DesignOps se aplica a qualquer pessoa que usa processos de pensamento de design centrados no usuário para resolver problemas. O termo ‘designer’ inclui designers de UX, pesquisadores de usuários, designers visuais, estrategistas de conteúdo, designers de serviços, designers de comunicação e qualquer outra pessoa que contribua para a experiência do usuário final.
As 3 áreas principais nas quais o DesignOps se concentra são:
→ Como os membros da equipe interagem uns com os outros.
→ Como a equipe faz seu trabalho.
→ Como esse trabalho gera impacto.
Passos básicos para trazer um bom design para o software
1: Gerar o design2: EPadronizar os processos necessários para executar o trabalho
3: Implementar o design
4: Testar
Software e design: desafios mais comuns
Aqui estão alguns dos desafios enfrentados pelas empresas que precisam manter seus aplicativos atualizados:1. Pesquisa
Estudar e idealizar como deve ser a solução que se deseja criar é uma tarefa que pode envolver altos custos e nem todas as empresas conseguem fazer isso.2. Equipe
Para concluir um projeto de software de maneira otimizada requer a interação de diferentes perfis e funções, incluindo designers, desenvolvedores, especialistas em implantação de aplicativos, redatores e testadores.3. Implementação
Uma vez pronto o design da solução, deve-se implementá-la, e esses custos também são relevantes.4. Mudanças de design
Quando uma solução está funcionando perfeitamente, as empresas geralmente resistem a fazer alterações. A evolução do design costuma parar por medo dos riscos que essas mudanças podem implicar.5. Alcançar consistência e coerência de um design
É difícil ter um design perfeitamente consistente em uma única plataforma; e essa dificuldade aumenta exponencialmente com cada plataforma adicionada à solução.Na união está a força!
A era da Experiência do Usuário (UX) e da transformação digital não apenas aumentou a complexidade no desenvolvimento de sistemas, mas também gerou a necessidade de trazer à mesa especialistas em interação e design visual e em arquitetura da informação, para que juntos, eles podem se concentrar no usuário final.No processo de criação de um produto digital, todos os papéis são elementares, mas é na interação entre o designer e o desenvolvedor que reside o sucesso ou o fracasso da interface e UX.
“Nesse trecho é onde corre o maior risco de perder qualidade. Designers e desenvolvedores usam diferentes ferramentas de trabalho; e quando essas ferramentas não estão integradas, há uma grande probabilidade de que o desenvolvedor tenha que repetir tarefas que o designer já considerou resolvidas e finalizadas”, explica Fabián Bonilla, especialista em consultoria, suporte técnico e treinamento GeneXus.
Em Sistemas de Missão Crítica, a criação e a implementação do design podem ser ainda mais complexas.
«Se fizermos uma analogia com o código, a qualidade de um produto muitas vezes depende da qualidade dos desenvolvedores. A mesma coisa acontece com o design: a qualidade do design de um produto está intimamente ligada à qualidade dos designers. Além do mais, a qualidade geralmente depende do relacionamento entre designers e desenvolvedores. Contar com uma contrapartida na equipe de desenvolvimento que “fale design”, um desenvolvedor frontend, é essencial para uma tradução do design ao código» - Diz Mauro Canziani, Head of Design de GeneXus.
Por experiência, sabemos que o processo de desenvolvimento da interface do usuário de um aplicativo ocupa a maior parte do ciclo de desenvolvimento. Quando o design da interface do usuário está nas mãos de um especialista, surgem duas vantagens:
1. O aplicativo terá uma aparência e estilo profissional.
2. O desenvolvedor terá um conjunto pré-construído de painéis que podem exigir alterações mínimas e pode se concentrar na lógica de negócios.
Conseguir isso requer DevOps, e esse processo envolve não apenas a mudança de ferramentas, mas também a mudança de mentalidades.
«Nesta mudança, é essencial conhecer os papéis necessários para iniciar um caminho para o DesignOps. Quando estivermos dispostos a mudar nossa mentalidade e colocar o design no lugar certo, precisamos começar a usar as ferramentas certas e motivar as pessoas a fazer a mudança. Esse processo pode começar com uma única pessoa disposta a adquirir novas habilidades; Além disso, algo que com certeza virá depois será diversificar muito a equipe com perfis diferentes. Escolher GeneXus como plataforma de desenvolvimento simplifica várias etapas de DevOps e DesignOps» - Explica Damián Salvia, Engenheiro de Computação de GeneXus.
Como gerar software com bom design em GeneXus?
Apostando na simplificação dos processos, na produtividade e integração das equipes, GeneXus dispõe de ferramentas para importar e exportar designs, com todos os assets necessários (como imagens e arquivos de fontes), desde Figma e Sketch, permitindo ao desenvolvedor construir o aplicação com todas as especificações de interface e experiência do usuário definidas pelo designer.
Desta forma, GeneXus une o melhor destes dois mundos, elevando a qualidade das aplicações desenvolvidas com sua plataforma Low-Code.
“Em GeneXus estamos convencidos de que os Sistemas de Design são a melhor estratégia para manter e evoluir o design de aplicações para soluções complexas”, afirma Mauro Canziani, Head of Design de GeneXus.
Para trabalhar com Design Systems, os usuários GeneXus podem optar pelas seguintes estratégias:
1. Utilizar os Sistemas de Design incorporados em GeneXus
Para melhorar as linguagens visuais e gerar aplicações rapidamente, GeneXus conta com:• SAP Fiori Design System
Permite aos usuários GeneXus criar aplicações em todo o mundo SAP sem a necessidade de implementação de desenho. Está disponível em suas duas versões principais SAP Fiori 2 e 3.
• Unanimo Design System
Este novo Sistema de Design de base é projetado para aplicativos de negócios, missão crítica e multiexperiência, e está presente em todos os produtos GeneXus. É de código aberto, personalizável e extensível. É desenvolvido sobre o objeto Design System, que permite criar, modelar e evoluir Design Systems da forma que GeneXus tradicionalmente faz: independente de tecnologia.
2. Utilizar os Sistemas de Design dos Parceiros de GeneXus
A segunda forma de acelerar o desenvolvimento de software e a implementação de um design de alta qualidade é o uso de Design Systems criados pelos parceiros da comunidade GeneXus, cada um deles com capacidades específicas e adequados para diferentes tipos de projetos:• Orion | K2BTools
• WorkWithPlus | WorkWithPlus
3. Modificar ou criar seu próprio sistema de design com as ferramentas GeneXus para criar Design Systems personalizados
A terceira estratégia é recomendada para grandes sistemas complexos de múltiplas experiências que precisam de uma solução personalizada.
Para navegar nesta complexidade, GeneXus conta com um conjunto de ferramentas e processos que permitem criar, automatizar, manter e evoluir Sistemas de Design completos:
• Design System Object
O Design System Object é a evolução do que se chamava no GeneXus como themes (Temas), e é a fonte que permite criar, customizar e evoluir Design Systems, independentemente da tecnologia.
É modularizável e permite definir recursos de estilo para interfaces de tela com o objetivo de obter maior abstração no design, facilitando a reutilização e a montagem.
Por sua vez, utiliza uma estrutura de formato muito semelhante ao que é o CSS, o que também leva a uma interação mais fluida com a equipe de design.
Com o Design System Object, designers e desenvolvedores podem trabalhar usando a mesma linguagem, incentivando fortemente a colaboração entre eles.
• Patterns
Eles resolvem as interações comerciais mais frequentes com um único clique.
• User Controls
São controles customizados que permitem criar aplicações com interfaces ricas e fáceis de usar, agregando recursos como menus, mapas, gráficos, calendários, diagramas, entre outros.
• Stencils
Eles permitem que você crie e expanda componentes de UI para torná-los reutilizáveis em diferentes partes do aplicativo. Não têm código associado. Seu benefício se traduz em agilidade no projeto e desenvolvimento.
• Import from External Design
É a ferramenta que permite integrar o desenho e as interações desenhadas em Sketch e Figma, na base de conhecimento GeneXus, transformando toda essa linguagem visual em objetos como Design Systems, Stencils, Panels e muito mais. Isso reduz o tempo de implementação da UI e facilita a integração da equipe de design, naturalmente e com menos atrito.
• Live Editing
É um pilar fundamental para o desenvolvimento de interfaces de usuário de qualidade. É a ferramenta que permite trabalhar ao vivo no desenho de aplicações, desde o dispositivo final. Desta forma, você pode ver, em tempo real, as modificações feitas nos painéis, para obter resultados polidos e de qualidade em muito menos tempo.
Como criar um Design System dentro de GeneXus?
Existem 3 formas de fazê-lo:
1. Criando um design desde o início, desde a caixa de diálogo New Object dentro do Ambiente de Desenvolvimento Integrado (IDE) de GeneXus.
2. Importando um Design System na base de conhecimento, para depois estendê-lo.
3. Utilizar a opção Design Import, seja com Sketch ou Figma, para posteriormente modificá-lo e ampliá-lo.
Recomendações para importar designs externos em GeneXus
1. Conhecer em profundidade as ferramentas de design, bem como as plataformas onde aquela aplicação vai ser executada (ambiente web ou mobile, resoluções de ecrã, orientação da aplicação, entre outros). O motivo é que alguns podem ter um Design System padrão, como é o caso do Human Interface Guidelines (HIG) de Apple, ou o Material Design para Android.
2. Desenhar pensando sobre o sistema, ou seja, estruturar o design com base em Design Systems ou componentes.
3. Manter um diálogo fluido entre designers, frontend e developers, de forma a chegar a um acordo comum sobre os aspetos que terão impacto no desenvolvimento e manutenção do sistema. Em GeneXus, todas as decisões de design são levadas em consideração na hora de ajustar os arquivos de design e importar, incluindo a nomenclatura (as ferramentas atribuem nomes por padrão sem semântica para um desenvolvedor).
Tips para otimizar com Atomic Design
Para Mauro Canziani, projetos complexos devem ser baseados em Design Systems. Daí sua recomendação de usar a metodologia Atomic Design, idealizada por Brad Frost, para eliminar inconsistências e otimizar ao máximo o design e o desenvolvimento de produtos digitais.
“A ideia do Atomic Design é pegar os elementos padronizados básicos e com isso compor elementos mais complexos. Se formos para a interface, os elementos mais básicos, como um botão, um campo de texto ou um rótulo, os chamamos de átomos. E com esses átomos construímos moléculas, basicamente agrupamos dois ou três deles, como por exemplo um campo de texto, um botão e um rótulo e um ícone para formar um navegador. E agrupando essas moléculas compomos organismos, que são elementos maiores”.
Em GeneXus, o Atomic Design pode ser projetado da seguinte forma:
1. Organismos = Objetos
“Entre esses objetos temos os Stencils, que nos permitem definir elementos de interface reutilizáveis e multiplataforma”.2. Átomos e Moléculas = Componentes GeneXus
“Esses componentes podem ser botões e controles. Se quisermos criar nossos próprios controles, temos User Controls que nos permitem criar controles complexos.3. Subátomos = Design System Object
“O Design System Object nos permite modelar Tokens, estilos e elementos, sendo esta uma forma de fazer override os controles nativos do GeneXus”Projetos complexos devem ser baseados em Design Systems para eliminar inconsistências e otimizar ao máximo o design e o desenvolvimento de produtos digitais.
GeneXus 18 e Unanimo: A chave para projetar e moelar sistemas complexos
GeneXus 18 possui todos os componentes necessários para criar experiências de usuário que seguem práticas modernas de design e usabilidade.
Graças a Unanimo, o Design System que vem por padrão de GeneXus versão 18, as interfaces das aplicações são mais unificadas e consistentes.
Este Sistema de Design, criado e mantido por GeneXus, também simplifica a interação entre designers e especialistas em frontend, acelerando o ciclo de desenvolvimento de software.
“Com a Unanimo conseguimos ferramentas que nos permitem implementar o design de forma mais simples e fácil; que as interfaces se comportam e se parecem da mesma maneira; e que todas as tarefas e processos de negócios sigam a mesma linha de design”, destaca Eugenio García, Gerente de Produto da Suíte de GeneXus.
Isto é o que deve saber de Unanimo:
· Foi lançado com a licença Apache 2.0 e foi criado para ser o coração dos Sistemas de Missão Crítica, pois seu código e soluções visuais podem ser implementados rapidamente e com pouco esforço..
· É distribuído em GeneXus “fora da caixa”, isto é, as novas bases de conhecimento (KBs) criadas e geradas a partir da versão GeneXus 18 terão Unanimo como visual padrão.
· É multi-experiência, ois foi projetado para web, mobile nativo e conversação.
· É de código aberto, flexível e personalizável, permitindo que os usuários apliquem sua própria aparência, empresa ou negócio.
· É distribuído como um módulo. Isso significa que tem todas as vantagens de usar os módulos GeneXus, como portabilidade, facilidade de instalação e fácil atualização, permitindo atualizar e gerenciar versões independentemente da versão GeneXus.
· É consistente. É baseado em token e independente de estilo para a solução final.
· É extensível. É possível estender suas capacidades construindo novos componentes reutilizáveis como parte do sistema de design. Como permite adicionar novas classes e tokens, torna-se mais fácil adaptá-lo às necessidades de cada projeto.
· É incremental. Pode ser incorporado gradativamente à KB, sem gerar grandes impactos. Isso facilita a adoção daqueles projetos e bases de conhecimento criadas com versões anteriores a GeneXus 18, ou com Design Systems criados a partir de diferentes Temas. Em ambos os casos, a migração pode ser feita por módulos ou objetos.
· Para todos os gostos. Ele vem em dois modos: Unanimo Light e Unanimo Dark.
Seguindo os princípios de GeneXus, Unanimo encurta as distâncias entre o trabalho de design e a implementação do desenvolvimento de software, permitindo mais modelagem e menos programação.
Como é composto Unanimo?
Além do Design System Object, Unanimo possui os seguintes recursos:
1. Objetos e controles de usuário
Eles resolvem necessidades comuns de aplicativos Web e Móveis.2. Sidebar ou menu lateral
Ele é carregado dinamicamente através de um SDT em GeneXus e é utilizado para navegar pelas opções do aplicativo.3. User dropdown
É um controle utilizado para visualizar o usuário logado na aplicação e gerenciar seus dados, modificá-los ou encerrar a sessão.4. Controles de interação
Entre os mais comuns estão o botão de controle, um indicador de progresso, um alerta.5. Biblioteca extrema
Para controles que requerem lógicas mais complexas, existe uma biblioteca externa, também desenvolvida por GeneXus, que permite encapsular toda essa lógica, oferecendo ao usuário um controle de usuário que será modelado como uma marcação e que poderá ser composto entre Sim6. Fontes
As fontes são um arquivo dentro da base de conhecimento e podem ser modificadas por meio de Design System Tokens. Caso seja necessária outra fonte, basta importar essa fonte para a base de conhecimento e modificar sua referência por meio de um token.7. Imagens e ícones
Eles são apresentados no formato SVG e permitem personalizar determinados elementos do Design System. O Unanimo fornece um conjunto de ícones padrão: perfil, configuração, filtro, lupa, entre outros.8. Cores
São oferecidas duas alternativas ou dois esquemas de representação de cores, que são o modo escuro e o modo claro, que podem ser modificados através dos Tokens do objeto.Ficou querendo mais?
Poderá aprofundar estes temas, através dos seguintes conteúdos:
→ Total Experience com GeneXus 18
→ Unanimo Design System: Visão, Recursos e Personalização
→ Os benefícios de modelar Aplicações Multiexperiência para aumentar a produtividade do Desenvolvimento de Software
→ Como integrar uma Equipe de Design com o GeneXus 18
→ K2BTools com GeneXus 18
→ WorkWithPlus com GeneXus 18
→ Estratégias de DesignOps: Do design ao código
→ Amplie o valor do design e o impacto em grande escala com DesignOps
→ DesignOps e GeneXus
→ DesignOps - Guia para designers
→ DesignOps - Melhores práticas para designers
→ Design Systems Introdução
→ GeneXus default Design System
→ Design Import
→ Frontend Development: Construção visual interação
→ Curso Automated DevOps