Shop Mobile More Submit  Join Login
Android 4.0+ ICS/JB GUI Design Kits in PSD by ghost301 Android 4.0+ ICS/JB GUI Design Kits in PSD by ghost301
15AUG2012: Android ICS/JB Photoshop GUI Design Kit updated to 3.0!
26FEB2012: Android ICS GUI Design Kits updated to 2.0.1!
19JAN2012: Android ICS GUI Design Kit updated to 2.0!

Similar to 1.0, the main motivation of doing this is just to provide some stock elements of Android 4.0+ (Ice Cream Sandwich/Jelly Bean) in a single .psd file so app designer can really focus on creating awesome mock up to show their developers/clients. Some of the elements are just single layer of image, but they should be pretty adequate for quick mock up purpose.

In 3.0, I have included two .psd file in the Design Kit – Building Blocks and ADT.

In Building Blocks, it contains most, if not all of the stock ICS/JB UI elements that can be used to build an app mockup in Photoshop. Most of them covered both Holo Light and Holo Dark themes, so you can easily drag and drop the properly grouped UI elements to your app design.

As for the ADT (not to be confused with the Android Development Tools which is a plugin for the Eclipse IDE), it serves as a starting point for the app designers/developers of the app design. You have the choice to select the design template that start with different amount of tabs and holo theme, and the design in Photoshop starts from there.

So what’s inside the new Android ICS/JB Photoshop GUI Design Kit 3.0:

------------------
Building Blocks
------------------
Soft button
App Login Screen Example
Homescreen (Updated with Jelly Bean Homescreen)
Launcher Screen
Option Bar (Top and Bottom)
Menu
Keyboard
Notification Center (ICS and Jelly Bean Notification Center)
Notification Bar
Dialogs (Toast, Popups, Alert, Jelly Bean App Uninstallation Dialog)
Quick Control (Lab feature in stock Browser)
Settings Page
Tab Bars (Multiple types)
Switches (Radio Buttons, Checkboxes, On/Off Switches)
Activity (Bar, Circle, Progress Bar)
Sliders
Text Fields
Buttons
Spinner
Grid Lists (Horizontal and Vertical Scrolling Grids)
Lists (Single Line, 2-line and 3-line list)

-----------------------------------
Application Design Templates
-----------------------------------
Scrollable Tabs (Holo Dark/Light, with 2-Line list and To-do list examples)
2 Tabs (Holo Dark/Light, with 2-Line list example)
3 Tabs (Holo Dark/Light, with 2-Line list example)
4 Tabs (Holo Dark/Light, with 2-Line list example)
Collapse Tabs (Holo Dark/Light, with 2-Line list example)

This Android ICS GUI Design Kit is best used with Android Design Preview.

Android UI/UX
Add a Comment:
 
:iconlegz98:
legz98 Featured By Owner Feb 3, 2013
Thanks Taylor for this GUI Design Kit!
What about a Nexus 4 Kit (in 768px instaed of 720)?
Reply
:iconeyayo:
eyayo Featured By Owner Oct 31, 2012  Professional Interface Designer
very very thanks!! but, What’s the difference of Building blocks version and ADT version?
Reply
:iconghost301:
ghost301 Featured By Owner Nov 1, 2012  Hobbyist Interface Designer
Hey,

Building blocks contains all the necessary building blocks for creating a mockup, while the ADT contains some preset UI template for different configuration (tabs number, no tabs etc.).

Rgds,
Taylor
Reply
:iconana10gx:
ana10gx Featured By Owner Oct 20, 2012  Hobbyist General Artist
Thanks a lot !
Reply
:iconghost301:
ghost301 Featured By Owner Oct 23, 2012  Hobbyist Interface Designer
You're welcome! Hope it helps :)
Reply
:iconvertus-design-being:
vertus-design-being Featured By Owner Sep 27, 2012  Professional Interface Designer
Do you have such sources for Android 4 Tablet start screen?
Reply
:iconghost301:
ghost301 Featured By Owner Sep 27, 2012  Hobbyist Interface Designer
Hey,

Not at this moment, but it's in my planning to do it. :)

Rgds,
Taylor
Reply
:icontech32:
tech32 Featured By Owner Sep 18, 2012  Professional Interface Designer
Hi! this is really great, thanks for the share. I have some question do you have a .psd for tablet sizes? if not what size do you usually used on creating design on a tablet in xhdpi.

Your help is really appreciated. If you have some answer pls. email me at marvinargeusnoc@gmail.com or just note me here at DA.

Thanks.
Reply
:iconghost301:
ghost301 Featured By Owner Sep 19, 2012  Hobbyist Interface Designer
Hey,

You're welcome!

As for the tablet size, I don't have one right now, and I will going to do one most probably.
Reply
:icontech32:
tech32 Featured By Owner Sep 19, 2012  Professional Interface Designer
Alright! thanks. I'm starting now on tablet sizes but I'm not sure if this is exact. hehe. Let me know if you already had :)

Thanks
Reply
:iconfreemansas:
freemansas Featured By Owner Sep 5, 2012
Can you please provide the terms of use for Android ICS/JB Photoshop GUI Design Kit 3.0? Thanks!
Reply
:iconghost301:
ghost301 Featured By Owner Sep 5, 2012  Hobbyist Interface Designer
Hi,

It's free for commercial use under CC BY 3.0. Don't worry, just use it for app creation, and if it's possible, send me a link for the outcome or give me a credit will do (not a must though). :)

Rgds,
Taylor
Reply
:icontintinytdj:
Tintinytdj Featured By Owner Sep 4, 2012  Hobbyist Digital Artist
Brilliant!
Oh how I hate those 1:1 ports of iOS apps.
Reply
:iconghost301:
ghost301 Featured By Owner Sep 5, 2012  Hobbyist Interface Designer
Hey,

Indeed! Ports are really bad!

Rgds,
Taylor
Reply
:icongrica:
grica Featured By Owner Aug 28, 2012
Excelent! Thank you for sharing this.
Reply
:iconghost301:
ghost301 Featured By Owner Aug 29, 2012  Hobbyist Interface Designer
You're welcome! Hope you will find it useful! :)
Reply
:iconram091:
ram091 Featured By Owner May 7, 2012
Hi i found it really useful and have completed the the UI for my app using the .psd files provided by you.
I'm being a little greedy now by asking if you have anything for the android tablet ICS version ??
Reply
:iconghost301:
ghost301 Featured By Owner May 10, 2012  Hobbyist Interface Designer
Hey,

Glad that you find it useful. :)

No :( Unfortunately there is nothing in place for the Android tablet one because I don't have one around, but let see what I can do.
Reply
:iconuncocoder:
uncocoder Featured By Owner Apr 4, 2012
Great!
Reply
:iconlildayyy:
lildayyy Featured By Owner Apr 3, 2012   Digital Artist
Hi, this is great.

I'm just wondering if it is free to use? It would be a perfect resource to use for one of my current projects for the designs. The designs will not be published, only shown to the developer.

Of course I will fully credit you as the original creator.

Thanks :)
Reply
:iconghost301:
ghost301 Featured By Owner Apr 3, 2012  Hobbyist Interface Designer
Hi there,

Definitely free to use! The idea is to allow the designers to create awesome android apps mockup within a short time, so feel free to use it and generate great app! :)

Taylor
Reply
:iconchosmos:
Chosmos Featured By Owner Mar 27, 2012  Student Interface Designer
thanks <3
Reply
:iconghost301:
ghost301 Featured By Owner Apr 3, 2012  Hobbyist Interface Designer
You're welcome! :)
Reply
:icongwcaton:
gwcaton Featured By Owner Feb 19, 2012
I have no skills to use this but do appreciate you sharing it for those who can make use of it and admire your abilities !
Reply
:iconghost301:
ghost301 Featured By Owner Feb 19, 2012  Hobbyist Interface Designer
Thanks! Really appreciate it! ;)
Reply
:iconnitishq:
nitishq Featured By Owner Jan 22, 2012
This file is really great, it helped me a lot to complete my GUI.
You are awesome.
Waiting for the updated version.
Thank you
Reply
:iconghost301:
ghost301 Featured By Owner Jan 23, 2012  Hobbyist Interface Designer
Hi,

Thanks for your comment! Glad to know it helped you in your design. I will see what I can add to the design kit. :)

Rgds,
Taylor
Reply
:iconhomj:
homj Featured By Owner Jan 16, 2012
looks nice!
Recently, Google released a guidline for App-Design in ICS.
I would love to have this elements included in a .psd! :P
BTW.. how about a Tablet version? ;)

[link]
Reply
:iconghost301:
ghost301 Featured By Owner Jan 17, 2012  Hobbyist Interface Designer
Hi,

Sure, I am already working on an updated version of the design kit, it will include most of the stock elements shown in the guideline.

Unfortunately, it is almost impossible for me to create a tablet version since I do not have any ICS tablet at the moment. I will see what I can do though.

Rgds,
Taylor
Reply
:iconhomj:
homj Featured By Owner Jan 28, 2012
great! thanks alot =)
A friend of mine just bought himself a brand new Transformer Prime and recently updated to ICS! So if this could help you, just tell me ;)
Reply
Add a Comment:
 
×
Download ZIP download, 3.6 MB




Details

Submitted on
December 26, 2011
File Size
3.6 MB
Link
Thumb
Embed

Stats

Views
49,473 (27 today)
Favourites
107 (who?)
Comments
31
Downloads
15,134 (7 today)

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
×