--- title: "Design modular: recursos para criar um aplicativo - construtor de aplicativos com Design modular" description: "Crie um belo design para seu app com o melhor construtor de aplicativos sem código do mercado" canonical_url: "https://pt.goodbarber.com/feature-index/design/" lang: pt --- # Design modular Crie um belo design para seu app com o melhor construtor de aplicativos sem código do mercado - [Design geral](#generaldesign) - [Home](#home) - [Cabeçalho](#header) - [Modo de navegação](#navigationmode) - [Navegação customizável](#customnav) - [Menu](#menu) - [Recursos de design](#design_ressources) - [Seções](#sections) ## Design geral+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Global_Style.ec2e912aefe2.mp4) - ### Adaptado para cada dispositivo GoodBarber oferece um design completo para qualquer dispositivo, de smartphones a desktops. Nossos elementos de design se adaptam perfeitamente a cada tamanho de tela mantendo a qualidade consistente em todas interações com o usuário. - ### Ferramenta de Estilo Global Gerencia o estilo geral do seu app a partir de um único menu: o esquema de cores, tipografia, botões de ação, efeitos de foco e outros elementos. Crie seu design e aplique-o a todo o seu app, em um clique. - ### Imagens de background GoodBarber permite a integração de imagens no design do aplicativo, exibindo-as no plano de fundo. - ### Margens personalizáveis Personalize as margens do design do app — horizontal para todas as telas, vertical apenas para telas mobile. - ### Efeitos ao passar o mouse em textos Adicione um efeito de Hover em seus textos: sublinhando, clareando ou escurecendo a cor da fonte. - ### Efeitos ao passar o mouse em imagens Adicione um efeito de Hover em suas imagens: zoom in, zoom out ou opacidade. - ### Troca de temas É possível mudar o tema do app em um clique, mantendo o modo de navegação e a arquitetura geral e conteúdo do projeto. - ### Adaptação por tipo de uso A diversidade de modelos, bem como a variedade e a capacidade das opções de personalização disponíveis, permitem a criação de um aplicativo adaptado à sua finalidade. - ### Editor de estilo Gerencie os estilos em nível global, garantindo um design coerente em todas as diferentes visualizações do aplicativo. - ### Histórico das alterações O back office da GoodBarber inclui um log de modificações que permite acessar o histórico de todas as modificações realizadas no projeto. - ### Atualização do design sem recompilação As atualizações relacionadas ao design do projeto não exigem a reconstrução do aplicativo. Uma vez aprovadas, elas são automaticamente aplicadas e ficam visíveis para os usuários, sem nenhuma ação extra. - ### Biblioteca de imagens Armazene imagens em uma biblioteca pessoal e acesse elas facilmente sempre que precisar. - ### Redimensionamento de imagens As imagens são redimensionadas para várias proporções, comprimidas e armazenadas em cache para alcançar o melhor peso, desempenho e combinação de qualidade de exibição. Os tempos de carregamento são otimizados sem comprometer a qualidade de exibição. - ### Efeito monocromático Graças ao editor de imagens integrado no back office da GoodBarber, é possível adicionar um efeito monocromático nas imagens. - ### Efeito de desfocagem Adicione um efeito de desfocagem às imagens em um clique, diretamente do back office da GoodBarber, graças ao editor de imagens integrado. - ### Efeitos de zoom Aplique efeitos de zoom ao rolar o mouse sobre as imagens, na versão de desktop do projeto. - ### Assistente de criação de ícone e splash screen O back office GoodBarber oferece uma ferramenta para auxiliar na criação do ícone do aplicativo e tela de lançamento a partir do zero. - ### Gestão de Gradiente Integre gradientes de cor no design do seu app, escolhendo em uma biblioteca muito completa (conectada ao serviço [https://uigradients.com](https://pt.goodbarber.com)). Assim que esteja escolhido, o gradiente é automaticamente gerado e aplicado ao design do seu app. - ### Genius Palette Confie a sua paleta de cores à IA. Com um clique, o Genius Palette gera um conjunto de cores coerente e profissional, pronto a aplicar a todo o seu design. - ### Design System A GoodBarber assenta num design system formalizado: fundações, átomos e componentes, mais uma biblioteca de layouts prontos a usar. As regras aplicam-se por omissão a cada página, pelo que um projeto se mantém coerente de um ecrã para o outro. - ### Retorno háptico e animações As apps nativas trazem uma camada sensorial: retorno háptico sob o dedo, transições fluidas de uma lista para o seu detalhe e um movimento que responde ao deslocamento. - ### Forma dos botões e dos campos Defina a forma de todos os botões da sua app — quadrada, arredondada ou redonda — bem como a forma, o tamanho e a posição da etiqueta dos campos de formulário. - ### App Walkthrough Guie os seus utilizadores no primeiro arranque com um tutorial interativo. Escolha o modo de exibição e dê vida aos ecrãs com animações Lottie. ## Home+ [https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4](https://portal.ww-cdn.com/portal_static/images/radio/home_buildin.6c6c5f4784f2.mp4) - ### Home modular A seção Home é a primeira seção do aplicativo, é composta por widgets e completamente flexível. Com a grande variedade de widgets disponíveis, o Home permite que o projeto seja criado de forma verdadeiramente única. - ### Ative ou Desative Você pode escolher ativar ou desativar a seção Home no seu app. Se a desativar, a navegação irá depender exclusivamente no modo de navegação escolhido. - ### 77 widgets Com os widgets, você tem uma flexibilidade incomparável para organizar a Home do seu app. - ### Wigdets de conteúdo Content apps Torne a Home do aplicativo mais dinâmica com widgets que atualizam automaticamente cada vez que um novo conteúdo seja publicado dentro do projeto. - ### Widgets de navegação Content apps Ofereça acesso direto às seções mais importantes do aplicativo com widgets dedicados à navegação. A maneira perfeita de orientar o usuário para a função-chave do projeto. - ### Widgets de eCommerce eCommerce apps Crie entradas diretas para os seus produtos e coleções, na página Home do seu app, usando o widget da lista de produtos e os widgets da lista de coleções - ### Widget promocional eCommerce apps Exiba uma mensagem promocional assim que os usuários chegarem à página Home da sua loja. Você pode destacar um produto, uma coleção, uma lista de coleções. O widget promocional é muito flexível e ajudará você a aumentar suas vendas. - ### Widgets semi-dinâmicos Esses widgets permitem a criação que a Home seja atualizada automaticamente sempre que um novo conteúdo é publicado, e, ao mesmo tempo, oferece uma arquitetura clara ao usuário quando se trata de navegação no aplicativo. - ### Outros widgets Esta categoria inclui widgets de utilitários, como widgets de busca, newsletter, publicidade, contagem regressiva ou HTML. - ### Construção drag & drop Arranjar os diferentes widgets apresentados na Home é fácil. Basta arrastar e soltar os widgets para o lugar onde eles devem ser exibidos. - ### Opções de classificação Acesse uma ampla gama de opções para gerenciar a ordem de exibição dos elementos apresentados nos widgets de conteúdo: por data, popularidade, ordem alfabética, aleatoriamente... - ### Número de itens O número de elementos exibidos por um widget pode ser configurado individualmente para cada widget, permitindo a máxima flexibilidade na organização da Home. - ### Widgets em código personalizado Construa os seus próprios widgets em HTML, CSS e JavaScript e coloque-os na home ao lado dos widgets padrão. ## Cabeçalho+ [https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4](https://portal.ww-cdn.com/portal_static/images/feature_index/videos/Logo_Title.b8e1067a5361.mp4) - ### Barra de Navegação personalizável A NavBar é um local estratégico dentro do seu aplicativo. Portanto, você tem total controle sobre o seu design e recursos. Escolha entre 3 formatos de altura diferentes (Pequeno, Médio, Grande) para exibir o seu logo, um título ou uma descrição. - ### Ícones personalizáveis Cada link adicionado à barra de navegação recebe um ícone. Este ícone é inteiramente customizável. - ### Adição de atalhos A barra de navegação pode exibir até 6 links de atalhos para seções chave do aplicativo ou fontes externas. - ### Gestão de atalhos O acesso à personalização da aparência dos atalhos da barra de navegação permite manter uma experiência de usuário coerente em todo o aplicativo. - ### Organização inteligente Com base no número de atalhos disponíveis na barra de navegação, o melhor arranjo será gerenciado automaticamente pelo aplicativo. - ### Atalhos personalizáveis O design de cada atalho na barra de navegação é personalizável. Acesse uma biblioteca com mais de 1000 ícones vetoriais, adicione ícones próprios e personalize os títulos dos links. - ### Opções de efeitos Content apps Aplique efeitos de transparência, desfocagem ou ocultação no cabeçalho. Esses efeitos sutis dão o toque final no aplicativo e diferenciam o design de forma completa. - ### Gestão automática de efeitos Os efeitos são aplicados automaticamente ao cabeçalho pela GoodBarber com base no dispositivo e sistema operacional no qual o aplicativo está sendo exibido. - ### Cabeçalho personalizável por seção Um cabeçalho e uma barra de navegação específica podem ser configurados para cada seção do aplicativo. ## Modo de navegação+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/navigation_mode.82959cd1bbdf.jpg) - ### Modos de navegação personalizáveis Escolha o modo de navegação do seu aplicativo a partir dos modelos propostos. Cada menu pode ser personalizado, até no mínimo detalhe, com uma quantidade ilimitada de combinações, para tornar cada projeto único. - ### Swipe Um modo de navegação ideal para aplicativos com um grande número de seções. - ### Little Swipe Ofereça uma navegação vertical onde cada seção no aplicativo é ilustrada por um ícone. - ### TabBar Um clássico, o TabBar é um modo de navegação que concede acesso rápido às seções mais importantes dentro do aplicativo. - ### Grid O Grid exibe a navegação do aplicativo em tela cheia, cada entrada é representada por um ícone. - ### Slate O Slate exibe a navegação do aplicativo em tela cheia, cada entrada é representada por um texto. - ### Do Zero Content apps O menu From Scratch permite codificar a navegação inserindo seu próprio código HTML. - ### Invisível Content apps É possível ativar o modo de navegação invisível, assim ocultando o modo de navegação do app. - ### Floating TabBar Uma TabBar destacada da margem do ecrã, a flutuar sobre o seu conteúdo. Nas apps nativas fica em baixo; na web app surge como banner sob o cabeçalho. ## Navegação customizável+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/custom_navigation.8cd1ea29a274.jpg) - ### Cabeçalho, Corpo e o Rodapé Cada menu de navegação é composto por 3 partes distintas: o cabeçalho, corpo e o rodapé, cada um totalmente personalizável. A exibição do cabeçalho e do rodapé não é obrigatória. - ### Exibição do logo Exiba um logotipo no cabeçalho do modo de navegação, carregando um logotipo ou adicionando o texto diretamente. - ### Link para perfil do usuário Adicione um link direto para o perfil do usuário dentro do modo de navegação. Edite o texto, o ícone e a cor do link. - ### Adição de atalhos Adicione atalhos no modo de navegação e permita que os usuários acessem facilmente qualquer seção do aplicativo, para um link externo ou até mesmo para executar uma ação, como fazer logoff, enviar um sms ou um e-mail. - ### Separadores personalizáveis Adicione separadores dentro do menu de navegação e personalize a cor e altura do pixel. - ### Área de links personalizáveis Crie um menu de navegação adicionando links a seções dentro do aplicativo. - ### Copyright Adicione uma área de direitos autorais dentro do menu de navegação do app. Selecione a cor, o texto e as configurações da fonte. - ### Opções avançadas de design GoodBarber permite a personalização avançada do design do menu de navegação. Fonte, cores, alinhamento, ícone, altura da célula, títulos... - ### Exibição padrão do menu Para os menus Swipe, Little Swipe, Grid e Slate, selecione o status padrão do menu quando o aplicativo é iniciado: sempre oculto ou sempre exibido. ## Menu+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/templates.493d19427b54.jpg) - ### 10 templates de menus GoodBarber oferece uma seção de menu para ativar a navegação em vários níveis dentro do aplicativo. Existem 10 menus para escolher. - ### Imagens para cada elemento Escolha uma navegação onde cada elemento do menu é uma imagem de alta resolução, para obter um design perfeito, independente do tamanho da tela no qual o aplicativo está sendo exibido. - ### Design avançado Aplique efeitos de gradiente ou de desfocagem nas imagens. Ajuste a posição do texto e escolha os ícones para representar cada seção menu. - ### Construção automática Com base no número de seções no menu, GoodBarber irá executar um arranjo automático para sempre garantir uma exibição atraente. - ### Menu em código personalizado Escreva o seu menu de raiz em HTML, CSS e JavaScript, com o editor integrado e a GoodBarber App API, para uma navegação que não se parece com nenhuma outra. ## Recursos de design+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-7.50744db5f733.jpg) - ### Galeria de ícones Uma coleção de mais de 1000 ícones criados especificamente por nossa equipe de designers e organizados em 3 conjuntos diferentes está disponível no back office. - ### Ícones personalizáveis Crie uma coleção de ícones próprios, carregando ícones ou imagens diretamente no back office do projeto, no formato .png, 260px x 260px. - ### Temas profissionais O back office GoodBarber oferece 25 temas profissionais produzidos por nossa equipe de designers especializados. Inspirados na nossa filosofia de mobile-first, eles são projetados para se adaptar perfeitamente a cada dispositivo, mantendo-se com as tendências atuais, além de totalmente personalizável. - ### Biblioteca de Fontes Google GoodBarber oferece um conjunto de mais de 400 fontes do Google que podem ser utilizadas diretamente no back office, sem a necessidade de incorporar código extra. - ### Biblioteca Pexels Os clientes do GoodBarber podem acessar a biblioteca de fotos Pexels, diretamente do back office, com mais de 500.000 imagens de alta resolução. - ### Pesquisa avançada de imagens A biblioteca Pexels no back office GoodBarber está equipada com um mecanismo de pesquisa avançado para classificar as imagens por tema, palavra-chave ou cor. - ### Tipos de letra personalizados Carregue os seus próprios tipos de letra — .woff2 para a web app, .ttf ou .otf para as apps nativas — e encontre-os em todos os seletores de tipo de letra do back office, ao lado da biblioteca Google Fonts. - ### Google Material Icons Adicione o conjunto de ícones Google Material à sua app, nos estilos sólido, arredondado, contorno e bicolor, e use-o onde quer que apareçam ícones, incluindo o menu de navegação. ## Seções+ ![](https://portal.ww-cdn.com/portal_static/images/feature_index/design/design-8.c045955904b2.jpg) - ### 25 tipos de seções GoodBarber oferece 25 tipos diferentes de seções para construir os mais variados tipos de projetos. - ### Parâmetros de exibição avançados Para cada seção, escolha as informações a serem exibidas, como a data ou o autor para uma seção de Artigo. - ### Personalização da barra de ferramentas Content apps Para cada seção, escolha as ações disponíveis na barra de ferramentas: comentários, compartilhamento, tamanho do texto e marcador do item. - ### Acesso aos comentários Content apps Permita que os usuários acessem a página de comentários em cada modo de exibição do conteúdo. - ### Compartilhamento social Adicione links de compartilhamento direto às mídias sociais em cada página de conteúdo. - ### Carregamento de página progressivo Gestos intuitivos permitem ao usuário exibir conteúdo extra, sob demanda, ao visitar uma seção. Isso permite uma exibição mais rápida ao mesmo tempo em que melhora a experiência do usuário. - ### Botão flutuante global Um botão de ação que flutua sobre o seu conteúdo e permanece disponível em toda a app, com a etiqueta à sua escolha. ## Pronto para criar a sua app? [Comece grátis](https://pt.goodbarber.com/create/)[Ver preços](https://pt.goodbarber.com/pricing/content/)