Creating Wireframes with Pencil (Firefox Addon)

As a request from the previous article, I’ve decided to create a tutorial on how to create wireframes using Firefox. OK, we wont be using just Firefox but an additional addon – Pencil -, which makes creating graphic user interfaces and various types of sketches an easy task.

Tutorial Requirements

Tutorial Theme: Creating Twitter User Interface Wireframe
Software Requirements: Mozilla Firefox Browser, Pencil Firefox Addon
Skill: Beginner
Tutorial completion time: 15 minutes

pencil-ui

1. Launching Pencil

In order to start Pencil Addon, you must start first Mozilla Firefox. After that, you must select from the Menu Bar the Tools section and then find and press Pencil Sketching

2. Setup Page

After you launch Pencil, you will see a blank page with certain width and height that are relative to your screen size. To set your page the way you want you can Right Click on the Untitled Page tab and select Properties. Here you can customize the width, height and title of the page.

pencil-page-setup

3. Analyzing Twitter Layout

Twitter is built onto a 2 columns layout. In the top side of the layout (header) it has a logo and a navigation menu. In the left side it has a big input text element and the tweets, while in the right side (sidebar) it has the mini-profile and different other links.

twiter-screenshot

Our task is to create a simple wireframe with Pencil that will look like Twitter from the structure perspective. So basically we will use only block elements that will represent each of the user interface components. That is the main idea behind wireframing – creating an outline that will be used as guideline in the design process.

4. Creating the 2 Columns

In order to start our wireframe, we will need to drag a rectangle element from the left sidebar onto the canvas (page). In the standard form it has a blue fill color. We will have to Right Click on the rectangle and change the Properties to a white rectangle with a 1 pixel solid black border. Then, we will set its size for the left column and then we will copy&paste it in order to create a smaller column for the sidebar.

dragdrop

After creating these 2 rectangles your canvas should look like this:

pencil-2-columns

5. Creating the Header

Now, we will have to create 2 new elements that will serve as the header: logo and navigation. As I’ve told you, we will use just block elements so the logo will be represented by a rectangle as well. So in this step we will make the same action as in the previous step: copy rectangle elements and shape them and place them properly as logo and navigation.

In addition we will add some text inside the rectangles that will tell us what element is there. For the logo we will use … logo and for the navigation we will actually write similar menu elements as Twitter.

To insert text inside the rectangles we will have to Double Click on them. After we enter the text that we want, we can Right Click on the element and select Properties. From here we can go to the Text tab and change the way the text is displayed – color, font, size.

pencil-twitter-background

These elements are common in most pages on Twitter – profile page, reply page, direct message page. So in order to boost our productivity, we will create new pages that will have the background our current page. In this way on the other pages we will add only the particular elements.

6. Creating an Finalizing the Main Page

From the top right side of the canvas we can press New Page button in order to create a new page.

pencil-twitter-main-page

The only difference compared to the first page screen is that now we will set the background as our Twitter page. Now all we have to do is to add the rest of the elements to the stage. Keep in mind that the elements from the background can only be modified inside the background page.

After adding all the other element from the page using rectangle, text and line elements, here the final wireframe of Twitter created using Firefox Pencil Addon.

twitter-in-pencil

Conclusion

Overall, this addon is quite useful and after half an hour inside Pencil you will know most of the functionality. Cheers for the developers behind this project and have fun working with Pencil. Cheers!

5 ideas on “Creating Wireframes with Pencil (Firefox Addon)

  1. Mony

    Thanks for the post. I am looking for the way to make a good web layouts and this will come handy.

  2. Yoav Shapira

    Looks cool! Thanks for posting the details!

  3. Franquia Empresa

    Very good I liked the post.
    Is well explained
    thanks!

  4. Nadia

    Really nice tool. Thx

  5. Azza

    Hi,

    I’m wondering, can we create “link to current page” on Pencil?

    Thanks!