Free Wireframing and Mockup Tools Impressions

I’ve tried a couple of wireframing apps that are free (or have a free option) and are web-based. I don’t have a set criteria so all of these impressions are pretty subjective and not that in depth. One feature that I really would like, though it may not be that practical/useful, is to have vectorized output (if exporting as PDF or SVG).

Many of these apps have common features listed below (including my personal rank of importance for my purposes):

  • drag and drop interface (important)
  • decent collection of basic UI components (important)
  • multi-page support in a single project (semi-important)
  • interactive prototype with links to different pages within the project (nice to have, but not that important)
  • collaboration framework; inviting people to view/edit in real-time (nice to have, but not that important)

As such, most of what I say about each one will focus on the drawbacks, particularly the ones that were deciding factors to not use them.

Pencil

Implemented as a Firefox extension

Okay, this one isn’t really web-based, but it’s not a desktop application either. It’s actually a Firefox extension. This one has been around for awhile and it works pretty well; it has support for multiple pages and a pretty good selection of widgets. The major downside is export options. Frankly, they suck and some of the export profiles/plugins don’t work. Thus, this one is out the window for me.

Lumzy

Implemented with Flash.

This web app seems too good to be true, and as it turns out, it doesn’t work as well as I would’ve liked. A seemingly small but important gripe is the selection tool. Click an object to select (which highlights the border with dots on where you can resize it with a mouse drag). That makes sense, but the only way to get rid of the border is to select another object. What that means is you can’t click outside the object on the canvas to unselect the  object, so your stuck with the border highlighted until another object is selected. This is a minor aesthetic detail, but it becomes a big deal when the project is exported, because the selection border shows up in the final export.

Another drawback for me is the font; it looks kinda ugly and I didn’t see any option to change it. And the last gripe I have with it is even though it can export to PDF, the output isn’t vectorized.

Google Drawings

Implemented with HTML/CSS/Javascript

This is part of Google Docs so it’s more general-purpose than the other ones. All-around, however, it embodies all the features that I think are important, namely SVG output, font modifications, and sharing options (included with every google doc). But since it’s not specialized for wireframing, it has some drawbacks for this goal. No multi-page support and no options for implementing interactivity. This feature isn’t as important to me mostly because I’d rather first choose an overall design scheme and implement the actual flow using code (currently experimenting with a lightweight web framework called Sinatra, built using Ruby).

LucidChart

Implemented with HTML/CSS/Javascript

This is the webapp that I actually won a Cr-48 from! (No I haven’t received it yet, but hopefully I will soon). This app is pretty powerful and has a really nice and smooth interface. It’s also got several useful export/publishing options including PDF (vectorized! Yes!) and link-sharing. There is multi-page support and interactivity as well via links to internal pages or external sites. The only drawback is the free package is pretty limiting (only 60 objects per document), but for basic/small wireframes, it works great.

Offline option: Inkscape

For offline option, I’ve tried using Inkscape, based on this presentation by someone who prototypes for Fedora. The presentation is a nice quick intro to using Inkscape for this purpose, and SVG can be used to create interactivity by attaching javascript (since it’s an XML document). SVG also has pretty wide support across modern browsers.

More…

For more wireframing options, check out this blog post on speckyboy. Some brief thoughts on some that are listed in the post:

  • Mockup builder – no export options; only link sharing (no offline viewing). Implemented with silverlight.
  • Tiggr – needs more experimenting with, generates a HTML/CSS prototype but has no other export options. Interface implemented in flash.
  • fluidIA – not that easy/intuitive to use, but looks like it could be powerful if learning curve is overcome; still immature.
  • Mockflow- implemented with flash, needs more experimenting. There are several export options, but in the output, text is not vectorized (overall quality is still good though; you’d have to zoom in a lot to see the pixels)

Body Worlds Vital Exhibit

This past Friday I went to the San Jose Tech Museum (The Tech) with my sister, brother-in-law and dad to see the Body Worlds Vital exhibit. It was my first time going to this sort of exhibit on the human body and it was really fascinating and inspiring on two levels.

The first level was actually a conviction in intelligent design. As I read various descriptions and summaries on certain muscles, the nervous system, circulatory system, and digestive system, I was just so amazed at how truly, every part of the body, down to the smallest blood vessel, serves a purpose. So much is going on in everyday actions like breathing. The body contains a myriad of systems and sub-systems that all work to accomplish a specific task that contributes to the general well-being of the entire body. This is engineering and design at its finest. To me, the complexity and thoroughness of the human body (and life in general) points to the notion that there was and is a creator and designer. As my sister once said to me, the notion that all of this came to be through sheer chance and probability is harder to believe than the idea that someone was behind it all. I realize the evolution vs. intelligent design debate is a rather touchy one, but I’m not trying to specifically convince or refute anyone. These were just my overriding impressions from the exhibit.

On the second level of fascination and amazement, I became inspired to be more active in maintaining and taking care of my body, which basically translates to eating healthier and exercising more. One of the objectives of the exhibit was to motivate people to fight the sedentary lifestyle that humans have become accustomed to, and to be more active. Regular exercise helps fight aging and a good diet keeps the internals running optimally and cleanly. Being able to see our innards (which was both intriguing and grotesque) allowed me to realize just how much an effect (whether positive or negative) diet and exercise can have on our bodies.

This also reminded me of 1 Tim 4:8 – “for bodily exercise profits little, but godliness is profitable for all things.” If now I feel that physical exercise is so important, how much more important is exercising ourselves toward godliness?

Deception of the Gibeonites: Living Carefully

This post has been in my mental queue for awhile now, for no real good reason. And as with most of my reflections here, it’s particularly relevant to my life.

After Joshua and the Israelites defeated Jericho and Ai, the rest of the Canaanites were terrified and united together against Joshua; all except for the Gibeonites. Although they were a neighboring people, they came to Joshua pretending to be ambassadors from a distant country. To support their claim, they brought along old wine skins, dry and moldy bread, and battered clothes and sandals. And with this guise, they sought and won a treaty with the people of God. This is recorded in Joshua 9.

One passage that got me thinking was 9:12-15, where the Gibeonites describe how worn out and disgusting their provisions were. In spite of this, what did the men of Israel do?

Then the men of Israel took some of their provisions; but they did not ask counsel of the Lord.

So Joshua made peace with them, and made a covenant with them to let them live; and the rulers of the congregation swore to them.

They accepted the provisions, even though they knew they were pretty much garbage. And perhaps out of our human inclination to reciprocate, they established a treaty with a people they were supposed to drive out. Why in the world did they even accept these provisions in the first place? It didn’t make much sense to me.

Then a thought came to me. Maybe it’s because it was free.

Let’s be honest. Most of us are suckers for free merchandise. We’ll gladly take stuff that is useless or low-quality if it’s free. A visible example of this is a career fair. A lot of people go not just because they’re looking for a job, but also because they want to get their hands on some free goodies (yes, some are actually cool/useful, but the majority of the giveaways, well, suck). So many free pens I’ve horded I’ve just ended up throwing away because they don’t write smoothly. So many XL shirts that I never wear. Even the “cooler” things are useless; a mini USB light, low-fidelity ear buds, and yes, boogie bots. On a few occasions I was able to go to a career fair as a recruiter. Some of the candidates I talked to, you can see their eyes glancing down at the table where all the goodies are, while they’re talking to me.

If it’s free, our hands will be all over it. Maybe that’s why the men of Israel accepted the provisions of the Gibeonites. After all, it was basically free food, clothes, and water bottles. This gesture deceived them into establishing a treaty.

Sometimes this can happen in our own lives too, especially with the prevalence of multimedia. And the internet makes media extremely accessible and in many cases, free. We know that a lot of media is actually detrimental to our spirituality and can influence us away from godliness. We know there is a lot of content that can skew us away from the principles of the Bible. But in spite of this knowledge, we still fill ourselves with this kind of entertainment that usually does more harm than good. In my own experience, I’ve burned a lot of time on useless media that could’ve been better spent in “asking counsel of the Lord.”

If this media was not as accessible, it’d be easier for us to resist. Just imagine if youtube and hulu started charging money to watch all of their videos. If that wouldn’t stop us from watching it altogether, it’d certainly make us watch less, right?

Thus, as God constantly told His people, we must be careful to keep God’s commandments. We must live carefully. Don’t let the notion of “free” cause us to drop our guard and make us prone to the deception. We must put on the armor of God and be watchful in prayer, in order to stand against the wiles of the devil. Let us be careful to seek what is actually precious and valuable, which is our Lord Jesus Christ.

LucidChart and Cr-48

Well this was a pleasant surprise.

A few weeks ago I was looking for a wire-framing/prototyping/mock-up solution online (I will write a post about my findings later), and one of the ones I came across was LucidChart. Basically it’s a web-based diagram creator built with HTML5 and javascript; an alternative to something like Microsoft Visio.

As luck would have it, I saw that they were holding a contest and giving out 100 Cr-48 notebooks, and all you had to do was make something to enter. Since I wanted to play around with the app anyways, I figured I would try to draw something to get a feel of what the app was capable of, and enter it into the contest for kicks. I ended up drawing some renditions of Kirby, my all-around favorite Nintendo character. You can see it here.

The contest ended on February 12 and several days after that, I got an email saying “Congratulations! You’ve been selected to receive a Cr-48 from LucidChart and Google!” I couldn’t believe my eyes when I read that subject line and let out a “WHAAA??” like the minion in Despicable Me.

You can see all the winning entries on LucidChart’s blog entry. Yay! I have received my tiny bit of internet fame.

Anyways, I plan on making use of the Cr-48 and writing my thoughts and reviews on it here. I’m quite excited for it.

I also wrote a post about chrome OS here, if you’re interested. And if you don’t use the chrome browser, you should. Because it’s fast.

Forking: Abort

Just to demonstrate how indecisive I can be, today I created a “geek” wordpress installation and had it set up at geek.leehsueh.com. It would house all posts related to technology and the information industry. I picked out a nice theme that I liked and created an About page.

Then 30 minutes later, I deleted it.

I realized I didn’t want to maintain 2 blogs, and I didn’t want my loyal readers to have to keep track of two URLs.

Instead, I have slightly reorganized my categories. In the unlikely event that someone will want to only subscribe to my tech-related posts, they can just subscribe to the overall Information and Technology category. And for posts that I deem as more personal I’ll just password protect. How will I disseminate the password? I guess e-mail will do.

Forking

I am contemplating forking this blog into two. On the one hand, I would like to blog more about geeky stuff like web development, information studies with a UX focus (prospective graduate studies!), and technology in general. These are posts that I would want more people to read for mutual learning/discussion and simply for developing my own understanding of such topics. On the other hand, I want to continue writing more personal, reflective, and spiritual entries which I would feel less comfortable opening up to all of the internet.

At first I thought that having two blogs would somehow indicate that I’m living two lives or something, which typically is viewed as negative (when was the last time you had a positive reaction to someone who “lived a double or two-faced life?”) Another thought was that if I separate out all of my spiritual posts from the public-facing blog just because it doesn’t quite fit with the geek stuff, is that in any small degree a form of not acknowledging Christ before men? But then again, these two directions aren’t conflicting at all (at least, I don’t think they are); they would just represent two distinct, but not conflicting, aspects of who I am.

So what’s stopping me now from doing this? Pathetically, petty things like what name should I give to each blog? What URL should I use? And one less-pathetic concern: How should I secure the blog that’s intended for a more private audience? Should I just make one and only send the URL to certain people? Should I just make every post password-protected?

Any thoughts/suggestions are welcome!

In any case, these questions need to be deferred until next month or later, because as it turns out, things are quite busy in February with responsibilities and appointments. For example, I am getting a crown on my birthday. A dental crown.