- WireframeSketcher is a rapid wireframing tool that helps quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It comes both as a plug-in for any Eclipse IDE and a standalone version.
- WireframeSketcher is a Demo software in the category Graphics Applications developed by WireframeSketcher. The latest version of WireframeSketcher is 6.3, released on. It was initially added to our database on. WireframeSketcher runs on the following operating systems: Windows/Mac. The download file has a size of 64MB.
It's amazing how I find these extremely useful tools when I need them the most. This time, I review an absolutely awesome tool called WireframeSketcher.
WireframeSketcher is one of the website wireframing tools to quickly create wireframes, mockups, and prototypes. It is a wireframe tool which helps you get fast and accurate results. It can be used on desktop app for Windows, Mac, and Linux. It is simple to use and works marvelously in a multi-user environment. “WireframeSketcher is our official wireframe software. Our designers and copywriters use it for all our website and graphics projects because it is not only simple to use, but it works very well on multi-user environments.”.
It's that time of year again when I celebrate my anniversary of DanylkoWeb (wow..two years!) and I wanted to give the site a facelift..again.
From last year's post, I went through the site and determined a best-approach to getting more exposure based on design.
This year, I'm building a more general site with a focus on writing and creating products.
So I need to redesign the site.
Yet, I didn't want to start throwing CSS and code at the site and hope everything worked out. Mac os for windows 7.
I needed to wireframe the areas requiring the facelift. So I started to search for some wireframing software.
After looking over a number of websites and a lot of client software, I decided to give WireframeSketcher a try.
I downloaded the software and was off and running.
First off, I want to make this perfectly clear that I wanted to do a review of this software because of how easy and intuitive it was to create a wireframe. I was not paid for this review at all.
I was extremely pleased with the features in WireframeSketcher (which I'll get into in a moment).
I started wireframing the new redesign of DanylkoWeb and quickly realized the potential of this software.
I'll touch on the new redesign in a later post, but for now, here's a wireframe teaser.
This wireframe took me a total of 30 minutes to create.
Wireframe Sketcher is that easy to use.
Overview
Wireframe Sketcher is an executable you download and install on your PC. The software supports Windows, iOS, and Linux platforms.
After installing and running the software, you are introduced to the minimal amount of training in the form of a sample wireframe tutorial.
To be honest, that's not a bad thing.
In my mind, I was saying, 'I need to create a wireframe and I don't need a tutorial. Let's just get started.' So I did.
Having a career in software development, you need a tool to visualize and explain to the user what it'll look like. You always need a solid tool to get the job done right. Something that works as quick as writing boxes and arrows on a napkin.
With that said, I've been looking for a solid wireframing tool for a while and this is it!
Interface
The screen is broken into five work areas: The Project Explorer, the Properties/Links, Outline, the Screen Editor, and the Palette.
The Project Explorer organizes all of your assets and screens into one consolidated window. This provides an overview of your project and screens.
The Properties tab displays the properties of the object selected in your Screen Editor or Outline pane while the Links tab display the link that a certain element will jump to when clicked. Again, we'll get to this awesome feature in a minute.
The Outline is helpful to show you items in your Screen Editor that aren't visible. Clicking on each item in the list will give you an indication (a blue border) where the item is in your Screen Editor.
The Palette contains all of the possible components in your wireframe. You simply click and drag them onto your Screen Editor.
Finally, the Screen Editor is where you drag controls from your Palette onto the editor.
The interface is well-thought out and uses the application's real estate efficiently. Everything is packaged nicely and isolated into it's corresponding pane to make the user experience (UX) better.
Have you ever started using a product and were scared whether you would have an issue using it?
I didn't experience that at all with WireframeSketcher. When I started using the product, the interface felt comfortable and I knew it just worked.
My focus shifted to the actual wireframing of the site (you know..my actual goal) instead of how to use the software. It's definitely a compliment to the designers of the software.
Even though the interface is tight, I expperienced some surprising features hidden in this application.
Features
Now to the good stuff.
There were a lot of features that caught my attention as I was using WireframeSketcher.
Different Projects
One feature was the different types of projects you could create.
I originally wanted a web page wireframe, but then I started looking over the project types.
Ooooo..they had a Bootstrap template..and Android and iOS Mobile templates. Perfect!
If you selected a Bootstrap template, it would include those assets into your project to click-and-drag onto the Screeen Editor.
Links
It's amazing how users want to see the 'functionality' in your wireframes.
Now they can.
WireframeSketcher has the absolute easiest way of building a workable link system.
- Select an object in the Screen Editor.
- In the Link tab, select the screen you want to display.
That's it. On your triggered object, you notice a small link in the bottom-right corner of your object to show it can jump to another screen.
You can now show your users a workable wireframe with clickable links..
..which was all they wanted in the first place. ;-)
Additional Assets
This one feature alone blew my mind.
After examining the Bootstrap assets included with the project, I asked myself if there was a way to include FontAwesome into this wireframe.
After experimenting with the Palette pane, I right-clicked on the Assets node.
There was an 'Add Assets from Mockup Gallery'
No Way!
I clicked on the FontAwesome icons and immediately got this page.
Ok, I understand. I need to download the zip file and extract it into a directory that WireframeSketcher uses for Assets.
Nope!
I clicked the link, it downloaded the icons, and included them into my project as additional assets.
A seamless integration into my workflow with no hesitation.
Done! I now had Font Awesome included as Assets to use in my wireframes.
Paste Patterns
Wireframesketcher Tutorial
Underneath the Hero banner on my DanylkoWeb wireframe, you'll notice the 'Latest Posts From The Blog' section.
I had a list of images that I have to copy and paste into a grid-like pattern.
I created an image and placed it on the editor.
Next, I copied and pasted it, but it was pasted a couple of pixels down and to the right. So I moved it to the right of the original image.
A funny thing happened when I pasted the third image.
It pasted itself directly off to the right of the 2nd image..where it was meant to go. It recognized the pattern for future elements.
Definitely a time-saver.
Ease of Populating Data
One common element with HTML pages is a grid/table.
How many of you want to populate this table on a wireframe?
No sir, I don't like it. Especially for a wireframe.
Double-click the table and you'll see this.
Whoa! WireframeSketcher makes it easier to populate data by using what makes sense. They have their own Wiki markup for data. How sweet is that?
Another time-saver.
Additional features
There are a lot of other features packed into this application that I didn't even mention like
- Exporting to PDF
- Storyboard Projects
- Annotations (comment cards/post-its)
- Create reusable components by combining assets
- Create your own SVG assets
- Good-sized community
As I said, it does one thing (wireframing) and it does it very well!
Pricing
The pricing is amazing affordable.
For the single user, it's $99/year. It includes support and any kind of updates so you have the latest version.
For multi-user licensing/year, it's $89 per user per year as well, but the number of users starts at 5 ($445 - 10% off) and goes up from there.
As for the value of the software, I think it's extremely reasonable for what you get in this package.
If you feel $99 is too much, you can always 'kick the tires' and download the 14-day trial (which is what I did) to see if you like it. Honestly, I don't think you'll get past two days without buying it.
I think it's well worth the money since I've been looking for a great wireframing tool.
Conclusion
While I could grab Visio or some other wireframing tool, WireframeSketcher is a more personable product than some of the other wireframing tools out there.
I would consider WireframeSketcher to be at the top of it's game while providing a great quality product that excels at what it does best: creating a fast and easy wireframe.
Wireframesketcher Online
As I said, it does one thing and it does it extremely well.
On a scale of 1-5, I would give this a 5 out of 5. I haven't experienced anything in the software that would cause me to think otherwise.
They just keep adding more and more value to an already exceptional piece of software.
What's your favorite wireframing tool? Post your comments below to discuss.
WireframeSketcher 4.7.5
WireframeSketcher is a wireframing tool that helps designers, developers and product managers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a desktop app and a plug-in for any Eclipse IDE.
Powerful and flexibleWireframeSketcher comes both as a standalone mockup and wireframe tool, but also as a plug-in for any Eclipse IDE. It’s cross-platform and has a native and fast UI on Windows, Mac OS X and Linux. Create anything from quick mockups to large prototypes. Built-in refactoring lets you painlessly rename and move files around without breaking links. Flexible UI lets you take advantage of multiple monitors.
Hand-drawn or clean look
With WireframeSketcher you get rough, unfinished, hand-drawn look for your mockups. This way your stakeholders won’t be distracted by little details and you can focus on what’s important. When needed, you can instantly switch to a clean look.
Extensive library of UI controls
WireframeSketcher comes with an extensive set of UI controls. You’ll find buttons, checkboxes, trees, tables, you name it. Controls are very flexible and can be customized using properties and by applying wiki syntax directly in text.
Wireframesketcher V6
Fast and easy to use
The interface is optimized for speed. Multiple shortcuts allow an efficient keyboard use. The properties view is streamlined to maximize your efficiency. Position objects quickly with grid snapping and smart guides.
Interactive Prototypes
Use linking to create interactive prototypes. Present your prototypes in full-screen mode and click-through to show how the application or website is supposed work.
Flexible wiki formatting
Wiki formatting lets you style any widget that supports text. Using a simple syntax you can make bits of text bold, italic, underlined and even insert icons to make checkboxes, radio buttons and more. Syntax highlighting saves you from getting lost in your text.
Use your own images
Missing a widget? Want to include a logo? WireframeSketcher lets you use your own images. Color images can be conveniently drawn in black and white to blend in with the overall look of the wireframe. And the best thing – you can use SVG vector graphic images which will even automatically get the hand-drawn look.
Large set of vector icons
WireframeSketcher comes with 200+ vector icons that work great with wireframes and that are free to use in your own website or app. Icons work at any size, can be colored, rotated, and embedded in any text. To embed, just hit Ctrl+Space while editing a widget’s text and choose from the list. If these icons are not enough then just install extra icon packs from the stencils library.
Create reusable bits with Components
Do you need a common template, a master for all your screens? Want to reuse that standard dialog in multiple places? Use components to do just that. Changes to a component are instantly visible in all screens that use it. You can put them in the palette and create your own stencils. Any screen can be a used as a component. This means that creating screen variations is easy without any duplication. Easy inheritance mechanism lets you alter component’s instance without breaking the link to its origin.
Storyboard use-cases
Storyboard your use-cases and show how the UI responds to user actions and changes in time. Use storyboards to make slideshow presentations and export multi-page, interactive PDFs or HTML.
Show off your work
Need to discuss an idea without other apps getting in your way? Want to make a presentation of the prototype to your client? Full-screen presentation mode is one click away. Want to send around your wireframes and storyboards? Just export your wireframes to high-quality PDF, HTML or PNG and you are all set. Upload and share exported HTML online on WireframeSketcher servers (wiresketch.com). You can always print out your wireframes on paper and then discuss them with your clients face to face.
High-quality PDF export
Export your wireframes to high-quality, vector PDF and easily share them. Using PDF format ensures that your clients can easily view and test your prototypes without having to install anything. PDFs are also great for sharing your concepts with designers. They can easily open your documents with their graphical tool of choice, copy texts, and import graphics.
Add extra stencils
Make use of the user-contributed Mockups Gallery to jump-start your mockups and to get inspiration from. Find Android, iPhone, iPad, Windows Phone stencils, extra icons and other useful resources and share your own contributions with the community.
Open, XML-based format
Wireframes are stored in an open XML-based format. You can easily store your screens under version control and use standard Eclipse tools to track changes and to perform diffs and merges when needed. Create your own tools around this format by using the open-source SDK.
Only for V.I.P