Adobe Muse CC torna-se responsivo

No mês passado, a Adobe lançou uma atualização para o Adobe Muse CC, uma popular ferramenta de design visual da web que permite criar sites sem código. Essa nova e poderosa ferramenta está incluída na Creative Cloud.

Como um designer gráfico tradicional, o Adobe Muse abre novas portas para w te trabalhar em uma interface familiar, à la Adobe InDesign, para a criação de sites. Uma limitação do aplicativo anterior a esta atualização estava bloqueado em layouts de largura fixa. O Muse oferece suporte ao design adaptável há algum tempo e adiciona um recurso de sincronização de texto para facilitar o gerenciamento em layouts alternativos, mas estava faltando o componente crítico do design responsivo. Agora você tem uma escolha – você pode decidir qual abordagem (design responsivo ou adaptável) é melhor para seu projeto específico.

Como funciona

Ao criar um novo site, a opção é frontal e central. A Adobe redesenhou a caixa de diálogo Novo site , oferecendo a opção de criar um layout de largura fixa ou fluido.

A escolha óbvia para um design responsivo é a largura fluida. Nada mudou no Modo de planejamento , mas uma vez no Modo de design , há um novo recurso de interface específico para design responsivo: a barra de ponto de interrupção. Este fluxo de trabalho é semelhante ao que a Adobe ofereceu no Edge Reflow e, mais recentemente, no Dreamweaver com seus recursos de bootstrap.

Adicionando pontos de interrupção

Adicionar pontos de interrupção no Muse é simples e intuitivo. No lado direito, você verá um controle deslizante que permite redimensionar a largura da página, simulando o redimensionamento do navegador.

A ideia é adicionar pontos de interrupção quando seu projeto “quebrar”, que podem ser elementos sobrepostos, ficando muito pequenos ou qualquer que seja o caso. O ideal é separar a ideia de adicionar pontos de interrupção para dispositivos específicos e focar estritamente no que o design exige. É realmente um ato de equilíbrio; o principal suporte para o design responsivo é acomodar uma ampla variedade de tamanhos de tela devido à proliferação de dispositivos móveis. É aqui que ser atencioso e fazer um pouco de planejamento pode ajudar muito. Você pode adicionar quantos pontos de interrupção forem necessários. Esteja ciente de que quanto mais você tem, mais você terá que gerenciar.

Para adicionar um ponto de interrupção, você pode clicar no pequeno sinal de mais que aparece na barra do ponto de interrupção.

Depois de adicionar o ponto de interrupção, a barra de ponto de interrupção passa a ser codificada por cores. Você pode gerenciar as propriedades do ponto de interrupção clicando com o botão direito na barra do ponto de interrupção e escolhendo a opção de propriedades do ponto de interrupção.

Isso abrirá a caixa de diálogo de propriedades do ponto de interrupção. Aqui você pode controlar propriedades específicas, desde a cor e / ou posição do ponto de interrupção até adicionar guias de coluna para aparecer para esse ponto de interrupção. Tudo nesta caixa de diálogo é específico para o ponto de interrupção atual e não tem impacto em nenhum outro ponto de interrupção na página.

Você pode navegar rapidamente entre os pontos de interrupção clicando em diferentes seções dentro dele. Em cada ponto de interrupção, você pode começar a reformatar o conteúdo para fazer melhor uso da largura do navegador.

Páginas mestras

As páginas mestras têm seus próprios pontos de interrupção, que respondem independentemente das páginas às quais são aplicadas. Isso dá a você controle específico sobre o conteúdo da página mestra, normalmente um cabeçalho e rodapé.

Esses pontos de interrupção aparecem na barra de pontos de interrupção como pequenos triângulos, para indicar onde os pontos de interrupção estão no mestre. Você pode clicar nos triângulos para posicionar rapidamente o controle deslizante nesse local.

Formatando conteúdo em pontos de interrupção

Ao adicionar um ponto de interrupção, você pode refluir o conteúdo da maneira que desejar. Muitas vezes, você vai adotar uma abordagem em que empilhar o conteúdo ou redimensionar o conteúdo para que fique maior, facilitando a visualização em telas menores. Não é incomum mostrar menos conteúdo. Conforme a tela fica menor, o conteúdo deve se tornar mais específico. No exemplo abaixo, você notará que passei de um layout de três colunas para o ponto de interrupção maior para um layout de duas colunas para um ponto de interrupção menor. As imagens e o texto ficam maiores, facilitando a visualização em uma tela menor.

Existem alguns pontos importantes a serem considerados. Primeiro, se você deseja que menos conteúdo apareça, você não deve excluir o conteúdo indesejado no ponto de interrupção menor. Você tem que lembrar que esta é uma página; ele reflui para alterar seu layout para vários tamanhos de tela, mas ainda é um documento HTML. Portanto, excluí-lo em qualquer ponto de interrupção o exclui da página. Em vez disso, você pode ocultar as camadas do conteúdo em um ponto de interrupção específico ou clicar com o botão direito do mouse no elemento e escolher Ocultar no ponto de interrupção . Isso tornará aquele conteúdo invisível no ponto de interrupção selecionado, mas inalterado em outros.

Também é importante entender como o conteúdo é redimensionado no Muse ao trabalhar com esse conjunto de recursos responsivos. Por padrão, os elementos que você cria no Muse serão dimensionados na largura. Os elementos colocados no documento, como uma imagem, por exemplo, escalarão a largura e a altura proporcionalmente. Você pode controlar essas configurações na barra de controle quando um elemento é selecionado.

Um comportamento que você pode encontrar são os objetos “flutuando” um pouco quando a janela do navegador está sendo redimensionada. Nessas circunstâncias, a Adobe adicionou uma nova opção chamada Fixação de página. Isso não deve ser confundido com as opções de Fixação de navegador disponíveis nas versões anteriores, que “fixariam” um elemento para o navegador; se o usuário rolar a página para baixo, o elemento fixado permanecerá bloqueado na posição com o conteúdo rolar abaixo dele. A fixação de páginas é um pouco diferente. O elemento fixado usando esta opção ainda rolará com o navegador, mas se o elemento estiver localizado no centro da página, independentemente da largura do navegador, o elemento permanecerá bloqueado no centro da página, embora ainda seja dimensionado em tamanho quando as propriedades de dimensionamento são definidas como tal.

Migrando um site para responsivo

Se você já trabalhou com o Muse e tem um site de largura fixa, é possível migrá-lo para um layout responsivo. O que é importante é mudar as propriedades do seu site. Para fazer isso, selecione Arquivo & gt; Propriedades do site para abrir a caixa de diálogo Propriedades do site . Aqui você pode alterar o layout de Largura fixa para Largura fluida.

Em seguida, você precisa alterar os atributos dos elementos que deseja que sejam fluidos. Você pode fazer isso removendo quaisquer pinos previamente estabelecidos. Você deve então clicar com o botão direito no objeto e selecionar redimensionar. Isso lhe dará várias opções de resposta para selecionar.

Conclusão

Existem algumas coisas que não estão prontas para um “horário nobre responsivo” no Muse. Os efeitos de rolagem ainda não são suportados. O que significa que se você precisar usar esses tipos de efeitos, ficará preso a uma solução adaptativa por enquanto. Além disso, nem todos os widgets são responsivos, embora o pessoal da Adobe esteja trabalhando nisso e eu esperaria que essas duas limitações fossem removidas com atualizações futuras.

O novo recurso responsivo definido no Adobe Muse CC é uma adição bem-vinda a uma ferramenta de design visual da web já poderosa. Ele oferece aos designers a capacidade de criar conteúdo responsivo visualmente e em um ambiente intuitivo e familiar.

Originalmente publicado em www.webdesignerdepot.com.