--- title: "O novo back office da GoodBarber, tela por tela" description: "Tudo começa pelo design. Uma nova tipografia, Plus Jakarta Sans, um azul para a interface, um verde reservado ao que publica e valida, cantos suavizados, sombra" canonical_url: "https://pt.goodbarber.com/blog/o-novo-back-office-da-goodbarber-mais-clareza-para-criar-seu-app-a1371/" lang: pt date: 2026-10-15 last_updated: 2026-10-15 --- # O novo back office da GoodBarber: mais clareza para criar seu app Desde 25 de setembro de 2026, você trabalha no novo back office da GoodBarber. Uma interface mais clara, que deixa espaço para o essencial: criar seu app e fazê-lo crescer. Um botão de publicação que mostra em que ponto está cada versão, um modo escuro, configurações de acessibilidade e uma edição avançada para os criadores que querem ir mais longe. Veja o que muda, tela por tela. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) [Lesia PIETRI](https://pt.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design 15 de out. de 2026 · 4 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98381421-68591489.jpg?v=1792069099.755522) Tudo começa pelo design. Uma nova tipografia, Plus Jakarta Sans, um azul para a interface, um verde reservado ao que publica e valida, cantos suavizados, sombras suaves e ícones redesenhados. O conjunto se lê com calma, e cada cor tem um papel: o azul guia, o verde confirma. Em My App, a pré-visualização do seu app ocupa o centro da tela e as configurações ficam reunidas em um painel à direita. Você edita de um lado, vê o resultado do outro, e seu app continua diante dos seus olhos durante todo o trabalho. ## Um botão de publicação que mostra em que ponto está seu app [bloc2-publish](https://player.vimeo.com/video/1236202114?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0) No canto superior direito de cada página, um botão acompanha o estado do seu projeto. Ele mostra "Publicar meu projeto" enquanto o app nunca foi publicado, depois "Recompilar e enviar", "Atualizar agora" ou "Projeto atualizado", conforme o momento. Basta uma olhada para saber se ainda falta alguma coisa. Ao clicar, a janela "Publicar meu projeto" passa em revista suas três versões: primeiro o PWA, depois iOS, depois Android. Para cada uma, o status: não publicada, etapas concluídas sobre o total, pronta, sendo gerada, em revisão, no ar, precisando ser recompilada. Ao lado, a próxima ação. Embaixo, o número de alterações prontas para publicar, com o botão "Atualizar agora" para enviá-las. Os cartões do Dashboard mostram os mesmos status, para você vê-los assim que entra. ## Claro, escuro ou sistema [bloc3-apparence](https://player.vimeo.com/video/1236202117?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0) O back office da GoodBarber abre no modo claro. Para passar ao modo escuro, clique no seu nome, na parte de baixo do menu principal: um pequeno menu se abre, com a linha "Aparência" e seus três ícones, um sol para "Claro", uma lua para "Escuro" e uma tela para "Sistema". "Sistema" segue a configuração do seu computador: se o seu sistema passa para o escuro à noite, o back office acompanha. ## Configurações de acessibilidade que te acompanham em todos os seus apps [bloc4-accessibilite](https://player.vimeo.com/video/1236202115?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0) Clique de novo no seu nome, na parte de baixo do menu principal, e abra "Minha conta": a linha "Acessibilidade" reúne duas configurações. "Tamanho do texto" aumenta a interface em quatro níveis, de "Pequeno" a "Muito grande". "Aumentar o contraste" escurece o texto e reforça bordas e contornos. O subtítulo da linha já diz: "Aplicado imediatamente, em todos os projetos." A configuração está ligada a você e te acompanha de um app para outro. Se você gerencia vários aplicativos, como agência ou revendedor, faz o ajuste uma vez e o encontra em todos. Enquanto você não escolher nada, o contraste segue a configuração de aumento de contraste do seu sistema. ## A edição avançada, para os criadores que querem ir mais longe [bloc5-edition-avancee](https://player.vimeo.com/video/1236202113?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0) Para escrever diretamente no JSON do seu app, cada painel de Structure tem um link entre chaves { }. Ele abre uma janela de edição avançada sobre o JSON do elemento atual, sem sair da página. Um campo "Pesquisar uma chave ou um valor" leva direto ao lugar certo. As alterações são sinalizadas, com a quantidade, antes de serem salvas. Uma bolinha aparece antes de cada cor, e um seletor de cor permite escolhê-la diretamente. Um cadeado marca o que está bloqueado. Essa janela abre com a extensão [Edição avançada](https://pt.goodbarber.com/extensions/advanced-edition/), gratuita, que você instala pela Extension Store. ## E também ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98381421-68591494.jpg?v=1792069101.5955315) - O breadcrumb da barra superior mostra a página pai e o elemento aberto. - Na Home, um modo "Reordenar" muda a ordem dos widgets da página. - A janela de escolha de ícone abre sobre a página, mostra o ícone atual e o campo em questão, organiza as coleções em uma coluna à esquerda e oferece vários tamanhos de pré-visualização. A busca por nome também cobre os conjuntos de ícones genéricos, e um clique escolhe o ícone. - Abaixo de 1024 px de largura, as telas se reorganizam: o menu se recolhe atrás de um botão e, em My App, a pré-visualização vai para cima e o painel para baixo. Dá para trabalhar em um tablet como em um celular. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98381421-68591495.jpg?v=1792069103.4675412) Tudo isso já está no seu back office: basta abri-lo. E outras novidades vão chegar nas próximas semanas. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) Sobre o autor Lesia PIETRI Head of Product Design Sou Head of Product Design da GoodBarber. Conduzo o design do produto: o design system sobre o qual todas as apps são construídas, os layouts que servem de ponto de partida e o percurso que leva de uma ideia a uma app publicada. O meu trabalho é que alguém que nunca abriu uma ferramenta de design publique na mesma uma app cuidada, ecrã após ecrã. Designer de alma, passo os dias nos detalhes que ninguém nomeia: os espaçamentos, os contrastes, o peso de um título. Escrevo aqui sobre o design da GoodBarber e sobre as novidades do produto: as funcionalidades, os layouts e os temas. [Mais de Lesia](https://pt.goodbarber.com/blog/author/lesia-pietri/)[LinkedIn](https://www.linkedin.com/in/lesia-pietri-150824116/)