Hello everyone!

Today’s release brings support for back links, that let you create more complete user stories. It also includes and enhancement to Combo widget links. Read on for more details.

Back links

One of the long requested features on our roadmap was the ability to specify back links, links that would work the same way as the back button in a browser does, and allow users to navigate to the previous screen in navigation history. We’ve long hesitated to add them, as this feature is not supported by all the export types provided by WireframeSketcher. Most notably, PDF viewers mostly don’t support back links, with the exception of Acrobat Reader software.

We’ve finally decided that it’s an acceptable limitation and today’s release adds support for back links. When specifying a link in the Links view you now have the Go Back option:

Back Link

Back links work as expected in Presentation mode, in offline and online HTML, and partially in PDF if Acrobat Reader software is used to view the document.

Combo widget links

In the same spirit of improving how links work, Nick Weathers has pointed out on our forums that items in the dropdown of the Combo widget cannot be linked individually. The Combo widget worked this way in order to preserve backward compatibility. However we could reuse the approach we already use for components to expose both drop-down items in the Links view, and the global link that allows the entire widget to be linked, in the way that it worked previously.

Here’s what the Links view looks like for Combo:

Combo Links

Note the Link property at the bottom which lets you link the entire widget. Once you specify a link, either global or per item, the other options will disappear, as global link and item links are mutually exclusive.

Updating

To update to the latest version of WireframeSketcher use Help > Check for Updates, or just download it from our website. Mac OS X users that experience update issues should re-install the latest version manually from our website.

The version number of this release is 4.7.5

Enjoy!

Hello everyone!

Today’s release brings improved behavior for links, the option to hide annotations in edit mode and a few other improvements. Read on for more details.

Hide links behind containers

Screen links let you quickly create simple click-through prototypes. Exporting or presenting the storyboard also exports linked areas that can be clicked to navigate the prototype.

One recurrent complaint about how links work in this scenario is that links show up through other components that are placed over them. A common use case is to clone a base screen to display a dialog window over it. If the base screen has some links behind the dialog then those links will show through it. The only solution to this problem is to remove links manually.

Today’s release adds an automatic occluding and hiding for links that are behind certain components. This works in presentation mode as well as in PDF and HTML exports. Below is an example that demonstrates this behavior. Note how the second button is partially obscured by the dialog:

Link Hiding

Note that not all components will hide links behind them. The following is the complete list of widgets with this behavior:

  • Widgets in Containers category: Accordion, Alert, Browser, Group, Panel, Tabbed Pane, Window
  • List, Tree and Table widgets with a non-transparent background
  • Popup, Button Bar, Vertical Button Bar

If you create a custom component that you wish to have this behavior then make sure that you use one of the above widgets as its background, Panel widget being the most design neutral for this purpose.

Hide annotations in editing mode

Another improvement in this version is the option to hide annotation widgets while editing screens, something that until now was only possible in presentation mode and in exported documents. This option makes it easier to edit annotated screens without annotations getting in the way.

Annotations can be hidden by unchecking the View > Show Annotations toggle menu entry:

Show/Hide Annotations Option

Hiding annotations also hides note overlay icons:

Show/Hide Annotations Effect

Note that annotation widgets remain always visible in the Outline View.

Other changes

  • We’ve updated our website to a more modern design!
  • Added embedded JRE to Linux packages to avoid issues with incompatible system JRE versions

Updating

To update to the latest version of WireframeSketcher use Help > Check for Updates, or just download it from our website. Mac OS X users that experience update issues should re-install the latest version manually from our website.

The version number of this release is 4.7.4

Enjoy!

Hello everyone!

Today’s release brings improved export with support for high-resolution retina displays. Wireframes that are shared online, or are exported to HTML or PDF, will now include high-resolution images to support viewing them on high-density displays. Read on for more details.

High-resolution export

Retina displays and high-resolution monitors are getting more and more widespread and we are trying to keep up with this evolution. WireframeSketcher already uses vector graphics for wireframes which makes it work well on such displays. However export results were not always up to par.

Today’s release brings high-resolution display support to all export types. Online sharing, local HTML and image-based PDFs (see below), now include high-quality images required for optimal viewing on high-resolution displays.

Here’s an example of the difference between before and after results on a high-resolution display. Sharper text, sharper lines and overall a more pleasingly looking output:

High-Resolution Export

Image-based PDF export

WireframeSketcher exports PDF documents in vector based format most of the time. This makes PDF documents look good at any resolution and zoom level. Also all texts are selectable and can be easily copied from the document.

However, in a particular case, when screens contain characters that are not supported by document’s font, the PDF export switches to image-based format. This means that each page will contain an exported image of the screen, instead of a vector version.

For some languages this automatic switch is unavoidable, although changing screen’s font may help. However if you suddenly see this behavior to due to some change you’ve made to your screens – then you’ve probably included a special character that is not directly supported by the screen’s font. In this case see if you can make it without this character to avoid the unwanted effect.

From the technical point of view, operating systems handle this case automatically by transparently switching to a different font for special characters. We are currently exploring the possibility to implement this type of solution in PDF export too.

Meantime we’ve improved image-based PDF documents to include high-quality images too. This way image-based PDFs can still look acceptably sharp on high-resolution displays.

Other changes

  • Fixed the issue with notes not being numbered in visual order when widget groups are used

Updating

To update to the latest version of WireframeSketcher use Help > Check for Updates, or just download it from our website. Mac OS X users that experience update issues should re-install the latest version manually from our website.

The version number of this release is 4.7.3

Enjoy!

Hello everyone!

Today’s release brings various improvements to the recently added Notes feature. Notes can now be displayed in the Presentation mode in a side view, and also get an improved PDF export. Read on for more details.

Notes in Presentation mode

Our first release of the Notes feature displayed notes using tooltips. This was a temporary solution and today’s release brings a rich display of notes in a side view:

Notes in Presentation mode

This way you can easily present your wireframes and display attached notes at the same time.

Widgets that have an attached note are displayed with a numbered callout that you can click on to highlight the corresponding note in the side view.

You can hide the notes side view by toggling on the Hide Annotations option from the context menu or by simply pressing A.

Notes in PDF

Notes exported to PDF now better support multiple languages. Chinese, Japanese and Korean languages are now exported correctly with appropriate PDF font, but also right-to-left languages like Hebrew and Arabic.

Notes in PDF with multiple languages

The same as in Presentation mode, you can use the Hide Annotations to enable or disable the export of notes to PDF.

Improved editing for notes

Notes view has also received some improvements. The undo & redo now works as expected, it’s now easier to edit long text, and there is an auto-completion helper popup that can be opened using Ctrl+Space.

Notes rich wiki editing

Other changes

  • Fixed an issue with PDF export in batch mode
  • Fixed an issue with rotated labels with embedded icons causing editor errors
  • Fixed a text line height issue in PDF export on Mac OS X
  • Fixed a PDF export error occurring with notes in some languages
  • Fixed an issue with property overrides in some deeply nested components
  • Updated Font Awesome stencil to version 4.7.0

Updating

To update to the latest version of WireframeSketcher use Help > Check for Updates, or just download it from our website. Mac OS X users that experience update issues should re-install the latest version manually from our website.

The version number of this release is 4.7.2

Enjoy!

Hello everyone!

We are back with a new release after almost 5 months. If you were wondering what we were up to, the answer is that we’ve been mostly busy working on our next version (we took a vacation too!). Generally it looks like the delays between our releases are increasing, which I personally believe is a good thing and the sign of a mature product. There are no more low hanging fruits and easy to implement features, and so each new addition and improvement to the product requires increasingly more work.

But lets go back to our today’s release which brings notes, a new major feature that adds an improved way to annotate and document wireframes. Read on for more details.

Notes

Notes were for quite some time the most requested feature on our list, and we were collecting data needed to define better what this feature should actually do and what it should look like.

WireframeSketcher already comes with annotation widgets that let you attach notes and descriptions to wireframes. This method works well for short and simple explanations, however it breaks down if more detailed information needs to be attached. The most common solution to this problem is to create a separate specification document and then insert wireframes into it using various methods. This approach is rarely ideal as it takes time to keep the document in sync with evolving wireframes.

So we came up with a solution that lets you maintain this additional documentation directly in WireframeSketcher. This is simply done using the new Notes view that lets you attach additional notes to objects:

Notes

Notes can be added to any object. Objects that have an attached note are displayed with a small overlay icon in the top right corner to indicate that. You can attach a global note to the screen itself, by clicking in an empty area of the screen and then editing the note in the Notes view. The text of the note accepts and interprets the wiki syntax that you can use to style it.

The most important part of the new Notes feature consists in exporting and presenting this additional documentation along with your screens. Current version allows you to view notes in the Presentation mode, export them to PDF and share them online on our servers (wiresketch.com). Local HTML is the only format that doesn’t support notes at this point.

Presentation of notes in exported PDF documents is the most complex of all. Notes are exported as separate pages formatted into tables. Here’s an example of what it looks like:

PDF Note Callouts
PDF Notes Page

Improving the presentation of notes is the area that we plan to work most in next versions. We’d love to hear your feedback on this feature so that we can tailor it better to your specific needs.

Note that if you are updating your existing installation of WireframeSketcher, the Notes view will not appear automatically. To make it available, reset the layout of the main window using Window > Reset Perspective….

Other changes

This release includes various other improvements and fixes. Most notably we’ve made sure that WireframeSketcher works well with the recent release of macOS Sierra.

  • Improved the handling of missing fonts. If a screen uses a font that is not available on your system, you’ll see an indication of that in the Properties view. The screen will fall back to using the system font instead.
  • Improved custom arrow components to behave like regular arrows. This means that if you wish to have a red dotted arrow widget in the Palette – you can, using a component.
  • Improved components and groups to allow mouse click-through in empty areas
  • Improved export actions to remember last location per file
  • Improved context help system. Use F1 to try it out. You’ll find WireframeSketcher’s user guide conveniently available on request as contextual help.
  • Improved Quick Add action to perform edit if just a single widget is added
  • Enabled SSH2 preferences page when version controls plugins are installed
  • Enabled automatic widget snapping to center of other widgets
  • Fixed a performance issue with offline HTML on macOS Sierra
  • Fixed Palette category assignment for certain custom components
  • Fixed Shift+Enter shortcut in single-line widgets
  • Fixed formatting issues in PDF for wiki text with embedded icons
  • Fixed an issue with parsing certain list combinations in wiki text
  • Fixed support for SVG images generated using drawsvg.org online editor

Updating

To update to the latest version of WireframeSketcher use Help > Check for Updates, or just download it from our website. Mac OS X users that experience update issues should re-install the latest version manually from our website.

The version number of this release is 4.7.0

Enjoy!

Blog Archive