--- title: "Design System - Diretrizes de design e UX para criar os melhores apps" description: "Nosso Design System compila as diretrizes de UX e design de apps usadas para criar seus apps por meio de nosso criador de apps para obter consistência visual em todas as plataformas." canonical_url: "https://www.goodbarber.com/uxdesign/" lang: pt --- # Design System - Diretrizes de design e UX para criar os melhores apps ![ds_banner_alt](<>) # GoodBarber Design System ## Descubra como estamos revolucionando a criação de aplicativos para oferecer experiências fluídas e bonitas em todas as plataformas. [Explore nosso Design System](/uxdesign/foundations) ### O Design System da GoodBarber O GoodBarber Design System é uma solução abrangente que serve como estrutura, caixa de ferramentas e carta gráfica para designers e desenvolvedores. Ele oferece **diretrizes evolutivas** para uma linguagem de design consistente, garantindo eficiência e escalabilidade. Estabelece princípios e padrões comuns de design e, ao mesmo tempo, permite flexibilidade e personalização quando necessário. Por fim, ajuda a simplificar o desenvolvimento de aplicativos e a **criar aplicativos bonitos e funcionais.** [Fundações Princípios básicos para a construção de modelos coesos e consistentes em todas as plataformas.](/uxdesign/foundations)[Átomos Componentes essenciais que garantem a consistência visual e agilizam o fluxo de trabalho.](/uxdesign/atomic-components)[Componentes Elementos reutilizáveis como blocos de construção para interfaces coesas e fáceis de usar.](/uxdesign/ui-components) ### Por que estas diretrizes de design? A GoodBarber, um construtor de aplicativos sem código lançado em 2011, capacita os usuários a criar aplicativos nativos impressionantes ou Progressive Web Apps sem esforço. Mantendo nosso compromisso com a excelência, fornecemos continuamente **as melhores soluções para a criação de aplicativos bonitos.** Nos primórdios da GoodBarber, o design UX não era totalmente compreendido, o que tornava o desenvolvimento de aplicativos um desafio sem diretrizes consistentes. Nossa jornada nos levou a desenvolver o GoodBarber Design System, que oferece **diretrizes e práticas recomendadas** abrangentes para obter **consistência visual, agilizar o desenvolvimento** e garantir uma **experiência consistente do usuário.** Ao compartilhar nossos princípios de design, capacitamos os usuários a obter **consistência, eficiência e escalabilidade** no desenvolvimento de seus aplicativos, aprimorando a qualidade geral dos aplicativos criados com nossa tecnologia. ![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-dev@small.a0034b531522.png) Os **desenvolvedores** têm acesso às especificações técnicas das páginas e componentes: Seu tamanho, seu posicionamento, seus comportamentos e suas propriedades. ![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-design@small.55c3dabb4ecd.png) Os **designers** podem contar com um conjunto de regras de espaçamento, tamanhos de fonte, proporções de imagem ou distribuição de cores para a criação de novas páginas. ### Objetivos ![ds_objectives_principles_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-04-streamline@small.b7c5264ab429.png) Simplifique a criação e a produção de modelos implementando princípios de construção. ![ds_objectives_consistency_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-05-consistency@small.6c9cbe395733.png) Garanta consistência visual entre as páginas de um app em diferentes plataformas. ![ds_objectives_smoothux_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-06-ux@small.35d00be0e89f.png) Garanta uma experiência de usuário suave e ótima ### Os princípios de design da GoodBarber Um bom design devia ser o padrão, não o seu fardo. A GoodBarber foi o primeiro criador de apps a formalizar um verdadeiro design system, para que crie apps bonitas e funcionais sem carregar o trabalho de design. Seis princípios tornam isso possível. #### Design por sistema Cada ecrã é montado a partir de um único design system formal (fundamentos, átomos e componentes), por isso a coerência é garantida por construção e não fica dependente da sua disciplina. Um verdadeiro sistema de três camadas com mais de 100 layouts prontos a usar. O primeiro formalizado num criador de apps no-code. #### Sem peso de design As escolhas criativas são suas (tema, cores, conteúdo); o sistema trata em silêncio dos espaçamentos, da tipografia, das formas e da coerência. Nenhum painel de design para aprender, nenhuma escala de espaçamento para planear. Pode substituir qualquer predefinição quando precisar. #### Nativo por predefinição Uma única configuração gera três motores: iOS nativo (Swift), Android nativo (Kotlin) e uma Progressive Web App (Angular). Binários Swift e Kotlin compilados mais uma PWA. Não é um invólucro WebView. #### Definido uma vez, coerente em todo o lado Cor, tipografia, espaçamentos, formas e sombras são definidos uma só vez como papéis semânticos e reutilizados em todo o lado, por isso alterar uma definição do tema atualiza toda a app de forma coerente. Quatro papéis de cor semânticos, 18 níveis tipográficos calibrados por dispositivo, um sistema de gutters multidispositivo. #### Legível por predefinição As paletas são concebidas a pensar no contraste e na legibilidade, e cada controlo mantém uma área de toque confortável, mesmo onde o elemento parece pequeno. Genius Palette (uma IA interna) e áreas de toque confortáveis em cada controlo. #### Um acabamento que se sente A saída nativa desbloqueia uma camada sensorial que a maioria das apps no-code ignora. São estes detalhes que fazem uma app parecer trabalhada, não gerada. Resposta háptica, motion design, um leitor multimédia transversal, uma TabBar flutuante. A GoodBarber desenha cada app sobre seis princípios: design por sistema, sem peso de design, nativo por predefinição, definido uma vez e coerente em todo o lado, legível por predefinição e uma camada sensorial de acabamento. Juntos explicam porque alguém sem experiência em design publica uma app que parece desenhada por um profissional. Explore o Design System da GoodBarber e descubra todo o poder de um design de aplicativos fluido! [Explore nosso Design System](/uxdesign/foundations)