[Android 4.0] Ice Cream Sandwich GUI Design Kits in PSD

Taylor Ling

8 years ago

Update

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!

Details

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)
Homescreen
Launcher Screen
Option Bar (Top and Bottom)
Menu (Grey and White)
Keyboard
Notification Center
Notification Bar

What’s new in 1.1:

Pop Up Menu
Dialog
Quick Control (Lab feature in stock Browser)
Settings Page
Tab Bar

What’s new in 2.0 (Holo Dark and Holo Light for most of them):

Tabs bar
Dialogs
Switches
Activity
Sliders
Text Fields
Buttons
Spinner
Grid Lists
Lists

What’s new in 2.1:

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.

This Android ICS GUI Design Kit is best used with Android Design Preview, you can read more here.

Download

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!