Balsamiq Mockups - Guia rápido

Quando se trata de desenvolvimento de software, é mais do que importante saber como será a aparência do software real, muito antes do início do desenvolvimento real. Esta é uma atividade crítica, pois serve de diretriz para todas as partes interessadas no projeto de software.

Tradicionalmente, parágrafos de texto têm sido usados ​​para descrever ou extrair o requisito de software. Porém, quando se trata de compreensão desses textos, cada indivíduo terá sua própria maneira de visualizar o requisito. Isso leva a uma confusão nas equipes de desenvolvimento de software e o custo final é em termos de desperdício de esforço, dinheiro e tempo.

Wireframing pode ser definido como uma atividade de visualização do layout de uma determinada tela (mobile ou web). Nos últimos anos, tem havido uma demanda crescente por wireframes de telas / páginas para avaliar sua aceitabilidade.

Por que Wireframing?

Wireframing é necessário para economizar tempo investido no entendimento de um requisito de software. Como se costuma dizer, uma imagem vale mais do que mil palavras, o Wireframing fornece um vislumbre da necessidade de qualquer recurso / página, visualizando efetivamente o layout da tela e os elementos. No final, também ajuda as equipes de desenvolvimento a serem orientadas para o objetivo final comum.

O proprietário da atividade de wireframing geralmente é um analista de negócios / designer de interface de usuário / designer de interação. Este membro da equipe deve colaborar com a equipe antes, depois e durante o processo de wireframing.

Balsamiq como ferramenta de wireframing

Para um profissional designado com uma atividade de wireframe, faz sentido economizar tempo usando uma ferramenta. Uma das ferramentas mais eficazes para fazer Wireframing é usar uma caneta e um lápis simples! Isso não requer nenhum investimento! No entanto, quando se trata de comunicá-lo às equipes, precisamos de uma aparência semelhante a uma caneta e lápis, mas com recursos adicionais, como compartilhamento por e-mail ou meios semelhantes.

Balsamiqserve como uma excelente ferramenta, cumprindo todos os requisitos de Wireframing, colaboração e criatividade. Seu conjunto exclusivo de recursos permite que o membro da equipe faça wireframes rápidos e obtenha um consenso sobre o recurso a ser desenvolvido. Isso eventualmente terá a equipe alinhada com a funcionalidade em termos de layouts.

Ele também permite a colaboração entre diferentes equipes, de modo que um membro da equipe possa colaborar com diferentes equipes co-localizadas ou remotamente localizadas. Sua capacidade de exportar os wireframes em formatos PDF / PNG permite uma flexibilidade, ao compartilhar os wireframes com as equipes.

Agora sabemos como o Balsamiq é eficiente para criar wireframes dinamicamente. Se utilizarmos esse tempo no início do desenvolvimento do software para definir as expectativas das partes interessadas, haverá uma maior satisfação entre as partes interessadas, considerando a quantidade mínima de tempo necessária para criar o wireframe. Esta é a principal razão pela qual o Balsamiq é usado pela maioria das organizações de produto, onde atender às relações com o cliente / partes interessadas é crucial.

Para um gerente de produto / analista de UX, os Balsamiq Mockups fornecem uma plataforma para agregar valor no início do desenvolvimento. Usando seu rico conjunto de ferramentas, o Gerente de Produto / Analista de UX pode conduzir o produto perfeitamente para o seu sucesso.

Instalando Balsamiq

Para instalar o Balsamiq, certifique-se de ter os seguintes requisitos.

Para executar o Balsamiq em seu computador, o Adobe Air 2.6 precisa ser executado. Ele funciona bem na maioria dos computadores e sistemas operacionais. Os requisitos mínimos de sistema para Adobe Air 2.6 são fornecidos abaixo -

Para Windows

  • Um processador compatível com x86 de 2,33 GHz ou mais rápido ou Intel Atom TM 1,6 GHz ou mais rápido para dispositivos da classe de netbooks.

  • Microsoft® Windows Server 2008, Windows 7, Windows 8 Classic ou Windows 10.

  • No mínimo 512 MB de RAM (1 GB recomendado).

  • AIR SDK Development Suporta Microsoft® Windows 7 e superior, apenas 64 bits.

Para Mac

  • Processador Intel® Core TM Duo 1,83 GHz ou mais rápido.
  • Mac OS X v10.7 e superior.
  • No mínimo 512 MB de RAM (1 GB recomendado).
  • O AIR SDK Development suporta Mac OS 10.9 e superior, apenas 64 bits.

Link de referência - Requisitos do sistema Balsamiq

Baixando Balsamiq

Podemos baixar o Balsamiq no link a seguir - Balsamiq Mockups para Desktop Balsamiq está disponível no Windows e Mac OS.

Interface de usuário

Assim que a instalação for concluída, poderemos abrir o Balsamiq em nosso computador. Veremos a tela a seguir pela primeira vez quando executarmos o Balsamiq.

Conforme mostrado na imagem acima, a interface do usuário para Balsamiq é dividida nas quatro partes a seguir.

  • Navigator
  • Biblioteca UI
  • Inspector
  • Espaço / área de wireframe

Na captura de tela, a seção destacada em vermelho é a chave para as seções Inspetor / Informações do projeto. Com base na seleção, devemos ser capazes de ver o Inspetor / a seção de informações do projeto (3).

Biblioteca UI

Conforme mostrado na captura de tela a seguir, a Biblioteca da IU é categorizada de acordo com os diferentes elementos da tela. Você pode rolar horizontalmente na seção “Todos” e ter uma ideia sobre os elementos da tela disponíveis no Balsamiq.

Vamos nos familiarizar com as diferentes categorias de elementos básicos da tela disponíveis no Balsamiq.

  • All- Isso cobre todos os elementos da IU presentes no Balsamiq. Você pode rolar horizontalmente para ver / usá-los.

  • Assets - Para fins de introdução, esses são os ativos personalizados carregados pelo usuário.

  • Big- Esta categoria inclui os elementos da tela, que são razoavelmente altos em tamanho / aparência. Você pode ver os elementos como marcadores de posição, janela do navegador, iPad, iPhone nesta categoria.

  • Buttons- Inclui todos os controles de botão usados ​​em wireframes móveis / web. Um exemplo típico será botão de ação, caixa de seleção, etc.

  • Common - São diferentes formas / controles usados ​​para denotar as interações mais comuns.

  • Containers - Como o nome sugere, inclui janela, conjunto de campos, navegadores, etc.

  • Forms - Todos os controles da IU relacionados a um formulário estão presentes nesta categoria.

  • Icons- Em qualquer ponto, você pode precisar denotar uma operação específica por um ícone. Por exemplo, no passado recente, temos o ícone de disquete com o botão Salvar. Esta categoria de controles fornecerá os ícones necessários para esta operação. Balsamiq tem uma enorme coleção de ícones; sinta-se à vontade para verificá-los!

  • iOS - Os controles da IU, específicos para o sistema operacional móvel Apple iOS, estão disponíveis nesta categoria.

  • Layout- Ao representar uma página / recurso básico, torna-se importante representar o layout básico. O layout da categoria inclui a maioria deles, como Accordian, Guias horizontais / verticais, etc.

  • Markup- Suponha que você queira adicionar um comentário sobre um controle específico no wireframe. A caixa de comentários está disponível na marcação. Além disso, os textos explicativos são usados ​​para mostrar a interconectividade em muitos dos cenários. Ele está disponível na categoria de marcação.

  • Media - Quando se trata de mostrar uma imagem / som em nosso wireframe, controles de IU relacionados estão disponíveis na categoria Mídia.

  • Symbols - Os símbolos são componentes reutilizáveis, o que pode reduzir o tempo de criação dos elementos mais comuns.

  • Text - Como o nome vai, todos os controles da IU relacionados ao texto ou parágrafos, como Barra de links, Bloco de texto, Caixa de combinação estão disponíveis nesta categoria.

No próximo capítulo, faremos o primeiro projeto em Balsamiq.

Vamos criar nosso primeiro projeto em Balsamiq. Antes de pularmos para o Wireframing, torna-se mais do que importante planejar as telas / página, para que nossos esforços sejam focados. Percorreremos o site de uma empresa enquanto criamos os wireframes.

Conceito: Um Site de Empresa

Para o propósito deste tutorial, criaremos um site da empresa. Este wireframe pode se relacionar a muitos sites de empresas de pequeno / médio porte.

Então, o que acontece na fase de planejamento?

Na fase de planejamento, investimos tempo para fazer um brainstorm sobre o que todas as páginas estarão presentes no site e os conteúdos de cada uma. Considere as seguintes páginas do site.

No próximo capítulo, veremos como usar Balsamiq para projetar essas quatro páginas.

Neste capítulo, discutiremos como usar Balsamiq para projetar as quatro páginas a seguir para nosso site -

Agora que criamos as páginas, a parte crítica é fazer com que elas apareçam em uma ordem, como uma página da web. Em nosso exemplo, a navegação é alcançada usando olink bar no canto superior direito.

Vamos ver como podemos conectar a primeira página Home e a segunda página Products and Services.

  • Vamos para Home página

  • Clique no link bar

  • Consulte o properties painel

Conforme destacado, do Links seção, clique no menu suspenso para Products. Ele irá mostrar a você a lista de maquetes disponíveis. As opções são mostradas abaixo.

Na lista, clique em Products and Services.

Uma vez feito para o Home Page, repita o mesmo procedimento para outras páginas - About Us, Contact Us. Observe isso nas outras páginas; teremos o link de navegação inserido para as páginas diferentes da selecionada.

Neste capítulo, veremos como reunir todos os mockups do projeto e exportá-los em imagens PNG ou arquivo PDF.

Se você fosse mostrar o wireframe que criou para um usuário / cliente final, obviamente gostaria de mostrar esse wireframe em um formato mais comum, por exemplo, um PDF. Para este propósito, Balsamiq Mockups oferece uma flexibilidade paraexport the mockups in the form of PNG images or PDF file.

Vamos exportar a maquete em PDF. Para fazer isso, clique no Menu Projeto e em Exportar para PDF. Ele mostrará uma tela conforme mostrado na imagem abaixo.

Na tela acima, marque a caixa de seleção - “Mostrar dicas de vinculação”. Clique em Exportar para PDF. Ele mostrará um pop-up solicitando um local para exportar o PDF. Depois de fornecer um local, o PDF será exportado para o local especificado. O progresso será mostrado na barra de progresso conforme mostrado abaixo.

Haverá uma caixa de confirmação, quando o PDF for exportado conforme mostrado abaixo.

Ao clicar nesta mensagem, será mostrado o PDF. No PDF, você pode experimentar a navegação na barra de links destacada.

Para obter a melhor experiência de visualização e navegação, use o Adobe Acrobat Reader.