10101 Software


Dock Clock UI

Posted on January 20, 2011 at 11:18 PM

I decided to design the new GUI today. I'm amazed that I had time to do this between school projects and work. 

When I design a user interface I draw it out on paper first. It gives me the ability to sketch what I want fairly quickly, if roughly. It is enough to let me know where the interface elements to go but not much else. Below is the sketch version of the Dock Clock UI: 

My next step is to make a graphic that looks very much like the finished product will look like. This usually takes longer than the sketch but it is higher quality and gives me pixel-perfect placement for each UI element. I use Photoshop Elements because I don't need the advanced photo editing features of the Creative Suite. 

The graphic is very helpful in defining the color scheme and how I want the UI to look on different platforms. Photoshop allows me to create and replicate any UI or element form any platform. For instance, Dock Clock is a Mac product but I am developing it on a PC. Also I like Apple's Human Interface Guidelines. You should too. 

Here is the graphic: 

So, that is what the Dock Clock UI is planned to be. I am stripping a few features out of Dock Clock 3 but that is to help the performance and code organization. Any feature suggestions will probably make it into 3.1! 

How do you guys like this UI? What questions and/or comments do you have? 


Categories: Dock Clock

Post a Comment


Oops, you forgot something.


The words you entered did not match the given text. Please try again.

Already a member? Sign In

1 Comment

Reply Overseer
4:50 PM on January 21, 2011 
That's pretty cool to see your sketch first. I think the UI looks nice; I'm not knowledgeable enough in this area to offer suggestions at the moment, though... Good luck with it!