Começando com Wireframing usando Balsamiq

O wireframing pode ser idealmente definido como uma atividade para visualizar o layout de uma tela. Existem muitas ferramentas de wireframing presentes no mercado hoje, mas a mais fácil e mais utilizada é o Balsamiq – nosso tópico de hoje. Mas, antes disso, vamos primeiro entender por que precisamos fazer o wireframe?
Quando se trata de desenvolvimento de software, é vital saber como ficará o produto final, mesmo antes do início do desenvolvimento. Essa visualização inicial do produto serve como uma diretriz para todas as partes interessadas, além de ajudar a evitar qualquer ambiguidade que possa surgir no futuro.
Antigamente, parágrafos de textos eram usados ​​para elicitar os requisitos de software.

No entanto, esses pedaços de texto não foram suficientes para iniciar a visualização – pois cada pessoa que lia os requisitos o visualizava de alguma forma que poderia ser diferente do resto. Essa ambiguidade leva a muita confusão e resulta em desperdício de tempo, dinheiro e esforços. Para ajudar a causa, o wireframing entra em cena. Devido à facilidade que traz para o processo geral de desenvolvimento.

Neste artigo, ajudaremos você a entender perguntas como:

• • O que é Balsamiq?

• • Como começar com isso?

• Como exportar o wireframe/mockup final?

O que é Balsamiq?

O wireframe, em sua essência, pode ser realizado em um guardanapo usando uma caneta. No final do dia, é apenas um esboço, afinal. No entanto, quando se trata de colaborar e compartilhar com profissionais, é melhor mudar para uma das muitas ferramentas presentes no mercado hoje. Uma dessas ferramentas é o Balsamiq – é simples de usar e fornece muitos recursos para construir um wireframe útil.
Balsamiq é uma excelente ferramenta e cumpre todos os requisitos de wireframing e colaboração. Ele possui um conjunto exclusivo de recursos que permitem que você faça wireframes rápidos, obtenha feedbacks em tempo real, incorpore esses feedbacks e melhore o wireframe. Isso acaba por alinhar toda a equipe com a funcionalidade do aplicativo em relação ao layout.
Com o Balsamiq, colaborar com membros da equipe localizados remotamente também é muito fácil, pois pode exportar wireframes em formatos PNG ou PDF que permite flexibilidade ao compartilhar os wireframes.
10 ferramentas de wireframe mais eficazes

Introdução ao Balsamiq

Balsamiq está disponível para Windows e Mac OS e pode ser baixado online . Depois de baixar a ferramenta e abri-la, você verá uma tela como:

Conforme mostrado na captura de tela acima, a interface do usuário do Balsamiq é dividida nas quatro partes a seguir.

• • Navegador

• • Biblioteca de IU

• • Inspetor

• Espaço/área da estrutura de arame

A seção destacada em vermelho é para alternar entre o inspetor de seções e as informações do projeto. Os recursos estão incluídos na biblioteca de interface do usuário, vamos dar uma olhada em detalhes.

A biblioteca da interface do usuário

A biblioteca de interface do usuário é categorizada com base em diferentes elementos de tela.
Vamos nos familiarizar com as diferentes categorias de elementos de tela disponíveis no Balsamiq.

• • Todos − Clicar nele mostrará todos os elementos de interface do usuário que o Balsamiq oferece. Rolar horizontalmente permitirá que você os visualize ou use.

• • Ativos - Esta seção inclui as coisas que você pode carregar e mais tarde para uso em seus wireframes.

• • Grande - Isso inclui os elementos de tela razoavelmente maiores, como espaços reservados, janela do navegador, iPhone e iPad.

• • Botões - Esta seção inclui todos os controles de botão que você precisa em um wireframe, como - botões de ação, caixas de seleção, etc.

• • Comum − Esta seção compreende as formas usadas para denotar as interações mais comuns.

• • Containers - Inclui as opções como Window, FieldSet, Browser, etc. Como o nome sugere, inclui Window, FieldSet, Browsers, etc.

• • Formulários - Esta categoria contém todos os controles relacionados a formulários, como elementos de entrada, botões de opção, botão de envio e outros.

• • Ícones - Contém o conjunto de ícones que você pode usar para denotar uma operação específica. Por exemplo, um ícone de disquete em vez do botão salvar, etc. Balsamiq oferece uma enorme coleção de ícones gratuitos que podem ser usados ​​para várias ações.

• • iOS - Contém os controles de interface do usuário específicos para o iOS.

• • Layout – Layouts são extremamente importantes quando você precisa representar uma página/recurso básico. Esta categoria inclui a maioria dos layouts como guias verticais / horizontais, acordeões, etc.

• • Markup - Isso é usado para adicionar um comentário em um controle específico no wireframe. Ele também contém textos explicativos que são usados ​​para mostrar a conectividade em muitos dos cenários.

• • Mídia - Todos os controles de interface do usuário relacionados à mídia estão disponíveis nesta seção, o que ajuda a mostrar uma imagem/vídeo/som no wireframe.

• • Símbolos − Esta é uma coleção de componentes reutilizáveis ​​que podem reduzir o tempo para criar os componentes comuns.

• Texto − Como o nome diz, contém todos os controles de interface do usuário relacionados ao texto. Recursos como um bloco de texto, caixa de combinação, barra de links, etc., estão disponíveis nesta categoria.

O conhecimento desses componentes, juntamente com o fato de que o Balsamiq permite que você arraste e solte facilmente os componentes, ajudará você a criar wireframes de sua escolha de forma rápida e eficaz.
Quais destas ferramentas de gerenciamento de produtos você já está usando?

Agora, suponha que para o seu site, você criou um wireframe dessas quatro páginas – Home, Products and Services, Contact us e About us. Agora, precisamos realizar outra tarefa essencial que fará com que nosso wireframe pareça um pouco mais com um site completo e menos com um esboço. Para isso, precisamos vincular nossas páginas, pois idealmente elas estariam vinculadas em um site. A vinculação também ajuda você a alternar facilmente entre os wireframes.

Vinculando as páginas

Esta etapa ajudará seus wireframes a aparecerem em ordem - como em qualquer site. Para realizar essa navegação, clique na barra de links no canto superior direito .
Primeiro, vamos começar conectando a página inicial à página de produtos e serviços:

• • Ir para a página inicial

• Clique na barra de links no canto superior direito

Consulte o painel de propriedades

A seção destacada em verde mostra os vários wireframes que você criou até agora. Vamos começar ligando a página inicial. Clique no menu suspenso para ver a lista de modelos disponíveis. Ele mostrará uma lista como abaixo:

Na lista suspensa exibida, selecione Produtos e serviços para criar um link da Página inicial para Produtos e serviços. Da mesma forma, repita o mesmo procedimento para as outras páginas.
A arte da tomada de decisões: para gerentes, líderes e pessoas de produtos

Exportando o Wireframe

O wireframe que você acabou de criar não serve para nada se você não puder apresentá-lo ao seu cliente/usuário final em um formato mais comum, como PDF ou PNG. Para isso, Balsamiq permite exportar modelos facilmente em qualquer um desses formatos.
Neste exemplo, estamos exportando nossa maquete em formato PDF. Para isso, clique no menu Projeto, depois clique em Exportar para PDF.
Você terá uma tela como a mostrada abaixo:

Marque a caixa de seleção – “Mostrar dicas de vinculação”.
Em seguida, clique em Exportar para PDF . Ele mostrará um pop-up onde você pode especificar um local para onde deseja que o PDF seja exportado. O progresso será mostrado em uma barra de progresso como abaixo.

Quando a exportação estiver concluída, haverá uma caixa de confirmação. Ao clicar na caixa, você poderá visualizar o PDF junto com todas as navegações que você configurou.
Construindo Produtos Mínimos Viáveis ​​– Quanto é Demais?

Empacotando…
Não há como negar a importância do wireframing no mundo do desenvolvimento de aplicativos hoje. Eles fornecem muitos recursos que acabam facilitando sua carga de trabalho geral - não há absolutamente nenhuma escassez de ferramentas de wireframing, mas o Balsamiq é uma das poucas ferramentas que atendem às suas necessidades gerais!

Aprenda cursos de MBA on-line das melhores universidades do mundo. Ganhe Masters, Executive PGP ou Advanced Certificate Programs para acelerar sua carreira.