Saiba como criar protótipos ou wireframes de seus sites no Adobe Muse.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Além de ser muito intuitivo, o Adobe Muse ajuda você a criar protótipos de projetos da Web rapidamente que podem ser exibidos on-line. A possibilidade de criar sites de teste significa que você pode compartilhar os links com possíveis clientes, assim, eles poderão revisar os protótipos on-line usando os mesmos navegadores que exibirão a versão final do site. Isso ajuda os clientes a compreenderem como o site final será exibido.

fig01.wireframe.b720
Os wireframes incluem espaços reservados para especificar o local dos elementos da página.

Leia mais para aprender a projetar wireframes, criar uma visualização de plano estruturada e criar elementos de espaço reservado para seu site. Você pode substituir os elementos de espaço reservado por elementos da página real depois que seu conteúdo for finalizado.

Trabalhar com wireframes

Os wireframes mostram os layouts de página para o site e permitem que você clique nos links para ver o fluxo do site. Após a interação com wireframes, visite o site ativo final para compará-los à versão completa. Observe como os elementos de espaço reservado nos wireframes foram substituídos pelos gráficos para a versão final do site.

Se quiser ver como os wireframes foram criados, baixe os arquivos de amostra (ZIP, 4,5 MB). Descompacte o arquivo .zip, abra a pasta e localize o arquivo KevinsKoffeeKartWire.muse. Clique duas vezes para abrir os wireframes no Adobe Muse. Use o modo de exibição Plano para ver como as páginas são organizadas em camadas diferentes para criar o mapa do site. Clique duas vezes nas páginas individuais para abri-las no modo de exibição Design e explorar como elas foram criadas.

O Adobe Muse fornece muitos recursos para ajudar a criar wireframes:

  • O modo de exibição Design inclui uma grade de coluna opcional para ajudar a alinhar os elementos no layout.
  • As ferramentas de desenho flexíveis facilitam a criação de formas de espaço reservado para gráficos.
  • O painel Ativos inclui recursos para ajudá-lo a atualizar imagens de espaço reservado.
  • O Adobe Muse otimiza, corta e exporta todos os arquivos de imagem quando você publica ou exporte um site.
  • Os cabeçalhos de texto e estilos de parágrafo ajudam a criar páginas estruturadas e a alterar facilmente a formatação de texto.
  • O comando Inserir permite salvar o logotipo do cliente diretamente do navegador e inseri-lo no arquivo do Adobe Muse.
fig02.wireframe.b720
Selecione Arquivo > Inserir para adicionar rapidamente elementos de marca para wireframes.

Desenvolver wireframes para aprovação do cliente

Depois de uma reunião inicial com o cliente, você poderá criar um modelo de Wireframe do site que descreve o posicionamento e a funcionalidade dos elementos da página sem gráficos finais do site e formatação de texto. O objetivo de um Wireframe é replicar as estruturas de cada página, criando uma simulação de apresentação da Web sem as cores e o conteúdo visual. Os retângulos são usados como espaços reservados para marcar o local das imagens e de texto escrito ou fontes genéricas são usadas para exibir as áreas da página com conteúdo de texto.

Os wireframes oferecem as seguintes vantagens:

  • Eles permitem que clientes se concentrem na estrutura de um site e entendam os layouts da página.
  • Eles fornecem uma experiência interativa dinâmica, ajudando os clientes a revisarem e aprovarem os sites.
  • Eles servem como uma ferramenta de comunicação para esclarecer o design e a funcionalidade do site.

Além de ser uma ferramenta de design da Web, o Adobe Muse é um excelente protótipo de projetos. Você pode criar uma URL de teste ativo instantaneamente e enviá-la ao cliente em uma mensagem de e-mail, simplificando o processo de aprovação. Mas essa não é a única vantagem da criação de modelos de wireframe no Adobe Muse.

Os wireframes do Adobe Muse levam a produtividade mais além do que as ferramentas de design porque as capacidades de edição de imagens completas e os estilos de parágrafo editáveis facilitam a rápida atualização do arquivo .muse e a conversão de wireframes aprovados na versão final ativa. Em vez de ganhar a aprovação do cliente, jogar fora os wireframes e começar tudo de novo, você pode atualizar os wireframes aprovados imediatamente e adicionar o conteúdo real para criar a versão final. Ao longo do caminho, você pode publicar diversos sites de teste para documentar as iterações e compartilhar os links com seus clientes, enquanto o projeto do site evolui.

Você pode criar sites com wireframes usando o seguinte fluxo de trabalho básico:

  • Crie os wireframes e publique uma versão de teste gratuita.
  • O cliente revisa o site ativo clicando nas páginas.
  • O cliente solicita as alterações ou pede mais informações sobre o design.
  • Após realizar todas as revisões necessárias, o cliente aprova os wireframes.
  • Você atualiza o site de wireframes para acrescentar elementos gráficos e cores.
  • Você atualiza os estilos de parágrafo para formatar o conteúdo de texto existente.
  • O cliente verifica a versão atualizada do site e solicita mais alterações.
  • Você faz as alterações solicitadas.
  • O cliente aprova a versão completa.
  • Você atualiza o site, configura o domínio e coloca o site final no ar.

Examinar a estrutura do site com o modo de exibição Plano no Adobe Muse

Para ver como as páginas do site são colocadas em uma hierarquia que define as camadas superior e secundária de links de navegação, abra o arquivo .muse de wireframes no Adobe Muse para analisá-las. Quando você abre o projeto, vê o modo de exibição Plano, que mostra todas as páginas do site.

fig03.wireframe.b720
As páginas de wireframes são mostradas no modo de exibição Plano.

Observe que há duas camadas, uma superior e outra secundária, representando a hierarquia do mapa do site. A qualquer momento durante o desenvolvimento ou a manutenção do site, você poderá clicar e arrastar essas páginas para reposicioná-las na estrutura do site.

Para criar novas páginas:

  1. Clique no sinal de adição (+) à direita ou na parte inferior das páginas existentes e clique no campo de nome da página para digitar. 

    Seja o mais descritivo possível ao nomear cada página.

  2. Clique com o botão direito na miniatura da página e use as opções de menu que aparecem para duplicar, excluir ou renomear.

    Como alternativa, passe o mouse sobre uma página e clique no ícone de X que aparece no canto superior direito para excluí-la.

  3. Se você estava acompanhando o nosso percurso, tente adicionar, reposicionar e excluir as páginas para modificar o mapa do site. Selecione Editar > Desfazer se quiser reverter o site de wireframe de volta para o que era.

    A interface do modo de exibição Plano é intuitiva e o Adobe Muse rastreia todos os nomes de páginas e mantém os links que aparecem nos widgets de menus. Quaisquer alterações feitas serão atualizadas automaticamente para garantir que os links não quebrem.

Usar estilos de gráficos para criar elementos de espaço reservado que compartilham atributos

Assim como o Adobe Illustrator e o Adobe Photoshop, o Adobe Muse ajuda a criar estilos de gráficos sempre que quiser, criando uma aparência consistente que pode ser aplicada a um conjunto de elementos. Isso é útil para Wireframing (bem como para desenvolver páginas) porque você pode alterar um estilo de gráfico existente para atualizar rapidamente todos os outros elementos da página com o estilo aplicado. Também é possível copiar estilos existentes para criar variações deles.

Para usar estilos de gráficos para aplicar atributos às formas e criar espaços reservados para arquivos de imagens em um site de Wireframe:

  1. Use a ferramenta Retângulo para desenhar três retângulos em uma página no modo de exibição Design.

  2. Selecione um retângulo e edite-o para definir a cor do traçado, cor de preenchimento e opacidade e para adicionar efeitos gráficos, como sombras.

  3. Quando o retângulo for selecionado, clique em Criar novo estilo de gráfico na parte inferior do painel Estilos de gráfico. O estilo é baseado na formatação do retângulo selecionado. Clique duas vezes no novo estilo de gráfico para dar um nome descritivo.

  4. Selecione uma das outras formas retangulares e aplique o mesmo estilo de gráfico clicando no nome do estilo. Repita essa etapa para aplicar o estilo ao terceiro retângulo, de modo que os três retângulos fiquem com o mesmo estilo.

  5. Selecione um retângulo e edite-o para alterar ligeiramente o estilo. Observe que um sinal de adição (+) é exibido no painel Estilos de gráfico perto do nome do estilo editado.

  6. Clique com o botão direito no nome do estilo no painel Estilos de gráfico e escolha Redefinir estilo. Os dois outros retângulos serão atualizados para corresponder ao novo estilo e o sinal de adição (+) desaparece.

  7. Use os estilos de gráfico para formatar rapidamente formas para criar wireframes consistentes e atualizar um conjunto de ativos de sites rapidamente quando um cliente solicita alterações.

Construir páginas da Web estruturadas e formatar texto com estilos de parágrafo

Ao criar um site wireframe, use a ferramenta Texto para inserir quadros de texto e adicione texto aos espaços reservados (ou lorem ipsum) que serão substituídos mais tarde. Se o cliente tiver um site existente, copie o texto diretamente do navegador e cole-o nos quadros de texto. Após criar elementos de texto, você pode usar o painel Texto para aplicar a formatação ao texto.

Usando os estilos de parágrafo, defina as marcas de parágrafo e o texto do cabeçalho para estruturar o conteúdo de texto da página:

  1. No modo de exibição Design, use a ferramenta Texto para arrastar o quadro de texto para a página. Digite ou cole o texto no quadro de texto para preenchê-lo.

  2. Use o painel Texto ou as opções do painel de Controle na parte superior da área de trabalho do modo de exibição Design para definir as opções de formatação, como fonte, tamanho de fonte, cor da fonte e outras propriedades.

  3. Clique em Criar novo estilo de parágrafo na parte inferior do painel Estilos de parágrafos para criar um novo estilo de parágrafo. Clique duas vezes no nome do novo estilo para renomeá-lo de maneira descritiva.

  4. Clique com o botão direito no estilo e escolha Opções de estilo. Use o menu marca de parágrafo para definir uma marca de HTML específica para o estilo do parágrafo, como P, H1, H2 ou H3.

    fig04.wireframe.b720
    Clique com o botão direito no nome de um estilo no painel Estilos de parágrafos e use a caixa de diálogo Opções de estilo para definir o estilo para uma marca de parágrafo ou cabeçalho específico.

  5. Crie mais alguns quadros de texto com texto. Observe que se clicar no nome do estilo de parágrafo quando um quadro de texto estiver selecionado, você aplicará a formatação do estilo de parágrafo a ele. Se depois você selecionar um dos quadros de texto com o estilo de parágrafo aplicado e alterá-lo, o sinal de adição (+) será exibido no painel Estilos de parágrafos perto do nome do estilo. Isso indica que o estilo foi alterado, usando o mesmo comportamento que os estilos de gráfico.

  6. Para atualizar automaticamente todos os quadros de texto com o mesmo estilo, clique com o botão direito no nome do estilo no painel Estilos de parágrafos e escolha Redefinir estilo.

    Como você pôde ver neste exemplo rápido, é possível criar contêineres de texto diferentes e configurá-los para usar estilos específicos criando um design consistente. Quando você atualizar os wireframes para criar a versão final do site, será fácil atualizar os estilos com base nas solicitações do cliente. Criar páginas da Web estruturadas com contêineres de texto é uma prática recomendada para ajudar a melhorar a classificação de otimização do mecanismo de pesquisa.

Observação:

Ao projetar páginas com cores sólidas de fundo, corresponda-as à cor de preenchimento do fundo de quadros de texto. Isso ajuda o Adobe Muse a publicar o conteúdo de texto com mais eficácia. Se o preenchimento do plano de fundo for desconhecido, o alias do texto publicado parecerá menos suave porque o Adobe Muse define a cor do fundo do quadro de texto para transparente. Entretanto, se o plano de fundo da página exibir gradientes ou imagens, deixe a cor de preenchimento de quadros de texto definida como Nenhum.

Atualizar as imagens de espaço reservado com os gráficos finais do site

Depois que o cliente aprovar os wireframes, é possível atualizar o site rapidamente com os arquivos de imagem reais.

  1. Selecione um espaço reservado de imagem na página.

  2. Abra o painel Ativos para localizar o elemento de página selecionado.

  3. Clique com o botão direito no elemento de página. No menu exibido, existem duas opções que ajudam a atualizar o arquivo de imagem, dependendo de como você montou o site wireframe.

    Se você criou um arquivo no Adobe Photoshop ou no Adobe Fireworks e o colocou na página, escolha Editar original para editar o arquivo original do produto usado para criá-lo. Quando você salva o arquivo-mestre e retorna ao Adobe Muse, as instâncias do arquivo inseridas são atualizadas automaticamente no site.

    Como alternativa, se você criou espaços reservados para arquivos de imagem no Adobe Muse com a ferramenta Retângulo, escolha Revincular todas as instâncias e navegue para selecionar um arquivo existente no computador, trocando um arquivo de espaço reservado pela imagem gráfica final.

    fig05.wireframe.b720
    Clique com o botão direito no nome do ativo e escolha Editar original para abrir o arquivo-mestre do espaço reservado no programa de edição de imagens usado para gerá-lo.

  4. Repita essas etapas para substituir todas as imagens de espaço reservado na página com arquivos de imagem reais.

    Observação:

    Ao clicar com o botão direito no nome do ativo no painel Ativos, poderá também escolher a opção Ir para o ativo. Essa opção instrui o Adobe Muse a abrir a página que contém o ativo selecionado para que você possa atualizá-lo rapidamente.

Acessar os arquivos de imagens otimizados gerados pelo Adobe Muse

Além de publicar os sites do Adobe Muse criados no servidor do host, você pode exportar todo o site para obter a pasta de arquivos de imagem cortados e exportados:

  1. Escolha Arquivo > Exportar como HTML.

    A caixa de diálogo Exportar para HTML é exibida.

  2. Selecione o local no computador para exportar os arquivos do site e clique em OK.

Depois de concluir esta operação, o Adobe Muse exporta os arquivos e os salva na pasta local especificada. Navegue até a pasta e abra a pasta de imagem para acessar os arquivos de imagens otimizados. É possível redefinir esses arquivos de imagens para criar boletins, aplicativos móveis, páginas de redes sociais e outros projetos relacionados.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online