Balsamiq Mockups - Introdução

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 processador Intel Atom TM 1,6 GHz ou mais rápido para dispositivos de classe de netbook.

  • 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).
  • 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.