Crie seus mockups com Pencil

Posted by Gilson Filho on sex 19 maio 2017

Olá pessoal,

Quando desenvolvemos, antes de iniciar algum projeto (seja web ou mobile), sempre queremos rascunhar as telas e como será a disposição dos componentes, fluxo de navegação e etc. Existem inúmeras ferramentas, com seus diferenciais de recursos e variados tipos de preços. Hoje quero apresentar para vocês uma alternativa opensource para esse tipo de aplicação, o Pencil Project.

Site oficial do Pencil Project

Hoje ele foi totalmente revitalizado, porque para quem já conhecia sabe como ele estava largado no tempo. Se for verificar o repositório do projeto, pode ver que eles migraram sua base que era com o Mozilla XULRunner para o Atom Eletron. Isso é bom porque o projeto vai continuar e vai ser evoluido cada vez mais ;)

Instalação

O Pencil suporta os seguintes SOs e distribuições:

  • Windows
  • OS X
  • Fedora
  • Debian
  • Arch Linux (por meio do AUR)

Além disso, ele disponibiliza uma extensão firefox, mas ele é da versão antiga, então use por sua conta e risco. Com isso, é só escolhar a forma de instalação desejada e abrir a aplicação.

Dando uma olhada no Pencil

Vamos dar uma olhada na aplicação:

Janela do Pencil

Nessa janela temos:

  1. No lado esquerdo temos as opções de kits padrão no aplicativo, para serem usados. Eles possuem um conjunto de componentes, chamado de shapes.
  2. Oferece duas opções:
    • Open a Document...: Para abrir um arquivo já criado pelo Pencil
    • Create a New Document: Cria um novo documento no Pencil
  3. Aba de propriedade de algum shape selecionado no documento.

Criando o primeiro mockup

Vamos criar um novo documento. Feito isso ele exibe uma página em branco para inserirmos os nossos shapes. Olhando a barra inferior, irá perceber que tem um Untitled Page. Em um documento, podemos criar vários mockups, e em cada um será um page.

Página em branco no Pencil

Agora é escolher o shape desejado, na barra lateral e arrastar na página:

Arrastando shape na página

Customizando a página

Na barra inferior você possui outras opções relacionados a página selecionada:

Barra inferior da página

Opções da página

Clicando com o botão direito do mouse, você poderá acessar algumas opções como:

  • Criar uma página filha: Uma nova página dependente da que foi criada antes
  • Duplicar página
  • Remover página
  • Ir para uma página específica
  • Propriedades da página
  • Exportar página como PNG
  • Inserir notas na página
Opções da Página

Abaixo segue os exemplos de cada opção.

Criando Pàgina filha

Página filha

Duplicar a página

Duplicando página

Remover a página

Remover página

Ir para a página

Ir para a página

Exportar página como PNG

Expotar página para PNG

Segue a página exportada:

Pàgina exportada

Propriedades da página

Dentre as opções, você possui as propriedades da página, em que pode modificar a página selecionada.

  • Definir página atual como filha de outra página
  • Renomear página
  • Alterar tamanho da página
  • Mudar o background da página

Tornar página filha

Tornando página filha

Renomeando a página

Renomeando página

Alterar tamanho da página

Alterando tamanho da página

Alterar background da página

Alterando background da página

Shapes no Pencil

Na versão antiga do Pencil, vocẽ precisa importar coleções de shapes para ter mais opções. Um exemplo de collection de terceiros é o Nataniel Watson. Hoje, o pencil já disponibiliza no próprio programa uma forma de instalar por meio de um gerenciador de coleções. Vá no ícone no canto superior esquerdo, e vai em Tools -> Manage Collections....

Coleções de Shapes

Aqui você possui o catálogo de coleções que vem por padrão e instalados no seu programa. Para instalar um novo, clique em Install From Repository....

Repositório de Coleções

Instalado uma nova coleção, ele irá no seu catálogo, e então é só usar nos seus mockups.

Espero que tenha gostado desse post. O intuito é trazer uma visão geral do programa, e o seu uso básico. Agora comece a criar os seus protótipos ;)

Até mais!


Comments !