Michael Gaigg: Über UI/UX Design

Redesigning my Personal Homepage using Balsamiq Mockups

Posted by Michael Gaigg

I've been working for quite some time with Balsamiq Mockups now and it truly made my designer life easier especially because I'm able to:

• Work through an idea and communicate it and iterate it
• Use incompleteness to identify holes and relationships
• Record and reflect what I am hearing and seeing
• Capture my results and document them

Sure, smaller projects - like my personal homepage - might not benefit as much from mockups than larger ones, but it still helps me to settle on a design quickly (and rather inexpensively) before I get into the hassle of coding.

What is a Sketch?

A simply or hastily executed drawing, especially a preliminary one, giving the essential features without the details.

Beginning

Step 1) Sketch after some initial iterations

First and foremost comes the concept. It grew in me over time, a little aha moment included.

I then sketched it using Balsamiq and refined it until I felt happy. Looks pretty much what I had in mind.

At this moment I'm not worried about color schemes, fonts or implementation specifics. I might have something in mind and almost certainly I know technical implications of my designs, e.g. can I include my tweets, even though I sometimes disregard them in favor of not limiting myself.

Most important at this time is that I sketch the WHAT I want to achieve, the HOW comes later.

Evolution

Step 2a) Including my tweets

Step 2b) Adjusting the tweet element to be less obstructive

I rolled out my personal webpage and was happy... until I strongly felt that my tweets need to appear to give the page some dynamic flavor.

So I went back to the drawing board (my Balsamiq) and sketched out some possible locations for the tweets on the screen.

My goal was to keep the page simple and uncluttered.

Well, something has to give (or maybe not?). I wrestled with myself and convinced the purist in me that tweets would actually add value to the page by showing who I am and what I have to say which in turn could be attractive to whoever visits my site. The objective stayed the same: KISS, keep it simple, stupid.

So I had to find a location and a metaphor to include the tweet section without obstructing the page and overwhelming the message. I found that a speech bubble pointing from my name to the tweets to be the best metaphor.

Result

Step 3) Implementation... the result

So this is what it boiled down to: http://www.michaelgaigg.com.

Ok, the mockups didn't help me to communicate ideas to my client or convince somebody of a better design choice, but they helped me to iterate through some samples before I dove into coding. It kept me from some of my frustrations of earlier days when I was more concerned about the looks before I actually knew where I wanted to go. It kept me on track and I hope that can be seen.

What do you think of my new personal homepage?