How To: Create a UI mock-up with ArtRage

Earlier today Darren Neimke posted up about the various mock-up techniques he has seen out there in the wild and used one of my crayon-style drawings as one example. The mock-up he used was a simple screen that a user would visit after receiving a URL in an e-mail which allows them to add meta-data to tag to help add structure to the tag cloud.

Since I thought folks might be interested, I thought I would write up a follow-up to Darrren’s post which explained a little bit about the process I used to come up with those mock-ups. It isn’t rocket science so this should be a fairly short post🙂

The Tools

The first thing to consider is the tools that I use. I’m lucky enough to be a Tablet PC user which means that I can use free hand drawing tools to quickly sketch something out. In fact, being about to sketch things out like I would on a Napkin was one of the big drivers for me getting a Tablet PC – I wanted that experience specifically.

Other than having a Tablet PC I would remiss not to mention the awesome software from AmbientDesign, ArtRage (I am using ArtRage 2.5 Full Edition). ArtRage is specifically designed for use with digitisers and absolutely comes into its own with a Tablet PC. It provides a textured drawing surface with a tools with adjustable attributes (such as wetness, pressure etc).

ArtRage0

Obviously when using the pen you don’t get the same feel as a brush would give you on paper but the way the tool tracks the stroke and renders the line makes it seem like the least computerish computer stroke I’ve ever seen. You can actually see the texture of the stroke on the screen, and then scrape the extra paint loaded on the surface away – leaving a mark. Very realistic effect.

The Process

Starting with a blank canvas can be pretty scary so I’ve actually got a technique that gets me into the mood and allows me a few moments of think time. Basically I’ll grab a sharpie, choose a colour and just build a textured background. While I’m doing this I’m really just loading all the basic requirements for the page I need into my head.

1

2

One of the nice side effects of this is that if I can’t think what the page should look like in a few strokes of the brush, then I am probably trying to get it to do too much (the notable exception to this would be portal pages I suppose). Once I know where I am going I frame the page.

3

4

And this is really where I get into fleshing out the page. Actually here I really need to give credit to the 37signals guys that got me going down this path. They pulled together a book called Getting Real which captured their design/development process and talked about a concept called “epicenter design“.

You might think I’ve ignored their advice about framing the page, but if you look carefully all the work I’ve done up until now isn’t about colour or style (the back of the page isn’t going to be orange – that was just to get my creative juices flowing), and the frame I drew wasn’t the border of some inner div on the page, it is actually the edge of the browser.

So epicenter design then, for me, is about designing that critical functionality into the page. Usually I’ll just do a bit of a skeleton using a pencil tool, maybe with different gray scales just to add a bit of contrast for the different types of UI elements.

In this case I am designing a simple little application where our guys can basically vote on various aspects of their working day. I’ll leave out why we might want to do this, but just accept for now that it is something that I think we need as a bit of a real-time business intelligence tool.

5

Once I am happy with the general function of the page I *might* add a bit of colour. This is usually more to do with ensuring the consumer of the mock-up doesn’t have to squint so much and can understand the intent of the various UI elements. In this case adding red and green to the buttons really helps convey a positive and negative feel.

6

If I’m happy with the function of the page I might add a little bit more polish just to compartmentalise the page a little bit but I would expect most HTML gurus to do this anyway whilst they are tweaking the layout a bit.

7

And there we have the finished product, well, a suggestion of what the finished product should look like. There isn’t much to it, and I think that there are plenty of places where I could improve my technique.

  • Remembering to use layers so I can “fix” things; in this case I wanted to add more of a gradient to the section behind the centre of the page, but I forgot to put in layers so I couldn’t, that is why I’ve got the diagonal lines to add some texture there.
  • Capturing movement in the page; when [+1] or [-1] is pressed I want some kind of fade-in/fade-out popup to acknowledge their input.

Anyway – that is how I do it, like Darren I am interested in seeing what others do.

4 thoughts on “How To: Create a UI mock-up with ArtRage

  1. Pingback: PaulStovell.NET » Mockups: Close the Feedback Loop

  2. Jason

    Great post! You definitely have me interested in a tablet PC now. I love jotting notes freehand and you might have pushed me over the fence with this one. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s