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

39 Comments

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

Posted by Taylor Ling on December 13, 2011 in Android, Design

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!

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!

About these ads

Tags: Android 4.0, Android Design Kit, GUI Design, Ice Cream Sandwich, ICS GUI, ICS UI Template, Photoshop, PSD Permalink

← [How To] Auto-Forward Incoming Emails in Gmail to Multiple Recipients

[Android] Printable A4 GUI Sketching Kit – Nexus S and Galaxy Nexus →

39 comments on “[Android 4.0] Ice Cream Sandwich GUI Design Kits in PSD”

drunkengrass December 13, 2011 at 11:05 PM Reply

Thanks so much for the PSD. This is rather helpful.
- ghost301 December 13, 2011 at 11:12 PM Reply
  
  Hi drunkengrass,
  
  You’re welcome! Feel free to comment if you think the Design Kit can be improved in any way!
  
  Rgds,
  Taylor
g-roid December 24, 2011 at 1:46 AM Reply

Hey Taylor,

Thanks for this. Any idea what Android devices to design for in the US market? Don’t want to design for 10s of devices, rather for the most relevant ones.

Cheers,
G
- ghost301 December 26, 2011 at 10:04 AM Reply
  
  Hi,
  
  You’re welcome. Looking at the statistic provided by Google, you would probably know which device to design. I would mainly go for hdpi in normal screen size, but watch out for xhdpi, they are coming since the release of Galaxy Nexus has started to build the standard.
  
  http://developer.android.com/resources/dashboard/screens.html
  
  Good luck!
  
  Rgds,
  Taylor
Peter Edwards (@pSupaNova) January 15, 2012 at 10:38 PM Reply

Very Nice. can you include simple UI Elements like Buttons, Option Buttons, Checkboxes, Sliders etc…
- ghost301 January 15, 2012 at 10:45 PM Reply
  
  Hi,
  
  Sure, I am currently updating the design kit to have those UI elements. Probably will take some times (2-3days) to make a 2.0. Stay tuned!
  
  Rgds,
  Taylor
mattketmo January 19, 2012 at 4:55 AM Reply

This new version 2.0 is really nice.
Good job!

I hope that Android developers will now take care about the new ICS design…
- ghost301 January 19, 2012 at 10:49 AM Reply
  
  Hi there,
  
  Thanks! I am really glad to hear that.
  
  Exactly, I really hope Android developers now focus more on UI/UX design rather than coming out with crap apps. Let see how it goes.
  
  Rgds,
  Taylor
Alexander Ovtcharenko January 23, 2012 at 7:53 AM Reply

Hi! Thank you for your great work! But can you mirror this zip to a couple of another file-services — MediaFire seems to be very slow today, I think many users will appreciate this:)
- ghost301 January 23, 2012 at 2:44 PM Reply
  
  Hi there,
  
  You can try to download the same file from my deviantart page:
  
  http://ghost301.deviantart.com/art/Android-4-0-ICS-GUI-Design-Kits-in-PSD-275985871
  
  Let me know if you still failed to get hold of the file, I will personally email it to you.
  
  Rgds,
  Taylor
Hrihikesh January 26, 2012 at 6:30 PM Reply

@ghost301

You did wonderful job! Looking great.

As i am new bay to Android App. development, how can i design GUI elements in Photoshop and apply this in my application user interface like for EditText, button, check box controls.
- ghost301 January 28, 2012 at 1:27 PM Reply
  
  Hi,
  
  I don’t think I completely follow your question, do you mean how to design in Photoshop or for the real development?
  
  Rgds,
  Taylor
yair pike January 28, 2012 at 4:06 AM Reply

dude that is just awesome. many thanks.
- ghost301 January 28, 2012 at 1:26 PM Reply
  
  Hi there,
  
  You’re welcome! Hope you find it useful for you.
  
  Rgds,
  Taylor
David January 31, 2012 at 4:35 AM Reply

Thank you so much! This package is truly awesome.
- ghost301 February 1, 2012 at 8:21 AM Reply
  
  Hi David,
  
  You’re welcome! Hope you enjoy it!
  
  Rgds,
  Taylor
Martin February 16, 2012 at 3:48 PM Reply

An Android developer, but a complete newb in photohop. After opening this template .psd and creating a new document of correct size how do I copy say the 3 Line list layer from your template to the new .psd document ?

Apologies for such a simple question. When I’ve got my head around using this I’m sure it will be so useful.

Thanks
Martin.
- ghost301 February 16, 2012 at 8:54 PM Reply
  
  Hi Martin,
  
  If you look into the folder structure that I have made in the file, you can easily just drag the whole 3-line list layer and drop to the new .psd file, then you can start work on it!
  
  Rgds,
  Taylor
Ken February 18, 2012 at 1:28 AM Reply

You are the Man, thanks for saving the day
GUI Kits for Android Developers « Avion Tech Blog February 20, 2012 at 4:08 PM Reply

[...] [Android] ICS GUI Design Kits in Adobe Photoshop Format [...]
Venkatnarayan B February 22, 2012 at 6:49 PM Reply

Thanks so much. Great effort!
Andy February 25, 2012 at 2:53 AM Reply

Great work! The only thing I am missing is the back arrow next to app logo…
- ghost301 February 26, 2012 at 4:24 PM Reply
  
  Hi Andy,
  
  Thanks for reminding that! I don’t really realize it until you mention it to me, so thanks! I will release 2.0.1 to add the back arrow.
  
  Rgds,
  Taylor
Sasha – [Android 4.0] Ice Cream Sandwich GUI Design Kits in PSD February 25, 2012 at 9:06 AM Reply

[...] http://techietalkz.com/2011/12/13/android-ics-gui-design-kits-in-adobe-photoshop-format/ [...]
s0fa March 1, 2012 at 11:09 AM Reply

thank you thank you thank you x million

from a very busy UX designer
Vikas Gupta May 1, 2012 at 8:34 PM Reply

Hello..
i have a question if you can reply to it real soon i will really appreciate it.

I have designed android application in 72 ppi and now i want to convert it to the ppi/dpi specifications provided by google can you please help and i want to make it real quick…

also can you give me all the exact screen resolutions through which i can support maximum screen sizes.

Thanks in advance
- ghost301 May 2, 2012 at 12:56 AM Reply
  
  Hi,
  
  For maximum resolution support, please refer to ‘Supporting Multiple Screens’ guide by Android Team. To be safe, you must provide ldpi, mdpi, hdpi, and xhdpi to ensure your app run as designed in the Android devices.
  
  http://developer.android.com/guide/practices/screens_support.html
  
  Hope this helps.
  
  Rgds,
  Taylor
gilja June 1, 2012 at 3:23 PM Reply

The information provided will help a lot. Thank you very much.
Man George June 8, 2012 at 2:57 AM Reply

Thanks Taylor, it’s looking great!!
- ghost301 June 11, 2012 at 8:26 AM Reply
  
  Hi there,
  
  You’re welcome! Hope you find it useful!
  
  Rgds,
  Taylor
Android ICS/JB Photoshop GUI Design Kit [Free Download] | Android User Interface | User Experience August 15, 2012 at 1:29 AM Reply

[...] in December 2011, I released the first version of Android ICS GUI Design Kit and since then, it has been downloaded for about 9000+ times. Not a huge amount, but at least I [...]
Bin Nguyen September 17, 2012 at 12:35 PM Reply

Thanks for your sharing, This psd file is cool.
- Taylor Ling September 17, 2012 at 3:57 PM Reply
  
  Hi,
  
  You’re welcome! Hope you find it useful
  
  Rgds,
  Taylor
Luke December 11, 2012 at 7:45 PM Reply

Hi Taylor,
Awesome resource, thanks a lot, just wondering if it should work in Gimp? I’m trying to use it, but none of the layers seem editable, I can toggle the visibility and rename the layers, but I can’t edit things like the actual text. (I have a feeling i’m going to need to get photoshop)
Thanks,
Luke
- Taylor Ling December 11, 2012 at 8:41 PM Reply
  
  Hey Luke,
  
  Yeah, unfortunately the editable text layers only works in Adobe Photoshop. :/
  
  Rgds,
  Taylor
  - Luke December 12, 2012 at 5:26 AM
    
    Thanks for the quick reply! just downloaded the trial of photoshop, the template works a lot nicer all round than in gimp. Now which app to redesign first!
Himesh Goswami March 9, 2013 at 2:22 PM Reply

Thank dear,
Your work is realy awesome.. its helps me alot. thx again
BinNguyen March 22, 2013 at 2:53 PM Reply

Hi Taylor,

I need psd file ADT.psd 480×800 px can you update again this link ? . Or send link download on email to me bkacfan@gmail.com ?.
- Taylor Ling March 22, 2013 at 10:50 PM Reply
  
  Hi,
  
  There is no ADT made for Nexus S resolution. Sorry about that. Try design in Galaxy Nexus or Nexus 4? The size shouldn’t have too much difference.
  
  Taylor Ling

Techie Talkz