Tag: ui

Categories
Uncategorized

UI Mockup/Diagram Apps

UI Apps

I wanted to mock up a control panel for a project (a real physical control panel, not a software control panel) and remembered that I had OmniGraffle on one of my machines, so I started with that. Unfortunately it appeared that it was a demo version and was limited to 20 objects.

OmniGraffle

OmniGraffle is a sweet application, and I considered buying it, but at $99 for an individual license, for an application I probably won’t use that much, I opted not to pursue it. (Oh, and I did think about just using Inkscape, but I thought it would be more fun to use a diagramming specific application for this project.)

Dia

I found Dia, an open source, multi-platform application for creating diagrams. Dia actually looks like a pretty nice application, and I do prefer open source when possible, but I also find X11 applications a bit clunky, and while I’ll keep an eye on Dia, it didn’t quite live up to what I wanted…

Pencil

I ended up revisiting the Pencil Project, which I looked at last year, and I really like it. It’s a great application for mocking things up, and it even ties into one of my favorite sites, OpenClipArt.org.

Pencil Menus

The one annoying thing about Pencil is the menus. I’m using Mac OS X, and I’d like the menus to work as they do on Mac OS X, and these are just weird.

Here’s the output I got from each application. It should be mentioned, these are all rough, and by no means final. I really just wanted to quickly kick out a design from each application.

OmniGraffle Mockup
OmniGraffle Mockup

Dia Mockup
Dia Mockup

Pencil Mockup
Pencil Mockup

I’ll probably use Pencil moving forward and see how much I can push its capabilities. (And yes, it’s also open source and multi-platform, which is one more great thing about it.)

Categories
Uncategorized

The Business Journal…Unread!

The Business Journal

I followed a link to a Business Journal article and when I saw a little red circle at the bottom with a number in it, I thought “Hey, I have some unrea…. Wait-A-Minute!!!”

Did you think the same thing? Many of us have been conditioned by Mac OS X, iOS, Facebook, and other applications/interfaces to instinctively click on any icon with a red circle and a number it in. Those of us who are obsessive will click on these things for just one reason, to make them go away.

Whenever my wife would log into Facebook I’d yell “You have messages, click on the red thing!” so much she banned me from looking at her screen until I stopped. She never clicked on it, and didn’t care about, and I eventually came to accept that.

Hey Business Journal, you almost got me. I almost clicked on it… but I didn’t.

So for those of you in the web design, marketing, advertising, publishing, and UI/UX worlds… Is this clever as heck, or deceptive as hell. (Or both!?)

Categories
Uncategorized

Pencil – Prototyping with Firefox

One of the reasons I love Mozilla so much is the diversity of projects that have come out of the technology they’ve created. Take for instance, the Pencil Project, which has a mission to “build a free and open source tool for making diagrams and GUI prototyping that everyone can use.”

I spent a little time playing with Pencil in Firefox (there’s also a standalone version if you’re using Windows or Linux, made possible by XULRunner) and it’s a nice little prototyping toolbox.

Pencil UI

Here’s what the Pencil UI looks like when run in Firefox on Mac OS X. The left side contains your typical drawing elements, bits, and pieces, and the right side is your canvas.

Pencil Sketchy GUI

Here’s the “Sketchy GUI” collection, which simulates rough sketches of UI elements, allowing you to quickly mock-up what something like a web app control panel might look like.

Pencil Mock-up

Here’s a quick mock-up I did with Pencil. Wow, it looks just like an actual sketched mock-up of a web UI element… pretty amazing, eh?

Pencil Graphic

Pencil also lets you drop images into the canvas and resize and crop them, so you could use it as a quick-n-dirty (somewhat limited) image editing application that runs within Firefox.

There’s much better screen shots at the Pencil site. There’s also guides for users, and developers, and plenty of other stuff to check out, so get prototyping!