graphics, process, ui, Uncategorized, web design

On Mockups & Prototypes

It is generally a good idea to show your client what an app or site will look like before you actually build the thing.

And one typically does that through the use of mockups or prototypes.

Mockups vs. Prototypes

I think of mockups as the simplest possible sketches, while prototypes fill in many of the details (colors, logos, fonts, etc.).

Both represent a balancing act — They need to be polished enough to convey your ideas to clients, but you don’t want to spend a lot of time making them.

There are tons of ways to make them — pencil & paper, Balsamiq, etc.

How I Do It

I have a habit of skimming over the mockup stage and just making prototypes — For anything more polished than a line-drawn sketch, it’s usually faster for me to code the HTML/CSS, render it in a browser, and then save a screen shot than to monkey with PhotoShop, etc. Plus, a lot of that code can be reused as the project goes forward.

But this skipping-the-early-mockup-stage approach usually assumes that I have a good idea of a way forward — what if I want to present several different ideas for a project?

Rapid Prototyping

My Stanford – Coursera MOOC course on Human-Computer Interaction has me thinking more about rapid prototyping. In this course, our professor Scott Klemmer makes a strong, research-backed case that it is better to develop multiple ideas in parallel. There are many reasons for this — the designer/developer doesn’t get “married” to any one design (“separating ego from artifact”), and having multiple ideas allows for better group dynamics as these projects go forward. (The real mind-blowing stuff from Professor Klemmer is that the mockups don’t matter nearly as much as the FEEDBACK that you get from your users.)

Get Your Free Browser Line Drawing Here!

So in order to produce more ideas more quickly, I’m back to sketching…. I need some structure for this, so I produced my own little line-drawn template of a browser window:

Browser Template for Mockups


(Note that the file is in .zip format b/c WP doesn’t like .SVG for security reasons.)

(And, yes. Yes, I am a fan of Firefox. Why do you ask?)

Now I can print out a handful of these and sketch designs very quickly.

The next stage of my experiment will be to edit this SVG template into an actual prototype (I hesitate to do this, because I still think it would be quicker to do via HTML/CSS.)


coding, process, web development

Adzerk Rebuilt Its Ad Server with Node.js

It’s always fun to visit the Triangle and see what the cool kids are working on…

Why Node?

I went to Adzerk in Durham yesterday to see how their team re-built its ad server with node.js, the exciting new server-side JavaScript technology.

So what does an ad server do? It serves ads. (You’re welcome.) For example, say you visit — Adzerk’s ad server will determine which ads you see on the sidebar. Someone visiting the site from Austin, Texas on a Sunday afternoon using Chrome would see a different ad than someone in Australia.

Obviously, speed is a priority, and Adzerk’s ad server has been processing 10,000 – 16,000 requests per second. There is no time for database calls, so they use a ginormous JSON blob.

No database
There is no database

So Node.js is ideally suited for this kind of thing — responding to a ton of requests very quickly. Nate Kohari of Adzerk explained that it would be less useful for web apps that required a lot of intense processing of each request.

While I love seeing how other folks build these kinds of cutting-edge web apps, I told my CIO that hanging out with the node.js folks made me feel like I had rented a programmer costume from the Halloween store or something.


management, process

got Stoos?

If you find yourself thinking about how and why organizations work the way they do, check out the Stoos movement.

Last week I had the opportunity to participate in a session facilitated by one of the original birthers of the Stoos movement, Catherine Louis. [Stoos is named after a Swiss village where 21 big thinkers met to work out a better way for organizations to function. (“Stoos” is pronounced — scht-oooh-sss – well, that’s how I pronounce it).]

Photo of the Actual Research Triangle Where Stoos Was Studied
Shhhh. Students of Stoos Are Studying.

The Stoos founders wanted to spark a revolution in the way organizations were led and managed, as described by Steve Denning. According to their Communiqué, organizations should become

learning networks of individuals creating value . . . [T]he role of leaders should include the stewardship of the living rather than the management of the machine.

Stoos Exercises
One of the Group Exercises Exploring Stoos Principles

Although Stoos is heavily influenced by Agile/Scrum types like Catherine Louis, it is a “movement of movements,” and not limited to I.T.

The presentation was hosted by the Agile Leadership Network (Raleigh/Durham Area Chapter) and included a presentation and exercises to learn and apply Stoos principles.

Further Reading

For an overview, see Steve Denning’s article in

Catherine Louis has shared an in-depth overview of Stoos via SlideShare

Stoos Network Website

The Communiqué

Stoos Network on LinkedIn


coding, mobile, process, ui

RGreenway: Raleigh’s Greenway App

Picture this – you’ve wasted spent another weekend coding with precious few hours of daylight left to claim any outdoor recreation before the weekly grind. You’ve got cabin fever & need to get out for a nice walk/hike in the Great Outdoors. You need to find a public park, locate a parking spot, get a trail map, and check the weather forecast.

If you’re in Raleigh, there is indeed an app for that.

It’s called RGreenway, and its developer, Eric Majewicz, was kind enough to demo it for TriDroid last week.

Eric Majewicz demos the RGreenway app.
Eric Majewicz demos the RGreenway app (for Android).

Eric went over a lot of the challenges in building this app, from working with various APIs (e.g., MapQuest and iSpeech) to wrangling the geographic data for the trail maps (provided by the City of Raleigh, North Carolina, as part of an open data initiative).

RGreenway Screen Cap (Android)
RGreenway Screen Cap (Android)

His presentation was especially interesting, though, for its description of “soft” considerations beyond heads-down coding, such as building a team with a diverse skill set and gathering requirements from key stakeholders (a/k/a “users”). Taking this kind of care produced high-quality UI and UX — the ultimate measure of an app people will actually use and enjoy.