Projetando a página inicial

Step 1- Abra Mockups Balsamiq instalados em seu computador. Na Biblioteca da IU, no controle Quick Add, digite -Browser.

Step 2 - Assim que selecionarmos Browser, o controle estará disponível na área do wireframe. Clique no botão de alternânciaInspector para ver os detalhes dos controles da IU no painel direito.

Na seção do inspetor, insira 0 (zero) para ambos Position X e Ycaixas de texto. Isso colocará o controle do navegador no canto do espaço do wireframe para melhor visibilidade.

No Size caixas de texto, digite 1024 como o width e 768 como o height.

A janela do navegador se estenderá por todo o espaço do wireframe usando a opção de zoom acima da seção da biblioteca da IU, defina o nível de zoom para “Fit in Window”.

Depois que todos os parâmetros acima forem definidos, poderemos ver a tela a seguir.

Step 3 - No espaço em branco abaixo da barra de endereço do wireframe, vamos criar o cabeçalho do site.

Para começar com o cabeçalho, vamos criar um logotipo. Nos wireframes, geralmente é suficiente representar o posicionamento do controle de tela. Por exemplo, vamos usar o controle Image e nomeá-lo como“Logo”. Na caixa de adição rápida, digite“Image”. O controle da imagem será destacado. Selecione-o para colocá-lo na área do wireframe.

Na caixa de diálogo de propriedades à direita, insira o tamanho - width 139 e height como 93. Posicione a imagem em X-eixo em 16 e em Y-eixo em 94.

Uma vez feito isso, devemos ser capazes de ver o espaço do wireframe conforme mostrado abaixo.

Step 4 - Abaixo da imagem, para melhor entendimento do visualizador, insira um Labelda biblioteca de UI; nomeie-o como “Logotipo da empresa”. Na guia de propriedades à direita, defina o rótulosize ter 15 anos.

Depois de concluir esta etapa, você deverá ser capaz de ver a imagem e o texto conforme mostrado abaixo.

Step 5- Agora vamos inserir o título da Empresa, em fonte relativamente grande. Na caixa Quick Add com UI library, digite“Title”. O título com“A Big Title”o texto será mostrado na tela. Clique duas vezes no texto para renomeá-lo. Digite o texto “Nome da sua empresa”.

Para o propósito deste tutorial, a posição exata em X e Y-eixo é fornecido. Você pode arrastar o texto para a posição que desejar.

Na seção de propriedades à direita, atualize o valor sob a posição para X como 626 e para Y como 107.

Veremos o cabeçalho se moldando conforme mostrado na tela abaixo.

Step 6 - Adicione um separador horizontal sob o texto e título do logotipo para separar o cabeçalho do conteúdo do corpo da página.

Na caixa Quick Add, digite “rule”. Vai te mostrarH.Rule e V.Rule. Significa regra horizontal e vertical. SelecioneH.Rulee insira a regra abaixo do título e texto do logotipo arrastando o mouse. Usando as alças na regra, você pode aumentar / diminuir o tamanho da regra.

Aproxime um nível para ver a régua horizontal inserida. Posicione-o conforme mostrado na tela abaixo.

Step 7 - Da mesma forma, insira a seção Produtos e Serviços, usando os controles da IU - block of text e title. Use régua horizontal para separar a seção. Você deve ser capaz de ver o espaço do wireframe conforme mostrado abaixo.

Step 8 - Nas mesmas linhas, adicione a seção Visão da Empresa usando os mesmos controles de IU acima.

Step 9 - Adicionar Link Barnesta página para fins de navegação. Hoje em dia, é uma prática comum usar barras de links para facilitar a navegação. Use a caixa Quick Add para inserir uma barra de links. Os valores são atualizados clicando duas vezes na barra de guias inserida na página. Adicione valores separados por vírgulas para links de páginas diferentes. Posicione a barra de links conforme mostrado abaixo.

Isso conclui o design do wireframe da página inicial. Vimos como é fácil e simples adicionar controles de IU e começar com o layout de IU de um site.

Salve o arquivo do Projeto Balsamiq indo para Project Menu → Save Project.