Category: Resources

Preview Your iOS/Android App Icon Design with Iconpreview.com

iconpreview.com

Most of the time, besides UI design, most designers will be tasked to design the launcher icon to go with the app, and I think there is no better way to preview the design than having them shown at the real device home screen (at least for me).

Which is why I have been working with my friend, Henry Lim (a talented web tech GDE) to create a simple web app – iconpreview.com, which works for both iOS and Android (only Android 7.1 and below, adaptive icon not supported).

It’s really simple – just navigate to iconpreview.com, select your launcher icon design with appropriate format and size (PNG, 192px×192px), give it a name, upload, and it will generate a link and QR code for your uploaded icon. Browse to the page with Safari/Chrome, then ‘Add to Home Screen’. Voila!

Quick words on how it works

iOS

For iOS, it’s rather simple. It is simply a web shortcut, so it works just like the usual web shortcut in iOS. So you just need to upload a complete square icon (just like how you provide them to Apple), and the masking will be done by the system.

Android

Android is a little bit tricky. Initially, it was meant to be a web shortcut as well, but if we simply add it to the home screen via Chrome, there will be a chrome shortcut icon added to the bottom right corner, which is obviously less than ideal for icon design preview.

We then look for other ways that can fix this issue, and Henry came up with a brilliant thought of having it added as a simple Progressive Web App (PWA), and through this way, the icon design can be previewed nicely at the home screen. The only caveat is that each time you add the new icon to the home screen, it is treated as an app so to remove it, you will need to uninstall it, as opposed to remove the shortcut from the home screen. We are satisfied with the solution though 🙂

Note on Adaptive Icon: The icon preview, unfortunately, doesn’t work on Android 8.0+ that uses adaptive icon because PWA doesn’t use the Adaptive Icon system (at least from what I tried, if you know how to do it better, let us know!), so the icon will just be placed in the center of a white icon base. If you want to preview how the adaptive app icon will feel at the home screen, you need to have a device running 7.1 or below, then upload the icon with the mask already applied.

It’s currently in Beta as we aren’t sure if there will be any more issue, but feel free to share it out! iconpreview.com

Posted on by Taylor Ling 1

#DesignProtip – Keyline Pushing app + Layout Bound

Designprotip.png

I often got asked how do I inspect an app from design perspective, especially on the layout, alignment, keylines etc., so I thought to share this in my blog. Sometimes we are able to spot some issues by just looking at it, but with some nifty tools, the design inspection can be done much easier.

Below screenshot is what I usually see when I do a design pass on the static design implementation. It’s an IMDb app screenshot with keyline grid + layout bound shown, which is very useful to spot misaligned elements and incorrect paddings.

IMDb in Keyline Pushing and Layout Bound

Tools

  1. Keyline Pushing app by Faiz Malkani – This awesome free app will print the 8dp gridlines on your screen which have the proper keylines recommended in Material Design. It also has some other gridlines like 4dp typographic grid which can be very useful sometimes. (Update: Another new app called Material Cue can do the same thing as well)
  2. Show Layout Bound option in Developer Options –  This will show the bound of each element in blue lines (clip bounds), red lines (optical bounds) and pink area (margins). This helps a lot to spot unnecessary padding or misaligned bound. To access this option, turn on developer mode in Android. Then Settings > Developer options > Show layout bounds.

How this can help Android developers?

Few months back I introduced these 2 tools to my developer friends, and below are their comments on this tip:

It is useful to see the view paddings and margins, and immediately understand which view is causing the keyline misalignment. However, for standard views, paddings and margins have an expected behaviour so you can fix the issues without the layout bounds. Layout bound option can be really useful for custom views and custom groupviews. For these views, you can do whatever you want with the paddings, so having the layout bounds visible helps understand how your view occupy the space, which is useful to have the correct keylines.

It helped me mostly to check that clip to children works to prevent shadow, animation, and ripple effect cut-off. Also I am able to quickly check that all cards/pictures are correctly aligned based on the key line and the left/right edge of the layout bound. For layout bound, it helps to check that the touch target of images has been extended and is not only limited to the image edges. It also helps ensuring that some views ‘visibility’ are gone and not just set to invisible. With keyline pushing app, it is mainly to ensure that the Material Design spec has been fulfilled.

Happy designing and developing!

 

Posted on by Taylor Ling 0

UI Animation in Photoshop – Tutorial #2

Blog-Pic

In the first UI Animation in Photoshop tutorial, I have shown the way to do simple animations in Photoshop like moving, scaling and style changing – if you are new to this and haven’t check that out yet, I recommend you to look into Tutorial #1 before this.

In this second tutorial, I will share my experiences in applying easing into the animation made with Photoshop. Special thanks to Jovie Brett Bardoles for sharing his manual way of applying easing in his animations, which inspire me to explore and dig into the Timeline feature in Photoshop.

Continue reading →

Posted on by Taylor Ling 8

431 Material Design Icons in Photoshop Custom Shape format (.CSH) [Free Download]

Banner

It has been a few weeks since Material Design announced during Google I/O this year, and it’s great to see many developers and designers are excited about it – that’s including me, of course.

I have seen people started to release design resources for Material Design (slowly, but yeah), and it’s awesome! I have started to look into Material Design, and I thought it will be nice to have the new icons sit in my Photoshop Custom Shape drawer (for my usual design flow), but so far, none seems to convert the icons from SVG format to CSH format, so I’ve spent about half a day to do the conversion one by one (and removed the redundant ones), and here is it! Thanks to Shreyas Achar for his archive of extracted Material Design SVG icons!

Download

431 Material Design Icons in Photoshop Custom Shape

Go awesome with these!

Posted on by Taylor Ling 10

Printable A4 Android Wear Sketch Kit [Free Download]

Android Wear Sketch Kit

Besides Material Design, I am sure everyone is also pretty excited about the new Android product family, especially Android Wear – so here’s a simple PDF sketching kit for Android Wear in both LG G Watch and Moto 360. I have tried to have them as close as the real physical size of these watches, so when you print the PDF, please select A4 size and print at actual size.

Unleash your Android Wear creativity with these!

Get Android Wear Sketching Kit PDF

Posted on by Taylor Ling 0

Android Design Mock Up Preview Kit for Photoshop and Powerpoint [Free Download]

Android Design Mock Up Preview Kit

I was working on a client request for a realistic screen preview in a device for marketing purpose, and I realized while there are so much love for the iPhone/iPad mock up, there are rarely such mock up preview kit for Nexus devices for free. So while I am working on that request, I also made the Android Design Mock Up Preview Kit (Nexus 5) freely available for any use.

What to expect

  • 1 x Adobe Photoshop file (.PSD)
  • 1 x Microsoft Powerpoint file (.PPTX)
  • My left hand (in the image, not the physical one)
  • Nexus 5 device with replaceable smart object for the screen

How to use

It’s rather straight forward to use them. You should have the screenshot/mock up image (ideally in PNG format) ready with the resolution of 1080×1920. Android UI Design Kit for Photoshop 4.4 can output at this resolution.

  • Adobe Photoshop version: Open it up, double click on the smart object with the label ‘REPLACE SCREENSHOT HERE’, paste the screenshots or mock up in it, and save. The screenshot should be reflected in the preview kit. Drop a background image, apply some light Gaussian Blur on it, and you are good to go! If it’s necessary due to brightness difference, adjust the color overlay effect for the hand layer.
  • Microsoft Powerpoint version: Open it up in Microsoft Powerpoint 2013, right click on the hand layer, send to back. Then right click on the screen layer > change object > select the screenshot/mock up. The screen should be changed to your selected. Send the hand layer to the front. Drop a background image, send backward, apply blur, and you are done! You can turn on the Selection Pane to make the layer management easier.

Some examples

If you are wondering how this preview kit can be used, below are some examples (click on them to view full size):

Example 1

Example 2

Download

As usual, it is ready to download via my Mediafire storage space – Android Design Mock Up Preview Kit.

Hope this helps in creating some awesome marketing material! I will try (no promise) to release a few more variants of such preview kit if I am able to do so.

Posted on by Taylor Ling 2

Android Wear UI Design Kit for Photoshop 0.1 [Free Download]

Haze Watch on Moto 360

As you might have aware, Google has announced Android Wear specifically designed for wearables, and I am really excited about it – new form factor and new UI/UX to explore (and the sexy Moto 360).

I was playing around with mock up on a small app called Haze Watch (to monitor Haze condition in Malaysia), and it’s really fun – with that very limited screen estate, it’s really important to only show crucial information that is meant for a glance, not read – and this design principle is well explained in the official Design Guideline. I am really looking forward to see how Android Wear change the very new wearables market, I guess exciting time ahead?

Android Wear UI Design Kit for Photoshop 0.1

Then I was thinking, why not a simple design kit for those who want to play around with this new form factor which has a very small screen estate? So I decided to make one very simple Android Wear UI Design Kit for Photoshop. What you can expect from it:

  • 2 Adobe Photoshop files – Square (280×280) and Round (320×320)
  • A few different layout like Incoming Notification, Notification Stack, Contextual Card etc.

That’s it! It’s not meant for accurate mock up as of now since I don’t have the design specs, but it’s good enough to play around and get prepared for the next wave.

Download

You can download it from my Mediafire account Android Wear UI Design Kit for Photoshop 0.1. For the round one, it goes really well with Spiderfly Studio Moto 360 Mock Up tool for Photoshop (though you might have to do a little bit of resizing)!

Posted on by Taylor Ling 5

Android UI Design Kit for Photoshop 4.4 [Free Download]

Android UI Design Kit for Photoshop 4.4

Happy New Year folks! In the past few weeks, I have worked slowly on the new Android UI Design Kit for Photoshop 4.4, which is a Nexus 5 version, and today I am happy to announce that it is ready! This time it only comes with Photoshop version though, I am still working on the GIMP version, mainly on replacing the text layers (which I just found out recently the text layers from Photoshop won’t work in GIMP!). If there is any GIMP gurus would like to help out replacing the text layers, do let me know in the Comments section.

This update the Design Kit to Nexus 5 resolution (Portrait Mode – 1080×1920), with several new building blocks added in it.

What’s new in 4.4?

  • Action Bar – PullToRefresh
  • Action Bar – NotBoring
  • HoloGraphLibrary
  • Scroll Bar
  • Search Action Bar
  • Contextual Action Bar

Other than that, every building blocks from the previous version are included, making it the most complete Design Kit to date.

Tips

  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit. It’s a must. If you doesn’t want to install them, you won’t be able to use the Design Kit at full potential.
  • The recommended way to start designing is to use the Quick Start file, then Shift+Drag the required UI elements from the Building Block file
  • Nexus 4 and Nexus 7 Design Kit is available in the previous version

Price

Free. As I mentioned previously, getting every designers to use this and create awesome high fidelity mock ups will already be a very good motivating factor.

However, if you think I deserve to have a cup of coffee from the work that I have done, you can always support me via Paypal, so that I can maintain the chakra to produce awesome stuffs for the community.

Support via Paypal

Download

As usual, the Design Kit is made available in my MediaFire account. Go get it and be awesome!

Android UI Design Kit for Photoshop 4.4 [Nexus 5] ~14MB

If you are using GIMP and wanted to use the WIP version, feel free!

Android UI Design Kit for GIMP 4.4 [Nexus 5][WIP] ~9MB

Posted on by Taylor Ling 28

Android UI Design Kit for Photoshop and GIMP 4.3 [Free Download]

Android UI Design Kit 4.3

Today I am happy to announce that Android UI Design Kit has been updated to 4.3, and this is my most complete design kit for Android Designers/Developers to date. And awesome thing always comes in pairs:

  • Supports Adobe Photoshop and GIMP
  • Nexus 4 and Nexus 7 (Basic) Design Kits
  • Both Nexus 4 and Nexus 7 have Portrait and Landscape Templates

Other than that, there are also two new files in the Design Kit: An Android Holo Color Collection swatch (complete with all different levels), and a document containing link to some libraries for development. One of the reason to include such document is to introduce the Android UI Design Kit users about some nifty libraries that the developers can use to achieve the design in the mock up — which hopefully can easily synchronize the design idea between the designer and the developer.

What’s new in 4.3?

  • Building Blocks (Nexus 4 version only)
    • Settings Page
    • Font Size Reference to Developer
    • Empty State Examples
    • Showcase View (Works only on Photoshop version)
    • Random Text List Styling
    • New Date, Time, Color Pickers
    • About Page
    • Cards Library
    • New Stacked Tabs (Similar to Google Play)
    • Glass Action Bar (Photoshop only)
    • Contextual Action Bar
    • Search Action Bar
    • Wizard Pager
  • Files
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Building Blocks
    • Photoshop PSD (or XCF for GIMP) of Nexus 7 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Gestures
    • PDF of Link to Libraries
    • Holo Color Swatch (Photoshop only)

Tips

  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit.
  • The recommended way to start designing is to use the Quick Start file, then Shift+Drag the required UI elements from the Building Block file
  • Since both Nexus 4 and Nexus 7 template are now in xhdpi, some of the UI elements can be easily reuse with minor adjustment
  • You can only create awesome mock up from this Android UI Design Kit

Price

Initially I was very tempted to charge for this new update since it does taken up part of my free time, however, I changed my mind eventually — I wanted this to be used by everyone that is designing Android app using Adobe Photoshop (and now GIMP), either professionally or as a hobby – so charging a price might be able to grab me a cup of coffee or two, but I am more obsessed with the download number (can you believe that?) and the social connections I made from providing this download. So it will be remain as a Free Download.

However, if you think I deserve to have a cup of coffee from the work that I have done, you can always support me via Paypal, so that I can maintain the energy to produce awesome stuffs for the community.

Support via Paypal

Download

As usual, I have made this new Design Kit available at my MediaFire account. File size is larger this time around, but I can’t seems to compress all the awesomeness to a smaller archive size.

Android UI Design Kit for Photoshop 4.3 (~30MB)

Android UI Design Kit for GIMP 4.3 (~20MB)

There is also an updated Android UI Design Kit for Photoshop 4.4 at Nexus 5 resolution (1080×1920), so if you prefer to design in a larger size with latest UI elements, grab that as well!

Android UI Design Kit for Photoshop 4.4

Posted on by Taylor Ling 17

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!

Posted on by Taylor Ling 13