Totalwireframe Blog

My new library

Mon, 22 Aug 2011 13:09:03 -0400

Why did I decide to charge for the new FamFamFam icons library I released today? We all know FamFamFam - those icons are free. But I thought it would be a good idea to put those icons into one library, in order to use them easily in our Axure projects. Putting 1000 icons in one library is a HUGE work. A really, really time-consuming job, actually. I’ve started the library in May 2011 and I’ve finished it in August. It was a pain - I thought it was a never ending project. This is why I wanted to charge for it. The FamFamFam licence (Creative Commons Attribution 2.5 License) actually allows me to resell the work and I hope you can see the added value to have all those icons into one single library.

Mobile prototyping

Tue, 16 Aug 2011 10:27:30 -0400

Will Hacker just posted a fantastic article about using Axure as a mobile prototyping tool. Read the entire article here.

The most important part of the article is setting the viewport tags in the Generate prototype panel:

iPhone:
Android:

This should help you display your prototypes on the iOS or Android devices. It’s awesome.

Idea: Automatic page numbering

Sat, 25 Jun 2011 08:59:00 -0400

I use Axure a lot to do wireframes for agencies. I also use it in my job as Product manager on a daily basis. And all the time, one thing needs to be repeated, over and over and over : we need to give the page a number.

Pages are usually placed in the order they appear in the sitemap. We could imagine a feature where Axure would actually manage the numbering of the page for us.

This is the structure I create for my wireframes most of the time:

Kind a like

1.0 Main page
1.1 : Subpage
1.1.1 : Sub-subpage
2.0: Other page
2.1 : Subpage

And so on… Axure could let us decide our renaming pattern (start with number or characters, for instance, and let us decide from which number/letter we could start from), and update this numbering when we ask him to. It would save us a lot of time, for sure.

Idea: Using variables in Axure

Thu, 16 Jun 2011 10:52:23 -0400

When building a website, we almost always have to provide a breadcrumb. The first reflex would be to add the breadcrumb in a master, so it’s easier to maintain. However, it quickly becomes a pain to do so, as you still need to modify the master on each individual page to match the name of the page with the name inside the breadcrumb. Basically, masters for breadcrumb are useless. Unless…

The idea is to provide global variables in Axure. Say, inside a string, {PageName} would be the page name, {PageNameUrl} would display the page name AND be clickable with a link that redirects to the right page. That could be used either in a page or a master.

We could also have a new panel that would let us define custom variables available throughout Axure, such as {ProjectName} that would contain the name of the current project (ie “AcmeCorp”).

How-to: Create a tab menu with drop-shadow with Axure 6.0

Thu, 09 Jun 2011 09:40:41 -0400

Today I’m going to show you how to create a tab menu with Axure, and how to have fun with creating a drop-shadow effect. Here is the result we want to achieve:

Let’s get to it. First, create the menu that will be displayed as tabs.

Then, select the first item and remove the right border by right-clicking on it and selecting the Rounded rectangle shape.

A yellow triangle appears. Moving this triangle lets you modify the roundness of the corners for the rectangle. For our exercise, let’s get rid of any roundness by dragging this triangle to the left.

The shape should now look like that:

The next step is to create the arrow. Create a rectangle that matches the height of the row and place it next to the rectangle.

Right-click on this triangle and select the Triangle right shape.

We have now a nice triangle corner, but there is still the left border for this triangle. The way to get rid of it is to draw a line that matches the background color of the shape, on the left border. The end result should look like that:

You can put any background you want for this form, as long as you don’t forget to set the color for the line between the rectangle and the triangle as well.

Now you have your tab menu. Let’s have some fun by adding a drop-shadow effect.

The trick is to create a triangle slightly wider and bigger than the triangle corner of the tab, and to place it under it (using Move backward command). Remove the border of this triangle. Then, move it down a bit in order to make it look like that:

Et voilà! You have now a tab menu with a drop-shadow effect, made for Axure.

If you want to download the file I’ve done for this exercise, click here. It’s for Axure 6.0 by the way.

Idea: a new Place in background, for footers.

Thu, 02 Jun 2011 16:36:03 -0400

Did I already said that the Place in background feature for masters is a great feature? I think I already did. However, the current implementation of this feature makes it very difficult to achieve one thing with a master: designing a footer for a website.

With the master and the Place in background feature, you can already very easily add elements that are repeated on every page of the site. Create a master, click on Place in background, and add this master to all the pages you want, and voilà… it’s working. And it’s a real time saver, as you don’t have to manually place each master on each page. It’s that good.

However, it’s not possible with the footer for a website. Why? Simply because every page of a website is different from one another. The Place in background locks a master at very specific coordinates on the page it’s placed, and those coordinates are exactly the same for all the pages. Hence, you are sure that there will be at least one page of your wireframe where the footer will be misplaced. The current way to add a footer to every page of a website is to create the master and manually place it on every page, one by one. For big websites, it’s simply not realistic.

Axure should create a feature that would let a master to be placed at the bottom of a page, that is, below the last element of a page. A kind of Place in background feature, that would lock the left position, but would get rid of the height coordinate (as it would change on every page). That way, it would be very easy to create a footer with Axure.

Axure Tips: the Place in background feature

Fri, 27 May 2011 09:08:03 -0400

You are wireframing a website. Some elements are on every page of the site, mainly the header, footer and menu. With the masters feature in Axure, you can easily create them once and repeat them on every page. If you let the default setting for those masters, you will end up with two problems:

the masters will have to be manually placed at the right location on every page,
they will be selectable on every page, which might be annoying when you have to select a large range of elements on the page and move them.

To avoid that, use the Place in background feature. This feature can be accessed with the right click on a master as shown below.

Once the master is set to this setting, its icon becomes gray, letting you know that it’s placed in the background now.

The specificity of this option is that the position of each element in the master will be kept when placed in a page. By default, masters can be placed everywhere. You can’t modify the position of a master set to Place in background. This a huge advantage when you place a menu and a header: this makes sure that it will have the exact same position on every page.

Moreover, it’s dead easy to assign a master set to Place in background on a page. Simply drag and drop the master anywhere on your page and it will take the right position, as set in the canvas of your master.

Finally, you can’t select a master set to Place in background. That’s how awesome those types of masters are.

This feature is available in Axure 5.6 and above.

Using masters for a table in Axure 6.0

Tue, 24 May 2011 18:00:00 -0400

In Axure, masters are a really powerful tool. They allow us to create an object that can be placed on as many pages as you want. As soon as you make any change to the master, it will be applied to all the pages the master is on. The obvious use of masters for a website are the design of the part that are repeated amongst pages: header, footer, possibly the menu. However, there is one use of the masters that is easily forgotten: tables.

Tables usually contain lots of rows. Each row contain a certain amount of data. Building a table can take a lot of time - but image for a moment having to redo it because of the client’s feedback: ‘this element in the row is not big enough’, ‘that data should be bold’, ‘a column is missing’ and so on. From my experience, tables are always meant to change.

Thanks to the masters, we can easily prevent the headache of having to recreate a table from scratch. Let me show you how.

First, create the structure of your table. Ideally, you should have a clear idea of the width of your table. Then create your first row.

Then, create a master and give it a name.

Cut and paste the first row into the master. Don’t worry if elements in your master are not placed in the top left corner of the canvas. I usually set them at 10px top, 10px left. You can actually place them anywhere you want in the canvas, as long as you don’t need the master to be placed in the background.

Then copy the master into the table as many times as you want, by drag and dropping it. Don’t worry about aligning elements for now (I purposefully misaligned them for the sake of the exercise).

Now we can talk. Use the Left align tools to make it left aligned and the Distribute vertically tool.

The table might look ugly in Axure now as everything is red. Don’t worry about it: when you generate the wireframe, those red lines will disappear.

If you need to change on element on the table, you now just have to edit the master.

Go to your table and see how everything has been changed, automatically. Be careful though: as much as possible, don’t change the height of your master. If you do, you’ll have to edit the table and distribute the rows vertically to make it pretty again.

The only drawback of this method is that every row of the table will look the same - hence reducing the level of fidelity of the table. To prevent that, you could have 3 rows in the master instead of one. That would give the table a more realistic view of what the actual table would look like in the real world.