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

8 thoughts on “Android UI Design Kit for Google Slides 1.0 [Free Template]

  1. Not found when click the link to download. Beside that, thanks for sharing your great works with us.

    1. Hey,

      I am afraid that you have to sign in your Google account first before accessing the template since it is now under Google Drive. I have updated the post with an alternative link, though you would still have to sign in your Google account before you can use it on Google Slides.

      Taylor Ling

    1. Hey Maark,

      May I know what’s the use case of a PNG kit? I am not really sure about a PNG kit because there is basically no flexibility in it, but let me know what you think and I can probably look into that.

      Taylor Ling

  2. You definitely have to take a look at Pencil : http://pencil.evolus.vn/
    A real Android lib (I mean, yours is so awesome) for Pencil could be really useful!

    (Pencil lib are called ‘stencils’, composed by an xml file containing only basic geometric elements and images in base64.)

    1. Hey,

      Thanks for sharing! Sure, I definitely know about Pencil, they are super awesome! If they can work with any browser (now only with Firefox) offline, I think it will be even more awesome!

      Taylor Ling

      1. Pencil work also as a stand alone software (Windows / Linux / Mac).
        And I think Pencil need some good Android 4+ Stencils:)

Leave a comment