Photoshop template for BB10 UI design

Yesterday I started doodling with pen and paper, to plan the UI for WIseTasks for BB10.

Today, I’m converting it to photoshop to see how it really feels, and then tomorrow I’ll move to HTML+CSS.

One thing I want to try, is to see how good it looks in both the L-Series(touch) and N-Series(keyboard) phones. To make this easier, I created a file in Photoshop with the frames of both phones and respective screen resolutions, so that its easy for me to draw and plan the interface in the screen and see how it looks.

I’m sharing that file here (10 Mb) for others who might want to do the same. Happy BB10-ing

PS – no, I didn’t draw round corners

Instructions

Don’t touch any of the layers. Just use the one labeled “Your design here”. The layer has a mask so that nothing goes outside the phones’ screens. Just paint or paste inside there.

Update: there’s now another layer for turning the Action-menu on/off.

Update 2: included layers for some of the most common UI elements. You can copy and drag and drop to build the interface. More to come soon!

About these ads