With the latest update in Material Design guideline, Google Design team has shared their design approaches on the product icon design – it’s a comprehensive and pretty complete icon design guideline (at least for me) and I believe many Android Designers are excited about it, that’s, of course, including me.
After reading through the guideline, I wanted to try something out of it, and Unclouded (a Cloud Storage Management app developed by Christian Gollner and partially designed by me) came into my mind. So I looked at the current icon, and start imagining how it will look like in Material-style. And of course, to make sure the icon is properly sized, I first looked into the 4 suggested keyline shapes and determined that the horizontal rectangle is the right keyline shape to go. This is important because it will help to standardise all the launcher icons at the right size to achieve consistency in terms of visual alignment for the platform, yet unique with their silhouette.
Disclaimer: This post is mainly about the author rant about bad mobile app design from the largest bank in Malaysia, but it is also a great example of don’ts in mobile app design.
It’s September 2014. Material Design was introduced few months ago during Google I/O 2014. The predecessor – Holo Design was introduced late 2011 together with the launch of Ice Cream Sandwich (Android 4.0), which is about 2-3 years ago, and it’s getting matured as time goes. It’s
probably not wrong to expect any Android apps published in the year 2014 embraced with all the lessons that we have learnt in Holo Design and craft the best Android experiences for the user.
Except it’s not for Maybank, the largest bank in Malaysia, and one of the world’s top 100 banks.
Last week, they have officially launched their revamped mobile banking app, claiming that it has the best mobile banking experience compared to the previous version. It does seems to have a refreshed design – except it’s probably one of the worst and most unacceptable mobile design that I ever seen. And it’s 2014.
I have been using Photoshop to make UI animations for my work and it works surprisingly well (at least for me). Of course, Adobe After Effect is still the best tool to create complex and awesome animations, but with Photoshop, you can still create some simple and high quality UI animations to preview the animation idea to others. With some combination of animation properties, you can definitely create some rich animations that is sufficient for discussion. There are certain limitations in Photoshop compared to After Effects (of course!), but for someone who wanted to just use one tool for UI Design + simple UI Animations, Photoshop is one of the best tool that you can get (even if it’s not really designed for UI design).
This tutorial #1 will cover some basic procedures to create simple animations using the Timeline feature in Photoshop CS6+ (no GIMP or older Photoshop), so if you are totally new to this, I hope you will find this tutorial helpful for your first step in making UI animation using Photoshop. Let’s begin!
Unclouded by Christian Göllner, an app that helps to analyse and clean your cloud storage (Dropbox and Google Drive, for now) has just recently out of beta, and I have the honor to work together with Christian on the design for this app. I was really impressed by the app quality when I first received the early build of the app – without hesitation, I told him that I wanted to work together to bring this app to the level of awesomeness. It is super amazing that the app has been featured by Android Police, TechCrunch, CNET, Lifehacker, and xda-developers, and these boosted our confidence about the design and development direction of the app.
In this post, I would love to talk about some design details that we have worked hard to fine tune in order to craft the ‘Unclouded’ experience that we have visioned.
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!
431 Material Design Icons in Photoshop Custom Shape
Go awesome with these!
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
While this blog post titled ‘How would I further improve TuneIn Radio app’, but I thought I would also like to take this opportunity to touch on the topic about consistency in visual design for mobile apps. No, this isn’t a fight between flat, skeuomorphism, gradient etc. – this is about embracing the consistency of visual design for better aesthetic integrity of a product regardless of the visual styling you opt for.
Visual Consistency is for better aesthetic integrity
One of the graphic design principles that I found here fit the context very well:
While creating rhythms and variations from page to page, one must also remember to maintain an overall aesthetic integrity. The purpose of graphic design is to communicate, not dazzle, and an inconsistent design will result in decreased user effectiveness. This means keeping individual visual and typographic elements simple and clear. It also means applying them uniformly, so that the connotations of a particular type style, or the results of interaction with a particular graphic element, are independent of their context. There should be an overall visual system to the text, carefully considered in the first stages of design, that brings together the elements into a coherent whole.
And of course in Android Design Guideline about branding:
If you take this approach, make sure your (brand) styling is applied to every single icon in your app.
Keep it Consistent
Let’s have a look at the things that I would improve on this app (most of them are about visual consistency):
- Remove the useless splash/loading screen
- Need design consistency on Android UI elements (Nav Drawer indicator has inner shadow, overflow icon doesn’t have it, and both of them are in dark colors)
- Use tabs instead of Nav Drawer. Here’s why
- Use larger text size in general
- Make full use of space for interaction rather than using hyperlinked/underlined text
- Use appropriate (touch-friendly) size for interact-able elements
- Need design consistency on similar items for maximum familiarity and predictability
- Show hint if the horizontal list is scrollable
- Avoid unnecessary paddings
- Need consistency on font type used in the app
- Need design consistency on icons (some are flat, some have an outer bevel effect, some have inner shadow)
- Avoid truncated texts if it’s possible
- Use blurred background in a proper way
- Slider that can’t slide? Not needed.
- Be aware of the bad readability caused by font color choice and background
- Gradient Now Playing bar? Looks old and just out of place.
- Use animations to correlate between the full mode and minimize mode of Now Playing
- Car mode doesn’t have to look THAT bad
What do you think? Do you like the redesigned version of TuneIn?