15AUG2012: Android ICS/JB Photoshop GUI Design Kit is updated to 3.0 and released at AndroidUIUX!
29FEB2012: Android Team have officially provided the Android Design Stencils in Adobe Photoshop format! Awesome!
26FEB2012: Android ICS GUI Design Kits updated to 2.0.1!
19JAN2012: Android ICS GUI Design Kits updated to 2.0!
1.1: Added more stock ICS GUI elements. Refer below for details.
2.0: Based on the official Android Design by Android Team, most of the ICS GUI stock elements have been added. Below image shows a summary of the content.
2.0.1: Added the Back Arrow for the top action bar. Thanks Andy!
I have been designing mock up of Android app in Adobe Photoshop and I find that a GUI Design Kit is extremely important, and I thought there isn’t any good (and simple) one in the wild, so I have decided to make this Android ICS GUI Design Kit for two different resolutions and dpi:
- 720×1280 320dpi – Samsung Galaxy Nexus
- 480×800 240 dpi – Samsung Nexus S, Samsung Galaxy S II
The main idea of this GUI Design Kit is not making everything scalable to the unfortunate fragmentation occurs in Android, but just provide some stock elements of Android 4.0 (Ice Cream Sandwich) in one .psd file so app designer can really focus on creating awesome mock up to show developers/clients. Some of the elements are just single layer of image from ICS, but I thought they are pretty adequate for mock up purpose.
So what’s in it (1.0):
- Soft button (Only 720×1280 version)
- App Login Screen Example (Life 1.0)
- Launcher Screen
- Option Bar (Top and Bottom)
- Menu (Grey and White)
- Notification Center
- Notification Bar
- Pop Up Menu
- Quick Control (Lab feature in stock Browser)
- Settings Page
- Tab Bar
- Tabs bar
- Text Fields
- Grid Lists
- Back Arrow in Top Action Bar
As mentioned, do expect some of them are just a single layer of image, but they are fixed at correct position so it can make app designer life easier. I will update this Android GUI Design Kits for more stock elements (or non-stock in the future) over time. Don’t hesitate to comment if you have any suggestion/found any problem with the GUI Design Kit.
Head to AndroidUIUX for the new updated Android ICS/JB Photoshop GUI Design Kit 3.0!
Need more? Go grab the official Android Design Stencils from Android Team! It’s really great to know that they are serious about the design now.
Note: This GUI Design Kit is made using the latest Android Roboto Font, so grab the font and install them as well!