New Wireframe Project wizard, mobile project templates

Posted on by - Comments

Hi everyone!

Today’s release brings a new Wireframe Project wizard that makes it easier to get started. Other changes include configurable assets folder, multiple improvements and a few bug fixes. Read on for more details.

Wireframe Project wizard

WireframeSketcher works with any project type. Eclipse users can use existing PHP, Java or other projects for wireframes too. However there is now a handy Wireframe Project wizard that helps you get started. To open it use File > New > Wireframe Project.

Wireframe Project wizard

To make things even easier, Wireframe Project wizard comes with several project templates. You can use them to quickly get started with wireframing an Android, iPhone, iPad or Windows Phone app. Project templates include assets from Mockups Gallery. Of course you can always add these assets yourself.

Configurable “assets” folder

WireframeSketcher is often being used to create wireframes for a larger project. In such cases wireframes often live in a sub-folder like src/wireframes. When doing this it’s desirable to move assets folder in this sub-folder too, e.g. src/wireframes/assets.

You asked for it here, here, here and here and so this feature is finally available. To change the location of the assets folder, right-click on the project in the Project Explorer view, choose Properties > Wireframing Settings and edit the Assets Folder setting:

Wireframing Settings

If you already have assets in your assets folder then make sure to move them to the new location. Just use drag & drop or Move… action in the Project Explorer view. This will update links in all files that already use those assets.

Note that Assets Folder setting is saved into a hidden folder named .settings in the root of the project. If you are using a version control system then make sure to commit this folder to the repository too.

Better support for user assets

When working with stencils from Mockups Gallery it can become difficult to locate your own assets in the Palette. To solve this we added an automatic category Assets/Unsorted that shows up when other categories are present:

Unsorted Assets

Of course you can always group assets in your own categories by creating sub-folders under the assets folder.

With Unsorted category in place we’ve modified how some of the asset-creating actions work:

  • Convert to Component and Paste Image actions now pre-select the assets folder.
  • You can now drag & drop images from the file system or from the browser into your wireframe. These images are automatically copied into the assets folder.

New assets are instantly available in the Palette. To group them in categories just move them in a sub-folder under assets using Project Explorer view. All cross-file links will be updated automagically.

Improved widgets

  • Combo, Spinner and Date Field widgets now have background color property that can be used to show error states.
  • Combo and Spinner widgets now have a Focused state.
  • Tree widget gained a font property. Increasing font size for Tree also increases icon sizes.
Background color for Combo, Spinner and Date Field

Wireframing perspective

Sketching perspective is now called Wireframing. We feel that Wireframing reflects better what WireframeSketcher users do and it also looks better in screenshots :).

Open source icons

WireframeSketcher comes with more than 200 built-in vector icons that we’ve specifically designed for wireframing. You can now use these icons freely in your own websites and apps. Icons are licensed under Creative Commons’ Attribution license and can be downloaded from our GitHub repository. Find more details on our wireframing icons page.

Other changes

  • Added new Brush and Find icons
  • Improved file dialogs to pre-select file name without the extension
  • Fixed broken screen references issue for file names containing ampersand (&) char
  • Fixed links view issue with displaying underlines instead of ampersands
  • Fixed HTML export issue with handling special URI chars in file names
  • Fixed HTML export issue with handling screens with the same name but from different folders
  • Fixed refactoring issue with updating screen references in unsaved editors

Updating

To update to the latest version of WireframeSketcher use Help > Check for Updates, or just download it from our website.

The version number of this release is 3.8.0.

Enjoy!