A Mission to Android - The Journey Begins

So I fired up my pencil and picked up a piece of paper and started drawing the layout of my widget. At first I had just the picture of an analog clock in my head. So I did some research. I picked up my phone and looked at the widgets I'm currently using. My main clock is from HD widgets and represents a digital clock. Further it indicates the current weather and shows me alarm time and battery level.
Since I liked it I had to incorporate this information into my own widget.
Next I took a look at the different clock widgets and status widgets on the play store. I took note of the things I liked and incorporated them into my draft.

Digitizing the Draft

Now that I knew what I wanted to achieve I fired up Inkscape and started transfering the paper draft into a digital form. Inkscape is an open source program to create Scalable Vector Graphics.

My first drafts

The current design

None of this is set in stone and I will most likely come back and redesign parts or all of it. 

Tips And Tricks   

Last and not least I want to tell you what has helped me to create my design.

• Always start with pen and paper. I find it a lot easier to draft something on paper it helps to sort out your thoughts and the haptic of a pen and the feel of paper make it easier to be creative.
• Use scalable vector graphics when designing iconic images or when the images you are creating are not too complicated. This will ease exporting different scaled graphics for use in different layouts. It also makes it easy to move things around and create alternative versions of the same thing.
• Create alternative layouts to get a feel for your design. I often find alternative versions more interesting then my original idea.
• Create a raster which gives you the scale of the screen you are designing for. This raster will help you later create the layout in code and make alignment easier. When creating the raster keep different rules in mind like Rule of Third or The Golden Ratio. Try to incorporate them into your design to get a pleasing look.
• Make yourself a mask that resembles your screen and make that mask a multiple of the resolution you are targeting. I often find it nice to have a mask that has as the width a multiple of the dip (Device independent Pixels) of your target screen. This way you can simply read off sizeings and don't have to calculate them. Or calculation is a simple division without any floating values.
• Be ready to break out of standards but always keep in mind that there is a reason why these standards have been established. Not all new things are good things ... but you will never know if you don't try new things.
• If you don't like it chances are others won't like it either.

Hope you enjoyed this post and I hope to hear from your design tips.

Yours truely

Stefan Langer

E34Clock on Github