Android UI Design Kit for Photoshop 4.2.1 [Free Download]

Nexus 4 Tilted Left

Since there are some new UI elements in Android after Google I/O, I have decided to spend some time to update (and optimize) the Android UI Design Kit. There are some new UI elements added into it (and I removed some most-likely-unused UI elements). Besides that, I have also added some Quick Start PSD file that contains some main UI elements like Action Bar, Tabs, and Navigation Drawer, so the user able to choose not to start the design with the PSD file with all Building Blocks. And yeah, it finally come with Landscape orientation as well!

What’s inside for 4.2.1

  • UI Elements
    • Added new Navigation Drawer
    • Added Fading Action Bar
    • Added Numpad-style Time Picker
    • Removed Grid Lists
    • Removed Disabled/Focused/Disabled Focused Radio Button and Checkbox
    • Removed Quick Control
    • Removed some unnecessary Tabs elements
    • Removed Gestures
  • PSD Files
    • Gestures
    • Quick Start – Portrait
    • Quick Start – Landscape (Yes, finally!)
    • Portrait with all building blocks
  • Misc
    • Loading speed should be improved slightly after removed some unused UI elements
    • New Login Page with Romain Guy’s awesome photo
    • New Android UI Design Kit Logo
    • Changed time ­čśë

Download

Android UI Design Kit 4.3 for Photoshop and GIMP is here!

Android UI Design Kit for Google Slides 1.0 [Free Template]

Google Slides UI Design Kit 1.0

After I published Android UI Design Kit for Microsoft Powerpoint last month, I have gotten some really nice feedback about the usefulness of the design kit in a tool that they are easily familiar with, and some of them show interest in a Google Slides version. I had a look into Google Slides back then, and I was decided not to do a Slides version due to the lack of Roboto font available in Google Slides (perhaps I missed it back then, but I didn’t see any other extra fonts).

After the Google I/O, I discovered that it is possible to use Roboto font (only Regular and Condensed, but they are already sufficient for mock up purpose) in Google Slides, therefore I went ahead and try to convert my PPTX Design Kit to Google Slides, thinking that it will be just a 10 minutes work – turn out it wasn’t that trivial.

Apart from missing UI elements and text misalignment which can be easily fixed, the main issue is about the output. When I export a mock up screen from Google Slides to PNG format, it always seems to be slightly off from the ideal resolution (768×1280), and in Google Slides, there is no option for the user to change the slide size. So I ended up spending the whole morning doing micro-adjustment on the slide size in Microsoft Office, then upload to Google Drive and convert it to Slides, in order to find the best fit size that can export the screen at perfect resolution.

What’s inside?

Similar to the Powerpoint version, most of the building blocks (Action Bar, Buttons, Radio Buttons, Progress Bar etc.) are inside this Design Kit, including the new Navigation Drawer indicator. This Design Kit is highly optimized for Google Slides in order to have a proper output of image resolution. It has been tested with offline mode, so you can work on some app design mock ups whenever you want!

Download

I have uploaded it to Google Docs Template so you can immediately use the template in Google Slides (Please access the template on desktop browser, or if you are on mobile, request a desktop site. Apparently Google Docs Template page doesn’t work with Mobile Browser Agent): Android UI Design Kit for Google Slides. Don’t forget to rate and share it if you find it useful!

Alternative link without Sign In: Android UI Design Kit for Google Slides Preview

Android UI Design Kit PPTX 1.0 [Free Download]

Last month I published Android UI Design Kit PSD 4.2 that can be used as a base for Android Designers/Developers to design Android app in Photoshop, and since then it has been accumulated a total of 8,100+ downloads within a month. It shows that there are more and more people interested in Android Design, which is something that I am really excited to see.

Nexus 4

Nevertheless, for quite some time, I have been thinking to have an alternative to allow even more people to experience Android Design, and today, I am happy to announce an Android UI Design Kit in Powerpoint format has been released, which is created using Microsoft Powerpoint 2013 (Windows).

Why Microsoft Powerpoint?

Microsoft Powerpoint, of course, doesn’t meant to be an UI design tool, but surprisingly there are many people using it to create nice UI mock up (and they can be interactive too), due to the fact that it supports layering and grouping, plus it has vector shapes, which are sufficient to create some nice mock up. Obviously, it is still pretty limited comparing to Adobe Photoshop (or any other advanced design applications), but heck, I am pretty sure there are more people owning Microsoft Powerpoint compared to Adobe Photoshop, so designing Android app is probably just a click away.

I understand that the Apple Keynote seems to be a better tool for such UI design task, but due to the fact that I am using Windows primarily, so I created the design kit in Microsoft Powerpoint.

Layers

What’s inside?

Most of the building blocks (Action Bar, Buttons, Radio Buttons, Progress Bar etc.) should have been included in this PPTX Design Kit. Do let me know if you notice otherwise.

I have also included a slide of Google Now made (almost) entirely with Microsoft Powerpoint to show some awesome things that can be done without needing any advanced tools.

How to use it?

Really simple. Just extract the downloaded archive, then open the .pptx file, and you can start designing right away. It might take some time to see how’s the layering and grouping works, but they should be pretty simple to learn. ┬áDon’t hesitate to leave a comment if you need some help in achieving some elements that you saw in the design template.

Remember to install the Roboto Font before using this design template. Almost all of the texts in the design template used fonts in Roboto Family.

This PPTX Design Kit is made with the specific dimension at 96dpi, when you export the screens to a .png file, it will be exported at the resolution of 768×1280 – the resolution of Nexus 4 screen. You can then frame the exported png file at the Device Art Generator┬áand you are ready to impress people with your design!

Note: It is meant to be used with Windows version of Microsoft Powerpoint. Nevertheless, it is usable on Powerpoint for Mac, although the font type used have to be replaced with the proper one (due to the different font naming system). It can also be used in Apple Keynote, however, you need to change the slide size to 768×1280 manually before the design and export the screen.

Download

As always, it can be downloaded from my MediaFire account: Android UI Design Kit PPTX 1.0. If you need some Action Bar icons during the design, download Action Bar Icon Pack #1, the xhdpi icon fits perfectly with this Design Kit.

Now (almost) anyone can experience Android Design. Happy Android Designing!

Android UI Design Kit PSD 4.2 [Free Download]

In August 2012, Android ICS/JB Photoshop GUI Design Kit 3.0 was published with some new Jelly Bean UI elements, and until today, the Design Kit has been downloaded over 21,000 times since the very first version back in December 2011 – not a huge number, but it is putting a smile on my face. It’s really nice to see there are many designers interested in Android Design and used the Design Kit to┬ákick-start┬átheir design work in Android app. A big thank you to everyone that is using the design kit and I really hope it helps in your Android app design workflow in some way.

Design Kit 4.2 Preview

And today, I have finally updated the Android UI Design Kit PSD to version 4.2, with the size of Nexus 4 screen resolution (768×1280), as requested by many supporters. Besides the resolution update, I have also added a few new UI elements into the Design Kit:

  • Cards (Google Now)
  • Crouton
  • Drawer Menu
  • Quick Return
  • Undo Bar
  • Gestures

Other than that, all the UI elements in the Design Kit are now made pixel-perfect (I hope I didn’t miss any of them), along with some corrections on the font size and UI element. I have removed the Application Design Templates (ADT) PSD file that is included in 3.0 because I think it might not as useful as I think, but do let me know if you are using it and you wish to see an update for that as well.

Download

Android UI Design Kit 4.3 for Photoshop and GIMP is here!