WireframeSketcher Blog

Hi everyone!

It’s summer and the development has slowed down a bit. Nonetheless I’ve managed to squeeze a small release that will keep things moving. I’ve also contracted a designer to add a professional touch to my homemade website and logo. Read on for more details.

What’s new

• You can now add custom properties to any widget. This is done by using the Custom Properties… dialog from the context menu. This dialog lets you set two properties: customId and customData. These properties are saved in the XML file and you can extract them later using your own tools. This is particularly interesting for automatic code generation tools and the like.
• Made snapping guidelines fade quicker. This should make the editor feel faster.
• Added Ctrl+Enter shortcut to activate the text editor. This makes things more consistent and you can now use the same shortcut to activate and deactivate text editing.
• Added Shift+Enter shortcut for inserting \n sequence to force multiple lines. This should save you some typing.
• Redesigned icons and other graphics to adapt to new look (see below).

New site design and logo

Finally I’ve switched from my amateur site design to something more professional. The new site has the same structure as before but it’s cleaner and more consistent. I hope you’ll like it!

WireframeSketcher now also has a new logo. I liked the old logo but it really looked like something that has been drawn by my 3 years old son. I think that the new logo also communicates much better what the product does:

Please let me know what you think!

Site licenses

I am doing a little experiment and I am offering Site licenses at a fixed price until the end of September. A site license lets your entire organization use the software without any limitation on the number of users. You get the benefit of not having to track actual software users and the possibility to freely add more users as the need arises.

If you are interested then buy a site license for $998 only!

Time off

I am taking some time off for the next month. I’ll be walking the Way of St James, 800km in 30 days. Hopefully after this journey I’ll be full of energy and new ideas! I’ll still be available but please be patient when you don’t get a reply right away.

Updating

As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.

Enjoy!

Hi everyone!

I’ve received a lot of positive feedback on the new vector PDF export. The latest WireframeSketcher release adds some fixes and improvements to make it even better. This release focuses on fixing bugs but there is also a small new feature that I am sure you’ll like. Read on for more details.

PDF export improvements

One important thing that I missed last time is proper support for Unicode text. Now PDFs will correctly embed the required font needed to render the text. This also makes PDFs look much closer to what you see on screen. There is one very particular case on Mac OS X when it’s not possible to embed the required font. In this case the exporter will automatically fallback to image based PDFs.

Another improvement concerns images that you use in your wireframes. Now PDFs embed images in their original format (JPEG, PNG, GIF, etc). This approach produces documents that look better but that are also smaller in size. This can be very important when you are sending your PDFs around.

Multi-line text syntax

There was a long-standing request to allow multi-line text in tables. Now there is a new wiki syntax that lets you accomplish that and more.

Insert \n inside the text to break it in multiple lines. Alternatively use \r to do the same thing. This works not only for Table but also for Button, List, Placeholder, Link and other widgets. Here’s an example:

I love how this small addition to wiki syntax creates a whole lot of new possibilities.

Other changes

• Fixed copy & paste of Images across screens in different directories
• Fixed the rendering of dimmed Masters in exported PNGs.

Eclipse Helios

Last week was marked by the release of Eclipse Helios. “The Helios release is the largest release train produced by the Eclipse community, including 39 different project teams, over 33 million lines of code and the work of 490 committers. The release train makes it easier for users and adopters of Eclipse technology to adopt new versions of Eclipse projects.” I think you’ll agree that that’s quite impressive!

WireframeSketcher joins this train and it now officially supports Eclipse Helios! I’ve updated the installation instructions page to reflect that.

Updating

As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.

Enjoy!

Hi everyone!

I am happy to bring you a new version of WireframeSketcher. It took me more time than usual but finally I can let it out of the door and move to a next target. Please read on for more details.

Vector-based PDF export

Until now PDFs were created by embedding images which gave mediocre results when viewed on screen. Needless to say that printing those PDFs didn’t give good results either. I am happy to introduce a new high quality, vector-based PDF export which solves these problems.

This change is transparent and vector-based format will be used for all PDFs from now on. Implementing this future was a small technical feat in itself so I kindly ask you to give it a good test and get back to me if something doesn’t look quite right. I am still keeping the old export code around and we can switch back to it quickly if there is a serious problem.

Here’s a sample PDF with iPhone stencil that you can take a look at: iPhoneStencil.pdf. You can see that icons are a little blurry but graphics and text look great.

Other changes

• New Cross-out annotation widget that will let you do things like this:

• New position property for Tooltips:

• Improved hit-testing for Arrow widget. Now you can click through the arrow’s transparent areas without selecting it.
• Fixed same width/height actions to keep selection unaltered

What’s next

I am getting closer to adding linking support to WireframeSketcher. After endlessly thinking and rethinking this feature I am finally settling down on the following solution:

As you can see there is a new Links view that works with the Screen Editor. This view lets you specify link targets for currently selected widget (one or more depending on widget type).

I feel that the separate view approach gives the most flexibility:

• You can hide it completely if you don’t use linking
• It allows you to create interactive prototypes in two distinct stages: first drawing and then linking
• In case you want to do drawing and linking at the same time you can layout the view differently to make it visible alongside with the Properties view

Once you are able to link screens all other features will come naturally:

• Click-through in Presentation mode
• Exporting storyboards into click-through PDFs
• A new Flow Editor what will let you visualize links and basically do what Storyboard Editor does but for non-linear flows.

Please let me know what you think about it!

Updating

As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.

Enjoy!

Hi everyone!

It’s time for a new release. It’s a small update but some of the changes are pretty exciting. Please read on.

Better color picker

This version brings a better and much more usable version of color picker. You can now quickly pick a color from 3 predefined sets which should have a suitable color most of the time. And if you need to use some specific color you can! Even better, custom colors are remembered and you can pick them much faster the next time.

I am actually pretty excited about this change. It’s one of those features that makes you wonder how the product could exist without it for so long.

The new color picker also fixes this Eclipse bug that affects those of you that use Mac OS X with Eclipse Cocoa. I am really happy I could find a solution for that. Note that you still won’t be able to select custom colors. You’ll have to wait for Eclipse 3.6 to fix that.

New Chart widget

Another addition in this version is a new Chart widget. It lets you represent pie, line, column and bar charts in just a few clicks. Here’s how it looks like:

Dashed border

The last change is the addition of a new dashed style border for Panel and Rectangle widgets. This one was requested by Timo who needs it for wireframing drag&drop actions. I am sure there are other interesting uses for it too:

Updating

As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.

Enjoy!

Hi everyone!

It’s been 2 weeks since the launch of Mockups Gallery. It was very well received which makes me very happy.

A very good side-effect of this launch is that I am now eating my own dogfood. Sure, I’ve been using WireframeSketcher before, but not at the scale that I do now. Designing new stencils makes me see much better what’s needed to improve the tool.

This time the results of my work are an iPad stencil and an updated iPhone stencil. I’m sure you’ll find a good use for them.

Changes

Now to the changes that make these new stencils possible:

• New Rectangle widget. This is very similar to the Panel widget with the difference that you can set an icon and enter some text. This makes it easy to do things like this:

• Added text and icon properties to Circle widget. Similar with Rectangle this makes it super easy to do things like this:

• Added icon position property for Label, Circle and Rectangle widgets. This makes it possible to layout vertically an icon with a label. Like this:

• Added horizontal lines toggle for List widget
• Added font properties for List and Table widgets
• Added row height property for List and Table widgets. These 3 make it a no-brainer to draw menus for mobile applications:

• Improved Progress Bar widget to support vertical resize and bar color:

• Improved sliders in Properties View to display tooltips with their value
• Added New icons: book, apple, backspace
• Added background color property for Button Bar widget
• Added support for external file editing (using File→Open File…)
• Fixed Search Field widget to use white background instead of transparent
• Fixed foreground color inversion for List, Table and Tree widgets

Updating

As usual to update to the latest version of WireframeSketcher just use the Eclipse update manager.

Enjoy!