Review: WireframeSketcher

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.

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.

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.

1. Select an object in the Screen Editor.
2. 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

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.

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.

Review: WireframeSketcher

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.

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.

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.

1. Select an object in the Screen Editor.
2. 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

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.

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.

Can Web Developers Put Lipstick on a Pig?

There are a lot of great web developers out there, but can they create a website design as well? Today, I talk about a rare breed of developers.

As a web developer, you don't think about how pretty your website is supposed to look.

Most developers focus on functionality. Get it working and pass it off to design.

However, when you're done coding and everything works, you aren't done.

Granted, yes, you are done with the heavy lifting, but now you have the other end of the spectrum which requires your attention: the design! (And there are others which I won't go into with this post).

My mother always said presentation is everything. This is especially the case in web development.

It has been proven when a visitor comes to a site, it doesn't matter how functional your website is, you have 3 seconds to capture their attention with the website design.

After that, it's ADHD-land, folks. They can easily close the tab and head over to another website.

Of course, developers love to do one thing: write code. Not all programmers know how to create striking art for an awesome website design.

I'm not talking about grabbing a piece of clip-art and slapping it on a website. I'm talking about using two hi-tech devices known as a pencil and paper and actually "developing" their artwork and translating it from analog to digital format.

Don't believe that you need a designer for your website? Check out this website design of LonelyPlanet.com.

If you want more of Ian's story, check out how he built a maintainable Web Style Guide along with the slidedeck on LinkedIn.

Fortunately, the website design went through a huge revamp which, in my opinion, was absolutely necessary. ;-)

Create a Work of Art (through experience)

Once in a great while, you come across a rare breed of developer who can design or a designer who can develop.

I call these people devigners, who combine a developer and designer mentality in their process of building a site.

Take it a step further and you have what are called full-stack devigners.

These individuals are worth their weight in gold.

Why call them full-stack devigners?

1. They know how to architect, design, build, test, deploy, market, AND monetize an entire website design from soup-to-nuts.
   
   
2. They use graphic tools like Paint.Net, Photoshop, Illustrator, GIMP, and Inkscape like it was second nature to them. They create the visual part, or front-end, of the website design.
   
   
3. They've designed and built databases that work with the entire site.
   
   
4. Besides, the name devigner almost gives it a spiritual aspect to those who "see" things differently. ;-)

As I mentioned, these types of individuals are very rare, but they usually put development first. Most coders find sanctuary in code.

Don't get me wrong. Developers do have a creative side to them, but it's artistic in a different way.

As a developer, I feel the best way to become a designer is to build as many websites as possible so your experience in building exceptional front-ends will speak for itself.

Conclusion

The bottom line is that it doesn't matter how solid the database architecture is or how it provides quick access to the domain objects. If the developers don't have a visually stunning presentation, the product will not make it to market.

This is why there are specialists in the field dedicated to this particular function and your layout, graphic, and usability designers will play a big part in selling your application.

Can developers be visual designers? Heck...do they like doing design or is it strictly a coding lifestyle for them?

If they created a functional "pig," sure it will work, but can they add an attractive and stunning front-end to it using HTML, CSS, and JavaScript?

So, I ask you developers out there...can you dress up a pig?