Libre Designers

Iremos começar a criar uma interface para um site chamado Guia do Mochileiro do Software Livre. O Guia do Mochileiro do Software Livre é um site exemplo que mostra os melhores softwares disponíveis do nosso amado GNU/Linux filtrados de acordo com as avaliações dos usuários. O objetivo da criação desse site é treinarmos um fluxo que vai do design, passando pelo desenvolvimento web front-end e terminando com a integração no backend do Winter CMS. Será uma longa jornada, mas acredito que aprenderemos e nos divertiremos muito no processo.

Sobre wireframes, protótipos e mockups

Para iniciarmos, é importante entender as diferenças entre wireframes, protótipos e mockups. O wireframe é uma representação de menor fidelidade de um design. O protótipo é uma representação interativa de média a alta fidelidade do produto final. Finalmente, o mockup é uma representação estática de média a alta fidelidade do produto final. Explicando melhor,

• O wireframe é uma representação de baixa fidelidade do design. Ele é a espinha dorsal do seu design e deve conter as partes mais importantes dele como, por exemplo, os principais blocos de conteúdo, a estrutura da informação e a visualização básica que o usuário irá interagir.
• O protótipo é uma representação de média a alta fidelidade do produto final, simulando a interação da interface e contendo a experiência com o conteúdo e as principais interações que devem existir no produto final.
• Mockup é uma representação estática de média a alta fidelidade do produto final, muitas vezes possuindo o design do resultado final, sendo muito útil para visualização estática.

Por que usar wireframes?

Wireframes são usados principalmente para servir de comunicação entre os membros do projeto e devem ser feitos rapidamente para comunicação das idéias, ilustrando apenas as partes mais importantes. Geralmente são usados no início do projeto.

Na imagem abaixo, você pode visualizar um exemplo de wireframe que iremos montar logo mais.

Pencil Project

O projeto Pencil se define como uma ferramenta de Código Aberto de prototipação de GUI [ Graphical User Interface (Interface Gráfica com o Usuário) ]  disponível em todas as plataformas e está sob a licença GPLv2.

Instalação

Para instalar o Pencil basta clicar neste link e fazer o download referente ao seu sistema operacional ou distribuição GNU/Linux. No caso, se seu sistema for baseado em ubuntu 64 bits você vai baixar .deb 64 bit ou se for baseado em fedora 64 bits o .rpm 64 bit (ver imagem abaixo).

Para instalar o .deb, navegue no terminal até a pasta onde está o .deb e execute:

sudo dpkg -i pencil_3.1.0.ga_amd64.deb

Caso o pencil não tenha sido instalado, faltando alguma dependência, execute:

sudo apt-get -f install

Caso queira remover o pacote instalado, escreva no terminal:

sudo apt-get remove pencil

Para instalar o .rpm , navegue no terminal até a pasta onde está o arquivo .rpm e execute:

sudo dnf install pencil-3.1.0.ga-1.x86_64.rpm

Caso queira remover o pacote instalado, escreva no terminal:

sudo dnf remove pencil

Configurações iniciais

Depois de instalado o Pencil, abra-o pelo lançador de aplicativos ou no terminal execute o comando pencil.

A tela inicial do aplicativo será exibida. Caso a resolução da tela esteja muito alta, é interessante diminuirmos um pouco a escala do texto para navegar melhor na interface do pencil. Para isso, clique no ícone do hamburguer no canto superior esquerdo e vá em settings (ver imagens a seguir).

Altere o text scale para uma porcentagem que fique agradável na sua tela (ver imagem a seguir)

Clique na aba shape e clique no botão manage collections  (ver imagem a seguir).

Deixe ativas as seguintes coleções, pois serão as únicas que iremos precisar inicialmente (ver imagem a seguir):

• Common Shapes
• Basic Web Elements
• Desktop - Sketchy Gui

Caso seja necessário podemos inserir ou remover coleções posteriormente.

Começando o projeto

Para criar um novo documento basta clicar no botão Create a New Document (ver imagem a seguir).

Um documento em branco será criado (ver imagem a seguir).

Utilize as teclas de atalho ctrl + s para salvar. Dê um nome descritivo. O nome que vou escolher é mochileiro-software-livre (ver imagem a seguir).

Vá nas propriedades da página atual (no canto inferior esquerdo, clique com o botão direito na região Untitled Page e no menu que surge escolha a opção properties), renomeie o Page Title para Home e ajuste o Page Size para 1200px de largura por 1600px de altura (ver imagens a seguir):

Vamos usar um sistema de grid semelhante ao feito para o inkscape no artigo Sistemas de Grid com Inkscape. Eu criei uma imagem que servirá como grid. Clique aqui para baixar a imagem.

Salve-a numa pasta acessível e deixe a janela do seu gerenciador de arquivos num tamanho pequeno e por cima da janela do Pencil. Agora clique no arquivo grid1200.png segure e arraste para a janela do Pencil (ver imagens a seguir).

Com o grid selecionado, na parte superior coloque a localização (x,y) para (0,0) e o tamanho horizontal e vertical para 1200px de largura por 1600px de altura (ver imagens a seguir).  

Em seguida, vamos bloquear o grid para não nos atrapalharmos ao montarmos o wireframe. Para isso, com a imagem do grid selecionado clique com o botão direito sobre a imagem do grid e escolha a opção locked (ver imagem a seguir).

Inserindo os elementos

Header

Para o Guia do Mochileiro do Software Livre, acho que seria interessante colocar uma imagem desfocada de fundo no cabeçalho com o título e subtítulo do site por cima da imagem. Então, vamos inserir uma imagem e redimensioná-la para ocupar toda a largura. Para isso, na coleção Desktop Sketchy GUI clique, segure e arraste o item Image para o canvas (ver imagem a seguir).

Redimensione a imagem para 1200px de largura por 150px de altura e posicione-a na origem (0,0) (ver imagem a seguir).

Vamos bloquear o background. Para isso, clique com o botão direito no elemento Image e escolha a opção Locked.

Na coleção Basic Web Elements, vamos inserir um título de cabeçalho H1 (ver imagem a seguir).

Clicando duas vezes em cima para alterar o conteúdo do texto. Aparecerão ferramentas de contexto em que você pode alterar fonte, alinhamento, entre outras propriedades. Escreva o texto "Guia do Mochileiro do Software Livre" e escolha a fonte Open Sans tamanho 3.

Vamos inserir agora um subtítulo com slogan "Coletânea dos melhores softwares para o seu GNU/Linux". Para isso, vamos arrastar o elemento H2 para o canvas (ver imagem a seguir). 

Novamente, clique 2 vezes em cima do texto Heading Level 2. Surgirá uma caixa de ferramentas de contexto. Selecione a fonte Open Sans e tamanho 2 (ver imagem a seguir).

Alinhe o títúlo e o subtítulo com o início da segunda coluna do nosso grid.

Depois de alinhado, com a tecla ctrl pressionada selecione o títúlo e o subtítulo e pressione a tecla de atalho ctrl+g para agrupar (você também pode clicar com o botão direito e selecionar a opção de agrupar). Agrupamentos são úteis, entre outras coisas, quando queremos movimentar ou duplicar os elementos agrupados juntos.

O Guia do Mochileiro do Software Livre funcionará melhor com a interação de usuários. Os usuários poderão cadastrar novos softwares livres e poderão avaliar os softwares já cadastrados que farão com que os softwares com pontuação mais alta sejam exibidos primeiro. Precisamos de um botão que leve para a tela de cadastro de usuários e outro que leve para a tela de login, para usuários já cadastrados. Vamos fazer isso agora.

Ainda na coleção Desktop - Sketchy Gui selecione o Button e arraste para o canvas na altura do elemento H1.

Nas propriedades do elemento botão, altere o conteúdo do campo content para "Login", modifique a fonte para Open Sans tamanho 16 e alinhamento centralizado (ver imagem a seguir).

Ainda com o botão selecionado, com a tecla shift pressionada clique, segure e arraste o botão login para a esquerda (ver imagem a seguir). Esses comandos irão duplicar o botão original (ver imagem a seguir).

Eu estava pensando em colocar o botão mais a direita como login, mas acho que é melhor colocar o botão da esquerda.

Selecione o botão da direita e troque seu conteúdo para "Cadastre-se" (ver imagem a seguir).

Temos o Header finalizado.

Seção Principal

Na seção principal, eu quero exibir uma lista de programas. A idéia é que cada programa seja um card com uma imagem de fundo e título e pontuação (em estrelas) em cima do fundo. Quando o usuário colocar a seta do mouse em algum card será feita uma animação (a definir) com o fundo. Além disso, eu quero que tenha uma lista de categorias com que o usuário possa listar os programas da categoria quando selecionado. A princípio, a lista de programas estará sem filtro, mostrando programas de todas as categorias.

Barra de Categorias

As categorias que pensei inicialmente são:

• Distribuições
• Jogos
• Produtivadede
• Design
• Áudio
• Vídeo

Vamos começar inserindo botões que servirão de filtros das categorias. Insira um primeiro botão (ver imagem abaixo).

Altere as propriedades (conteúdo, fonte e tamanho da fonte) do elemento botão (ver imagem abaixo).

Redimensione o botão para que fique um tamanho agradável. No meu caso, 135 pixels de largura por 35 pixels de altura ficou um tamanho legal (ver imagem abaixo).

Duplique o botão 5 vezes (para isso com a tecla shift pressionada clique e arraste o botão que queremos fazer a cópia). Ao duplicar, a cópia do elemento guarda as informações das propriedades do elemento de origem.

Renomeei os botões clicando duas vezes em cima de cada um e inserindo os nomes (ver imagem a seguir).

Arraste o elemento Sketchy Triangle para o canvas.

Remova o texto clicando das vezes no elemento Sketchy Triangle e apagando seu conteúdo. Redimensione-o para que sua altura fique to tamanho do botão de categoria e duplique-o. Ao duplicar clique 2 vezes no objeto duplicado e aparecerá alças de rotação. Rotacione-o 180 graus (Ver imagem a seguir).

Alinhe os elementos como mostrado na figura abaixo.

Selecione todos os elementos que compõem a barra de categorias (fazendo uma caixa de seleção ou pressionando ctrl e clicando individualmente em cada botão) e clique no botão Align Center Vertically e Make Same Horizontal Gap.

Ainda com os elementos da barra de categorias selecionados aperte a tecla de atalho ctrl + g para agrupar.

Monstruário de Softwares Livres

Agora iremos criar a área onde os diferentes softwares são exibidos, ordenados por avaliações dos usuários. Cada software vai ficar delimitado em um card. Cada card terá um background, um titulo, e a média das avaliações atuais. Primeiramente, vamos adicionar uma imagem (ver imagem à baixo).

Depois de alguns testes achei que o tamanho 300px de largura por 230px de altura ficou um bom tamanho (ver imagem abaixo).

Insira um label e altere sua fonte para Open Sans e tamanho 20px (ver imagens as seguir).

Para representar a avaliação dos usuários a princípio eu queria usar estrelas, mas como procurei nas coleções por uma estrela e não encontrei, utilizei um diamante para representar o score do aplicativo e ficou bem interessante. Na aba Common Shapes selecione o diamente.

Antes que eu me esqueça, vamos renomear o label para um programa. Vamos renomear para Blender. Clique duas vezes em cima do label e altere o nome na caixa de texto (ver imagem abaixo).

Vamos diminuir o diamante para um tamanho 29px de largura por 30px altura e colocar sua cor como preta (ver imagem abaixo).

Posicione o diamante logo abaixo do nome Blender.

Duplique (com a tecla shift pressionada selecione o diamante e arraste) o diamante 4 vezes e ordene-o como na figura abaixo.

Selecione (com a tecla ctrl pressionada ou fazendo uma caixa de seleção) os 5 diamantes e aperte nos ícones Align Middle Verically e Make Same Horizontal Gap.

Agrupe os diamantes, o label "Blender" e o background com a tecla de atalho ctrl + g. Agora duplique o grupo (com a tecla shift pressionada arraste o grupo para a direita) 2 vezes (ver figura abaixo).

Eu renomeei os labels duplicados para Inkscape e Gimp para deixar o wireframe mais interessante.

Duplique novamente a caixa blender (com a tecla shift clique e arraste o grupo para baixo) (ver imagem a seguir).

Duplique a caixa debaixo, posicionando-o a sua direita (ver imagem a seguir).

Desagrupe a ultima caixa e altere a largura e altura do elemento Imagem para 640px e 230x, respectivamente (ver imagem a seguir).

Agrupe novamente a caixa grande e duplique-a, posicione-a no início da terceira linha (ver imagem a seguir).

Duplique o primeiro card da 2º linha posicionando-o no final da 3º linha (ver imagem a seguir).

Agrupe (ctrl+g) a primeira linha de cards (ver imagem a seguir).

Duplique a primeira linha de cards, posicionando-a embaixo da 3º linha (ver imagem a seguir).

Desagrupe a ultima linha de cards e opcionalmente dê alguns nomes diferentes aos labels dos outros cards para ficar mais interessante (ver imagem abaixo).

Agrupe cada linha (ctrl+g) individualmente (ver imagem a seguir).

Selecione os 4 grupos referentes as 4 linhas de cards (ver imagem a seguir).

Após selecionado, pressione o botão Make same vertical gap (ver imagem a seguir).

Antes que eu me esqueça, vou corrigir a acentuação que estava faltando nos botões áudio e vídeo (ver imagem a seguir).

Pronto. Embora se trate de um web app para descoberta e avaliação de aplicativos para o nosso amado GNU/Linux acho que é interessante ter um campo de busca. Vamos adicioná-lo. 

Vamos começar adicionando um elemento Box da coleção Desktop - Sketchy GUI (ver imagem a seguir).

Coloque o tamanho da caixa para 200 px de largura por 35 px de altura (ver imagem a seguir).

É interessante que usemos um ícone de busca. Vamos usar uma imagem (ver imagem abaixo).

Vamos redimensionar a imagem para 30px de largura por 30px de altura.

Vamos adicionar um texto (label).

Modifique o conteúdo do label para Buscar, cor preta, fonte Open Sans de tamanho 16 (ver imagem a seguir).

Ajuste os itens e agrupe os elementos que compoem o campo de busca.

Rodapé

Para o rodapé vamos apenas usar um retângulo com alguma cor de background e um label com o texto "Um exemplo para o Libre Designers".

Primeiro, adicione um retângulo (ver imagem abaixo).

Coloque o tamanho para 1200px de largura por 150px de altura

Clique duas vezes no retângulo e insira o texto "Um exemplo para o Libre Designers".

Apenas um detalhe que eu deixei passar, vamos renomear o último card da 3º linha para "Audacity". Assim, todos os cards ficam com um nome diferente (ver imagem a seguir).

Finalmente, terminamos o wireframe da página Home (ver imagem a seguir).

Finalizando a introdução

Espero que essa introdução tenha contribuído em algo caso você queira criar wireframes com o Pencil Project. Nos próximos artigos estaremos fazendo um mockup do Guia do Mochileiro do Software Livre. Aguardo você lá. :-)

Arquivo final:

O arquivo final do projeto você pode baixar clicando aqui.

Fonte:

https://designmodo.com/wireframing-prototyping-mockuping/

Imagem de background do Card:

• Notebook Ao Lado Do Iphone Na Mesa - picjumbo.com