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!

Printable A4 Screen Flow Sketch Template [Free Download]

Featured

Update 07 January 2013: Added Screen Flow Sketch Template for Tablet (Nexus 10). Download link below.

During the new year of 2013, I have released a PSD template for wireframe/mock up screen flow, which I hope can help a little bit in creating an app screen flow easily in digital format. And today, considering there are still many people love to do sketching for wireframe/mock up, I have created a Printable A4 Screen Flow Sketch Template in PDF Format, so you can easily sketch the screen flow on the paper, and because each screen is considerably small, you only need to focus on the main interaction area for the flow, so details are not needed.

I strongly recommended to use this one to sketch out your app idea before going into details since the navigation/screen flow will be there when you are expanding your idea, eliminating some confused/undetermined navigation between screen.

Printing Tips

  • Use Fit option to print (Don’t use exact size)
  • Print in Black and White
  • Use High Quality (This won’t use much ink)

Download

I have placed it in my Mediafire account and it’s free to download:

If you have any issue downloading it, let me know and I will send you a copy.

Wireframe Screen Flow Template [Free Download]

Update: I’ve updated the template to 1.0.1 to fix an issue that all screens will be using the same content. Have to blame myself for the lazy duplication. At the same time, Wireframe Screen Flow Template using Nexus 4 is also available now.

Inspired by a question from the group member within a private G+ community – Android Designers, I decided to spend some time to create a Wireframe Screen Flow Template for Adobe Photoshop that can help Android Developers/Designers to create a complete screen flow for wireframes or mockups. Below is the preview of the template that I have made:

Wireframe Screen Flow Template 1.0

What’s inside

  • 12 mock up screens (They are smart objects so it’s very easy to drag-and-drop your mock ups)
  • Gestures
  • Screen flow arrows (One level down/up and two levels down/up)

How to use

  1. Create all your mock ups or wireframes in 1280×720 or 1280×768 (Photoshop GUI Design Kit recommended) including the Nav Bar and Status Bar. Save them as png.
  2. In the template, select one of the mock up screen folder. Look for Mock Up Screen (EDIT CONTENT). Right click on it then select Edit Contents.
  3. In the new screen, drag-and-drop your mock up. It should fit nicely. Ctrl+S to save, then close it. You should see the mock up appears in the screen flow template.
  4. Select your preferred gestures and screen flow arrows within those folders for a complete screen flow mock up.

Download

I have placed it to Mediafire and it is free to download:

If you have any issue downloading it, let me know and I will send you a copy.

This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

Action Bar Icon Pack #1 [Free Download]

In Android Design, Action Bar is one of the important UI elements for great app. Besides providing navigation feature to the user, Action buttons in the Action Bar is crucial in user interaction as well, which provides great user experience if it’s done right.

Previously I have published the Action Bar Icon Design Photoshop Template which can be used as a design template for Action Bar icons and export it for all screen densities. Creating an icon, sometimes, is a pretty enjoyable experience – thus, I have used the design template to create 20 Action Bar Icons over the weekend (preview below) which have both Holo Dark and Holo Light version, as well as for all screen densities. The icons for xhdpi screen density are ready to be used in the Android ICS/JB Photoshop GUI Design Kit 3.0.

That’s not all. In this Icon Pack, I have also included 142 stock Action Bar and Tab Icons which are fully generated at the Android Asset Studio for quick mock up/development usage. Sure, I am aware that they are already included in the official Action Bar Icon Pack, but I prefer a slightly different folder structure in organizing the icons (as well as ldpi version), therefore I have them included in this icon pack. If you already have the official one, you can ignore that folder in this icon pack. 😉

Download

I got it uploaded to Mediafire and it is free for commercial use under CC BY 3.0: Android UI/UX Action Bar Icon Pack #1.

More Action Bar Icons are in the draft stage and will be included in the subsequent icon pack. If you are looking for more professional Android icons, check out the awesome Android Developer Icons 2 at androidicons.com.

This work is licensed under the Creative Commons Attribution 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

Action Bar Icon Design Photoshop Template [Free Download]

Heavily inspired by Sebastian Tibichi’s Google Play Icon Template, this Action Bar Icon Design Photoshop Template is made for Android App Designers/Developers in designing and generating Action Bar Icon in different dpi. While there is already an awesome online Action Bar and Tab Icon Generator in Android Asset StudioAction Bar Icon Design Photoshop Template goes a little bit further – It can preview your designed Action Bar icon in properly sized Action Bar (which is customizable), and it can be used offline.

How to use?

1. Edit the Action Bar Icon Smart Object set at 512×512. Design the icon. Save the smart object. Remember to set the following properties for the icon based on the Holo theme:

  • Holo Light – Icon Color:  #333333 and 60% opacity
  • Holo Dark – Icon Color:  #FFFFFF and 80% opacity

2. Check all the icons generated for different dpi. If everything looks OK, hide the folder HIDE THIS BEFORE EXPORT before export.

3. Use the option Save for Web & Devices. For the dropdown option Slices, select All User Slices. Save to the preferred directory. 4 images at different resolution for different dpi (64×64, 48×48, 32×32, 24×24) will be generated.

Download

You can download Action Bar Icon Design Photoshop Template for free. If you can’t download it from MediaFire, I have also published it at my Deviantart account.

Feel free to use it and share this to any awesome Android app designers/developers! Don’t hesitate to leave a comment here if you have anything in mind!

Android ICS/JB Photoshop GUI Design Kit [Free Download]

Update: Android UI Design Kit PSD has been updated to 4.2!

Back 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 hope it already helped some app designers/developers in making quick app mockup. And since Jelly Bean is released, I have decided to update the design kit with some new Jelly Bean UI elements, and a brand new stuff in it – Application Design Templates (ADT).

Details

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 (very minor though) 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, you can read more here.

Download

Update: Android UI Design Kit PSD has been updated to 4.2!

If you don’t prefer 4.2 for some reason, you can still download version 3.0: Android ICS/JB Photoshop GUI Design Kit 3.0. If you can’t download it from Mediafire, I got it published in my Deviantart page as well.

More Android design resources can be found at Official Android Design Downloads Section. This GUI Design Kit is made using the latest Android Roboto Font, so grab the font and install them as well!

Share this to any awesome Android app designers/developers! Don’t hesitate to leave a comment here if you have anything in mind!

Printable A4 GUI Sketching Kit 3.0 – Nexus S, Galaxy Nexus, Nexus 4, Nexus 7, Nexus 10 and Xoom

UPDATE 13/11/2012: To celebrate the release of the new Nexus 4 and Nexus 10, Android GUI Sketching Kit is now updated to version 3.0! It has been added with Nexus 4 and Nexus 10 sketching templates, as well as added the guide for Split Action Bar for Galaxy Nexus and Nexus 4.

UPDATE 27/09/2012: The Android GUI Sketching Kit is mentioned in the 3rd episode of Android Design in Action! To thanks Roman Nurik and Nick Butcher for the shout-out, I have spent some time updating the sketching template to version 2.0, which also includes the Xoom template! I have removed the title and description fields in the templates, and introduce the guide for Status Bar, Action Bar, Navigation Bar, and Combined Bar (for Xoom). Hope you will find it useful!

Besides making the Android ICS GUI Design Kit that can be used in Adobe Photoshop, I also think (and love!) that sketching is a big part of UI/UX designing, while it can be messy, but it definitely help in quick idea visualization and aid in brainstorming.

So here I come up with a few sketch templates for Android App, using the Samsung Nexus S, Samsung Galaxy Nexus and Asus Nexus 7 as the sample devices, and put them on an A4-sized PDF with almost real-life size so designers can sketch the app with the size as close as the real device (don’t blame me if there is one or two pixels off! /jk/).

Android app designer, go create some awesome apps with the GUI Design Kit and GUI Sketching Kit!

Download

Download Android GUI Sketching Kit 3.0

New to Android Design/Development? Here’s a list of great resources and references available

Android Development Tutorial and Reference

Android Design Guideline and Design Resources

Android Design Patterns, UI, Layout

Android Apps Showcase and Collections

Android Newsletter

Feel free to drop me some link for any awesome resources for Android Designers and Android Developers!